/* Base Reset and Variables */
:root {
    --primary-color: #000000; /* True Black for shadows/accents */
    --secondary-color: #1A1A1A; /* Deep Dark Gray for Background */
    --accent-color: #f7a823; /* Gold/Yellow Accent */
    --text-color: #ffffff; /* White Text for dark background */
    --text-color: #eeeeee; /* Softer White for readability */
    --light-gray: #333333; /* Darker grey for borders/dividers */
    /* Define the height of your fixed navigation bar */
    --nav-height: 60px; 
    --primary-red: #e62b1e;
    --dark-bg: #141414;
}
/* --- Global Smooth Scrolling --- */
html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- BASE & UTILITIES --- */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-color: black;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}



/* 1. Navigation Bar (Desktop & Base Styles) */
.navbar {
    padding: 0; /* Remove horizontal padding */
    background-color: black;
    border-bottom: 1px solid var(--light-gray);
    position: sticky;
        margin-top: 35px; 
    top: 35px ;
    z-index: 1000;
}

.navbar-content {
    /* Apply the necessary flex properties here to control inner alignment */
    display: flex;
    justify-content: space-between; /* Pushes Logo to left, Links to right */
    align-items: center;
    padding: 20px 0; /* Apply vertical padding here */
}

/* Logo Styling */
.logo {
    font-size: 24px;
    font-weight: 700;
    color:  #f7a823;
    text-transform: uppercase;
    transition: color 0.3s;
    cursor: pointer;
    
    /* FIX 1: Prevents the logo text from wrapping onto a new line */
    white-space: nowrap; 
}

.logo:hover {
    color: var(--accent-color); /* Changes color on hover */
}

/* Desktop Links Container */
.nav-links {
    display: flex;
    gap: 30px; /* Increase gap between links */
    align-items: center;
}

/* Individual Link Styling */
.nav-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 20px;
    font-weight: 400; 
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--accent-color);
}

/* Hamburger Toggle Base Styling (Hidden on Desktop) */
.menu-toggle {
    display: none; /* Hide by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-color);
    transition: all 0.3s ease-in-out;
}

/* --- MOBILE MENU & ANIMATION STYLES --- */
.mobile-menu {
position: fixed; /* Keep it fixed relative to the viewport */
    top: 35px;
    left: 0;
    width: 100%;
        margin-top: 40px; /* works the same & safer */
    /* FIX: Crucial: ensures it covers the entire screen, even if the content is taller */

    /* FIX: Crucial: ensures it covers the entire screen, even if the content is taller */
    background-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);

/* FIX: Center the block elements (the links) */
    text-align: center; 
    z-index: 999;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.active {
    transform: translateY(0); /* Slides down when active */
}

.mobile-link {
color: var(--text-color);
    text-decoration: none;
    /* FIX: Set display to block and center text */
    display: block; 
    text-align: center; 
    
    /* FIX: Adjusted padding for better vertical spacing */
    padding: 18px 30px; 
    font-size: 18px; 
    font-weight: 500;
    
    /* Optional: Add a subtle horizontal line for separation */
    border-bottom: 1px solid var(--light-gray); 
    
    transition: background-color 0.2s
}

.mobile-link:hover {
    background-color: var(--light-gray);
}


/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1200px) {
    .navbar-content {
        padding: 20px 15px; /* Re-apply padding on the sides for smaller screens */
    }
}

@media (max-width: 768px) {
    /* Show the hamburger menu toggle */
    .menu-toggle {
        display: block;
    }

    /* FIX 2: CRITICAL: Hide the desktop nav links and ensure it sticks */
    .nav-links {
        display: none !important; 
    }
    
    /* Optional: Shrink the logo on mobile */
    .logo {
        font-size: 20px; 
    }
    /* FIX: Ensure the mobile menu starts below the header */
    .mobile-menu {
        top: 85px; /* Must match the height calculated above */
    }

    /* Hamburger to 'X' animation when active */
    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Removed .cart-icon styling as the element is removed */

/* 2. Hero Section (New Two-Column Layout) */
.hero-section {
padding: 60px 0; 
    /* Slightly less dark background for the section to differentiate it from the true black header */
        /* Background treatment to simulate the dark, blurred backdrop */
    background-color: #000000; 


    
    /* Add a subtle drop shadow to the entire section for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.hero-grid {
    display: flex;
    align-items: center; 
    gap: 40px;
    min-height: 500px; /* Ensure a minimum height for the hero */
}

/* Left Column: Image */
.hero-image-col {
    flex: 1; 
    text-align: center;
}

.product-image-container {
    max-width: 400px; 
    margin: 0 auto;
}

.product-image {
width: 100%;
    height: auto;
    display: block;
    background-color: transparent; 
    
    /* --- PSEUDO-3D AND LIFT EFFECTS --- */
    
    /* 1. Subtle lift effect (moves the image slightly up) */
    transform: translateY(-5px); 
    
    /* 2. Deep, subtle shadow to mimic depth on the dark background */
    /* Syntax: horizontal-offset vertical-offset blur-radius spread-radius color */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.9));
    
    /* 3. Transition for a smooth hover effect (optional but nice) */
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
/* Optional: Add a subtle hover effect to make it interactve */
.product-image:hover {
    transform: translateY(-8px); /* Lifts it higher on hover */
    filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.95)); /* Deepens the shadow on hover */
}


/* Right Column: Text and CTA */
.hero-text-col {
    flex: 1; 
    padding-right: 20px; 
    color: var(--text-color); /* Set text color to white */
}

.headline {
    font-size: 44px;
    font-weight: 800;
    color: var(--text-color); /* White headline */
    margin-bottom: 10px;
    line-height: 1.1;
}

.subheadline {
    font-size: 22px;
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 15px;
}

.rating {
    margin-bottom: 15px;
    font-size: 16px;
}

.stars {
    color: var(--accent-color);
    letter-spacing: 2px;
}

.price-container {
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}

.original-price {
    color: #888; /* Lighter gray for struck-out price */
    text-decoration: line-through;
    font-size: 24px;
    font-weight: 400;
}

.sale-price {
    color: var(--accent-color);
    font-size: 38px;
}

.short-description {
    font-size: 18px;
    margin-bottom: 30px;
}

.cta-button {
    background-color: #ff0000;
    color: white;
    border: 2px solid #000;
    padding: 15px 40px;
    border-radius: 5px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
    
    /* Apply the pulse animation */
        /* --- ADDED FOR BLINKING --- */
    /* Apply the animation */
    animation: blink-animation 1.5s infinite alternate; /* 1.5s duration, infinite loop, alternates direction */ 
    
    box-shadow: 0 4px 10px rgba(247, 168, 35, 0.4);
    width: auto; 
    display: block; 
    max-width: 350px;
}

.cta-button:hover {
        background-color: #333;
    color: white;

    /* --- ADDED FOR HOVER --- */
    animation-play-state: paused;
}
/* --- Keyframes for Pulsing Animation --- */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(247, 168, 35, 0.6);
    }
    70% {
        transform: scale(1.03); /* Slight growth */
        box-shadow: 0 0 0 15px rgba(247, 168, 35, 0); /* Outer ripple */
    }
    100% {
        transform: scale(1);
    }
}



/* Placeholder for next section */
.next-section {
    padding: 50px 0;
    text-align: center;
    background-color: var(--light-gray); /* Use a darker divider color */
    color: var(--text-color);
}


/* Responsive Adjustments: Stack columns on mobile */
@media (max-width: 900px) {
    .hero-grid {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-image-col {
        order: 1; 
    }

    .hero-text-col {
        order: 2;
        padding-right: 0;
        margin-top: 20px;
    }
    
    .headline {
        font-size: 32px;
    }

    .subheadline {
        font-size: 18px;
    }

    .cta-button {
        margin: 0 auto; 
        max-width: 300px;
    }
}

@media (max-width: 500px) {
    .headline {
        font-size: 26px;
    }
    .price-container {
        font-size: 24px;
    }
    .sale-price {
        font-size: 30px;
    }
}

                /* ######################################################
                   ######################################################
                   ###################################################### */


/* --- 2. CORE BENEFITS SECTION STYLES --- */
.core-benefits-section {
    background-color: var(--primary-color); /* True Black background for contrast */
    padding: 80px 0;
    color: var(--text-color);
    border-top: 1px solid var(--light-gray);
}

/* Add this style for the title above the three icons */
.section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color); /* White text */
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.benefits-divider {
    border: none;
    height: 1px;
    background-color: var(--light-gray);
    margin: 40px 0;
}

/* 2.1 Top Icon Grid */
.top-benefits-grid {
display: grid;
    /* Defines 3 equal-width columns for desktop */
    grid-template-columns: repeat(5, 1fr); 
    gap: 30px;
    text-align: center;
    padding: 40px 0;
}

.top-benefit-item {
/* padding: 20px; */
    border-radius: 8px;
}

.top-benefit-icon {
display: block;
    margin-bottom: 10px;

}
.top-benefit-icon img {
    width: 200px; /* Adjust size as needed, 50px is a good start */
    height: 200px;
    object-fit: contain; /* Ensures the image scales properly without cropping */
}

.top-benefit-desc {
    font-size: 20px;
    font-weight: 500;
    color: #ccc; /* Slightly lighter gray */
}

/* 2.2 Main Detailed Benefits Grid */
.detailed-benefits-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start; /* Aligns content to the top */
}
/* Find this block in your styles.css */

/* Left Column: Narrative */
.narrative-col, .advantages-col {
    flex: 1;
    min-width: 45%;
}


.narrative-title, .advantages-title {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white; /* Title color from the image */
}

.narrative-title strong, .advantages-title strong {
    color: var(--text-color); /* Bold part of title is white */
}


/* Update the .narrative-text block in styles.css */
.narrative-text {
    /* FIX: Increase font size for readability and impact */
    font-size: 18px; 
    line-height: 1.7;
    /* margin-bottom: 20px; */
    color: #aaaaaa;
}


.narrative-icon-large img {
/* Set specific, controlled dimensions */
    width: 100%; 
    height: 100%; /* IMPORTANT: Maintain aspect ratio */ 
    
    object-fit: contain;
    display: block;
    margin: 0 auto;

}
/* --- Responsive Fix for Section 2: Top Benefits Grid --- */
/* 💻 Transition to 3 or 2 columns on mid-sized tablets (Optional) */
@media (max-width: 1100px) {
    .top-benefits-grid {
        /* You can switch to 3 columns here if needed */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    /* FIX: Override the 3-column definition with 1 column */
    .top-benefits-grid {
        grid-template-columns: 1fr; /* Change from 3 columns to 1 column */
        gap: 30px; 
        padding: 0 40px; 
    }
    
    .top-benefit-item {
        margin: 0 auto; 
        max-width: 300px; /* Limits the width of the stacked item */
    }
}
/* Right Column: Advantages List */
.advantages-list {
    list-style: none;
    padding: 0;
}

.advantages-list li {
    background-color: var(--secondary-color); /* Dark gray background for list items */
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    font-size: 16px;
}
.advantage-content {
    /* Use flex-grow to make the content block take up the remaining space */
    flex-grow: 1; 
    /* Ensures the main text and paragraph stack vertically (default block behavior) */
    display: block; 
}

.advantage-bullet-icon {
    font-size: 24px;
    color: var(--accent-color);
    flex-shrink: 0;
}

.advantages-list li strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.advantages-list li p {
    font-size: 14px;
    color: #bbbbbb;
    line-height: 1.4;
    margin: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .detailed-benefits-grid {
        flex-direction: column; /* Stack columns on tablet/mobile */
        gap: 40px;
    }

    .narrative-col, .advantages-col {
        min-width: 100%;
    }
    
    .narrative-icon-large {
        text-align: left; /* Keep large icon aligned with text */
    }
}

@media (max-width: 600px) {
    .top-benefits-grid {
        flex-direction: column; /* Stack top benefits on smaller mobile screens */
    }

    .narrative-title, .advantages-title {
        font-size: 26px;
    }
}



                 /* ############################################### */
                 /* ############################################### */
                 /* ############################################### */

/* --- Overall Section Styling --- */
.preparation-section {
    background-color: #000000; /* Dark background color to match the image */
    padding-top: 60px;
    padding-bottom: 0px; /* Reduced space below the content */
    padding-left: 20px;
    padding-right: 20px;
    color: #fff;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
}

/* --- Image Wrapper for Centering and Max Width --- */
.image-wrapper {
    /* Center the image block horizontally */
/* Sets the maximum width the image can take up on desktop */
    max-width: 600px; 
    
    /* Centers the container block itself */
    margin: 0 auto; 
    
    /* Used to fix the small space issue below inline images */
    line-height: 0;
    text-align: center;
}

/* --- Responsive Image Styling --- */
.responsive-diagram-image {
    /* Ensures the image will never exceed the size of its parent container (image-wrapper) */
    max-width: 100%; 
    /* Allows the image to scale down fluidly */
    height: auto; 
    /* Ensures the image is displayed as a block element */
    display: block; 
    /* If the image wrapper is larger than the image, this centers the image */
    margin: 0 auto;
}

/* --- Optional: Media Query for smaller screens --- */
@media (max-width: 600px) {
    .section-title {
        font-size: 2rem;
    }
    .preparation-section {
        padding-top: 30px;
        padding-bottom: 0px; /* Minimal space at the very bottom */
    }   
}
                 /* ############################################### */
                 /* ############################################### */
                 /* ############################################### */

                 /* --- 4. TESTIMONIALS SECTION STYLES --- */
.testimonials-section {
    background-color: var(--primary-color); /* Use the main dark background */
    padding: 100px 0;
}

.section-title {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 60px;
}

/* Testimonials Grid (3 columns for desktop) */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background-color: var(--secondary-color); /* Dark card background */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-top: 5px solid var(--accent-color); /* Subtle accent strip */
}

/* Star Rating Style */
.rating {
    margin-bottom: 15px;
}

.stars {
    font-size: 24px;
    color: var(--accent-color); /* Gold/Orange color for stars */
}

.review-text {
    font-size: 16px;
    line-height: 1.6;
    color: #cccccc;
    margin-bottom: 20px;
    font-style: italic;
}

.reviewer-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 2px;
}

.reviewer-location {
    font-size: 14px;
    color: var(--accent-color);
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .section-title {
        font-size: 32px;
    }
    
    /* Change testimonials to stack in 1 column on smaller screens */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


/* --- New Styles for UGC Review Photos --- */

/* Align stars and name at the top */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.reviewer-name {
    /* Combine name and location into one line for the header */
    font-size: 14px;
    font-weight: 500;
    color: #cccccc;
    margin: 0;
}

/* Container for the Image and Text */
.review-content-body {
    display: flex;
    gap: 15px; /* Space between the image and text */
    text-align: left; /* Ensure the review text remains readable (left-aligned) */
}

/* Style for the review photo container */
.product-review-photo {
    /* Define a fixed, small area for the UGC photo */
    flex-shrink: 0; /* Prevents the image from shrinking */
    width: 70px; 
    height: 90px;
    border-radius: 4px; 
    overflow: hidden;
    margin-top: 5px; /* Aligns the image nicely with the start of the text */
}

.ugc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* Ensures the image fills the area */
    display: block;
}

/* Ensure the review text takes up the rest of the space */
.review-text {
    flex-grow: 1;
    margin: 0; /* Remove default margin */
}

/* Override the overall card alignment from the previous step */
.testimonial-card {
    /* Keep existing card styles... */
    text-align: left; /* IMPORTANT: Reset to left-align the content inside the card */
}

/* Adjust star rating style */
.stars {
    font-size: 20px;
}

/* ################################################################
################################################################
################################################################ */
/* --- 5. FINAL CTA/GUARANTEE STRIP --- */
.final-cta-strip {
    background-color: var(--accent-color); /* Bright, contrasting background */
    padding: 20px 0;
    text-align: center;
    color: #000; /* Dark text on the bright background */
}

.final-cta-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; /* Allows stacking on mobile */
    max-width: 900px;
    margin: 0 auto;
}


/* Define the blinking animation */
@keyframes blink-animation {
    0% {
        opacity: 1; /* Fully visible */
    }
    50% {
        opacity: 0.3; /* Partially faded (the "blink") */
    }
    100% {
        opacity: 1; /* Fully visible again */
    }
}

/* Existing button style */
.final-order-cta {
    /* Existing Styles */
    background-color: #ff0000;
    color: white;
    border: 2px solid #000;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 15px;
    flex: 0 0 auto;

    /* --- ADDED FOR BLINKING --- */
    /* Apply the animation */
    animation: blink-animation 1.5s infinite alternate; /* 1.5s duration, infinite loop, alternates direction */
}

/* To ensure the hover effect still works well, you might want to pause the animation on hover */
.final-order-cta:hover {
    background-color: #333;
    color: white;

    /* --- ADDED FOR HOVER --- */
    animation-play-state: paused; /* Stop the blinking when the user hovers over it */
}

/* Responsive adjustment for guarantee strip */
@media (max-width: 768px) {
    .final-cta-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    

}

/* ################################################################
################################################################
################################################################ */
/* --- FOOTER STYLES --- */
footer {
    background-color: #000; /* Black background like the original */
    color: #fff;
    padding: 40px 5%; /* Vertical padding and 5% horizontal padding */

    line-height: 1.6;
}

.footer-container {
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on small screens */
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px; /* Space above the legal text */
}

.footer-col {
        color: #ffffff; /* Orange color for emphasis */
    flex-basis: 14%; /* Each column takes about 22% of the width */
    margin-bottom: 30px; /* Space between columns when stacked */
    min-width: 200px; /* Minimum width before wrapping */
}

/* Headings */
.footer-col h3,.footer-col h4  {
     color: #f7a823;
    margin-bottom: 20px;
    font-weight: bold;
}
.footer-contact h4 {
    /* Use the same primary color */
    margin-bottom: 20px;
    color: #f7a823;
    /* Remove padding/border from the general column style if applied, or keep the existing style */
}
.contact-group {
    margin-bottom: 20px;
    color: #ccc; /* Space between Phone, Email, Support groups */
}

/* Label style (Phone, Email, Customer Support) */
.contact-label {
    /* Color matching the reddish-brown/orange in the original image */
    color: #ffffff; 
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 16px;
}
/* Target the <a> tag with class .toll-free */
.footer-contact a.toll-free:hover {
    color: #f7a823; 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    /* No need for cursor: pointer, as links naturally have it */
}
.contact-value {
    /* Color matching the yellow/orange in the original image */
    color: #ccc; /* Space between Phone, Email, Support groups */
    font-size: 14px;
    line-height: 1.4;
}
.footer-info h3 { /* Larger title for main company name */
    font-size: 24px;
}

/* Links List */
.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #FFC300;
}

/* Contact Details */
.contact-item {
    display: block; /* Change from flex to block for vertical stacking */
}
.contact-item i {
    display: none; /* Hide icons in this new structure */
}

.footer-contact a {
    color:  #ccc;
    text-decoration: none;
}
.footer-contact a:hover {
    color: #f7a823;
    text-decoration: underline;
}
/* Map Placeholder */
#map-placeholder {
    background-color: #333;
    height: 150px; /* Height for the map box */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 5px;
}

/* Legal Disclaimer */
.footer-legal {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333; /* Separator line */
}
.footer-legal p {
    font-size: 12px;
    color: #999;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- MEDIA QUERY FOR MOBILE DEVICES --- */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stack all columns vertically */
    }

    .footer-col {
        flex-basis: 100%; /* Each column takes full width */
        min-width: 100%;
        margin-bottom: 20px;
    }

    .footer-col h3, .footer-col h4 {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid #333; /* Separator line for better distinction */
    }
}



/* --- 5b. ORDER FORM SECTION STYLES --- */
.order-form-container {
    background-color: var(--secondary-color); /* Dark grey background */
    padding: 80px 0;
    text-align: center;
    
    /* Initially hide the form container */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in;
}

/* Class added by JavaScript to show the form */
.order-form-container.is-visible {
    max-height: 3000px; /* Needs to be larger than the content height */
    opacity: 1;
}
/* Style the mobile prompt */
.mobile-prompt {
    text-align: center;
    color: #FFC300; /* Use your accent color */
    margin: 10px 0 20px;
    font-size: 14px;
    font-weight: bold;
}

.form-title {
    font-size: 38px;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.form-subtitle {
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 40px;
}

.order-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

/* General form group styling */
.form-group {
    margin-bottom: 20px;
}

.order-form input[type="text"],
.order-form input[type="email"],
.order-form input[type="tel"],
.order-form textarea,
.order-form select {
    width: 100%;
    padding: 15px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #1a1a1a; /* Very dark input background */
    /* FIX: Ensure the text is visible */
    color: #ffffff; 
    font-size: 16px;
    /* For select boxes on some browsers, this helps */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.order-form textarea {
    resize: vertical;
}

.shipping-details h3, .payment-step h3 {
    font-size: 24px;
    color: var(--text-color);
    margin-bottom: 20px;
    padding-top: 10px;
    border-top: 1px dashed #333;
}

/* Ensure the Step 2 header is styled correctly */
.step-header {
    font-size: 28px;
    color: var(--accent-color); /* Orange/Gold color */
    margin-bottom: 25px;
    padding-top: 10px;
    border-bottom: 2px solid var(--accent-color);
}

/* Container for the QR Code - Ensures it looks official */
.qr-code-display {
    width: 250px;
    height: 250px;
    margin: 20px auto;
    border: 4px solid var(--accent-color);
    padding: 10px;
    border-radius: 8px;
    background-color: white; /* MUST be white for QR readability */
}

.upi-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* UPI ID Text Style */
.upi-id-text {
    font-size: 16px;
    color: var(--accent-color);
    margin-bottom: 20px;
}

/* Payment Instruction Text Style */
.payment-instruction {
    font-size: 18px;
    color: var(--text-color); /* Assuming white/light text */
    margin: 20px 0;
}

/* Final Submit Button (Assuming basic .cta-button style is defined elsewhere) */
.final-submit-btn {
    width: 100%; /* Make it full width of the form container */
    /* Add any specific styles that differentiate it from the previous button if needed */
}

/* Back Button Style */
.back-button {
    background: none;
    border: none;
    color: #cccccc;
    font-size: 14px;
    margin-top: 15px;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s;
}

.back-button:hover {
    color: var(--accent-color);
}

/* Responsive adjustment for small screens */
@media (max-width: 600px) {
    .qr-code-display {
        width: 200px;
        height: 200px;
    }
}


/* Ensure the link container handles the image correctly */
.qr-code-container {
    text-align: center; /* Centers the image/link */
    display: block;
    max-width: 300px;
    margin: 0 auto;
}

/* Ensure the image fills the link area */
.qr-image {
    max-width: 250px;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Optional: Add a subtle effect to show it's clickable */
    transition: opacity 0.2s;
}

.qr-image:active {
    /* Slightly dim the image when tapped */
    opacity: 0.8; 
}

/* Style the mobile prompt */
.mobile-prompt {
    text-align: center;
    color: #FFC300; /* Use your accent color */
    margin: 10px 0 20px;
    font-size: 14px;
    font-weight: bold;
}




















/* FAQ Container Styling (The main box) */
.faq-container {
     max-width: 1400px;
    margin: 30px auto;
    padding: 0 40px;
    /* Use the darker background color for contrast */
    background-color: var(--dark-bg, #000000); 
    border-radius: 8px;
    /* Replicating the distinct shadow/border effect */
    box-shadow: 0 0 0 4px var(--accent-color), 0 0 0 6px var(--dark-bg, #141414);
}

/* FAQ Title Styling */
.faq-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 25px;
    color: var(--text-color);
    letter-spacing: 2px;
}

/* Individual FAQ Item Styling */
.faq-item {
    /* Use your light-gray for separation */
    border-bottom: 1px solid var(--light-gray); 
    padding-top: 5px;
}

/* Question Button Styling */
.faq-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 18px 0;
    font-size: 18px;
    /* Use soft white for default question text */
    color: var(--text-color, #eeeeee); 
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
    font-family: inherit; /* Inherit Poppins font */
}

/* Color for the currently active/open question (and the first one) */
.faq-question[aria-expanded="true"],
.faq-item:first-child .faq-question {
    color: var(--accent-color) !important; 
}

/* Hover effect */
.faq-question:hover {
    color: var(--accent-color);
}

/* Icon Styling (+ / -) */
.faq-question .icon {
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-color); /* Yellow color for the icon */
    line-height: 1;
}

/* Answer Content (Hidden by default, controlled by JS) */
.faq-answer-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding-left: 0;
    padding-right: 0;
}

.faq-answer-content.open {
    /* This class is added by JS */
    max-height: 500px; /* Large enough value */
    padding-bottom: 20px;
}

/* Paragraphs inside the answer */
.faq-answer-content p {
    margin: 0;
    padding: 5px 0;
    color: var(--text-color); 
    line-height: 1.6;
}

.faq-answer-content p:first-child {
    /* Keeping the initial text bright white and bold */
    color: #ffffff; 
    font-weight: bold;
}

.hindi-text {
    font-style: italic;
    font-size: 14px;
    /* Softer color for the secondary language text */
    color: var(--light-gray); 
    margin-top: 10px !important;
}

@media (max-width: 1100px) {
    .faq-container {
        /* 1. Reduce the internal padding so content isn't squeezed */
        padding: 0 15px; 
        
        /* 2. Add a small left/right margin to create space for the outline/shadow */
        /* The 'auto' margin property from your desktop rule is ignored when 
             the element is near 100% width, so we set a specific margin value. */
        margin: 30px 10px; 
        
        /* NOTE: You must also ensure the main body/page content is not set 
                 to 'overflow: hidden' as that will also crop the shadow. */
    }
}

/* Media query for screens typically found on tablets and mobile phones */
@media (max-width: 768px) {
    .faq-container {
        /* 1. Reduce the internal padding so content isn't squeezed */
        padding: 0 15px; 
        
        /* 2. Add a small left/right margin to create space for the outline/shadow */
        /* The 'auto' margin property from your desktop rule is ignored when 
             the element is near 100% width, so we set a specific margin value. */
        margin: 30px 10px; 
        
        /* NOTE: You must also ensure the main body/page content is not set 
                 to 'overflow: hidden' as that will also crop the shadow. */
    }
}


.top-offer-strip {
    position: fixed;    /* stays at the top */
    top: 0;
    left: 0;
    width: 100%;
    background: #f7a823;
    color: #000;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    padding: 6px 0;
    border-bottom: 1px solid #000;
    z-index: 9999;     /* THIS FIXES THE ISSUE */
}


.scroll-text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 12s linear infinite;
}

.scroll-text span {
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .top-offer-strip {
        padding: 4px 0;
    }

    .scroll-text span {
        font-size: 12px;     /* Smaller font for mobiles */
    }

    .scroll-text {
        animation: scroll-left 10s linear infinite; /* Slightly faster on mobile */
    }
}

/* Animation */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}



/* Follow Us Column */
.footer-social .social-icons {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.footer-social .social-icons a {
    font-size: 28px;
    color: #ccc;
    transition: 0.3s;
}

.footer-social .social-icons a:hover {
    color: #f7a823; /* matches your footer theme */
    transform: scale(1.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer-social {
        text-align: left;
    }

    .footer-social .social-icons a {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .footer-social .social-icons {
        gap: 15px;
        flex-wrap: wrap;
    }

    .footer-social .social-icons a {
        font-size: 24px;
    }
}

/* ---------------------------------------------------------------- */
/* 1. Base Styling (The Green Circle) - REQUIRED */
/* ---------------------------------------------------------------- */
.whatsapp-fixed-button {
    /* Fixed Positioning */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;

    /* Appearance & Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background-color: #25d366; /* WhatsApp Green */
    color: white;
    border-radius: 50%;
    
    /* Box Shadow and Transitions */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover */

    /* **EFFECT 1: Pulse/Attention Animation** */
    animation: whatsapp-pulse 2s infinite; 
}

/* ---------------------------------------------------------------- */
/* 2. Styling the Icon (The 'W' itself) - REQUIRED */
/* ---------------------------------------------------------------- */
.whatsapp-fixed-button i {
    font-size: 32px;
    /* **EFFECT 2: Subtle Vertical Bounce** */
    transition: transform 0.3s ease;
}

/* ---------------------------------------------------------------- */
/* 3. Hover Effects (User interaction feedback) */
/* ---------------------------------------------------------------- */
.whatsapp-fixed-button:hover {
    background-color: #1FAF59; /* Slightly darker green */
    transform: scale(1.1); /* Slight enlargement */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    /* Pause the pulse animation when hovered */
    animation: none;
}

/* **EFFECT 3: Icon Bounce on Hover** */
.whatsapp-fixed-button:hover i {
    transform: translateY(-3px); /* Moves the icon up slightly */
}


/* ---------------------------------------------------------------- */
/* 4. KEYFRAMES for the Pulse/Blink Effect */
/* ---------------------------------------------------------------- */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); /* Green shadow starts small and transparent */
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); /* Green shadow expands and fades */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); /* Reset for the next loop */
    }
}

/* 3. STYLING THE ICON ITSELF */
.whatsapp-fixed-button i {
    font-size: 32px; /* Set the size of the icon */
}

/* 4. OPTIONAL: Hover Effect */
.whatsapp-fixed-button:hover {
    background-color: #1FAF59; /* A slightly darker green on hover */
    transform: scale(1.1); /* Slight enlargement */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}