/* === TABLE OF CONTENTS ===
1. CSS Variables
2. Basic Reset & Body Styles
3. Typography
4. Layout & Helpers
5. Header & Navigation
6. Hero Section
7. Buttons
8. Section Specific Styles
    - About
    - Hero Banner on Online Lessons Page
    - Online Lessons Features
    - How It Works
    - Learning Challenges Banner
    - Why Choose Us / Benefits
    - Testimonials
    - FAQ
    - Get Started
    - Final Call to Action (CTA)
9. Footer Styles
10. Mobile Responsiveness
=========================== */

/* === 1. CSS Variables === */
:root {
    /* Backgrounds */
    --soft-sand: #F5F5F5;       /* Main background - Warm Cream */
    --misty-blue: #C9C4B5;      /* Secondary background - Soft Mocha */

    /* Text Colors */
    --stone-gray: #333333;      /* Main text on Cream - Deep Charcoal */
    --deep-charcoal: #333333;   /* Headings, Footer bg/text - Deep Charcoal */
    --rich-chocolate: #786C3B;  /* Text on Soft Mocha - Dark Gray-Brown */

    /* Accent/Button Colors */
    --sage-green: #FFD700;      /* Primary CTA/Accent - Rich Gold */
    --coral-darker: #e6c300;    /* Darker Gold for hover */
    --mocha-darker: #b8b3a4;    /* Darker Mocha for hover */
    --deep-teal: #0097A7;       /* Secondary CTA Color (Can be used in CTA section if desired) */
    --teal-darker: #00838f;     /* Darker Teal for hover */

    /* Fonts */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;

    /* Layout */
    --header-height: 70px;
    --container-max-width: 1100px;
    --section-padding: 60px; /* Vertical padding for sections */
}

/* === 2. Basic Reset & Body Styles === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Adjust scroll padding to account for sticky header */
    scroll-padding-top: var(--header-height);
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--stone-gray); /* Default text color */
    background-color: var(--soft-sand); /* Default background */
}

/* === 3. Typography === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--deep-charcoal); /* Default heading color */
    margin-bottom: 0.8em;
    line-height: 1.3;
    font-weight: 700; /* Playfair often looks better bold */
}

h1 { font-size: 2.8rem; } /* Base size, override in Hero */
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; } /* Used in feature cards etc. */

p {
    margin-bottom: 1em;
}

a {
    color: var(--stone-gray); /* Default link color */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: var(--sage-green); /* Gold hover for links */
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevent extra space below images */
}

strong { font-weight: 700; } /* Ensure Lato bold is used */

/* === 4. Layout & Helpers === */
.container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.content-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

/* Alternating background section */
.alternate-bg {
    background-color: var(--misty-blue);
    color: var(--rich-chocolate); /* Text color for this background */
}

/* Ensure headings and text within alternate sections use the correct color */
.alternate-bg h1,
.alternate-bg h2,
.alternate-bg h3,
.alternate-bg h4,
.alternate-bg p,
.alternate-bg li,
.alternate-bg strong,
.alternate-bg cite,
.alternate-bg summary, /* For FAQ */
.alternate-bg a { /* Default links in this section */
     color: var(--rich-chocolate);
}
.alternate-bg a:hover,
.alternate-bg a:focus {
     color: var(--soft-sand); /* Lighter hover for links on dark bg */
}

/* Consistent Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 1.5em; /* Consistent spacing below titles */
    /* font-size: 2.2rem; */ /* Already defined in h2 */
}


/* === 5. Header & Navigation === */
#main-header {
    background-color: var(--soft-sand);
    border-bottom: 1px solid #e0e0e0; /* Light border */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

#main-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--deep-charcoal);
    text-decoration: none;
    flex-shrink: 0; /* Prevent logo from shrinking */
}

#main-nav {
    list-style: none;
    display: flex; /* Hidden on mobile by default via media query */
    align-items: center;
    margin-left: auto; /* Push nav to the left */
}

#main-nav li {
    margin-left: 30px; /* Spacing between nav items */
}

#main-nav a {
    color: var(--stone-gray);
    text-decoration: none;
    font-weight: bold;
    padding: 5px 0;
    position: relative;
    white-space: nowrap; /* Prevent wrapping */
}

/* Underline effect on hover */
#main-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--sage-green);
    transition: width 0.3s ease;
}
#main-nav a:hover::after,
#main-nav a:focus::after,
#main-nav a.active-nav::after { /* Show underline for active link */
    width: 100%;
}
#main-nav a.active-nav { /* Make active link visually distinct */
    color: var(--sage-green);
}

/* Style for the Desktop Get Started Button */
.btn-nav-cta {
    padding: 8px 20px;
    white-space: nowrap;
    margin-left: 15px; /* Space from nav links */
    /* Inherits .btn and .btn-primary styles */
}

/* Mobile Menu Toggle Button */
#menu-toggle {
    display: none; /* Hidden by default, shown in media query */
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--deep-charcoal);
    cursor: pointer;
    z-index: 1001; /* Ensure it's above the nav when it appears */
}

/* Hide mobile-only elements by default */
.nav-cta-mobile-container {
    display: none;
}


/* === 6. Hero Section === */
#hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh; /* Adjust height as needed */
    padding: 80px 20px; /* More padding for visual impact */
    color: var(--soft-sand); /* Default text color for overlay */

    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/4.png');
    /* === ADD HERO BACKGROUND IMAGE HERE === */
    /* background-color: var(--deep-charcoal); */
    /* Example:
    background-size: cover;
    background-position: center center;
    */
}

.hero-content {
    max-width: 750px; /* Limit width of text overlay */
}

.hero-content h1 {
     font-size: 3.5rem;
     color: var(--soft-sand); /* Ensure hero heading is light */
     margin-bottom: 0.4em;
     line-height: 1.2;
}

.hero-content p {
     font-size: 1.3rem;
     color: var(--soft-sand); /* Ensure hero text is light */
     margin-bottom: 1.8em;
     opacity: 0.9; /* Slightly softer text */
}

/* === 7. Buttons === */
.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    margin: 5px; /* Basic spacing if buttons wrap */
    text-align: center;
}

/* Primary Button (Gold) */
.btn-primary {
    background-color: var(--sage-green);
    color: var(--deep-charcoal); /* Text color for contrast */
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--coral-darker); /* Darker Gold */
    color: var(--deep-charcoal);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Secondary Button (Outline) */
.btn-secondary {
    background-color: transparent;
    color: var(--stone-gray); /* Default text color */
    border: 2px solid var(--stone-gray); /* Default border color */
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--stone-gray);
    color: var(--soft-sand); /* Light text on dark bg */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Adjust Secondary Button for Alternate Backgrounds */
.alternate-bg .btn-secondary {
    color: var(--rich-chocolate);
    border-color: var(--rich-chocolate);
}
.alternate-bg .btn-secondary:hover,
.alternate-bg .btn-secondary:focus {
    background-color: var(--rich-chocolate);
    color: var(--soft-sand);
    border-color: var(--rich-chocolate);
}


/* Larger Button Variant */
.btn-large {
    padding: 12px 35px;
    font-size: 1.1rem;
}


/* === 8. Section Specific Styles === */

/* --- 8a. About Section --- */
/* --- About Page Specific Styles --- */

/* Opening Banner Section - (Keep existing styles for .about-intro-banner, .about-banner-text) */
.about-intro-banner {
    /* ... your existing styles ... */
}
.about-banner-text {
    /* ... your existing styles ... */
}
.about-banner-text p {
    /* ... your existing styles ... */
}

/* Main Detailed About Content (Image + Story) */
.about-detailed-content {
    /* ... your existing styles ... */
}

.about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Image slightly smaller, text slightly wider for balance */
    gap: 50px;
    align-items: flex-start; /* Keeps top alignment */
}

.about-image-area {
    /* This div now directly contains the image. */
    /* No specific styling needed here unless you want to constrain its width further */
    /* For example, you could add: max-width: 450px; margin: 0 auto; if needed for aesthetics */
}

/* REMOVE or COMMENT OUT these .about-image-placeholder styles:
.about-image-placeholder {
    background-color: #e9e9e9;
    border: 2px dashed #ccc;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #777;
    font-style: italic;
    border-radius: 8px;
}
*/

/* Update/Ensure styles for the actual image: */
.about-image-area img {
    width: 100%; /* Makes the image responsive within its container (.about-image-area) */
    max-width: 480px; /* NEW: Set a max-width to control how large it gets, adjust as needed */
    height: auto;   /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    border-radius: 12px; /* Slightly larger, softer radius */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* A nice, soft shadow */
    margin: 0 auto; /* Center the image if .about-image-area is wider than max-width */
}

.about-text-area {
    text-align: left;
}

.about-text-area h2 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0.8em;
    color: var(--deep-charcoal);
}

.about-text-area h3 {
    font-size: 1.5rem;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    color: var(--deep-charcoal);
}

.about-text-area p {
    font-size: 1.05rem; /* Keep this if you like it, or adjust to 1rem for standard body */
    line-height: 1.75;
    margin-bottom: 1.3em;
    color: var(--stone-gray);
}


/* === Responsive Adjustments for About Page === */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 0.9fr 1.1fr; /* Adjust ratio slightly */
        gap: 40px;
    }
    .about-image-area img {
        max-width: 400px; /* Adjust max-width for tablets */
    }
}

@media (max-width: 768px) {
    /* .about-banner-text p { font-size: 1rem; } /* Keep existing */

    .about-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px;
    }

    .about-image-area {
        /* max-width: 450px; */ /* Max-width is now on the img itself */
        margin: 0 auto 30px auto; /* Center image area and add space below */
        text-align: center; /* Helps center the img if it's smaller than this div */
    }
    .about-image-area img {
        max-width: 80%; /* Let it be a good portion of the width on mobile */
        /* Or a fixed max-width like: max-width: 320px; */
    }

    /* .about-image-placeholder { min-height: 300px; } /* REMOVE this */

    .about-text-area {
        text-align: center;
    }
    .about-text-area h2,
    .about-text-area h3 {
        text-align: center;
    }
}

/* @media (max-width: 480px) { ... } /* Keep existing adjustments */
/* --- 8a. Welcome Section Text --- */
.welcome-text {
    font-size: 1.15rem; /* Adjust size as desired */
    line-height: 1.7; /* Improve readability */
    /* Inherits centering from parent section */
}
/* --- Dark Features Section (Checklist Style) --- */
.dark-features-section {
    background-color: #333; /* Dark background */
    color: #f0f0f0; /* Light default text color */
}

/* Override default colors within this section */
.dark-features-section h1,
.dark-features-section h2,
.dark-features-section h3,
.dark-features-section p,
.dark-features-section a { /* Target links if any */
    color: #f0f0f0; /* Light text */
}
.dark-features-section .section-title {
    color: #ffffff; /* Make title pure white for contrast */
    margin-bottom: 2em; /* More space after title */
}

/* Override specific link hover if needed */
.dark-features-section a:hover,
.dark-features-section a:focus {
     color: var(--sage-green); /* Use existing gold accent */
}

/* Feature List container */
.feature-list-dark {
    max-width: 850px; /* Adjust max width */
    margin: 0 auto; /* Center the list */
}

/* Individual Feature Item Layout */
.feature-item-dark {
    display: flex;
    align-items: flex-start; /* Align icon top with text block */
    gap: 25px; /* Space between icon and text */
    margin-bottom: 1.5em; /* Space below text block before hr */
}

/* Icon Container Styling */
.feature-icon-dark {
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 50px;    /* Icon circle size */
    height: 50px;
    background-color: #ffffff; /* White circle */
    border-radius: 50%; /* Make it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px; /* Align icon nicely with heading */
}

/* SVG Checkmark Styling */
.feature-icon-dark svg {
    fill: #333; /* Dark checkmark color */
    width: 60%;    /* Size of checkmark within circle */
    height: 60%;
}

/* Text Container */
.feature-text-dark {
    flex-grow: 1; /* Allow text to take remaining space */
    text-align: left;
}

/* Feature Heading */
.feature-text-dark h3 {
    font-family: var(--font-body); /* Use Lato (like example) */
    font-weight: 700; /* Bold */
    font-size: 1.4rem; /* Adjust size */
    margin-top: 0;
    margin-bottom: 0.4em; /* Space between heading and paragraph */
    color: #ffffff; /* Pure white heading */
}

/* Feature Paragraph */
.feature-text-dark p {
    font-family: var(--font-body); /* Use Lato */
    font-size: 1rem; /* Standard body size or slightly smaller */
    line-height: 1.6;
    margin-bottom: 0; /* No space needed below paragraph */
    color: #e0e0e0; /* Slightly dimmer text */
}

/* Separator Line Styling */
.dark-features-section hr {
    border: none; /* Remove default border */
    height: 1px; /* Line thickness */
    background-color: #555; /* Line color */
    margin-top: 2.5em; /* Space above line */
    margin-bottom: 2.5em; /* Space below line */
}

/* Hide the last separator line */
.feature-list-dark .feature-item-dark:last-child + hr {
    display: none;
}
/* Alternative for modern browsers (if hr is inside the div) */
/* .feature-list-dark .feature-item-dark:last-child hr { display: none; } */


/* === Responsive Adjustments for Dark Features === */
@media (max-width: 768px) {
    .feature-item-dark {
        gap: 20px;
    }
    .feature-icon-dark {
        width: 45px;
        height: 45px;
    }
    .feature-text-dark h3 {
        font-size: 1.3rem;
    }
    .feature-text-dark p {
        font-size: 0.95rem;
    }
    .dark-features-section hr {
        margin-top: 2em;
        margin-bottom: 2em;
    }
}

@media (max-width: 480px) {
     .feature-item-dark {
        gap: 15px;
        /* Consider stacking icon above text? */
        /* flex-direction: column;
        align-items: center;
        text-align: center; */
    }
     /* If stacking:
     .feature-icon-dark {
        margin-right: 0;
        margin-bottom: 15px;
     }
     .feature-text-dark {
         text-align: center;
     }
     */

    .feature-icon-dark {
        width: 40px;
        height: 40px;
    }
    .feature-text-dark h3 {
        font-size: 1.2rem;
    }
     .feature-text-dark p {
        font-size: 0.9rem;
    }
}
/* --- NEW Split Section (Photo + Message) --- */
.intro-split-section {
    /* Uses default background */
    /* Uses .content-section padding */
}

.intro-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 50px; /* Adjust gap between columns */
    align-items: center; /* Vertically align content */
}

.intro-photo-placeholder {
    background-color: #eee; /* Light gray background */
    border: 1px dashed #ccc; /* Dashed border */
    min-height: 350px; /* Placeholder height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #888; /* Placeholder text color */
    font-style: italic;
    border-radius: 8px; /* Optional rounded corners */
}
/* If using an actual image, style it directly: */
/* .intro-photo-placeholder img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
} */


.intro-message {
    text-align: left; /* Align text to the left */
}

.intro-message h3 {
    margin-top: 0; /* Remove top margin if it's the first element */
}


/* --- Updated Final CTA ("Still Unsure?") --- */
.final-inquiry-section p {
    /* Inherits general CTA paragraph styles */
    /* Add specific styles here if needed */
    margin-bottom: 1.5em; /* Adjust spacing before buttons */
}

.final-inquiry-section .cta-buttons {
    /* Container for buttons if needed for layout */
}


/* === Responsive Adjustments === */

@media (max-width: 768px) {
    /* --- Welcome Text Adjustments --- */
    .welcome-text {
        font-size: 1.1rem;
    }

    /* --- Split Section Adjustments --- */
    .intro-split-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px;
    }
    .intro-photo-placeholder {
        min-height: 250px; /* Adjust height for mobile */
        order: -1; /* Optional: Put photo first on mobile */
    }
    .intro-message {
        text-align: center; /* Center text on mobile */
    }
    .intro-message h3 {
         text-align: center; /* Center heading too */
     }

     /* --- Learning Challenges Banner - Ensure h2 is centered --- */
     .learning-banner h2 { /* Already handled by .section-title, but explicit check */
        text-align: center;
     }
}

/* Further adjustments for smaller phones if necessary */
@media (max-width: 480px) {
    .welcome-text {
        font-size: 1.05rem;
    }
    .intro-split-grid {
        gap: 20px;
    }
     .intro-photo-placeholder {
        min-height: 200px;
    }
}
/* --- Hero Banners (for Online Lessons page) --- */
.page-specific-hero {
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;
    min-height: 70vh; /* Adjust height: 50vh, 60vh, or a fixed pixel value like 400px */
    padding: 80px 20px; /* Adjust padding */
    color: var(--soft-sand); /* Light text for dark overlay */
    position: relative; /* For pseudo-element overlay if needed */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Specific background image for the Online Lessons hero */
#online-lessons-hero {
    /* === REPLACE WITH YOUR IMAGE FOR THIS BANNER === */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/2ed.png');
    background-position: center bottom;
    /* Example: background-color: var(--deep-charcoal); /* Fallback color */
}

/* Styles for the content within the page-specific hero are similar to the main hero */
/* .page-specific-hero .hero-content {} /* Already handled by existing .hero-content */

.page-specific-hero .hero-content h1 {
    font-size: 3rem; /* Adjust size as needed, slightly smaller than main hero h1 perhaps */
    color: var(--soft-sand);
    margin-bottom: 0.3em; /* Less margin if no subheading */
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Optional: slight text shadow for readability */
}

.page-specific-hero .hero-content p.hero-subheading { /* If you add a subheading */
    font-size: 1.2rem;
    color: var(--soft-sand);
    opacity: 0.9;
    margin-top: 0.5em;
    margin-bottom: 0;
    font-family: var(--font-body); /* Lato for subheading */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}


/* === Responsive Adjustments for Page Specific Hero === */
@media (max-width: 768px) {
    .page-specific-hero {
        min-height: 45vh; /* Adjust height for tablets */
        padding: 50px 20px;
    }
    .page-specific-hero .hero-content h1 {
        font-size: 2.5rem;
    }
    .page-specific-hero .hero-content p.hero-subheading {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .page-specific-hero {
        min-height: 40vh; /* Adjust height for mobile */
        padding: 40px 15px;
    }
    .page-specific-hero .hero-content h1 {
        font-size: 2.2rem;
    }
     .page-specific-hero .hero-content p.hero-subheading {
        font-size: 1rem;
    }
}
/* --- 8b. Online Lessons Features (on online-lessons.html) - Elegant Version --- */
.feature-grid {
    display: grid;
    /* Creates columns that are at least 280px wide, fitting as many as possible */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Space between cards */
    margin-top: 30px; /* Space above the grid */
}

.feature-card {
    background-color: var(--soft-sand); /* Card background to Warm Cream */
    padding: 30px 25px;
    border-radius: 8px;
    border-left: 4px solid var(--rich-chocolate); /* Rich Chocolate accent border */
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07); /* Slightly softer shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
    margin-top: 0;
    color: var(--deep-charcoal); /* Standard heading color on light background */
    font-family: var(--font-heading); /* Ensure Playfair Display is used if desired */
    font-size: 1.4rem; /* Adjust size if needed */
    margin-bottom: 0.6em;
    /* text-align: left; */ /* Already default for h3 */
}

.feature-card p {
    color: var(--stone-gray); /* Standard text color on light background */
    font-family: var(--font-body); /* Ensure Lato is used */
    font-size: 1rem; /* Adjust size if needed */
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive adjustments for feature cards (stacking is handled by .feature-grid in main @media queries) */
/* If you need specific responsive styles JUST for .feature-card elements, add them in your existing @media blocks */

/* --- 8c. How It Works --- */
#how-it-works {
    /* Uses default background */
}

.steps-list {
    list-style: none;
    counter-reset: steps-counter;
    max-width: 700px; /* Center the list content */
    margin: 30px auto 0 auto;
    padding-left: 0;
}

.steps-list li {
    counter-increment: steps-counter;
    margin-bottom: 1.8em; /* More space between steps */
    padding-left: 60px; /* Space for the number circle */
    position: relative;
    font-size: 1.05rem;
    text-align: left;
}

/* The number circle */
.steps-list li::before {
    content: counter(steps-counter);
    position: absolute;
    left: 0;
    top: -2px; /* Adjust vertical alignment */
    width: 40px;
    height: 40px;
    background-color: var(--sage-green); /* Gold background */
    color: var(--deep-charcoal); /* Dark text on gold */
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.steps-list li strong {
    display: block; /* Title on its own line */
    margin-bottom: 0.3em;
    color: var(--deep-charcoal);
    font-weight: 700; /* Lato bold */
}

/* --- 8d. Learning Challenges Banner (CENTER ALIGNED) --- */
.learning-banner { /* The main section wrapper with the alternate background */
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    /* text-align: center; */ /* Centering is better handled by the inner container's margin: auto */
    /* Uses .alternate-bg for background and text colors */
}

.challenge-content-banner { /* The inner container that holds all the content */
    max-width: 750px; /* Limits the width of the content */
    margin-left: auto;  /* Centers the block on the page */
    margin-right: auto; /* Centers the block on the page */
    text-align: center; /* Centers inline or inline-block children, and text within block children */
}

/* The H2 title should already be centered by .section-title if applied, or by default h2 rules */
/* If .section-title is not on the h2, you might add:
.challenge-content-banner h2 {
    text-align: center;
}
*/

.challenge-intro { /* The "Sound familiar?" paragraph */
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1.5em;
    /* text-align: center; Will be centered by parent .challenge-content-banner */
}

.challenge-content-banner ul { /* The bulleted list */
    list-style: none;   /* Removes default bullets */
    padding-left: 0;    /* Removes default padding */
    margin-bottom: 1.5em;
    display: inline-block; /* Allows the UL block itself to be centered */
    text-align: left;      /* Keeps text within each LI left-aligned relative to its custom bullet */
                           /* The UL block will be only as wide as its longest list item */
}

.challenge-content-banner li { /* Each list item */
    padding-left: 1.8em; /* Space for the custom bullet */
    position: relative;  /* For positioning the custom bullet */
    margin-bottom: 1em;
    line-height: 1.7;
}

/* Custom Bullet Styling for the list items */
.challenge-content-banner li::before {
    content: '\2022'; /* Standard bullet character */
    color: var(--rich-chocolate); /* Color from .alternate-bg */
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 1px; /* Adjust vertical alignment of bullet if needed */
    font-size: 1.3em; /* Size of the bullet */
    line-height: 1;   /* Prevents extra line height from the bullet */
}

/* The concluding paragraph ("These hurdles are common!...") */
.challenge-content-banner p:not(.challenge-intro) {
    margin-bottom: 2em;
    /* text-align: center; Will be centered by parent .challenge-content-banner */
    /* You can add max-width here if needed to control line length for this specific paragraph */
    /* max-width: 600px; */
    /* margin-left: auto; */ /* Required if max-width is set */
    /* margin-right: auto; */ /* Required if max-width is set */
}

.challenge-cta { /* The div containing the "Get Expert Guidance" button */
    text-align: center; /* Ensures the button (if inline-block) is centered within this div */
    margin-top: 1em; /* Add some space above the button if needed */
}

/* Responsive adjustments for this section if needed */
@media (max-width: 768px) {
    .challenge-content-banner {
        /* max-width: 90%; */ /* Optionally allow it to be a bit wider on smaller screens */
    }
    .challenge-content-banner ul {
        /* Any specific adjustments for the list on mobile */
    }
}


/* --- 8e. Why Choose Us / Benefits --- */
#program-benefits {
    /* Uses default background (Warm Cream) */
    padding: 80px 0; /* More vertical padding */
}

.benefits-grid-layout {
    display: grid;
    /* Two columns, image slightly wider */
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center; /* Vertically align items in the grid */
}

.benefits-text {
    text-align: left;
}

.benefits-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5em;
}

.benefits-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1em;
    margin-top: 1em;
    color: var(--deep-charcoal); /* Ensure color */
}

.benefits-text ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1em;
}

.benefits-text li {
    padding-left: 2.2em; /* Space for bullet */
    position: relative;
    margin-bottom: 1.3em;
    line-height: 1.7;
}

/* Custom Bullet Styling */
.benefits-text li::before {
    content: '\2022'; /* Bullet character */
    color: var(--sage-green); /* Gold bullets */
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0.5em; /* Position bullet */
    top: 1px;
    font-size: 1.3em;
    line-height: 1;
}

.benefits-text li strong {
    font-weight: 700;
    color: var(--deep-charcoal); /* Ensure strong text color */
}

.benefits-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-bottom: 20px; /* Space between images */
}
.benefits-image img:last-child {
    margin-bottom: 0;
}

/* --- 8f. Testimonials (on index.html) - Elegant Version --- */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Keep the gap for spacing */
    margin-top: 40px;
}

.testimonial-card {
    background-color: #FFFFFF; /* NEW: Pure white background for cards */
    padding: 30px 35px;       /* Adjust padding slightly if needed */
    border-radius: 8px;       /* Keep rounded corners */
    /* border-left: 5px solid var(--sage-green); */ /* REMOVE or change this border */
    border-top: 4px solid var(--misty-blue); /* NEW: Subtle top border in Soft Mocha */
    margin: 0;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* Softer, more diffused shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* For optional decorative quote icon later */
}

/* Optional: Decorative Quote Icon (subtle) */
/* .testimonial-card::before {
    content: '\201C';
    font-family: var(--font-heading);
    font-size: 4.5rem;
    color: var(--misty-blue);
    opacity: 0.15;
    position: absolute;
    top: 10px;
    left: 20px;
    line-height: 1;
    z-index: 0;
} */

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.testimonial-card p { /* The quote itself */
    font-style: italic;
    margin-bottom: 1.5em; /* Slightly more space before cite */
    font-size: 1.05rem; /* Keep font size */
    color: var(--stone-gray); /* Standard dark text on white */
    position: relative; /* Ensure text is above pseudo-element if used */
    z-index: 1;
    line-height: 1.7; /* Improved line height */
}

.testimonial-card cite { /* The student's name */
    font-weight: bold;
    color: var(--deep-charcoal); /* Standard dark text for names */
    font-style: normal;
    display: block;
    margin-top: 15px;
    font-size: 0.95rem; /* Slightly smaller cite */
    position: relative; /* Ensure text is above pseudo-element if used */
    z-index: 1;
    text-align: right; /* Align cite to the right for a classic feel */
}


/* --- Class Schedule Page Specific Styles (NEW WEEKLY FORMAT) --- */

.schedule-table-section {
    /* Uses .content-section for padding */
}

.weekly-schedule-wrapper { /* Wrapper div for the table */
    overflow-x: auto; /* Allows horizontal scrolling if table is wider than container */
    margin-top: 1.5em;
    border: 1px solid #e0e0e0; /* Light border around the table area */
    border-radius: 6px; /* Slightly rounded corners for the wrapper */
    background-color: #fff; /* White background for the table area itself */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.weekly-class-schedule-table { /* The table itself */
    width: 100%;
    border-collapse: collapse; /* Removes space between cell borders */
    min-width: 750px; /* Ensures table has a minimum width before scrolling activates */
    /* table-layout: fixed; */ /* Uncomment if you want to strictly control column widths with th/td width % */
}

.weekly-class-schedule-table thead th { /* Table Header Cells (Day names) */
    background-color: #2c3e50; /* Dark blue-gray background for header */
    color: #ffffff; /* White text for header */
    font-weight: bold;
    font-family: var(--font-body); /* Lato font */
    font-size: 1.1rem;
    padding: 15px 10px; /* Padding inside header cells */
    text-align: center; /* Center text in header cells */
    border-left: 1px solid #4a627a; /* Vertical separator lines between header cells */
    border-bottom: 2px solid #4a627a; /* Stronger bottom border for header */
}
.weekly-class-schedule-table thead th:first-child {
    border-left: none; /* No left border for the very first header cell */
}

.weekly-class-schedule-table tbody td { /* Table Body Cells (Class slots) */
    border: 1px solid #e0e0e0; /* Light gray borders for body cells */
    padding: 15px 10px; /* Padding inside body cells */
    text-align: center; /* Center content within cells */
    vertical-align: top; /* Align content to the top of the cell */
    font-size: 0.95rem;
    height: 110px; /* Give cells a consistent height, adjust as needed */
    line-height: 1.5; /* Improve readability within cells */
}

/* Zebra striping for rows in the table body */
.weekly-class-schedule-table tbody tr:nth-child(even) td {
    background-color: #f8f9fa; /* Very light gray for even rows */
}
.weekly-class-schedule-table tbody tr:nth-child(odd) td {
    background-color: #ffffff; /* White for odd rows */
}

/* Styling for content divs within each table cell */
.weekly-class-schedule-table .slot-time {
    font-weight: bold;
    color: var(--deep-charcoal); /* Use variable for dark text */
    display: block; /* Each div on its own line */
    margin-bottom: 0.4em;
    font-size: 1em; /* Relative to parent td's font-size */
}

.weekly-class-schedule-table .slot-details {
    color: #555; /* Medium gray for details */
    display: block;
    margin-bottom: 0.3em;
    font-size: 0.9em; /* Slightly smaller */
}

.weekly-class-schedule-table .slot-status {
    color: var(--sage-green); /* Gold for status text */
    font-weight: bold;
    font-style: italic;
    font-size: 0.85em; /* Smallest text */
    display: block;
    margin-top: 0.3em; /* Add a bit of space above status */
}

/* Example: Specific status styling */
.weekly-class-schedule-table .slot-status.full {
    color: #c0392b; /* Reddish for "FULL" */
}
.weekly-class-schedule-table .slot-status.coming-soon {
    color: #2980b9; /* Blueish for "Coming Soon" */
}


/* === Responsive Adjustments for Weekly Schedule Table === */
@media (max-width: 800px) {
    .weekly-class-schedule-table thead th {
        font-size: 1rem;
        padding: 12px 8px;
    }
    .weekly-class-schedule-table tbody td {
        padding: 12px 8px;
        font-size: 0.9rem;
        height: 100px; /* Adjust height */
    }
}

@media (max-width: 600px) {
    .weekly-class-schedule-table {
        min-width: 500px; /* Reduce min-width for very small screens */
    }
    .weekly-class-schedule-table thead th {
        font-size: 0.9rem;
        padding: 10px 5px;
    }
    .weekly-class-schedule-table tbody td {
        padding: 10px 5px;
        font-size: 0.85rem;
        height: 90px; /* Further reduce height */
    }
    .weekly-class-schedule-table .slot-time,
    .weekly-class-schedule-table .slot-details,
    .weekly-class-schedule-table .slot-status {
        font-size: 0.9em; /* Make text within cells smaller overall */
    }
}
/* --- 8g. FAQ --- */
#faq {
    /* Uses default background (Warm Cream) */
}

.faq-container {
    max-width: 800px; /* Limit width for readability */
    margin: 30px auto 0 auto;
}

.faq-item {
    background-color: #ffffff; /* White background for items */
    margin-bottom: 10px;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    overflow: hidden;
    text-align: left;
}

.faq-item summary {
    padding: 18px 25px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    color: var(--deep-charcoal);
    /* Light mocha tint for summary bar */
    background-color: rgba(201, 196, 181, 0.15);
    position: relative;
    display: block; /* Ensure it takes full width */
    transition: background-color 0.2s ease;
}
.faq-item summary:hover {
     background-color: rgba(201, 196, 181, 0.3);
}

/* Remove default marker */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; } /* Standard */

/* Custom Plus/Minus Icon */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: var(--sage-green); /* Gold icon */
    transition: transform 0.3s ease;
    font-weight: normal; /* Make icon lighter */
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
    padding: 20px 25px;
    margin-bottom: 0;
    color: var(--stone-gray);
    background-color: #ffffff; /* Ensure white background */
}

/* --- 8h. MailerLite Form Contact --- */

/* Target the specific MailerLite form wrapper by its ID and classes */
/* This attempts to make the form container wider */
#mlb2-25154162.ml-form-embedContainer .ml-form-embedWrapper.embedForm,
#mlb2-25154162.ml-form-embedContainer .ml-form-embedWrapper.embedDefault {
    max-width: 750px !important; /* <<< INCREASED THIS VALUE (Example) */
    width: 100% !important;
    margin: 0 auto !important;
}

/* Ensure your own wrapper div can accommodate this new width */
.mailerlite-form-container-wrapper {
    max-width: 800px; /* <<< INCREASED THIS VALUE to be >= form's max-width */
    margin: 0 auto;
    padding: 20px 0;
}

/* Target the "Contact Us" heading (h4) more specifically */
#mlb2-25154162.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4 {
    font-family: var(--font-heading), serif !important;
    text-align: center !important;
    font-size: 2.2rem !important;
    color: var(--deep-charcoal) !important;
    margin-bottom: 1em !important;
    font-weight: 700 !important;
}

/* Target input fields and textarea to use your site's body font */
#mlb2-25154162.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .form-control {
    font-family: var(--font-body), sans-serif !important;
    font-size: 1rem !important;
}

/* Submit button styling */
#mlb2-25154162.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button.primary {
    background-color: var(--sage-green) !important;
    color: var(--deep-charcoal) !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 25px !important;
    font-weight: bold !important;
    font-family: var(--font-body), sans-serif !important;
    font-size: 1rem !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#mlb2-25154162.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
    background-color: var(--coral-darker) !important;
    transform: translateY(-2px);
}


/* --- 8I. Final Call to Action (CTA) --- */
/* --- Final Call to Action (CTA) --- */
/* This class is used on multiple pages, including the one on online-lessons.html */

.cta-section {
    text-align: center; /* Key for centering inline and inline-block children */
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.cta-section h2 {
    /* Font, color, etc., are inherited or set by general h2 rules or .alternate-bg */
    margin-bottom: 0.7em; /* Adjust spacing as needed */
    /* section-title class often handles h2 styling and centering too */
}

.cta-section p {
    /* Font, color, etc., are inherited or set by general p rules or .alternate-bg */
    opacity: 0.9;
    margin-top: 0; /* Remove top margin if it follows h2 closely */
    margin-bottom: 2em; /* Space before buttons */
    font-size: 1.1rem;
    max-width: 650px; /* Adjust max-width for readability */
    margin-left: auto;  /* Centers the paragraph block if max-width is applied */
    margin-right: auto; /* Centers the paragraph block if max-width is applied */
    /* Text inside the paragraph will be centered due to .cta-section's text-align */
}

/* Buttons are inline-block, so text-align: center on parent centers them */
.cta-section .btn {
    margin: 10px 5px 0 5px; /* Add some margin for spacing, especially if they wrap */
}

#final-cta {
    /* Uses .alternate-bg */
    text-align: center;
    padding: 70px 20px; /* Generous padding */
}

#final-cta h2 {
    /* color: var(--rich-chocolate); Inherited */
    margin-bottom: 0.5em;
}

#final-cta p {
     /* color: var(--rich-chocolate); Inherited */
     opacity: 0.9;
     margin-bottom: 2em;
     font-size: 1.1rem;
     max-width: 600px; /* Limit width */
     margin-left: auto;
     margin-right: auto;
}
/* Buttons in final CTA use standard .btn-primary and .alternate-bg .btn-secondary styles */


/* === 9. Footer Styles === */
footer {
    background-color: var(--deep-charcoal);
    color: var(--soft-sand); /* Light text on dark bg */
    text-align: center;
    padding: 30px 0;
}

footer p {
    margin-bottom: 0.5em;
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.5;
}
footer p:last-child {
    margin-bottom: 0;
}

.footer-contact {
    /* No extra style needed */
}

footer a {
    color: var(--soft-sand);
    text-decoration: underline;
    transition: color 0.3s ease;
}

footer a:hover,
footer a:focus {
    color: var(--misty-blue); /* Mocha hover color */
}

/* === 10. Mobile Responsiveness === */

/* --- Tablet and Smaller (<= 768px) --- */
@media (max-width: 768px) {
    :root {
        --section-padding: 50px; /* Slightly reduce section padding */
    }

    h1 { font-size: 2.4rem; }
    h2 { font-size: 2.0rem; }
    h3 { font-size: 1.4rem; }
    .section-title { margin-bottom: 1.2em; }

    /* --- Header Adjustments --- */
    #menu-toggle {
        display: block; /* Show hamburger button */
    }

    #main-nav {
        display: none; /* Hide nav list by default */
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--soft-sand); /* Background for dropdown */
        border-top: 1px solid #e0e0e0;
        padding: 10px 0; /* Padding top/bottom */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        align-items: stretch; /* Stretch items full width */
        margin-left: 0; /* Reset margin */
    }

    /* Style for when mobile menu is open */
    #main-nav.active {
        display: flex;
    }

    #main-nav li {
        margin: 0; /* Remove left margin */
        width: 100%;
        text-align: center;
    }

    #main-nav a {
        display: block; /* Make links block-level */
        padding: 15px 20px;
        border-bottom: 1px solid #eee; /* Separator lines */
    }
     #main-nav a.active-nav { /* Style active link in mobile */
        background-color: rgba(201, 196, 181, 0.15); /* Subtle highlight */
    }

    #main-nav li:last-child a {
        border-bottom: none; /* Remove border from last item */
    }
    #main-nav a::after {
        display: none; /* Hide underline effect on mobile nav */
    }

    .btn-nav-cta {
        display: none; /* Hide desktop CTA button */
    }

    /* Show and style the mobile Get Started button */
    .nav-cta-mobile-container {
        display: block;
        padding: 15px 20px;
        border-top: 1px solid #eee; /* Separator above button */
    }
    .btn-nav-cta-mobile {
        display: inline-block; /* Allow centering */
        width: auto; /* Don't force full width */
        padding: 10px 25px;
    }

    /* --- Hero Adjustments --- */
    #hero { min-height: 60vh; padding: 60px 20px; }
    .hero-content h1 { font-size: 2.6rem; }
    .hero-content p { font-size: 1.2rem; }

    /* --- Grid Adjustments --- */
    .feature-grid,
    .testimonial-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 20px;
    }

    .benefits-grid-layout {
        grid-template-columns: 1fr; /* Stack benefits columns */
        gap: 40px;
    }
    .benefits-image {
        order: -1; /* Put image above text on mobile */
        max-width: 450px; /* Limit image size */
        margin: 0 auto; /* Center image block */
    }
    .benefits-text {
        text-align: center; /* Center align text */
    }
     .benefits-text ul {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        text-align: left; /* Keep list items left-aligned */
     }
     .benefits-text h3 {
        font-size: 1.6rem;
    }

    /* --- How It Works Adjustments --- */
    .steps-list li { padding-left: 55px; }
    .steps-list li::before { width: 35px; height: 35px; font-size: 1rem; }

    /* --- Testimonials Quote Adjustments --- */
    #testimonials .section-title::before,
    #testimonials .section-title::after { font-size: 3rem; left: -25px; top: -15px; right: -25px; bottom: -15px; }

}

/* --- Smaller Mobile Phones (<= 480px) --- */
@media (max-width: 480px) {
     :root {
        --section-padding: 40px;
        --header-height: 60px; /* Slightly smaller header */
    }

     h1 { font-size: 2.0rem; }
     h2 { font-size: 1.8rem; }
     h3 { font-size: 1.3rem; }
     body { font-size: 15px; }

     .logo { font-size: 1.4rem; }

     #hero { min-height: 55vh; padding: 50px 15px; }
     .hero-content h1 { font-size: 2.2rem; }
     .hero-content p { font-size: 1.1rem; }

     .btn { padding: 9px 20px; font-size: 0.9rem; }
     .btn-large { padding: 11px 30px; font-size: 1rem; }

     .container { padding-left: 15px; padding-right: 15px; }

     .faq-item summary, .faq-item p { padding: 15px 20px; }
     .faq-item summary::after { right: 20px; font-size: 1.4em;}

      /* --- Testimonials Quote Adjustments --- */
    #testimonials .section-title::before,
    #testimonials .section-title::after { font-size: 2.5rem; left: -15px; top: -10px; right: -15px; bottom: -15px; }
}