{% if us_user_grow or us_user_supplier %}
<div class="banner-wrapper">
    <div class="banner-container">
        <div class="banner-image-wrapper">
            <img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/GWW+Logo.png" alt="" class="banner-img">
            <div class="deatils-container">
                <div class="banner-descirption text-center">Email <span class="bold-text">supplierdevelopment@walmart.com</span></div>
                <div class="banner-descirption text-center">for additional support.</div>
            </div>
        </div>
        <div class="banner-content-container">
            <div class="banner-descirption">
                Grow with US is going to be really really awesome!  Sherry and Chrissy are rockstars! :-) <span class="bold-text">Grow With US</span> will help prepare you for success.
            </div>
            <div class="banner-descirption">
                Learn foundational business skills in our Business Fundamentals and Advanced Business pathways.  Explore the skills necessary for a successful experience working with Walmart in our Retail Ready Capabilities and Walmart Ways of Working pathways.
            </div>
        </div>
    </div>
</div>
{% elsif mexico_user %}
<div class="banner-wrapper">
    <div class="banner-container">
        <div class="banner-image-wrapper">
            <img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/Crece-con-Walmart-Blanco.png" alt="" class="banner-img">
            <div class="deatils-container">
                <div class="banner-descirption text-center">Correo electrónico <span class="bold-text">contacto@crececonwalmart.com</span></div>
                <div class="banner-descirption text-center">para soporte adicional.</div>
            </div>
        </div>
        <div class="banner-content-container">
            <div class="banner-descirption">
                Crece con Walmart es un programa de desarrollo de proveedores que tiene como objetivo trabajar con personas que lideran micro, pequeñas y medianas empresas en México para ampliar sus capacidades empresariales y digitales.                                                                                                                                                     
            </div>
            <div class="banner-descirption">
                Por medio de módulos de aprendizaje autogestionado, sesiones grupales en vivo y mentorías uno a uno, se busca apoyar a empresarias y empresarios para fortalecer sus capacidades y habilidades de venta en línea.
            </div>
            <div class="banner-descirption">
                Crece con Walmart te permite desarrollar, aprender y conectar para, juntos, hacer que tu negocio llegue al siguiente nivel. 
            </div>
        </div>
    </div>
</div>
{% elsif india_user %}
    <div class="banner-wrapper">
        <div class="banner-container">
            <div class="banner-image-wrapper">
                <img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/Vriddhi+Logo.png" alt="" class="banner-img">
                <div class="deatils-container">
                    <div class="banner-descirption text-center">Email <span class="bold-text">contactus@walmartvriddhi.org</span></div>
                    <div class="banner-descirption text-center">for additional support.</div>
                </div>
            </div>
            <div class="banner-content-container">
                <div class="banner-descirption">
                    Walmart Vriddhi is a supplier development program that aims to work with 50,000 Micro, Small and Medium Enterprises (MSMEs) in India to expand their domestic capabilities.
                </div>
                <div class="banner-descirption">
                    The program offers the opportunity to develop through on-demand learning and personalized mentoring. Participants also have support onboarding to Flipkart Marketplace.
                </div>
            </div>
        </div>
    </div>
{% endif %}

<style>
    .banner-wrapper {
        padding: 10px;
        border-radius: 10px;
    }
    .banner-img {
        width: 100%;
    }
    .banner-container {
        display: flex;
        align-items: center;
        gap: 40px;
        background: #001E60;
        padding: 20px;
        border-radius: 10px;
    }
    .text-center {
        text-align: center;
    }
    .banner-descirption {
        font-size: 20px;
    }
    .bold-text {
        font-weight: 700;
    }
    .deatils-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .banner-image-wrapper {
        width: 40%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .banner-content-container {
        width: 60%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    @media only screen and (max-width: 900px) { 
    .banner-container {
    flex-direction: column;
  }
}
@media only screen and (max-width: 500px) { 
    .banner-descirption{
        font-size: 17px;
  }
}
</style>