@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Base Styles */
html {
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}
.dark ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 104, 119, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 104, 119, 0.5);
}

/* Glassmorphism Styles */
.glass-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 32px 0 rgba(0, 104, 119, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .glass-card {
    background: rgba(20, 27, 43, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass-panel {
    background: rgba(20, 27, 43, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Card Hover Shiny Effect */
.glass-card-hover:hover {
    background: rgba(255, 255, 255, 0.65);
    transform: translateY(-6px);
    border-color: rgba(0, 104, 119, 0.3);
    box-shadow: 0 20px 40px rgba(0, 104, 119, 0.08);
}

.dark .glass-card-hover:hover {
    background: rgba(20, 27, 43, 0.65);
    border-color: rgba(88, 215, 240, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Gradients */
.gradient-text {
    background: linear-gradient(135deg, #006877 0%, #00a9bd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark .gradient-text {
    background: linear-gradient(135deg, #58d7f0 0%, #00e5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 169, 193, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
    filter: blur(60px);
}

.dark .hero-glow {
    background: radial-gradient(circle, rgba(88, 215, 240, 0.06) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Floating Animations */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

.pulse-slow {
    animation: pulse-slow 8s ease-in-out infinite;
}

/* Shimmer reflection */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    animation: shimmer-anim 8s infinite linear;
}

@keyframes shimmer-anim {
    0% { transform: translate(-100%, -100%) rotate(45deg); }
    100% { transform: translate(100%, 100%) rotate(45deg); }
}

/* Custom styles for dropdowns and icons */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.menu-active {
    color: #006877;
    font-weight: 700;
    border-bottom: 2px solid #006877;
}

.dark .menu-active {
    color: #58d7f0;
    border-bottom: 2px solid #58d7f0;
}