/* Custom styles to supplement Tailwind */
    
    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Lato:wght@300;400;700&display=swap');

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

    h1, h2, h3, h4, .font-cinzel {
        font-family: 'Cinzel', serif;
    }

    /* Smooth Scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Selection Color */
    ::selection {
        background: #00FFD1;
        color: #040b14;
    }

    /* Scrollbar Styling */
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #040b14;
    }
    ::-webkit-scrollbar-thumb {
        background: #00FFD1;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #00b89c;
    }

    /* Animation Classes */
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-out;
    }

    .reveal-on-scroll.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Mobile Menu Transitions */
    #mobile-menu.open {
        opacity: 1;
        pointer-events: all;
    }
    
    /* Custom Gradient Text Utility */
    .text-gradient {
        background: linear-gradient(to right, #00FFD1, #00b89c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Mobile Menu Button Hover */
    #mobile-menu-btn:hover path {
        stroke: #00FFD1;
    }