/* ===============================
   Variables & Reset
   =============================== */
:root {
    --color-gold: #D4AF37;
    --color-navy: #0B1F3F;
    --color-navy-light: #1a3559;
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-600: #4B5563;
    --color-gray-800: #1F2937;
    --color-orange: #FF9933;
    
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    --border-radius: 16px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Disable context menu and selection for images and logos */
img {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
}

img::-moz-selection {
    background: transparent;
}

img::selection {
    background: transparent;
}

.logo-img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    color: var(--color-gray-800);
    line-height: 1.6;
    background-color: var(--color-white);
}

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

/* ===============================
   Header
   =============================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-navy);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: var(--transition);
}

.header .container {
    max-width: 1320px;
    padding: 0 12px;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
}

.logo-img {
    height: 130px;
    width: auto;
}

.logo {
    position: relative;
    display: inline-block;
    background: transparent;
    padding: 0;
    margin-right: 90px;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 32px;
    align-items: center;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: var(--transition);
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-gold);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-gold);
    border-radius: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.search-icon-btn svg {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.search-icon-btn:hover {
    background: rgba(212, 175, 55, 0.2);
}

.search-icon-btn:hover svg {
    color: var(--color-gold);
}

/* ===============================
   Language Selector - Simple & Clean
   =============================== */
.language-selector {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.lang-btn .globe-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lang-btn .lang-code {
    font-size: 13px;
    font-weight: 600;
}

.lang-btn .dropdown-arrow {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
}

.language-selector.active .lang-btn .dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #1a2f4f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    min-width: 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.language-selector.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-gold);
}

.lang-option.active {
    color: var(--color-gold);
    background: rgba(212, 175, 55, 0.1);
    font-weight: 600;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-navy);
    border-radius: 2px;
    transition: var(--transition);
}

/* ===============================
   Hero Section
   =============================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
    padding-top: 100px;
    background: linear-gradient(135deg, #0B1F3F 0%, #1a2f4f 100%);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 85% 70%, rgba(212, 175, 55, 0.05) 0%, transparent 40%),
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.2), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(1px 1px at 33% 50%, rgba(255, 255, 255, 0.1), transparent),
        radial-gradient(2px 2px at 79% 53%, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position: 0% 0%;
    animation: backgroundMove 20s ease infinite;
}

@keyframes backgroundMove {
    0%, 100% { background-position: 0% 0%, 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    50% { background-position: 100% 100%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 60px 0;
    padding-left: 80px;
}

.hero-title {
    font-size: 52px;
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: 24px;
    line-height: 1.2;
    animation: fadeInUp 0.8s ease-out;
}

.hero-title .highlight {
    color: var(--color-gold);
    position: relative;
}

.hero-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    line-height: 1.6;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    margin-bottom: 60px;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.hero-image {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 80px;
    animation: fadeInRight 0.8s ease-out;
}

.hero-globe-container {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe-wrapper {
    position: relative;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatGlobe 6s ease-in-out infinite;
}

/* Badgelər globe-wrapper-a bağlıdır */
.globe-wrapper .advantage-badge {
    position: absolute;
    margin-left: -50px;
    margin-top: -25px;
}

@keyframes floatGlobe {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-20px);
    }
}

.globe {
    width: 480px;
    height: 480px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.globe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    animation: rotateGlobe 60s linear infinite;
}

@keyframes rotateGlobe {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateDots {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateContinents {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 20px 60px rgba(212, 175, 55, 0.2); }
    50% { transform: scale(1.05); box-shadow: 0 25px 70px rgba(212, 175, 55, 0.3); }
}

.advantage-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
}

.advantage-badge:hover {
    transform: translateY(-12px) scale(1.08);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.35);
    border-color: var(--color-gold);
}

@keyframes floatBadge {
    0%, 100% { 
        transform: translateY(0px);
    }
    50% { 
        transform: translateY(-10px);
    }
}

.badge-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: linear-gradient(135deg, var(--color-gold) 0%, #FFB84D 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    transition: var(--transition);
}

.badge-icon svg {
    width: 20px;
    height: 20px;
}

.advantage-badge:hover .badge-icon {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

/* Yuxarı nöqtədə avtomatik aktiv animasiya - yalnız scale və shadow */
@keyframes badgeHighlight {
    0%, 22.5%, 27.5%, 47.5%, 52.5%, 72.5%, 77.5%, 97.5%, 100% {
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        border-color: transparent;
        filter: brightness(1);
    }
    /* 12 saat (0°) */
    23.5%, 26.5% {
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
        border-color: var(--color-gold);
        filter: brightness(1.15);
    }
    /* 3 saat (90°) */
    48.5%, 51.5% {
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
        border-color: var(--color-gold);
        filter: brightness(1.15);
    }
    /* 6 saat (180°) */
    73.5%, 76.5% {
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
        border-color: var(--color-gold);
        filter: brightness(1.15);
    }
    /* 9 saat (270°) */
    98.5%, 100% {
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.5);
        border-color: var(--color-gold);
        filter: brightness(1.15);
    }
}

@keyframes iconSpin {
    0%, 22.5%, 27.5%, 47.5%, 52.5%, 72.5%, 77.5%, 97.5%, 100% {
        transform: rotate(0deg);
    }
    /* 12 saat */
    25% {
        transform: rotate(360deg);
    }
    /* 3 saat */
    50% {
        transform: rotate(360deg);
    }
    /* 6 saat */
    75% {
        transform: rotate(360deg);
    }
    /* 9 saat */
    99% {
        transform: rotate(360deg);
    }
}

.advantage-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 2px solid transparent;
    backdrop-filter: blur(10px);
}

.advantage-badge .badge-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: linear-gradient(135deg, var(--color-gold) 0%, #FFB84D 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-navy);
    transition: var(--transition);
}

.badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.2;
    white-space: nowrap;
}

.badge-subtitle {
    font-size: 10px;
    color: var(--color-gray-600);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

/* Dairəvi Fırlanma Animasiyası - Globe mərkəzində */
@keyframes rotateAroundGlobe {
    from {
        transform: rotate(0deg) translateX(220px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(220px) rotate(-360deg);
    }
}

/* Badge Pozisiyaları - 9 badge simmetrik (hər 40°) */
.badge-1 {
    top: 50%;
    left: 50%;
    transform: rotate(0deg) translateX(220px) rotate(0deg);
    animation: none;
}

.badge-1.advantage-badge {
    animation: none;
}

.badge-1 .badge-icon {
    animation: none;
}

.badge-2 {
    top: 50%;
    left: 50%;
    transform: rotate(40deg) translateX(220px) rotate(-40deg);
    animation: none;
}

.badge-2.advantage-badge {
    animation: none;
}

.badge-2 .badge-icon {
    animation: none;
}

.badge-3 {
    top: 50%;
    left: 50%;
    transform: rotate(80deg) translateX(220px) rotate(-80deg);
    animation: none;
}

.badge-3.advantage-badge {
    animation: none;
}

.badge-3 .badge-icon {
    animation: none;
}

.badge-4 {
    top: 50%;
    left: 50%;
    transform: rotate(120deg) translateX(220px) rotate(-120deg);
    animation: none;
}

.badge-4.advantage-badge {
    animation: none;
}

.badge-4 .badge-icon {
    animation: none;
}

.badge-5 {
    top: 50%;
    left: 50%;
    transform: rotate(160deg) translateX(220px) rotate(-160deg);
    animation: none;
}

.badge-5.advantage-badge {
    animation: none;
}

.badge-5 .badge-icon {
    animation: none;
}

.badge-6 {
    top: 50%;
    left: 50%;
    transform: rotate(200deg) translateX(220px) rotate(-200deg);
    animation: none;
}

.badge-6.advantage-badge {
    animation: none;
}

.badge-6 .badge-icon {
    animation: none;
}

.badge-7 {
    top: 50%;
    left: 50%;
    transform: rotate(240deg) translateX(220px) rotate(-240deg);
    animation: none;
}

.badge-7.advantage-badge {
    animation: none;
}

.badge-7 .badge-icon {
    animation: none;
}

.badge-8 {
    top: 50%;
    left: 50%;
    transform: rotate(280deg) translateX(220px) rotate(-280deg);
    animation: none;
}

.badge-8.advantage-badge {
    animation: none;
}

.badge-8 .badge-icon {
    animation: none;
}

.badge-9 {
    top: 50%;
    left: 50%;
    transform: rotate(320deg) translateX(220px) rotate(-320deg);
    animation: none;
}

.badge-9.advantage-badge {
    animation: none;
}

.badge-9 .badge-icon {
    animation: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 620px;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.stat-item {
    text-align: left;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: var(--transition);
    /* Fixed dimensions for equal size boxes */
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    height: 100px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.stat-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.4);
}

.stat-number-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
}

.stat-number {
    display: inline;
    font-size: 36px;
    font-weight: 800;
    color: var(--color-gold);
}

.stat-plus {
    display: inline;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
}

.stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
}

/* ===============================
   Buttons
   =============================== */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background: var(--color-gold);
    color: var(--color-navy);
    border-color: var(--color-gold);
}

.btn-primary:hover {
    background: transparent;
    color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-navy);
    transform: translateY(-2px);
}

.btn-small {
    padding: 10px 20px;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Button ripple effect on hover */
.btn-small::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.btn-small:hover::before {
    width: 300px;
    height: 300px;
}

/* Navy button specific hover with gold accent */
.btn-small:hover {
    background: var(--color-navy);
    color: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11, 31, 63, 0.3);
}

.btn-full {
    width: 100%;
}

/* ===============================
   University Search Section
   =============================== */
.university-search-section {
    padding: 60px 0;
    background: white;
}

.university-search-box {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    max-width: 1200px;
    margin: 0 auto;
}

.search-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: 32px;
    text-align: center;
}

.search-form {
    width: 100%;
}

.search-row {
    display: grid;
    /* Hər sütuna öz mətni üçün minimum en (minmax) verilib ki, İxtisas sahəsi
       genişlənəndə digər sahələrin mətni (məs. "Təhsil Pilləsi") ox işarəsinə
       dəyməsin — minimum enlər qorunur, artıq yer isə nisbətən (fr) bölüşdürülür. */
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(195px, 1.05fr)
        minmax(210px, 1.3fr)
        minmax(145px, 1fr)
        minmax(120px, 0.8fr)
        auto;
    gap: 12px;
    align-items: center;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
}

.field-icon {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: var(--color-gray-600);
    pointer-events: none;
    z-index: 1;
}

.search-select {
    width: 100%;
    /* Sağda ox işarəsi üçün yer saxlanılır (32px), uzun mətnlər (məs. rusca
       tərcümələr) ora dəyməsin deyə text-overflow ilə kəsilir */
    padding: 16px 32px 16px 48px;
    border: 2px solid var(--color-gray-200);
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-gray-800);
    background: white;
    cursor: pointer;
    transition: var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234B5563' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.search-select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

input.search-select {
    cursor: text;
    background-image: none;
}

/* İxtisas axtarışı combobox: əl ilə yazmaq + ox düyməsi ilə tam siyahını açmaq */
.major-field {
    z-index: 1;
}

.major-field.open {
    z-index: 30;
}

.major-input {
    padding-right: 44px;
}

.major-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: var(--transition);
    z-index: 2;
}

.major-toggle:hover {
    background: var(--color-gray-100);
    color: var(--color-navy);
}

.major-toggle svg {
    width: 12px;
    height: 8px;
    transition: transform 0.25s ease;
}

.major-field.open .major-toggle svg {
    transform: rotate(180deg);
}

.major-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 20;
    display: none;
}

.major-field.open .major-dropdown {
    display: block;
}

.major-dropdown li {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-800);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.major-dropdown li:hover {
    background: var(--color-gold);
    color: var(--color-navy);
}

.major-dropdown li.no-results {
    color: var(--color-gray-500);
    cursor: default;
}

.major-dropdown li.no-results:hover {
    background: none;
    color: var(--color-gray-500);
}

/* Uzun (100+ seçimli) native <select> elementləri üçün ümumi axtarışla
   filtrlənən combobox — /universities səhifəsinin İxtisas filtri kimi.
   Ana səhifədəki "İxtisas axtarın" ilə eyni rəng/hover dizaynı, sadəcə
   sol tərəfdə ikon olmadığı üçün padding fərqlidir. */
.searchable-filter {
    position: relative;
    z-index: 1;
}

.searchable-filter.open {
    z-index: 30;
}

.searchable-filter-input {
    width: 100%;
    padding: 12px 44px 12px 15px;
    border: 2px solid var(--color-gray-200, #e0e0e0);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-family);
    color: var(--color-navy);
    background: white;
    cursor: text;
    transition: all 0.3s;
}

.searchable-filter-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

.searchable-filter-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: var(--transition);
}

.searchable-filter-toggle:hover {
    background: var(--color-gray-100);
    color: var(--color-navy);
}

.searchable-filter-toggle svg {
    width: 12px;
    height: 8px;
    transition: transform 0.25s ease;
}

.searchable-filter.open .searchable-filter-toggle svg {
    transform: rotate(180deg);
}

.searchable-filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 20;
}

.searchable-filter.open .searchable-filter-dropdown {
    display: block;
}

.searchable-filter-dropdown li {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-800);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.searchable-filter-dropdown li:hover,
.searchable-filter-dropdown li.active {
    background: var(--color-gold);
    color: var(--color-navy);
}

.searchable-filter-dropdown li.no-results {
    color: var(--color-gray-500);
    cursor: default;
}

.searchable-filter-dropdown li.no-results:hover {
    background: none;
    color: var(--color-gray-500);
}

.search-select option {
    padding: 12px;
}

.search-submit-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: var(--color-gold);
    color: var(--color-navy);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.search-submit-btn svg {
    width: 20px;
    height: 20px;
}

.search-submit-btn:hover {
    background: var(--color-navy);
    color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* ===============================
   Sections
   =============================== */
.featured-universities,
.countries,
.consultation,
.testimonials {
    padding: 100px 0;
}

.featured-universities {
    padding-top: 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

/* Featured Universities Section Header with Link */
.featured-universities .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.section-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--color-navy);
    margin-bottom: 16px;
}

.featured-universities .section-title {
    margin-bottom: 0;
}

.section-subtitle {
    font-size: 18px;
    color: var(--color-gray-600);
}

.section-link {
    display: inline-block;
    margin-top: 0;
    color: var(--color-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.section-link:hover {
    transform: translateX(4px);
    opacity: 0.8;
}

/* Desktop only - hide on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
    
    .featured-universities .section-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ===============================
   University Cards
   =============================== */
.university-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
}

.university-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.university-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.university-image {
    position: relative;
    height: 200px;
    background: var(--color-gray-200);
    overflow: hidden;
}

.university-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.university-card:hover .university-image img {
    transform: scale(1.05);
}

.university-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-gold);
    color: var(--color-navy);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.university-content {
    padding: 24px;
}

.university-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 8px;
    min-height: 75px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.university-location {
    color: var(--color-gray-600);
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    min-height: 22px;
}

.university-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tag {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.university-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-200);
}

.university-price-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    border-radius: 8px;
    padding: 8px 16px;
    min-width: 100px;
}

.price-large {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-navy);
    line-height: 1.2;
}

.price-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.university-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}

.price-from {
    font-size: 12px;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.price {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-navy);
    white-space: nowrap;
}

.price-per {
    font-size: 14px;
    color: var(--color-gray-600);
    white-space: nowrap;
}

/* ===============================
   Countries Grid
   =============================== */
.countries {
    background: var(--color-gray-50);
}

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

.country-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.country-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.country-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.country-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.country-card:hover .country-image img {
    transform: scale(1.1);
}

.country-flag-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 3px solid white;
    overflow: hidden;
}

.country-flag-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.country-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.country-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 20px;
}

.country-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.country-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-gray-600);
    font-size: 14px;
    font-weight: 500;
}

.country-stat svg {
    width: 18px;
    height: 18px;
    color: var(--color-gold);
    flex-shrink: 0;
}

.country-btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--color-gold);
    color: var(--color-navy);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    transition: var(--transition);
    margin-top: auto;
}

.country-btn:hover {
    background: var(--color-navy);
    color: var(--color-gold);
    transform: translateY(-2px);
}

/* ===============================
   8 Steps Process Timeline - MODERN ANIMATIONS
   =============================== */
.process-timeline {
    padding: 120px 0;
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
    position: relative;
    overflow: hidden;
}

.process-timeline .section-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(212, 175, 55, 0.2);
    color: var(--color-gold);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.process-timeline .section-title {
    color: var(--color-white);
}

.process-timeline .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 80px auto 0;
    padding: 0 40px;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-gold) 0%, transparent 100%);
    transform: translateX(-50%);
    opacity: 0.3;
}

/* Animated Glow Ball (Elektrik axını effekti) */
.timeline-glow-ball {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 35px;
    background: radial-gradient(ellipse, 
        rgba(255, 215, 0, 1) 0%, 
        rgba(255, 200, 50, 0.9) 30%, 
        rgba(212, 175, 55, 0.6) 60%, 
        transparent 100%);
    border-radius: 50%;
    transform: translateX(-50%) translateY(-50%);
    filter: blur(2px);
    opacity: 0;
    transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.9),
        0 0 30px rgba(255, 215, 0, 0.7),
        0 0 45px rgba(255, 215, 0, 0.5);
}

.timeline-glow-ball.active {
    opacity: 1;
    animation: pulse-glow 1.2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        transform: translateX(-50%) translateY(-50%) scale(1);
        filter: blur(2px);
    }
    50% {
        transform: translateX(-50%) translateY(-50%) scale(1.15);
        filter: blur(3px);
    }
}

.timeline-item {
    position: relative;
    margin-bottom: 80px;
    opacity: 0.3;
    transform: translateY(20px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* State 2: Active (İşıq dəyir - animasiya) */
.timeline-item.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* State 3: Completed (İşıq keçib - statik parlaq) */
.timeline-item.completed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.timeline-item.animate .timeline-number {
    animation: number-glow-pulse 1.5s ease-out;
}

.timeline-item.animate .timeline-content {
    animation: content-box-activate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.timeline-item.animate .timeline-icon {
    animation: icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

.timeline-item.animate .timeline-title {
    animation: title-slide-in 0.5s ease-out 0.4s backwards;
}

.timeline-item.animate .timeline-description {
    animation: description-fade-in 0.6s ease-out 0.5s backwards;
}

@keyframes number-glow-pulse {
    0% {
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 8px 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.6);
        transform: translateX(-50%) scale(1.2);
    }
    100% {
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes content-box-activate {
    0% {
        transform: translateY(10px) scale(0.98);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border-color: rgba(212, 175, 55, 0.2);
    }
    50% {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
        border-color: rgba(212, 175, 55, 0.6);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
        border-color: rgba(212, 175, 55, 0.3);
    }
}

@keyframes icon-bounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.15) rotate(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes title-slide-in {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes description-fade-in {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.timeline-item:nth-child(odd) {
    text-align: right;
    padding-right: calc(50% + 60px);
}

.timeline-item:nth-child(even) {
    text-align: left;
    padding-left: calc(50% + 60px);
}

.timeline-number {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--color-gold) 0%, #FFB84D 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--color-navy);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-item:hover .timeline-number {
    transform: translateX(-50%) scale(1.15) rotate(360deg);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.6);
}

.timeline-content {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(212, 175, 55, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-gold) 0%, #FFB84D 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-item:hover .timeline-content::before {
    transform: scaleX(1);
}

.timeline-item:hover .timeline-content {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.2);
}

.timeline-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 184, 77, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
    transition: all 0.4s ease;
}

.timeline-item:nth-child(odd) .timeline-icon {
    margin-left: auto;
}

.timeline-icon svg {
    color: var(--color-gold);
    transition: all 0.4s ease;
}

.timeline-item:hover .timeline-icon {
    background: linear-gradient(135deg, var(--color-gold) 0%, #FFB84D 100%);
    transform: scale(1.1) rotate(5deg);
}

.timeline-item:hover .timeline-icon svg {
    color: var(--color-navy);
    transform: scale(1.1);
}

.timeline-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.timeline-item:hover .timeline-title {
    color: var(--color-gold);
}

.timeline-description {
    font-size: 15px;
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Arrow indicators */
.timeline-item:nth-child(odd) .timeline-content::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 35px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid white;
}

.timeline-item:nth-child(even) .timeline-content::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 35px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
}

/* ===============================
   Consultation Form */
   =============================== */
.consultation {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%) !important;
    background-color: #0B1F3F !important;
}

.consultation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.consultation-text .section-title {
    color: var(--color-navy) !important;
    text-align: left;
    margin-bottom: 24px;
}

.consultation-description {
    color: var(--color-navy) !important;
    font-size: 18px;
    margin-bottom: 32px;
}

.consultation-benefits {
    list-style: none;
}

.consultation-benefits li {
    color: var(--color-navy) !important;
    font-size: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(11, 31, 63, 0.2);
}

.consultation-form {
    background: white;
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--color-gold);
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-navy);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--color-navy);
    transition: var(--transition);
}

.phone-input-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.country-code-select {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    flex-shrink: 0;
    padding: 12px 8px;
    border: 2px solid var(--color-navy);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--color-navy);
    transition: var(--transition);
    background: white;
    cursor: pointer;
}

.phone-input-wrapper input[type="tel"] {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 128px);
}

.country-code-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-checkbox input {
    width: auto;
}

.form-checkbox label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 14px;
}

/* ===============================
   Testimonials Carousel
   =============================== */
.testimonials {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
    position: relative;
    overflow: hidden;
}

.testimonials .section-title {
    color: var(--color-white);
}

.testimonials .section-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

.testimonials-carousel-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

.testimonials-carousel {
    overflow: hidden;
    width: 100%;
}

.testimonials-track {
    display: flex;
    gap: 32px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
}

.testimonials-track:active {
    cursor: grabbing;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    padding: 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 0 calc(33.333% - 21.33px);
    min-width: calc(33.333% - 21.33px);
    opacity: 0.6;
    transform: scale(0.95);
    position: relative;
}

/* Center Active Card - Enhanced Animation (No Scale Pulse) */
.testimonial-card.active.center {
    opacity: 1;
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 60px rgba(212, 175, 55, 0.5),
        0 0 80px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(212, 175, 55, 0.8);
    border-width: 2px;
    z-index: 10;
    animation: colorGlow 3s ease-in-out infinite;
}

/* Color glow animation for center card (no scaling) */
@keyframes colorGlow {
    0%, 100% {
        box-shadow: 
            0 20px 60px rgba(212, 175, 55, 0.5),
            0 0 80px rgba(212, 175, 55, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        border-color: rgba(212, 175, 55, 0.8);
    }
    50% {
        box-shadow: 
            0 20px 60px rgba(212, 175, 55, 0.7),
            0 0 100px rgba(212, 175, 55, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        border-color: rgba(212, 175, 55, 1);
    }
}

.testimonial-card.active.center .testimonial-text {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.testimonial-card.active.center .author-name {
    color: var(--color-gold);
    text-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.testimonial-content {
    margin-bottom: 24px;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    min-height: 120px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 4px;
}

.author-university {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-nav:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav svg {
    width: 24px;
    height: 24px;
    color: white;
}

.carousel-nav:hover svg {
    color: var(--color-navy);
}

.carousel-nav-prev {
    left: 0;
}

.carousel-nav-next {
    right: 0;
}

/* Carousel Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.carousel-dot.active {
    background: var(--color-gold);
    width: 32px;
    border-radius: 5px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 16px);
        min-width: calc(50% - 16px);
    }
    
    .testimonials-carousel-wrapper {
        padding: 0 50px;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    .testimonials-carousel-wrapper {
        padding: 0 40px;
    }
    
    .carousel-nav {
        width: 40px;
        height: 40px;
    }
    
    .carousel-nav svg {
        width: 20px;
        height: 20px;
    }
    
    .testimonial-text {
        font-size: 15px;
        min-height: auto;
    }
}

/* ===============================
   Footer
   =============================== */
.footer {
    background: var(--color-navy);
    color: rgba(255, 255, 255, 0.8);
    padding: 60px 0 24px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 2fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-column-logo {
    max-width: 400px;
}

.footer-logo-large img {
    height: 170px;
    width: auto;
    margin-bottom: 20px;
}

.footer-description {
    margin-bottom: 24px;
    line-height: 1.8;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.footer-social {
    display: flex;
    gap: 12px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition);
    color: white;
}

.social-link svg {
    width: 20px;
    height: 20px;
}

.social-link:hover {
    background: var(--color-gold);
    transform: translateY(-2px);
}

.footer-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 24px;
}

.footer-links,
.footer-contact {
    list-style: none;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
    font-size: 15px;
}

.footer-links a:hover {
    color: var(--color-gold);
    padding-left: 5px;
}

.footer-contact {
    list-style: none;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.7;
}

.contact-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-gold);
}

.contact-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: var(--color-gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    text-align: center;
    font-size: 14px;
}

/* ===============================
   WhatsApp Floating Button with Animation
   =============================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: whatsappPulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.15);
    box-shadow: 0 12px 40px rgba(37, 211, 102, 0.6);
    animation: none;
}

.whatsapp-float svg {
    width: 36px;
    height: 36px;
}

.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background: var(--color-navy);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid var(--color-navy);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    right: 80px;
}

@keyframes whatsappPulse {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6), 0 0 0 15px rgba(37, 211, 102, 0.2);
        transform: scale(1.05);
    }
}

/* Mobile WhatsApp Float */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
    }
    
    .whatsapp-float svg {
        width: 32px;
        height: 32px;
    }
    
    .whatsapp-tooltip {
        display: none;
    }
}

/* ===============================
   Animations
   =============================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Responsive
   =============================== */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    /* Country Code Select - Mobile */
    .country-code-select {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
        font-size: 13px;
        padding: 12px 6px;
    }
    
    .phone-input-wrapper input[type="tel"] {
        max-width: calc(100% - 118px);
    }
    
    /* Header - Mobile Navigation */
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-navy);
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .nav.active {
        display: block;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .nav-link.active::after {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .mobile-menu-toggle span {
        background: var(--color-white);
    }
    
    /* Logo size for mobile */
    .logo-img {
        height: 75px;
    }
    
    .logo {
        margin-right: 0;
    }
    
    /* Hide search icon on mobile */
    .search-icon-btn {
        display: none;
    }
    
    /* Hero Section - Centered Content */
    .hero {
        grid-template-columns: 1fr;
        padding-top: 120px;
        padding-bottom: 60px;
        min-height: auto;
    }
    
    /* Process Timeline - Mobile */
    .process-timeline {
        padding: 60px 0;
    }
    
    .timeline-wrapper {
        padding: 0 20px;
    }
    
    .timeline-line {
        left: 30px;
    }
    
    .timeline-item {
        text-align: left !important;
        padding-left: 80px !important;
        padding-right: 0 !important;
        margin-bottom: 50px;
    }
    
    .timeline-number {
        left: 30px;
        width: 50px;
        height: 50px;
        font-size: 18px;
        transform: translateX(0);
    }
    
    .timeline-item:hover .timeline-number {
        transform: scale(1.1) rotate(360deg);
    }
    
    .timeline-icon {
        margin-left: 0 !important;
        width: 50px;
        height: 50px;
    }
    
    .timeline-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .timeline-title {
        font-size: 18px;
    }
    
    .timeline-description {
        font-size: 14px;
    }
    
    /* Timeline Glow Ball - Mobile */
    .timeline-glow-ball {
        left: 30px;
        width: 14px;
        height: 28px;
    }
    
    .timeline-item:nth-child(odd) .timeline-content::after,
    .timeline-item:nth-child(even) .timeline-content::after {
        left: -10px;
        right: auto;
        border-left: none;
        border-right: 10px solid white;
    }
    
    .hero-content {
        text-align: center;
        padding: 0 20px;
        order: 1;
        padding-left: 20px;
    }
    
    .hero-title {
        font-size: 32px;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 16px;
        margin-top: 16px;
        margin-bottom: 24px;
    }
    
    .hero-buttons {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-bottom: 32px;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        justify-content: center;
    }
    
    .stat-item {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
        height: 90px;
        min-height: 90px;
        padding: 16px;
    }
    
    .stat-number {
        font-size: 28px;
    }
    
    .stat-plus {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    .hero-image {
        order: 2;
        padding: 20px;
        display: flex;
        justify-content: center;
    }
    
    .hero-globe-container {
        width: 340px;
        height: 340px;
    }
    
    .globe-wrapper {
        width: 200px;
        height: 200px;
    }
    
    .globe {
        width: 180px;
        height: 180px;
    }
    
    .advantage-badge {
        padding: 4px 8px;
        gap: 6px;
        border-radius: 8px;
    }
    
    .badge-icon {
        width: 24px;
        height: 24px;
        min-width: 24px;
        border-radius: 6px;
    }
    
    .badge-icon svg {
        width: 14px;
        height: 14px;
    }
    
    .badge-title {
        font-size: 10px;
    }
    
    .badge-subtitle {
        font-size: 8px;
    }
    
    /* Mobile Badge Pozisiyaları - Dairəvi Fırlanma - PC kimi yaxın */
    .badge-1 {
        top: 50%;
        left: 50%;
        transform: rotate(0deg) translateX(140px) rotate(0deg);
        animation: rotateAroundGlobe 20s linear infinite;
    }
    
    .badge-2 {
        top: 50%;
        left: 50%;
        transform: rotate(40deg) translateX(140px) rotate(-40deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -17.78s;
    }
    
    .badge-3 {
        top: 50%;
        left: 50%;
        transform: rotate(80deg) translateX(140px) rotate(-80deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -15.56s;
    }
    
    .badge-4 {
        top: 50%;
        left: 50%;
        transform: rotate(120deg) translateX(140px) rotate(-120deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -13.33s;
    }
    
    .badge-5 {
        top: 50%;
        left: 50%;
        transform: rotate(160deg) translateX(140px) rotate(-160deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -11.11s;
    }
    
    .badge-6 {
        top: 50%;
        left: 50%;
        transform: rotate(200deg) translateX(140px) rotate(-200deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -8.89s;
    }
    
    .badge-7 {
        top: 50%;
        left: 50%;
        transform: rotate(240deg) translateX(140px) rotate(-240deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -6.67s;
    }
    
    .badge-8 {
        top: 50%;
        left: 50%;
        transform: rotate(280deg) translateX(140px) rotate(-280deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -4.44s;
    }
    
    .badge-9 {
        top: 50%;
        left: 50%;
        transform: rotate(320deg) translateX(140px) rotate(-320deg);
        animation: rotateAroundGlobe 20s linear infinite;
        animation-delay: -2.22s;
    }
    
    /* University Search */
    .university-search-section {
        padding: 40px 0;
    }
    
    .university-search-box {
        padding: 24px 20px;
    }
    
    .search-title {
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .search-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .search-submit-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Section Titles */
    .section-title {
        font-size: 28px;
        text-align: center;
    }
    
    .section-subtitle {
        font-size: 16px;
        text-align: center;
    }
    
    /* Grids */
    .university-grid,
    .countries-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .consultation-content {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
    }
    
    .footer-column-logo {
        max-width: 100%;
        text-align: center;
    }
    
    .footer-logo-large {
        display: flex;
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-description {
        text-align: center;
    }
    
    .contact-item {
        justify-content: flex-start;
    }
}

/* Tablet Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Bu enlərdə 5 axtarış sahəsi + düymə bir sətirdə minimum enlərlə belə
       sığmır — sahələri 3 sütunlu şəbəkəyə bükürük ki, heç bir mətn kəsilməsin
       və ya ox işarəsinə dəyməsin, düymə isə öz sətrində tam en tutur. */
    .search-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .search-submit-btn {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .university-grid,
    .countries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================
   Light Mode
   =============================== */
body.light-mode {
    background-color: #f8f9fa;
    color: var(--color-gray-800);
}

body.light-mode .header {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

body.light-mode .nav-link {
    color: var(--color-navy);
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    color: var(--color-gold);
}

body.light-mode .lang-btn {
    background: var(--color-gray-100);
    color: var(--color-navy);
}

body.light-mode .search-icon-btn,
body.light-mode .theme-toggle-btn {
    background: var(--color-gray-100);
}

body.light-mode .search-icon-btn svg,
body.light-mode .theme-toggle-btn svg {
    color: var(--color-navy);
}

body.light-mode .mobile-menu-toggle span {
    background: var(--color-navy);
}

body.light-mode .hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

body.light-mode .hero-title {
    color: var(--color-navy);
}

body.light-mode .hero-subtitle {
    color: var(--color-gray-600);
}

body.light-mode .stat-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(11, 31, 63, 0.1);
}

body.light-mode .stat-label {
    color: var(--color-gray-600);
}


/* ===============================
   Countries Dropdown Menu
   =============================== */
.nav-item-dropdown {
    position: relative;
}

.nav-item-dropdown .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-icon {
    transition: transform 0.3s ease;
}

.nav-item-dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    min-width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 12px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

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

.dropdown-link {
    display: block;
    padding: 10px 16px;
    color: var(--color-gray-800);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 15px;
    font-weight: 500;
}

.dropdown-link:hover {
    background: var(--color-gray-50);
    color: var(--color-gold);
    transform: translateX(4px);
}

.dropdown-link:first-child {
    font-weight: 600;
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: 8px;
    padding-bottom: 12px;
}

/* ===============================
   Mobile Menu (Hamburger)
   =============================== */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    transition: var(--transition);
}

.mobile-menu-toggle:hover {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.45);
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2.5px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-gold), #FFB84D);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-toggle span:nth-child(2) {
    width: 16px;
    align-self: flex-end;
    margin-inline-end: 4px;
}

.mobile-menu-toggle.active {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--color-gold);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    width: 22px;
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Sidebar - floating drawer */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -420px;
    width: min(88vw, 400px);
    height: 100vh;
    background: linear-gradient(165deg, #0d2649 0%, var(--color-navy) 45%, #081527 100%);
    z-index: 1000;
    padding: 100px 0 28px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 16px 0 60px rgba(0, 0, 0, 0.4);
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 8%, rgba(212, 175, 55, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 92% 88%, rgba(212, 175, 55, 0.10) 0%, transparent 40%);
}

.mobile-nav.active {
    left: 0;
}

.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 18px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.mobile-nav-list > li {
    opacity: 0;
    transform: translateY(14px);
}

.mobile-nav.active .mobile-nav-list > li {
    animation: mobileNavItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mobile-nav.active .mobile-nav-list > li:nth-child(1) { animation-delay: .06s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(2) { animation-delay: .10s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(3) { animation-delay: .14s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(4) { animation-delay: .18s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(5) { animation-delay: .22s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(6) { animation-delay: .26s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(7) { animation-delay: .30s; }
.mobile-nav.active .mobile-nav-list > li:nth-child(8) { animation-delay: .34s; }

@keyframes mobileNavItemIn {
    to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-list .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    font-weight: 600;
    text-align: start;
    border-radius: 14px;
    border-inline-start: 3px solid transparent;
    background: transparent;
    transition: var(--transition);
}

.mobile-nav-list .nav-link:hover {
    background: rgba(255, 255, 255, 0.07);
    border-inline-start-color: var(--color-gold);
    color: var(--color-gold);
    transform: none;
}

.mobile-nav-list .nav-link.active {
    background: rgba(212, 175, 55, 0.14);
    border-inline-start-color: var(--color-gold);
    color: var(--color-gold);
}

/* Mobile Dropdown */
.mobile-nav .nav-item-dropdown .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.mobile-nav .dropdown-icon {
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-nav .nav-item-dropdown.active .nav-link .dropdown-icon,
.mobile-nav .nav-item-dropdown.open .nav-link .dropdown-icon {
    transform: rotate(180deg);
    opacity: 1;
}

.mobile-nav .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    border-radius: 12px;
    padding: 0;
    margin: 2px 0 6px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.mobile-nav .nav-item-dropdown.active .nav-dropdown,
.mobile-nav .nav-item-dropdown.open .nav-dropdown {
    max-height: 420px;
    padding: 8px 6px;
}

.mobile-nav .dropdown-link {
    position: relative;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 500;
    padding: 11px 14px 11px 22px;
    border-bottom: none;
    text-align: start;
    display: block;
    border-radius: 10px;
    transition: var(--transition);
}

.mobile-nav .dropdown-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.5);
    transform: translateY(-50%);
    transition: var(--transition);
}

.mobile-nav .dropdown-link:hover,
.mobile-nav .dropdown-link.active {
    color: var(--color-gold);
    background: rgba(212, 175, 55, 0.1);
    transform: none;
}

.mobile-nav .dropdown-link:hover::before,
.mobile-nav .dropdown-link.active::before {
    background: var(--color-gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
}

/* Mobile Contact Button */
.mobile-contact-btn-wrapper {
    display: flex;
    justify-content: center;
    padding: 16px 20px 22px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.mobile-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--color-gold) 0%, #FFB84D 100%);
    color: var(--color-navy);
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
}

.mobile-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5);
}

.mobile-contact-btn svg {
    width: 22px;
    height: 22px;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 12, 25, 0.6);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    /* Matches the drawer's own transition duration/easing (.mobile-nav)
       so the dimming overlay never disappears before the drawer has
       finished sliding fully off-screen. */
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(3px);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Hide the floating WhatsApp button while the mobile menu is open,
   so it doesn't visually clash with the drawer/overlay; it fades
   back in the moment the menu closes. */
.mobile-nav.active ~ .whatsapp-float,
.mobile-menu-overlay.active ~ .whatsapp-float {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7);
    pointer-events: none;
}

/* ===============================
   Responsive Design
   =============================== */
@media (max-width: 1024px) {
    .nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .logo-img {
        height: 75px;
    }
    
    .header-content {
        padding: 8px 0;
    }
}

@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 80px;
        min-height: auto;
    }
    
    .hero-content {
        padding: 40px 20px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-image {
        padding: 20px;
    }
    
    .hero-globe-container {
        width: 350px;
        height: 350px;
    }
    
    .globe-wrapper {
        width: 280px;
        height: 280px;
    }
    
    .globe {
        width: 280px;
        height: 280px;
    }
    
    /* Reduce badge distance from globe on mobile - 160px instead of 220px */
    @keyframes rotateAroundGlobe1 {
        from { transform: rotate(0deg) translateX(160px) rotate(0deg); }
        to { transform: rotate(360deg) translateX(160px) rotate(-360deg); }
    }
    
    @keyframes rotateAroundGlobe2 {
        from { transform: rotate(40deg) translateX(160px) rotate(-40deg); }
        to { transform: rotate(400deg) translateX(160px) rotate(-400deg); }
    }
    
    @keyframes rotateAroundGlobe3 {
        from { transform: rotate(80deg) translateX(160px) rotate(-80deg); }
        to { transform: rotate(440deg) translateX(160px) rotate(-440deg); }
    }
    
    @keyframes rotateAroundGlobe4 {
        from { transform: rotate(120deg) translateX(160px) rotate(-120deg); }
        to { transform: rotate(480deg) translateX(160px) rotate(-480deg); }
    }
    
    @keyframes rotateAroundGlobe5 {
        from { transform: rotate(160deg) translateX(160px) rotate(-160deg); }
        to { transform: rotate(520deg) translateX(160px) rotate(-520deg); }
    }
    
    @keyframes rotateAroundGlobe6 {
        from { transform: rotate(200deg) translateX(160px) rotate(-200deg); }
        to { transform: rotate(560deg) translateX(160px) rotate(-560deg); }
    }
    
    @keyframes rotateAroundGlobe7 {
        from { transform: rotate(240deg) translateX(160px) rotate(-240deg); }
        to { transform: rotate(600deg) translateX(160px) rotate(-600deg); }
    }
    
    @keyframes rotateAroundGlobe8 {
        from { transform: rotate(280deg) translateX(160px) rotate(-280deg); }
        to { transform: rotate(640deg) translateX(160px) rotate(-640deg); }
    }
    
    @keyframes rotateAroundGlobe9 {
        from { transform: rotate(320deg) translateX(160px) rotate(-320deg); }
        to { transform: rotate(680deg) translateX(160px) rotate(-680deg); }
    }
}

@media (max-width: 480px) {
    .mobile-nav {
        padding-top: 88px;
    }

    .logo-img {
        height: 60px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-globe-container {
        width: 280px;
        height: 280px;
    }
    
    .globe-wrapper {
        width: 220px;
        height: 220px;
    }
    
    .globe {
        width: 220px;
        height: 220px;
    }
}


/* Mobile View All Button */
.desktop-only {
    display: inline-flex;
}

.mobile-view-all {
    display: none;
    text-align: center;
    margin-top: 40px;
}

.mobile-view-all .btn {
    padding: 14px 32px;
    font-size: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-view-all {
        display: block;
    }
}


/* ===============================
   OVERRIDE - Selective Animation Control
   =============================== */

/* Keep the circular rotation animation around globe ACTIVE */
.badge-1 {
    animation: rotateAroundGlobe1 40s linear infinite !important;
}

.badge-2 {
    animation: rotateAroundGlobe2 40s linear infinite !important;
}

.badge-3 {
    animation: rotateAroundGlobe3 40s linear infinite !important;
}

.badge-4 {
    animation: rotateAroundGlobe4 40s linear infinite !important;
}

.badge-5 {
    animation: rotateAroundGlobe5 40s linear infinite !important;
}

.badge-6 {
    animation: rotateAroundGlobe6 40s linear infinite !important;
}

.badge-7 {
    animation: rotateAroundGlobe7 40s linear infinite !important;
}

.badge-8 {
    animation: rotateAroundGlobe8 40s linear infinite !important;
}

.badge-9 {
    animation: rotateAroundGlobe9 40s linear infinite !important;
}

/* Define rotation animations for each badge */
@keyframes rotateAroundGlobe1 {
    from { transform: rotate(0deg) translateX(220px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(220px) rotate(-360deg); }
}

@keyframes rotateAroundGlobe2 {
    from { transform: rotate(40deg) translateX(220px) rotate(-40deg); }
    to { transform: rotate(400deg) translateX(220px) rotate(-400deg); }
}

@keyframes rotateAroundGlobe3 {
    from { transform: rotate(80deg) translateX(220px) rotate(-80deg); }
    to { transform: rotate(440deg) translateX(220px) rotate(-440deg); }
}

@keyframes rotateAroundGlobe4 {
    from { transform: rotate(120deg) translateX(220px) rotate(-120deg); }
    to { transform: rotate(480deg) translateX(220px) rotate(-480deg); }
}

@keyframes rotateAroundGlobe5 {
    from { transform: rotate(160deg) translateX(220px) rotate(-160deg); }
    to { transform: rotate(520deg) translateX(220px) rotate(-520deg); }
}

@keyframes rotateAroundGlobe6 {
    from { transform: rotate(200deg) translateX(220px) rotate(-200deg); }
    to { transform: rotate(560deg) translateX(220px) rotate(-560deg); }
}

@keyframes rotateAroundGlobe7 {
    from { transform: rotate(240deg) translateX(220px) rotate(-240deg); }
    to { transform: rotate(600deg) translateX(220px) rotate(-600deg); }
}

@keyframes rotateAroundGlobe8 {
    from { transform: rotate(280deg) translateX(220px) rotate(-280deg); }
    to { transform: rotate(640deg) translateX(220px) rotate(-640deg); }
}

@keyframes rotateAroundGlobe9 {
    from { transform: rotate(320deg) translateX(220px) rotate(-320deg); }
    to { transform: rotate(680deg) translateX(220px) rotate(-680deg); }
}

/* Responsive badge orbit radius. These MUST come after the unconditional
   220px keyframes above: same-named @keyframes don't cascade by specificity,
   the last matching definition in source order wins, so placing the smaller
   radii here is what lets them actually take effect on narrow viewports
   instead of being silently overridden back to the desktop 220px. */
@media (max-width: 768px) {
    @keyframes rotateAroundGlobe1 { from { transform: rotate(0deg) translateX(160px) rotate(0deg); } to { transform: rotate(360deg) translateX(160px) rotate(-360deg); } }
    @keyframes rotateAroundGlobe2 { from { transform: rotate(40deg) translateX(160px) rotate(-40deg); } to { transform: rotate(400deg) translateX(160px) rotate(-400deg); } }
    @keyframes rotateAroundGlobe3 { from { transform: rotate(80deg) translateX(160px) rotate(-80deg); } to { transform: rotate(440deg) translateX(160px) rotate(-440deg); } }
    @keyframes rotateAroundGlobe4 { from { transform: rotate(120deg) translateX(160px) rotate(-120deg); } to { transform: rotate(480deg) translateX(160px) rotate(-480deg); } }
    @keyframes rotateAroundGlobe5 { from { transform: rotate(160deg) translateX(160px) rotate(-160deg); } to { transform: rotate(520deg) translateX(160px) rotate(-520deg); } }
    @keyframes rotateAroundGlobe6 { from { transform: rotate(200deg) translateX(160px) rotate(-200deg); } to { transform: rotate(560deg) translateX(160px) rotate(-560deg); } }
    @keyframes rotateAroundGlobe7 { from { transform: rotate(240deg) translateX(160px) rotate(-240deg); } to { transform: rotate(600deg) translateX(160px) rotate(-600deg); } }
    @keyframes rotateAroundGlobe8 { from { transform: rotate(280deg) translateX(160px) rotate(-280deg); } to { transform: rotate(640deg) translateX(160px) rotate(-640deg); } }
    @keyframes rotateAroundGlobe9 { from { transform: rotate(320deg) translateX(160px) rotate(-320deg); } to { transform: rotate(680deg) translateX(160px) rotate(-680deg); } }
}

@media (max-width: 480px) {
    @keyframes rotateAroundGlobe1 { from { transform: rotate(0deg) translateX(120px) rotate(0deg); } to { transform: rotate(360deg) translateX(120px) rotate(-360deg); } }
    @keyframes rotateAroundGlobe2 { from { transform: rotate(40deg) translateX(120px) rotate(-40deg); } to { transform: rotate(400deg) translateX(120px) rotate(-400deg); } }
    @keyframes rotateAroundGlobe3 { from { transform: rotate(80deg) translateX(120px) rotate(-80deg); } to { transform: rotate(440deg) translateX(120px) rotate(-440deg); } }
    @keyframes rotateAroundGlobe4 { from { transform: rotate(120deg) translateX(120px) rotate(-120deg); } to { transform: rotate(480deg) translateX(120px) rotate(-480deg); } }
    @keyframes rotateAroundGlobe5 { from { transform: rotate(160deg) translateX(120px) rotate(-160deg); } to { transform: rotate(520deg) translateX(120px) rotate(-520deg); } }
    @keyframes rotateAroundGlobe6 { from { transform: rotate(200deg) translateX(120px) rotate(-200deg); } to { transform: rotate(560deg) translateX(120px) rotate(-560deg); } }
    @keyframes rotateAroundGlobe7 { from { transform: rotate(240deg) translateX(120px) rotate(-240deg); } to { transform: rotate(600deg) translateX(120px) rotate(-600deg); } }
    @keyframes rotateAroundGlobe8 { from { transform: rotate(280deg) translateX(120px) rotate(-280deg); } to { transform: rotate(640deg) translateX(120px) rotate(-640deg); } }
    @keyframes rotateAroundGlobe9 { from { transform: rotate(320deg) translateX(120px) rotate(-320deg); } to { transform: rotate(680deg) translateX(120px) rotate(-680deg); } }
}

/* Badge icons spin on hover - CSS only, no page load blocking */
.advantage-badge .badge-icon {
    transition: transform 0.6s ease;
}

.advantage-badge:hover .badge-icon {
    transform: rotate(360deg) scale(1.1);
}

/* Globe rotates on its own axis - 60 seconds per rotation */
.globe-image {
    animation: rotateGlobe 60s linear infinite !important;
}