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

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #1E293B; background-color: #F8FAFC; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: #0E7490; letter-spacing: -0.025em; }

.section-padding { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 1024px) { .section-padding { padding-top: 7rem; padding-bottom: 7rem; } }

.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.animate-on-scroll-active { opacity: 1; transform: translateY(0); }
.animate-delay-100 { transition-delay: 100ms; }
.animate-delay-200 { transition-delay: 200ms; }
.animate-delay-300 { transition-delay: 300ms; }
.animate-delay-400 { transition-delay: 400ms; }

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

.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #0E7490; transition: width 0.3s ease; }
.nav-link:hover::after, .active-nav-link::after { width: 100%; }

.bg-medical-pattern { background-image: radial-gradient(#14B8A6 1px, transparent 1px); background-size: 20px 20px; opacity: 0.05; }

/* Modal animations */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}
.modal-content {
    transition: all 0.3s ease;
    transform: scale(0.95);
    opacity: 0;
}
.modal-active .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Continuous Marquee Slider */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: inline-flex;
    animation: scroll 40s linear infinite;
    gap: 2rem;
}

.marquee-content:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}