@font-face {
  font-family: 'header';
  src: url('assets/Fonts/Snowman\ Stayhome.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'header1';
  src: url('assets/Fonts/Minimalist\ Design.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'balgio';
  src: url('assets/Fonts/balgio/Balgio.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Ab font use karo */
body {
  font-family: 'MyFont', sans-serif;
}
/* --- CRITICAL SCROLLING FIX --- */
/* This ensures that if any nested element is hiding the scrollbar, it is forced back on the body. */
body, html {
    /* Ensures vertical scrolling is active */
    /* overflow-y: scroll !important;  */
    /* Prevents side-to-side scrolling issues */
    overflow-x: hidden !important; 
}
html {
    scroll-behavior: smooth;
}
/* General Reset and Base Styles */
* {
    -webkit-tap-highlight-color: transparent; 
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; 
    outline: none;
}

body {
    font-family: 'Poppins', sans-serif; /* Using a similar-looking font */
    line-height: 1.6;
    color: #333; /* Default text color */
}

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

/* --- 1. Navigation Bar Styles --- */

/* --- 1. Navigation Bar Styles (Modified for Scrolling) --- */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px; 
    background-color: #FFB823; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Stronger shadow so it stands out */
    position: fixed; /* KEY CHANGE: Make it stick to the viewport */
    top: -80px; /* KEY CHANGE: Initially hide it above the viewport (assuming height is ~80px) */
    width: 100%;
    z-index: 1000; /* Ensure it's above other content */
    transition: top 0.3s ease-in-out; /* Smooth transition */
}

/* New CSS class to show the navbar (will be added by JS) */
.navbar.scroll-down {
    top: 0; /* Bring the navbar back into view */
}

/* ... rest of the navbar styles remain the same ... */
/* .logo {
    font-size: 30px;
    font-weight: 700;
    color: #2D4F2B;
    letter-spacing: 1px;
    /* font-family: "balgio"; */
/* } */ 
/* --- Logo Styling Update --- */
.logo-img {
    /* Set a specific maximum width for your logo image */
    max-width: 250px; 
    /* Ensure it scales down nicely on mobile */
    width: 90%; 
    height: auto;
    /* Ensure it's centered if it's in a centered container */
    display: block;
    margin: 0 -13; 
}
.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
}

.nav-item {
    margin-left: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #2D4F2B;
    letter-spacing: 0.5px;
    padding: 5px 0;
    transition: color 0.3s;
}

.nav-item:hover {
    color: #ff9900; /* Subtle hover effect */
}

/* Specific Style for the 'BOOK NOW' button */
.book-now-btn {
    background-color: #ff9900; /* Orange/Yellow from the image */
    color: #000; /* Black text */
    padding: 8px 18px;
    border-radius: 3px;
    margin-left: 30px;
    transition: background-color 0.3s;
}

.book-now-btn:hover {
    background-color: #e68a00; /* Darker hover */
    color: #000;
}

/* Hide Hamburger by default on desktop */
.hamburger {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1000;
}

.hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}

/* --- 2. Hero Section Styles --- */

.hero-section {
    margin-top: 60px;
    display: flex;
    min-height: calc(100vh - 60px); /* Adjust based on navbar height */
    overflow: hidden; /* To handle the full-bleed image */
}

/* Left (Yellow) Content Area */
.hero-content {
    flex: 1; /* Takes 50% width on desktop */
    background-color:#fff1ca; /* The dominant yellow/orange color */
    padding: 80px 60px 80px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    gap: 20px;
}

.hero-tagline {
    font-size: 78px;
    font-weight: 900;
    font-family: 'header';
    color: #2D4F2B;
    line-height: 1.1;
    max-width: 450px;
    
    
}

.hero-tagline strong {
    /* Style for 'your story' in the image */
    color: #2D4F2B; 
    font-weight: 700;
}

.hero-description {
    font-size: 16px;
    color: #2D4F2B;
    max-width: 450px;
    margin-top: 15px;
}

.hero-description strong {
    /* Style for 'deep sense of satisfaction' in the image */
    font-weight: 700;
}

.cta-button {
    background-color:  #FFB823; /* Dark color for the CTA button */
    color: #2D4F2B;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 3px;
    margin-top: 30px;
    width: fit-content;
    transition: background-color 0.3s;
    border-radius: 12px;
}

.cta-button:hover {
    background-color: #000;
}

/* Right (Image) Area */
.hero-image-container {
    flex: 1; /* Takes 50% width on desktop */
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container */
    display: block;
}


/* --- 3. Responsive Design (Mobile/Tablet) --- */

@media (max-width: 1024px) {
    /* Tablet/Smaller Desktop Adjustments */
    .hero-content {
        padding: 60px 40px;
    }

    .hero-tagline {
        font-size: 40px;
    }

    .nav-item {
        margin-left: 20px;
        font-size: 12px;
    }
    
}

@media (max-width: 768px) {
    /* Mobile Adjustments */
    .navbar {
        padding: 15px 12px;
        padding-right: 20px;
    }

    /* Show Hamburger Menu */
    .hamburger {
        display: block;
    }

    /* Hide Navigation Links by default */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px; /* Below the navbar */
        left: 0;
        width: 100%;
        background-color: #FFB823;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px 0;
        z-index: 999;
    }

    /* JavaScript will add this class to show the menu */
    .nav-links.active {
        display: flex;
    }

    .nav-item {
        margin: 10px 20px;
        padding: 10px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eee;
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }

    /* Adjust the BOOK NOW button for mobile */
    .book-now-btn {
        margin-left: 0;
        margin-top: 10px;
        padding: 10px 20px;
    }


    /* Hero Section Stacking for Mobile */
    .hero-section {
        flex-direction: column; /* Stacks yellow and image vertically */
        min-height: auto;
    }

    .hero-content {
        padding: 60px 20px;
        order: 2; /* Put content below image (optional, depends on preference) */
    }

    .hero-image-container {
        /* On mobile, give the image a defined height */
        height: 400px; 
        order: 1; /* Put image above content */
    }

    .hero-tagline {
        font-size: 70px;
    }

    .hero-description, .hero-tagline {
        max-width: 100%; /* Full width on mobile */
    }
}

/* Optional: Hamburger Animation for X-mark */
.hamburger.is-active .bar:nth-child(2) {
    opacity: 0;
}
/* Yeh CSS links ka default style (blue color, underline) hata degi */
.card-link {
    text-decoration: none; /* Underline hatata hai */
    color: inherit;       /* Text ka color wahi rakhta hai jo pehle tha */
    display: block;       /* Yeh ensure karta hai ki link poore card ko cover kare */
}
.hamburger.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
/* --- 4. Why Choose Us Section Styles --- */

.about-section {
    width: 100%;
    background-color: #ffffff; /* White background for the main content area */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0; /* Padding is managed by the dividers and content box */
}

/* Yellow Dividers/Borders at the top and bottom */
.divider {
    width: 100%;
    height: 30px; /* Approximate height of the yellow stripe */
    background-color: #2D4F2B; /* The same yellow color as the hero section */
}

/* Main text container to control width and centering */
.about-content-box {
    max-width: 800px; /* Control the maximum width of the text block */
    width: 90%; /* Ensure responsiveness on smaller screens */
    margin: 100px auto; /* Large vertical margin for spacing, auto for centering */
    text-align: center; /* Center the text content within the box */
}

.about-text {
    font-size: 16px;
    line-height: 1.7;
    color: #2D4F2B;
    margin-bottom: 20px; /* Space between the two paragraphs */
}

.about-text strong {
    font-weight: 700;
}

/* --- Responsive Adjustments for About Section --- */

@media (max-width: 768px) {
    .about-content-box {
        margin: 60px auto; /* Reduce vertical margin on mobile */
        width: 85%;
    }
    
    .about-text {
        font-size: 14px; /* Slightly smaller text on mobile */
    }
}
/* --- 5. Story Gallery Section Styles (Modified for Marquee) --- */

.story-gallery-section {
    background-color: #FFF1CA; 
    /* padding-bottom: 80px;  */
}

.gallery-header-bg {
    background-color: #FFF1CA; 
    padding: 60px 0 40px 100px; 
}

.gallery-heading {
    font-size: 48px;
    font-weight: 600; 
    font-style: italic; 
    color: #2D4F2B;
    margin: 0;
    max-width: 90%; 
}

/* New Marquee Container */
.marquee-container {
    width: 100%;
    overflow: hidden; /* Hide anything outside this container */
    white-space: nowrap; /* Keep all content on a single line */
    position: relative;
    padding: 0 0px; /* Adjust padding if you want space on sides of the full scrolling strip */
    /* background-color: #f0f0f0; /* For debugging: see the container */
}

.marquee-content {
    display: inline-block; /* Essential for nowrap and continuous flow */
    animation: marquee-scroll 20s linear infinite; /* Adjust duration for speed */
    padding-left: 50px; /* Initial offset for the first image */
    padding-right: 50px; /* Space on the right as images scroll out */
    gap: 30px; /* Space between gallery items */
    display: flex; /* Make children flex items */
}

.marquee-content:hover {
    /* animation-play-state: paused; Pause on hover (optional) */
}

/* Gallery Item Styling (Re-using/adjusting from previous) */
.gallery-item {
    flex-shrink: 0; /* Important: prevents items from shrinking */
    flex-basis: 300px; /* Fixed width for each item on desktop */
    height: 450px; 
    position: relative;
    background-color: #FFB823; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
    border-radius: 14px; 
    overflow: hidden; 
    margin-right: 30px; /* Using margin-right instead of gap for marquee, so last item of set has space */
}

.gallery-item:last-of-type {
    margin-right: 0; /* No margin on the very last item of the entire duplicated list */
}

.gallery-image {
    width: 100%;
    height: calc(100% - 40px); 
    object-fit: cover; 
    display: block;
    border: 5px solid #FFB823;
    border-radius: 18px;
}

.image-brand {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background-color: #FFB823; 
    color: #2D4F2B;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}

/* KEYFRAMES FOR MARQUEE ANIMATION */
/* KEYFRAMES FOR MARQUEE ANIMATION */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0); /* Start at original position */
    }
    100% {
        /* CRITICAL FIX: To scroll exactly one full set of images, 
           we need to move left by half the total content width. 
           If the total content width is 200%, moving -50% is correct, 
           BUT this can be unreliable. Let's redefine the width calculation. 
           
           The safest way with duplicated content is often using a very large 
           negative percentage (e.g., -50%) IF the content's total width 
           (Set 1 + Set 2) is exactly twice the single set.
           
           If your items have a fixed width (300px + 30px margin), 
           the total width of the content is too complex for a simple -50%.
           Let's rely on the browser's calculation for -100% and ensure the width is set.
        */
        transform: translateX(calc(-100% - 30px)); /* We must move the exact width of the first set. */
        /* Since the items are flex-shrink: 0, and we have margins, the -50% doesn't work right. 
           Let's change .marquee-content to be width-based: */
    }
}


.marquee-content {
    /* REMOVE: display: flex; */ 
    
    /* Ensure content is positioned for animation */
    /* REMOVE: padding-left: 50px; & padding-right: 50px; (These complicate the scroll calculation) */
    /* REMOVE: gap: 30px; (Use margin-right on .gallery-item instead) */

    /* Keep this essential line */
    display: inline-block; 
    
    /* Apply the animation defined below */
    animation: marquee-scroll 45s linear infinite; /* Increased duration for smoother scroll */
    white-space: nowrap; /* Ensure items stay in a line */
}

/* We must ensure all items act as inline-blocks for the marquee math */
.gallery-item {
    /* Keep flex-basis/flex-shrink if you want, but ensure inline-block is used */
    /* REMOVE: flex-shrink: 0; */
    /* REMOVE: flex-basis: 300px; */
    
    display: inline-block; /* ***CRITICAL FIX*** */
    width: 300px; /* Fixed width (same as flex-basis) */
    height: 450px; 
    position: relative;
    margin-right: 30px; /* Use margin-right for spacing */
    box-sizing: border-box; /* Good practice */
    /* Keep other styles (background, shadow, etc.) */
}

/* FINAL KEYFRAME FIX: Calculate the exact distance to shift */
/* Since we have 13 items at 300px width and 30px margin (12 margins), 
   the total width of the first set is (13 * 300) + (12 * 30) = 4260px.
   If you use percentage, the browser is confused. Use PIXELS for reliability 
   or stick to the duplicated content model: */

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Use a custom property for the exact shift distance */
        /* The width of the entire first set of items */
        /* This should be the width of the first 13 items + their margins */
        /* Width: (13 * 300px) + (13 * 30px) = 3900 + 390 = 4290px */
        /* IMPORTANT: You must calculate the exact width of your first set of items */
        
        /* NOTE: -100% can often work if the total width of .marquee-content is 200%, 
                 but if the items are inline-block, the browser calculates 
                 the content's width based on the actual pixels, not the parent container. */
        
        transform: translateX(-50%); /* Reverting to -50% and rely on duplication and inline-block */
    }
}

/* --- Responsive Adjustments for Marquee Gallery --- */

@media (max-width: 1024px) {
    .gallery-header-bg {
        padding-left: 60px;
        padding-bottom: 30px;
    }

    .gallery-heading {
        font-size: 40px;
        padding-bottom: 18px;

    }

    .marquee-content {
        padding-left: 30px;
        padding-right: 30px;
        gap: 20px;
    }

    .gallery-item {
        flex-basis: 280px; 
        height: 420px;
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
    .story-gallery-section {
        /* padding-bottom: 60px; */
    }

    .gallery-header-bg {
        padding: 40px 20px 20px 20px; 
        text-align: center; 
    }

    .gallery-heading {
        font-size: 32px;
        max-width: 100%;
                padding-bottom: 18px;

    }

    .marquee-content {
        padding-left: 15px;
        padding-right: 15px;
        gap: 15px;
    }

    .gallery-item {
        flex-basis: 80vw; /* Take 80% of viewport width */
        height: 120vw; /* Maintain aspect ratio (approx 3:2 portrait) */
        max-width: 300px; /* Don't get too wide on very large phones */
        max-height: 450px;
        margin-right: 15px;
    }

    .gallery-image {
        height: calc(100% - 35px); 
    }

    .image-brand {
        font-size: 18px;
        padding: 8px 0;
    }
}

@media (max-width: 480px) {
    .gallery-heading {
        font-size: 28px;
                padding-bottom: 18px;

    }
    .gallery-item {
        flex-basis: 90vw; /* Even wider on very small screens */
        height: 135vw;
    }
}

/* Reduce animation speed for smaller screens if it's too fast */
@media (max-width: 768px) {
    .marquee-content {
        animation: marquee-scroll 15s linear infinite; /* Faster on mobile if needed */
    }
}
/* --- 6. Work of Heart Section Styles --- */

.heart-work-section {
    background-color: #FFB823; /* Very subtle off-white background */
    padding: 100px 0; /* Vertical spacing for the whole section */
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Container to center the text block and limit its width */
.heart-work-container {
    max-width: 1200px; /* Max width of the overall content area */
    width: 90%; 
    padding: 0 20px;
    background-color: #FFF1CA; /* White background inside the text block area */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.03); /* Very subtle shadow, often used for this look */
    padding: 80px 40px; /* Padding inside the white box */
    border-radius: 15px;
}

.heart-work-heading {
    font-size: 80px;
    font-weight: 700;
    color: #2D4F2B;
    line-height: 1.1;
    margin-bottom: 40px;
    max-width: 700px; /* Limits the heading width to prevent it from spanning too wide */
}

/* Styling for the italic part of the heading */
.italic-text {
    font-style: italic;
    font-weight: 400; /* Often, the italic version of a font is lighter */
    display: block; /* Forces the italic part onto a new line */
}

.heart-work-text {
    font-size: 16px;
    line-height: 1.7;
    color: #2D4F2B;
    max-width: 100%; /* Constrains the width of the descriptive text */
    margin-bottom: 0;
}


/* --- Responsive Adjustments for Work of Heart Section --- */

@media (max-width: 1024px) {
    .heart-work-heading {
        font-size: 64px;
        max-width: 600px;
    }
    
    .heart-work-container {
        padding: 60px 30px;
    }
}

@media (max-width: 768px) {
    .heart-work-section {
        padding: 60px 0;
    }
    
    .heart-work-container {
        padding: 40px 20px;
        width: 95%; /* Take up more width on smaller screens */
    }

    .heart-work-heading {
        font-size: 48px;
        margin-bottom: 30px;
        max-width: 100%;
    }

    .heart-work-text {
        font-size: 15px;
        max-width: 100%;
    }
}
/* Card Section Container (पूरे सेक्शन के लिए) */
.card-section {
    display: flex; /* तीनों कार्ड्स को एक लाइन में लाता है */
    gap: 20px; /* कार्ड्स के बीच की दूरी */
    padding: 20px;
    justify-content: center; /* कार्ड्स को सेंटर में करता है */
    flex-wrap: wrap; /* छोटी स्क्रीन पर कार्ड्स को नीचे ले जाता है */
    background-color: #FFF1CA; /* बैकग्राउंड कलर, अगर कोई है */
}

/* Individual Card (हर एक कार्ड के लिए) */
.card {
    width: 300px; /* कार्ड की चौड़ाई */
    border: 4px solid #FFB823; /* हल्का ग्रे बॉर्डर */
    border-radius: 15px; /* गोल कोने (Rounded Corners) */
    overflow: hidden; /* ज़रूरी है ताकि इमेज के कोने भी कार्ड के बॉर्डर के अंदर रहें */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* हल्का शैडो (optional) */
}

/* Image Container (इमेज वाले ऊपरी हिस्से के लिए) */
.image-container {
    height: 350px; /* इमेज की ऊंचाई (आप इसे बदल सकते हैं) */
    overflow: hidden;
    position: relative; /* अगर इमेज पर कोई ओवरले या टेक्स्ट डालना हो */
}

.image-container img {
    width: 100%; /* इमेज की चौड़ाई कार्ड के बराबर */
    height: 100%; /* इमेज की ऊंचाई कंटेनर के बराबर */
    object-fit: cover; /* इमेज को बिना विकृत किए कंटेनर को भरना */
    display: block;
    /* ऊपर के कोनों को कार्ड के border-radius के बराबर गोल करें */
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}

/* Bottom Text Box (नीचे पीले वाले हिस्से के लिए) */
.text-box {
    background-color: #FFB823; /* पीला बैकग्राउंड कलर जैसा इमेज में है */
    /* padding: 15px 10px; */
    text-align: center;
    /* नीचे के कोनों को गोल करें */
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    cursor: pointer; /* क्लिक करने योग्य जैसा महसूस कराने के लिए */
    font-family: header1;
}

.text-box p {
    margin: 0;
    color: #2D4F2B; /* टेक्स्ट का कलर */
    font-weight: bold;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

/* Optional: Card पर माउस ले जाने पर स्टाइल बदलने के लिए */
.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* हल्का ऊपर उठना */
    transition: all 0.3s ease;
}
/* Section Container (पूरे बॉक्स के लिए) */
.inspiration-section {
    background-color: #FFF1CA; /* हल्का ऑफ-व्हाइट/क्रीम कलर */
    padding: 60px 40px; /* अंदर की तरफ़ स्पेसिंग (ऊपर/नीचे, दाएँ/बाएँ) */
    max-width: 1200px; /* अधिकतम चौड़ाई */
    margin: 40px auto; /* सेंटर में लाने के लिए */
    border-radius: 25px; /* गोल कोने (Rounded Corners) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* बहुत हल्का शैडो (optional) */
}

/* Content Area (टेक्स्ट के लिए) */
.inspiration-content {
    max-width: 100%; /* टेक्स्ट को बाईं ओर सीमित करने के लिए */
}

/* Heading Styling */
.inspiration-heading {
    font-size: 55px; /* फ़ॉन्ट साइज़ को बड़ा करें */
    font-weight: 800; /* मोटा (Bold) फ़ॉन्ट */
    color: #2D4F2B; /* काला रंग */
    line-height: 1.1; /* लाइन की ऊँचाई */
    margin-top: 0;
    margin-bottom: 20px;
    font-family: Arial, sans-serif; /* फ़ॉन्ट, जैसा इमेज में है */
}

/* Italic Text (जो 'Inspiration' को इटैलिक बना रहा है) */
.italic-text {
    font-style: italic; /* इसे इटैलिक (तिरछा) करने के लिए */
    /* ध्यान दें: अगर आप चाहते हैं कि यह थोड़ा ज़्यादा स्क्रिप्टेड लगे, तो आपको कस्टम फ़ॉन्ट का इस्तेमाल करना होगा। */
}

/* Paragraph Text Styling */
.inspiration-text {
    font-size: 17px;
    line-height: 1.6;
    color: #2D4F2B; /* गहरा ग्रे रंग */
    margin-bottom: 0;
    font-family: 'Helvetica Neue', sans-serif;
}
/* Section Container (पूरे सेक्शन के लिए) */
/* --- 5. Process Section Styles (Updated for Single Row) --- */
.process-section {
    display: flex;
    gap: 20px; /* कार्ड्स के बीच की दूरी */
    justify-content: center;
    padding: 50px 20px;
    padding-top: 0;
    /* REVERTED FIX: Allow wrapping so cards drop to the next row on small screens */
    flex-wrap: wrap; 
    
    /* Remove horizontal scrolling */
    overflow-x: visible; /* या हटा दें */
    
    background-color: #FFF1CA;
    
    /* Ensures smooth scrolling behavior if overflow is active */
    -webkit-overflow-scrolling: touch; 
}

/* Individual Step Card (हर एक स्टेप के लिए) */
.step-card {
    background-color: #FFB823; 
    
    /* REVERTED FIX: Allow card to shrink/grow slightly within the wrapping container */
    flex-shrink: 1; /* कार्ड को सिकुड़ने की अनुमति देता है */
    flex-basis: auto; /* Flexbox को चौड़ाई खुद तय करने दें */
    
    /* Reverting to a fixed width or using a max-width to allow wrapping */
    width: 300px; 
    max-width: 100%; /* Ensure it doesn't exceed parent width */

    border-radius: 12px;
    border: 8px solid #FFB823;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* --- Rest of the CSS remains unchanged --- */

/* Step Number Styling (01, 02, 03) */
.step-number {
    position: absolute;
    top: 25px;
    left: 20px;
    font-size: 50px;
    font-weight: 900;
    color: #2D4F2B;
    z-index: 1;
    font-family: 'Bebas Neue', sans-serif;
}

/* Image Box (पीले बैकग्राउंड वाला ऊपरी हिस्सा) */
.image-box {
    background-color: #f7c95a; 
    height: 200px;
    /* padding: 20px; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}

.step-img {
    width: 100%;       /* Make image take full width of its parent (.image-box) */
    height: 100%;      /* Make image take full height of its parent (.image-box) */
    display: block;    /* Ensure it behaves like a block */
    
    object-fit: cover; /* CRITICAL: Fills the entire space, cropping if necessary */
    
    /* You can remove these as width/height: 100% and object-fit: cover will handle it */
    /* max-width: 100%; */
    /* max-height: 100%; */
    /* height: auto; */
}
/* Text Content Area (नीचे का सफेद हिस्सा) */
.step-text-content {
    padding: 20px;
    min-height: 250px; 
}

/* Step Title Styling */
.step-title {
    font-size: 20px;
    font-weight: bold;
    color: #2D4F2B;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
}

/* Description Text */
.step-description {
    font-size: 16px;
    line-height: 1.5;
    color: #2D4F2B;
    font-family: 'Helvetica Neue', sans-serif;
}

/* Bold text inside description */
.step-description strong, .step-description b {
    font-weight: 700;
    color: #2D4F2B;
}
/* Testimonial Section Container */
.testimonial-section {
    background-color: #f7c95a; /* पीला बैकग्राउंड कलर */
    padding: 80px 40px; /* ऊपर/नीचे और दाएँ/बाएँ स्पेसिंग */
    text-align: center;
    position: relative; /* ::after pseudo-element के लिए */
    overflow: hidden; /* ज़रूरी है ताकि pseudo-element ठीक से दिखे */
    margin-top: 50px; /* ऊपर से थोड़ी जगह */
    margin-bottom: 0; /* नीचे कोई अतिरिक्त मार्जिन नहीं */
}

/* Quote Text Styling */
.testimonial-quote p {
    font-size: 38px; /* बड़ा फ़ॉन्ट साइज़ */
    font-weight: 800; /* बहुत मोटा (Extra Bold) */
    color: #333333; /* गहरा ग्रे/काला रंग */
    max-width: 800px; /* टेक्स्ट को सेंटर में रखने और सीमित करने के लिए */
    margin: 0 auto; /* सेंटर में लाने के लिए */
    line-height: 1.3;
    font-family: Arial, sans-serif; /* फ़ॉन्ट, जैसा इमेज में है */
}

/* Curved Bottom Effect (घुमावदार निचला भाग) */
.testimonial-section::after {
    content: ''; /* Pseudo-elements के लिए ज़रूरी */
    position: absolute;
    bottom: -50px; /* इसे थोड़ा नीचे ले जाएँ ताकि वक्र (curve) पूरा दिखे */
    left: 0;
    width: 100%;
    height: 100px; /* वक्र की ऊंचाई */
    background-color: #f7c95a; /* बैकग्राउंड कलर जैसा ही */
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* ऊपरी किनारों को गोल करें ताकि वक्र दिखे */
    transform: scaleY(0.6); /* वक्र को थोड़ा सपाट करने के लिए */
    z-index: 0; /* सुनिश्चित करें कि यह टेक्स्ट के पीछे रहे */
    /* आप चाहें तो एक अलग कलर (जैसे सफेद या पेज का बैकग्राउंड कलर) भी दे सकते हैं */
    /* background-color: #ffffff; */
}

/* अगर सेक्शन के नीचे कोई सफेद बैकग्राउंड है, तो यह pseudo-element ऐसा दिखेगा */
/* आप चाहें तो `background-color` को `transparent` या पेज के बैकग्राउंड के अनुसार भी सेट कर सकते हैं। */
/* Wrapper for the entire section (Background and Corners) */
/* 1. Main Container: PREMIUM LOOK */
.courses-section-wrapper {
    background-color: #FFF1CA;
    max-width: 1200px;
    margin: 60px auto;
    border-radius: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 60px; /* अब मेन पैडिंग यहीं से मैनेज होगी */
}

/* --- NEW: Header Centering --- */
.courses-header-center {
    text-align: center; /* हैडिंग को सेंटर में लाने के लिए */
    margin-bottom: 50px; /* नीचे गैप बढ़ाने के लिए */
    padding: 0 40px; /* किनारे से थोड़ा स्पेस */
}

/* 5. Heading Styling */
.courses-heading {
    /* साइज़ थोड़ा कम किया ताकि सेंटर में भी अच्छा लगे */
    font-size: 50px;
    font-weight: 800;
    color: #2D4F2B;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: 'Bebas Neue', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 6. Italic/Bold Text */
.bold-italic-text {
    font-style: italic;
    font-weight: 900;
    color: #FFB823;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
}

/* 7. Paragraph Text Styling */
.courses-description {
    font-size: 18px;
    line-height: 1.6;
    color: #4c774a;
    margin: 0 auto; /* सेंटर में लाने के लिए */
    font-family: 'Helvetica Neue', sans-serif;
    max-width: 700px; /* सेंटर टेक्स्ट की चौड़ाई सीमित की */
}

/* --- NEW: Content Area (Image and List Side-by-Side) --- */
.courses-content-area {
    display: flex;
    align-items: flex-start; /* टॉप से अलाइनमेंट */
    gap: 60px;
}

/* 3. Left Column Styling (Graphic): More defined look */
.courses-graphic {
    flex: 0 0 40%; /* इसे 40% चौड़ाई दी */
    height: auto; /* ऊँचाई ऑटो रखी */
    max-height: 480px; /* अधिकतम ऊँचाई सीमित की */
    background-color: #FFB823;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 20px; /* अंदरूनी पैडिंग दी */
}

.courses-graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* 4. Right Column Styling (Text Area) */
.courses-text-area {
    flex-grow: 1; /* बाकी 60% जगह लेगा */
}

/* 8. Course List Container: CLEAN GRID - KEPT SAME */
.course-list-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

/* 9. Individual Course Item Styling: Card-based and highly readable - KEPT SAME */
.course-item {
    position: relative;
    padding: 20px;
    background-color: #FFB823;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
}
.course-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(45, 79, 43, 0.1);
    border-color: #f7c95a;
}
.course-number {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    color: #2D4F2B;
    background-color: rgba(247, 201, 90, 0.4);
    border-radius: 50%;
    opacity: 1;
}
.course-title {
    font-size: 20px;
    font-weight: 800;
    color: #2D4F2B;
    margin: 0 0 5px 0;
    line-height: 1.3;
    padding-right: 40px;
}
.course-duration {
    font-size: 15px;
    color: #7b947a;
    font-weight: 500;
    margin: 0;
    font-style: italic;
}

/* 10. Button Styling: More prominent and appealing - KEPT SAME */
.courses-button {
    display: inline-block;
    background-color: #2D4F2B;
    color: #fff1ca;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 35px;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.3s;
    border: none;
}

.courses-button:hover {
    background-color: #f7c95a;
    color: #2D4F2B;
    transform: translateY(-2px);
}

/* 11. Media Query for smaller screens: Adjusted for new structure */
@media (max-width: 900px) {
    .courses-section-wrapper {
        padding: 40px 20px; /* मोबाइल पर पैडिंग कम की */
    }
    .courses-header-center {
        margin-bottom: 30px;
    }
    .courses-content-area {
        flex-direction: column; /* इमेज और लिस्ट को एक के नीचे एक रखें */
        gap: 30px;
    }
    .courses-graphic {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        height: 300px;
        padding: 15px;
    }
    .courses-heading {
        font-size: 40px;
    }
    .course-list-container {
        grid-template-columns: 1fr;
    }
    .courses-text-area {
        text-align: left; /* लिस्ट को लेफ्ट अलाइन रखें */
    }
}

/* Style for hover transition */
.link-hover {
    transition: color 150ms ease-in-out;
}

/* Change link color to Amber-500 on hover */
.footer-link:hover {
    color: #fbbf24;
}

/* Ensures the text-white class, if used, defaults to pure white */
.text-white {
  color: white;
}
/* --- General Container Styles (UPDATED COLORS) --- */
#review-marquee-section {
    padding: 40px 0;
    text-align: center;
    background-color: #FFB823; /* Background: Bright Yellow/Orange */
}

#review-marquee-section h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: #2D4F2B; /* Heading Text: Deep Green */
    /* Heading is already centered by text-align: center on the parent */
}

.marquee-container {
    overflow: hidden; 
    width: 100%;
    /* Simplified border/shadow since the background is strong */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* --- Scrolling Wrapper Styles (UNCHANGED) --- */
.review-wrapper {
    display: flex;
    animation: auto-scroll 10s linear infinite; 
}

/* Pause animation on hover */
.review-wrapper:hover {
    animation-play-state: paused;
}

/* --- Review Content Styles (UNCHANGED) --- */
.review-content {
    display: flex;
    white-space: nowrap; 
    flex-shrink: 0; 
}

/* --- Review Card Styles (UPDATED COLORS) --- */
.review-card {
    min-width: 290px; 
    max-width: 330px;
    padding: 25px;
    margin: 15px;
    background: #FFF1CA; /* Card Background: Creamy Yellow */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Stronger shadow for definition */
    display: inline-block;
    text-align: left;
    transition: transform 0.3s ease;
    white-space: normal; 
    color: #2D4F2B; /* Default Card Text Color: Deep Green */
}

.review-card:hover {
    transform: translateY(-5px); 
}

/* --- Text Elements (UPDATED COLORS) --- */
.stars {
    color: #2D4F2B; /* Keeping the stars the same deep green for monochromatic beauty */
    font-size: 1.2em;
    margin-bottom: 10px;
}

.review-text {
    font-style: italic;
    font-size: 1.1em;
    color: #2D4F2B; /* Review Text: Deep Green */
    margin-bottom: 15px;
    line-height: 1.5;
    min-height: 80px; 
}

.reviewer-name {
    font-weight: 600;
    color: #2D4F2B; /* Reviewer Name: Deep Green */
    font-size: 0.9em;
}

/* --- The Magic: Keyframe Animation (UNCHANGED) --- */
@keyframes auto-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%); 
    }
}
/* Color Palette: 
   Primary Background: #FFB823
   Secondary (Card) Background: #FFF1CA
   Text Color: #2D4F2B 
*/

/* body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color:#2D4F2B;
    color: #2D4F2B;
} */

/* --- Section Title --- */
.section-title {
    text-align: center;
    font-size: 2.5em; /* Slightly larger title */
    /* padding-top: 50px; More padding */
    /* margin-bottom: 40px; */
    color: #FFF1CA;
}

/* --- Carousel Structure (BIGGER) --- */

.carousel-container {
    position: relative;
    max-width: 1100px; /* INCREASED MAX WIDTH for bigger card */
    margin: 0 auto;
    overflow: hidden; 
    border-radius: 20px; /* Increased border radius */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

.carousel-track {
    display: flex;
    transition: transform 0.6s ease-in-out; /* Slower, smoother transition */
}

/* --- Individual Award Item (Full Width & Larger) --- */
.award-item {
    min-width: 100%; 
    box-sizing: border-box;
    background-color: #FFF1CA;
    padding: 60px; /* INCREASED PADDING for larger card area */
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row; 
    min-height: 400px; /* Ensure a minimum height for presence */
}

.award-image {
    width: 40%; /* Image takes up less width relative to content */
    height: auto;
    max-height: 500px; /* Increased max image height */
    object-fit: contain; 
    border-radius: 10px;
    margin-right: 40px; /* Increased spacing */
    border: 4px solid #FFB823;
    padding: 8px;
}

.award-content {
    width: 60%; /* Content takes up more width */
}

.award-content h3 {
    font-size: 2.2em; /* Larger heading */
    color: #2D4F2B;
    border-bottom: 4px solid #FFB823;
    padding-bottom: 12px;
    margin-top: 0;
}

.award-content p {
    font-size: 1.25em; /* Larger paragraph text */
    line-height: 1.7;
}

/* --- Navigation Buttons --- */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(45, 79, 43, 0.7); 
    color: white;
    border: none;
    padding: 18px 12px; /* Larger buttons */
    cursor: pointer;
    z-index: 10;
    font-size: 1.8em; 
    transition: background-color 0.3s;
    user-select: none;
    line-height: 0; 
}

.nav-button:hover {
    background-color: #2D4F2B; 
}

.prev {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.next {
    right: 0;
    border-radius: 8px 0 0 8px;
}

/* --- Indicator Dots --- */
.carousel-indicators {
    text-align: center;
    padding: 25px 0 50px 0;
}

.dot {
    height: 14px; /* Larger dots */
    width: 14px;
    margin: 0 6px;
    background-color: rgba(45, 79, 43, 0.4);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
    background-color: #2D4F2B;
    transform: scale(1.3);
}

/* --- Responsive adjustments (Improved Breakpoint) --- */
@media (max-width: 900px) { /* Adjusted breakpoint for better tablet support */
    .carousel-container {
        max-width: 95%;
    }
    
    .award-item {
        padding: 40px;
        flex-direction: column; /* Stack image and content vertically on smaller screens */
        text-align: center;
        min-height: auto; /* Allow height to adjust naturally */
    }

    .award-image {
        width: 100%; /* Image width on mobile/tablet */
        margin-right: 0;
        margin-bottom: 30px;
        max-height: 500px;
    }

    .award-content {
        width: 100%;
    }
    
    .award-content h3 {
        font-size: 1.8em;
    }
    
    .award-content p {
        font-size: 1.1em;
    }

    .nav-button {
        padding: 15px 8px;
        font-size: 1.5em;
    }
}