@if (isset($page_name) && $page_name == 'index')
    <!-- ...:::Start Hero Slider Section:::... -->
    <style>
        .swiper {
            height: 294px;
        }

        .banner-text-mobile {
            font-size: 33px !important;
            margin-top: 1% !important;
            font-weight: 300;
            line-height: 24px;
            position: absolute;
        }

        .hero-area--style-1 .hero-bg img {
            height: revert-layer !important;
        }

        .bg-4 {
            background-image: url(../images/slider/bg/3-1.webp);
            background-repeat: no-repeat;
        }
    </style>
    <div class="hero-section
                                            section-gap-top-25">
        <div class="container">
            <!-- Start Hero Area -->
            <div
                class="hero-area
                                                    hero-area--style-1
                                                    hero-slider-active">
                <!-- Slider main container -->
                <div class="swiper">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        {{-- <div class="swiper-slide">
                            <div class="hero-singel-slide">
                                <div class="hero-bg">
                                    <a href="c-138-surgical-retractors.aspx">
                                        <div class="slider-img ml-5"
                                            style="background-color: #ececec;border-radius: 6px;">
                                            <img style="position: relative; bottom: 13px; left: 13px;" decoding="async" loading="lazy" src="design/assets/images/Black-Friday-Banner-for-GerMedUSA_2024-09.png" alt="Slider Product" srcset="design/assets/images/Black-Friday-Banner-for-GerMedUSA_2024-09.png 320w, design/assets/images/Black-Friday-Banner-for-GerMedUSA_2024-09.png 450w" sizes="(max-width: 600px) 320px, 450px">
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div> --}}
                        {{-- <div class="swiper-slide">
                            <div class="text-center">
                                <img width="320" src="design/assets/images/slider/slider-product/newyearmobile.jpg" alt="new year sale">
                            </div>
                        </div> --}}
                        <div class="swiper-slide">
                            <div class="hero-singel-slide">
                                <div class="hero-bg">
                                    <a href="c-138-surgical-retractors.aspx">
                                        {{-- <img data-src="static/assets/images/banners/surgical-retractors.webp"
                                    class="img-full"
                                    width="1920" height="731"
                                    alt="Surgical Retractors"
                                    srcset="static/assets/images/banners/surgical-retractors.webp 500w, static/assets/images/banners/surgical-retractors.webp 1000w, static/assets/images/banners/surgical-retractors.webp 1500w"
                                    /> --}}
                                        <div class="slider-img ml-5"
                                            style="background-color: #ececec;border-radius: 6px;">
                                            <h4 class="banner-text-mobile  p-3">Hohmann Retractor</h4>
                                            <img width="350px" decoding="async" height="320px" style="min-height: 320px;" layout="responsive"
                                                src="design/assets/images/slider/slider-product/81-img.webp" alt="Slider Product">

                                            <ul
                                                style="position: absolute; bottom: 40px; left: 19px; font-size: 13px; line-height: 17px;">
                                                <li>German Stainless Material</li>
                                                <li>Precise Soft Tissue Retraction</li>
                                                <li>Easy to Handle</li>
                                                <li>Available in Multiple Sizes</li>
                                            </ul>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="hero-singel-slide">
                                <div class="hero-bg">
                                    {{-- <img
                                data-src="static/assets/images/banners/germedusa.webp"
                                class="img-full"
                                width="1920" height="731"
                                alt="German Forged, High Quality Surgical Instruments"
                                srcset="static/assets/images/banners/germedusa.webp 500w, static/assets/images/banners/germedusa.webp 1000w, static/assets/images/banners/germedusa.webp 1500w"
                                /> --}}
                                    <div class="slider-img ml-5" style="background-color: #ececec;border-radius: 6px;">
                                        <h4 class="banner-text-mobile p-3">Direct Anterior THA</h4>
                                            <img width="350px" decoding="async" height="320px" style="min-height: 320px;" layout="responsive"
                                                src="design/assets/images/slider/slider-product/91-img.webp" alt="Slider Product">

                                        <ul
                                            style="position: absolute; bottom: 42px; left: 19px; font-size: 13px; line-height: 16px; display: flex; flex-direction: row-reverse; gap: 34px;">
                                            <div>
                                                <li>German Stainless Steel</li>
                                                <li>Minimum Tissue Trauma</li>
                                            </div>
                                            <div>
                                                <li>Lightweight</li>
                                                <li>Available in Multiple Sizes</li>
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="hero-singel-slide">
                                <div class="hero-bg">
                                    <a href="c-205-mayo-scissors-dissecting.aspx">
                                        {{-- <img data-src="static/assets/images/banners/mayo-scissors.webp"
                                    class="img-full"
                                    width="1920" height="731"
                                    alt="Mayo Scissors"
                                    srcset="static/assets/images/banners/mayo-scissors.webp 500w, static/assets/images/banners/mayo-scissors.webp 1000w, static/assets/images/banners/mayo-scissors.webp 1500w"
                                    /> --}}
                                        <div class="slider-img ml-5"
                                            style="background-color: #ececec;border-radius: 6px;">
                                            <h3 class="banner-text-mobile p-3" style="margin-left: 57px;">Kerrison Rongeur</h3>
                                            <img width="350px" decoding="async" height="320px" style="min-height: 320px;" layout="responsive"
                                                src="design/assets/images/slider/slider-product/11-img.webp" alt="Slider Product">

                                            <ul
                                                style="position: absolute; bottom: 40px;left: 19px; font-size: 13px; line-height: 17px;">
                                                <li>Precise Bone Cutting</li>
                                                <li>Easily Detachable </li>
                                                <li>Self-opening Spring System</li>
                                                <li>Improved Durability </li>
                                            </ul>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- End Hero Area -->
        </div>
        <div class="">
            <div class="d-flex gap-5" style="margin: 41px;">
                <div class="">
                    <div class="service-item d-flex flex-column gap-2">
                        <div class="service-img">
                            <amp-img class="home-info-icons" style="width: 60px;"
                                src="design/assets/images/icons/warranty.png"
                                alt="warranty-icon"
                                width="60" height="60" layout="responsive">
                            </amp-img>

                        </div>
                        <div class="service-content">
                            <h3 class="heading">Warranty</h3>
                            <p class="short-desc" style="font-weight: 400; line-height: 1.2; font-size: 13px;">5 Years Warranty</p>
                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="service-item d-flex flex-column gap-2">
                        <div class="service-img">
                            <amp-img class="home-info-icons" style="width: 60px;"
                                src="design/assets/images/icons/support.png"
                                alt="support-icon"
                                width="60" height="60" layout="responsive">
                            </amp-img>
                        </div>
                        <div class="service-content">
                            <h3 class="heading">Support</h3>
                            <p class="short-desc" style="font-weight: 400;line-height: 1.2; font-size: 13px;">Online 24hrs a Day</p>
                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="service-item d-flex flex-column gap-2">
                        <div class="service-img">
                            <amp-img class="home-info-icons" style="width: 60px;"
                                src="design/assets/images/icons/repair.png"
                                alt="return-icon"
                                width="60" height="60" layout="responsive">
                            </amp-img>
                        </div>
                        <div class="service-content">
                            <h3 class="heading">Repairing</h3>
                            <p class="short-desc" style="font-weight: 400; line-height: 1.2; font-size: 13px;">Free Repair and Sharpening</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ...:::End Hero Slider Section:::... -->
@endif