.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
}

html {
    font-size: 16px;
}

@media (min-width: 1024px) {
    html {
        font-size: 105%; /* Globally scales all typography and rem-based elements by ~5% for web view */
    }
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Lexend', sans-serif !important;
    opacity: 0;
    animation: smoothReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Page Load Progress Bar */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, #005da7, #2976c7);
    z-index: 10001;
    animation: loadProgress 1.5s ease-out forwards;
}

@keyframes loadProgress {
    0% { width: 0; }
    50% { width: 70%; }
    100% { width: 100%; opacity: 0; }
}


h1, h2, h3, h4, h5, h6, .font-headline {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.signature-gradient {
    background: linear-gradient(135deg, #005da7 0%, #2976c7 100%);
}

.education-pattern {
    background-image: radial-gradient(#c1c7d3 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.1;
}

.horizontal-ticker-container {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.horizontal-ticker {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    animation: scrollRight 30s linear infinite;
}

@keyframes scrollRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes scrollLeftToRight {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.animate-ticker-ltr {
    animation: scrollLeftToRight 40s linear infinite;
}

.vertical-ticker {
    display: flex;
    flex-direction: column;
    animation: scrollUp 15s linear infinite;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.animate-bounce-slow {
    animation: bounce 3s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-5%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Interactive Hover Utilities */
.hover-lift {
    position: relative;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.hover-lift::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

.hover-lift:hover, .hover-lift:active {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.hover-glow:hover {
    filter: drop-shadow(0 0 8px rgba(0, 93, 167, 0.4));
}

.reveal-on-scroll {
    opacity: 0;
}

.mask-linear-v {
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* Cinematic Effects */
.floating {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.shimmer-effect {
    position: relative;
    overflow: hidden;
}

.shimmer-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 100%
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.shimmer-effect:hover::after {
    left: 100%;
    top: 100%;
}

/* 3D Card Effect */
.college-card {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3D hover only on desktop — preserve-3d causes invisible cards on mobile WebKit */
@media (hover: hover) and (pointer: fine) {
    .college-card:hover {
        transform: translateY(-12px) perspective(1000px) rotateX(4deg) rotateY(2deg);
        box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.15);
    }
}

/* Nav Underline Effect */
.nav-link {
    position: relative;
    padding-bottom: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #005da7;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.college-card img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.btn-premium {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.btn-premium:active {
    transform: scale(0.95);
}

.glass-nav.scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.reveal-on-scroll.active {
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.blob-primary { background: #005da7; width: 400px; height: 400px; }
.blob-secondary { background: #2976c7; width: 300px; height: 300px; }

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 64px;
    height: 64px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(10deg);
    background-color: #128C7E;
    box-shadow: 0 15px 40px rgba(18, 140, 126, 0.5);
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: white;
}

@keyframes pulse-whatsapp {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-float {
    animation: pulse-whatsapp 2s infinite;
}

/* ============================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   All rules below only affect screens < 768px (mobile).
   Desktop view is completely untouched.
   ============================================================ */

/* ── Mobile Bottom Navigation Bar ── */
#mobile-bottom-nav {
    display: none; /* Hidden on desktop */
}

@media (max-width: 767px) {

    /* ── 1. Bottom Navigation Bar ── */
    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        z-index: 9999;
        align-items: stretch;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.06);
    }

    .mob-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 3px;
        text-decoration: none;
        color: #717783;
        font-family: 'Lexend', sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-height: 48px;
    }

    .mob-nav-item .material-symbols-outlined {
        font-size: 22px;
        transition: all 0.2s ease;
    }

    .mob-nav-item.active,
    .mob-nav-item:active {
        color: #005da7;
    }

    .mob-nav-item.active .material-symbols-outlined {
        font-variation-settings: 'FILL' 1, 'wght' 600;
        color: #005da7;
    }

    .mob-nav-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mob-nav-cta-inner {
        background: linear-gradient(135deg, #005da7 0%, #2976c7 100%);
        color: white;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(0, 93, 167, 0.35);
        transition: transform 0.2s ease;
        margin-bottom: 2px;
    }

    .mob-nav-cta-inner .material-symbols-outlined {
        font-size: 22px;
        color: white;
    }

    .mob-nav-cta:active .mob-nav-cta-inner {
        transform: scale(0.92);
    }

    .mob-nav-cta-label {
        font-family: 'Lexend', sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: #005da7;
    }

    /* ── 2. Body padding for bottom nav ── */
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* ── 3. Shrink WhatsApp FAB on mobile ── */
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        right: 1rem;
        animation: none; /* Disable pulse on mobile for cleaner UX */
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    }

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

    /* ── 4. Shrink the "Important Updates" side trigger tab on mobile ── */
    #updates-trigger {
        width: 40px !important;
        height: 72px !important;
        border-radius: 0 16px 16px 0 !important;
    }

    /* ── 5. Fix sections with hard-coded px-8 padding on mobile ── */
    /* This prevents horizontal overflow on small screens */
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ── 6. CTA sections with huge text — scale down on mobile ── */
    /* Targets the "Ready to take the first step?" headings */
    .font-headline.text-5xl,
    h2.text-5xl,
    .font-headline.text-7xl,
    h2.text-7xl {
        font-size: 2.25rem !important; /* 36px — readable on mobile */
        line-height: 1.2 !important;
    }

    /* ── 7. Blog hero split-screen height fix ── */
    /* Blog page hero is 600px fixed height — allow it to stack naturally */
    .flex-col.md\:flex-row.h-auto.md\:h-\[600px\] {
        height: auto !important;
    }

    /* ── 8. Better padding for main containers on mobile ── */
    main.pt-20 {
        padding-top: 72px;
    }

    /* ── 9. Improve hero section padding on mobile ── */
    section.relative.min-h-\[50vh\].px-8,
    section.relative.min-h-\[70vh\].px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ── 10. Student Spotlight quote text scaling ── */
    .text-4xl.md\:text-5xl.font-headline {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    /* ── 11. Card padding reduction on mobile ── */
    .p-12.md\:p-24,
    .p-8.sm\:p-12.md\:p-24 {
        padding: 1.5rem !important;
    }

    /* ── Shrink College Cards (Explore & Course Pages) ── */
    .college-card .h-48,
    .college-card-item .h-56 {
        height: 9rem !important; /* 144px for images instead of 192/224px */
    }
    .college-card .p-6,
    .college-card-item .p-8 {
        padding: 1rem !important; /* 16px padding instead of 24/32px */
    }
    .college-card-item h3.text-xl {
        font-size: 1.125rem !important; /* 18px */
    }
    .college-card h3.text-lg {
        font-size: 1rem !important; /* 16px */
    }
    .college-card .gap-3,
    .college-card-item .gap-3 {
        gap: 0.5rem !important; /* tighter button spacing */
    }
    .college-card .py-3,
    .college-card-item .py-3,
    .college-card-item .py-4 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important; /* smaller buttons */
    }

    /* ── 12. Ensure images in hero slideshow don't overflow ── */
    .hero-slideshow img,
    section img.absolute {
        max-width: 100%;
    }

    /* ── 13. Partner Institution card widths on mobile (Course Page Carousel) ── */
    .flex-none.w-\[280px\],
    .flex-none.w-\[380px\],
    .flex-none.min-w-\[350px\] {
        width: 72vw !important; /* Made smaller than previous 80vw */
        min-width: unset !important;
    }

    /* ── Course Info Div Compact Mobile View ── */
    /* Main container padding and margin */
    div.bg-surface-container-low.rounded-\[1\.5rem\] {
        padding: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Force stats grid to be 3 columns instead of 1 column vertical stack */
    div.bg-surface-container-low .grid.grid-cols-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        margin-top: 1rem !important;
    }
    
    /* Change borders to be vertical separators instead of horizontal */
    div.bg-surface-container-low .grid > div {
        border-bottom: none !important;
        border-right: 1px solid rgba(15, 23, 42, 0.05) !important;
        padding-bottom: 0 !important;
    }
    div.bg-surface-container-low .grid > div:last-child {
        border-right: none !important;
    }
    
    /* Shrink the stat values and labels */
    div.bg-surface-container-low .grid .text-xl {
        font-size: 0.875rem !important; /* Smaller text for stats */
    }
    div.bg-surface-container-low .grid .text-\[10px\] {
        font-size: 8px !important;
        letter-spacing: 0.1em !important;
    }

    /* Shrink course title and description */
    div.bg-surface-container-low h2.text-2xl {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    div.bg-surface-container-low p.text-sm {
        font-size: 0.875rem !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide the huge background icon on mobile for a cleaner look */
    div.bg-surface-container-low .absolute.-right-12.-bottom-12 {
        display: none !important;
    }

    /* ── 14. Before/After case study grids on code page ── */
    .grid.grid-cols-2 > div {
        padding: 1.25rem !important;
    }

    /* ── 15. Success section image mosaic height on mobile ── */
    .lg\:col-span-6.order-1.relative.h-\[320px\] {
        height: 260px !important;
        margin-bottom: 2rem;
    }

    /* ── 16. Counter numbers scaling on mobile ── */
    .text-5xl.font-black.text-on-surface {
        font-size: 2.5rem !important;
    }

    /* ── 17. Make form card padding reasonable on mobile ── */
    #form-card {
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
    }

    /* ── 18. Fix the updates drawer to not exceed screen height on mobile ── */
    #updates-drawer {
        width: 88vw !important;
        max-width: 340px;
    }

    /* ── 19. Section padding adjustments ── */
    section.py-24.px-8,
    section.py-32.px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── 20. Floating badge on hero images scaling ── */
    .absolute.-bottom-6.-right-6,
    .absolute.-bottom-4.-right-4 {
        padding: 0.75rem !important;
        border-radius: 1rem !important;
    }

    /* ── 21. Active nav item indicator dot ── */
    .mob-nav-item::after {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: transparent;
        transition: background 0.2s ease;
        position: absolute;
        bottom: 6px;
    }

    .mob-nav-item.active::after {
        background: #005da7;
    }

    /* ── 22. Footer bottom padding with safe area ── */
    #main-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    }

    /* ── 23. Improve horizontal ticker readability on mobile ── */
    .horizontal-ticker-container {
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    /* ── 24. Blog category pills — ensure they don't overflow ── */
    section.py-8.px-6.overflow-x-auto {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* ── 25. Smooth scroll momentum on iOS ── */
    .hide-scrollbar,
    [id$="-scroll-container"],
    .overflow-x-auto,
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }
}