/* =========================================
   GLOBAL RESET
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Light background for the page body */
}

/* =========================================
   HEADER STYLES
========================================= */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4%; /* Adjust padding as needed */
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow to separate from content */
}

/* --- Left Logo --- */
.logo-container {
    display: flex;
    align-items: center;
}

.main-logo {
    height: 65px; /* Adjust height to match your desired size */
    width: auto;
    object-fit: contain;
}

/* --- Right Side Layout --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 35px; /* Space between badges and emergency button */
}

/* --- Accreditation Badges --- */
.accreditation-badges {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between NABH and NABL logos */
}

.badge-icon {
    height: 55px; /* Standardize the height of the badges */
    width: auto;
    object-fit: contain;
}

/* --- Emergency Contact Box --- */
.emergency-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.emergency-label {
    color: #0b1c4a; /* Brand dark blue */
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 5px;
}

.emergency-button {
    background-color: #f15a24; /* Brand orange */
    color: #ffffff;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 50px; /* Fully rounded pill shape */
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.emergency-button .phone-icon {
    stroke: #ffffff; /* Make the SVG icon white */
}

/* Hover effects for the button */
.emergency-button:hover {
    background-color: #d9481a;
    transform: scale(1.02);
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */
@media screen and (max-width: 768px) {
    .main-header {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .header-right {
        flex-direction: column;
        gap: 20px;
    }

    .emergency-contact {
        align-items: center;
    }

    .main-logo {
        height: 55px; /* Slightly smaller logo on mobile */
    }
}

/* =========================================
   HERO SECTION STYLES
========================================= */

/* Main Section Wrapper */
.hero-vascular {
    position: relative;
    width: 100%;
    min-height: 550px;
    /* Generic medical stock image. Replace this URL with your local image path if needed */
   background-image: url('images/Vascular-banner.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 5%;
    font-family: Arial, sans-serif;
}

/* Dark/Blurred Overlay Effect */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay */
    z-index: 1;
}

/* Container for Left/Right Split */
.hero-container {
    position: relative;
    z-index: 2; /* Keeps content above the overlay */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    gap: 40px;
}

/* --- LEFT SIDE: Content --- */
.hero-content {
    flex: 1;
    color: #ffffff;
    max-width: 600px;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.95;
}

/* --- RIGHT SIDE: Form Box --- */
.hero-form-box {
    background-color: #ffffff;
    padding: 35px 40px;
    border-radius: 10px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-form-box h2 {
    color: #1a1c52; /* Dark blue */
    font-size: 1.6rem;
    margin-bottom: 25px;
    text-align: left;
}

.hero-form-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Input Fields Styling */
.hero-form-box input,
.hero-form-box textarea {
    width: 100%;
    padding: 15px;
    background-color: #f4f6fb; /* Very light blue/grey as seen in image */
    border: none;
    border-radius: 5px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #333;
}

.hero-form-box input::placeholder,
.hero-form-box textarea::placeholder {
    color: #a0a5b1;
}

.hero-form-box input:focus,
.hero-form-box textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px #d1d8e0; /* Subtle highlight on click */
}

.hero-form-box textarea {
    resize: vertical;
}

/* Button Styling */
.button-wrapper {
    display: flex;
    justify-content: center; /* Centers the button horizontally */
    margin-top: 10px;
}

.hero-form-box button {
    background-color: #f15a24; /* Brand Orange */
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px; /* Pill shape */
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero-form-box button:hover {
    background-color: #d9481a;
    transform: scale(1.02);
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */
@media screen and (max-width: 900px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-form-box {
        padding: 30px 20px;
    }

    .hero-form-box h2 {
        text-align: center;
    }
}
/* =========================================
   SYMPTOMS SECTION (ICON GRID DESIGN)
========================================= */

.symptoms-icon-section {
    padding: 80px 5%;
    background-color: #f4f7f9; /* Very soft cool grey */
    font-family: Arial, sans-serif;
}

.symptoms-icon-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Text Styling */
.symptoms-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.symptoms-header h2 {
    color: #2e3192; /* Brand Blue */
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.symptoms-header p {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.6;
}

.symptoms-header strong {
    color: #f15a24; /* Brand Orange */
}

/* Responsive Grid */
.symptoms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* Individual Card Styling */
.symptom-card {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 12px;
    text-align: center; /* Centers the icon and text */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
}

.symptom-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(46, 49, 146, 0.08);
    border-bottom: 4px solid #f15a24; /* Orange accent line appears on hover */
}

/* Icon Wrapper */
.icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: #eef2f9; /* Light blue circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    transition: background-color 0.3s ease;
}

.symptom-card:hover .icon-wrapper {
    background-color: #f15a24; /* Circle turns orange on hover */
}

/* SVG Settings */
.icon-wrapper svg {
    width: 32px;
    height: 32px;
    stroke: #2e3192; /* Icons start as Brand Blue */
    transition: stroke 0.3s ease;
}

.symptom-card:hover .icon-wrapper svg {
    stroke: #ffffff; /* Icons turn white when hovering */
}

/* Text Settings */
.symptom-card h3 {
    color: #2e3192;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.symptom-card p {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */
@media screen and (max-width: 768px) {
    .symptoms-icon-section {
        padding: 50px 5%;
    }

    .symptoms-header h2 {
        font-size: 2rem;
    }

    .symptom-card {
        padding: 30px 20px;
    }
}
/* =========================================
   LIGHT WAVE SECTION (Clean & Clinical)
========================================= */

.vascular-light-wave {
    position: relative;
    padding: 100px 5% 150px 5%;
    background-color: #f4f7f9; /* Very soft, clean clinical background */
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* --- Soft Pastel Ambient Backgrounds --- */
.pastel-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: 0;
}

.orb-blue {
    width: 600px;
    height: 600px;
    background-color: #2e3192;
    top: -200px;
    left: -200px;
    opacity: 0.08; /* Extremely subtle, just a hint of blue */
}

.orb-orange {
    width: 500px;
    height: 500px;
    background-color: #f15a24;
    bottom: -150px;
    right: -100px;
    opacity: 0.06; /* Extremely subtle hint of orange */
}

/* --- Main Container --- */
.wave-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
}

/* --- Header --- */
.wave-header {
    text-align: center;
    margin-bottom: 70px;
}

.wave-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a1c52; /* Dark Navy Text */
    line-height: 1.3;
}

.wave-header h2 span {
    color: #f15a24; /* Brand Orange Highlight */
}

/* --- The Staggered Wave Row --- */
.wave-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    align-items: flex-start;
}

/* --- Light Glass Card Styling --- */
.light-glass-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    backdrop-filter: blur(12px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #ffffff; /* Crisp white border */
    padding: 40px 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Soft shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Creating the Wave Shape */
.pos-1, .pos-5 { margin-top: 0; }
.pos-2, .pos-4 { margin-top: 50px; }
.pos-3 { margin-top: 100px; } /* Lowest point */

/* Center Card Highlight */
.highlight-light-card {
    background: #ffffff; /* Solid white for center focus */
    border: 2px solid #f15a24; /* Orange border */
    box-shadow: 0 15px 35px rgba(241, 90, 36, 0.1);
}

/* Hover Effects */
.light-glass-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(46, 49, 146, 0.1); /* Soft blue shadow on hover */
    z-index: 10;
}

/* --- Icons --- */
.icon-circle {
    width: 65px;
    height: 65px;
    margin: 0 auto 20px auto;
    background-color: #eef2f9; /* Soft blue circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.center-icon {
    background-color: #fff0eb; /* Soft orange circle for the center card */
}

.icon-circle svg {
    width: 30px;
    height: 30px;
    stroke: #2e3192; /* Brand Blue */
}

.center-icon svg {
    stroke: #f15a24; /* Brand Orange */
}

.light-glass-card:hover .icon-circle {
    background-color: #2e3192;
}

.light-glass-card:hover .center-icon {
    background-color: #f15a24;
}

.light-glass-card:hover .icon-circle svg {
    stroke: #ffffff; /* Icons turn white on hover */
}

/* --- Text --- */
.light-glass-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #1a1c52;
    font-weight: 700;
}

.light-glass-card p {
    font-size: 1rem;
    color: #555555;
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */
@media screen and (max-width: 1024px) {
    /* Tablet */
    .wave-row { flex-wrap: wrap; }
    .light-glass-card { 
        flex: 1 1 30%; 
        margin-top: 0 !important; /* Disables wave on smaller screens */
    }
}

@media screen and (max-width: 768px) {
    /* Mobile */
    .vascular-light-wave { padding: 60px 5%; }
    .wave-header h2 { font-size: 2.2rem; }
    .light-glass-card { flex: 1 1 100%; margin-bottom: 20px; }
}
/* Isolated Scope for Vascular Timeline */
.vascular-timeline-section {
  background-color: #f8f9fc;
  padding: 5rem 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.vascular-timeline-section * {
  box-sizing: inherit;
}

.vt-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Header Styles */
.vt-header {
  text-align: center;
  margin-bottom: 4rem;
}

.vt-title {
  font-size: 2.5rem;
  color: #213f9a; /* Brand Blue */
  margin: 0 0 1rem 0;
  font-weight: 700;
}

.vt-desc {
  font-size: 1.1rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}

.vt-hospital-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(245, 149, 30, 0.1);
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(245, 149, 30, 0.3);
}

.vt-hospital-badge svg {
  width: 24px;
  height: 24px;
  color: #f5951e; /* Brand Orange */
}

.vt-hospital-badge p {
  margin: 0;
  color: #1a1a1a;
  font-size: 1rem;
}

.vt-hospital-badge strong {
  color: #213f9a;
}

/* Timeline Layout */
.vt-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* The Central Line */
.vt-timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background: rgba(33, 63, 154, 0.15);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
}

.vt-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  margin-bottom: 0;
}

.vt-left {
  left: 0;
}

.vt-right {
  left: 50%;
}

/* The Dots on the Line */
.vt-node {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #f5951e; /* Brand Orange */
  border: 4px solid #fff;
  border-radius: 50%;
  top: 28px;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(245, 149, 30, 0.2);
  transition: transform 0.3s ease;
}

.vt-left .vt-node {
  right: -10px;
}

.vt-right .vt-node {
  left: -10px;
}

/* Timeline Cards */
.vt-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid #213f9a; /* Brand Blue */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vt-item:hover .vt-card {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(33, 63, 154, 0.1);
  border-left-color: #f5951e; /* Changes to Orange on hover */
}

.vt-item:hover .vt-node {
  transform: scale(1.3);
}

.vt-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(33, 63, 154, 0.05);
  color: #213f9a;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.vt-item:hover .vt-icon {
  background: #213f9a;
  color: #fff;
}

.vt-icon svg {
  width: 24px;
  height: 24px;
}

.vt-card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #1a1a1a;
  font-weight: 600;
  line-height: 1.4;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  .vt-title {
    font-size: 2rem;
  }
  
  .vt-hospital-badge {
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Move the line to the left */
  .vt-timeline::after {
    left: 20px;
    transform: none;
  }

  /* Make all items full width */
  .vt-item {
    width: 100%;
    padding-left: 60px;
    padding-right: 0;
    left: 0;
  }

  /* Move all nodes to the left line */
  .vt-left .vt-node,
  .vt-right .vt-node {
    left: 10px;
    right: auto;
  }
}
/* Isolated Scope for Stacked Treatments Section */
.treatments-stacked-section {
  background-color: #f4f6fa; /* Soft background to make white cards pop */
  /* Extra bottom padding is crucial so the user can scroll through the entire stack */
  padding: 6rem 2rem 12rem 2rem; 
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.treatments-stacked-section * {
  box-sizing: inherit;
}

.ts-container {
  max-width: 900px;
  margin: 0 auto;
}

/* --- Header --- */
.ts-header {
  text-align: center;
  margin-bottom: 5rem;
}

.ts-badge {
  display: inline-block;
  background: #ffffff;
  color: #f5951e; /* Brand Orange */
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(245, 149, 30, 0.1);
}

.ts-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #213f9a; /* Brand Blue */
  margin: 0 0 1.25rem 0;
  letter-spacing: -1px;
}

.ts-desc {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* --- The Deck --- */
.ts-deck {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* Initial gap before they stack */
  position: relative;
}

/* --- The Sticky Cards --- */
.ts-card {
  /* The Magic: Cards lock to the top, offsetting by 20px per card to create the visible stack */
  position: sticky;
  top: calc(100px + (var(--stack-index) * 20px)); 
  
  /* Ensures later cards layer perfectly on top of earlier ones */
  z-index: var(--stack-index); 
  
  transition: transform 0.3s ease;
}

.ts-card-inner {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 2rem 3rem;
  border-radius: 20px;
  border: 1px solid rgba(33, 63, 154, 0.05);
  /* Heavy top shadow gives the illusion of physical stacking */
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(33, 63, 154, 0.04);
  gap: 2rem;
  transition: all 0.3s ease;
}

/* Subtle pop effect when hovering over a card in the stack */
.ts-card:hover .ts-card-inner {
  transform: translateY(-5px);
  border-color: rgba(245, 149, 30, 0.3); /* Soft orange border on hover */
}

/* --- Content Styling --- */
.ts-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #cbd5e1; /* Light gray */
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.ts-card:hover .ts-num {
  color: #f5951e; /* Turns Orange on hover */
}

.ts-treatment {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.ts-card:hover .ts-treatment {
  color: #213f9a; /* Turns Blue on hover */
}

.ts-arrow {
  font-size: 1.5rem;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.ts-card:hover .ts-arrow {
  color: #f5951e;
  transform: translateX(5px);
}

/* --- Mobile Responsiveness --- */
@media screen and (max-width: 768px) {
  .treatments-stacked-section {
    padding: 4rem 1.25rem 8rem 1.25rem;
  }
  
  .ts-title {
    font-size: 2.5rem;
  }

  .ts-card-inner {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
    border-radius: 16px;
  }

  .ts-num {
    font-size: 1.2rem;
  }

  .ts-treatment {
    font-size: 1.15rem;
  }

  .ts-arrow {
    display: none; /* Hide arrow on mobile to save space */
  }

  /* Compress the stacking distance slightly on small screens */
  .ts-card {
    top: calc(80px + (var(--stack-index) * 12px)); 
  }
}
/* Isolated Scope for Appointment & Testimonial Section */
.appointment-testimonial-section {
  background: linear-gradient(135deg, #fff4e6, #f3e8ff); /* Soft background to contrast the banner */
  padding: 6rem 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.appointment-testimonial-section * {
  box-sizing: inherit;
}

.at-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 Split */
  gap: 3rem;
  align-items: stretch;
}

/* =========================================
   LEFT: CTA BANNER (Based on your Image)
   ========================================= */
.at-cta-banner {
  background-color: #31428c; /* The exact dark blue from your reference */
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  padding: 3.5rem 3rem;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(49, 66, 140, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Concentric Circles from the top right of your image */
.at-rings {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 
    0 0 0 30px rgba(255, 255, 255, 0.05),
    0 0 0 60px rgba(255, 255, 255, 0.03),
    0 0 0 90px rgba(255, 255, 255, 0.01);
  z-index: 0;
  pointer-events: none;
}

.at-cta-content {
  position: relative;
  z-index: 1;
}

.at-cta-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.at-icon-wrapper {
  background: rgba(255, 255, 255, 0.15);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.at-icon-wrapper svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.at-cta-header h2 {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

/* Contact Info Area */
.at-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.at-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.at-contact-item svg {
  width: 20px;
  height: 20px;
  color: #f5951e; /* Orange icons for contrast */
  flex-shrink: 0;
  margin-top: 2px;
}

.at-contact-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.at-contact-item strong {
  color: #ffffff;
}

/* Banner Text */
.at-cta-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2.5rem 0;
  border-left: 3px solid #f5951e; /* Orange accent line */
  padding-left: 1rem;
}

/* The Orange Button */
.at-btn {
  display: inline-block;
  background-color: #f07b22; /* Matches the button in your image */
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(240, 123, 34, 0.3);
  align-self: flex-start; /* Keeps button from stretching */
}

.at-btn:hover {
  background-color: #d96a1a;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(240, 123, 34, 0.4);
}

/* =========================================
   RIGHT: PATIENT EXPERIENCES
   ========================================= */
.at-testimonials {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.at-testi-header {
  margin-bottom: 2rem;
}

.at-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #f5951e;
  margin-bottom: 0.5rem;
}

.at-testi-header h2 {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin: 0;
  font-weight: 800;
  letter-spacing: -1px;
}

.at-cards-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.at-quote-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  position: relative;
  transition: transform 0.3s ease;
}

.at-quote-card:hover {
  transform: translateX(10px);
  border-color: #cbd5e1;
}

.at-quote-icon {
  width: 32px;
  height: 32px;
  color: rgba(240, 123, 34, 0.2); /* Faded orange */
  margin-bottom: 1rem;
}

.at-quote-card p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4a5568;
  margin: 0;
  font-style: italic;
}

/* =========================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================= */
@media screen and (max-width: 1024px) {
  .at-container {
    grid-template-columns: 1fr; /* Stack vertically on tablet/mobile */
    gap: 4rem;
  }
  
  .at-cta-banner {
    padding: 3rem 2.5rem;
  }
}

@media screen and (max-width: 768px) {
  .appointment-testimonial-section {
    padding: 4rem 1.25rem;
  }

  .at-cta-banner {
    padding: 2.5rem 1.5rem;
  }

  .at-cta-header h2 {
    font-size: 1.5rem;
  }

  .at-contact-item p {
    font-size: 0.9rem;
  }

  .at-btn {
    width: 100%; /* Full width button on mobile */
  }

  .at-testi-header h2 {
    font-size: 2rem;
  }

  .at-quote-card {
    padding: 1.5rem;
  }

  /* Disable hover transform on mobile */
  .at-quote-card:hover {
    transform: none;
  }
}
/* Isolated Scope for Sleek Expert Cards Section */
.expert-cards-section {
  background-color: #f8fafc; /* Very light, clean background */
  padding: 6rem 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.expert-cards-section * {
  box-sizing: inherit;
}

.ec-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Header --- */
.ec-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.ec-badge {
  display: inline-block;
  background: #ffffff;
  color: #f5951e; /* Brand Orange */
  padding: 8px 24px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.ec-title {
  font-size: 3rem;
  font-weight: 800;
  color: #213f9a; /* Brand Blue */
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
}

.ec-desc {
  font-size: 1.15rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* --- The Grid --- */
.ec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

/* --- The Premium Card --- */
.ec-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden; /* Keeps the top image locked inside the rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* Interactive Hover Lift */
.ec-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(33, 63, 154, 0.1);
}

/* Subtle Accent Line at the bottom */
.ec-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.ec-card:hover::after {
  background-color: #f5951e; /* Bottom edge turns orange on hover */
}

/* --- Image Wrapper --- */
.ec-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1; /* Forces a perfect 400x400 square ratio */
  background-color: #e2e8f0;
  overflow: hidden;
}

.ec-img {
  width: 100%;
  height: 470px !important;
  /* Use 'cover' to fill the area, or switch to 'contain' if your photos need white space around them */
  object-fit: cover; 
  transition: transform 0.5s ease;
}

/* Slight zoom effect on the image when hovering over the card */
.ec-card:hover .ec-img {
  transform: scale(1.05);
}

/* --- Content Wrapper --- */
.ec-content {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1; /* Pushes the card to full height evenly */
}

.ec-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.ec-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: #213f9a; /* Brand Blue */
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

.ec-divider {
  width: 40px;
  height: 2px;
  background-color: #e2e8f0;
  margin: 0 0 1.25rem 0;
}

.ec-creds {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* --- Tablet & Mobile Responsiveness --- */
@media screen and (max-width: 1024px) {
  .ec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .expert-cards-section {
    padding: 4rem 1.25rem;
  }
  
  .ec-title {
    font-size: 2.5rem;
  }

  .ec-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Disable hover lift on mobile devices */
  .ec-card:hover {
    transform: none;
  }
}
/* Isolated Scope for Screening Camp Promo Section */
.camp-promo-section {
  background-color: #f4f6fa; /* Soft background to make the blue banner pop */
  padding: 4rem 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.camp-promo-section * {
  box-sizing: inherit;
}

.cp-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- The Main Promo Card --- */
.cp-card {
  background: linear-gradient(135deg, #213f9a 0%, #172d70 100%); /* Premium Brand Blue Gradient */
  border-radius: 20px;
  padding: 4rem 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(33, 63, 154, 0.15);
  position: relative;
  overflow: hidden;
}

/* Subtle background accent ring for depth */
.cp-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* --- Left Side: Announcement --- */
.cp-announcement {
  flex: 1;
  max-width: 500px;
  position: relative;
  z-index: 1;
}

.cp-badge {
  display: inline-block;
  background-color: #f5951e; /* Brand Orange */
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(245, 149, 30, 0.3);
}

.cp-title {
  font-size: 2.75rem;
  font-weight: 800;
  margin: 0 0 1.25rem 0;
  line-height: 1.1;
  letter-spacing: -1px;
}

.cp-desc {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* --- Right Side: Action Area --- */
.cp-action-area {
  flex: 1;
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.5rem;
  border-radius: 16px;
}

.cp-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cp-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  color: #ffffff;
}

.cp-benefits-list li strong {
  color: #f5951e; /* Highlights key words in Orange */
}

.cp-benefits-list svg {
  width: 22px;
  height: 22px;
  color: #f5951e; /* Brand Orange Checkmarks */
  flex-shrink: 0;
  margin-top: 2px;
}

/* The Orange CTA Button */
.cp-btn {
  display: block;
  background-color: #f5951e;
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(245, 149, 30, 0.3);
}

.cp-btn:hover {
  background-color: #d97d15;
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(245, 149, 30, 0.4);
}

/* --- Tablet & Mobile Responsiveness --- */
@media screen and (max-width: 1024px) {
  .cp-card {
    flex-direction: column;
    padding: 4rem 3rem;
    gap: 3rem;
  }
  
  .cp-announcement {
    max-width: 100%;
    text-align: center;
  }
  
  .cp-action-area {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .camp-promo-section {
    padding: 3rem 1.25rem;
  }
  
  .cp-card {
    padding: 3rem 1.5rem;
  }
  
  .cp-title {
    font-size: 2.25rem;
  }
  
  .cp-action-area {
    padding: 2rem 1.5rem;
    border: none;
    background: transparent;
  }
  
  .cp-benefits-list li {
    font-size: 1.05rem;
  }
}
/* Isolated Scope for Crimson Alert Section */
.urgent-crimson-section {
  /* High-visibility deep red gradient */
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  padding: 6rem 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.urgent-crimson-section * {
  box-sizing: inherit;
}

.uc-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 5rem;
}

/* --- Left: Message Area --- */
.uc-message {
  flex: 1;
  color: #ffffff;
}

.uc-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
}

/* Pulsing white dot for the alert badge */
.uc-pulse {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border-radius: 50%;
  animation: pulseAlert 1.5s infinite;
}

@keyframes pulseAlert {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.uc-title {
  font-size: 2.75rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  line-height: 1.15;
  letter-spacing: -1px;
}

.uc-desc {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* --- Right: Symptoms Cards --- */
.uc-symptoms {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.uc-card {
  background: #ffffff;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Slide left slightly on hover to show interactivity */
.uc-card:hover {
  transform: translateX(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.uc-icon {
  width: 54px;
  height: 54px;
  background: #fef2f2;
  color: #dc2626; /* Medical Red */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.uc-icon svg {
  width: 26px;
  height: 26px;
}

.uc-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* --- Tablet & Mobile Responsiveness --- */
@media screen and (max-width: 1024px) {
  .uc-container {
    flex-direction: column;
    gap: 4rem;
  }
  
  .uc-message {
    text-align: center;
    max-width: 700px;
  }
  
  .uc-alert-badge {
    margin-left: auto;
    margin-right: auto;
  }
  
  .uc-symptoms {
    width: 100%;
    max-width: 600px;
  }
}

@media screen and (max-width: 768px) {
  .urgent-crimson-section {
    padding: 4rem 1.25rem;
  }
  
  .uc-title {
    font-size: 2.25rem;
  }
  
  .uc-card {
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }
  
  .uc-text {
    font-size: 1.1rem;
  }
  
  .uc-icon {
    width: 44px;
    height: 44px;
  }
  
  .uc-card:hover {
    transform: none; /* Disable hover slide on mobile */
  }
}
/* Isolated Scope for White Site Footer */
.white-site-footer {
  background-color: #ffffff; /* Pure white background */
  padding: 6rem 2rem 2rem 2rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  /* Thick architectural top border anchors the footer visually */
  border-top: 6px solid #213f9a; 
}

.white-site-footer * {
  box-sizing: inherit;
}

.wsf-container {
  max-width: 900px; /* Narrow width for editorial readability */
  margin: 0 auto;
}

/* =========================================
   Message Area
   ========================================= */
.wsf-message-area {
  text-align: center;
  margin-bottom: 5rem;
}

.wsf-title {
  font-size: 3rem;
  font-weight: 800;
  color: #0f172a; /* Slate dark text for high contrast */
  margin: 0 0 1rem 0;
  letter-spacing: -1px;
  line-height: 1.2;
}

.wsf-accent {
  color: #213f9a; /* Brand Blue */
  position: relative;
  display: inline-block;
}

/* Subtle orange underline for the accent word */
.wsf-accent::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #f5951e; /* Brand Orange */
  z-index: -1;
  opacity: 0.8;
}

.wsf-desc {
  font-size: 1.25rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 3rem 0;
}

/* =========================================
   Hospital Recommendation Card
   ========================================= */
.wsf-hospital-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2rem 3rem;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 10px 30px rgba(33, 63, 154, 0.05); /* Premium soft shadow */
  text-align: left;
  position: relative;
  overflow: hidden;
}

/* Left edge color accent */
.wsf-hospital-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #f5951e; /* Brand Orange */
}

.wsf-card-icon {
  color: #f5951e;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsf-card-icon svg {
  width: 32px;
  height: 32px;
}

.wsf-card-text {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #334155;
}

.wsf-card-text strong {
  color: #0f172a;
  font-weight: 700;
}

/* =========================================
   Legal & Copyright Bar
   ========================================= */
.wsf-legal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0; /* Crisp, clean divider */
}

.wsf-links {
  display: flex;
  align-items: center;
}

.wsf-links a {
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.wsf-links a:hover {
  color: #213f9a; /* Brand Blue on hover */
}

.wsf-separator {
  margin: 0 1rem;
  color: #cbd5e1;
}

.wsf-copyright {
  font-size: 0.95rem;
  color: #64748b;
}

/* =========================================
   Mobile Responsiveness
   ========================================= */
@media screen and (max-width: 768px) {
  .white-site-footer {
    padding: 4rem 1.25rem 2rem 1.25rem;
  }

  .wsf-title {
    font-size: 2.25rem;
  }

  .wsf-desc {
    font-size: 1.15rem;
  }

  .wsf-hospital-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 1rem;
  }
  
  .wsf-hospital-card::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
  }

  .wsf-legal-bar {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
section{
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}
/* Container Positioning */
.wa-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The Main Green Circle */
.wa-main-box {
  width: 60px;
  height: 60px;
  background-color: #25d366; /* WhatsApp Green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Catchy Blinking Ring using your Primary #f5951e */
.wa-blink-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: #f5951e;
  border-radius: 50%;
  animation: wa-ripple 2s infinite;
}

/* Small Badge using #f5951e */
.wa-number-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f5951e;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  font-family: 'Poppins', sans-serif;
}

/* Tooltip using your Secondary #213f9a */
.wa-hover-text {
  position: absolute;
  right: 75px;
  background-color: #213f9a;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Hover States */
.wa-container:hover .wa-hover-text {
  opacity: 1;
  transform: translateX(0);
}

.wa-container:hover .wa-main-box {
  transform: scale(1.1);
  background-color: #128c7e;
}

/* Animations */
@keyframes wa-ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Catchy Icon Wiggle */
.wa-main-box i {
  animation: wa-wiggle 3s infinite ease-in-out;
}

@keyframes wa-wiggle {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(15deg); }
  90% { transform: rotate(-15deg); }
  95% { transform: rotate(15deg); }
}
.rating-dashboard {
  margin-top: 30px;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.295);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.rating-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.rating-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.rating-col:last-child {
  border-right: none;
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.brand-header img {
  height: 25px;
  width: auto;
}

.brand-header span {
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* Big Counter Value */
.counter-val {
  font-size: 2.8rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 5px;
  text-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.star-row {
  color: #FFC107;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.counter-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Footer Section */
.rating-footer {
  display: flex;
  justify-content: center;
}

.expertise-pill {
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 50px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.check-circle {
  background: #00e676;
  color: #00331a;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
}
/* Container and Typography */
.faq-inner-wrapper {
    max-width: 850px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
}

.faq-main-title {
    text-align: center;
    color: #003b73;
    font-size: 2rem;
    margin-bottom: 40px;
}

/* The Card (Hidden by default) */
.faq-card {
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: all 0.25s ease-in-out;
    list-style: none; /* Removes default triangle in some browsers */
}

/* Interaction: Hover */
.faq-card:hover {
    border-color: #007bff;
    background-color: #fcfdfe;
}

/* Interaction: Open State */
.faq-card[open] {
    border-color: #007bff;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

/* The Header (Clickable Area) */
.faq-question-text {
    padding: 20px 24px;
    font-weight: 600;
    font-size: 1.1rem;
    color: #1a2b3c;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    outline: none;
    user-select: none;
}

/* Remove default triangle for Chrome/Safari */
.faq-question-text::-webkit-details-marker {
    display: none;
}

/* Visual Dropdown Indicator (The Chevron) */
.faq-question-text::after {
    content: "";
    width: 12px;
    height: 12px;
    border-right: 2.5px solid #007bff;
    border-bottom: 2.5px solid #007bff;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-left: 15px;
    flex-shrink: 0;
}

/* Chevron flip when open */
.faq-card[open] .faq-question-text::after {
    transform: rotate(-135deg);
    margin-top: 5px;
}

/* The Answer Box */
.faq-answer-content {
    padding: 0 24px 20px 24px;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
    animation: slideDown 0.3s ease-out;
}

/* Styling internal lists for readability */
.faq-list {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.faq-list li {
    padding-left: 28px;
    position: relative;
    margin-bottom: 10px;
}

.faq-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

/* Subtle Entry Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .faq-question-text {
        font-size: 1rem;
        padding: 16px;
    }
    .faq-main-title {
        font-size: 1.6rem;
    }
}