.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f8f9fa;
    color: #212529;
}

a {
    position: relative;
    text-decoration: none;
    display: inline-block;
}

a:not(.no-underline)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease-in-out;
}

a:not(.no-underline):hover::after {
    width: 100%;
}

nav a:not(.no-underline)::after, .mobile-nav-link:not(.no-underline)::after {
    bottom: -4px; /* Slightly more offset for nav links */
}

footer a::after {
    content: none;
}



h1,
h2,
h3,
.font-serif {
    font-family: 'Newsreader', serif;
}

.hero-gradient {
    background: linear-gradient(to bottom right, rgba(27, 67, 50, 0.05), rgba(74, 99, 86, 0.05));
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fly-in-bottom { transform: translateY(40px); }
.fly-in-left { transform: translateX(-50px); }
.fly-in-right { transform: translateX(50px); }
.scale-in { transform: scale(0.95); }

.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }