@layer base {

    html,
    body {
        /* Prevent horizontal scroll */
        overflow-x: hidden;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Merriweather', serif;
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Add gradient overlay for hero section */
.hero-overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

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

/* Card hover effects */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Custom button styles */
.custom-button {
    background: linear-gradient(135deg, #7d2323 0%, #a93737 100%);
    transition: all 0.3s ease;
}

.custom-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Mobile Menu Animation */
#mobile-menu {
    transition: opacity 300ms ease, transform 300ms ease;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

#mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}