/* New Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root {
    --primary: #204045; /* Dark teal */
    --secondary: #7e9693; /* Muted teal */
    --accent: #e9e6e4; /* Light cream */
    --light: #ffffff; /* White */
    --dark: #333333; /* Darker gray for better contrast */
    --gray: #6c757d; /* Gray */
}

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--light);
    color: var(--primary);
}
/* Gradient Text */
.gradient-text {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Buttons */
.btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-300;
}
.btn-primary {
    @apply bg-gradient-to-r from-primary to-secondary text-white hover:opacity-90;
}
.btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
}
/* Cards */
.card {
    @apply bg-white rounded-xl shadow-sm overflow-hidden transition-all duration-300;
    color: var(--dark);
}
.card:hover {
    @apply shadow-lg transform -translate-y-1;
}
/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* Navigation */
nav {
    @apply fixed w-full top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100;
}
nav.scrolled {
    @apply shadow-sm bg-white;
}

/* Mobile Menu */
.mobile-menu {
    @apply fixed inset-0 bg-white z-40 flex flex-col items-center justify-center opacity-0 pointer-events-none transition-all duration-300;
}
.mobile-menu.active {
    @apply opacity-100 pointer-events-auto;
}

/* Utility Classes */
.max-w-site {
    @apply max-w-7xl mx-auto px-4;
}