:root {
            --brand-deep: #07124f; /* deep navy used for CTAs / headings */
            --brand-teal: rgb(4, 94, 110); /* teal band used in course area */
            --muted: #6c757d; /* generic muted text */
            --card-wash: #f7fbfb; /* light card background */
            --white: #ffffff;
            --page-bg: #ffffff;
            --accent: #11107f; /* join buttons */
            --footer-bg: #083b3b;
        }

        /* Reset / base */
        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: var(--page-bg);
            color: #222;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

        /* ---------- Header ---------- */
        .site-header {
            background: var(--white);
            position: sticky;
            top: 0;
            z-index: 60;
            box-shadow: 0 2px 8px rgba(6,10,20,0.04);
        }

        .header-inner {
            height: 92px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .logo {
            height: 66px;
            width: auto;
            display: block
        }

        .mobile-menu-btn {
            position: absolute;
            left: 18px;
            top: 20px;
            background: none;
            border: none;
            font-size: 22px;
        }

        /* ---------- HERO ---------- */
        .hero {
            position: relative;
            min-height: 540px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            <!-- background: #e9f6f6; -->
        }

            .hero .hero-bg {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                filter: contrast(.95) saturate(.9) brightness(.78);
            }

            .hero .overlay {
                <!-- position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(6,10,20,0.06) 0%, rgba(6,10,20,0.14) 100%); -->
            }

        .hero-content {
            position: relative;
            z-index: 4;
            text-align: center;
            max-width: 980px;
            padding: 36px;
        }

        .hero-title {
            font-family: 'Forum', serif;
            color: var(--brand-deep);
            font-size: 66px;
            letter-spacing: 0.6px;
            margin: 0 0 8px;
            line-height: 1.2;
        }

        .hero-sub {
            color: #233b3b;
            font-size: 18px;
            margin-bottom: 18px;
        }

        .btn-cta {
            background: var(--accent);
            color: #fff;
            padding: 10px 42px !important;
            border-radius: 4px;
            font-weight: 400;
            display: inline-block;
        }

        /* ---------- Courses band ---------- */
        .courses-section {
            background: var(--brand-teal);
            color: #fff;
            padding: 54px 0 72px;
        }

        .courses-wrap {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 18px;
        }

        .section-heading {
            font-family: 'Forum', serif;
            font-size: 52px;
            margin: 0 0 6px;
            color: #fff;
        }

        .section-sub {
            font-size: 22px;
            color: rgba(255,255,255,0.95);
            margin-bottom: 18px;
            max-width: 720px;
        }

        .courses-grid {
            margin-top: 16px;
        }

        .course-tile {
            background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 320px;
            transition: transform .18s ease, box-shadow .18s ease;
            border: 1px solid rgba(255,255,255,0.06);
        }

        .course-banner {
            height: 130px;
            background-size: cover;
            background-position: center;
        }

        .course-body {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

            .course-body h5 {
                margin: 0;
                font-size: 20px;
                font-weight: 400;
                color: #fff;
                font-family: 'Forum',serif;
            }

            .course-body p.muted {
                margin: 0;
                color: rgba(255,255,255,0.9);
                font-size: 15px;
                line-height: 1.45;
            }

        .btn-join {
            margin-top: auto;
            align-self: flex-start;
            background: var(--accent);
            color: white;
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 4px;
            border: 0;
            font-weight: 400;
            text-decoration: none;
        }

        .course-tile:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 36px rgba(6,10,20,0.12);
        }

        /* ---------- Seasonal courses ---------- */
        .seasonal {
            margin-top: 28px;
        }

        .season-card {
            min-height: 170px;
            border-radius: 8px;
            padding: 18px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background-size: cover;
            background-position: center;
            color: white;
            box-shadow: 0 10px 30px rgba(3,3,3,0.08);
        }

        .seasonal-title {
            color: rgba(255,255,255,0.94);
            font-size: 18px;
            margin-bottom: 12px;
        }

        /* ---------- About ---------- */
        .about-section {
            padding: 72px 0;
            background: var(--page-bg);
            color: #132a2a;
        }

        .about-heading {
            font-family: 'Forum',serif;
            font-size: 52px;
            margin-bottom: 10px;
            color: var(--brand-deep);
        }

        .about-text {
            font-size: 18px;
            max-width: 920px;
            color: black;
            line-height: 1.8;
        }

        /* ---------- Team ---------- */
        .team-section {
            background: var(--page-bg);
            padding: 46px 0 24px;
        }

        .team-heading {
            font-family: 'Forum',serif;
            font-size: 52px;
            color: var(--brand-deep);
            margin-bottom: 6px;
        }

        .team-sub {
            font-size: 18px;
            color: black);
            margin-bottom: 32px;
            max-width: 860px;
            line-height: 1.8;
        }

        .team-card {
            background: #fff;
            border-radius: 6px;
            padding: 12px;
            box-shadow: 0 8px 20px rgba(10,10,30,0.06);
            transition: transform .16s ease;
        }

            .team-card img {
                width: 96px;
                height: 72px;
                object-fit: cover;
                border-radius: 4px;
                flex: 0 0 96px;
            }

        .team-body h6 {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: #0d2430;
        }

        .team-body p.muted {
            margin: 6px 0 8px;
            color: #6b7780;
            font-size: 13px;
        }

        /* ---------- Contact ---------- */
        .contact-section {
            padding: 44px 0 18px;
            background: var(--page-bg);
        }

        .contact-panel {
            background: #fbfbfb;
            padding: 16px;
            border-radius: 6px;
            box-shadow: 0 8px 20px rgba(10,10,30,0.03);
        }

        .contact-form .form-control {
            border-radius: 3px;
            border: 1px solid #e2e6ea;
            padding: 10px;
        }

        .btn-send {
            background: var(--brand-deep);
            color: white;
            padding: 8px 18px;
            border-radius: 4px;
            font-weight: 700;
            border: 0;
        }

        /* ---------- Contact Us (address + map) ---------- */
        .contact-us {
            padding: 40px 0 60px;
            background: var(--page-bg);
        }

            .contact-us h4 {
                font-family: 'Forum',serif;
                font-size: 20px;
                color: var(--brand-deep);
                margin-bottom: 14px;
            }

        .map img {
            width: 100%;
            border-radius: 6px;
            height: 260px;
            object-fit: cover;
            display: block;
        }

        /* ---------- Footer ---------- */
        .site-footer {
            background: var(--footer-bg);
            color: #fff;
            padding: 36px 0;
        }

        .footer-left strong {
            letter-spacing: 1px;
            display: block;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .footer-left p {
            margin: 0;
            color: rgba(255,255,255,0.9);
        }

        /* ---------- Utilities ---------- */
        .muted {
            color: var(--muted);
        }

        .section-sub.small {
            font-size: 13px;
        }

        /* ---------- Responsive: mobile close match ---------- */
        @media (max-width: 991px) {
            .hero {
                min-height: 420px;
            }

            .hero-title {
                font-size: 36px;
            }

            .course-banner {
                height: 110px;
            }

            .course-tile {
                min-height: 280px;
            }

            .team-card img {
                width: 84px;
                height: 64px;
            }

            .header-inner {
                height: 76px;
            }
        }

        @media (max-width: 575px) {
            .hero {
                min-height: 360px;
            }

            .hero-title {
                font-size: 28px;
            }

            .courses-section {
                padding: 28px 0 40px;
            }

            .course-banner {
                height: 250px;
            }

            .course-tile {
                min-height: 220px;
            }

            .team-card {
                padding: 10px;
            }

                .team-card img {
                    width: 76px;
                    height: 56px;
                }

            .logo {
                height: 54px;
            }

            .hero-content {
                padding: 24px;
            }
        }