/* ============================================
   🏠 HOMEPAGE CSS - START
   ============================================ */

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


/* ============================================
   🎨 SECTION 1: HEADER CONTROLS
   Change these to change ONLY the header
   ============================================ */
:root {
    /* ----- Header Background ----- */
    --header-bg: #FFFFFF;              /* ← Header background color */
    --header-border: #E5E7EB;          /* ← Bottom border color */
    
    /* ----- Logo Controls ----- */
    --header-logo: #212529;            /* ← "OSWAGO" text color */
    --header-logo-size: 1.5rem;        /* ← "OSWAGO" font size */
    --header-logo-weight: 700;         /* ← "OSWAGO" font weight */
    
    --header-logo-sub: #666666;        /* ← "HOSPITAL" text color */
    --header-logo-sub-size: 0.875rem;  /* ← "HOSPITAL" font size */
    --header-logo-sub-weight: 400;     /* ← "HOSPITAL" font weight */
    
    /* ----- Navigation Link Controls ----- */
    --header-link: #333333;            /* ← Normal link color */
    --header-link-hover: #212529;      /* ← Link hover color */
    --header-link-active: #4109c4;     /* ← Active page link color */
    --header-link-size: 0.875rem;      /* ← Link font size */
    --header-link-weight: 500;         /* ← Link font weight */
    
    /* ----- "Book Appointment" Button ----- */
    --header-btn-bg: #4109c4;          /* ← Button background */
    --header-btn-text: #FFFFFF;        /* ← Button text color */
    --header-btn-hover: #4109c4;       /* ← Button hover background */
    --header-btn-size: 0.875rem;       /* ← Button font size */
    --header-btn-weight: 600;          /* ← Button font weight */
    
    /* ----- Hamburger Menu (Mobile) ----- */
    --header-hamburger: #212529;       /* ← Hamburger icon color */
}


/* ============================================
   🎨 SECTION 2: HERO CONTROLS
   Change these to change ONLY the hero
   ============================================ */
:root {
    /* ----- Hero Badge Controls ----- */
    --hero-badge-text: rgba(255,255,255,0.9);  /* ← Badge text color */
    --hero-badge-border: rgba(255,255,255,0.3);/* ← Badge border color */
    --hero-badge-size: 0.9rem;                 /* ← Badge font size */
    --hero-badge-weight: 500;                  /* ← Badge font weight */
    --hero-badge-spacing: 4px;                 /* ← Badge letter spacing */
    
    /* ----- Hero Title Controls ----- */
    --hero-title-white: #FFFFFF;       /* ← "Better Health" color */
    --hero-title-white-size: 4.5rem;   /* ← "Better Health" font size */
    --hero-title-white-weight: 700;    /* ← "Better Health" font weight */
    
    --hero-title-green: #93C750;       /* ← "For Everyone" color */
    --hero-title-green-size: 2.8rem;   /* ← "For Everyone" font size */
    --hero-title-green-weight: 500;    /* ← "For Everyone" font weight */
    
    /* ----- Hero Service Card Controls ----- */
    --hero-service-text: #FFFFFF;      /* ← Service title color */
    --hero-service-text-size: 1.2rem;  /* ← Service title font size */
    --hero-service-text-weight: 700;   /* ← Service title font weight */
    --hero-service-spacing: 2px;       /* ← Service title letter spacing */
    
    --hero-service-desc: rgba(255,255,255,0.8); /* ← Description color */
    --hero-service-desc-size: 0.85rem;          /* ← Description font size */
    --hero-service-desc-weight: 400;            /* ← Description font weight */
    
    --hero-service-icon: #FFFFFF;      /* ← Service icon color */
    --hero-service-icon-size: 2.5rem;  /* ← Service icon size */
}


/* ============================================
   🎨 SECTION 3: CTA BANNER CONTROLS
   Change these to change ONLY the CTA
   ============================================ */
:root {
    /* ----- CTA Background ----- */
    --cta-bg: #FFFFFF;                 /* ← CTA background color */
    --cta-border: #E5E7EB;             /* ← Top/bottom border */
    
    /* ----- CTA Title Controls ----- */
    --cta-title: #adabab;              /* ← "WE ALWAYS READY..." color */
    --cta-title-size: 1rem;            /* ← Title font size */
    --cta-title-weight: 400;           /* ← Title font weight */
    --cta-title-spacing: 3px;          /* ← Title letter spacing */
    
    /* ----- CTA "Book An" Controls ----- */
    --cta-book-an: #212529;            /* ← "Book An" color */
    --cta-book-an-size: 3rem;          /* ← "Book An" font size */
    --cta-book-an-weight: 700;         /* ← "Book An" font weight */
    --cta-book-an-spacing: 5px;        /* ← "Book An" letter spacing */
    
    /* ----- CTA "Appointment" Controls ----- */
    --cta-appointment: #93C750;        /* ← "Appointment" color */
    --cta-appointment-size: 3rem;      /* ← "Appointment" font size */
    --cta-appointment-weight: 300;     /* ← "Appointment" font weight */
    --cta-appointment-spacing: 2px;    /* ← "Appointment" letter spacing */
    
    /* ----- CTA "Book Now" Button Controls ----- */
    --cta-btn-bg: #4109c4;             /* ← Button background */
    --cta-btn-text: #FFFFFF;           /* ← Button text color */
    --cta-btn-hover: #4109c4;          /* ← Button hover background */
    --cta-btn-size: 1rem;              /* ← Button font size */
    --cta-btn-weight: 600;             /* ← Button font weight */
    --cta-btn-spacing: 2px;            /* ← Button letter spacing */
}


/* ============================================
   🎨 SECTION 4: WHY CHOOSE US CONTROLS
   FULL CONTROL - Every word independently!
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --why-bg: #f5f2f2;                 /* ← Section background color */
    --why-border: #E5E7EB;             /* ← Optional border color */
    
    /* ==========================================
       🎯 "WHY CHOOSE OSWAGO HOSPITAL" - Full Control
       ========================================== */
    
    /* ----- "WHY" (First word) ----- */
    --why-word1: #adabab;              /* ← "WHY" color */
    --why-word1-size: 1rem;          /* ← "WHY" font size */
    --why-word1-weight: 200;           /* ← "WHY" font weight */
    --why-word1-spacing: 2px;          /* ← "WHY" letter spacing */
    
    /* ----- "CHOOSE" (Second word) ----- */
    --why-word2: #adabab;              /* ← "CHOOSE" color (red accent) */
    --why-word2-size: 1rem;          /* ← "CHOOSE" font size */
    --why-word2-weight: 200;           /* ← "CHOOSE" font weight */
    --why-word2-spacing: 2px;          /* ← "CHOOSE" letter spacing */
    
    /* ----- "OSWAGO" (Third word) ----- */
    --why-word3: #adabab;              /* ← "OSWAGO" color */
    --why-word3-size: 1rem;          /* ← "OSWAGO" font size */
    --why-word3-weight: 200;           /* ← "OSWAGO" font weight */
    --why-word3-spacing: 2px;          /* ← "OSWAGO" letter spacing */
    
    /* ----- "HOSPITAL" (Fourth word) ----- */
    --why-word4: #adabab;              /* ← "HOSPITAL" color */
    --why-word4-size: 1rem;          /* ← "HOSPITAL" font size */
    --why-word4-weight: 200;           /* ← "HOSPITAL" font weight */
    --why-word4-spacing: 2px;          /* ← "HOSPITAL" letter spacing */
    
    /* ==========================================
       🎯 "Better Health For Everyone" - Full Control
       ========================================== */
    
    /* ----- "Better" (First word) ----- */
    --why-sub-word1: #212529;          /* ← "Better" color */
    --why-sub-word1-size: 2.6rem;     /* ← "Better" font size */
    --why-sub-word1-weight: 900;       /* ← "Better" font weight */
    --why-sub-word1-spacing: 1px;      /* ← "Better" letter spacing */
    
    /* ----- "Health" (Second word) ----- */
    --why-sub-word2: #212529;          /* ← "Health" color (green) */
    --why-sub-word2-size: 2.6rem;     /* ← "Health" font size */
    --why-sub-word2-weight: 900;       /* ← "Health" font weight */
    --why-sub-word2-spacing: 1px;      /* ← "Health" letter spacing */
    
    /* ----- "For" (Third word) ----- */
    --why-sub-word3: #93C750;          /* ← "For" color */
    --why-sub-word3-size: 2.6rem;     /* ← "For" font size */
    --why-sub-word3-weight: 300;       /* ← "For" font weight */
    --why-sub-word3-spacing: 1px;      /* ← "For" letter spacing */
    
    /* ----- "Everyone" (Fourth word) ----- */
    --why-sub-word4: #93C750;          /* ← "Everyone" color (red accent) */
    --why-sub-word4-size: 2.6rem;     /* ← "Everyone" font size */
    --why-sub-word4-weight: 300;       /* ← "Everyone" font weight */
    --why-sub-word4-spacing: 1px;      /* ← "Everyone" letter spacing */
    
    /* ==========================================
       🎯 FEATURE CARDS - Full Control
       ========================================== */
    
    /* ----- Feature Card Layout ----- */
    --why-card-bg: transparent;            /* ← NO background */
    --why-card-border: transparent;        /* ← NO border */
    --why-card-shadow: none;               /* ← NO shadow */
    --why-card-hover-transform: translateY(-5px); /* ← Subtle hover lift */
    --why-card-hover-shadow: 0 4px 20px rgba(0,0,0,0.08); /* ← Subtle hover shadow */
    --why-card-padding: 0.5rem;            /* ← Minimal padding */
    --why-card-radius: 0px;                /* ← NO border radius */
    --why-card-gap: 2.5rem;                /* ← Space between cards */
    
    /* ----- Feature Icon Controls ----- */
    --why-icon: #D63637;               /* ← Icon color (red) */
    --why-icon-size: 2.5rem;           /* ← Icon size */
    
    /* ----- Feature Title Controls ----- */
    --why-feature-title: #212529;      /* ← Feature title color */
    --why-feature-title-size: 0.9rem;  /* ← Feature title font size */
    --why-feature-title-weight: 700;   /* ← Feature title font weight */
    --why-feature-title-spacing: 0px;  /* ← Feature title letter spacing */
    
    /* ----- Feature Description Controls ----- */
    --why-feature-desc: #7e7d7d;       /* ← Feature description color */
    --why-feature-desc-size: 0.95rem;  /* ← Description font size */
    --why-feature-desc-weight: 200;    /* ← Description font weight */
    --why-feature-desc-spacing: 0px;   /* ← Description letter spacing */
}


/* ============================================
   🎨 SECTION 5: SPECIALISTS CONTROLS
   Change these to change ONLY the specialists
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --specialists-bg: transparent;         /* ← Section background */
    --specialists-card-bg: transparent;    /* ← Card background */
    --specialists-border: #5a6169;     /* ← Left border color */
    --specialists-border-hover: #847d7d;/* ← Left border hover */
    --specialists-card-padding: 2rem;  /* ← Card padding */
    --specialists-card-radius: 12px;   /* ← Card border radius */
    --specialists-card-gap: 2rem;      /* ← Gap between cards */
    
    /* ----- Section Title Controls ----- */
    --specialists-title: #747373;      /* ← "OUR SPECIALISTS" color */
    --specialists-title-size: 0.9rem;  /* ← Title font size */
    --specialists-title-weight: 300;   /* ← Title font weight */
    --specialists-title-spacing: 2px;  /* ← Title letter spacing */
    
    /* ----- Section Subtitle Controls ----- */
    --specialists-subtitle: #666666;   /* ← "Experts in Their..." color */
    --specialists-subtitle-size: 2.7rem; /* ← Subtitle font size */
    --specialists-subtitle-weight: 700; /* ← Subtitle font weight */
    --specialists-subtitle-spacing: 1px; /* ← Subtitle letter spacing */
    
    /* ----- Specialist Card Title Controls ----- */
    --specialists-card-title: #93ca4a; /* ← Specialist name color */
    --specialists-card-title-size: 1.5rem; /* ← Name font size */
    --specialists-card-title-weight: 100; /* ← Name font weight */
    --specialists-card-title-spacing: 1px; /* ← Name letter spacing */
    
    /* ----- Specialist Card Description Controls ----- */
    --specialists-card-desc: #666666;  /* ← Description color */
    --specialists-card-desc-size: 0.875rem; /* ← Description font size */
    --specialists-card-desc-weight: 400; /* ← Description font weight */
    --specialists-card-desc-spacing: 0px; /* ← Description letter spacing */
}


/* ============================================
   🎨 SECTION 6: TESTIMONIALS CONTROLS
   Change these to change ONLY the testimonials
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --testimonials-bg: #f2e9e9d1;        /* ← Section background */
    --testimonials-form-bg: #F8F9FA;   /* ← Form background */
    --testimonials-form-padding: 2rem; /* ← Form padding */
    --testimonials-form-radius: 12px;  /* ← Form border radius */
    
    /* ----- Section Title Controls ----- */
    --testimonials-title: #9bb8d7;     /* ← "TESTIMONIAL" color */
    --testimonials-title-size: 1.4rem; /* ← Title font size */
    --testimonials-title-weight: 300;  /* ← Title font weight */
    --testimonials-title-spacing: 2px; /* ← Title letter spacing */
    
    /* ----- Section Subtitle Controls ----- */
    --testimonials-subtitle: #296923;  /* ← "Trusted By Clients" color */
    --testimonials-subtitle-size: 2.7rem; /* ← Subtitle font size */
    --testimonials-subtitle-weight: 300; /* ← Subtitle font weight */
    --testimonials-subtitle-spacing: 1px; /* ← Subtitle letter spacing */
    
    /* ----- Form Label Controls ----- */
    --testimonials-label: #212529;     /* ← Label color */
    --testimonials-label-size: 0.875rem; /* ← Label font size */
    --testimonials-label-weight: 500;  /* ← Label font weight */
    
    /* ----- Form Input Controls ----- */
    --testimonials-input: #212529;     /* ← Input text color */
    --testimonials-input-size: 0.875rem; /* ← Input font size */
    --testimonials-input-weight: 400;  /* ← Input font weight */
    --testimonials-input-border: #E5E7EB; /* ← Input border color */
    --testimonials-input-focus: #212529; /* ← Input focus border */
    
    /* ----- Star Rating Controls ----- */
    --testimonials-star: #F59E0B;      /* ← Star color */
    --testimonials-star-size: 2rem;    /* ← Star size */
    --testimonials-star-inactive: #D1D5DB; /* ← Inactive star color */
}


/* ============================================
   🎨 SECTION 7: FAQ CONTROLS
   FULL CONTROL - Every word independently!
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --faq-bg: #FFFFFF;                 /* ← Section background */
    
    /* ==========================================
       🎯 "Frequently Asked Questions" - Full Control
       ========================================== */
    
    /* ----- "Frequently" (First word) ----- */
    --faq-word1: #212529;              /* ← "Frequently" color */
    --faq-word1-size: 2rem;          /* ← "Frequently" font size */
    --faq-word1-weight: 300;           /* ← "Frequently" font weight */
    --faq-word1-spacing: 2px;          /* ← "Frequently" letter spacing */
    
    /* ----- "Asked" (Second word) ----- */
    --faq-word2: #212529;              /* ← "Asked" color */
    --faq-word2-size: 2rem;          /* ← "Asked" font size */
    --faq-word2-weight: 300;           /* ← "Asked" font weight */
    --faq-word2-spacing: 2px;          /* ← "Asked" letter spacing */
    
    /* ----- "Questions" (Third word) ----- */
    --faq-word3: #D63637;              /* ← "Questions" color (red accent) */
    --faq-word3-size: 2rem;          /* ← "Questions" font size */
    --faq-word3-weight: 700;           /* ← "Questions" font weight */
    --faq-word3-spacing: 2px;          /* ← "Questions" letter spacing */
    
    /* ==========================================
       🎯 FAQ ITEMS - Full Control
       ========================================== */
    
    /* ----- FAQ Item Layout ----- */
    --faq-item-bg: #FFFFFF;            /* ← FAQ item background */
    --faq-item-border: transparent;        /* ← FAQ item border */
    --faq-item-radius: 8px;            /* ← FAQ item border radius */
    --faq-item-padding: 1rem 1.5rem;   /* ← FAQ item padding */
    
    /* ----- Question Controls ----- */
    --faq-question: #ae9c9c;           /* ← Question text color */
    --faq-question-size: 1.125rem;     /* ← Question font size */
    --faq-question-weight: 500;        /* ← Question font weight */
    --faq-question-spacing: 0px;       /* ← Question letter spacing */
    
    /* ----- Answer Controls ----- */
    --faq-answer: #15c54d;             /* ← Answer text color */
    --faq-answer-size: 0.875rem;       /* ← Answer font size */
    --faq-answer-weight: 400;          /* ← Answer font weight */
    --faq-answer-spacing: 0px;         /* ← Answer letter spacing */
    
    /* ----- Icon Controls ----- */
    --faq-icon: #212529;               /* ← + icon color */
    --faq-icon-size: 1.5rem;           /* ← + icon size */
    --faq-icon-weight: 700;            /* ← + icon weight */
    --faq-icon-active: #4109c4;        /* ← - icon color when open */
}


/* ============================================
   🎨 SECTION 8: INSURANCE CONTROLS
   Change these to change ONLY the insurance
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --insurance-bg: #F8F9FA;           /* ← Section background */
    --insurance-item-bg: #FFFFFF;      /* ← Insurance card background */
    --insurance-item-shadow: 0 2px 8px rgba(0,0,0,0.08); /* ← Card shadow */
    --insurance-item-radius: 8px;      /* ← Card border radius */
    --insurance-item-padding: 1rem;    /* ← Card padding */
    --insurance-item-gap: 1.5rem;      /* ← Gap between cards */
    
    /* ----- Section Title Controls ----- */
    --insurance-title: #212529;        /* ← "INSURANCE PROVIDERS..." color */
    --insurance-title-size: 1rem;    /* ← Title font size */
    --insurance-title-weight: 300;     /* ← Title font weight */
    --insurance-title-spacing: 2px;    /* ← Title letter spacing */
    
    /* ----- Section Subtitle Controls ----- */
    --insurance-subtitle: #1f8435;     /* ← "Health Care Insurance Cards" color */
    --insurance-subtitle-size: 2.5rem; /* ← Subtitle font size */
    --insurance-subtitle-weight: 300;  /* ← Subtitle font weight */
    --insurance-subtitle-spacing: 1px; /* ← Subtitle letter spacing */
}


/* ============================================
   🎨 SECTION 9: HEALTH TIPS CONTROLS
   Change these to change ONLY the health tips
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --tips-bg: #F8F9FA;                /* ← Section background */
    --tips-card-bg: #FFFFFF;           /* ← Card background */
    --tips-card-shadow: 0 2px 8px rgba(0,0,0,0.08); /* ← Card shadow */
    --tips-card-radius: 12px;          /* ← Card border radius */
    --tips-card-padding: 2rem;         /* ← Card padding */
    --tips-card-gap: 2rem;             /* ← Gap between cards */
    --tips-card-hover: 0 8px 40px rgba(0,0,0,0.15); /* ← Hover shadow */
    
    /* ----- Section Title Controls ----- */
    --tips-title: #212529;             /* ← "Health Tips" color */
    --tips-title-size: 2.5rem;         /* ← Title font size */
    --tips-title-weight: 700;          /* ← Title font weight */
    --tips-title-spacing: 2px;         /* ← Title letter spacing */
    
    /* ----- Tip Title Controls ----- */
    --tips-card-title: #212529;        /* ← Tip title color */
    --tips-card-title-size: 1.5rem;    /* ← Tip title font size */
    --tips-card-title-weight: 700;     /* ← Tip title font weight */
    --tips-card-title-spacing: 1px;    /* ← Tip title letter spacing */
    
    /* ----- Tip Meta Controls ----- */
    --tips-meta: #666666;              /* ← Date and views color */
    --tips-meta-size: 0.875rem;        /* ← Meta font size */
    --tips-meta-weight: 400;           /* ← Meta font weight */
    --tips-meta-spacing: 0px;          /* ← Meta letter spacing */
    
    /* ----- Read More Button Controls ----- */
    --tips-readmore: #4109c4;          /* ← Read more color */
    --tips-readmore-size: 0.875rem;    /* ← Read more font size */
    --tips-readmore-weight: 500;       /* ← Read more font weight */
    --tips-readmore-hover: #B71C1C;    /* ← Read more hover color */
}


/* ============================================
   🎨 SECTION 10: FOOTER CONTROLS
   Change these to change ONLY the footer
   ============================================ */
:root {
    /* ----- Footer Background ----- */
    --footer-bg: #FFFFFF;              /* ← Footer background */
    --footer-border: #E5E7EB;          /* ← Top border */
    
    /* ----- Footer Logo Controls ----- */
    --footer-logo: #212529;            /* ← Footer logo color */
    --footer-logo-size: 2rem;          /* ← Footer logo font size */
    --footer-logo-weight: 300;         /* ← Footer logo font weight */
    
    /* ----- Footer Description Controls ----- */
    --footer-desc: #33a85c;            /* ← Description color */
    --footer-desc-size: 0.875rem;      /* ← Description font size */
    --footer-desc-weight: 400;         /* ← Description font weight */
    --footer-desc-spacing: 0px;        /* ← Description letter spacing */
    
    /* ----- Footer Heading Controls ----- */
    --footer-heading: #212529;         /* ← Heading color (e.g., "Contact Us") */
    --footer-heading-size: 1.25rem;    /* ← Heading font size */
    --footer-heading-weight: 300;      /* ← Heading font weight */
    --footer-heading-spacing: 1px;     /* ← Heading letter spacing */
    
    /* ----- Footer Text Controls ----- */
    --footer-text: #4dbe80;            /* ← Body text color */
    --footer-text-size: 0.875rem;      /* ← Body text font size */
    --footer-text-weight: 400;         /* ← Body text font weight */
    --footer-text-spacing: 0px;        /* ← Body text letter spacing */
    
    /* ----- Footer Link Controls ----- */
    --footer-link: #2e08c8ab;            /* ← Link color */
    --footer-link-hover: #D63637;      /* ← Link hover color */
    --footer-link-size: 0.875rem;      /* ← Link font size */
    --footer-link-weight: 400;         /* ← Link font weight */
    --footer-link-spacing: 0px;        /* ← Link letter spacing */
    
    /* ----- Footer Social Icon Controls ----- */
    --footer-social: #666666;          /* ← Social icon color */
    --footer-social-hover: #D63637;    /* ← Social icon hover */
    --footer-social-size: 1.5rem;      /* ← Social icon size */
    
    /* ----- Footer Copyright Controls ----- */
    --footer-copyright: #999999;       /* ← Copyright text color */
    --footer-copyright-size: 0.875rem; /* ← Copyright font size */
    --footer-copyright-weight: 400;    /* ← Copyright font weight */
    --footer-copyright-spacing: 0px;   /* ← Copyright letter spacing */
}


/* ============================================
   📄 GLOBAL RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    color: #212529;
    background-color: #FFFFFF;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #066AAB;
    transition: color 0.2s ease;
}

a:hover {
    color: #030269;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ----- Section Header (Used by multiple sections) ----- */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    font-family: 'Inter', sans-serif;
}


/* ============================================
   📄 GLOBAL BUTTONS
   ============================================ */
.btn {
    display: inline-block;
    padding: 14px 32px;
    border: none;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background-color: #D63637;
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover {
    background-color: #B71C1C;
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}


/* ============================================
   📄 SECTION: HEADER
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--header-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    padding: 12px 0;
    border-bottom: 1px solid var(--header-border);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.logo a {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: var(--header-logo-size);
    font-weight: var(--header-logo-weight);
    letter-spacing: 2px;
    color: var(--header-logo);
}

.logo-sub {
    font-size: var(--header-logo-sub-size);
    font-weight: var(--header-logo-sub-weight);
    letter-spacing: 4px;
    color: var(--header-logo-sub);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links li a {
    color: var(--header-link);
    font-size: var(--header-link-size);
    font-weight: var(--header-link-weight);
    padding: 8px 4px;
    transition: all 0.2s ease;
    position: relative;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--header-link-active);
    transition: width 0.3s ease;
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
    width: 100%;
}

.nav-links li a:hover {
    color: var(--header-link-hover);
}

.nav-links li a.active {
    color: var(--header-link-active);
}

.nav-links li a.btn-appointment {
    padding: 10px 24px;
    background: var(--header-btn-bg);
    color: var(--header-btn-text);
    font-size: var(--header-btn-size);
    font-weight: var(--header-btn-weight);
    border-radius: 9999px;
}

.nav-links li a.btn-appointment::after {
    display: none;
}

.nav-links li a.btn-appointment:hover {
    background: var(--header-btn-hover);
    color: var(--header-btn-text);
    transform: translateY(-2px);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: var(--header-hamburger);
    margin: 3px 0;
    transition: all 0.2s ease;
}


/* ============================================
   📄 SECTION: HERO
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
}

.hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.6);
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 900px;
    z-index: 2;
    padding: 2rem 0;
}

.hero-badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: var(--hero-badge-size);
    font-weight: var(--hero-badge-weight);
    color: var(--hero-badge-text);
    letter-spacing: var(--hero-badge-spacing);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding: 6px 18px;
    border: 1px solid var(--hero-badge-border);
    border-radius: 9999px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
    line-height: 1.1;
}

.hero-title-white {
    color: var(--hero-title-white);
    display: inline;
    font-size: var(--hero-title-white-size);
    font-weight: var(--hero-title-white-weight);
}

.hero-title-green {
    color: var(--hero-title-green);
    display: inline;
    font-size: var(--hero-title-green-size);
    font-weight: var(--hero-title-green-weight);
}

.hero-services {
    display: flex;
    gap: 3rem;
    justify-content: center;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.hero-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 150px;
}

.hero-service-icon {
    font-size: var(--hero-service-icon-size);
    margin-bottom: 0.3rem;
    color: var(--hero-service-icon);
}

.hero-service-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: var(--hero-service-text-size);
    font-weight: var(--hero-service-text-weight);
    color: var(--hero-service-text);
    margin: 0;
    letter-spacing: var(--hero-service-spacing);
}

.hero-service-text p {
    font-size: var(--hero-service-desc-size);
    font-weight: var(--hero-service-desc-weight);
    color: var(--hero-service-desc);
    margin: 0;
    line-height: 1.3;
}


/* ============================================
   📄 SECTION: CTA BANNER
   ============================================ */
.cta-banner {
    padding: 4rem 0;
    background: var(--cta-bg);
    text-align: center;
    border-top: 1px solid var(--cta-border);
    border-bottom: 1px solid var(--cta-border);
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-family: 'Playfair Display', serif;
    font-size: var(--cta-title-size);
    font-weight: var(--cta-title-weight);
    color: var(--cta-title);
    letter-spacing: var(--cta-title-spacing);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.cta-text-link {
    display: block;
    margin-bottom: 2rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.cta-text-link:hover {
    opacity: 0.7;
}

.cta-book-an {
    font-family: 'Playfair Display', serif;
    font-size: var(--cta-book-an-size);
    font-weight: var(--cta-book-an-weight);
    color: var(--cta-book-an);
    letter-spacing: var(--cta-book-an-spacing);
}

.cta-appointment {
    font-family: 'Playfair Display', serif;
    font-size: var(--cta-appointment-size);
    font-weight: var(--cta-appointment-weight);
    color: var(--cta-appointment);
    letter-spacing: var(--cta-appointment-spacing);
}

.btn-cta-rectangle {
    display: inline-block;
    background-color: var(--cta-btn-bg);
    color: var(--cta-btn-text);
    padding: 12px 40px;
    border: none;
    border-radius: 0px;
    font-family: 'Inter', sans-serif;
    font-size: var(--cta-btn-size);
    font-weight: var(--cta-btn-weight);
    letter-spacing: var(--cta-btn-spacing);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-cta-rectangle:hover {
    background-color: var(--cta-btn-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}


/* ============================================
   📄 SECTION: WHY CHOOSE US
   Uses: --why-* variables
   ============================================ */

.why-choose-us {
    padding: 4rem 0;
    background: var(--why-bg);
    border-top: 1px solid var(--why-border);
    border-bottom: 1px solid var(--why-border);
}

/* ----- Wrapper: Left + Right Side by Side ----- */
.why-choose-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* ----- LEFT SIDE: Title + Cards ----- */
.why-choose-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ----- Section Header (Left Aligned) ----- */
.section-header-left {
    text-align: left;
}

/* ==========================================
   🎯 "WHY CHOOSE OSWAGO HOSPITAL" - Individual Words
   ========================================== */

.section-title {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.25rem;
}

/* ----- "WHY" ----- */
.why-word-1 {
    color: var(--why-word1);
    font-size: var(--why-word1-size);
    font-weight: var(--why-word1-weight);
    letter-spacing: var(--why-word1-spacing);
}

/* ----- "CHOOSE" ----- */
.why-word-2 {
    color: var(--why-word2);
    font-size: var(--why-word2-size);
    font-weight: var(--why-word2-weight);
    letter-spacing: var(--why-word2-spacing);
}

/* ----- "OSWAGO" ----- */
.why-word-3 {
    color: var(--why-word3);
    font-size: var(--why-word3-size);
    font-weight: var(--why-word3-weight);
    letter-spacing: var(--why-word3-spacing);
}

/* ----- "HOSPITAL" ----- */
.why-word-4 {
    color: var(--why-word4);
    font-size: var(--why-word4-size);
    font-weight: var(--why-word4-weight);
    letter-spacing: var(--why-word4-spacing);
}

/* ==========================================
   🎯 "Better Health For Everyone" - Individual Words
   ========================================== */

.section-subtitle {
    font-family: 'Inter', sans-serif;
    margin: 0;
}

/* ----- "Better" ----- */
.why-sub-word-1 {
    color: var(--why-sub-word1);
    font-size: var(--why-sub-word1-size);
    font-weight: var(--why-sub-word1-weight);
    letter-spacing: var(--why-sub-word1-spacing);
}

/* ----- "Health" ----- */
.why-sub-word-2 {
    color: var(--why-sub-word2);
    font-size: var(--why-sub-word2-size);
    font-weight: var(--why-sub-word2-weight);
    letter-spacing: var(--why-sub-word2-spacing);
}

/* ----- "For" ----- */
.why-sub-word-3 {
    color: var(--why-sub-word3);
    font-size: var(--why-sub-word3-size);
    font-weight: var(--why-sub-word3-weight);
    letter-spacing: var(--why-sub-word3-spacing);
}

/* ----- "Everyone" ----- */
.why-sub-word-4 {
    color: var(--why-sub-word4);
    font-size: var(--why-sub-word4-size);
    font-weight: var(--why-sub-word4-weight);
    letter-spacing: var(--why-sub-word4-spacing);
}

/* ==========================================
   🎯 2x2 Cards Grid
   ========================================== */

.why-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--why-card-gap);
}

/* ----- Individual Feature Cards (NO VISIBLE BORDER) ----- */
.why-cards-grid .feature-card {
    background: var(--why-card-bg);
    padding: var(--why-card-padding);
    border-radius: var(--why-card-radius);
    border: none;
    box-shadow: var(--why-card-shadow);
    text-align: left;
    transition: all 0.3s ease;
}

.why-cards-grid .feature-card:hover {
    transform: var(--why-card-hover-transform);
    box-shadow: var(--why-card-hover-shadow);
}

/* ----- Feature Icon ----- */
.why-cards-grid .feature-icon {
    font-size: var(--why-icon-size);
    margin-bottom: 0.5rem;
    color: var(--why-icon);
    display: block;
}

/* ----- Feature Title ----- */
.why-cards-grid .feature-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: var(--why-feature-title-size);
    font-weight: var(--why-feature-title-weight);
    color: var(--why-feature-title);
    letter-spacing: var(--why-feature-title-spacing);
    margin-bottom: 0.25rem;
}

/* ----- Feature Description ----- */
.why-cards-grid .feature-card p {
    font-size: var(--why-feature-desc-size);
    font-weight: var(--why-feature-desc-weight);
    color: var(--why-feature-desc);
    letter-spacing: var(--why-feature-desc-spacing);
    line-height: 1.6;
    margin: 0;
}

/* ----- RIGHT SIDE: Image ----- */
.why-choose-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-image-wrapper {
    width: 100%;
    max-width: 500px;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}

.why-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1;
}

/* ============================================
   📄 SECTION: SPECIALISTS
   ============================================ */
.specialists {
    padding: 4rem 0;
    background: var(--specialists-bg);
}

.specialists .section-title {
    font-size: var(--specialists-title-size);
    font-weight: var(--specialists-title-weight);
    color: var(--specialists-title);
    letter-spacing: var(--specialists-title-spacing);
    text-transform: uppercase;
}

.specialists .section-subtitle {
    font-size: var(--specialists-subtitle-size);
    font-weight: var(--specialists-subtitle-weight);
    color: var(--specialists-subtitle);
    letter-spacing: var(--specialists-subtitle-spacing);
}

.specialists-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--specialists-card-gap);
    margin-bottom: 2rem;
}

.specialist-card {
    background: var(--specialists-card-bg);
    padding: var(--specialists-card-padding);
    border-radius: var(--specialists-card-radius);
    border-left: 4px solid var(--specialists-border);
    transition: all 0.3s ease;
}

.specialist-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    border-left-color: var(--specialists-border-hover);
}

.specialist-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: var(--specialists-card-title-size);
    font-weight: var(--specialists-card-title-weight);
    color: var(--specialists-card-title);
    letter-spacing: var(--specialists-card-title-spacing);
    margin-bottom: 0.5rem;
}

.specialist-card p {
    font-size: var(--specialists-card-desc-size);
    font-weight: var(--specialists-card-desc-weight);
    color: var(--specialists-card-desc);
    letter-spacing: var(--specialists-card-desc-spacing);
    line-height: 1.6;
    margin: 0;
}

.view-all-wrapper {
    text-align: center;
}


/* ============================================
   📄 SECTION: TESTIMONIALS
   ============================================ */
.testimonials {
    padding: 4rem 0;
    background: var(--testimonials-bg);
}

.testimonials .section-title {
    font-size: var(--testimonials-title-size);
    font-weight: var(--testimonials-title-weight);
    color: var(--testimonials-title);
    letter-spacing: var(--testimonials-title-spacing);
    text-transform: uppercase;
}

.testimonials .section-subtitle {
    font-size: var(--testimonials-subtitle-size);
    font-weight: var(--testimonials-subtitle-weight);
    color: var(--testimonials-subtitle);
    letter-spacing: var(--testimonials-subtitle-spacing);
}

.testimonial-form-wrapper {
    max-width: 700px;
    margin: 0 auto;
    background: var(--testimonials-form-bg);
    padding: var(--testimonials-form-padding);
    border-radius: var(--testimonials-form-radius);
}

.testimonial-form .form-group {
    margin-bottom: 1rem;
}

.testimonial-form label {
    display: block;
    font-size: var(--testimonials-label-size);
    font-weight: var(--testimonials-label-weight);
    color: var(--testimonials-label);
    margin-bottom: 0.25rem;
}

.testimonial-form input,
.testimonial-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--testimonials-input-border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: var(--testimonials-input-size);
    font-weight: var(--testimonials-input-weight);
    color: var(--testimonials-input);
    transition: border-color 0.3s ease;
}

.testimonial-form input:focus,
.testimonial-form textarea:focus {
    outline: none;
    border-color: var(--testimonials-input-focus);
}

.star-rating {
    display: flex;
    gap: 8px;
    font-size: var(--testimonials-star-size);
    cursor: pointer;
}

.star-rating .star {
    color: var(--testimonials-star-inactive);
    transition: color 0.3s ease;
}

.star-rating .star.active {
    color: var(--testimonials-star);
}

.star-rating .star:hover {
    color: var(--testimonials-star);
}


/* ============================================
   📄 SECTION: FAQ
   ============================================ */

.faq-section {
    padding: 4rem 0;
    background: var(--faq-bg);
}

/* ==========================================
   🎯 "Frequently Asked Questions" - Individual Words
   ========================================== */

.section-title {
    font-family: 'Playfair Display', serif;
    text-align: center;
    margin-bottom: 2rem;
}

/* ----- "Frequently" ----- */
.faq-word-1 {
    color: var(--faq-word1);
    font-size: var(--faq-word1-size);
    font-weight: var(--faq-word1-weight);
    letter-spacing: var(--faq-word1-spacing);
}

/* ----- "Asked" ----- */
.faq-word-2 {
    color: var(--faq-word2);
    font-size: var(--faq-word2-size);
    font-weight: var(--faq-word2-weight);
    letter-spacing: var(--faq-word2-spacing);
}

/* ----- "Questions" ----- */
.faq-word-3 {
    color: var(--faq-word3);
    font-size: var(--faq-word3-size);
    font-weight: var(--faq-word3-weight);
    letter-spacing: var(--faq-word3-spacing);
}

/* ==========================================
   🎯 FAQ Container
   ========================================== */

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--faq-item-bg);
    border: 1px solid var(--faq-item-border);
    border-radius: var(--faq-item-radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: var(--faq-item-padding);
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: rgba(0, 0, 0, 0.02);
}

.faq-icon {
    font-size: var(--faq-icon-size);
    font-weight: var(--faq-icon-weight);
    color: var(--faq-icon);
    min-width: 30px;
    text-align: center;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: var(--faq-icon-active);
}

.faq-text {
    font-size: var(--faq-question-size);
    font-weight: var(--faq-question-weight);
    color: var(--faq-question);
    letter-spacing: var(--faq-question-spacing);
    flex: 1;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
    font-size: var(--faq-answer-size);
    font-weight: var(--faq-answer-weight);
    color: var(--faq-answer);
    letter-spacing: var(--faq-answer-spacing);
    line-height: 1.8;
}

.faq-answer ul {
    list-style: none;
    padding: 0;
}

.faq-answer ul li {
    font-size: var(--faq-answer-size);
    font-weight: var(--faq-answer-weight);
    color: var(--faq-answer);
    letter-spacing: var(--faq-answer-spacing);
    padding: 4px 0 4px 20px;
    position: relative;
}

.faq-answer ul li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--faq-icon-active);
    font-weight: 700;
}


/* ============================================
   📄 SECTION: INSURANCE
   ============================================ */
.insurance {
    padding: 4rem 0;
    background: var(--insurance-bg);
}

.insurance .section-title {
    font-size: var(--insurance-title-size);
    font-weight: var(--insurance-title-weight);
    color: var(--insurance-title);
    letter-spacing: var(--insurance-title-spacing);
    text-transform: uppercase;
}

.insurance .section-subtitle {
    font-size: var(--insurance-subtitle-size);
    font-weight: var(--insurance-subtitle-weight);
    color: var(--insurance-subtitle);
    letter-spacing: var(--insurance-subtitle-spacing);
}

.insurance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--insurance-item-gap);
}

.insurance-item {
    background: var(--insurance-item-bg);
    padding: var(--insurance-item-padding);
    border-radius: var(--insurance-item-radius);
    text-align: center;
    box-shadow: var(--insurance-item-shadow);
    transition: all 0.3s ease;
}

.insurance-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.insurance-item img {
    max-height: 50px;
    margin: 0 auto;
}


/* ============================================
   📄 SECTION: HEALTH TIPS
   ============================================ */
.health-tips {
    padding: 4rem 0;
    background: var(--tips-bg);
}

.health-tips .section-title {
    font-size: var(--tips-title-size);
    font-weight: var(--tips-title-weight);
    color: var(--tips-title);
    letter-spacing: var(--tips-title-spacing);
    text-transform: uppercase;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tips-card-gap);
}

.tip-card {
    background: var(--tips-card-bg);
    padding: var(--tips-card-padding);
    border-radius: var(--tips-card-radius);
    box-shadow: var(--tips-card-shadow);
    transition: all 0.3s ease;
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--tips-card-hover);
}

.tip-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: var(--tips-card-title-size);
    font-weight: var(--tips-card-title-weight);
    color: var(--tips-card-title);
    letter-spacing: var(--tips-card-title-spacing);
    margin-bottom: 0.5rem;
}

.tip-meta {
    display: flex;
    gap: 1rem;
    font-size: var(--tips-meta-size);
    font-weight: var(--tips-meta-weight);
    color: var(--tips-meta);
    letter-spacing: var(--tips-meta-spacing);
    margin-bottom: 1rem;
}

.btn-read-more {
    display: inline-block;
    font-size: var(--tips-readmore-size);
    font-weight: var(--tips-readmore-weight);
    color: var(--tips-readmore);
    transition: all 0.3s ease;
}

.btn-read-more:hover {
    color: var(--tips-readmore-hover);
    padding-left: 8px;
}


/* ============================================
   📄 SECTION: MAP
   ============================================ */
.map-section {
    padding: 4rem 0;
    background: #FFFFFF;
}

.map-wrapper {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.map-details {
    padding: 1.5rem;
}

.map-details h3 {
    font-family: 'Playfair Display', serif;
    color: #212529;
    margin-bottom: 0.25rem;
}

.map-details p {
    color: #666666;
    font-size: 0.875rem;
}

.rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rating .stars {
    color: #F59E0B;
    font-size: 1.25rem;
    letter-spacing: 2px;
}

.rating-text {
    color: #666666;
    font-size: 0.875rem;
}


/* ============================================
   📄 SECTION: FOOTER
   ============================================ */
.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 4rem 0 1rem;
    border-top: 1px solid var(--footer-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: var(--footer-logo-size);
    font-weight: var(--footer-logo-weight);
    color: var(--footer-logo);
    margin-bottom: 0.5rem;
}

.footer-description {
    font-size: var(--footer-desc-size);
    font-weight: var(--footer-desc-weight);
    color: var(--footer-desc);
    letter-spacing: var(--footer-desc-spacing);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    color: var(--footer-social);
    font-size: var(--footer-social-size);
    transition: all 0.2s ease;
}

.footer-social a:hover {
    color: var(--footer-social-hover);
    transform: translateY(-3px);
}

.footer-contact h4,
.footer-links h4 {
    font-family: 'Playfair Display', serif;
    font-size: var(--footer-heading-size);
    font-weight: var(--footer-heading-weight);
    color: var(--footer-heading);
    letter-spacing: var(--footer-heading-spacing);
    margin-bottom: 1rem;
}

.footer-contact ul li {
    font-size: var(--footer-text-size);
    font-weight: var(--footer-text-weight);
    color: var(--footer-text);
    letter-spacing: var(--footer-text-spacing);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.footer-contact ul li a {
    color: var(--footer-link);
    font-size: var(--footer-link-size);
    font-weight: var(--footer-link-weight);
    letter-spacing: var(--footer-link-spacing);
}

.footer-contact ul li a:hover {
    color: var(--footer-link-hover);
}

.footer-links ul li {
    margin-bottom: 0.25rem;
}

.footer-links ul li a {
    font-size: var(--footer-link-size);
    font-weight: var(--footer-link-weight);
    color: var(--footer-link);
    letter-spacing: var(--footer-link-spacing);
    transition: all 0.2s ease;
}

.footer-links ul li a:hover {
    color: var(--footer-link-hover);
    padding-left: 8px;
}

.footer-bottom {
    border-top: 1px solid var(--footer-border);
    padding-top: 1rem;
    text-align: center;
    font-size: var(--footer-copyright-size);
    font-weight: var(--footer-copyright-weight);
    color: var(--footer-copyright);
    letter-spacing: var(--footer-copyright-spacing);
}


/* ============================================
   📱 RESPONSIVE
   ============================================ */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .specialists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .insurance-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    /* --- Navigation --- */
    .hamburger {
        display: flex;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--header-bg);
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid var(--header-border);
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        width: 100%;
        text-align: center;
    }
    
    .nav-links li a {
        display: block;
        padding: 12px 20px;
    }
    
    .nav-links li a.btn-appointment {
        display: inline-block;
        width: auto;
        margin: 0 auto;
    }
    
    /* --- Hero --- */
    .hero {
        min-height: 70vh;
        margin-top: 65px;
    }
    
    .hero-image {
        height: 70vh;
    }
    
    .hero-title-white {
        font-size: 3rem;
    }
    
    .hero-title-green {
        font-size: 1.8rem;
    }
    
    .hero-services {
        gap: 1.5rem;
        margin-top: 2rem;
    }
    
    /* --- CTA --- */
    .cta-book-an {
        font-size: 2.8rem;
    }
    
    .cta-appointment {
        font-size: 1.8rem;
    }
    
    /* --- Grids --- */
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .specialists-grid {
        grid-template-columns: 1fr;
    }
    
    .insurance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-contact ul li {
        justify-content: center;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    .hero-title-white {
        font-size: 2.2rem;
    }
    
    .hero-title-green {
        font-size: 1.4rem;
    }
    
    .hero-services {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .cta-book-an {
        font-size: 2.2rem;
    }
    
    .cta-appointment {
        font-size: 1.4rem;
    }
    
    .btn-cta-rectangle {
        padding: 8px 20px;
        font-size: 0.8rem;
    }
    
    .logo-text {
        font-size: 1.25rem;
    }
    
    .logo-sub {
        font-size: 0.55rem;
        letter-spacing: 2px;
    }
    
    .insurance-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* ============================================
   📱 RESPONSIVE: WHY CHOOSE US
   ============================================ */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    .why-choose-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .why-choose-right {
        order: -1; /* Image goes above cards on tablet */
    }
    
    .why-image-wrapper {
        max-width: 100%;
        max-height: 400px;
    }
    
    .why-image {
        aspect-ratio: 16 / 9;
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    .why-choose-us {
        padding: 3rem 0;
    }
    
    .why-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .section-header-left .section-title {
        font-size: calc(var(--why-title-size) * 0.7);
    }
    
    .section-header-left .section-subtitle {
        font-size: calc(var(--why-subtitle-size) * 0.8);
    }
    
    .why-choose-right {
        order: -1;
    }
    
    .why-image-wrapper {
        max-height: 300px;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    .why-choose-us {
        padding: 2rem 0;
    }
    
    .section-header-left .section-title {
        font-size: calc(var(--why-title-size) * 0.5);
    }
    
    .why-cards-grid .feature-card {
        padding: 1rem;
    }
    
    .why-cards-grid .feature-icon {
        font-size: calc(var(--why-icon-size) * 0.8);
    }
    
    .why-image-wrapper {
        max-height: 200px;
    }
}

/* ============================================
   🏠 HOMEPAGE CSS - END
   ============================================ */


  /* ============================================
   📖 ABOUT PAGE CSS - START
   ============================================ */


/* ============================================
   🎨 SECTION 1: PAGE HERO CONTROLS
   ============================================ */
:root {
    /* ----- Page Hero Background ----- */
    --about-hero-min-height: 90vh;           /* ← Hero minimum height */
    
    /* ----- Page Hero Title Controls ----- */
    --about-hero-title: #FFFFFF;             /* ← "About OSWAGO" color */
    --about-hero-title-size: 3.5rem;         /* ← Title font size */
    --about-hero-title-weight: 700;          /* ← Title font weight */
    --about-hero-title-spacing: 2px;         /* ← Title letter spacing */
    --about-hero-title-font: 'Playfair Display', serif; /* ← Title font */
}


/* ============================================
   📄 SECTION 1: PAGE HERO STYLES
   ============================================ */
.page-hero {
    position: relative;
    min-height: var(--about-hero-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    overflow: hidden;
}

.page-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-hero-image {
    width: 100%;
    height: var(--about-hero-min-height);
    object-fit: cover;
    filter: brightness(0.6);
}

.page-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 700px;
    z-index: 2;
}

.page-hero-title {
    font-family: var(--about-hero-title-font);
    font-size: var(--about-hero-title-size);
    font-weight: var(--about-hero-title-weight);
    color: var(--about-hero-title);
    letter-spacing: var(--about-hero-title-spacing);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}


/* ============================================
   🎨 SECTION 2: ABOUT INTRODUCTION CONTROLS
   ============================================ */
:root {
    /* ----- About Introduction Section ----- */
    --about-intro-bg: #FFFFFF;               /* ← Section background */
    --about-intro-padding: 2rem 0;           /* ← Section padding */
    
    /* ----- About Introduction Text Controls ----- */
    --about-intro-text: #333333;             /* ← Text color */
    --about-intro-text-size: 1.25rem;        /* ← Text font size */
    --about-intro-text-weight: 300;          /* ← Text font weight */
    --about-intro-text-spacing: 0.5px;       /* ← Text letter spacing */
    --about-intro-text-font: 'Inter', sans-serif; /* ← Text font */
    --about-intro-line-height: 1.6;          /* ← Text line height */
    --about-intro-max-width: 700px;          /* ← Text max width */
    --about-intro-align: center;             /* ← Text alignment */
}


/* ============================================
   📄 SECTION 2: ABOUT INTRODUCTION STYLES
   ============================================ */
.about-intro {
    background: var(--about-intro-bg);
    padding: var(--about-intro-padding);
    text-align: var(--about-intro-align);
}

.about-intro-text {
    font-family: var(--about-intro-text-font);
    font-size: var(--about-intro-text-size);
    font-weight: var(--about-intro-text-weight);
    color: var(--about-intro-text);
    letter-spacing: var(--about-intro-text-spacing);
    line-height: var(--about-intro-line-height);
    max-width: var(--about-intro-max-width);
    margin: 0 auto;
}


/* ============================================
   🎨 SECTION 3: ABOUT CONTENT CONTROLS
   ============================================ */
:root {
    /* ----- About Content Background ----- */
    --about-content-bg: #FFFFFF;             /* ← Content background */
    --about-content-padding: 3rem 0 4rem;    /* ← Content padding */
    
    /* ----- "SERVICES" Heading Controls ----- */
    --services-heading: #212529;             /* ← "SERVICES" color */
    --services-heading-size: 2rem;         /* ← Heading font size */
    --services-heading-weight: 300;          /* ← Heading font weight */
    --services-heading-spacing: 2px;         /* ← Heading letter spacing */
    --services-heading-font: 'Playfair Display', serif; /* ← Heading font */
    --services-heading-transform: uppercase; /* ← Text transform */
    --services-heading-margin: 0 0 1.5rem;   /* ← Heading margin */
    
    /* ----- First Paragraph Controls ----- */
    --services-p1-color: #333333;            /* ← Text color */
    --services-p1-size: 1.125rem;            /* ← Font size */
    --services-p1-weight: 400;               /* ← Font weight */
    --services-p1-spacing: 0px;              /* ← Letter spacing */
    --services-p1-font: 'Inter', sans-serif; /* ← Font family */
    --services-p1-line-height: 1.8;          /* ← Line height */
    --services-p1-margin: 0 0 1rem;          /* ← Margin */
    
    /* ----- Second Paragraph Controls ----- */
    --services-p2-color: #b6acac;            /* ← Text color */
    --services-p2-size: 1.125rem;            /* ← Font size */
    --services-p2-weight: 400;               /* ← Font weight */
    --services-p2-spacing: 0px;              /* ← Letter spacing */
    --services-p2-font: 'Inter', sans-serif; /* ← Font family */
    --services-p2-line-height: 1.8;          /* ← Line height */
    --services-p2-margin: 0;                 /* ← Margin */
}


/* ============================================
   📄 SECTION 3: ABOUT CONTENT STYLES
   ============================================ */
.about-content {
    background: var(--about-content-bg);
    padding: var(--about-content-padding);
}

.about-mission {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

/* ----- "SERVICES" Heading ----- */
.about-mission .section-title {
    font-family: var(--services-heading-font);
    font-size: var(--services-heading-size);
    font-weight: var(--services-heading-weight);
    color: var(--services-heading);
    letter-spacing: var(--services-heading-spacing);
    text-transform: var(--services-heading-transform);
    margin: var(--services-heading-margin);
}

/* ----- First Paragraph ----- */
.about-mission p:first-of-type {
    font-family: var(--services-p1-font);
    font-size: var(--services-p1-size);
    font-weight: var(--services-p1-weight);
    color: var(--services-p1-color);
    letter-spacing: var(--services-p1-spacing);
    line-height: var(--services-p1-line-height);
    margin: var(--services-p1-margin);
}

/* ----- Second Paragraph ----- */
.about-mission p:last-of-type {
    font-family: var(--services-p2-font);
    font-size: var(--services-p2-size);
    font-weight: var(--services-p2-weight);
    color: var(--services-p2-color);
    letter-spacing: var(--services-p2-spacing);
    line-height: var(--services-p2-line-height);
    margin: var(--services-p2-margin);
}


/* ============================================
   🎨 SECTION 4: SERVICES GRID CONTROLS
   ============================================ */
:root {
    /* ----- Grid Layout Controls ----- */
    --services-grid-columns: 3;              /* ← Number of columns */
    --services-grid-gap: 0.75rem;            /* ← Gap between items */
    --services-grid-max-width: 900px;        /* ← Grid max width */
    --services-grid-margin: 0 auto;          /* ← Grid margin */
    
    /* ----- Item Background & Border ----- */
    --service-item-bg: transparent;          /* ← Item background (transparent) */
    --service-item-border: none;             /* ← NO border */
    --service-item-radius: 0px;              /* ← No border radius */
    --service-item-shadow: none;             /* ← NO shadow */
    
    /* ----- Item Text Controls ----- */
    --service-item-color: #212529;           /* ← Text color */
    --service-item-size: 0.95rem;            /* ← Font size */
    --service-item-weight: 500;              /* ← Font weight */
    --service-item-font: 'Inter', sans-serif; /* ← Font family */
    --service-item-spacing: 0px;             /* ← Letter spacing */
    --service-item-transform: uppercase;     /* ← ALL CAPS */
    
    /* ----- Item Padding & Size ----- */
    --service-item-padding: 0.6rem 0.5rem;   /* ← Padding */
    --service-item-min-height: auto;         /* ← Minimum height */
    --service-item-text-align: center;       /* ← Text alignment */
    
    /* ----- Item Hover Controls ----- */
    --service-item-hover-bg: #e8e8e8;        /* ← Hover background (light gray) */
    --service-item-hover-color: #212529;     /* ← Hover text color (same) */
    --service-item-hover-border: none;       /* ← No border on hover */
    --service-item-hover-shadow: none;       /* ← No shadow on hover */
    --service-item-hover-transform: none;    /* ← No lift on hover */
    --service-item-hover-scale: 1;           /* ← No scale on hover */
}


/* ============================================
   📄 SECTION 4: SERVICES GRID STYLES
   ============================================ */
.about-services-grid {
    background: #F8F9FA;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    margin-bottom: 3rem;
}

.about-services-grid .section-title {
    font-family: var(--services-heading-font);
    font-size: var(--services-heading-size);
    font-weight: var(--services-heading-weight);
    color: var(--services-heading);
    letter-spacing: var(--services-heading-spacing);
    text-transform: var(--services-heading-transform);
    text-align: center;
    margin-bottom: 2rem;
}

/* ----- Services Grid Container ----- */
.services-grid-25 {
    display: grid;
    grid-template-columns: repeat(var(--services-grid-columns), 1fr);
    gap: var(--services-grid-gap);
    max-width: var(--services-grid-max-width);
    margin: var(--services-grid-margin);
}

/* ----- Individual Service Item ----- */
.service-item {
    /* ----- Background & Border ----- */
    background: var(--service-item-bg);
    border: var(--service-item-border);
    border-radius: var(--service-item-radius);
    box-shadow: var(--service-item-shadow);
    
    /* ----- Text Controls ----- */
    color: var(--service-item-color);
    font-family: var(--service-item-font);
    font-size: var(--service-item-size);
    font-weight: var(--service-item-weight);
    letter-spacing: var(--service-item-spacing);
    text-transform: var(--service-item-transform);
    text-align: var(--service-item-text-align);
    
    /* ----- Padding & Size ----- */
    padding: var(--service-item-padding);
    min-height: var(--service-item-min-height);
    
    /* ----- Transition ----- */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* ----- Service Item Hover ----- */
.service-item:hover {
    background: var(--service-item-hover-bg);
    color: var(--service-item-hover-color);
    border-color: var(--service-item-hover-border);
    box-shadow: var(--service-item-hover-shadow);
    transform: var(--service-item-hover-transform);
    scale: var(--service-item-hover-scale);
}


/* ============================================
   🎨 SECTION 5: OUR HOSPITAL CONTROLS
   ============================================ */
:root {
    /* ----- "OUR HOSPITAL" Heading Controls ----- */
    --about-hospital-heading: #26df67;       /* ← "OUR HOSPITAL" color */
    --about-hospital-heading-size: 2.5rem;   /* ← Heading font size */
    --about-hospital-heading-weight: 700;    /* ← Heading font weight */
    --about-hospital-heading-spacing: 2px;   /* ← Heading letter spacing */
    --about-hospital-heading-font: 'Playfair Display', serif; /* ← Heading font */
    
    /* ----- Hospital Description Controls ----- */
    --about-hospital-text: #a3a0a0;          /* ← Text color */
    --about-hospital-text-size: 1rem;    /* ← Text font size */
    --about-hospital-text-weight: 300;       /* ← Text font weight */
    --about-hospital-text-spacing: 0px;      /* ← Text letter spacing */
    --about-hospital-text-font: 'Inter', sans-serif; /* ← Text font */
    --about-hospital-line-height: 1.8;       /* ← Text line height */
    --about-hospital-max-width: 800px;       /* ← Text max width */
}


/* ============================================
   📄 SECTION 5: OUR HOSPITAL STYLES
   ============================================ */
.about-hospital {
    max-width: var(--about-hospital-max-width);
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0;
}

.about-hospital .section-title {
    font-family: var(--about-hospital-heading-font);
    font-size: var(--about-hospital-heading-size);
    font-weight: var(--about-hospital-heading-weight);
    color: var(--about-hospital-heading);
    letter-spacing: var(--about-hospital-heading-spacing);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.about-hospital p {
    font-family: var(--about-hospital-text-font);
    font-size: var(--about-hospital-text-size);
    font-weight: var(--about-hospital-text-weight);
    color: var(--about-hospital-text);
    letter-spacing: var(--about-hospital-text-spacing);
    line-height: var(--about-hospital-line-height);
}


/* ============================================
   🎨 SECTION 6: GALLERY CONTROLS
   ============================================ */
:root {
    /* ----- Gallery Section Background ----- */
    --about-gallery-bg: #F8F9FA;             /* ← Gallery background */
    --about-gallery-padding: 4rem 0;         /* ← Gallery padding */
    
    /* ----- Gallery Title Controls ----- */
    --about-gallery-title: #212529;          /* ← "Our Hospital" color */
    --about-gallery-title-size: 2.5rem;      /* ← Title font size */
    --about-gallery-title-weight: 700;       /* ← Title font weight */
    --about-gallery-title-spacing: 2px;      /* ← Title letter spacing */
    --about-gallery-title-font: 'Playfair Display', serif; /* ← Title font */
    
    /* ----- Gallery Subtitle Controls ----- */
    --about-gallery-subtitle: #666666;       /* ← Subtitle color */
    --about-gallery-subtitle-size: 1.25rem;  /* ← Subtitle font size */
    --about-gallery-subtitle-weight: 300;    /* ← Subtitle font weight */
    --about-gallery-subtitle-font: 'Inter', sans-serif; /* ← Subtitle font */
    
    /* ----- Gallery Image Controls ----- */
    --about-gallery-columns: 4;              /* ← Number of columns */
    --about-gallery-gap: 1rem;               /* ← Gap between images */
    --about-gallery-radius: 8px;             /* ← Image border radius */
    --about-gallery-image-height: 220px;     /* ← Image height */
    --about-gallery-shadow: 0 8px 30px rgba(0,0,0,0.15); /* ← Image shadow */
}


/* ============================================
   📄 SECTION 6: GALLERY STYLES
   ============================================ */
.gallery-section {
    background: var(--about-gallery-bg);
    padding: var(--about-gallery-padding);
}

.gallery-section .section-title {
    font-family: var(--about-gallery-title-font);
    font-size: var(--about-gallery-title-size);
    font-weight: var(--about-gallery-title-weight);
    color: var(--about-gallery-title);
    letter-spacing: var(--about-gallery-title-spacing);
    text-align: center;
    text-transform: uppercase;
}

.gallery-section .section-subtitle {
    font-family: var(--about-gallery-subtitle-font);
    font-size: var(--about-gallery-subtitle-size);
    font-weight: var(--about-gallery-subtitle-weight);
    color: var(--about-gallery-subtitle);
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--about-gallery-columns), 1fr);
    gap: var(--about-gallery-gap);
    max-width: 1200px;
    margin: 2rem auto 0;
}

.gallery-item {
    overflow: hidden;
    border-radius: var(--about-gallery-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: var(--about-gallery-shadow);
}

.gallery-item img {
    width: 100%;
    height: var(--about-gallery-image-height);
    object-fit: cover;
    transition: all 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}


/* ============================================
   🎨 SECTION 7: LIGHTBOX CONTROLS
   ============================================ */
:root {
    /* ----- Lightbox Overlay Controls ----- */
    --about-lightbox-bg: rgba(0,0,0,0.92);   /* ← Overlay background */
    --about-lightbox-z-index: 2000;          /* ← Z-index */
    
    /* ----- Lightbox Image Controls ----- */
    --about-lightbox-image-max-width: 90%;   /* ← Image max width */
    --about-lightbox-image-max-height: 80%;  /* ← Image max height */
    --about-lightbox-radius: 8px;            /* ← Image border radius */
    
    /* ----- Navigation Arrows Controls ----- */
    --about-lightbox-nav: #FFFFFF;           /* ← Arrow color */
    --about-lightbox-nav-hover: #D63637;     /* ← Arrow hover color */
    --about-lightbox-nav-size: 2.5rem;       /* ← Arrow font size */
    
    /* ----- Close Button Controls ----- */
    --about-lightbox-close: #FFFFFF;         /* ← Close button color */
    --about-lightbox-close-hover: #D63637;   /* ← Close button hover */
    --about-lightbox-close-size: 3rem;       /* ← Close button font size */
    
    /* ----- Image Counter Controls ----- */
    --about-lightbox-counter: #FFFFFF;       /* ← Counter text color */
    --about-lightbox-counter-bg: rgba(0,0,0,0.6); /* ← Counter background */
    --about-lightbox-counter-size: 1rem;     /* ← Counter font size */
}



/* ============================================
   LIGHTBOX STYLES
   ============================================ */

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);  /* ← Fixed: only ONE "background:" */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);  /* ← For Safari support */
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
}

/* ----- Close Button ----- */
.close-btn {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #000000;  /* ← BLACK */
    font-size: 3rem;
    cursor: pointer;
    transition: color 0.3s ease;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.close-btn:hover {
    color: #D63637;  /* ← Red on hover */
}

/* ----- Navigation Arrows (BLACK) ----- */
.prev-btn,
.next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;  /* ← BLACK */
    font-size: 2.5rem;
    cursor: pointer;
    padding: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);  /* ← White background for visibility */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    user-select: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.prev-btn:hover,
.next-btn:hover {
    background: #FFFFFF;
    color: #D63637;  /* ← Red on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ----- Image Counter ----- */
.image-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #000000;  /* ← BLACK */
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.8);  /* ← White background */
    padding: 8px 24px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ============================================
   🎨 SECTION 8: LOCATIONS CONTROLS
   ============================================ */
:root {
    /* ----- Locations Section Background ----- */
    --about-locations-bg: #FFFFFF;           /* ← Section background */
    --about-locations-padding: 4rem 0;       /* ← Section padding */
    
    /* ----- Locations Title Controls ----- */
    --about-locations-title: #212529;        /* ← "LOCATION" color */
    --about-locations-title-size: 2.5rem;    /* ← Title font size */
    --about-locations-title-weight: 700;     /* ← Title font weight */
    --about-locations-title-spacing: 2px;    /* ← Title letter spacing */
    --about-locations-title-font: 'Playfair Display', serif; /* ← Title font */
    
    /* ----- Location Details Box (Left Side) ----- */
    --about-location-card-bg: #F8F9FA;       /* ← Card background */
    --about-location-card-radius: 12px;      /* ← Card border radius */
    --about-location-card-padding: 2rem;     /* ← Card padding */
    --about-location-card-border: #030269;   /* ← Card top border color */
    --about-location-card-shadow: 0 4px 20px rgba(0,0,0,0.06); /* ← Card shadow */
    
    /* ----- Location Name Controls ----- */
    --about-location-name: #212529;          /* ← Location name color */
    --about-location-name-size: 1.5rem;      /* ← Location name font size */
    --about-location-name-weight: 700;       /* ← Location name font weight */
    --about-location-name-spacing: 1px;      /* ← Location name letter spacing */
    --about-location-name-font: 'Playfair Display', serif; /* ← Location name font */
    
    /* ----- Location Address Controls ----- */
    --about-location-address: #666666;       /* ← Address color */
    --about-location-address-size: 0.95rem;  /* ← Address font size */
    --about-location-address-weight: 400;    /* ← Address font weight */
    --about-location-address-font: 'Inter', sans-serif; /* ← Address font */
    
    /* ----- Location Phone Controls ----- */
    --about-location-phone: #030269;         /* ← Phone color */
    --about-location-phone-size: 0.95rem;    /* ← Phone font size */
    --about-location-phone-weight: 500;      /* ← Phone font weight */
    --about-location-phone-font: 'Inter', sans-serif; /* ← Phone font */
    
    /* ----- Location Email Controls ----- */
    --about-location-email: #066AAB;         /* ← Email color */
    --about-location-email-size: 0.95rem;    /* ← Email font size */
    --about-location-email-weight: 400;      /* ← Email font weight */
    --about-location-email-font: 'Inter', sans-serif; /* ← Email font */
    
    /* ----- Location Icon Controls ----- */
    --about-location-icon: #D63637;          /* ← Icon color */
    --about-location-icon-size: 1.2rem;      /* ← Icon size */
}


/* ============================================
   📄 SECTION 8: LOCATIONS STYLES
   ============================================ */
.locations {
    background: var(--about-locations-bg);
    padding: var(--about-locations-padding);
}

.locations .section-title {
    font-family: var(--about-locations-title-font);
    font-size: var(--about-locations-title-size);
    font-weight: var(--about-locations-title-weight);
    color: var(--about-locations-title);
    letter-spacing: var(--about-locations-title-spacing);
    text-align: center;
    text-transform: uppercase;
}

/* ----- Wrapper: Left (Details) + Right (Map) ----- */
.locations-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 2rem auto 0;
    align-items: stretch;
}

/* ----- LEFT SIDE: Location Details Box ----- */
.location-details {
    background: var(--about-location-card-bg);
    padding: var(--about-location-card-padding);
    border-radius: var(--about-location-card-radius);
    box-shadow: var(--about-location-card-shadow);
    border-top: 4px solid var(--about-location-card-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

.location-details:hover {
    border-top-color: #D63637;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.location-details h3 {
    font-family: var(--about-location-name-font);
    font-size: var(--about-location-name-size);
    font-weight: var(--about-location-name-weight);
    color: var(--about-location-name);
    letter-spacing: var(--about-location-name-spacing);
    margin-bottom: 0.75rem;
}

.location-details .location-address {
    font-family: var(--about-location-address-font);
    font-size: var(--about-location-address-size);
    font-weight: var(--about-location-address-weight);
    color: var(--about-location-address);
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.location-details .location-phone {
    font-family: var(--about-location-phone-font);
    font-size: var(--about-location-phone-size);
    font-weight: var(--about-location-phone-weight);
    color: var(--about-location-phone);
    margin-bottom: 0.25rem;
}

.location-details .location-email {
    font-family: var(--about-location-email-font);
    font-size: var(--about-location-email-size);
    font-weight: var(--about-location-email-weight);
    color: var(--about-location-email);
}

.location-details i {
    font-size: var(--about-location-icon-size);
    color: var(--about-location-icon);
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

/* ----- RIGHT SIDE: Google Map ----- */
.location-map-wrapper {
    background: #F8F9FA;
    border-radius: var(--about-location-card-radius);
    overflow: hidden;
    min-height: 280px;
    box-shadow: var(--about-location-card-shadow);
}

.location-map-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: block;
}


/* ============================================
   📱 ABOUT PAGE: RESPONSIVE
   ============================================ */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    :root {
        --services-grid-columns: 2;
        --about-gallery-columns: 3;
    }
    
    .locations-wrapper {
        grid-template-columns: 1fr 1.5fr;
        gap: 1.5rem;
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    :root {
        --about-hero-title-size: 2.5rem;
        --about-intro-text-size: 1rem;
        --services-heading-size: 2rem;
        --services-p1-size: 1rem;
        --services-p2-size: 1rem;
        --about-hospital-heading-size: 2rem;
        --about-gallery-title-size: 2rem;
        --about-gallery-columns: 2;
        --about-gallery-image-height: 160px;
        --about-locations-title-size: 2rem;
    }
    
    .services-grid-25 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ----- Locations: Stack vertically on mobile ----- */
    .locations-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .location-map-wrapper {
        min-height: 250px;
    }
    
    .location-map-wrapper iframe {
        min-height: 250px;
    }
    
    /* ----- Lightbox Navigation ----- */
    .prev-btn,
    .next-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    
    .close-btn {
        right: 20px;
        font-size: 2rem;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    :root {
        --about-hero-title-size: 2rem;
        --services-heading-size: 1.5rem;
        --services-p1-size: 0.95rem;
        --services-p2-size: 0.95rem;
        --services-grid-columns: 2;
        --services-grid-gap: 0.5rem;
        --service-item-size: 0.8rem;
        --service-item-padding: 0.5rem 0.75rem;
        --about-hospital-heading-size: 1.5rem;
        --about-gallery-title-size: 1.5rem;
        --about-gallery-columns: 2;
        --about-gallery-image-height: 120px;
        --about-locations-title-size: 1.5rem;
        --about-location-name-size: 1.2rem;
        --about-location-card-padding: 1.5rem;
    }
    
    .services-grid-25 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    
    .service-item {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .gallery-item img {
        height: 120px;
    }
    
    /* ----- Locations: Stack vertically on small phones ----- */
    .locations-wrapper {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .location-map-wrapper {
        min-height: 200px;
    }
    
    .location-map-wrapper iframe {
        min-height: 200px;
    }
    
    .location-details {
        padding: 1.5rem;
    }
}


/* ============================================
   📋 SERVICES PAGE CSS - START
   ============================================ */


/* ============================================
   🎨 SECTION 1: PAGE HERO CONTROLS
   ============================================ */
:root {
    /* ----- Page Hero Background ----- */
    --services-hero-min-height: 40vh;         /* ← Hero minimum height */
    
    /* ----- Page Hero Title Controls ----- */
    --services-hero-title: #FFFFFF;           /* ← "Our Services" color */
    --services-hero-title-size: 3.5rem;       /* ← Title font size */
    --services-hero-title-weight: 700;        /* ← Title font weight */
    --services-hero-title-spacing: 2px;       /* ← Title letter spacing */
    --services-hero-title-font: 'Playfair Display', serif; /* ← Title font */
    
    /* ----- Page Hero Badge Controls ----- */
    --services-hero-badge: rgba(255,255,255,0.9); /* ← "OUR SPECIALISTS" color */
    --services-hero-badge-size: 0.9rem;       /* ← Badge font size */
    --services-hero-badge-weight: 500;        /* ← Badge font weight */
    --services-hero-badge-spacing: 4px;       /* ← Badge letter spacing */
    --services-hero-badge-font: 'Inter', sans-serif; /* ← Badge font */
    
    /* ----- Page Hero Subtitle Controls ----- */
    --services-hero-subtitle: rgba(255,255,255,0.9); /* ← "Specialized Clinics" color */
    --services-hero-subtitle-size: 1.5rem;    /* ← Subtitle font size */
    --services-hero-subtitle-weight: 300;     /* ← Subtitle font weight */
    --services-hero-subtitle-spacing: 1px;    /* ← Subtitle letter spacing */
    --services-hero-subtitle-font: 'Playfair Display', serif; /* ← Subtitle font */
    
    /* ----- Page Hero Description Controls ----- */
    --services-hero-desc: rgba(255,255,255,0.8); /* ← Description color */
    --services-hero-desc-size: 1.1rem;        /* ← Description font size */
    --services-hero-desc-weight: 300;         /* ← Description font weight */
    --services-hero-desc-spacing: 0px;        /* ← Description letter spacing */
    --services-hero-desc-font: 'Inter', sans-serif; /* ← Description font */
}


/* ============================================
   PAGE HERO STYLES
   ============================================ */

.page-hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    overflow: hidden;
}

.page-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-hero-image {
    width: 100%;
    height: 72vh;
    object-fit: cover;
    filter: brightness(0.6);
}

.page-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 800px;
    z-index: 2;
}

.page-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* ----- BADGE (NEW) ----- */
.page-hero-badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding: 6px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
}

.page-hero-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.page-hero-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0px;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   SPECIALISTS INTRO SECTION
   Appears above the service cards
   ============================================ */

.specialists-intro {
    padding: 3rem 0 1rem 0;
    background: #FFFFFF;
    text-align: center;
}

.specialists-intro-content {
    max-width: 800px;
    margin: 0 auto;
}

/* ----- Badge ----- */
.specialists-badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding: 6px 18px;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    background: #F8F9FA;
}

/* ----- Title ----- */
.specialists-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: #212529;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* ----- Description ----- */
.specialists-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: #666666;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}


/* ============================================
   🎨 SECTION 2: SERVICES CARDS CONTROLS
   ============================================ */
:root {
    /* ----- Section Background ----- */
    --services-section-bg: #FFFFFF;           /* ← Section background */
    --services-section-padding: 4rem 0;       /* ← Section padding */
    
    /* ----- Card Layout Controls ----- */
    --services-card-columns: 3;               /* ← Number of columns */
    --services-card-gap: 2rem;                /* ← Gap between cards */
    --services-card-padding: 2rem;            /* ← Card padding */
    --services-card-radius: 12px;             /* ← Card border radius */
    --services-card-bg: #F8F9FA;              /* ← Card background */
    --services-card-shadow: 0 4px 20px rgba(0,0,0,0.06); /* ← Card shadow */
    
    /* ----- Card Hover Controls ----- */
    --services-card-hover-transform: translateY(-8px); /* ← Hover lift */
    --services-card-hover-shadow: 0 12px 40px rgba(0,0,0,0.12); /* ← Hover shadow */
    
    /* ----- Card Image Controls ----- */
    --services-card-image-width: 100%;         /* ← Image width */
    --services-card-image-height: 180px;       /* ← Image height */
    --services-card-image-radius: 8px;         /* ← Image border radius */
    --services-card-image-object-fit: cover;   /* ← Image fit */
    
    /* ----- Card Title Controls ----- */
    --services-card-title: #1dc236;            /* ← Title color */
    --services-card-title-size: 1rem;        /* ← Title font size */
    --services-card-title-weight: 600;         /* ← Title font weight */
    --services-card-title-spacing: 1px;        /* ← Title letter spacing */
    --services-card-title-font: 'Playfair Display', serif; /* ← Title font */
    --services-card-title-transform: uppercase;/* ← Title text transform */
    --services-card-title-margin: 1rem 0 0.5rem; /* ← Title margin */
    
    /* ----- Card Description Controls ----- */
    --services-card-desc: #8b8888;             /* ← Description color */
    --services-card-desc-size: 0.95rem;        /* ← Description font size */
    --services-card-desc-weight: 400;          /* ← Description font weight */
    --services-card-desc-spacing: 0px;         /* ← Description letter spacing */
    --services-card-desc-font: 'Inter', sans-serif; /* ← Description font */
    --services-card-desc-line-height: 1.6;     /* ← Description line height */
    --services-card-desc-margin: 0;            /* ← Description margin */
}


/* ============================================
   📄 SECTION 2: SERVICES CARDS STYLES
   ============================================ */
.services-page {
    background: var(--services-section-bg);
    padding: var(--services-section-padding);
}

.services-page-grid {
    display: grid;
    grid-template-columns: repeat(var(--services-card-columns), 1fr);
    gap: var(--services-card-gap);
    max-width: 1100px;
    margin: 0 auto;
}

/* ----- Individual Service Card ----- */
.service-page-card {
    background: var(--services-card-bg);
    padding: var(--services-card-padding);
    border-radius: var(--services-card-radius);
    box-shadow: var(--services-card-shadow);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-page-card:hover {
    transform: var(--services-card-hover-transform);
    box-shadow: var(--services-card-hover-shadow);
}

/* ----- Card Image (INSTEAD OF ICON) ----- */
.service-page-image {
    width: var(--services-card-image-width);
    height: var(--services-card-image-height);
    object-fit: var(--services-card-image-object-fit);
    border-radius: var(--services-card-image-radius);
    margin-bottom: 0.5rem;
}

/* ----- Card Title ----- */
.service-page-card h3 {
    font-family: var(--services-card-title-font);
    font-size: var(--services-card-title-size);
    font-weight: var(--services-card-title-weight);
    color: var(--services-card-title);
    letter-spacing: var(--services-card-title-spacing);
    text-transform: var(--services-card-title-transform);
    margin: var(--services-card-title-margin);
}

/* ----- Card Description ----- */
.service-page-card p {
    font-family: var(--services-card-desc-font);
    font-size: var(--services-card-desc-size);
    font-weight: var(--services-card-desc-weight);
    color: var(--services-card-desc);
    letter-spacing: var(--services-card-desc-spacing);
    line-height: var(--services-card-desc-line-height);
    margin: var(--services-card-desc-margin);
}


/* ============================================
   🎨 SECTION 3: FAQ CONTROLS (Services Page)
   ============================================ */
:root {
    /* ----- FAQ Section Background ----- */
    --services-faq-bg: #F8F9FA;               /* ← FAQ background */
    --services-faq-padding: 4rem 0;           /* ← FAQ padding */
    
    /* ----- FAQ Heading Controls ----- */
    --services-faq-heading: #212529;          /* ← "General FAQs" color */
    --services-faq-heading-size: 2.5rem;      /* ← Heading font size */
    --services-faq-heading-weight: 700;       /* ← Heading font weight */
    --services-faq-heading-spacing: 2px;      /* ← Heading letter spacing */
    --services-faq-heading-font: 'Playfair Display', serif; /* ← Heading font */
}


/* ============================================
   📄 SECTION 3: FAQ STYLES (Services Page)
   ============================================ */
.services-faq {
    background: var(--services-faq-bg);
    padding: var(--services-faq-padding);
}

.services-faq .section-title {
    font-family: var(--services-faq-heading-font);
    font-size: var(--services-faq-heading-size);
    font-weight: var(--services-faq-heading-weight);
    color: var(--services-faq-heading);
    letter-spacing: var(--services-faq-heading-spacing);
    text-align: center;
    text-transform: uppercase;
}


/* ============================================
   📱 SERVICES PAGE: RESPONSIVE
   ============================================ */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    :root {
        --services-card-columns: 2;
        --services-hero-title-size: 3rem;
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    :root {
        --services-hero-title-size: 2.5rem;
        --services-hero-subtitle-size: 1.2rem;
        --services-hero-desc-size: 1rem;
        --services-card-columns: 1;
        --services-card-gap: 1.5rem;
        --services-card-title-size: 1.1rem;
        --services-card-desc-size: 0.9rem;
        --services-card-image-height: 150px;
        --services-faq-heading-size: 2rem;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    :root {
        --services-hero-title-size: 2rem;
        --services-hero-subtitle-size: 1rem;
        --services-hero-desc-size: 0.9rem;
        --services-hero-badge-size: 0.75rem;
        --services-card-padding: 1.5rem;
        --services-card-title-size: 1rem;
        --services-card-desc-size: 0.85rem;
        --services-card-image-height: 120px;
        --services-faq-heading-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .specialists-intro {
        padding: 2rem 0 0.5rem 0;
    }
    
    .specialists-title {
        font-size: 2rem;
    }
    
    .specialists-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .specialists-intro {
        padding: 1.5rem 0 0.5rem 0;
    }
    
    .specialists-title {
        font-size: 1.5rem;
    }
    
    .specialists-badge {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
}

/* ============================================
   📋 SERVICES PAGE CSS - END
   ============================================ */

   /* ============================================
   📞 CONTACT PAGE CSS - START
   ============================================ */


/* ============================================
   🎨 SECTION 1: PAGE HERO CONTROLS
   ============================================ */
:root {
    /* ----- Page Hero Background ----- */
    --contact-hero-min-height: 65vh;           /* ← Hero minimum height */
    
    /* ----- Page Hero Title Controls ----- */
    --contact-hero-title: #FFFFFF;             /* ← "CONTACT US" color */
    --contact-hero-title-size: 3.5rem;         /* ← Title font size */
    --contact-hero-title-weight: 700;          /* ← Title font weight */
    --contact-hero-title-spacing: 2px;         /* ← Title letter spacing */
    --contact-hero-title-font: 'Playfair Display', serif; /* ← Title font */
    
    /* ----- Page Hero Subtitle Controls ----- */
    --contact-hero-subtitle: rgba(255,255,255,0.9); /* ← "We Alway Ready..." color */
    --contact-hero-subtitle-size: 1.25rem;     /* ← Subtitle font size */
    --contact-hero-subtitle-weight: 300;       /* ← Subtitle font weight */
    --contact-hero-subtitle-spacing: 1px;      /* ← Subtitle letter spacing */
    --contact-hero-subtitle-font: 'Inter', sans-serif; /* ← Subtitle font */
}


/* ============================================
   📄 SECTION 1: PAGE HERO STYLES
   ============================================ */
.page-hero {
    position: relative;
    min-height: var(--contact-hero-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    overflow: hidden;
}

.page-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-hero-image {
    width: 100%;
    height: var(--contact-hero-min-height);
    object-fit: cover;
    filter: brightness(0.6);
}

.page-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 700px;
    z-index: 2;
}

.page-hero-title {
    font-family: var(--contact-hero-title-font);
    font-size: var(--contact-hero-title-size);
    font-weight: var(--contact-hero-title-weight);
    color: var(--contact-hero-title);
    letter-spacing: var(--contact-hero-title-spacing);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.page-hero-subtitle {
    font-family: var(--contact-hero-subtitle-font);
    font-size: var(--contact-hero-subtitle-size);
    font-weight: var(--contact-hero-subtitle-weight);
    color: var(--contact-hero-subtitle);
    letter-spacing: var(--contact-hero-subtitle-spacing);
    line-height: 1.6;
}


/* ============================================
   🎨 SECTION 2: CONTACT PAGE LAYOUT CONTROLS
   ============================================ */
:root {
    /* ----- Contact Page Background ----- */
    --contact-page-bg: #FFFFFF;                /* ← Page background */
    --contact-page-padding: 4rem 0;            /* ← Page padding */
    
    /* ----- Contact Grid Controls ----- */
    --contact-grid-gap: 2rem;                  /* ← Gap between columns */
    --contact-grid-columns: 1fr 1.5fr 1fr;     /* ← Column sizes */
}


/* ============================================
   📄 SECTION 2: CONTACT PAGE LAYOUT STYLES
   ============================================ */
.contact-page {
    background: var(--contact-page-bg);
    padding: var(--contact-page-padding);
}

.contact-grid {
    display: grid;
    grid-template-columns: var(--contact-grid-columns);
    gap: var(--contact-grid-gap);
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}


/* ============================================
   🎨 SECTION 3: CONTACT INFO CONTROLS
   ============================================ */
:root {
    /* ----- Info Item Background ----- */
    --contact-info-bg: #F8F9FA;                /* ← Info card background */
    --contact-info-radius: 12px;               /* ← Info card radius */
    --contact-info-padding: 1.5rem;            /* ← Info card padding */
    --contact-info-gap: 1rem;                  /* ← Gap between info cards */
    --contact-info-hover-transform: translateX(5px); /* ← Hover effect */
    --contact-info-hover-shadow: 0 4px 20px rgba(0,0,0,0.08); /* ← Hover shadow */
    
    /* ----- Info Icon Controls ----- */
    --contact-icon-size: 1.8rem;               /* ← Icon size */
    --contact-icon-color: #D63637;             /* ← Icon color */
    --contact-icon-min-width: 40px;            /* ← Icon min width */
    
    /* ----- Info Heading Controls ----- */
    --contact-heading-color: #212529;          /* ← Heading color */
    --contact-heading-size: 1.1rem;            /* ← Heading font size */
    --contact-heading-weight: 700;             /* ← Heading font weight */
    --contact-heading-spacing: 0px;            /* ← Heading letter spacing */
    --contact-heading-font: 'Playfair Display', serif; /* ← Heading font */
    
    /* ----- Info Text Controls ----- */
    --contact-text-color: #666666;             /* ← Text color */
    --contact-text-size: 0.95rem;              /* ← Text font size */
    --contact-text-weight: 400;                /* ← Text font weight */
    --contact-text-spacing: 0px;               /* ← Text letter spacing */
    --contact-text-font: 'Inter', sans-serif;  /* ← Text font */
    --contact-text-line-height: 1.6;           /* ← Text line height */
}


/* ============================================
   📄 SECTION 3: CONTACT INFO STYLES
   ============================================ */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--contact-info-gap);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: var(--contact-info-bg);
    padding: var(--contact-info-padding);
    border-radius: var(--contact-info-radius);
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: var(--contact-info-hover-transform);
    box-shadow: var(--contact-info-hover-shadow);
}

.info-icon {
    font-size: var(--contact-icon-size);
    color: var(--contact-icon-color);
    min-width: var(--contact-icon-min-width);
    margin-top: 2px;
}

.info-content h3 {
    font-family: var(--contact-heading-font);
    font-size: var(--contact-heading-size);
    font-weight: var(--contact-heading-weight);
    color: var(--contact-heading-color);
    letter-spacing: var(--contact-heading-spacing);
    margin-bottom: 2px;
}

.info-content p {
    font-family: var(--contact-text-font);
    font-size: var(--contact-text-size);
    font-weight: var(--contact-text-weight);
    color: var(--contact-text-color);
    letter-spacing: var(--contact-text-spacing);
    line-height: var(--contact-text-line-height);
}

.info-content a {
    color: var(--contact-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-content a:hover {
    color: #D63637;
}


/* ============================================
   🎨 SECTION 4: CONTACT MAP CONTROLS
   ============================================ */
:root {
    /* ----- Map Container Controls ----- */
    --contact-map-bg: #FFFFFF;                 /* ← Map background */
    --contact-map-radius: 12px;                /* ← Map border radius */
    --contact-map-shadow: 0 4px 20px rgba(0,0,0,0.08); /* ← Map shadow */
    --contact-map-height: 350px;               /* ← Map height */
    
    /* ----- Map Details Controls ----- */
    --contact-map-name-color: #212529;         /* ← Hospital name color */
    --contact-map-name-size: 1.2rem;           /* ← Hospital name font size */
    --contact-map-name-weight: 700;            /* ← Hospital name font weight */
    --contact-map-name-font: 'Playfair Display', serif; /* ← Hospital name font */
    
    --contact-map-address-color: #666666;      /* ← Address color */
    --contact-map-address-size: 0.9rem;        /* ← Address font size */
    --contact-map-address-weight: 400;         /* ← Address font weight */
    
    --contact-map-stars-color: #F59E0B;        /* ← Star color */
    --contact-map-rating-color: #666666;       /* ← Rating text color */
    --contact-map-rating-size: 0.9rem;         /* ← Rating font size */
}


/* ============================================
   📄 SECTION 4: CONTACT MAP STYLES
   ============================================ */
.contact-map {
    background: var(--contact-map-bg);
    border-radius: var(--contact-map-radius);
    overflow: hidden;
    box-shadow: var(--contact-map-shadow);
    display: flex;
    flex-direction: column;
}

.map-container {
    flex: 1;
}

.map-container iframe {
    width: 100%;
    height: var(--contact-map-height);
    border: 0;
    display: block;
}

.map-details {
    padding: 1.5rem;
}

.map-details h3 {
    font-family: var(--contact-map-name-font);
    font-size: var(--contact-map-name-size);
    font-weight: var(--contact-map-name-weight);
    color: var(--contact-map-name-color);
    margin-bottom: 0.25rem;
}

.map-details p {
    font-size: var(--contact-map-address-size);
    font-weight: var(--contact-map-address-weight);
    color: var(--contact-map-address-color);
    margin-bottom: 0.5rem;
}

.rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating .stars {
    color: var(--contact-map-stars-color);
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.rating .rating-text {
    color: var(--contact-map-rating-color);
    font-size: var(--contact-map-rating-size);
}


/* ============================================
   🎨 SECTION 5: CONTACT FORM CONTROLS
   ============================================ */
:root {
    /* ----- Form Container Controls ----- */
    --contact-form-bg: #F8F9FA;                /* ← Form background */
    --contact-form-radius: 12px;               /* ← Form border radius */
    --contact-form-padding: 2rem;              /* ← Form padding */
    --contact-form-shadow: 0 4px 20px rgba(0,0,0,0.08); /* ← Form shadow */
    
    /* ----- Form Heading Controls ----- */
    --contact-form-title-color: #212529;       /* ← "CONTACT US" color */
    --contact-form-title-size: 2rem;           /* ← Title font size */
    --contact-form-title-weight: 700;          /* ← Title font weight */
    --contact-form-title-spacing: 2px;         /* ← Title letter spacing */
    --contact-form-title-font: 'Playfair Display', serif; /* ← Title font */
    
    /* ----- Form Subtitle Controls ----- */
    --contact-form-subtitle-color: #666666;    /* ← Subtitle color */
    --contact-form-subtitle-size: 1rem;        /* ← Subtitle font size */
    --contact-form-subtitle-weight: 300;       /* ← Subtitle font weight */
    --contact-form-subtitle-font: 'Inter', sans-serif; /* ← Subtitle font */
    
    /* ----- Form Label Controls ----- */
    --contact-label-color: #212529;            /* ← Label color */
    --contact-label-size: 0.9rem;              /* ← Label font size */
    --contact-label-weight: 500;               /* ← Label font weight */
    --contact-label-font: 'Inter', sans-serif; /* ← Label font */
    
    /* ----- Form Input Controls ----- */
    --contact-input-color: #212529;            /* ← Input text color */
    --contact-input-size: 0.95rem;             /* ← Input font size */
    --contact-input-weight: 400;               /* ← Input font weight */
    --contact-input-font: 'Inter', sans-serif; /* ← Input font */
    --contact-input-border: #E5E7EB;           /* ← Input border color */
    --contact-input-focus: #212529;            /* ← Input focus border */
    --contact-input-radius: 8px;               /* ← Input border radius */
    --contact-input-padding: 12px 16px;        /* ← Input padding */
}


/* ============================================
   📄 SECTION 5: CONTACT FORM STYLES
   ============================================ */
.contact-form-wrapper {
    background: var(--contact-form-bg);
    padding: var(--contact-form-padding);
    border-radius: var(--contact-form-radius);
    box-shadow: var(--contact-form-shadow);
}

.contact-form-wrapper h2 {
    font-family: var(--contact-form-title-font);
    font-size: var(--contact-form-title-size);
    font-weight: var(--contact-form-title-weight);
    color: var(--contact-form-title-color);
    letter-spacing: var(--contact-form-title-spacing);
    margin-bottom: 0.25rem;
}

.contact-form-wrapper > p {
    font-family: var(--contact-form-subtitle-font);
    font-size: var(--contact-form-subtitle-size);
    font-weight: var(--contact-form-subtitle-weight);
    color: var(--contact-form-subtitle-color);
    margin-bottom: 1.5rem;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form .form-group {
    margin-bottom: 1.25rem;
}

.contact-form .form-group.half {
    margin-bottom: 0;
}

.contact-form label {
    display: block;
    font-family: var(--contact-label-font);
    font-size: var(--contact-label-size);
    font-weight: var(--contact-label-weight);
    color: var(--contact-label-color);
    margin-bottom: 0.25rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--contact-input-padding);
    border: 2px solid var(--contact-input-border);
    border-radius: var(--contact-input-radius);
    font-family: var(--contact-input-font);
    font-size: var(--contact-input-size);
    font-weight: var(--contact-input-weight);
    color: var(--contact-input-color);
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--contact-input-focus);
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.05);
}


/* ============================================
   📱 CONTACT PAGE: RESPONSIVE
   ============================================ */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    :root {
        --contact-grid-columns: 1fr 1fr;
        --contact-hero-title-size: 3rem;
        --contact-form-title-size: 1.8rem;
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    :root {
        --contact-grid-columns: 1fr;
        --contact-hero-title-size: 2.5rem;
        --contact-hero-subtitle-size: 1rem;
        --contact-form-title-size: 1.5rem;
        --contact-form-padding: 1.5rem;
        --contact-info-padding: 1rem;
        --contact-map-height: 250px;
    }
    
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-form .form-group.half {
        margin-bottom: 1.25rem;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    :root {
        --contact-hero-title-size: 2rem;
        --contact-hero-subtitle-size: 0.9rem;
        --contact-form-title-size: 1.3rem;
        --contact-form-padding: 1rem;
        --contact-info-padding: 0.75rem;
        --contact-icon-size: 1.4rem;
        --contact-heading-size: 0.95rem;
        --contact-text-size: 0.85rem;
        --contact-map-height: 200px;
    }
}


/* ============================================
   📞 CONTACT PAGE CSS - END
   ============================================ */

   /* ============================================
   📅 APPOINTMENT PAGE CSS - START
   ============================================ */


/* ============================================
   🎨 SECTION 1: APPOINTMENT CONTROLS
   ============================================ */
:root {
    /* ----- Page Hero Controls ----- */
    --appointment-hero-title: #FFFFFF;
    --appointment-hero-title-size: 3rem;
    --appointment-hero-title-weight: 700;
    --appointment-hero-title-spacing: 2px;
    --appointment-hero-title-font: 'Playfair Display', serif;
    
    --appointment-hero-subtitle: rgba(255,255,255,0.9);
    --appointment-hero-subtitle-size: 1.1rem;
    --appointment-hero-subtitle-weight: 300;
    --appointment-hero-subtitle-font: 'Inter', sans-serif;
    
    /* ----- Intro Text Controls ----- */
    --appointment-intro-color: #555555;
    --appointment-intro-size: 1.1rem;
    --appointment-intro-weight: 400;
    --appointment-intro-font: 'Inter', sans-serif;
    --appointment-intro-line-height: 1.8;
    --appointment-intro-max-width: 750px;
    
    /* ----- Option Cards Controls ----- */
    --appointment-card-bg: #F8F9FA;
    --appointment-card-radius: 12px;
    --appointment-card-padding: 2rem;
    --appointment-card-shadow: 0 4px 20px rgba(0,0,0,0.06);
    --appointment-card-border: 2px solid transparent;
    --appointment-card-hover-transform: translateY(-8px);
    --appointment-card-hover-shadow: 0 12px 40px rgba(0,0,0,0.12);
    
    /* ----- Option Cards - Selected State ----- */
    --appointment-card-selected-border: #3b36d6;
    --appointment-card-selected-bg: #FFFFFF;
    --appointment-card-selected-shadow: 0 8px 30px rgba(214,54,55,0.15);
    
    /* ----- Option Card Text Controls ----- */
    --appointment-card-icon-size: 3rem;
    --appointment-card-title-color: #212529;
    --appointment-card-title-size: 1.3rem;
    --appointment-card-title-weight: 700;
    --appointment-card-title-font: 'Playfair Display', serif;
    --appointment-card-desc-color: #666666;
    --appointment-card-desc-size: 0.95rem;
    --appointment-card-desc-font: 'Inter', sans-serif;
    --appointment-card-detail-color: #1ed56d;
    --appointment-card-detail-size: 0.85rem;
    --appointment-card-detail-font-style: 'Inter', sans-serif;
    
    /* ----- Option Card Button Controls ----- */
    --appointment-card-btn-bg: #030269;
    --appointment-card-btn-color: #FFFFFF;
    --appointment-card-btn-radius: 50px;
    --appointment-card-btn-padding: 8px 24px;
    --appointment-card-btn-hover-bg: #1a1a8a;
    
    /* ----- Booking Form Controls ----- */
    --appointment-form-bg: #FFFFFF;
    --appointment-form-radius: 12px;
    --appointment-form-padding: 2.5rem;
    --appointment-form-shadow: 0 8px 40px rgba(0,0,0,0.08);
    --appointment-form-border: 2px solid #E5E7EB;
    
    /* ----- Form Title Controls ----- */
    --appointment-form-title-color: #212529;
    --appointment-form-title-size: 2rem;
    --appointment-form-title-weight: 700;
    --appointment-form-title-font: 'Playfair Display', serif;
    
    /* ----- Form Subtitle Controls ----- */
    --appointment-form-subtitle-color: #666666;
    --appointment-form-subtitle-size: 1rem;
    --appointment-form-subtitle-weight: 300;
    --appointment-form-subtitle-font: 'Inter', sans-serif;
    
    /* ----- Form Label Controls ----- */
    --appointment-label-color: #212529;
    --appointment-label-size: 0.9rem;
    --appointment-label-weight: 500;
    --appointment-label-font: 'Inter', sans-serif;
    
    /* ----- Form Input Controls ----- */
    --appointment-input-color: #212529;
    --appointment-input-size: 0.95rem;
    --appointment-input-weight: 400;
    --appointment-input-font: 'Inter', sans-serif;
    --appointment-input-border: #E5E7EB;
    --appointment-input-focus: #212529;
    --appointment-input-radius: 8px;
    --appointment-input-padding: 12px 16px;
    
    /* ----- Selected Service Display Controls ----- */
    --appointment-service-label-color: #666666;
    --appointment-service-text-color: #3818ca;
    --appointment-service-text-weight: 600;
    
    /* ----- Gender Options Controls ----- */
    --appointment-gender-border: #E5E7EB;
    --appointment-gender-selected: #381cc7;
    --appointment-gender-text: #212529;
    
    /* ----- Submit Button Controls ----- */
    --appointment-btn-bg: #2b0fc8;
    --appointment-btn-text: #FFFFFF;
    --appointment-btn-hover: #211cb7;
    --appointment-btn-radius: 50px;
    --appointment-btn-padding: 14px 32px;
    --appointment-btn-size: 1rem;
    --appointment-btn-weight: 600;
    
    /* ----- Success Message Controls ----- */
    --appointment-success-bg: #F0FDF4;
    --appointment-success-border: #10B981;
    --appointment-success-text: #065F46;
    --appointment-success-title: #212529;
}


/* ============================================
   📄 SECTION 1: PAGE HERO STYLES
   ============================================ */
.page-hero {
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    overflow: hidden;
}

.page-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-hero-image {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    filter: brightness(0.6);
}

.page-hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 800px;
    z-index: 2;
}

.page-hero-title {
    font-family: var(--appointment-hero-title-font);
    font-size: var(--appointment-hero-title-size);
    font-weight: var(--appointment-hero-title-weight);
    color: var(--appointment-hero-title);
    letter-spacing: var(--appointment-hero-title-spacing);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.page-hero-subtitle {
    font-family: var(--appointment-hero-subtitle-font);
    font-size: var(--appointment-hero-subtitle-size);
    font-weight: var(--appointment-hero-subtitle-weight);
    color: var(--appointment-hero-subtitle);
    line-height: 1.6;
}


/* ============================================
   📄 SECTION 2: APPOINTMENT PAGE LAYOUT
   ============================================ */
.appointment-page {
    padding: 3rem 0 4rem;
    background: #FFFFFF;
}

.appointment-intro {
    max-width: var(--appointment-intro-max-width);
    margin: 0 auto 3rem;
    text-align: center;
}

.appointment-intro p {
    font-family: var(--appointment-intro-font);
    font-size: var(--appointment-intro-size);
    font-weight: var(--appointment-intro-weight);
    color: var(--appointment-intro-color);
    letter-spacing: var(--appointment-intro-spacing, 0px);
    line-height: var(--appointment-intro-line-height);
}


/* ============================================
   OPTION CARDS - SAME HEIGHT + ALIGNED BUTTONS
   ============================================ */

/* ----- Grid Container - Make all cards same height ----- */
.appointment-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 2rem;
    align-items: stretch; /* ← KEY: Makes all cards equal height */
}

/* ----- Individual Card ----- */
.option-card {
    background: var(--appointment-card-bg, #F8F9FA);
    padding: var(--appointment-card-padding, 2rem);
    border-radius: var(--appointment-card-radius, 12px);
    border: var(--appointment-card-border, 2px solid transparent);
    box-shadow: var(--appointment-card-shadow, 0 4px 20px rgba(0,0,0,0.06));
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    
    /* ----- KEY: Flex column to push button down ----- */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ----- Push "Book" button to the bottom ----- */
.option-card .option-select-btn {
    margin-top: auto;
    align-self: center;
}

/* ----- Rest of your styles ----- */
.option-card:hover {
    transform: var(--appointment-card-hover-transform, translateY(-8px));
    box-shadow: var(--appointment-card-hover-shadow, 0 12px 40px rgba(0,0,0,0.12));
}

.option-card.active {
    border-color: var(--appointment-card-selected-border, #3128db);
    background: var(--appointment-card-selected-bg, #FFFFFF);
    box-shadow: var(--appointment-card-selected-shadow, 0 8px 30px rgba(214,54,55,0.15));
    transform: translateY(-8px);
}

.option-card .option-icon {
    font-size: var(--appointment-card-icon-size, 3rem);
    margin-bottom: 1rem;
    display: block;
}

.option-card h3 {
    font-family: var(--appointment-card-title-font, 'Playfair Display', serif);
    font-size: var(--appointment-card-title-size, 1.3rem);
    font-weight: var(--appointment-card-title-weight, 700);
    color: var(--appointment-card-title-color, #212529);
    margin-bottom: 0.5rem;
}

.option-card p {
    font-family: var(--appointment-card-desc-font, 'Inter', sans-serif);
    font-size: var(--appointment-card-desc-size, 0.95rem);
    color: var(--appointment-card-desc-color, #666666);
    line-height: 1.6;
    flex: 1; /* ← This pushes content up, button stays at bottom */
}

.option-card .option-detail {
    font-size: var(--appointment-card-detail-size, 0.85rem);
    color: var(--appointment-card-detail-color, #888888);
    font-style: var(--appointment-card-detail-font-style, italic);
    margin-top: 0.25rem;
}

/* ----- "Book" Button ----- */
.option-select-btn {
    display: inline-block;
    padding: 10px 28px;
    background: #037d28;
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.option-card:hover .option-select-btn {
    background: #1a8a27;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(3, 2, 105, 0.2);
}

.option-card.active .option-select-btn {
    background: #D63637;
    box-shadow: 0 4px 20px rgba(214, 54, 55, 0.3);
}

.option-card.active::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.2rem;
    color: var(--appointment-card-selected-border, #D63637);
    font-weight: 700;
}


/* ============================================
   📄 SECTION 4: BOOKING FORM
   ============================================ */
.booking-form-wrapper {
    max-width: 750px;
    margin: 0 auto;
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.booking-form-container {
    background: var(--appointment-form-bg);
    padding: var(--appointment-form-padding);
    border-radius: var(--appointment-form-radius);
    border: var(--appointment-form-border);
    box-shadow: var(--appointment-form-shadow);
}

.booking-form-container h2 {
    font-family: var(--appointment-form-title-font);
    font-size: var(--appointment-form-title-size);
    font-weight: var(--appointment-form-title-weight);
    color: var(--appointment-form-title-color);
    text-align: center;
    margin-bottom: 0.25rem;
}

.booking-subtitle {
    font-family: var(--appointment-form-subtitle-font);
    font-size: var(--appointment-form-subtitle-size);
    font-weight: var(--appointment-form-subtitle-weight);
    color: var(--appointment-form-subtitle-color);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ----- Selected Service Display ----- */
.selected-service {
    background: #F8F9FA;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 1.5rem;
}

.selected-service-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--appointment-service-label-color);
}

.selected-service-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: var(--appointment-service-text-weight);
    color: var(--appointment-service-text-color);
}

/* ----- Form Fields ----- */
.booking-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.booking-form .form-group {
    margin-bottom: 1.25rem;
}

.booking-form .form-group.half {
    margin-bottom: 0;
}

.booking-form label {
    display: block;
    font-family: var(--appointment-label-font);
    font-size: var(--appointment-label-size);
    font-weight: var(--appointment-label-weight);
    color: var(--appointment-label-color);
    margin-bottom: 0.25rem;
}

.booking-form input,
.booking-form textarea,
.booking-form select {
    width: 100%;
    padding: var(--appointment-input-padding);
    border: 2px solid var(--appointment-input-border);
    border-radius: var(--appointment-input-radius);
    font-family: var(--appointment-input-font);
    font-size: var(--appointment-input-size);
    font-weight: var(--appointment-input-weight);
    color: var(--appointment-input-color);
    transition: border-color 0.3s ease;
}

.booking-form input:focus,
.booking-form textarea:focus,
.booking-form select:focus {
    outline: none;
    border-color: var(--appointment-input-focus);
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.05);
}

.booking-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* ----- Gender Options ----- */
.gender-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.gender-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--appointment-gender-text);
    cursor: pointer;
}

.gender-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--appointment-gender-selected);
    cursor: pointer;
}

/* ----- Submit Button ----- */
.booking-form .btn-primary {
    background-color: var(--appointment-btn-bg);
    color: var(--appointment-btn-text);
    padding: var(--appointment-btn-padding);
    border: none;
    border-radius: var(--appointment-btn-radius);
    font-size: var(--appointment-btn-size);
    font-weight: var(--appointment-btn-weight);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.booking-form .btn-primary:hover {
    background-color: var(--appointment-btn-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(214, 54, 55, 0.3);
}

.booking-form .btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ----- Form Note ----- */
.form-note {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #999999;
    margin-top: 1rem;
}


/* ============================================
   📄 SECTION 5: SUCCESS MESSAGE
   ============================================ */
.success-message {
    text-align: center;
    padding: 2rem 1rem;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.success-message h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--appointment-success-title);
    margin-bottom: 0.5rem;
}

.success-message p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--appointment-success-text);
    line-height: 1.6;
}

.success-details {
    font-size: 1.1rem !important;
    color: #212529 !important;
    margin: 0.25rem 0;
}

.success-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.success-buttons .btn-primary {
    background-color: var(--appointment-btn-bg);
    color: var(--appointment-btn-text);
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.success-buttons .btn-primary:hover {
    background-color: var(--appointment-btn-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(214, 54, 55, 0.3);
}

.success-buttons .btn-secondary {
    background-color: #E5E7EB;
    color: #212529;
    padding: 12px 30px;
    border: none;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.success-buttons .btn-secondary:hover {
    background-color: #D1D5DB;
    transform: translateY(-3px);
}


/* ============================================
   📄 SECTION 6: PAYMENT METHODS
   ============================================ */
.payment-methods {
    max-width: 750px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    background: #F8F9FA;
    border-radius: 12px;
    text-align: center;
}

.payment-methods p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #666666;
}


/* ============================================
   📱 RESPONSIVE
   ============================================ */

/* ----- Tablet (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    :root {
        --appointment-hero-title-size: 2.8rem;
        --appointment-card-padding: 1.5rem;
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    :root {
        --appointment-hero-title-size: 2.2rem;
        --appointment-hero-subtitle-size: 1rem;
        --appointment-card-padding: 1.5rem;
        --appointment-form-padding: 1.5rem;
        --appointment-form-title-size: 1.5rem;
    }
    
    .appointment-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .booking-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .booking-form .form-group.half {
        margin-bottom: 1.25rem;
    }
    
    .gender-options {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .option-card.active::after {
        top: 8px;
        right: 12px;
        font-size: 1rem;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    :root {
        --appointment-hero-title-size: 1.8rem;
        --appointment-hero-subtitle-size: 0.9rem;
        --appointment-card-padding: 1rem;
        --appointment-form-padding: 1rem;
        --appointment-form-title-size: 1.3rem;
        --appointment-input-padding: 10px 12px;
    }
    
    .option-card {
        padding: 1rem;
    }
    
    .option-card .option-icon {
        font-size: 2.5rem;
    }
    
    .option-card h3 {
        font-size: 1.1rem;
    }
    
    .success-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .success-buttons .btn-primary,
    .success-buttons .btn-secondary {
        width: 100%;
        max-width: 250px;
        text-align: center;
    }
}


/* ============================================
   📅 APPOINTMENT PAGE CSS - END
   ============================================ */


   /* ============================================
   📱 COMPLETE RESPONSIVE FIX
   ============================================ */

/* ----- Tablet & Small Laptops (max-width: 1024px) ----- */
@media (max-width: 1024px) {
    /* Navigation */
    .nav-links {
        gap: 1rem;
    }
    
    /* Hero */
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-title-white {
        font-size: 3.5rem;
    }
    
    .hero-title-green {
        font-size: 2.2rem;
    }
    
    /* Services Grid */
    .services-grid,
    .services-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Features Grid */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Specialists Grid */
    .specialists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Insurance Grid */
    .insurance-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Gallery Grid */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Locations */
    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Locations Wrapper (About page) */
    .locations-wrapper {
        grid-template-columns: 1fr 1.5fr;
        gap: 1.5rem;
    }
    
    /* Appointment Options */
    .appointment-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Hero Services */
    .hero-services {
        gap: 1.5rem;
    }
    
    /* Services Grid (25 items) */
    .services-grid-25 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- Mobile (max-width: 768px) ----- */
@media (max-width: 768px) {
    /* --- TYPOGRAPHY --- */
    :root {
        --text-hero: 2.2rem;
        --text-display: 1.8rem;
        --text-xxlarge: 1.5rem;
        --text-xlarge: 1.3rem;
        --text-large: 1.1rem;
        --text-medium: 1rem;
        --text-normal: 0.95rem;
        --text-small: 0.8rem;
    }
    
    /* --- NAVIGATION --- */
    .hamburger {
        display: flex;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--header-bg, #FFFFFF);
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid var(--header-border, #E5E7EB);
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        width: 100%;
        text-align: center;
    }
    
    .nav-links li a {
        display: block;
        padding: 12px 20px;
        font-size: var(--text-normal);
    }
    
    .nav-links li a.btn-appointment {
        display: inline-block;
        width: auto;
        margin: 0 auto;
    }
    
    /* --- HERO --- */
    .hero {
        min-height: 70vh;
        margin-top: 65px;
    }
    
    .hero-image {
        height: 70vh;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 4px 14px;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }
    
    .hero-title {
        font-size: 2.8rem;
        letter-spacing: 1px;
        line-height: 1.2;
    }
    
    .hero-title-white {
        font-size: 2.8rem;
    }
    
    .hero-title-green {
        font-size: 1.8rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .hero-services {
        gap: 1.5rem;
        margin-top: 2rem;
        flex-wrap: wrap;
    }
    
    .hero-service-item {
        min-width: 100px;
        flex: 1 1 40%;
    }
    
    .hero-service-icon {
        font-size: 2rem;
    }
    
    .hero-service-text h3 {
        font-size: 1rem;
    }
    
    .hero-service-text p {
        font-size: 0.75rem;
    }
    
    /* --- CTA BANNER --- */
    .cta-banner {
        padding: 3rem 0;
    }
    
    .cta-title {
        font-size: 1.1rem;
        letter-spacing: 2px;
        margin-bottom: 1rem;
    }
    
    .cta-text-large {
        font-size: 2.8rem;
        display: block;
    }
    
    .cta-text-small {
        font-size: 1.8rem;
        display: block;
    }
    
    .btn-cta-rectangle {
        padding: 10px 30px;
        font-size: 0.9rem;
        width: 100%;
        max-width: 250px;
    }
    
    /* --- WHY CHOOSE US --- */
    .why-choose-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .why-choose-right {
        order: -1;
    }
    
    .why-image-wrapper {
        max-width: 100%;
        max-height: 300px;
    }
    
    .why-image {
        aspect-ratio: 16 / 9;
    }
    
    .why-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .why-word-1,
    .why-word-2,
    .why-word-3,
    .why-word-4 {
        font-size: calc(2.5rem * 0.7);
    }
    
    .why-sub-word-1,
    .why-sub-word-2,
    .why-sub-word-3,
    .why-sub-word-4 {
        font-size: calc(1.25rem * 0.8);
    }
    
    /* --- GRIDS (Stack vertically) --- */
    .services-grid,
    .services-page-grid,
    .features-grid,
    .specialists-grid,
    .insurance-grid,
    .gallery-grid,
    .locations-grid,
    .appointment-options {
        grid-template-columns: 1fr;
    }
    
    .services-grid-25 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .locations-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .location-map-wrapper {
        min-height: 250px;
    }
    
    .location-map-wrapper iframe {
        min-height: 250px;
    }
    
    /* --- CONTACT --- */
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-form .form-group.half {
        margin-bottom: 1.25rem;
    }
    
    .contact-form-wrapper {
        padding: 1.5rem;
    }
    
    /* --- APPOINTMENT --- */
    .appointment-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .booking-form .form-row {
        grid-template-columns: 1fr;
    }
    
    .booking-form .form-group.half {
        margin-bottom: 1.25rem;
    }
    
    .gender-options {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .booking-form-container {
        padding: 1.5rem;
    }
    
    .booking-form-wrapper {
        padding: 0;
    }
    
    /* --- GALLERY --- */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .gallery-item img {
        height: 160px;
    }
    
    /* --- LIGHTBOX --- */
    .prev-btn,
    .next-btn {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .prev-btn {
        left: 10px;
    }
    
    .next-btn {
        right: 10px;
    }
    
    .close-btn {
        right: 20px;
        font-size: 2rem;
    }
    
    /* --- FAQ --- */
    .faq-container {
        padding: 0 0.5rem;
    }
    
    .faq-question {
        padding: 0.8rem 1rem;
    }
    
    .faq-text {
        font-size: 0.95rem;
    }
    
    .faq-answer {
        padding: 0 1rem;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 1rem 1rem;
    }
    
    /* --- HEALTH TIPS --- */
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* --- MAP --- */
    .map-wrapper iframe {
        height: 250px;
    }
    
    /* --- FOOTER --- */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-contact ul li {
        justify-content: center;
    }
    
    /* --- PAGE HERO (Inner Pages) --- */
    .page-hero {
        min-height: 30vh;
        margin-top: 65px;
    }
    
    .page-hero-image {
        height: 30vh;
    }
    
    .page-hero-title {
        font-size: 2.2rem;
    }
    
    .page-hero-subtitle {
        font-size: 1rem;
    }
    
    .page-hero-description {
        font-size: 0.9rem;
    }
}

/* ----- Small Phones (max-width: 480px) ----- */
@media (max-width: 480px) {
    /* --- HERO --- */
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-title-white {
        font-size: 2.2rem;
    }
    
    .hero-title-green {
        font-size: 1.4rem;
    }
    
    .hero-badge {
        font-size: 0.65rem;
        padding: 3px 10px;
        letter-spacing: 1px;
    }
    
    .hero-services {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .hero-service-item {
        flex: none;
        width: 100%;
        max-width: 200px;
        min-width: auto;
    }
    
    .hero-service-icon {
        font-size: 1.6rem;
    }
    
    .hero-service-text h3 {
        font-size: 0.9rem;
    }
    
    .hero-service-text p {
        font-size: 0.7rem;
    }
    
    .hero-buttons .btn {
        max-width: 220px;
    }
    
    /* --- CTA --- */
    .cta-banner {
        padding: 2rem 0;
    }
    
    .cta-title {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    
    .cta-text-large {
        font-size: 2.2rem;
    }
    
    .cta-text-small {
        font-size: 1.4rem;
    }
    
    .btn-cta-rectangle {
        padding: 8px 20px;
        font-size: 0.8rem;
        max-width: 200px;
    }
    
    /* --- GRIDS --- */
    .services-grid-25 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    
    .service-item {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    
    .gallery-item img {
        height: 120px;
    }
    
    /* --- WHY CHOOSE --- */
    .why-word-1,
    .why-word-2,
    .why-word-3,
    .why-word-4 {
        font-size: calc(2.5rem * 0.5);
    }
    
    .why-cards-grid .feature-card {
        padding: 0.25rem 0;
    }
    
    .why-cards-grid .feature-icon {
        font-size: calc(var(--why-icon-size, 2.8rem) * 0.8);
    }
    
    .why-image-wrapper {
        max-height: 200px;
    }
    
    /* --- BOOKING FORM --- */
    .booking-form-container {
        padding: 1rem;
    }
    
    .booking-form-wrapper {
        padding: 0.5rem;
    }
    
    /* --- CONTACT --- */
    .contact-form-wrapper {
        padding: 1rem;
    }
    
    .info-item {
        padding: 0.75rem;
    }
    
    .info-icon {
        font-size: 1.4rem;
    }
    
    .info-content h3 {
        font-size: 0.95rem;
    }
    
    .info-content p {
        font-size: 0.85rem;
    }
    
    /* --- LOCATIONS --- */
    .location-details {
        padding: 1.5rem;
    }
    
    .location-map-wrapper {
        min-height: 200px;
    }
    
    .location-map-wrapper iframe {
        min-height: 200px;
    }
    
    /* --- LOGO --- */
    .logo-text {
        font-size: 1.2rem;
    }
    
    .logo-sub {
        font-size: 0.55rem;
        letter-spacing: 2px;
    }
    
    /* --- BUTTONS --- */
    .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}

/* ============================================
   INSURANCE PROVIDERS - 2 COLUMN ON MOBILE ONLY
   ============================================ */

/* ----- Desktop: Keep as is (4 columns) ----- */
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 100%;
    margin: 0 auto;
}

/* ----- Tablet: 3 columns ----- */
@media (max-width: 1024px) {
    .insurance-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* ----- Mobile: 2 columns ----- */
@media (max-width: 768px) {
    .insurance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .insurance-item {
        padding: 0.75rem;
    }
    
    .insurance-item img {
        max-height: 35px;
    }
}

/* ----- Small Phones: 2 columns (stay) ----- */
@media (max-width: 480px) {
    .insurance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .insurance-item {
        padding: 0.5rem;
    }
    
    .insurance-item img {
        max-height: 30px;
    }
}

/* ============================================
   WHY CHOOSE US - TRANSPARENT CARDS WITH THIN LINE
   ============================================ */

/* ----- Card Container (transparent, just border) ----- */
.why-cards-grid .feature-card {
    border: 1px solid rgba(0, 0, 0, 0.1);  /* ← Thin line border */
    background: transparent;                /* ← Transparent (uses section bg) */
    padding: 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* ----- Hover Effect ----- */
.why-cards-grid .feature-card:hover {
    border-color: #D63637;                 /* ← Border turns red on hover */
    transform: translateY(-3px);
}

/* ----- If you want different border colors per card ----- */
.why-cards-grid .feature-card:nth-child(1) {
    border-color: #bdbddb;                 /* ← Red border */
}

.why-cards-grid .feature-card:nth-child(2) {
    border-color: #bdbddb;                 /* ← Green border */
}

.why-cards-grid .feature-card:nth-child(3) {
    border-color: #bdbddb;                 /* ← Navy border */
}

.why-cards-grid .feature-card:nth-child(4) {
    border-color: #bdbddb;                 /* ← Gold border */
}

/* ----- But on desktop, remove borders ----- */
@media (min-width: 1025px) {
    .why-cards-grid .feature-card {
        border: none;
        background: transparent;
        padding: 0.5rem;
    }
    
    .why-cards-grid .feature-card:hover {
        transform: translateY(-5px);
        border: none;
    }
}

/* ============================================
   WHY CHOOSE US - THIN LINE ONLY ON MOBILE/TABLET
   ============================================ */

.why-cards-grid .feature-card {
    background: transparent;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

/* ----- Tablet and Phone: Thin line border ----- */
@media (max-width: 1024px) {
    .why-cards-grid .feature-card {
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        border-radius: 8px;
    }
    
    .why-cards-grid .feature-card:hover {
        border-color: #D63637;
        transform: translateY(-3px);
    }
}

/* ----- Desktop: No border ----- */
@media (min-width: 1025px) {
    .why-cards-grid .feature-card {
        border: none;
        padding: 0.5rem;
    }
    
    .why-cards-grid .feature-card:hover {
        transform: translateY(-5px);
    }
}