/* Custom Tailwind configuration for a light, modern theme */
/* Note: This should ideally be in a separate file and compiled with a build process */
/* For a simple CDN setup, it can be kept in the HTML head or moved here if no build step is used */
/* This is a reference of the original Tailwind config */
/*
tailwind.config = {
    theme: {
        extend: {
            colors: {
                'primary-light': '#f8fafc',
                'secondary-light': '#e2e8f0',
                'accent-blue': '#3b82f6',
                'accent-teal': '#2dd4bf',
                'dark-text': '#1e293b',
                'gray-text': '#64748b',
            },
            fontFamily: {
                sans: ['Poppins', 'sans-serif'],
            }
        }
    }
}
*/

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

/* Custom styles for mobile menu transition */
.mobile-menu-container {
    max-height: 0;
    transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}
.mobile-menu-container.open {
    max-height: 500px;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active link color */
.nav-link.active, .mobile-nav-link.active {
    color: #3b82f6; /* Accent Blue */
}

/* Active language button style */
.lang-btn.active-lang {
    background-color: #3b82f6; /* Accent Blue */
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Animation for page content */
.page-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.page-content.active-page {
    opacity: 1;
    transform: translateY(0);
}

/* Specific animations for elements */
.animate-fade-in {
    animation: fadeIn 1s ease-in-out;
}
.animate-fade-in-slow {
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}