@extends('web.home.layout.master')

@section('content')
    <!--Body Content-->
    <div id="page-content">
        {{-- <!--Home slider-->
        <div class="slideshow slideshow-wrapper pb-section sliderFull">
            <div class="home-slideshow">
                  <div class="slide">
                    <div class="blur-up lazyload bg-size">
                        <img class="blur-up lazyload bg-img"
                            data-src=" {{ asset('assets/images/slideshow-banners/slideone.png') }}"
                            src=" {{ asset('assets/images/slideshow-banners/slideone.png') }}" alt="image" />
                      
                    </div>
                </div> --}}

                {{-- getting banner from database --}}

                <!--Home slider-->
<div class="slideshow slideshow-wrapper pb-section sliderFull">
        <div class="home-slideshow">
            @if($heroSlides->count() > 0)
                @foreach($heroSlides as $slide)
                    <div class="slide">
                        <div class="blur-up bg-size">
                            @if($loop->first)
                                <img class="bg-img"
                                     src="{{ asset('assets/images/slideshow-banners/' . $slide->banner_image) }}" 
                                     alt="{{ $slide->banner_title }}"
                                     loading="eager"
                                     fetchpriority="high" />
                            @else
                                <img class="bg-img"
                                     data-src="{{ asset('assets/images/slideshow-banners/' . $slide->banner_image) }}"
                                     src="{{ asset('assets/images/slideshow-banners/' . $slide->banner_image) }}" 
                                     alt="{{ $slide->banner_title }}" />
                            @endif
                            
                            @if($slide->banner_title || $slide->banner_description)
                                <div class="slideshow__text-wrap slideshow__overlay classic bottom">
                                    <div class="slideshow__text-content bottom">
                                        <div class="wrap-caption center">
                                            @if($slide->banner_title)
                                                <h2 class="h1 mega-title slideshow__title">{{ $slide->banner_title }}</h2>
                                            @endif
                                            @if($slide->banner_description)
                                                <span class="mega-subtitle slideshow__subtitle">{{ $slide->banner_description }}</span>
                                            @endif
                                            @if($slide->banner_link)
                                                <div class="mt-3">
                                                    <a href="{{ $slide->banner_link }}" class="btn btn--large">Shop Now</a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                @endforeach
            @else
                <div class="slide">
                    <div class="blur-up bg-size">
                        @if($banner && $banner->banner_one)
                            <img class="bg-img"
                                 src="{{ asset('assets/images/slideshow-banners/' . $banner->banner_one) }}" 
                                 alt="Banner 1"
                                 loading="eager"
                                 fetchpriority="high" />
                        @else
                            <img class="bg-img"
                                 src="{{ asset('assets/images/slideshow-banners/slideone.png') }}" 
                                 alt="Banner 1"
                                 loading="eager"
                                 fetchpriority="high" />
                        @endif
                    </div>
                </div>
            @endif


                <!--<div class="slide">-->
                <!--    <div class="blur-up lazyload bg-size" style="height: 300px;">-->

                <!--        <img class="blur-up lazyload bg-img"-->
                <!--            data-src="{{ asset('assets/images/slideshow-banners/slideone.png') }}"-->
                <!--            src="{{ asset('assets/images/slideshow-banners/slideone.png') }}" alt="image" />-->


                <!--        <div class="slideshow__text-wrap slideshow__overlay classic bottom">-->
                <!--            <div class="slideshow__text-content bottom">-->
                <!--                <div class="wrap-caption center">-->
                <!--                    <h2 class="h1 mega-title slideshow__title">Discover Our Eco-Friendly Plastic Products-->
                <!--                    </h2>-->
                <!--                    <span class="mega-subtitle slideshow__subtitle">From Hight to low, classic or modern. We-->
                <!--                        have you covered</span>-->

                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="slide">-->
                <!--    <div class="blur-up lazyload bg-size">-->
                <!--        <img class="blur-up lazyload bg-img"-->
                <!--            data-src=" {{ asset('assets/images/slideshow-banners/slideshowtwo.png') }}"-->
                <!--            src=" {{ asset('assets/images/slideshow-banners/slideshowtwo.png') }}" alt="image" />-->
                <!--        <div class="dark-overlay"></div>-->
                <!--        <div class="slideshow__text-wrap slideshow__overlay classic bottom">-->
                <!--            <div class="slideshow__text-content bottom">-->
                <!--                <div class="wrap-caption center">-->
                <!--                    <h2 class="h1 mega-title slideshow__title">Discover Our Eco-Friendly Plastic Products-->
                <!--                    </h2>-->
                <!--                    <span class="mega-subtitle slideshow__subtitle"></span>-->

                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
               
                <!--<div class="slide">-->
                <!--    <div class="blur-up lazyload bg-size">-->
                <!--        <img class="blur-up lazyload bg-img"-->
                <!--            data-src=" {{ asset('assets/images/slideshow-banners/slideshowtwo.png') }}"-->
                <!--            src=" {{ asset('assets/images/slideshow-banners/slideshowtwo.png') }}" alt="image" />-->
                <!--        <div class="dark-overlay"></div>-->
                <!--        <div class="slideshow__text-wrap slideshow__overlay classic bottom">-->
                <!--            <div class="slideshow__text-content bottom">-->
                <!--                <div class="wrap-caption center">-->
                <!--                    <h2 class="h1 mega-title slideshow__title">Discover Our Eco-Friendly Plastic Products-->
                <!--                    </h2>-->
                <!--                    <span class="mega-subtitle slideshow__subtitle" hidden>Save up to 50% off this weekend-->
                <!--                        only</span>-->

                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
        <!--End Home slider-->

        <style>
            /* Default height for mobile/smaller screens */
            .blur-up.bg-size.lazyloaded {
                height: auto;
            }

            /* Medium screens (tablets and up) */
            @media (max-width: 768px) {
                .blur-up.bg-size.lazyloaded {
                    height: 300px !important;
                }
            }
        </style>
        <!--Collection Box slider-->
        <div class="collection-box">
            <div class="container-fluid">
                <div class="shop" style="text-align: center">
                    <h2 class="shop-category">Shop By Category</h2>
                </div>
                <div class="collection-grid py-2">
                    @foreach ($categories as $category)
                        <div class="collection-grid-item">
                            <div class="card">
                                <a href="{{ route('american.plastic.web.view.categories.product', ['name' => Str::slug($category->category_name)]) }}?id={{ $category->id }}"
                                    class="collection-grid-item__link">
                                    <div class="round-image-wrapper">
                                        <img data-src="{{ asset('admin/assets/img/category/' . $category->category_image) }}"
                                            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" alt="{{ $category->category_name }}" class="blur-up lazyload" />
                                    </div>
                                    <h3 class="collection-grid-item__title py-4">
                                        <strong>{{ $category->category_name }}</strong>
                                    </h3>
                                </a>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        <!--End Collection Box slider-->

    <div class="container-fluid p-0">
    <div class="row g-0">
        <!-- First silde with DB update Banner -->

<div class="col-md-6 col-12 p-0">
    <div class="banner bg-responsive">
        <img class="bg-img"
             data-src="{{ asset('assets/images/home/' . ($banner->side_banner_one ?? 'ameonebanner.jpeg')) }}"
             src="{{ asset('assets/images/home/' . ($banner->side_banner_one ?? 'ameonebanner.jpeg')) }}" 
             style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;"
             alt="Banner 1" />
    </div>
</div>

<div class="col-md-6 col-12 p-0">
    <div class="banner bg-responsive">
        <img class="bg-img"
             data-src="{{ asset('assets/images/home/' . ($banner->side_banner_two ?? 'ametwobanner.jpeg')) }}"
             src="{{ asset('assets/images/home/' . ($banner->side_banner_two ?? 'ametwobanner.jpeg')) }}" 
             style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;"
             alt="Banner 2" />
    </div>
</div>


        {{-- old code  --}}
        {{-- <div class="col-12 col-md-6 p-0">
                 <a href="{{ route('american.plastic.deals.products') }}" class="banner-link">
            <div class="banner bg-responsive" 
                 style="background-image: url('assets/images/home/amenine.jpg');">
                <div class="banner-content">
                    <!-- Optional content -->
                </div>
            </div>
              </a>
           
        </div>
        

        <!-- Second Banner -->
        <div class="col-12 col-md-6 p-0">
               <a href="{{ route('american.plastic.web.news.and.event') }}" class="banner-link">
            <div class="banner bg-responsive" 
                 style="background-image: url('assets/images/home/amefive.jpg');">
                <div class="banner-content">
                    <!-- Optional content -->
                </div>
            </div>
            </a>
        </div> --}}
    </div>
</div>

<style>
/* Each banner maintains a 2:1 aspect ratio (1280x640 = 2:1) */
.banner {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1; /* Keeps image proportion for 1280x640 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width: 991.98px) {
    .banner {
        aspect-ratio: 16 / 9;
    }

    .banner-text h2 {
        font-size: 1.6rem;
    }

    .banner-text p {
        font-size: 1rem;
    }

    .btn-banner {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 767.98px) {
    .banner {
        aspect-ratio: 11 / 5;
    }

    .banner-text h2 {
        font-size: 1.3rem;
    }

    .banner-text p {
        font-size: 0.9rem;
    }

    .btn-banner {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}
</style>

    </div>

    <!--Featured Product-->
    <div class="product-rows section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="section-header text-center">
                        <h2 class="h2" style="font-family: 'Montserrat', sans-serif;font-weight: bold">Latest Products
                        </h2>
                        <p style="font-family: 'Montserrat', sans-serif;">Our most popular products based on sales</p>
                    </div>
                </div>
            </div>
            <div class="grid-products py-4">


                <div class="row">
                    @if ($productCount > 0)
                        @foreach ($products as $product)
                            <div class="col-md-3" style="padding: 2%">
                                <div class="cardd">

                                    <div class="image-container">
                                        <div class="first">
                                            <div class="d-flex justify-content-between align-items-center">
                                                @if ($product->cutted_price != null)
                                                    @php
                                                        $cuttedprice_latest = $product->cutted_price;
                                                        $productprice_latest = $product->product_price;
                                                        $percentage_latest =
                                                            (($cuttedprice_latest - $productprice_latest) /
                                                                $cuttedprice_latest) *
                                                            100;
                                                    @endphp
                                                    <span class="discount" style="font-size: 16px;">{{ floor($percentage_latest) }}%</span>
                                                @else
                                                    <span class="discount" hidden></span>
                                                @endif
                                                @if (Auth::check())
                                                    @php
                                                        $productexists = in_array($product->id, $wishlistProductIds ?? []);
                                                    @endphp
                                                    @if ($productexists)
                                                        <span class="wishlist"><i class="fa fa-heart"
                                                                style="color: #ce1111"></i></span>
                                                    @else
                                                        <a href="{{ route('american.plastic.web.addto.wishlist', ['id' => $product->id]) }}"
                                                            title="Add to Wishlist">
                                                            <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                        </a>
                                                    @endif
                                                @else
                                                    <span class="wishlist"><i class="fa fa-heart-o"></i></span>
                                                @endif
                                            </div>
                                        </div>
                                        @php
                                            $imageArray = explode(',', $product->product_image);
                                            $firstImage_latest = $imageArray[0];
                                        @endphp
                                        <a
                                            href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($product->product_name)]) }}?id={{ $product->id }}">
                                            <img data-src="{{ asset('admin/assets/img/product/' . $firstImage_latest) }}"
                                                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
                                                class="img-fluid rounded thumbnail-image blur-up lazyload"
                                                onerror="this.src='https://i.ibb.co/qpB9ZCZ/placeholder.png'">
                                        </a>
                                    </div>


                                    <div class="product-detail-container p-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h5 class="dress-name"><a
                                                    href="{{ route('american.plastic.web.product.details', ['name' => Str::slug($product->product_name)]) }}?id={{ $product->id }}">{{ $product->product_name }}</a>
                                            </h5>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">

                                            <span
                                                class="new-price"><strong>LKR&nbsp;{{ number_format($product->product_price, 2) }}</strong></span>
                                            <small class="old-price text-right"><del style="font-size: 13px;font-weight:550">
                                                    @if ($product->cutted_price != null)
                                                        LKR&nbsp;{{ number_format($product->cutted_price, 2) }}&nbsp;
                                                    @endif
                                                </del></small>
                                        </div>
                                        <div class="installment-option">
                                            <span style="font-size: 15px;font-weight:550;color:#969292">or 3 X <span style="color: #6d6d6d;">LKR</span>
                                                {{ number_format($product->product_price / 3, 2) }}&nbsp;with</span>
                                            <img src="{{ asset('assets/images/kokologo.png') }}" alt="Koko"
                                                style="height: 15px; margin-right: 5px;" loading="lazy">

                                        </div>
                                         <div class="installment-option">
                                            <span style="font-size: 15px;font-weight:550;color:#969292">or 3 X <span style="color: #6d6d6d;">LKR</span>
                                                {{ number_format($product->product_price / 3, 2) }}&nbsp;with</span>
                                            <img src="{{ asset('assets/images/mintpaylogo.jpg') }}" alt="Mintpay"
                                                style="height: 15px; margin-right: 5px;" loading="lazy">

                                        </div>
                                        <div class="d-flex justify-content-between align-items-center pt-1">
                                            <div>
                                                <i class="fa fa-star-o rating-star"></i>
                                                <span class="rating-number">4.8</span>
                                            </div>
                                            @if ($product->order > 0)
                                                <span class="buy">{{ $product->order + 20 }}&nbsp;sold</span>
                                            @else
                                                <span class="buy">20 sold</span>
                                            @endif
                                        </div>

                                    </div>
                                </div>

                            </div>
                        @endforeach
                    @else
                        <h4 style="text-align: center">Products Not Availabile</h4>
                    @endif
                </div>


            </div>
        </div>
    </div>
    <!--End Featured Product-->
    <div class="container-fluid py-4">
        <div class="row g-0 who-we-are-container">
            <!-- Image Column (Left) -->
            <div class="col-lg-6 who-we-are-img-wrapper">
                <img data-src="{{ asset('admin/assets/banner/' . $banner->banner_two) }}"
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" alt="American Plastics"
                    class="blur-up lazyload">
            </div>

            <!-- Text Column (Right) -->
            <div class="col-lg-6 p-4 p-md-5 d-flex align-items-center">
                <div>
                    <!-- Section Title -->
                    <h2 class="who-we-are-title">
                        Who We <span>Are</span>
                    </h2>

                    <!-- Description -->
                    <p class="fs-5 text-muted mb-4" style="line-height: 1.6;">
                        American Plastics Pvt Ltd is committed to shaping the future of the plastic industry with our
                        dedication to <strong>quality, innovation, and sustainability</strong>. Join us on this journey as
                        we continue to set new standards and drive positive change.
                    </p>

                    <!-- Key Points (Grid Layout) -->
                    <div class="row g-3 mt-3">
                        <div class="col-md-4">
                            <div class="who-we-are-card">
                                <i class="fas fa-recycle text-success mb-2"></i>
                                <h6 class="card-title">Eco-Friendly</h6>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="who-we-are-card">
                                <i class="fas fa-cogs text-primary mb-2"></i>
                                <h6 class="card-title">Innovation</h6>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="who-we-are-card">
                                <i class="fas fa-medal text-warning mb-2"></i>
                                <h6 class="card-title">Quality</h6>
                            </div>
                        </div>
                    </div>

                    <!-- CTA Button -->
                    <a href="{{ route('american.plastic.web.about.us') }}" class="who-we-are-btn mt-4">
                        Learn More <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Trusted Partners Section -->
    <section class="partners-section">
        <div class="container text-center">
            <h2 class="partners-title">
                Our Trusted Partners
            </h2>
            <div class="partners-slider py-3">
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/jayakirana.jpeg') }}" alt="Jayakirana" loading="lazy" />
                    </div>
                </div>
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/keelss.png') }}" alt="Keells" loading="lazy" />
                    </div>
                </div>
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/ladyj.png') }}" alt="Lady J" loading="lazy" />
                    </div>
                </div>
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/mega.png') }}" alt="Mega" loading="lazy" />
                    </div>
                </div>
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/msc.png') }}" alt="MSC" loading="lazy" />
                    </div>
                </div>
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/siyane.png') }}" alt="Siyane" loading="lazy" />
                    </div>
                </div>
                <div class="px-2">
                    <div class="partner-logo-card">
                        <img src="{{ asset('assets/images/client/arpico.jpg') }}" alt="Arpico" loading="lazy" />
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Customer Reviews Section -->
    <section class="reviews-section">
        <div class="container text-center">
            <h2 class="reviews-title">
                See What Our Customers Say About Us
            </h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card review-card">
                        <div>
                            <div class="review-quote-icon">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <div class="review-stars">
                                ★★★★★
                            </div>
                            <p class="review-text">
                                "We have been sourcing our retail shopping baskets and heavy-duty vegetable crates from American Plastics for years. Their durability under high daily usage is exceptional, significantly reducing our replacement costs."
                            </p>
                        </div>
                        <div class="reviewer-info">
                            <div class="reviewer-avatar">ND</div>
                            <div class="reviewer-meta">
                                <h5 class="reviewer-name">Nilantha De Silva</h5>
                                <p class="reviewer-role">Logistics Manager, Keells Super</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card review-card">
                        <div>
                            <div class="review-quote-icon">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <div class="review-stars">
                                ★★★★★
                            </div>
                            <p class="review-text">
                                "American Plastics has been an invaluable partner for our warehousing and retail storage needs. Their ability to deliver high-quality, customized storage pallets and boxes on tight schedules has been outstanding."
                            </p>
                        </div>
                        <div class="reviewer-info">
                            <div class="reviewer-avatar">PP</div>
                            <div class="reviewer-meta">
                                <h5 class="reviewer-name">Priyantha Perera</h5>
                                <p class="reviewer-role">Operations Director, Arpico Supercentre</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card review-card">
                        <div>
                            <div class="review-quote-icon">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <div class="review-stars">
                                ★★★★★
                            </div>
                            <p class="review-text">
                                "The quality of the storage bins and plastic drawers is top-notch. Our customers love them for their sturdy finish and modern designs. Excellent service and very competitive pricing."
                            </p>
                        </div>
                        <div class="reviewer-info">
                            <div class="reviewer-avatar">KJ</div>
                            <div class="reviewer-meta">
                                <h5 class="reviewer-name">K. Jayasinghe</h5>
                                <p class="reviewer-role">Owner, Jayakirana Stores</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="container-fluid d-flex flex-column  p-0">
        <!-- Main Content (this will push the features to the bottom) -->


        <!-- Feature Row (now at page bottom) -->
        <div class="row" style="background-color: #85c226; border-radius: 10px; padding: 20px; margin: 0 -15px;">
            <div class="col-md-3 col-6 text-center">
                <div class="feature-box">
                    <i class="fas fa-tag" style="font-size: 30px; color: white;"></i>
                    <h4 style="color: white; margin-top: 10px;">Best Price Guarantee</h4>
                    <p style="color: white; font-size: 14px;">Lowest prices guaranteed</p>
                </div>
            </div>
            <div class="col-md-3 col-6 text-center">
                <div class="feature-box">
                    <i class="fas fa-credit-card" style="font-size: 30px; color: white;"></i>
                    <h4 style="color: white; margin-top: 10px;">Easy Payment Plans</h4>
                    <p style="color: white; font-size: 14px;">Instalment plans, offers & more</p>
                </div>
            </div>
            <div class="col-md-3 col-6 text-center">
                <div class="feature-box">
                    <i class="fas fa-headset" style="font-size: 30px; color: white;"></i>
                    <h4 style="color: white; margin-top: 10px;">After Sales Service</h4>
                    <p style="color: white; font-size: 14px;">Customer support</p>
                </div>
            </div>
            <div class="col-md-3 col-6 text-center">
                <div class="feature-box">
                    <i class="fas fa-truck" style="font-size: 30px; color: white;"></i>
                    <h4 style="color: white; margin-top: 10px;">Islandwide Delivery</h4>
                    <p style="color: white; font-size: 14px;">Fast delivery across Sri Lanka</p>
                </div>
            </div>
        </div>
    </div>



    </div>
    <style>
        .review-card {
            height: 140px;
            /* Adjust height as needed */
            background-size: cover;

            background-repeat: no-repeat;
            border-radius: 8px;
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .review-card:hover {
            transform: scale(1.05);
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
        }

        .section-title {
            font-size: 2rem;
            letter-spacing: 0.5px;
        }

        .logo-bar__item img {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .logo-bar__item:hover img {
            transform: scale(1.1);
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
        }

        .card img {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .card:hover img {
            transform: scale(1.05);
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
        }

        .user-content p {
            margin-top: 5px;
            font-size: 12px;
        }


        .ratings i {
            color: blue;
        }

        .image-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            /* Ensure the image does not overflow the container */
        }

        .image-container img {
            width: 100%;
            height: auto;
            /* Maintain the aspect ratio */
            display: block;
        }

        .dark-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            /* Adjust the opacity as needed */
        }

        /* Apply Montserrat font to the specified class */
        .mega-title {
            font-family: 'Montserrat', sans-serif;
            /* Additional styling if needed */
            font-size: 2.5rem;
            font-weight: 700;
            /* You can adjust other properties as needed */
        }

        .shop-category {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: #1A202C;
            letter-spacing: -0.5px;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }

        .shop-category::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, #5b8716, #85c226);
            border-radius: 2px;
        }

        /* Modernized Category Slider Cards */
        .collection-box {
            padding: 50px 0;
            background-color: #fcfdfa;
        }

        .collection-box .collection-grid-item {
            padding: 12px;
            text-align: center;
        }

        .collection-box .collection-grid-item .card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 16px !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            padding: 25px 15px 15px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .collection-box .collection-grid-item:hover .card {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(133, 194, 38, 0.12);
            border-color: rgba(133, 194, 38, 0.2);
        }

        /* Elevated Ring Image Wrapper */
        .round-image-wrapper {
            width: 140px;
            height: 140px;
            overflow: hidden;
            border-radius: 50%;
            margin: 0 auto;
            border: 3px solid rgba(133, 194, 38, 0.15);
            padding: 4px;
            background-color: #ffffff;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .collection-box .collection-grid-item:hover .round-image-wrapper {
            border-color: #85c226;
            box-shadow: 0 0 15px rgba(133, 194, 38, 0.3);
            transform: scale(1.03);
        }

        .round-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .collection-box .collection-grid-item:hover .round-image-wrapper img {
            transform: scale(1.1);
        }

        /* Title styling with hover animations */
        .collection-grid-item__title {
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: #2D3748;
            margin-top: 15px;
            transition: color 0.3s ease;
            text-align: center;
            display: block;
        }

        .collection-box .collection-grid-item:hover .collection-grid-item__title {
            color: #5b8716;
        }

        /* Remove default flashing hover overlays from style.css */
        .collection-box .collection-grid-item__link:before {
            display: none !important;
        }

        @media (max-width: 767px) {
            .collection-grid-item__title {
                font-size: 13px !important;
            }
        }


        .btn {
            border-radius: 20px;
            /* Adjust the border radius to make it round */
            background-color: red;
            /* Set the background color to red */
            color: white;
            /* Set text color to white for better visibility */
            padding: 10px 20px;
            /* Adjust padding as needed */
            border: none;
            /* Remove default button border */
            cursor: pointer;
            /* Change cursor to pointer on hover */
        }

        .user-select-none {
            user-select: none;
        }

        a {
            text-decoration: none;
            color: unset;
        }

        .review-star {
            color: #fdcc0d;
            font-size: 13px;
        }

        /* ===========
                            Product Single Card - Start
                            ============= */
        .product-single-card {
            padding: 30px;
            border-radius: 5px;
            box-shadow: 1px 1px 15px #cccccc40;
            transition: 0.5s ease-in;
            /* background-color: red; */
        }

        .product-single-card:hover {
            -webkit-box-shadow: 1px 1px 28.5px -7px #d6d6d6;
            -moz-box-shadow: 1px 1px 28.5px -7px #d6d6d6;
            box-shadow: 1px 1px 28.5px -7px #d6d6d6;
        }

        .product-single-card .product-info {
            padding: 15px 0 0 0;
        }

        .product-single-card .product-top-area {
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            border-radius: 5px;
        }

        .product-single-card .product-top-area .product-discount {
            position: absolute;
            top: 10px;
            left: 10px;
            background: white;
            border-radius: 3px;
            padding: 5px 10px;
            box-shadow: 1px 1px 28.5px -7px #dddddd;
            user-select: none;
            z-index: 999;
        }

        .product-single-card .product-top-area .product-img {
            aspect-ratio: 1/1;
            overflow: hidden;
        }

        .product-single-card .product-top-area .product-img .first-view {
            transition: 0.5s ease-in;
        }

        .product-single-card .product-top-area .product-img .hover-view {
            opacity: 0;
            transition: 0.5s ease-in;
        }

        .product-single-card .product-top-area:hover .product-img .first-view {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .product-single-card .product-top-area:hover .product-img .hover-view {
            opacity: 100%;
            scale: 1.2;
        }

        .product-single-card .product-top-area .sideicons {
            position: absolute;
            right: 15px;
            display: grid;
            gap: 10px;
        }

        .product-single-card .product-top-area .sideicons .sideicons-btn {
            background-color: #fff;
            color: #000;
            border-radius: 50%;
            border: none;
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transform: translateX(60px);
            transition: 0.3s ease-in;
            -webkit-box-shadow: 1px 1px 28.5px -7px #dddddd;
            -moz-box-shadow: 1px 1px 28.5px -7px #dddddd;
            box-shadow: 1px 1px 28.5px -7px #dddddd;
        }

        .product-single-card .product-top-area .sideicons .sideicons-btn:hover {
            color: #fff;
            background-color: #000;
        }

        .product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(1) {
            transition-delay: 100ms;
        }

        .product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(2) {
            transition-delay: 200ms;
        }

        .product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(3) {
            transition-delay: 300ms;
        }

        .product-single-card .product-top-area .sideicons .sideicons-btn:nth-child(4) {
            transition-delay: 400ms;
        }

        .product-single-card .product-top-area:hover .sideicons .sideicons-btn {
            opacity: 100%;
            visibility: visible;
            transform: translateX(0);
        }

        .product-single-card .product-info .product-category {
            font-weight: 600;
            opacity: 60%;
        }

        .product-single-card .product-info .product-title {
            font-size: 16px;
            font-weight: 600;
        }

        .product-single-card .product-info .old-price,
        .product-single-card .product-info .new-price {
            padding-right: 0px;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .product-single-card .product-info .old-price {
            text-decoration: line-through;
            opacity: 70%;
        }

        /* ===========
                            Product Single Card - End
                            ============= */
        .card-slider {
            max-width: 1260px;
            margin: 0 auto;

            @media screen and (max-width: 1024px) {
                width: 80%;
            }

            .slick-prev-icon,
            .slick-next-icon {
                color: #000000;
            }

            .slick-slide {
                padding: 0 10px;
            }

            .card {
                position: relative;

                display: flex !important;
                flex-direction: column;
                height: 350px;

                border-radius: 3px;
                border: 1px solid rgba(0, 0, 0, .2);
                background-color: white;

                text-decoration: none;
                color: rgba(0, 0, 0, .9);

                transition: all .1s linear;

                @media screen and (max-width: 600px) {
                    height: auto;
                }
            }

            /** Main link */
            .card .main-link {
                text-decoration: none;
                display: flex;
                flex-direction: column;
            }

            .card .main-link:focus {
                outline: none;
            }

            .card .main-link:focus .title {
                outline: 3px dashed orange;
                outline-offset: -4px;
                color: royalblue;
                text-decoration: underline;
            }

            /** Product title */
            .card .title {
                color: #000;
                margin: 0;
                padding: 10px 10px 5px 10px;
                font-size: 16px;
                font-weight: bold;
            }

            .card .title:hover {
                text-decoration: underline;
            }

            /** Product image */
            .card .image {
                /** Visually place the image above all other content (like the heading) in the parent flex container (.card). */
                order: -1;

                position: relative;
                height: 200px;
                padding: 2px;
                overflow: hidden;

                display: flex;
                justify-content: center;
                align-items: center;
            }

            .card .image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: grayscale(.5);
                transition: all .3s ease-in-out;
            }

            .card .image:hover img {
                width: 110%;
                height: 110%;
            }

            /** Product description */
            .card .description {
                margin: 7px 10px 15px 10px;
                font-size: 14px;
                opacity: .8;
            }

            /** Floating "sale" badge */
            .card .badge {
                position: absolute;
                top: -102px;
                right: 0px;
                left: 100px;
                z-index: 1;

                padding: 5px 10px;

                font-size: 12px;
                font-weight: bold;
                text-transform: uppercase;
                color: white;

            }

            /** Price */
            .card .price {
                padding-left: 10px;
            }

            .card .price .new-price {
                font-weight: bold;
            }

            .card .price .original-price {
                margin-left: 5px;
                font-size: 14px;
                font-style: italic;
                opacity: .5;
                text-decoration: line-through;
            }

            /** Rating */
            .card .rating {
                margin: 10px 0 15px 10px;
                color: orange;
                font-size: 12px;
            }

            /** "30 reviews" link next to stars */
            .card .rating .reviews-link {
                color: rgba(0, 0, 0, .6);
                margin-left: 5px;
            }

            .card .rating .reviews-link:hover {
                color: black;
            }

            .card .rating .reviews-link:focus {
                color: royalblue;
                outline: 3px dotted royalblue;
                outline-offset: 2px;
            }

            /** Hover state = add box shadow, underline the title */
            .card:hover {
                border-color: rgba(0, 0, 0, .4);
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
            }

            .card:hover .image img,
            .card:focus .image img {
                filter: grayscale(0);
            }

            .card a:focus {
                outline: none;
            }
        }


        /**
                            Demo only
                            */
        .note {
            text-align: center;
            font-size: 14px;
            max-width: 960px;
            padding: 40px 20px;
            margin: 0 auto;
            opacity: .8;

            a {
                color: black;
                font-weight: bold;

                &:hover,
                &:focus {
                    color: royalblue;
                }
            }
        }

        .cardd {

            background-color: #fff;
            border: none;
            border-radius: 10px;
            width: 100%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

        }

        .image-container {

            position: relative;
        }

        .thumbnail-image {
            border-radius: 10px !important;
        }


        .discount {

            background-color: red;
            padding-top: 1px;
            padding-bottom: 1px;
            padding-left: 4px;
            padding-right: 4px;
            font-size: 10px;
            border-radius: 6px;
            color: #fff;
        }

        .wishlist {

            height: 25px;
            width: 25px;
            background-color: #eee;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .first {

            position: absolute;
            width: 100%;
            padding: 9px;
        }


        .dress-name {
            font-size: 13px;
            font-weight: bold;
            width: 100%;
            font-family: 'Montserrat', sans-serif;
        }


        @media (max-width: 768px) {
            .dress-name {
                font-size: 12px;
                font-weight: bold;
                width: 100%;
                font-family: 'Montserrat', sans-serif;
            }
        }


        .item-size {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            border: 1px solid grey;
            color: grey;
            font-size: 10px;
            text-align: center;
            align-items: center;
            display: flex;
            justify-content: center;
        }


        .rating-star {
            font-size: 10px !important;
        }

        .rating-number {
            font-size: 10px;
            color: grey;

        }

        .buy {
            font-size: 12px;
            color: purple;
            font-weight: 500;
        }

        .voutchers {
            background-color: #fff;
            border: none;
            border-radius: 10px;
            width: 100%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            overflow: hidden;

        }

        .voutcher-divider {

            display: flex;

        }

        .voutcher-left {
            width: 60%
        }

        .voutcher-name {
            color: grey;
            font-size: 9px;
            font-weight: 500;
        }

        .voutcher-code {
            color: rgb(0, 0, 0);
            font-size: 14px;
            font-weight: bold;
        }

        .voutcher-right {
            width: 40%;
            background-color: red;
            color: #fff;
        }

        .discount-percent {
            font-size: 12px;
            font-weight: bold;
            position: relative;
            top: 5px;
        }

        .off {
            font-size: 14px;
            position: relative;
            bottom: 5px;
        }

        .collection-grid-item {
            padding: 5%;
        }

        .image-container {
            position: relative;
        }

        .lottie-container {
            position: absolute;
            top: 20px;
            /* Adjust to position within the image */
            right: 20px;
            /* Adjust to position within the image */
            width: 50px;
            height: 50px;
            z-index: 10;
        }

        @media (min-width: 768px) {
            .collection-grid-item {
                padding: 3%;
            }
        }

        /* Large screens (desktops) */
        @media (min-width: 1024px) {
            .collection-grid-item {
                padding: 2%;
            }
        }

        /* Who We Are & Trusted Partners Styles */
        .who-we-are-container {
            background-color: #ffffff !important;
            border-radius: 20px !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .who-we-are-img-wrapper {
            position: relative;
            overflow: hidden;
            height: 100%;
            min-height: 450px;
        }

        .who-we-are-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .who-we-are-container:hover .who-we-are-img-wrapper img {
            transform: scale(1.05);
        }

        .who-we-are-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: #1A202C !important;
            margin-bottom: 24px;
        }

        .who-we-are-title span {
            position: relative;
            z-index: 1;
        }

        .who-we-are-title span::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: rgba(133, 194, 38, 0.2);
            z-index: -1;
            border-radius: 4px;
        }

        .who-we-are-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
            padding: 20px 15px;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 100%;
        }

        .who-we-are-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(133, 194, 38, 0.1);
            border-color: rgba(133, 194, 38, 0.3);
        }

        .who-we-are-card i {
            font-size: 1.8rem;
            margin-bottom: 12px;
            transition: transform 0.3s ease;
        }

        .who-we-are-card:hover i {
            transform: scale(1.1);
        }

        .who-we-are-card .card-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #2D3748;
            margin: 0;
        }

        .who-we-are-btn {
            background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
            border: none;
            color: #ffffff !important;
            padding: 14px 30px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(133, 194, 38, 0.2);
            transition: all 0.3s ease;
            border-radius: 30px !important;
            display: inline-flex;
            align-items: center;
            text-decoration: none !important;
        }

        .who-we-are-btn:hover {
            background: linear-gradient(135deg, #649618 0%, #92d62a 100%);
            box-shadow: 0 6px 20px rgba(133, 194, 38, 0.35);
            transform: translateY(-2px);
            color: #ffffff !important;
        }

        /* Trusted Partners Refined Styles */
        .partners-section {
            background-color: #fcfdfa !important;
            padding: 60px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.03);
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        }

        .partners-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            color: #1A202C;
            margin-bottom: 40px;
            position: relative;
            display: inline-block;
        }

        .partners-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, #5b8716, #85c226);
            border-radius: 2px;
        }

        .partner-logo-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            padding: 16px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .partner-logo-card img {
            max-height: 80px;
            width: auto;
            max-width: 100%;
            object-fit: contain;
            opacity: 1;
            transition: all 0.3s ease;
        }

        .partner-logo-card:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 10px 25px rgba(133, 194, 38, 0.15);
            border-color: rgba(133, 194, 38, 0.25);
        }

        /* Customer Reviews Redesign */
        .reviews-section {
            background-color: #ffffff !important;
            padding: 80px 0;
        }

        .reviews-title {
            font-family: 'Montserrat', sans-serif;
            font-size: 2.2rem;
            font-weight: 700;
            color: #1A202C;
            margin-bottom: 50px;
            position: relative;
            display: inline-block;
        }

        .reviews-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: linear-gradient(90deg, #5b8716, #85c226);
            border-radius: 2px;
        }

        .review-card {
            background: #ffffff !important;
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 16px !important;
            padding: 35px 25px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            text-align: left !important;
        }

        .review-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(133, 194, 38, 0.12) !important;
            border-color: rgba(133, 194, 38, 0.25) !important;
        }

        .review-quote-icon {
            font-size: 24px;
            color: rgba(133, 194, 38, 0.3);
            margin-bottom: 20px;
        }

        .review-stars {
            color: #ffc107;
            font-size: 16px;
            margin-bottom: 15px;
        }

        .review-text {
            font-size: 15px;
            line-height: 1.6;
            color: #4A5568;
            margin-bottom: 25px;
            font-style: italic;
            flex-grow: 1;
        }

        .reviewer-info {
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            padding-top: 20px;
        }

        .reviewer-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #5b8716 0%, #85c226 100%);
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            box-shadow: 0 4px 10px rgba(133, 194, 38, 0.25);
        }

        .reviewer-meta .reviewer-name {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 14px;
            color: #2D3748;
            margin: 0 0 2px 0;
            line-height: 1.2;
        }

        .reviewer-meta .reviewer-role {
            font-size: 12px;
            color: #718096;
            margin: 0;
            line-height: 1.2;
        }


    </style>
    <script>
        $(document).ready(function() {
            $('.card-slider').slick({
                dots: false,
                arrows: true,
                slidesToShow: 4,
                infinite: false,
                responsive: [{
                        breakpoint: 1024,
                        settings: {
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 800,
                        settings: {
                            slidesToShow: 2
                        }
                    },
                    {
                        breakpoint: 600,
                        settings: {
                            slidesToShow: 1
                        }
                    }
                ]
            });

            $('.partners-slider').slick({
                dots: false,
                arrows: false,
                slidesToShow: 6,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                cssEase: 'linear',
                speed: 600,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
                            slidesToShow: 5
                        }
                    },
                    {
                        breakpoint: 992,
                        settings: {
                            slidesToShow: 4
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            slidesToShow: 2
                        }
                    }
                ]
            });
        });
    </script>
    <!--End Body Content-->
@endsection