/* ------------------------------------------- */
    /* Hero Banner SLIDER CSS (Image Cut Fix) */
    /* ------------------------------------------- */

    /* Main Slider Section */
    .sb-hero-slider-area {
        background-color: #f7f3ed;
        padding: 50px 0;
        overflow: hidden;
    }

    /* Individual Slide Item: Ensures content takes up available height */
    .sb-carousel-item-hero {
        min-height: 550px;
    }

    /* Content and Image Alignment: Center everything vertically */
    .sb-hero-slide-wrap {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Image Container: Key changes for better fitting */
    .sb-hero-slide-image {
        position: relative;
        height: 550px;
        display: flex;
        align-items: flex-end; /* Align image to the bottom */
        justify-content: center;
        /* Custom background pattern */
        background-image: url('assets/images/background/home3.1-bg.png');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover; /* Ensure background covers area */
    }

    .sb-hero-slide-image img {
        width: auto;
        /* Changed max-height from 100% to auto to allow flexible scaling */
        max-height: 100%; 
        object-fit: contain; /* Ensures the entire image is visible, maintaining aspect ratio */
        height: auto; /* Let image height be determined by its aspect ratio */
    }

    /* Content Container */
    .sb-hero-slide-content {
        padding: 50px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 400px;
    }

    /* Text Styles - Keeping previous styles */
    .sb-hero-title-slide {
        color: #1a4312;
        font-size: 48px;
        line-height: 1.1;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .sb-hero-slogan-slide {
        color: red;
        font-size: 18px;
        margin-bottom: 30px;
        font-weight: 500;
    }
    
    /* Button Styles - Keeping previous styles */
    .sb-btn-wrapper { margin-top: 15px; }
    .sb-btn-hero {
        display: inline-flex;
        align-items: center;
        padding: 12px 25px;
        background-color: #498240;
        color: white;
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        overflow: hidden;
        position: relative;
    }
   
    .sb-btn-icon img { width: 18px; filter: invert(100%); }

    /* ------------------------------------------- */
    /* MOBILE RESPONSIVENESS (Refined) */
    /* ------------------------------------------- */
    @media (max-width: 991px) {
        .sb-hero-slider-area {
            padding: 20px 0; /* Reduced top/bottom padding */
        }
        .sb-carousel-item-hero {
            min-height: auto;
        }
        
        /* Ensure content is center-aligned on mobile */
        .sb-hero-slide-content {
            text-align: center;
            padding: 30px 15px 0; /* Reduced bottom padding on content */
            min-height: auto;
        }
        
        /* Change order: Content first, then Image */
        .row.w-100.align-items-center {
            flex-direction: column-reverse; 
        }

        /* Image needs less height and uses a percentage of width on mobile */
        .sb-hero-slide-image {
            height: 300px; /* Reduced fixed height */
            /* Add some margin to separate it from the bottom content */
            margin-top: 10px; 
            margin-bottom: 20px;
            /* Ensure the image container uses full width for centering */
            width: 100%;
            height: 35vh; /* Use viewport height for better control */
        }
        
        /* Main Image within the container should scale */
        .sb-hero-slide-image img {
            max-width: 95%; /* Use almost full width of the container */
            max-height: 100%;
            height: auto; /* Important: Let the height scale naturally */
        }

        /* Reduce font size on mobile */
        .sb-hero-title-slide {
            font-size: 30px; 
        }
        .sb-hero-slogan-slide {
            font-size: 15px;
        }
    }








      /* Custom CSS for Product Hover Flip Effect */
    .product-card-area {
        background-color: #f7f3ed; /* Light background color matching your sample */
        padding: 0px 0;
    }

    .product-item {
        margin-bottom: 30px;
        text-align: center;
    }

    /* Container for the image, enabling the flip effect */
    .product-img-container {
        position: relative;
        overflow: hidden;
        margin: 0 auto 20px;
        width: 100%;
        max-width: 250px; /* Adjust image container size */
        height: 250px;
    }

    .product-front, .product-back {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
        backface-visibility: hidden; /* Prevents back image from showing through */
        object-fit: contain; /* Ensures the image fits without distortion */
        padding: 10px;
    }

    .product-front {
        opacity: 1;
        transform: rotateY(0deg);
        z-index: 2;
    }

    .product-back {
        opacity: 0;
        transform: rotateY(-180deg);
        z-index: 1;
    }

    /* HOVER EFFECT: When mouse is over the container, change visibility */
    .product-img-container:hover .product-front {
        opacity: 0;
        transform: rotateY(180deg);
    }

    .product-img-container:hover .product-back {
        opacity: 1;
        transform: rotateY(0deg);
    }

    /* Product Details Styling */
    .product-title {
        font-size: 18px;
        font-weight: bold;
        color: #1a4312; /* Dark Green */
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    .product-price {
        color: #555;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .product-stars {
        color: gold;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .add-to-cart-btn {
        display: inline-flex;
        align-items: center;
        padding: 8px 15px;
        background-color: #1f6306; /* Orange/Yellow button color */
        color: #fff;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
        font-weight: 500;
    }

    .add-to-cart-btn:hover {
        background-color: #e69c2d;
    }
    
    .add-to-cart-btn .arrow {
        margin-left: 10px;
        font-size: 1.2em;
    }



     /* Custom CSS for Product Display with Circle Outline */

    /* Container for the overall product section */
    .sb-products-area {
        background-color: #fff /* Light background color matching your sample */
        padding: 80px 0;
    }

    /* Product Item general styling */
    .sb-products-item {
        margin-bottom: 30px;
        text-align: center;
    }

    /* 1. Circle Outline Container (sb-products-thumb-wrap) */
    .sb-products-thumb-wrap {
        position: relative;
        display: flex; /* Use flexbox for centering image */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        margin: 0 auto 20px;
        width: 300px;       /* Fixed width for the circle */
        height:300px;      /* Fixed height for the circle */
        border: 2px solid #6C9F22; /* Green circle outline */
        border-radius: 50%; /* Make it a perfect circle */
        overflow: hidden;   /* Ensure image stays within the circle */
        background-color: #fff; /* White background for the circle */
    }

    /* 2. Actual Image Container (sb-products-thumb) */
    .sb-products-thumb {
        /* No absolute positioning needed as there's only one image */
        width: 100%; /* Take full width of parent (wrap) */
        height: 100%; /* Take full height of parent (wrap) */
        display: flex; /* Use flexbox for image centering within this div */
        justify-content: center;
        align-items: center;
    }

    /* 3. Actual Image Tag */
    .sb-products-thumb img {
        width: auto;    /* Allow image to scale */
        height: auto;   /* Allow image to scale */
        max-width: 90%; /* Ensure image is slightly smaller than circle to avoid touching edges */
        max-height: 90%;/* Ensure image is slightly smaller than circle */
        object-fit: contain; /* Important: Ensures the entire image is visible and scaled properly */
        border-radius: 50%; /* Optional: if you want the image itself to be slightly rounded inside */
    }
    
    /* Product Title and Price */
    .sb-products-title {
        font-size: 18px;
        font-weight: bold;
        color: #1a4312; /* Dark Green */
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    .sb-products-desc {
        color: #555;
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Rating Stars Color (Matching Sample) */
    .sb-product-rating .fas, .sb-product-rating .fa-solid {
        color: #f5b041; /* Gold/Orange color for stars */
        font-size: 18px;
    }
    
    /* Add to Cart Button Styling (Matching Sample) */
    .sb-btn.sb-btn-three {
        display: inline-flex;
        align-items: center;
        padding: 8px 15px;
        background-color: #1F6306; /* Orange/Yellow button color */
        color:#fff;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
        font-weight: 500;
        border: none; /* Remove default button border */
    }

    .sb-btn.sb-btn-three:hover {
        background-color: #e69c2d;
        color: #fff; /* Ensure text color stays white on hover */
    }
    
    .sb-btn-three-text {
        margin-right: 5px;
    }

    .sb-btn-three-icon img {
        width: 16px; /* Size of the arrow image */
        height: 16px;
        margin-left: 5px;
    }

    /* Header text styling from your previous example */
    .sb-section-subtitle {
        color: #498240; /* Green for "Checkout New Products" */
        font-family: 'Times New Roman', serif; /* Matching font family */
    }

    .sb-section-title {
        color: #1a4312; /* Dark green for "Introducing New Products" */
        font-size: 36px;
        font-weight: bold;
    }