<div class="welcome-section-container">
    <div class="banner-wrapper">
        <div class="banner-container">
            <div class="banner-image-wrapper">
                <div style="padding:56.25% 0 0 0;position:relative;">
                    <iframe src="https://player.vimeo.com/video/1079908425?h=e98c3e5ac7&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Welcome to Walmart Intro Video"></iframe>
                </div><script src="https://player.vimeo.com/api/player.js"></script>
            </div>
            <div class="banner-content-container">
                <div class="banner-descirption">
                        <b>Welcome to Walmart!</b><br><br>
                        Are you a new Walmart supplier?<br>
                        Are you ready to begin the onboarding process?<br>
                        Are you not sure where to start?<br><br>
                        Our <b> Welcome to Walmart </b> learning paths are here to help!  In this series we will guide you through the entire process from initial onboarding procedures through getting paid.
                </div>
            </div>
        </div>
    </div>
    <!--
        <div class="welcome-section-wrapper">
            <div class="video-container">
                <video width='100%' height="400px" controls autoplay muted>
                    <source src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/video/Welcome+to+Walmart+Intro+Video-720p-241213.mp4">
                </video>
            </div>
            <div class="welcome-content-wrapper">
                <div class="introduction">
                    Welcome to Walmart!
                </div>
                <div class="get-started">
                    <div class="get-started-list">
                        <div class="extra-margin">
                            <div class="get-started-item">Are you a new Walmart supplier?</div>
                            <div class="get-started-item">Are you ready to begin the onboarding process?</div>
                            <div class="get-started-item">Are you not sure where to start?</div>
                        </div>
                        <div class="extra-margin">
                            <div class="get-started-item">
                                Our <span class="get-started-item-heading">Welcome to Walmart</span> learning paths are here to help!  In this series we will guide you through the entire process from initial onboarding procedures through getting paid.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    -->
</div>


<style>

     .banner-wrapper {
        padding: 10px;
        border-radius: 10px;
    }
    .banner-img {
        width: 100%;
    }
    .banner-container {
        display: flex;
        align-items: center;
        gap: 40px;
        padding: 20px;
        border-radius: 10px;
    }
    .text-center {
        text-align: center;
    }
    .banner-descirption {
        font-size: 25px;
    }
    .bold-text {
        font-weight: 700;
    }
    .deatils-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .banner-image-wrapper {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .banner-content-container {
        width: 50%;
        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>