/* Custom Styles & Utilities */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #F5F5F0;
    color: #1d3030;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: #2F4F4F;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile Menu Transitions */
#mobile-menu {
    pointer-events: none;
}

#mobile-menu.active {
    pointer-events: all;
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
}

/* Form Styling */
input, select, textarea {
    font-family: 'Outfit', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F5F0;
}

::-webkit-scrollbar-thumb {
    background: #c5d8cc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9bb8a5;
}

/* Animation Delays for Grid Items */
.reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal:nth-child(2) { transition-delay: 0.2s; }
.reveal:nth-child(3) { transition-delay: 0.3s; }
.reveal:nth-child(4) { transition-delay: 0.4s; }
.reveal:nth-child(5) { transition-delay: 0.5s; }
.reveal:nth-child(6) { transition-delay: 0.6s; }