/* =========================================
   GLOBAL
========================================= */

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

body {

    padding-top: 120px;

    font-family: 'Poppins', sans-serif;

    background: #f8f5f1;

    overflow-x: hidden;
}


/* =========================================
   HEADER
========================================= */

.custom-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    padding: 18px 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    z-index: 9999;

    transition: 0.3s ease;
}


/* =========================================
   LOGO
========================================= */

.logo {

    flex: 1;
}

.logo a {

    display: inline-block;

    text-decoration: none;
}

.logo img {

    height: 70px;

    width: auto;

    display: block;
}


/* =========================================
   NAVIGATION
========================================= */

.nav-menu {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 28px;

    background: #ececec;

    padding: 14px 32px;

    border-radius: 60px;
}


/* =========================================
   NAV LINKS
========================================= */

.nav-menu a,
.dropdown-link {

    text-decoration: none;

    color: #1d2b53;

    font-size: 16px;

    font-weight: 600;

    transition: 0.3s ease;

    cursor: pointer;

    padding: 10px 14px;

    border-radius: 30px;
}


.nav-menu a:hover,
.dropdown-link:hover {

    color: #f47b34;

    background: rgba(244, 123, 52, 0.08);
}


/* =========================================
   DROPDOWN
========================================= */

.dropdown {

    position: relative;
}


.dropdown-top {

    display: flex;

    align-items: center;

    gap: 6px;
}


/* =========================================
   DROPDOWN ARROW
========================================= */

.dropdown-arrow {

    font-size: 11px;

    color: #1d2b53;

    cursor: pointer;

    transition: 0.3s ease;

    user-select: none;
}


/* =========================================
   SUBMENU
========================================= */

.submenu {

    position: absolute;

    top: 130%;

    left: 50%;

    transform:
        translateX(-50%)
        translateY(10px);

    min-width: 220px;

    background: #ffffff;

    border-radius: 22px;

    padding: 14px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.12);

    z-index: 999;
}


/* =========================================
   DESKTOP DROPDOWN HOVER
========================================= */

@media (min-width: 993px) {

    .dropdown:hover .submenu {

        opacity: 1;

        visibility: visible;

        transform:
            translateX(-50%)
            translateY(0);
    }


    .dropdown:hover .dropdown-arrow {

        transform: rotate(180deg);
    }

}


/* =========================================
   SUBMENU LINKS
========================================= */

.submenu a {

    width: 100%;

    padding: 12px 14px;

    border-radius: 14px;

    color: #1d2b53;

    font-size: 15px;

    font-weight: 600;

    transition: 0.3s ease;
}


.submenu a:hover {

    background:
        rgba(244, 123, 52, 0.08);

    color: #f47b34;

    transform: translateX(4px);
}


/* =========================================
   DESKTOP LOGIN / LOGOUT
========================================= */

.header-buttons {

    flex: 1;

    display: flex;

    justify-content: flex-end;

    align-items: center;
}


/* =========================================
   LOGIN / LOGOUT BUTTON
========================================= */

.free-class-btn {

    display: inline-block;

    text-decoration: none;

    background: #f47b34;

    color: #ffffff !important;

    padding: 14px 28px;

    border-radius: 50px;

    font-size: 15px;

    font-weight: 700;

    border: 3px solid #2a1f1b;

    box-shadow:
        5px 5px 0 #2a1f1b;

    transition: 0.3s ease;

    cursor: pointer;
}


.free-class-btn:hover {

    background: #f47b34;

    color: #ffffff !important;

    transform: translateY(-3px);

    box-shadow:
        7px 7px 0 #2a1f1b;
}


/* =========================================
   MOBILE MENU BUTTON
========================================= */

.menu-toggle {

    display: none;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #ffffff;

    color: #1d2b53;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);
}


/* =========================================
   MOBILE BUTTONS
========================================= */

.mobile-buttons {

    display: none;
}


/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 992px) {

    body {

        padding-top: 95px;
    }


    /* HEADER */

    .custom-header {

        padding: 16px 20px;
    }


    /* LOGO */

    .logo img {

        height: 54px;
    }


    /* MENU BUTTON */

    .menu-toggle {

        display: flex;
    }


    /* DESKTOP BUTTON HIDDEN */

    .header-buttons {

        display: none;
    }


    /* MOBILE NAV */

    .nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        transform:
            translateY(-20px);

        flex-direction: column;

        align-items: center;

        gap: 18px;

        background: #ffffff;

        padding: 30px 20px;

        border-radius:
            0 0 28px 28px;

        opacity: 0;

        visibility: hidden;

        transition: 0.35s ease;

        box-shadow:
            0 18px 40px rgba(0, 0, 0, 0.08);
    }


    /* OPEN MOBILE MENU */

    .nav-menu.active {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }


    /* MOBILE NAV LINKS */

    .nav-menu > a,
    .dropdown-link {

        width: 100%;

        text-align: center;
    }


    /* =========================================
       MOBILE DROPDOWN
    ========================================= */

    .dropdown {

        width: 100%;
    }


    .dropdown-top {

        justify-content: center;
    }


    .submenu {

        position: static;

        transform: none !important;

        margin-top: 10px;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        padding: 0;

        box-shadow: none;

        background: #f7f7f7;

        transition:
            max-height 0.3s ease,
            opacity 0.3s ease;
    }


    /* OPEN MOBILE DROPDOWN */

    .dropdown.active .submenu {

        max-height: 500px;

        opacity: 1;

        visibility: visible;

        padding: 10px;
    }


    /* ARROW */

    .dropdown.active .dropdown-arrow {

        transform:
            rotate(180deg);
    }


    /* SUBMENU */

    .submenu a {

        text-align: center;
    }


    /* =========================================
       MOBILE LOGIN / LOGOUT
    ========================================= */

    .mobile-buttons {

        display: flex;

        width: 100%;

        margin-top: 10px;

        justify-content: center;
    }


    .mobile-buttons .free-class-btn {

        width: 100%;

        text-align: center;

        display: block;
    }

}


/* =========================================
   v1.2 NAV ALIGNMENT FIXES
========================================= */

/* Desktop: true 3-column layout (logo | nav | button) so the pill
   can never overlap the logo or the login button at mid widths. */
@media (min-width: 993px) {
    .custom-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        column-gap: 24px;
    }
    .logo { justify-self: start; flex: none; }
    .nav-menu {
        position: static;
        left: auto;
        transform: none;
        justify-self: center;
        gap: 6px;
        padding: 8px 14px;
    }
    .header-buttons { justify-self: end; flex: none; }
}

/* Tighter layout on small laptops */
@media (min-width: 993px) and (max-width: 1180px) {
    .custom-header { padding-left: 28px; padding-right: 28px; column-gap: 14px; }
    .nav-menu a, .dropdown-link { font-size: 15px; padding: 9px 12px; }
    .free-class-btn { padding: 12px 22px; }
}

/* Every nav item is a centred, equal-height pill */
.nav-menu > a,
.dropdown-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    white-space: nowrap;
}

/* Courses link + arrow read as ONE item */
.dropdown-top { gap: 0; border-radius: 30px; }
.dropdown-top .dropdown-link { padding-right: 6px; }
.dropdown-arrow { padding: 10px 12px 10px 0; line-height: 1; }
.dropdown-top:hover .dropdown-link { color: #f47b34; background: rgba(244,123,52,.08); }

/* Invisible bridge so the submenu doesn't close in the hover gap */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
.submenu a { display: block; text-align: left; box-sizing: border-box; }

/* Header buttons / logo stay vertically centred */
.header-buttons .free-class-btn { line-height: 1.2; white-space: nowrap; }
.menu-toggle { padding: 0; line-height: 1; border: 0; }

@media (max-width: 992px) {
    .custom-header { gap: 12px; }
    .nav-menu { box-sizing: border-box; max-height: calc(100vh - 100px); overflow-y: auto; }
    .nav-menu > a, .dropdown-link { padding: 12px 14px; }
    .dropdown-top { width: 100%; justify-content: center; }
    .dropdown-arrow { padding: 12px 6px; }
    .submenu a { text-align: center; }
}

/* v1.3 header always fits the viewport (no right-edge clipping) */
.custom-header { left: 0; right: 0; width: auto; max-width: 100vw; box-sizing: border-box; }

```css
/* =========================================
   TUTOR MONK - DASHBOARD AUTH BUTTONS
   ========================================= */

/* Desktop authentication buttons */
.header-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Dashboard button */
.header-buttons .dashboard-btn,
.mobile-buttons .dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* Dashboard button hover */
.header-buttons .dashboard-btn:hover,
.mobile-buttons .dashboard-btn:hover {
    text-decoration: none;
    opacity: 0.9;
}

/* Mobile authentication buttons */
.mobile-buttons {
    display: none;
    align-items: center;
    gap: 10px;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .mobile-buttons {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
    }

    .mobile-buttons .dashboard-btn,
    .mobile-buttons .free-class-btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* Hide desktop buttons when mobile menu is active */
    .header-buttons {
        display: none;
    }

}

/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 480px) {

    .mobile-buttons {
        gap: 8px;
    }

    .mobile-buttons .dashboard-btn,
    .mobile-buttons .free-class-btn {
        font-size: 14px;
        padding: 10px 14px;
    }

}