/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* --- HERO OVERLAY --- */
.hero-overlay {
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.6));
}

/* --- SMOOTH SCROLL --- */
html {
    scroll-behavior: smooth;
}

/* =========================================
   MOBILE MENU BREAKPOINT CONTROLS
   NOTE: We use !important here to override 
   Tailwind's 'flex' and 'hidden' utility classes.
   ========================================= */
/* Default State (Mobile/Small Screens) */
.nav-desktop {
    display: none !important;

    /* Force hide links on mobile */
}

.nav-mobile-toggle {
    display: flex !important;

    /* Force show hamburger on mobile */
}

/* Desktop State (Larger Screens) */
@media (min-width: 680px) {
    .nav-desktop {
        display: flex !important;

        /* Force show links on desktop */
        align-items: center;
        gap: 2rem;
    }

    .nav-mobile-toggle {
        display: none !important;

        /* Force hide hamburger on desktop */
    }

    /* Force hide the mobile dropdown menu logic if window is resized to desktop */
    #mobile-menu {
        display: none !important;
    }
}

/* colours */
.bg-blue-800 {
    background-color: #0d6efd;
}