/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =====================================================================
 FIGTREE — self-hosted variable webfont
 ---------------------------------------------------------------------
 Replaces a pure system stack that rendered the site in a DIFFERENT
 typeface per platform: Segoe UI on Windows, Tahoma on macOS, Verdana on
 iOS, Roboto on Android. There was no typographic identity at all — zero
 @font-face rules and zero webfont links existed anywhere before this.

 SELF-HOSTED, not Google Fonts, and the CSP decides it: .htaccess:131
 already allows font-src 'self', so this needs no header change. Google
 Fonts would need style-src += fonts.googleapis.com AND font-src +=
 fonts.gstatic.com, and would then die SILENTLY the day SEC-11 flips from
 Report-Only to enforcing — the same trap already documented for the
 YouTube embed at frame-src. Self-hosting also drops a third-party DNS
 lookup and TLS handshake from every page load.

 ONE VARIABLE FILE, 20,156 bytes, covering all six weights the site
 actually uses (400/500/600/700/800/900 — measured: 91 uses of 800, 82 of
 700, 69 of 600, 36 of 500, 20 of 900, 4 of 400, plus 35 `bold`). Six
 static faces would have been 142KB.

 WHY FIGTREE and not Inter, which was the first choice: measured against
 Segoe UI, Figtree has an IDENTICAL x-height (50) and cap-height (70), so
 there is no optical size shift and no need to retune any font-size.
 Inter is +10% x-height and rendered the 10-item nav 8.6% wider (worst
 item +13%), which would have pushed the SS20.3 header overflow further.
   nav total at 16px:  Segoe 709px · Figtree 731 (+3.1%) · Inter 770 (+8.6%)
   x-height:           Segoe 50 · Figtree 50 (0%) · Inter 55 (+10%)
 In the live page the real cost came in far under that isolated estimate:
 the nav grew 1025px -> 1026px, i.e. +1px.

 NO ITALIC FACE. There are 12 font-style:italic declarations site-wide;
 an italic variable face is a further ~52KB, so the browser synthesises
 the slant instead. Add the real face only if that ever looks wrong.

 unicode-range is Google's own `latin` set, which already contains U+0131
 — the ONLY codepoint in the entire site's content outside plain latin
 (the dotless i in "Türkiye Bursları"). No custom subsetting was needed;
 pulling latin-ext for that one glyph would have cost a further 83KB.

 @ url() resolves against THIS FILE's directory, not the page's — so this
 points at css/fonts/, per SS20.9. An HTML asset sweep does not cover it.
 ===================================================================== */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 900;              /* variable axis: one file, all weights */
    font-display: swap;
    src: url('fonts/figtree-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The UA stylesheet gives form controls their OWN font (Arial for <button>), which a button does
   NOT inherit — so every un-styled button rendered in Arial, breaking the Figtree wordmark. One rule
   makes them all inherit the page font (Figtree stack), now and future, static or JS-injected. A
   button that sets its own font-family (class/inline) keeps it — higher specificity than this bare
   selector — so intentional styling is untouched. Supersedes the earlier .header .login-btn fix. */
button, .btn, input[type="submit"], input[type="button"], input[type="reset"] {
    font-family: inherit;
}

:root {
    --primary-color: #0077b6;
    --secondary-color: #e95420;
    --accent-color: #0e8420;
    --dark-color: #333;
    --light-color: #f8f9fa;
    --gray-color: #6c757d;
    --border-color: #ddd;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

body {
    /* Segoe UI retained as first fallback: a failed font load lands on what
       the site rendered before, not on generic sans-serif. */
    font-family: 'Figtree', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background-color: #fff;
}

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



/* ===== HEADER ZOOM OUT (15%) - BASED ON YOUR ORIGINAL CSS ===== */

.header {
    background-color: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0; /* Keep original */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px; /* Reduced from 15px 20px */
}

/* Logo Area */
.logo h1 {
    color: var(--primary-color);
    font-size: 1.5rem; /* Reduced from 1.8rem */
    margin-bottom: 3px; /* Reduced from 5px */
}

.logo p {
    color: var(--gray-color);
    font-size: 0.75rem; /* Reduced from 0.9rem */
}

/* Navigation */
.main-nav > ul { /* `> ul`: only the top nav-list flexes, not the nested .login-menu dropdown (else Student/Ambassador go side-by-side) */
    display: flex;
    list-style: none;
}

.nav-list > li {
    position: relative;
}

.nav-list > li > a {
    display: block;
    padding: 6px 10px; /* Reduced from 10px 15px */
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    font-size: 0.85rem; /* Smaller text */
    transition: var(--transition);
}

.nav-list > li > a:hover,
.nav-list > li > a.active {
    color: #1a5fb4;
}

.nav-list > li > a i {
    margin-left: 3px; /* Reduced from 5px */
    font-size: 0.7rem; /* Reduced from 0.8rem */
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px; /* Reduced from 220px */
    border-radius: 5px; /* Reduced from 6px */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* Lighter shadow */
    padding: 5px 0; /* Reduced from 8px */
    margin-top: 5px; /* Reduced from 8px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px); /* Reduced from 10px */
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Show on hover */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* List */
.dropdown-menu li {
    list-style: none;
}

/* Links */
.dropdown-menu a {
    display: block;
    padding: 6px 15px; /* Reduced from 10px 20px */
    text-decoration: none;
    color: #333;
    font-size: 0.8rem; /* Reduced from 15px */
    transition: background 0.2s ease;
}

/* Hover Effect */
.dropdown-menu a:hover {
    background: #f2f2f2;
    color: #000;
}

/* Login Area (from your existing code) */
/* Login Area - Right Aligned */
.login-area {
    margin-left: 40px; /* Tani waxay login-ka u riixaysaa dhinaca midig */
    display: flex;
    align-items: center;
}

.login-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 5px 12px; /* Smaller padding */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem; /* Smaller font */
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.login-btn i {
    font-size: 0.75rem; /* Smaller icon */
}

.login-btn:hover {
    background: #005f92;
}

.login-dropdown {
    position: relative;
    display: inline-block;
}

.login-menu {
    position: absolute;
    right: 0;
    top: 110%;
    background: #fff;
    min-width: 140px; /* Reduced from 160px */
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    border-radius: 4px;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.login-dropdown:hover .login-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.login-menu li a {
    display: block;
    padding: 5px 12px; /* Reduced from 8px 15px */
    text-decoration: none;
    color: #333;
    font-size: 0.75rem; /* Smaller */
}

.login-menu li a:hover {
    background: #f2f2f2;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--primary-color);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .header .container {
        padding: 8px 15px;
    }
    
    .nav-list > li > a {
        padding: 5px 8px;
        font-size: 0.8rem;
    }
    
    .dropdown-menu {
        min-width: 160px;
    }
    
    .dropdown-menu a {
        padding: 5px 12px;
        font-size: 0.75rem;
    }
    
    .logo h1 {
        font-size: 1.3rem;
    }
    
    .logo p {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .header .container {
        padding: 8px 15px;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .main-nav {
        display: none;
    }
    
    .main-nav.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 15px;
        z-index: 999;
    }
    
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li > a {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        padding: 0 0 0 20px;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: auto;
    }
    
    .login-area {
        margin: 10px 0 0 0;
    }
    
    .login-dropdown {
        width: 100%;
    }
    
    .login-btn {
        width: 100%;
        justify-content: center;
    }
    
    .login-menu {
        position: static;
        width: 100%;
        margin-top: 5px;
    }
    
    .logo h1 {
        font-size: 1.2rem;
    }
    
    .logo p {
        font-size: 0.65rem;
    }
}

@media (max-width: 576px) {
    .header .container {
        padding: 5px 10px;
    }
    
    .logo h1 {
        font-size: 1.1rem;
    }
    
    .logo p {
        font-size: 0.6rem;
    }
    
    .login-btn {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}










/* ================= HERO SECTION ================= */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

/* ========= Background Slider ========= */

.hero-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 8s ease-in-out;
    transform: scale(1);
}

.slide.active {
    opacity: 1;
    transform: scale(1.08); /* Soft zoom */
}

/* ========= Modern Gradient Overlay ========= */

.hero::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 174, 239, 0.15),
        rgba(0, 174, 239, 0.08) 50%,
        rgba(0, 174, 239, 0.03)
    );
    top: 0;
    left: 0;
}

/* ========= Layout ========= */

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    width: 100%;
}

/* ========= Text Section ========= */

.text-slider {
    position: relative;
    height: 90px;
    margin-bottom: 20px;
}

.hero-title {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(20px);
    text-shadow: 0 2px 14px rgba(0, 30, 55, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* ========= Location ========= */

.location {
    margin: 20px 0 40px 0;
    font-size: 1.1rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.location i {
    color: #ff9800;
}

/* ========= Features ========= */

.hero-features {
    margin-top: 30px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    transition: 0.3s ease;
    border-left: 4px solid #ff9800;
}

.feature:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(8px);
}

.feature i {
    font-size: 1.8rem;
    color: #ff9800;
}

.feature h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.feature p {
    font-size: 0.9rem;
    opacity: 0.85;
}







/* ///////////////////////// */





/* ========= Apply Box ========= */

.hero-form-container {
    max-width: min(450px, 90%);
    width: 100%;
    margin: 0 auto;
}

/* ===== Apply Card ===== */
.apply-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
    padding: clamp(20px, 4vw, 30px);
    border-radius: clamp(20px, 5vw, 32px);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s ease;
    width: 100%;
    max-width: min(400px, 95%);
    margin: clamp(20px, 5vw, 40px) auto;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Hover animation - disable on mobile */
@media (hover: hover) {
    .apply-box:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 30px 80px rgba(0,0,0,0.2);
    }
}

/* ===== Apply Button ===== */
.btn-apply {
    background: linear-gradient(135deg, #00AEEF, #0077b6);
    color: white;
    padding: clamp(14px, 3vw, 18px) clamp(30px, 6vw, 50px);
    border-radius: clamp(12px, 3vw, 16px);
    font-weight: 600;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    text-decoration: none;
    display: inline-block;
    transition: all 0.35s ease;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    width: auto;
    min-width: 160px;
    max-width: 100%;
    box-shadow: 0 8px 20px rgba(0,158,219,0.3);
}

/* Button shine effect */
.btn-apply::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );
    transition: 0.6s;
}

@media (hover: hover) {
    .btn-apply:hover::before {
        left: 120%;
    }

    .btn-apply:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,158,219,0.5);
        background: linear-gradient(135deg, #0077b6, #00AEEF);
    }
}

.btn-apply:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,158,219,0.4);
}

/* ===== Deadline Text ===== */
.deadline {
    margin-top: clamp(15px, 3vw, 20px);
    color: #4a5568;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.deadline i {
    color: #00AEEF;
    font-size: 1.1em;
}

.deadline strong {
    color: #00AEEF;
    font-weight: 700;
}

/* ===== Apply Card Inner Elements ===== */
.apply-box h3 {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    margin-bottom: clamp(10px, 2vw, 15px);
    color: #1a2b4c;
}

.apply-box p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    margin-bottom: clamp(15px, 3vw, 20px);
    color: #4a5568;
    line-height: 1.6;
}

.apply-box .apply-icon {
    font-size: clamp(2rem, 6vw, 3rem);
    color: #00AEEF;
    margin-bottom: clamp(10px, 2vw, 15px);
}

.apply-features {
    list-style: none;
    padding: 0;
    margin: clamp(15px, 3vw, 20px) 0;
    text-align: left;
}

.apply-features li {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
    margin-bottom: clamp(8px, 1.5vw, 12px);
    font-size: clamp(0.85rem, 2.2vw, 0.95rem);
    color: #2d3748;
}

.apply-features li i {
    color: #00AEEF;
    font-size: 1.1rem;
    min-width: 20px;
}

/* ========= LARGE DESKTOP (1200px+) ========= */
@media (min-width: 1200px) {
    .hero-form-container {
        max-width: 500px;
    }
    
    .apply-box {
        max-width: 420px;
        padding: 30px;
    }
    
    .btn-apply {
        font-size: 1.1rem;
        padding: 18px 50px;
    }
}

/* ========= DESKTOP (992px - 1199px) ========= */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-form-container {
        max-width: 400px;
    }
    
    .apply-box {
        max-width: 380px;
        padding: 25px;
    }
}

/* ========= TABLET (768px - 991px) ========= */
@media (min-width: 768px) and (max-width: 991px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-form-container {
        max-width: 450px;
        margin: 0 auto;
    }
    
    .apply-box {
        max-width: 400px;
        margin: 20px auto;
    }
    
    .text-slider {
        height: 60px;
    }
}

/* ========= MOBILE LARGE (576px - 767px) ========= */
@media (min-width: 576px) and (max-width: 767px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-form-container {
        max-width: 450px;
        margin: 20px auto 0;
    }
    
    .apply-box {
        max-width: 380px;
        padding: 22px;
        margin: 15px auto;
    }
    
    .btn-apply {
        min-width: 140px;
        padding: 14px 35px;
    }
    
    .text-slider {
        height: 55px;
    }
    
    .feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ========= MOBILE MEDIUM (480px - 575px) ========= */
@media (min-width: 480px) and (max-width: 575px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-form-container {
        max-width: 400px;
        margin: 15px auto 0;
    }
    
    .apply-box {
        max-width: 360px;
        padding: 20px;
        border-radius: 20px;
        margin: 10px auto;
    }
    
    .btn-apply {
        min-width: 130px;
        padding: 12px 30px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 250px;
    }
    
    .deadline {
        font-size: 0.85rem;
        flex-direction: row;
    }
    
    .text-slider {
        height: 50px;
    }
    
    .hero-title .slide-text {
        font-size: 1.8rem;
    }
}

/* ========= MOBILE SMALL (up to 479px) ========= */
@media (max-width: 479px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 0 15px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-form-container {
        max-width: 100%;
        margin: 10px auto 0;
    }
    
    .apply-box {
        max-width: 100%;
        padding: 18px 15px;
        border-radius: 18px;
        margin: 10px auto;
    }
    
    .btn-apply {
        min-width: 120px;
        padding: 12px 25px;
        font-size: 0.85rem;
        width: 100%;
        max-width: 220px;
        letter-spacing: 0.5px;
    }
    
    .deadline {
        font-size: 0.8rem;
        flex-direction: column;
        gap: 5px;
    }
    
    .deadline i {
        font-size: 1rem;
    }
    
    .text-slider {
        height: 45px;
    }
    
    .hero-title .slide-text {
        font-size: 1.5rem;
    }
    
    .apply-box h3 {
        font-size: 1.3rem;
    }
    
    .apply-box p {
        font-size: 0.85rem;
    }
    
    .apply-features li {
        font-size: 0.8rem;
    }
}

/* ========= EXTRA SMALL MOBILE (up to 360px) ========= */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.3rem;
    }
    
    .apply-box {
        padding: 15px 12px;
    }
    
    .btn-apply {
        padding: 10px 20px;
        font-size: 0.8rem;
        max-width: 200px;
    }
    
    .deadline {
        font-size: 0.75rem;
    }
    
    .hero-title .slide-text {
        font-size: 1.3rem;
    }
    
    .text-slider {
        height: 40px;
    }
}

/* ========= TOUCH DEVICE OPTIMIZATIONS ========= */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .btn-apply:hover {
        transform: none;
        box-shadow: 0 8px 20px rgba(0,158,219,0.3);
    }
    
    .apply-box:hover {
        transform: none;
        box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    }
    
    .btn-apply:active {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,158,219,0.4);
    }
}

/* ========= LANDSCAPE MODE OPTIMIZATIONS ========= */
@media (max-height: 600px) and (orientation: landscape) {
    .hero .container {
        padding: 20px 0;
    }
    
    .apply-box {
        margin: 10px auto;
        padding: 15px;
    }
    
    .apply-box .apply-icon {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }
    
    .apply-box h3 {
        font-size: 1.2rem;
        margin-bottom: 8px;
    }
    
    .apply-features {
        margin: 8px 0;
    }
    
    .apply-features li {
        margin-bottom: 5px;
    }
    
    .btn-apply {
        padding: 8px 20px;
    }
}

/* ========= DARK MODE SUPPORT ========= */
@media (prefers-color-scheme: dark) {
    .apply-box {
        background: linear-gradient(145deg, rgba(30,40,60,0.98), rgba(20,30,50,0.95));
        border: 1px solid rgba(255,255,255,0.1);
    }
    
    .apply-box h3 {
        color: #e2e8f0;
    }
    
    .apply-box p,
    .deadline,
    .apply-features li {
        color: #cbd5e0;
    }
    
    .btn-apply {
        background: linear-gradient(135deg, #00AEEF, #0095d9);
    }
}

/* ========= HIGH RESOLUTION SCREENS ========= */
@media (min-width: 1400px) {
    .hero-form-container {
        max-width: 550px;
    }
    
    .apply-box {
        max-width: 480px;
        padding: 35px;
    }
    
    .btn-apply {
        font-size: 1.2rem;
        padding: 18px 55px;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
}

/* ========= 4K SCREENS ========= */
@media (min-width: 2000px) {
    .hero-form-container {
        max-width: 600px;
    }
    
    .apply-box {
        max-width: 520px;
        padding: 40px;
    }
    
    .btn-apply {
        font-size: 1.3rem;
        padding: 20px 60px;
    }
}

/* ========= PRINT STYLES ========= */
@media print {
    .apply-box {
        box-shadow: none;
        border: 2px solid #00AEEF;
        background: white;
    }
    
    .btn-apply {
        background: white;
        color: #00AEEF;
        border: 2px solid #00AEEF;
        box-shadow: none;
    }
    
    .btn-apply::before {
        display: none;
    }
}









/* Destinations Section */
.destinations {
    padding: 80px 0;
    background-color: var(--light-color);
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 50px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.country-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid transparent;
}

.country-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.country-flag {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.country-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

.country-card p {
    color: var(--gray-color);
    margin-bottom: 20px;
}

.btn-learn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.btn-learn:hover {
    background-color: #0077b6;
}

/* Universities Section */
.universities {
    padding: 80px 0;
}

.section-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    padding: 15px 30px;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-color);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.tab-btn.active {
    color: var(--primary-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-content h3 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--dark-color);
}

.university-list,
.college-list {
    columns: 2;
    column-gap: 40px;
    list-style: none;
}

.university-list li,
.college-list li {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-color);
    position: relative;
    padding-left: 25px;
}

.university-list li::before,
.college-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Services Section */
.services {
    padding: 80px 0;
    background-color: var(--light-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.service-card p {
    color: var(--gray-color);
}

/* Quick Links Section */
.quick-links {
    padding: 80px 0;
}

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

.quick-link-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.quick-link-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.quick-link-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.quick-link-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

.quick-link-card p {
    color: var(--gray-color);
}

/* Footer */
.footer {
    background-color: #0077b6;
    color: #d6e4f0;
    padding: 60px 0 20px;
}

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

.footer-col h3,
.footer-col h4 {
    color: white;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after,
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--secondary-color);
}

.tagline {
    font-style: italic;
    margin: 15px 0;
    color: #d6e4f0;
}

.address,
.phone,
.whatsapp {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #d6e4f0;
    text-decoration: none;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: white;
    padding-left: 5px;
}

.contact-methods p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.18);
    color: white;
    border-radius: 50%;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: #ffffff;
    color: #0077b6;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: #d6e4f0;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: white;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.btn-view-all {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn-view-all:hover {
    background-color: #0077b6;
    transform: translateY(-3px);
}

.btn-view-all i {
    margin-left: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        gap: 40px;
    }
    
    .hero-content {
        padding-right: 0;
        text-align: center;
    }
    
    .hero h2 {
        font-size: 2.5rem;
    }
    
    .hero-form-container {
        width: 100%;
        max-width: 100%;
    }
    
    .hero .location {
        justify-content: center;
    }
    
    .feature {
        text-align: left;
    }
    
    .university-list,
    .college-list {
        columns: 1;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
        min-height: auto;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .apply-box {
        padding: 30px 20px;
    }
    
    .apply-box h3 {
        font-size: 1.8rem;
    }
    
    .whatsapp-notice {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: var(--shadow);
    }
    
    .main-nav.active {
        display: block;
    }
    
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-left: 3px solid var(--primary-color);
        display: none;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .section-tabs {
        flex-direction: column;
    }
    
    .tab-btn {
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .apply-box {
        padding: 20px;
    }
    
    .countries-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-links-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}

















/* ============= CHANNEL PARTNERS PAGE STYLES ============= */

/* Partner Intro */
.partner-intro {
    margin: 40px 0;
}

.partner-image {
    margin: 30px 0;
    text-align: center;
}

.partner-image .image-placeholder {
    background-color: var(--light-color);
    border-radius: 10px;
    padding: 60px 30px;
    max-width: 600px;
    margin: 0 auto;
}

.partner-image .image-placeholder i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.partner-benefits-overview h4 {
    color: var(--primary-color);
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.benefit {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.benefit:hover {
    background-color: #f8f9fa;
}

.benefit i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.benefit h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

/* Benefits Details */
.benefit-category {
    margin-bottom: 40px;
}

.benefit-category h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-list {
    list-style: none;
    padding-left: 20px;
}

.benefit-list li {
    margin-bottom: 15px;
    padding-left: 10px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.benefit-list li i {
    color: var(--accent-color);
    margin-top: 3px;
}

.benefit-list strong {
    color: var(--dark-color);
}

/* Commission Structure */
.commission-structure {
    margin-top: 50px;
}

.commission-structure h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.commission-table {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.commission-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
}

.commission-row.header {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

.commission-row:not(.header):hover {
    background-color: #f8f9fa;
}

.commission-row .col {
    padding: 15px;
    display: flex;
    align-items: center;
}

/* Eligibility Section */
.eligibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.eligibility-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.eligibility-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.eligibility-icon {
    width: 80px;
    height: 80px;
    background-color: var(--light-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.eligibility-icon i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.eligibility-card h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.requirements-box {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-top: 40px;
}

.requirements-box h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.requirements-box ul {
    list-style: none;
    padding-left: 20px;
}

.requirements-box li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.requirements-box li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Registration Form */
.registration-form-container {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    margin-top: 40px;
}

.partner-form .form-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.partner-form .form-section:last-child {
    border-bottom: none;
}

.partner-form .form-section h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.partner-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .partner-form .form-row {
        grid-template-columns: 1fr;
    }
}

.partner-form .form-group {
    margin-bottom: 20px;
}

.partner-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}

.partner-form input,
.partner-form select,
.partner-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: var(--transition);
}

.partner-form input:focus,
.partner-form select:focus,
.partner-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.partner-form textarea {
    min-height: 100px;
    resize: vertical;
}

.terms-box {
    background-color: var(--light-color);
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
}

.terms-box ul {
    list-style: none;
    padding-left: 20px;
    margin: 15px 0;
}

.terms-box li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.terms-box li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    line-height: 1;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0;
}

.checkbox-group input {
    width: auto;
    margin-top: 5px;
}

.form-submit {
    text-align: center;
    margin-top: 40px;
}

.btn-submit-partner {
    background: linear-gradient(135deg, #00AEEF 0%, #0077b6 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: var(--transition);
}

.btn-submit-partner:hover {
    background: linear-gradient(135deg, #0077b6 0%, #00AEEF 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 119, 182, 0.3);
}

.form-note {
    margin-top: 20px;
    padding: 15px;
    background-color: #e8f4ff;
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--dark-color);
}

.form-note i {
    color: var(--primary-color);
    margin-right: 10px;
}

/* Steps Timeline */
.steps-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.step {
    text-align: center;
}

.step-icon {
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
}

.step h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

/* Contact Query */
.contact-query h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-details {
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-details p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1.1rem;
}

.contact-details i {
    color: var(--primary-color);
}

.btn-contact {
    display: inline-block;
    background-color: var(--secondary-color);
    color: white;
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: var(--transition);
}

.btn-contact:hover {
    background-color: #d34513;
}

/* Commission Table Responsive */
@media (max-width: 768px) {
    .commission-row {
        grid-template-columns: 1fr;
    }
    
    .commission-row.header {
        display: none;
    }
    
    .commission-row .col {
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .commission-row .col:first-child {
        background-color: var(--light-color);
        font-weight: bold;
    }
}

/* Registration Form Responsive */
@media (max-width: 576px) {
    .registration-form-container {
        padding: 20px;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .eligibility-grid {
        grid-template-columns: 1fr;
    }
    
    .steps-timeline {
        grid-template-columns: 1fr;
    }
}










/* ============= LOGIN BUTTON STYLES ============= */

.login-dropdown {
    margin-left: auto;
    position: relative;
}

.login-btn {
    background-color: var(--primary-color);
    color: white !important;
    border-radius: 5px;
    padding: 10px 20px !important;
    margin: 0 10px;
    transition: var(--transition);
    border: 2px solid transparent;
}

.login-btn:hover {
    background-color: #0077b6;
    border-color: white;
    transform: translateY(-2px);
}

.login-btn i:first-child {
    margin-right: 8px;
}

.login-btn i:last-child {
    margin-left: 5px;
    font-size: 0.8rem;
}

/* Login Dropdown Menu */
.login-dropdown .login-menu {
    min-width: 200px;   /* was 280px — sized for the old 4-item flex row; the menu now holds Student + Ambassador (content ~175-205px), so 280 left ~80px of empty panel */
    right: 0;
    left: auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.login-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px !important;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.login-option:hover {
    background-color: #f8f9fa;
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.login-option i {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
}

.login-option[data-role="student"] i {
    background-color: #28a745; /* Green for students */
}

.login-option[data-role="employee"] i {
    background-color: #0077b6; /* Blue for employees */
}

.login-option[data-role="agent"] i {
    background-color: #6f42c1; /* Purple for agents */
}

.login-option[data-role="admin"] i {
    background-color: #dc3545; /* Red for admin */
}

.login-title {
    display: block;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 1rem;
}

.login-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-color);
    margin-top: 3px;
}

/* Mobile Login Button */
@media (max-width: 768px) {
    .login-dropdown {
        margin-left: 0;
        width: 100%;
        order: -1; /* Move to top on mobile */
    }
    
    .login-btn {
        width: 100%;
        margin: 10px 0;
        text-align: center;
        border-radius: 8px;
    }
    
    .login-dropdown .login-menu {
        position: static;
        box-shadow: none;
        border-left: 3px solid var(--primary-color);
        margin: 10px 0;
        min-width: 100%;
    }
    
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li {
        width: 100%;
    }
    
    .nav-list > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color);
    }
}

/* Login Modal Styles */
.login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.login-modal.active {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--gray-color);
    cursor: pointer;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--dark-color);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header i {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.student-login .modal-header i {
    color: #28a745;
}

.employee-login .modal-header i {
    color: #0077b6;
}

.agent-login .modal-header i {
    color: #6f42c1;
}

.admin-login .modal-header i {
    color: #dc3545;
}

.modal-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.login-form {
    margin-top: 20px;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}

.login-form input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: var(--transition);
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.btn-login {
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 10px;
}

.btn-login:hover {
    background-color: #0077b6;
}

.login-links {
    margin-top: 20px;
    text-align: center;
}

.login-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.login-links a:hover {
    text-decoration: underline;
}

.forgot-password {
    display: block;
    margin-top: 10px;
}















/* ============= HERO SECTION WITH BACKGROUND IMAGE ============= */
.hero {
    background: none; /* Remove gradient background */
    background-image: url('../images/herosection.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
    padding: 60px 0;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

/* Dark Overlay for better text readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.12) 100%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Left side text content */
.hero-content {
    flex: 1;
    padding-right: 20px;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero .location {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.hero .location i {
    color: var(--secondary-color);
}

/* Hero Features */
.hero-features {
    margin-top: 40px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    background: rgba(0, 174, 239, 0.28);
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--secondary-color);
    transition: var(--transition);
}

.feature:hover {
    background: rgba(0, 174, 239, 0.40);
    transform: translateX(10px);
}

.feature i {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-top: 5px;
    flex-shrink: 0;
}

.feature h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: white;
}

.feature p {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.85);
}



/* Simple Apply Button - Medium Size */
.btn-apply-simple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #d34513 100%);
    color: white;
    text-decoration: none;
    padding: 12px 25px;  /* Haddii hore 20px 40px */
    border-radius: 40px;   /* Haddii hore 50px */
    font-size: 1rem;       /* Haddii hore 1.3rem */
    font-weight: 500;      /* Haddii hore bold */
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(233, 84, 32, 0.3);  /* Haddii hore 0 10px 20px */
    border: 2px solid transparent;
    width: auto;           /* Haddii hore 100% */
    min-width: 200px;      /* Cabbir ugu yaraan */
   
}

.btn-apply-simple:hover {
    background: linear-gradient(135deg, #d34513 0%, var(--secondary-color) 100%);
    transform: translateY(-3px);  /* Haddii hore -5px */
    box-shadow: 0 8px 20px rgba(233, 84, 32, 0.4);
    border-color: white;
}

.btn-apply-simple i:first-child {
    font-size: 1.1rem;     /* Haddii hore 1.5rem */
    animation: float 2s ease-in-out infinite;
}

.btn-apply-simple i:last-child {
    font-size: 0.9rem;     /* Haddii hore 1.2rem */
    transition: transform 0.3s ease;
}

.btn-apply-simple:hover i:last-child {
    transform: translateX(8px);  /* Haddii hore 10px */
}

/* Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);  /* Haddii hore -5px */
    }
}

/* Tablet Responsive */
@media (max-width: 768px) {
    .btn-apply-simple {
        padding: 10px 20px;
        font-size: 0.95rem;
        gap: 8px;
        min-width: 180px;
    }
    
    .btn-apply-simple i:first-child {
        font-size: 1rem;
    }
    
    .btn-apply-simple i:last-child {
        font-size: 0.85rem;
    }
}

/* Mobile Responsive */
@media (max-width: 576px) {
    .btn-apply-simple {
        padding: 8px 16px;
        font-size: 0.9rem;
        gap: 6px;
        min-width: 160px;
        border-radius: 30px;
    }
    
    .btn-apply-simple i:first-child {
        font-size: 0.9rem;
    }
    
    .btn-apply-simple i:last-child {
        font-size: 0.8rem;
    }
}

/* Responsive Design for Hero */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        gap: 40px;
    }
    
    .hero-content {
        padding-right: 0;
        text-align: center;
    }
    
    .hero h2 {
        font-size: 2.5rem;
    }
    
    .hero-form-container {
        width: 100%;
        max-width: 100%;
    }
    
    .hero .location {
        justify-content: center;
    }
    
    .feature {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
        min-height: auto;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .apply-box {
        padding: 30px 20px;
    }
    
    .apply-box h3 {
        font-size: 1.8rem;
    }
    
    .whatsapp-notice {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .apply-box {
        padding: 20px;
    }
}














/* 
/////////////////////////////////////////////////// RESPONSIVE
////////////////////////////////////////////////////// */

/* =========================================== */
/* ===== RESPONSIVE DESIGN - ALL DEVICES ===== */
/* =========================================== */

/* Large Desktop (1200px+) */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    .hero h2 {
        font-size: 2.5rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero .feature {
        padding: 15px;
    }
}

/* Desktop & Tablet (992px) */
@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    /* Header */
    .header .container {
        padding: 8px 15px;
    }
    
    .nav-list > li > a {
        padding: 5px 8px;
        font-size: 0.75rem;
    }
    
    .dropdown-menu a {
        padding: 5px 12px;
        font-size: 0.7rem;
    }
    
    .logo h1 {
        font-size: 1.3rem;
    }
    
    .logo p {
        font-size: 0.65rem;
    }
    
    /* Hero Section */
    .hero .container {
        flex-direction: column;
        gap: 30px;
    }
    
    .hero-content {
        text-align: center;
        padding-right: 0;
    }
    
    .hero .location {
        justify-content: center;
    }
    
    .hero-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .feature {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .feature i {
        margin-bottom: 10px;
    }
    
    .hero-form-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Partner Universities Slider */
    .university-item {
        width: 240px;
        min-height: 260px;
        padding: 20px 12px;
    }
    
    .university-icon {
        width: 80px;
        height: 80px;
    }
    
    .uni-name {
        font-size: 1rem;
    }
    
    /* Destinations Grid */
    .countries-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    /* Quick Links Grid */
    .quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Tablet & Large Mobile (768px) */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    /* Header - Mobile Menu */
    .mobile-menu-btn {
        display: block !important;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--primary-color);
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 15px;
        z-index: 999;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .main-nav.active {
        display: block;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 5px;
    }
    
    .nav-list > li > a {
        padding: 12px 15px;
        font-size: 0.9rem;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        padding: 0 0 0 20px;
        margin: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: auto;
        border-left: 3px solid var(--primary-color);
        margin-bottom: 10px;
    }
    
    .dropdown-menu a {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
    
    .login-area {
        margin: 15px 0 0 0;
        width: 100%;
    }
    
    .login-dropdown {
        width: 100%;
    }
    
    .login-btn {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }
    
    .login-menu {
        position: static;
        width: 100%;
        margin-top: 5px;
        box-shadow: none;
        border-left: 3px solid var(--primary-color);
    }
    
    /* Hero Section */
    .hero {
        min-height: auto;
        padding: 40px 0;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .feature {
        flex-direction: row;
        text-align: left;
        padding: 12px;
    }
    
    .feature i {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    
    .apply-box {
        padding: 20px;
    }
    
    .btn-apply {
        padding: 12px 30px;
        font-size: 1rem;
    }
    
    /* Partner Universities Slider */
    .partner-universities {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    
    .university-item {
        width: 200px;
        min-height: 240px;
        padding: 15px 10px;
    }
    
    .university-icon {
        width: 70px;
        height: 70px;
        border-width: 2px;
        padding: 3px;
    }
    
    .uni-name {
        font-size: 0.95rem;
    }
    
    .uni-campus {
        font-size: 0.8rem;
    }
    
    .uni-desc {
        font-size: 0.7rem;
    }
    
    .slider-container::before,
    .slider-container::after {
        width: 50px;
    }
    
    /* Destinations Grid */
    .countries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .country-card {
        padding: 20px;
    }
    
    .country-flag {
        font-size: 2.5rem;
    }
    
    .country-card h3 {
        font-size: 1.2rem;
    }
    
    .btn-learn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    
    /* Universities Section */
    .section-tabs {
        flex-direction: column;
        gap: 10px;
    }
    
    .tab-btn {
        width: 100%;
        text-align: center;
        padding: 12px;
    }
    
    .university-list,
    .college-list {
        columns: 1;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .service-card {
        padding: 20px 15px;
    }
    
    .service-card i {
        font-size: 2rem;
    }
    
    .service-card h3 {
        font-size: 1rem;
    }
    
    .service-card p {
        font-size: 0.85rem;
    }
    
    /* Quick Links Grid */
    .quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .quick-link-card {
        padding: 20px 15px;
    }
    
    .quick-link-card i {
        font-size: 2rem;
    }
    
    .quick-link-card h3 {
        font-size: 1rem;
    }
    
    .quick-link-card p {
        font-size: 0.85rem;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-col h3::after,
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .address,
    .phone,
    .whatsapp {
        justify-content: center;
    }
    
    .contact-methods p {
        justify-content: center;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* Mobile (576px) */
@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }
    
    /* Header */
    .site-logo {
        width: 500px;
        height:auto;
    }
    
    
    .logo h1 {
        font-size: 1rem;
    }
    
    .logo p {
        font-size: 0.6rem;
    }
    
    .mobile-menu-btn {
        font-size: 1.3rem;
    }
    
    /* Hero Section */
    .hero h2 {
        font-size: 1.5rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero .location {
        font-size: 0.9rem;
    }
    
    .feature {
        padding: 10px;
    }
    
    .feature i {
        font-size: 1.2rem;
    }
    
    .feature h4 {
        font-size: 0.95rem;
    }
    
    .feature p {
        font-size: 0.8rem;
    }
    
    .apply-box {
        padding: 15px;
    }
    
    .btn-apply {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .deadline {
        font-size: 0.8rem;
    }
    
    /* Partner Universities Slider */
    .university-item {
        width: 160px;
        min-height: 200px;
        padding: 12px 8px;
    }
    
    .university-icon {
        width: 60px;
        height: 60px;
        border-width: 2px;
        padding: 2px;
        margin-bottom: 8px;
    }
    
    .uni-name {
        font-size: 0.85rem;
    }
    
    .uni-campus {
        font-size: 0.7rem;
    }
    
    .uni-desc {
        font-size: 0.65rem;
    }
    
    /* Destinations Grid */
    .countries-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Quick Links Grid */
    .quick-links-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Footer */
    .footer-col h3 {
        font-size: 1.3rem;
    }
    
    .footer-col h4 {
        font-size: 1.1rem;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-links a {
        font-size: 0.8rem;
    }
}

/* Small Mobile (400px) */
@media (max-width: 400px) {
    .hero h2 {
        font-size: 1.3rem;
    }
    
    .hero-title {
        font-size: 1.3rem;
    }
    
    .feature {
        flex-direction: column;
        text-align: center;
    }
    
    .feature i {
        margin-bottom: 5px;
    }
    
    .university-item {
        width: 140px;
        min-height: 180px;
    }
    
    .university-icon {
        width: 50px;
        height: 50px;
    }
    
    .btn-apply {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}



/* 
//////////////////////////////////////////////////////










////////////////////////////////////////////////////////////////////// */



/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #0077b6;
    --secondary-color: #e95420;
    --accent-color: #0e8420;
    --dark-color: #333;
    --light-color: #f8f9fa;
    --gray-color: #6c757d;
    --border-color: #ddd;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

body {
    /* Segoe UI retained as first fallback: a failed font load lands on what
       the site rendered before, not on generic sans-serif. */
    font-family: 'Figtree', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    background-color: #fff;
}

/* Smooth in-page anchor navigation with sticky-header offset (site-wide).
   The header is position:sticky (~88px desktop / ~69px mobile); scroll-margin-top
   keeps a target section's heading clear of it when the page jumps/scrolls to its
   #id (on click or on page load via a #hash). Pages with their own scroll-margin-top
   (e.g. legal, Scholarships, study-abroad) override this baseline. */
html {
    scroll-behavior: smooth;
}
[id] {
    scroll-margin-top: 100px;
}
@media (max-width: 768px) {
    [id] {
        scroll-margin-top: 80px;
    }
}

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



/* ===== HEADER ZOOM OUT (15%) - BASED ON YOUR ORIGINAL CSS ===== */

.header {
    background-color: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0; /* Keep original */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px; /* Reduced from 15px 20px */
}

/* Logo Area */
.logo h1 {
    color: var(--primary-color);
    font-size: 1.5rem; /* Reduced from 1.8rem */
    margin-bottom: 3px; /* Reduced from 5px */
}

.logo p {
    color: var(--gray-color);
    font-size: 0.75rem; /* Reduced from 0.9rem */
}

/* Navigation */
.main-nav > ul { /* `> ul`: only the top nav-list flexes, not the nested .login-menu dropdown (else Student/Ambassador go side-by-side) */
    display: flex;
    list-style: none;
}

.nav-list > li {
    position: relative;
}

.nav-list > li > a {
    display: block;
    padding: 6px 10px; /* Reduced from 10px 15px */
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
    font-size: 0.85rem; /* Smaller text */
    transition: var(--transition);
}

.nav-list > li > a:hover,
.nav-list > li > a.active {
    color: #1a5fb4;
}

.nav-list > li > a i {
    margin-left: 3px; /* Reduced from 5px */
    font-size: 0.7rem; /* Reduced from 0.8rem */
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px; /* Reduced from 220px */
    border-radius: 5px; /* Reduced from 6px */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* Lighter shadow */
    padding: 5px 0; /* Reduced from 8px */
    margin-top: 5px; /* Reduced from 8px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px); /* Reduced from 10px */
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

/* Show on hover */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* List */
.dropdown-menu li {
    list-style: none;
}

/* Links */
.dropdown-menu a {
    display: block;
    padding: 6px 15px; /* Reduced from 10px 20px */
    text-decoration: none;
    color: #333;
    font-size: 0.8rem; /* Reduced from 15px */
    transition: background 0.2s ease;
}

/* Hover Effect */
.dropdown-menu a:hover {
    background: #f2f2f2;
    color: #000;
}

/* Login Area (from your existing code) */
.login-area {
    margin-left: 10px; /* Reduced from 20px */
}

.login-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 5px 12px; /* Reduced from 8px 15px */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem; /* Smaller */
    display: flex;
    align-items: center;
    gap: 5px;
}

.login-btn i {
    font-size: 0.75rem;
}

.login-btn:hover {
    background: #005f92;
}

.login-dropdown {
    position: relative;
    display: inline-block;
}

.login-menu {
    position: absolute;
    right: 0;
    top: 110%;
    background: #fff;
    min-width: 140px; /* Reduced from 160px */
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    border-radius: 4px;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.login-dropdown:hover .login-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.login-menu li a {
    display: block;
    padding: 5px 12px; /* Reduced from 8px 15px */
    text-decoration: none;
    color: #333;
    font-size: 0.75rem; /* Smaller */
}

.login-menu li a:hover {
    background: #f2f2f2;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--primary-color);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .header .container {
        padding: 8px 15px;
    }
    
    .nav-list > li > a {
        padding: 5px 8px;
        font-size: 0.8rem;
    }
    
    .dropdown-menu {
        min-width: 160px;
    }
    
    .dropdown-menu a {
        padding: 5px 12px;
        font-size: 0.75rem;
    }
    
    .logo h1 {
        font-size: 1.3rem;
    }
    
    .logo p {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .header .container {
        padding: 8px 15px;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .main-nav {
        display: none;
    }
    
    .main-nav.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 15px;
        z-index: 999;
    }
    
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li > a {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .dropdown-menu {
        position: static;
        box-shadow: none;
        padding: 0 0 0 20px;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: auto;
    }
    
    .login-area {
        margin: 10px 0 0 0;
    }
    
    .login-dropdown {
        width: 100%;
    }
    
    .login-btn {
        width: 100%;
        justify-content: center;
    }
    
    .login-menu {
        position: static;
        width: 100%;
        margin-top: 5px;
    }
    
    .logo h1 {
        font-size: 1.2rem;
    }
    
    .logo p {
        font-size: 0.65rem;
    }
}

@media (max-width: 576px) {
    .header .container {
        padding: 5px 10px;
    }
    
    .logo h1 {
        font-size: 1.1rem;
    }
    
    .logo p {
        font-size: 0.6rem;
    }
    
    .login-btn {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
}










/* ================= HERO SECTION ================= */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

/* ========= Background Slider ========= */

.hero-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, transform 8s ease-in-out;
    transform: scale(1);
}

.slide.active {
    opacity: 1;
    transform: scale(1.08); /* Soft zoom */
}

/* ========= Modern Gradient Overlay ========= */

.hero::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 174, 239, 0.15),
        rgba(0, 174, 239, 0.08) 50%,
        rgba(0, 174, 239, 0.03)
    );
    top: 0;
    left: 0;
}

/* ========= Layout ========= */

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    width: 100%;
}

/* ========= Text Section ========= */

.text-slider {
    position: relative;
    height: 90px;
    margin-bottom: 20px;
}

.hero-title {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(20px);
    text-shadow: 0 2px 14px rgba(0, 30, 55, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* ========= Location ========= */

.location {
    margin: 20px 0 40px 0;
    font-size: 1.1rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.location i {
    color: #ff9800;
}

/* ========= Features ========= */

.hero-features {
    margin-top: 30px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    transition: 0.3s ease;
    border-left: 4px solid #ff9800;
}

.feature:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(8px);
}

.feature i {
    font-size: 1.8rem;
    color: #ff9800;
}

.feature h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.feature p {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* ========= Apply Box ========= */

.hero-form-container {
    max-width: 450px;
    width: 100%;
}



/* ===== Apply Card ===== */
.apply-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
    padding: 25px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    backdrop-filter: blur(20px);
    transition: all 0.4s ease;
    max-width: 340px;
    margin: 40px auto;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Hover animation */
.apply-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

/* ===== Apply Button ===== */
.btn-apply {
    background: linear-gradient(135deg, #00AEEF, #00AEEF);
    color: white;
    padding: 16px 40px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.35s ease;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

/* Button shine effect */
.btn-apply::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );
    transition: 0.6s;
}

.btn-apply:hover::before {
    left: 120%;
}

.btn-apply:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(99,102,241,0.5);
}

/* ===== Deadline Text ===== */
.deadline {
    margin-top: 18px;
    color: #666;
    font-size: 0.95rem;
    font-weight: 500;
}

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

@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }

    .hero-title {
        font-size: 2.4rem;
    }

    .text-slider {
        height: 70px;
    }

    .hero-form-container {
        margin-top: 40px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}










/* Destinations Section */
.destinations {
    padding: 80px 0;
    background-color: var(--light-color);
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 50px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.country-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid transparent;
}

.country-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.country-flag {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.country-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

.country-card p {
    color: var(--gray-color);
    margin-bottom: 20px;
}

.btn-learn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.btn-learn:hover {
    background-color: #0077b6;
}

/* Universities Section */
.universities {
    padding: 80px 0;
}

.section-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    padding: 15px 30px;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-color);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.tab-btn.active {
    color: var(--primary-color);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-content h3 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--dark-color);
}

.university-list,
.college-list {
    columns: 2;
    column-gap: 40px;
    list-style: none;
}

.university-list li,
.college-list li {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-color);
    position: relative;
    padding-left: 25px;
}

.university-list li::before,
.college-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Services Section */
.services {
    padding: 80px 0;
    background-color: var(--light-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: white;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.service-card p {
    color: var(--gray-color);
}

/* Quick Links Section */
.quick-links {
    padding: 80px 0;
}

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

.quick-link-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

.quick-link-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.quick-link-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.quick-link-card h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

.quick-link-card p {
    color: var(--gray-color);
}

/* Footer */
.footer {
    background-color: #0077b6;
    color: #d6e4f0;
    padding: 60px 0 20px;
}

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

.footer-col h3,
.footer-col h4 {
    color: white;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after,
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--secondary-color);
}

.tagline {
    font-style: italic;
    margin: 15px 0;
    color: #d6e4f0;
}

.address,
.phone,
.whatsapp {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #d6e4f0;
    text-decoration: none;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: white;
    padding-left: 5px;
}

.contact-methods p {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.18);
    color: white;
    border-radius: 50%;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: #ffffff;
    color: #0077b6;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    color: #d6e4f0;
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: white;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.btn-view-all {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.btn-view-all:hover {
    background-color: #0077b6;
    transform: translateY(-3px);
}

.btn-view-all i {
    margin-left: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        gap: 40px;
    }
    
    .hero-content {
        padding-right: 0;
        text-align: center;
    }
    
    .hero h2 {
        font-size: 2.5rem;
    }
    
    .hero-form-container {
        width: 100%;
        max-width: 100%;
    }
    
    .hero .location {
        justify-content: center;
    }
    
    .feature {
        text-align: left;
    }
    
    .university-list,
    .college-list {
        columns: 1;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
        min-height: auto;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .apply-box {
        padding: 30px 20px;
    }
    
    .apply-box h3 {
        font-size: 1.8rem;
    }
    
    .whatsapp-notice {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: var(--shadow);
    }
    
    .main-nav.active {
        display: block;
    }
    
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-left: 3px solid var(--primary-color);
        display: none;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .section-tabs {
        flex-direction: column;
    }
    
    .tab-btn {
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .apply-box {
        padding: 20px;
    }
    
    .countries-grid {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-links-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}

















/* ============= CHANNEL PARTNERS PAGE STYLES ============= */

/* Partner Intro */
.partner-intro {
    margin: 40px 0;
}

.partner-image {
    margin: 30px 0;
    text-align: center;
}

.partner-image .image-placeholder {
    background-color: var(--light-color);
    border-radius: 10px;
    padding: 60px 30px;
    max-width: 600px;
    margin: 0 auto;
}

.partner-image .image-placeholder i {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.partner-benefits-overview h4 {
    color: var(--primary-color);
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.benefit {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.benefit:hover {
    background-color: #f8f9fa;
}

.benefit i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.benefit h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

/* Benefits Details */
.benefit-category {
    margin-bottom: 40px;
}

.benefit-category h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-list {
    list-style: none;
    padding-left: 20px;
}

.benefit-list li {
    margin-bottom: 15px;
    padding-left: 10px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.benefit-list li i {
    color: var(--accent-color);
    margin-top: 3px;
}

.benefit-list strong {
    color: var(--dark-color);
}

/* Commission Structure */
.commission-structure {
    margin-top: 50px;
}

.commission-structure h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.commission-table {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.commission-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
}

.commission-row.header {
    background-color: var(--primary-color);
    color: white;
    font-weight: bold;
}

.commission-row:not(.header):hover {
    background-color: #f8f9fa;
}

.commission-row .col {
    padding: 15px;
    display: flex;
    align-items: center;
}

/* Eligibility Section */
.eligibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.eligibility-card {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.eligibility-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.eligibility-icon {
    width: 80px;
    height: 80px;
    background-color: var(--light-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.eligibility-icon i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.eligibility-card h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--dark-color);
}

.requirements-box {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    margin-top: 40px;
}

.requirements-box h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.requirements-box ul {
    list-style: none;
    padding-left: 20px;
}

.requirements-box li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.requirements-box li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Registration Form */
.registration-form-container {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: var(--shadow);
    margin-top: 40px;
}

.partner-form .form-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
}

.partner-form .form-section:last-child {
    border-bottom: none;
}

.partner-form .form-section h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.partner-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .partner-form .form-row {
        grid-template-columns: 1fr;
    }
}

.partner-form .form-group {
    margin-bottom: 20px;
}

.partner-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}

.partner-form input,
.partner-form select,
.partner-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: var(--transition);
}

.partner-form input:focus,
.partner-form select:focus,
.partner-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.partner-form textarea {
    min-height: 100px;
    resize: vertical;
}

.terms-box {
    background-color: var(--light-color);
    padding: 25px;
    border-radius: 10px;
    margin-top: 20px;
}

.terms-box ul {
    list-style: none;
    padding-left: 20px;
    margin: 15px 0;
}

.terms-box li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.terms-box li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
    line-height: 1;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 15px 0;
}

.checkbox-group input {
    width: auto;
    margin-top: 5px;
}

.form-submit {
    text-align: center;
    margin-top: 40px;
}

.btn-submit-partner {
    background: linear-gradient(135deg, #00AEEF 0%, #0077b6 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: var(--transition);
}

.btn-submit-partner:hover {
    background: linear-gradient(135deg, #0077b6 0%, #00AEEF 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 119, 182, 0.3);
}

.form-note {
    margin-top: 20px;
    padding: 15px;
    background-color: #e8f4ff;
    border-radius: 5px;
    font-size: 0.9rem;
    color: var(--dark-color);
}

.form-note i {
    color: var(--primary-color);
    margin-right: 10px;
}

/* Steps Timeline */
.steps-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.step {
    text-align: center;
}

.step-icon {
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
}

.step h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--dark-color);
}

/* Contact Query */
.contact-query h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-details {
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-details p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1.1rem;
}

.contact-details i {
    color: var(--primary-color);
}

.btn-contact {
    display: inline-block;
    background-color: var(--secondary-color);
    color: white;
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: var(--transition);
}

.btn-contact:hover {
    background-color: #d34513;
}

/* Commission Table Responsive */
@media (max-width: 768px) {
    .commission-row {
        grid-template-columns: 1fr;
    }
    
    .commission-row.header {
        display: none;
    }
    
    .commission-row .col {
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .commission-row .col:first-child {
        background-color: var(--light-color);
        font-weight: bold;
    }
}

/* Registration Form Responsive */
@media (max-width: 576px) {
    .registration-form-container {
        padding: 20px;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .eligibility-grid {
        grid-template-columns: 1fr;
    }
    
    .steps-timeline {
        grid-template-columns: 1fr;
    }
}










/* ============= LOGIN BUTTON STYLES ============= */

.login-dropdown {
    margin-left: auto;
    position: relative;
}

.login-btn {
    background-color: var(--primary-color);
    color: white !important;
    border-radius: 5px;
    padding: 10px 20px !important;
    margin: 0 10px;
    transition: var(--transition);
    border: 2px solid transparent;
}

.login-btn:hover {
    background-color: #0077b6;
    border-color: white;
    transform: translateY(-2px);
}

.login-btn i:first-child {
    margin-right: 8px;
}

.login-btn i:last-child {
    margin-left: 5px;
    font-size: 0.8rem;
}

/* Login Dropdown Menu */
.login-dropdown .login-menu {
    min-width: 200px;   /* was 280px — sized for the old 4-item flex row; the menu now holds Student + Ambassador (content ~175-205px), so 280 left ~80px of empty panel */
    right: 0;
    left: auto;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.login-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px !important;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.login-option:hover {
    background-color: #f8f9fa;
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.login-option i {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
}

.login-option[data-role="student"] i {
    background-color: #28a745; /* Green for students */
}

.login-option[data-role="employee"] i {
    background-color: #0077b6; /* Blue for employees */
}

.login-option[data-role="agent"] i {
    background-color: #6f42c1; /* Purple for agents */
}

.login-option[data-role="admin"] i {
    background-color: #dc3545; /* Red for admin */
}

.login-title {
    display: block;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 1rem;
}

.login-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-color);
    margin-top: 3px;
}

/* Mobile Login Button */
@media (max-width: 768px) {
    .login-dropdown {
        margin-left: 0;
        width: 100%;
        order: -1; /* Move to top on mobile */
    }
    
    .login-btn {
        width: 100%;
        margin: 10px 0;
        text-align: center;
        border-radius: 8px;
    }
    
    .login-dropdown .login-menu {
        position: static;
        box-shadow: none;
        border-left: 3px solid var(--primary-color);
        margin: 10px 0;
        min-width: 100%;
    }
    
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li {
        width: 100%;
    }
    
    .nav-list > li > a {
        padding: 15px 20px;
        border-bottom: 1px solid var(--border-color);
    }
}

/* Login Modal Styles */
.login-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.login-modal.active {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    color: var(--gray-color);
    cursor: pointer;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--dark-color);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header i {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.student-login .modal-header i {
    color: #28a745;
}

.employee-login .modal-header i {
    color: #0077b6;
}

.agent-login .modal-header i {
    color: #6f42c1;
}

.admin-login .modal-header i {
    color: #dc3545;
}

.modal-header h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.login-form {
    margin-top: 20px;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}

.login-form input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: var(--transition);
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.btn-login {
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 10px;
}

.btn-login:hover {
    background-color: #0077b6;
}

.login-links {
    margin-top: 20px;
    text-align: center;
}

.login-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.login-links a:hover {
    text-decoration: underline;
}

.forgot-password {
    display: block;
    margin-top: 10px;
}















/* ============= HERO SECTION WITH BACKGROUND IMAGE ============= */
.hero {
    background: none; /* Remove gradient background */
    background-image: url('../images/herosection.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
    padding: 60px 0;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

/* Dark Overlay for better text readability */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.12) 100%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Left side text content */
.hero-content {
    flex: 1;
    padding-right: 20px;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero .location {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.hero .location i {
    color: var(--secondary-color);
}

/* Hero Features */
.hero-features {
    margin-top: 40px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    background: rgba(0, 174, 239, 0.28);
    backdrop-filter: blur(5px);
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--secondary-color);
    transition: var(--transition);
}

.feature:hover {
    background: rgba(0, 174, 239, 0.40);
    transform: translateX(10px);
}

.feature i {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-top: 5px;
    flex-shrink: 0;
}

.feature h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: white;
}

.feature p {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.85);
}



/* Simple Apply Button - Medium Size */
/* ===== Apply Button - Small Size (Like WhatsApp) ===== */
/* ===== Apply Box - Fixed on Right Side ===== */
.hero-form-container {
    position: fixed;
    bottom: 100px;  /* Kor u dhaqaaji meesha uu ku fadhiyo WhatsApp-ka */
    right: 30px;    /* Gidaarka midig ku dhegan */
    z-index: 9998;  /* WhatsApp-ku waa 9999, apply box-ku ha ka hooseeyo */
    width: auto;
    max-width: 240px;
}

.hero-form-container .apply-box {
    padding: 12px !important;
    max-width: 220px !important;
    margin: 0 !important;  /* Remove auto margin */
    background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    animation: slideInRight 0.5s ease;
}

/* Animation for entrance */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-form-container .btn-apply {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    border-radius: 30px !important;
    background: linear-gradient(135deg, #00AEEF, #0077b6) !important;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.2);
}

.hero-form-container .btn-apply i {
    font-size: 0.85rem !important;
    margin-right: 6px;
}

.hero-form-container .deadline {
    font-size: 0.75rem !important;
    margin-top: 8px !important;
    color: #555;
    text-align: center;
    font-weight: 500;
}

.hero-form-container .deadline i {
    font-size: 0.7rem !important;
    margin-right: 4px;
    color: #ff9800;
}

/* Pulse effect (optional) */
.hero-form-container .apply-box {
    animation: slideInRight 0.5s ease, pulse-gentle 2s infinite;
}

@keyframes pulse-gentle {
    0% {
        box-shadow: 0 15px 35px rgba(0, 158, 219, 0.2);
    }
    50% {
        box-shadow: 0 20px 45px rgba(0, 158, 219, 0.4);
    }
    100% {
        box-shadow: 0 15px 35px rgba(0, 158, 219, 0.2);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-form-container {
        bottom: 80px;  /* Higher on mobile to avoid WhatsApp button */
        right: 15px;
        max-width: 200px;
    }
    
    .hero-form-container .apply-box {
        padding: 10px !important;
    }
    
    .hero-form-container .btn-apply {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }
    
    .hero-form-container .deadline {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 576px) {
    .hero-form-container {
        bottom: 70px;
        right: 10px;
        max-width: 180px;
    }
    
    .hero-form-container .btn-apply {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
}














/* 
/////////////////////////////////////////////////// RESPONSIVE
////////////////////////////////////////////////////// */

/* Responsive Design */



/* === Enlarged + clickable site logo (header) — overrides per-page inline .site-logo via specificity === */
.header .logo .logo-link { display: inline-flex; align-items: center; line-height: 0; }
.header .logo .site-logo { display: block; vertical-align: middle; width: 225px !important; height: auto !important; max-width: none !important; }
/* Logo scales with the screen — AS BIG AS FITS on big screens, smaller on small laptops/tablets/phones —
   but the SAME size on every page for a given width, because it is this ONE shared rule (2026-09-20).
   Verified to leave the 10-item nav on one line with >=20px after Login at every width (see the nav tier
   below). Up-tiers are listed before the down-tiers so each width resolves to exactly one width. */
/* 2026-09-20: grow the logo on bigger screens to use the empty side space (owner request).
   Ascending min-width tiers → each width resolves to exactly one; 1251-1365 keeps 225 (that band
   is at its fit limit — 9px slack — so it is deliberately NOT grown). Verified one-line fit at
   1366/1536/1920 with >=20px after Login (see the nav + container tiers below). */
@media (min-width: 1366px) { .header .logo .site-logo { width: 240px !important; } }
@media (min-width: 1500px) { .header .logo .site-logo { width: 360px !important; } }  /* 2026-09-20: 265->310->360; combined with the image crop (whitespace trimmed) + tighter menu-item padding, the slogan is clearly readable at the effective-1536 tier. Still fits at the 1500 floor. */
@media (min-width: 1600px) { .header .logo .site-logo { width: 365px !important; } }
@media (min-width: 1900px) { .header .logo .site-logo { width: 385px !important; } }
@media (max-width: 992px)  { .header .logo .site-logo { width: 210px !important; } }
@media (max-width: 768px)  { .header .logo .site-logo { width: 185px !important; } }
@media (max-width: 576px)  { .header .logo .site-logo { width: 150px !important; } }
/* study-india.html uses a TEXT logo (h1 + tagline) instead of the image — enlarge it to match */
.header .logo h1 { font-size: 1.95rem; }
.header .logo p { font-size: 0.95rem; }

/* Login button had no font-family, so a bare <button> fell back to the UA default (Arial) on every shared-header page; inherit the site font (Segoe UI stack) like the nav. */
.header .login-btn { font-family: inherit; }

/* ===== Standardize the header Login button to the index.html reference (#0077b6) on every page — desktop ===== */
@media (min-width: 769px) {
  .header .login-area .login-btn {
    background: #0077b6 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
  }
  .header .login-area .login-btn:hover { background: #005f92 !important; }
}

/* ===== Force the whole header nav onto ONE line on every page (desktop): nowrap links + inline carets + compact, uniform ===== */
@media (min-width: 769px) {
  .header .main-nav .nav-list { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 !important; }
  .header .main-nav .nav-list > li > a { white-space: nowrap !important; font-size: 0.76rem !important; padding: 5px 6px !important; }  /* retuned 2026-09-19 for the 10-item nav (News added): 0.8rem->0.76rem so logo+10 items+login fit from the 1251 boundary up WITH the scrollbar present (test vs documentElement.clientWidth, not innerWidth) */
  .header .main-nav .nav-list > li > a i { display: inline-block !important; vertical-align: middle !important; margin-left: 4px !important; font-size: 0.7rem !important; }
}

/* 2026-09-20: grow the menu text on bigger screens to use the space (owner request), in step with the
   logo + container tiers. Ascending min-width so the largest matching tier wins. 1251-1365 stays at the
   base 0.76rem (that band has only ~9px slack — do NOT grow it or the 10-item nav overflows at 1251). */
@media (min-width: 1366px) { .header .main-nav .nav-list > li > a { font-size: 0.79rem !important; } }
@media (min-width: 1500px) { .header .main-nav .nav-list > li > a { font-size: 0.89rem !important; padding: 6px 6px !important; }  /* 2026-09-20: font 0.89rem KEPT; horizontal padding 8px->6px (tighter menu gaps, NOT smaller text) frees ~40px so the bigger 360px logo fits with the slogan readable */
  .header .main-nav .nav-list > li > a i { font-size: 0.75rem !important; } }
@media (min-width: 1600px) { .header .main-nav .nav-list > li > a { font-size: 0.91rem !important; padding: 7px 8px !important; }
  .header .main-nav .nav-list > li > a i { font-size: 0.78rem !important; } }
@media (min-width: 1900px) { .header .main-nav .nav-list > li > a { font-size: 0.95rem !important; padding: 8px 10px !important; }
  .header .main-nav .nav-list > li > a i { font-size: 0.82rem !important; } }

/* ===== Header container width is PAGE-INDEPENDENT (2026-09-20).
   pages.css sets .container{max-width:1300px}, which the 8 normal pages inherit for their header.
   But Scholarships.html loads NO pages.css (so its header fell back to style.css .container{1200}),
   and courses.html carries its OWN inline .container{max-width:1200} — so on BOTH pages the header
   was 1200 wide (logo further right, Login further left) while the other 8 were 1300. Below 1600px
   that gap was visible; at >=1600 the 1700 rule below masked it. Pin the header container here:
   `.header .container` (specificity 0,2,0) beats any bare `.container` (0,1,0), incl. courses'
   inline rule, at EVERY width, so all 10 headers now share one width. The >=1600 rule still wins. */
.header .container { max-width: 1300px; }

/* ===== Wide screens: widen the header container in step with the bigger logo + nav (2026-09-20).
   Ascending min-width tiers reclaim the wasted side margins the owner flagged (111px each side at 1536,
   103px at 1920) while keeping the logo far-left and Login far-right. 1251-1365 keeps the 1300 base
   (locked band). All four tiers verified: 10-item nav on one line, no h-scroll, >=20px after Login. ===== */
@media (min-width: 1366px) { .header .container { max-width: 1340px !important; } }
@media (min-width: 1500px) { .header .container { max-width: 1490px !important; } }  /* 2026-09-20: 1460->1490 to give the bigger 1500-tier logo+nav a touch more room */
@media (min-width: 1600px) { .header .container { max-width: 1720px !important; } }
@media (min-width: 1900px) { .header .container { max-width: 1860px !important; } }

/* ===== Match index.html header height exactly on every page (logo margin + container padding) ===== */
@media (min-width: 769px) {
  .header .container { padding: 8px 20px !important; }
  .header .logo .site-logo { margin-bottom: 0 !important; }
}

/* ===== Hero headline rotation: fade the OUTGOING fully out before the INCOMING fades in (no two visible at once) ===== */
.hero .text-slider .hero-title { transition: opacity 0.4s ease, transform 0.4s ease !important; }
.hero .text-slider .hero-title.active { transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s !important; }

/* ===== Balanced footer: a long link list (7+ items, e.g. "Our Services") shows in TWO columns
   with ONE title centered over both. Scoped via :has() so footers WITHOUT a long list are unchanged. ===== */
.footer-grid:has(.footer-col-wide) {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.footer-col.footer-col-wide {
    grid-column: span 2;
}
.footer-col.footer-col-wide ul {
    column-count: 2;
    column-gap: 28px;
}
.footer-col.footer-col-wide ul li {
    break-inside: avoid;
}
.footer-col.footer-col-wide > h3,
.footer-col.footer-col-wide > h4 {
    text-align: center;
}
.footer-col.footer-col-wide > h3::after,
.footer-col.footer-col-wide > h4::after {
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 992px) {
    .footer-col.footer-col-wide { grid-column: auto; }
    .footer-col.footer-col-wide ul { column-count: 1; }
}

/* =====================================================================
   MOBILE MENU BUTTON — drawn in CSS, not fetched from a CDN
   =====================================================================
   The markup on all 16 shared-header pages is a bare div whose ONLY
   content is a Font Awesome glyph:

       <div class="mobile-menu-btn"><i class="fas fa-bars"></i></div>

   A div shrink-wraps its content, so when cdnjs is slow or blocked the
   <i> has no glyph, collapses to 0x0, and takes the div with it —
   MEASURED at 375px: index and contact rendered 0x0 (the button is not
   merely invisible, there is nothing left to tap) and courses 10x10.
   Mobile visitors lose navigation entirely, with nothing on screen to
   suggest a menu was ever there.

   Even with the CDN healthy it measured 18x33 on 14 of the 16 pages —
   18px wide is under the 24px WCAG 2.2 minimum and well under the 44px
   Apple / 48px Android guidance. So the tap target was too small
   already; the CDN only turned "hard to hit" into "absent".

   Two independent fixes below, deliberately not one:

     1. SIZE comes from the button, not from its content. min 44x44 holds
        the target open whatever the <i> does. This alone is what makes
        the CDN irrelevant to whether the menu is reachable.

     2. The GLYPH is drawn here with a pseudo-element, so the icon font
        is no longer on the critical path for navigation at all. This is
        stronger than a fallback that has to detect failure first — CSS
        cannot branch on "did a webfont load", so any detection-based
        approach needs JS and a paint where the button is still missing.

   The <i> is hidden rather than removed: 5 pages (index, contact,
   courses, services, Franchise) swap its class to fa-times when the menu
   opens, and :has() below reads that class to draw an X. Hiding keeps
   that state signal intact while removing the visual dependency. Do NOT
   delete the <i> from the markup.

   currentColor is used throughout so the existing color rules (and each
   page's own overrides) keep working untouched.

   Placed at the end of the file on purpose: rule 2867 sets
   display:block !important, and page-inline <style> blocks in
   courses.html and contact.html do the same. Nothing here sets display,
   so none of that is fought — the box is sized and the glyph is
   positioned absolutely, which works identically under block or flex.
   ===================================================================== */

.mobile-menu-btn {
    position: relative;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;

    /* The element is a <button> as of the a11y fix, so the UA defaults have to go:
       buttonface grey, a 2px outset border, padding, and font: 400 13.333px Arial
       (a button does NOT inherit font). Two pages already carried
       background:none;border:none in their own <style> -- contact.html and
       courses.html -- which is a hint the markup was always meant to be a button.
       font-size is deliberately NOT reset here: rule 277 sets 1.3rem and rule 2867
       1.5rem, and overriding those from this later block would silently change
       them. It is moot for the glyph, which is drawn at fixed px below, but there
       is no reason to disturb it. */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: inherit;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
}

/* Keyboard users could not see where they were: there was no focus style on this
   control anywhere in the project (measured: 0 rules). :focus-visible so a mouse
   press does not draw a ring. currentColor resolves to the brand blue the button
   already uses -- 4.87:1 on the white header, past the 3:1 AA needs for a
   non-text indicator. */
.mobile-menu-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 10px;
}

/* Hidden, not removed — the fa-bars/fa-times class is still the open-state signal. */
.mobile-menu-btn > i {
    visibility: hidden;
}

/* Three bars: one element, two box-shadow copies. */
.mobile-menu-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Open state — the same bar rotated, plus a second one, forming an X.
   :has() is the read of the class those 5 pages already toggle; where it
   is unsupported the bars simply stay bars, which is a cosmetic loss and
   never a functional one. */
.mobile-menu-btn:has(> i.fa-times)::before,
.mobile-menu-btn:has(> i.fa-xmark)::before {
    box-shadow: none;
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-btn:has(> i.fa-times)::after,
.mobile-menu-btn:has(> i.fa-xmark)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hero feature cards: keep them to the LEFT so the (now clear) hero photo shows on the right,
   instead of full-width translucent cyan bands covering the whole photo. Owner request 2026-09-09.
   High-specificity + end-of-file so it wins over the duplicated .hero-features/.feature blocks. */
.hero .hero-features { max-width: 680px; }

/* ==========================================================================
   HOMEPAGE LAYOUT FIXES — 2026-09-19. Layout only (no colour/font-family/
   text/content changes). Appended last so these win over the file's earlier
   duplicated blocks by source order. Paired root edit: `.main-nav ul` ->
   `.main-nav > ul` so the nav flex no longer reaches the login dropdown list.
   ========================================================================== */

/* #2 — Header fits on one line above the 1250px hamburger breakpoint; Login not jammed to the edge.
   The actual nav/logo sizing lives in the retuned tiers above (base >=769 and >=1600). Here we only
   guarantee the right-edge clearance: the nav is right-aligned by justify-content:space-between, so the
   container's padding-right IS the gap between Login and the viewport edge — 26px clears the user's
   ">=20px" requirement even with the vertical scrollbar present. */
@media (min-width: 1251px) {
  .header .container { padding-right: 26px !important; }
}

/* #5 — Hero feature cards: identical horizontal margins + width so their left edges line up */
.hero .hero-content .hero-features .feature { margin-left: 0; margin-right: 0; width: 100%; box-sizing: border-box; }

/* #6 — Footer heading underline centred under its (centred) title on phones. A later duplicate
   ::after (~line 4256) resets left:0; this block, being last, restores the centre at <=768. */
@media (max-width: 768px) {
  .footer-col h3::after, .footer-col h4::after { left: 50%; transform: translateX(-50%); }

  /* Phone-menu check: the login dropdown has no reliable :hover on touch (and mobile-nav's
     accordion only handles .dropdown, not .login-dropdown), so Student/Ambassador never opened
     in the drawer. Show them as an always-visible static sub-list under the Login button — visible
     only when the drawer is open, since .main-nav is display:none until then. */
  .login-dropdown .login-menu { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* (2026-09-20: the text-transform:lowercase block was REMOVED — the owner wants the menu WORDS
   Capitalized ("Home", "Who We Are", ...); only the URLs are lowercase. Menu text now comes from the
   Title-Case menu_items titles + the original Capitalized markup, with no CSS case transform.) */