h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
}

body {
    font-family: "Poppins", sans-serif;
}

/* ── Custom Premium Cursor Styles ── */
@media (pointer: fine) {
    /* Hide the default system cursor on desktop */
    html, body, a, button, input, select, textarea, [role="button"], .cursor-pointer, .glightbox, .swiper-button-next, .swiper-button-prev {
        cursor: none !important;
    }

    /* Inner Dot */
    .custom-cursor-dot {
        width: 8px;
        height: 8px;
        background-color: var(--brand-dark, #063c64);
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 999999;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                    background-color 0.3s ease, 
                    box-shadow 0.3s ease;
        opacity: 0;
        will-change: transform;
    }

    /* Outer Ring */
    .custom-cursor-outline {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 999998;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(6, 60, 100, 0.4);
        background-color: transparent;
        transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        opacity: 0;
        will-change: transform;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.02);
        backdrop-filter: blur(0.5px);
    }

    /* ── Light Sections / Dark Theme Cursor (Default over white backgrounds) ── */
    body[data-cursor-theme="dark"] .custom-cursor-dot {
        background-color: var(--brand-dark, #063c64);
        box-shadow: 0 0 6px rgba(6, 60, 100, 0.2);
    }
    
    body[data-cursor-theme="dark"] .custom-cursor-outline {
        border-color: rgba(6, 60, 100, 0.45);
    }

    /* ── Dark Sections / Light Theme Cursor (Over navy/dark backgrounds) ── */
    body[data-cursor-theme="light"] .custom-cursor-dot {
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 4px #38bdf8;
    }
    
    body[data-cursor-theme="light"] .custom-cursor-outline {
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.2), inset 0 0 6px rgba(255, 255, 255, 0.1);
    }

    /* ── Click / Active State ── */
    body.cursor-active .custom-cursor-outline {
        width: 28px !important;
        height: 28px !important;
        background-color: rgba(6, 60, 100, 0.15) !important;
        border-color: var(--brand-dark, #063c64) !important;
        box-shadow: 0 0 8px rgba(6, 60, 100, 0.2);
    }

    body.cursor-active[data-cursor-theme="light"] .custom-cursor-outline {
        background-color: rgba(255, 255, 255, 0.25) !important;
        border-color: #ffffff !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    }

    /* ── Hover / Interactive States (Links, buttons, etc.) ── */
    body.cursor-hovered .custom-cursor-dot {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }

    /* Hover over light background: expands to beautiful navy ring */
    body.cursor-hovered[data-cursor-theme="dark"] .custom-cursor-outline {
        width: 58px;
        height: 58px;
        background-color: rgba(6, 60, 100, 0.08);
        border-color: var(--brand-mid, #0a558c);
        box-shadow: 0 0 20px rgba(6, 60, 100, 0.15), inset 0 0 10px rgba(6, 60, 100, 0.02);
        backdrop-filter: blur(1.5px);
    }

    /* Hover over dark background: expands to beautiful white/glow ring */
    body.cursor-hovered[data-cursor-theme="light"] .custom-cursor-outline {
        width: 58px;
        height: 58px;
        background-color: rgba(255, 255, 255, 0.12);
        border-color: #ffffff;
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.35), inset 0 0 12px rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(1.5px);
    }
}