/* Custom CSS for animations and additional styling */

/* Font Family */
body {
    font-family: 'Inter', sans-serif;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInTop {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes flipIn {
    from {
        transform: rotateX(90deg);
        opacity: 0;
    }

    to {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animations */
.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 1s ease-out forwards;
}

.animate-slide-in-top {
    animation: slideInTop 0.8s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-zoom-in {
    animation: zoomIn 0.6s ease-out forwards;
}

.animate-flip-in {
    animation: flipIn 0.8s ease-out forwards;
}

.animate-slide-in-bottom {
    animation: slideInBottom 0.8s ease-out forwards;
}

/* Initial hidden state for scroll-triggered animations */
.animate-fade-in-section,
.animate-slide-in-top,
.animate-fade-in-left,
.animate-fade-in-right,
.animate-zoom-in,
.animate-flip-in,
.animate-slide-in-bottom {
    opacity: 0;
}

/* Specific styling for sections */
section {
    padding-top: 5rem;
    /* Adjust for fixed header */
    padding-bottom: 5rem;
}

/* Hero section background overlay */
#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom right, rgba(72, 145, 89, 0.8), rgba(21, 87, 36, 0.8));
    /* Lemon green gradient */
    z-index: 0;
}

#home>div {
    position: relative;
    /* Ensure content is above overlay */
    z-index: 1;
}

/* Mobile menu overlay */
#mobile-menu-overlay {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

#mobile-menu-overlay.open {
    transform: translateX(0);
}

/* Custom colors based on lemon green and white */
.bg-green-700 {
    background-color: #155724;
}

/* Darker lemon green */
.text-green-700 {
    color: #155724;
}

.bg-green-500 {
    background-color: #28a745;
}

/* Standard lemon green */
.hover\:bg-green-600:hover {
    background-color: #218838;
}

.text-green-600 {
    color: #218838;
}

.text-green-500 {
    color: #28a745;
}

.bg-gray-50 {
    background-color: #f9fafb;
}

/* Light gray for sections */
.text-green-400 {
    color: #5cb85c;
}

.hover\:text-green-300:hover {
    color: #4cae4c;
}

/* Rounded corners for all elements (Tailwind handles most of this, but adding a general rule) */
* {
    border-radius: 0.5rem;
    /* Apply a default border-radius */
}

/* Specific overrides for elements that might not get default rounded corners or need more */
img,
.rounded-lg {
    border-radius: 0.75rem;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}