/* =============================================
   LIGHT THEME - PREMIUM MEDICAL DESIGN
   Clean white/light gray palette with teal accents
   ============================================= */

:root {
    --light-bg: #ffffff;
    --light-bg-secondary: #f8fafc;
    --light-bg-tertiary: #f1f5f9;
    --teal-600: #0d9488;
    --teal-500: #14b8a6;
    --blue-600: #2563eb;
    --gray-900: #0f172a;
    --gray-800: #1e293b;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-500: #64748b;
}

/* Global Light Theme */
html, body {
    background-color: #f8fafc;
    color: #1e293b;
}

/* =============================================
   NAVBAR - LIGHT THEME
   ============================================= */

.nav-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.main-nav.nav-scrolled .nav-container {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

.nav-brand-name {
    color: #0f172a;
}

.nav-subtitle {
    color: #0d9488;
}

.nav-link {
    color: #475569;
}

.nav-link:hover,
.nav-link.active {
    color: #0d9488;
    background: rgba(14, 165, 233, 0.08);
}

.nav-mobile-toggle {
    color: #1e293b;
}

.nav-mobile-toggle:hover {
    background: rgba(14, 165, 233, 0.1);
}

.nav-mobile-menu {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
}

.nav-mobile-link {
    color: #475569;
}

.nav-mobile-link:hover,
.nav-mobile-link.active {
    color: #0d9488;
    background: rgba(14, 165, 233, 0.08);
}

/* =============================================
   TOP BANNER - LIGHT THEME
   ============================================= */

.top-banner-new {
    background: linear-gradient(135deg, rgba(248, 250, 252, 1), rgba(241, 245, 249, 1));
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
}

.top-banner-item {
    color: #475569;
}

.top-banner-item:hover {
    color: #0d9488;
}

.top-banner-icon {
    color: #0d9488;
}

.top-banner-social-label {
    color: #64748b;
}

.top-banner-social-link {
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.15);
    color: #64748b;
}

.top-banner-social-link:hover {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.4);
    color: #0d9488;
}

/* =============================================
   HERO SECTION - LIGHT THEME
   ============================================= */

.hero-section-new {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-badge-new {
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.3);
    color: #0d9488;
}

.hero-heading-new {
    color: #0f172a;
}

.hero-text-new {
    color: #475569;
}

.hero-feature-item {
    color: #1e293b;
}

.hero-btn-secondary-new {
    background: rgba(14, 165, 233, 0.08);
    border: 1.5px solid rgba(14, 165, 233, 0.3);
    color: #0d9488;
}

.hero-btn-secondary-new:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.5);
    color: #0d9488;
}

.hero-image-card {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.95));
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.hero-stats-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hero-stat-label {
    color: #64748b;
}

/* =============================================
   SERVICE CARDS - LIGHT THEME
   ============================================= */

.service-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.service-card:hover {
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}

.service-title {
    color: #0f172a;
}

.service-description {
    color: #64748b;
}

.service-detail-text {
    color: #475569;
}

/* =============================================
   CARDS - LIGHT THEME
   ============================================= */

.card-premium,
.premium-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.card-premium:hover,
.premium-card:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
}

.section-title,
.contact-title-new,
.pricing-title-new,
.faq-title-new,
.wcu-title-new {
    color: #0f172a;
}

.section-description,
.contact-subtitle-new,
.pricing-subtitle-new,
.faq-subtitle-new,
.wcu-subtitle-new {
    color: #475569;
}

/* =============================================
   CONTACT PAGE - LIGHT THEME
   ============================================= */

.contact-section-new {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.contact-info-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.contact-info-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.contact-card-title {
    color: #0f172a;
}

.contact-card-text {
    color: #64748b;
}

.contact-action-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.contact-action-title {
    color: #0f172a;
}

.contact-action-text {
    color: #475569;
}

.contact-social-link {
    background: rgba(14, 165, 233, 0.04);
    border: 1px solid rgba(14, 165, 233, 0.15);
}

.contact-social-link:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.3);
}

.contact-social-name {
    color: #0f172a;
}

.contact-social-desc {
    color: #64748b;
}

/* =============================================
   PRICING - LIGHT THEME
   ============================================= */

.pricing-section-new {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.pricing-card-new {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.pricing-card-new:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.pricing-card-featured {
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 20px 50px rgba(14, 165, 233, 0.15);
}

.pricing-card-title {
    color: #0f172a;
}

.pricing-card-description {
    color: #475569;
}

.pricing-feature {
    color: #475569;
}

.pricing-footer-note {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
}

.pricing-note-text {
    color: #475569;
}

.pricing-note-text strong {
    color: #0f172a;
}

/* =============================================
   CAROUSEL - LIGHT THEME
   ============================================= */

.carousel-overlay-premium {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.9));
}

.carousel-content-premium {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.carousel-title-premium {
    color: #0f172a;
}

.carousel-description-premium {
    color: #475569;
}

.carousel-btn-premium {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(14, 165, 233, 0.3);
}

.carousel-btn-premium:hover {
    background: rgba(255, 255, 255, 1);
}

/* =============================================
   FEATURED SERVICES - LIGHT THEME
   ============================================= */

.featured-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.featured-item:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.featured-item-description {
    color: #475569;
}

/* =============================================
   FAQ - LIGHT THEME
   ============================================= */

.faq-section-new,
.wcu-section-new {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.faq-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
}

.faq-item:hover {
    border-color: rgba(14, 165, 233, 0.35);
}

.faq-question-text {
    color: #0f172a;
}

.faq-answer-text {
    color: #475569;
}

.faq-answer-detail {
    color: #64748b;
    border-left: 2px solid rgba(14, 165, 233, 0.3);
}

.wcu-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(14, 165, 233, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.wcu-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.wcu-card-title {
    color: #0f172a;
}

.wcu-card-description {
    color: #475569;
}

/* =============================================
   FOOTER - LIGHT THEME
   ============================================= */

.footer-new {
    background: linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%);
    border-top: 1px solid rgba(14, 165, 233, 0.15);
}

.footer-new::before {
    background: linear-gradient(90deg, transparent, #0d9488 30%, #2563eb 50%, #0d9488 70%, transparent);
}

.footer-brand-name {
    color: #0f172a;
}

.footer-brand-tagline {
    color: #0d9488;
}

.footer-brand-description {
    color: #64748b;
}

.footer-column-title {
    color: #0f172a;
}

.footer-link-new {
    color: #64748b;
}

.footer-link-new:hover {
    color: #0d9488;
}

.footer-contact-item {
    color: #475569;
}

.footer-contact-item:hover {
    color: #0d9488;
}

.footer-social-title {
    color: #0f172a;
}

.footer-social-icon {
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.15);
    color: #64748b;
}

.footer-social-icon:hover {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.4);
    color: #0d9488;
}

.footer-cta-card {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(37, 99, 235, 0.08));
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.footer-cta-title {
    color: #0f172a;
}

.footer-cta-text {
    color: #64748b;
}

.footer-trust-badge {
    background: rgba(14, 165, 233, 0.04);
    border: 1px solid rgba(14, 165, 233, 0.15);
}

.footer-trust-text {
    color: #475569;
}

.footer-copyright,
.footer-status-text {
    color: #64748b;
}

/* =============================================
   ABOUT US SECTION - LIGHT THEME
   ============================================= */

.aboutus-section {
    background: #f8fafc;
}

/* =============================================
   SHARED BACKGROUND - LIGHT THEME
   ============================================= */

.shared-background.bg-main-banner {
    opacity: 0.3;
}

.shared-background.bg-faq {
    opacity: 0.2;
}