:root {
            --primary-green: #44ad00;
            --dark-teal: #1a5a70;
            --bg-light: #f9f9f9;
            --red-notif: #ff0000;
        }

        body { margin: 0; font-family: 'Segoe UI', Roboto, sans-serif; background: #fff; color: #333; }

        /* 1. Notification Bar */
        .notif-bar {
            background: var(--red-notif);
            color: white;
            text-align: center;
            padding: 8px;
            font-size: 13px;
            font-weight: bold;
        }

        /* 2. Header */
        .main-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 1000;
            background: #fff;
        }
        .logo img { height: 50px; }
        .header-icons { display: flex; gap: 15px; font-size: 20px; cursor: pointer; }

        /* 3. Main Container */
        .product-container {
            max-width: 1200px;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            padding: 20px;
        }

        /* 4. Left Side: Image Slider */
        .slider-box { flex: 1; min-width: 350px; position: relative; overflow: hidden; border-radius: 10px; }
        .slides { display: flex; transition: transform 0.4s ease-in-out; }
        .slides img { width: 100%; display: block; }
        .slider-nav {
            position: absolute; top: 50%; width: 100%; display: flex;
            justify-content: space-between; transform: translateY(-50%);
        }
        .slider-nav button {
            background: rgba(255,255,255,0.7); border: none; padding: 10px;
            cursor: pointer; border-radius: 50%; margin: 0 10px;
        }

        /* 5. Right Side: Product Info */
        .product-info { flex: 1; min-width: 350px; }
        .rating-row { color: #fbc02d; font-size: 14px; margin-bottom: 10px; }
        .rating-badge { background: #1b5e20; color: white; padding: 2px 6px; border-radius: 4px; margin-right: 5px; }
        .price { font-size: 32px; font-weight: bold; margin: 10px 0; color: #222; }
        .feature-list { margin: 20px 0; padding: 0; list-style: none; }
        .feature-list li { margin-bottom: 10px; color: #555; display: flex; align-items: center; }
        .feature-list li::before { content: "✓"; color: var(--primary-green); font-weight: bold; margin-right: 10px; }

        /* 6. Buttons */
        .qty-input { display: flex; border: 1px solid #ccc; width: fit-content; border-radius: 25px; margin-bottom: 20px; }
        .qty-input button { background: none; border: none; padding: 10px 20px; cursor: pointer; font-size: 18px; }
        .qty-input input { width: 40px; text-align: center; border: none; font-size: 16px; outline: none; }
        
        .btn-group { display: flex; gap: 15px; flex-wrap: wrap; }
        .btn { padding: 15px 30px; border-radius: 30px; border: none; font-weight: bold; cursor: pointer; flex: 1; min-width: 150px; transition: 0.3s; }
        .btn-cart { background: var(--dark-teal); color: white; }
        .btn-buy { background: var(--primary-green); color: white; }
        .btn:hover { opacity: 0.9; transform: translateY(-2px); }

        /* 7. Review Section */
        .review-section { background: var(--bg-light); padding: 40px 20px; text-align: center; margin-top: 40px; }
        .fb-review {
            background: white; max-width: 600px; margin: 20px auto; padding: 20px;
            border-radius: 15px; text-align: left; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .user-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .user-header img { width: 40px; height: 40px; border-radius: 50%; }
        .comment-body { background: #f0f2f5; padding: 12px; border-radius: 18px; font-size: 14px; }


.variant-selection { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.variant-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
}

.v-old-price {
    color: #999;
    text-decoration: line-through;
    font-size: 13px;
}

.v-discount {
    color: #d9534f; /* Red or Green color for discount */
    font-weight: bold;
    font-size: 13px;
}

/* જે સિલેક્ટ હોય તેની બોર્ડર ગ્રીન થાય */
.variant-box:has(input:checked) {
    border: 2px solid var(--primary-green) !important;
    background: #f0fdf4;
}

.variant-box input[type="radio"] { display: none; }

/* --- તમારી જૂની CSS ની નીચે આટલું એડ કરો --- */

/* ૧. BUY NOW બટનને સેન્ટર અને મોટું કરવા માટે */
.btn-group {
    display: flex;
    justify-content: center; /* સેન્ટર કરવા માટે */
    width: 100%;
    margin-top: 20px;
}

.btn-buy {
    background: #44ad00 !important; /* Premium Green */
    color: white !important;
    padding: 18px 0 !important;
    width: 100% !important;
    max-width: 450px !important; /* મોબાઈલમાં ફૂલ વિડ્થ, ડેસ્કટોપમાં લિમિટેડ */
    font-size: 22px !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    box-shadow: 0 8px 20px rgba(68, 173, 0, 0.3) !important;
    animation: heartbeat 2s infinite; /* ધબકારા જેવું એનિમેશન */
    border: none !important;
    cursor: pointer !important;
}

/* ૨. વધારાના એનિમેશન માટે */
@keyframes heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.03); }
    20% { transform: scale(1); }
}

/* ૩. Qty અને Add to Cart છુપાવવા માટે (જો તમે HTML માંથી ન કાઢ્યા હોય તો) */
.qty-input, .btn-cart {
    display: none !important;
}

/* ૪. મોબાઈલ સેટિંગ્સ */
@media screen and (max-width: 480px) {
    .btn-buy {
        font-size: 20px !important;
        padding: 15px 0 !important;
    }
}

.v-compact .v-content { display: flex; align-items: center; gap: 10px; }
.v-title { font-weight: bold; font-size: 14px; }
.v-sub { color: var(--red-notif); font-size: 12px; }

.v-badge {
    position: absolute;
    top: -8px;
    right: 10px;
    background: var(--red-notif);
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
}


/*key benifit start */

:root {
    --dark-green: #1e5128;   /* પેકિંગ જેવો ડાર્ક ગ્રીન */
    --leaf-green: #4e944f;   /* બટન અને હાઈલાઈટ માટે */
    --soft-green: #f1f8f1;   /* બેકગ્રાઉન્ડ માટે */
    --accent-green: #b9e4c9; /* બોર્ડર માટે */
}

.slimo-benefits {
    padding: 60px 20px;
    background-color: #ffffff;
    text-align: center;
}

.section-title {
    color: var(--dark-green);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.green-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.green-divider::before, .green-divider::after {
    content: "";
    height: 1.5px;
    width: 60px;
    background-color: var(--leaf-green);
}

.diamond {
    width: 10px;
    height: 10px;
    background-color: var(--dark-green);
    transform: rotate(45deg);
    margin: 0 10px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

.benefit-item {
    background-color: var(--soft-green);
    border: 1px solid var(--accent-green);
    border-radius: 15px;
    padding: 25px 15px;
    transition: transform 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(30, 81, 40, 0.1);
}

.image-wrapper {
    width: 160px;
    height: 160px;
    background-color: #ffffff;
    border-radius: 50%;
    margin: 0 auto 20px;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit-item p {
    color: var(--dark-green);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .benefits-grid {
        grid-template-columns: 1fr 1fr; /* મોબાઈલમાં બે લાઈન */
        gap: 15px;
    }
    .image-wrapper {
        width: 120px;
        height: 120px;
    }
    .section-title { font-size: 22px; }
}

/*key benifit end */


/*FAQ start*/

.faq-section {
    max-width: 850px;
    margin: 40px auto;
    padding: 20px;
}

.faq-title {
    text-align: center;
    color: #1e5128; /* Dark Green */
    font-size: 26px;
    margin-bottom: 25px;
}

.faq-item {
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.faq-question {
    width: 100%;
    background: #f1f8f1; /* Light Green */
    border: none;
    text-align: left;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #1e5128;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
    background: #fff;
}

.faq-answer p {
    padding: 15px 20px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

/* Active State */
.faq-item.active {
    border-color: #1e5128;
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Adjust if needed */
}

.faq-item.active .faq-question {
    background: #1e5128;
    color: #fff;
}

/*FAQ end */

/* video section*/

.video-section {
    padding: 50px 20px;
    background-color: #f9fdf9; /* Light Green Tint */
    text-align: center;
}

.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.video-card {
    flex: 1;
    min-width: 320px;
    max-width: 500px;
    background: #fff;
    padding: 10px;
    border: 2px solid #1e5128; /* Dark Green Border */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.video-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* વિડિયોનું માપ જળવાઈ રહેશે */
    border-radius: 10px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .video-card {
        min-width: 100%;
    }
}

/* video section end*/


.banner-wrapper {
    width: 100%;
    max-width: 100%; /* સ્ક્રીનથી બહાર ન જાય તે માટે */
    margin: 0 auto;
    overflow: hidden;
    line-height: 0;
}

.banner-wrapper img {
    width: 100%;      /* મોબાઈલ સ્ક્રીનની પૂરી પહોળાઈ લેશે */
    height: auto;     /* હાઈટ આપમેળે સેટ થશે જેથી ફોટો ખેંચાય નહીં */
    display: block;
    border: none;
    border-radius: 0 !important; /* કોર્નર સીધા રાખવા માટે */
}

/* ટેબલેટ અને ડેસ્કટોપ માટે જો તમારે સાઈઝ લિમિટ કરવી હોય તો */
@media screen and (min-width: 768px) {
    .banner-wrapper {
        max-width: 1200px; /* મોટા સ્ક્રીન પર ફોટો બહુ મોટો ન થાય તે માટે */
    }
}

/*image css end */

/*order form  */



/* order form end*/



.btn-wrapper {
            display: flex;
            justify-content: center;
            padding: 40px 20px;
        }

        /* Real Button Look */
        .order-now-btn {
            background: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            color: white;
            padding: 18px 40px;
            text-decoration: none;
            border-radius: 15px; /* Rounded corners like a card */
            font-family: 'Hind Vadodara', sans-serif;
            text-align: center;
            display: block;
            width: 100%;
            max-width: 350px;
            box-shadow: 0 10px 25px rgba(231, 76, 60, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        /* Fire Emoji and Title */
        .btn-tag {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            opacity: 0.9;
        }

        /* Big Price Text */
        .btn-price {
            font-size: 26px;
            font-weight: 700;
            display: block;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        /* Action Text */
        .btn-action {
            font-size: 14px;
            background: rgba(0, 0, 0, 0.1);
            display: inline-block;
            padding: 4px 15px;
            border-radius: 50px;
            font-weight: 400;
        }

        /* Hover & Animation */
        .order-now-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(231, 76, 60, 0.6);
            filter: brightness(1.1);
        }

        /* Subtle Shine Effect */
        .order-now-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        @media (max-width: 480px) {
            .btn-price { font-size: 22px; }
            .order-now-btn { padding: 15px 25px; }
        }