/* --- Global Reset & Base Styles --- */
        :root {
            --primary-color: #87CEEB; /* Sky Blue - Calming */
            --secondary-color: #E0FFFF; /* Light Cyan - Soft Accent */
            --accent-color: #FFD700; /* Gold - Subtle Highlight */
            --text-color: #333;
            --light-text-color: #f8f8f8;
            --bg-color: #FFFFFF;
            --footer-bg: #f1f1f1;
            --font-heading: 'Merriweather', serif;
            --font-body: 'Lato', sans-serif;
            --transition-speed: 0.3s;
        }

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

        html {
            scroll-behavior: smooth;
            font-size: 16px; /* Base font size */
            /* --- ADDED --- */
            scroll-padding-top: 70px; /* Header height (70px) + 15px buffer */
        }

        body {
            font-family: var(--font-body);
            color: var(--text-color);
            background-color: var(--bg-color);
            line-height: 1.6;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            margin-bottom: 0.8rem;
            line-height: 1.3;
            color: #4a7c59; /* Deeper green for headings */
        }

        h1 { font-size: 2.8rem; }
        h2 { font-size: 2.2rem; }
        h3 { font-size: 1.6rem; }

        p {
            margin-bottom: 1rem;
        }

        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-speed) ease;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        ul {
            list-style: none;
        }

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

        section {
            padding: 80px 0;
            opacity: 0; /* Initially hidden for fade-in */
            transform: translateY(20px); /* Start slightly lower */
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        /* Exception for Hero section fade-in which is handled differently */
        #hero {
             opacity: 1;
             transform: translateY(0);
             transition: none; /* No transition needed here, handled by inner content */
        }


        section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Utility Classes --- */
        .btn {
            display: inline-block;
            padding: 12px 25px;
            background-color: var(--primary-color);
            color: var(--light-text-color);
            border: none;
            border-radius: 25px; /* Rounded buttons */
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn:hover {
            background-color: #00a1e6;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--primary-color);
            border: 2px solid var(--primary-color);
        }

        .btn-secondary:hover {
            background-color: var(--primary-color);
            color: var(--light-text-color);
        }

        .text-center {
            text-align: center;
        }

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

        .section-subtitle {
            text-align: center;
            margin-bottom: 15px;
            font-size: 1.1rem;
            color: #777;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Header & Navigation --- */
        .main-header {
            background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color var(--transition-speed) ease;
        }

        .main-header.scrolled {
             background-color: rgba(255, 255, 255, 1); /* Solid white on scroll */
        }


        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .logo {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
            display: flex;
            align-items: center;
        }
         .logo i {
            margin-right: 8px;
            color: var(--accent-color); /* Lotus icon color */
         }


        .nav-links {
            display: flex;
        }

        .nav-links li {
            margin-left: 25px;
        }

        .nav-links a {
            color: var(--text-color);
            font-weight: bold;
            padding: 5px 0;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width var(--transition-speed) ease;
        }

        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }


        .menu-toggle {
            display: none; /* Hidden by default */
            font-size: 1.8rem;
            color: var(--primary-color);
            cursor: pointer;
            background: none;
            border: none;
        }

        /* --- Hero Section --- */
        #hero {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 100vh; /* Full viewport height */
            padding-top: 70px; /* Account for fixed header */
            background: url('https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80') no-repeat center center/cover;
            color: var(--light-text-color);
            position: relative; /* For overlay */
        }

        #hero::before { /* Dark overlay for text readability */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .hero-content {
            position: relative; /* Above overlay */
            z-index: 2;
            max-width: 800px;
             /* REMOVED opacity: 0; from here - let animation handle it */
            animation: fadeInHero 1.5s ease-out forwards;
        }

        @keyframes fadeInHero {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }


        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            color: var(--light-text-color);
        }

        .hero-content p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
        }

        /* --- About Section --- */
        #about {
            background-color: var(--bg-color);
        }
        .about-content {
            display: flex;
            gap: 40px;
            align-items: center;
        }
         .about-text {
            flex: 1;
         }
         .about-image {
            flex: 1;
            max-width: 500px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden; /* Ensures image stays within rounded corners */
         }
        .about-image img {
             border-radius: 8px;
             transition: transform 0.4s ease;
        }
        .about-image img:hover {
            transform: scale(1.05);
        }


        /* --- Services Section --- */
        #services {
            background-color: var(--secondary-color); /* Light background */
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .service-card {
            background-color: var(--bg-color);
            padding: 30px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
        }

        .service-card i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .service-card h3 {
            margin-bottom: 10px;
        }

        /* --- Schedule Section --- */
        #schedule {
            background-color: var(--bg-color);
        }
        .schedule-table-wrapper { /* Added wrapper for overflow */
            overflow-x: auto;
            margin-top: 40px;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             border-radius: 8px; /* Apply radius to wrapper */
        }
        .schedule-table {
            width: 100%;
            border-collapse: collapse;
            /* Removed margin-top, box-shadow, overflow, border-radius from table itself */
            text-align: left;
            min-width: 800px; /* Ensure table has minimum width for scroll */
        }
        .schedule-table th, .schedule-table td {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            white-space: nowrap; /* Prevent text wrapping inside cells */
        }
        .schedule-table th {
            background-color: var(--primary-color);
            color: var(--light-text-color);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: sticky; /* Keep header sticky */
            top: 0; /* Stick to top within the scrollable wrapper */
            z-index: 10; /* Ensure header stays above content */
        }
        .schedule-table tr:nth-child(even) {
            background-color: var(--secondary-color);
        }
        .schedule-table tr:last-child td {
            border-bottom: none;
        }
        .schedule-table .book-cell { /* Added class for booking cells */
             text-align: center;
        }


        .schedule-table .book-btn-small {
            padding: 6px 12px;
            font-size: 0.8rem;
            border-radius: 15px;
        }


        /* --- Teachers Section --- */
        #teachers {
            background-color: var(--secondary-color);
        }

        .teachers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .teacher-card {
            background-color: var(--bg-color);
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .teacher-card:hover {
             transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
        }

        .teacher-card img {
            width: 100%;
            height: 280px; /* Fixed height */
            object-fit: cover; /* Crop image nicely */
        }

        .teacher-info {
            padding: 20px;
        }

        .teacher-info h3 {
            margin-bottom: 5px;
        }

        .teacher-info p {
            font-size: 0.9rem;
            color: #666;
        }


        /* --- Contact Section --- */
        #contact {
            background-color: var(--bg-color);
        }
        .contact-wrapper {
            display: flex;
            gap: 40px;
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
            margin-top: 40px;
        }

        .contact-form, .contact-info {
             flex: 1;
             min-width: 300px; /* Minimum width before wrapping */
        }

        .contact-form form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .contact-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: var(--font-body);
            font-size: 1rem;
        }
         .contact-form input:focus,
         .contact-form textarea:focus {
             outline: none;
             border-color: var(--primary-color);
             box-shadow: 0 0 5px rgba(135, 206, 235, 0.5);
         }

        .contact-form textarea {
            resize: vertical; /* Allow vertical resize only */
            min-height: 150px;
        }

        .contact-info h3 {
            margin-bottom: 20px;
        }

        .contact-info p {
            margin-bottom: 15px;
            display: flex;
            align-items: center; /* Align icon and text vertically */
            gap: 10px;
            color: #555;
        }
         /* Target paragraph containing the address specifically if needed */
        .contact-info p:has(i.fa-map-marker-alt) {
            align-items: flex-start; /* Align icon top for multi-line address */
        }


        .contact-info i {
            color: var(--primary-color);
            font-size: 1.2rem;
            width: 20px; /* Align icons */
            text-align: center;
            flex-shrink: 0; /* Prevent icon from shrinking */
             padding-top: 2px; /* Fine-tune vertical alignment */
        }
         /* Basic Map Placeholder - Replace with actual embed if needed */
         .map-placeholder {
            height: 250px;
            background-color: #e9e9e9;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-style: italic;
            margin-top: 20px;
         }


        /* --- Footer --- */
        .main-footer {
            background-color: var(--footer-bg);
            color: #666;
            padding: 40px 0;
            text-align: center;
            font-size: 0.9rem;
        }

        .footer-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .social-links {
            margin-bottom: 15px;
        }

        .social-links a {
            color: #555;
            font-size: 1.5rem;
            margin: 0 10px;
            transition: color var(--transition-speed) ease;
        }

        .social-links a:hover {
            color: var(--primary-color);
        }

        .footer-links {
             margin-bottom: 15px;
        }
        .footer-links a {
             margin: 0 10px;
             color: #666;
        }
        .footer-links a:hover {
             color: var(--primary-color);
        }


        /* --- Responsiveness --- */

        /* Medium devices (tablets, less than 992px) */
        @media (max-width: 991.98px) {
            h1 { font-size: 2.5rem; }
            h2 { font-size: 2rem; }
            .hero-content h1 { font-size: 3rem; }
            .about-content { flex-direction: column; text-align: center; }
            .about-image { max-width: 100%; margin-top: 30px;}
            .schedule-table th, .schedule-table td { padding: 12px 15px; font-size: 0.9rem; }
        }

        /* Small devices (landscape phones, less than 768px) */
        @media (max-width: 767.98px) {

            html { font-size: 15px;
                 /* --- ADDED/ADJUSTED --- */
                 scroll-padding-top: 60px; /* Smaller header height (60px) + 15px buffer */
            }
            .container { padding: 0 15px; }
            section { padding: 60px 0; }

            .navbar { height: 60px; } /* Header height changes here */
            .logo { font-size: 1.5rem; }
            .menu-toggle {
                display: block; /* Show hamburger */
            }

            .nav-links {
                display: none; /* Hide normal nav links */
                flex-direction: column;
                position: absolute;
                top: 60px; /* Below header */
                left: 0;
                width: 100%;
                background-color: rgba(255, 255, 255, 0.98);
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                padding: 15px 0;
                text-align: center;
            }

            .nav-links.active {
                display: flex; /* Show when active */
            }

            .nav-links li {
                margin: 15px 0;
                margin-left: 0; /* Reset margin */
            }
            .nav-links a::after { display: none; } /* Remove underline effect on mobile */


            .hero-content h1 { font-size: 2.5rem; }
            .hero-content p { font-size: 1.1rem; }

            .section-title { font-size: 2rem; margin-bottom: 30px;}

             /* Adjust schedule table styles for smaller screens */
            .schedule-table { min-width: 600px; /* Adjust min-width as needed */ }
            .schedule-table th, .schedule-table td { padding: 10px 12px; font-size: 0.85rem; }
            .schedule-table .book-btn-small { padding: 5px 8px; font-size: 0.7rem; }


            .teachers-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
            .teacher-card img { height: 240px; }

            .contact-wrapper { flex-direction: column; }
            .contact-form { margin-bottom: 30px; }

        }

        /* Extra small devices (portrait phones, less than 576px) */
        @media (max-width: 575.98px) {
             html { font-size: 14px; }
             h1 { font-size: 2.2rem; }
             h2 { font-size: 1.8rem; }
             .hero-content h1 { font-size: 2.2rem; }
             .hero-content p { font-size: 1rem; }
             .btn { padding: 10px 20px; font-size: 0.9rem; }
             .section-title { font-size: 1.8rem; }

             .services-grid { grid-template-columns: 1fr; } /* Stack services */
             .teachers-grid { grid-template-columns: 1fr; } /* Stack teachers */

             /* Further adjust schedule table for very small screens */
            .schedule-table { min-width: 500px; /* Further adjust min-width */ }
            .schedule-table th, .schedule-table td { padding: 8px 10px; font-size: 0.8rem; }

        }

        /* --- Modal Styles --- */
        .modal-overlay {
            display: none; /* Hidden by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Slightly lighter overlay */
            z-index: 1040;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9); /* Start slightly smaller */
            background-color: var(--bg-color); /* Use theme background */
            color: var(--text-color); /* Use theme text color */
            padding: 30px 40px;
            border-radius: 8px; /* Theme border radius */
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow */
            z-index: 1050;
            max-width: 500px;
            width: 90%;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            text-align: center;
        }

        .modal-visible .modal-overlay {
            display: block;
            opacity: 1;
        }

        .modal-visible .modal {
            display: block;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1); /* Scale to full size */
        }

        .modal-header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee; /* Light border */
        }

        .modal-close-btn {
            background: none;
            border: none;
            font-size: 1.8rem;
            font-weight: bold;
            color: #aaa; /* Lighter gray for close button */
            cursor: pointer;
            line-height: 1;
            padding: 0 5px;
            transition: color 0.2s ease;
        }

        .modal-close-btn:hover {
            color: var(--text-color); /* Darker on hover */
        }

        .modal-body p {
            margin-bottom: 1rem;
            font-size: 1.1rem;
            color: var(--text-color);
        }

        .modal-body a {
            color: var(--primary-color); /* Use primary color for link */
            font-weight: bold;
            text-decoration: underline;
        }

        .modal-body a:hover {
            color: #00a1e6; /* Darker shade of primary */
        }