/* ============================= */
/* ✅ GLOBAL DESIGN SYSTEM       */
/* ============================= */

:root {

    /* ✅ Primary Blue (60%) */
    --blue: #0d6efd;
    --blue-dark: #083c9f;
  
    /* ✅ Teal Accent (30%) */
    --teal: #20c997;

  
    /* ✅ Pink Highlight (10%) */
    --pink: #ff4d88;
  
    /* ✅ Neutral Colors */
    --white: #ffffff;
    --light-bg: #f8fbff;
    --text-dark: #1e1e1e;
    --text-gray: #555;
  }
  
  /* ✅ Body Default */
  body {
    font-family: "Inter", sans-serif;
    background: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
  }
  
  /* ✅ Headings */
  h1, h2, h3, h4, h5 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
  }
  
  /* ✅ Section Padding */
  section {
    padding: 80px 0;
  }
  
  /* ✅ Smooth Scroll */
  html {
    scroll-behavior: smooth;
  }

  
/* ============================= */
/*  BUTTONS                    */
/* ============================= */

.btn-main {
  background: var(--blue);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s ease;
  }
  
.btn-main:hover {
  background: #20c997;
  transform: translateY(-2px);
  color: white;
  }
  
.btn.btn-accent {
  background: var(--pink);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  }
  
.btn.btn-main_h{
  background: var(--pink);
  color: white;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;

  
}




.btn-accent:hover {
  opacity: 0.85;
  }

/* ============================= */
/* ✅ NAVBAR */
/* ============================= */

.hospital-navbar {
  background: white;
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

/* ✅ LOGO IMAGE FIX */
.nav-logo {
  height: 60px;     /* ✅ perfect size */
  width: auto;
  object-fit: contain;
}

/* ✅ Nav Links */
.hospital-nav-links .nav-link {
  font-weight: 500;
  color: black !important;
  margin: 0 14px;
  position: relative;
  padding-bottom: 6px;
}

/* ✅ Underline Hover */
.hospital-nav-links .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: blue;
  transition: 0.3s ease;
}

/* ✅ Hover underline */
.hospital-nav-links .nav-link:hover::after {
  width: 100%;
}

/* ✅ Active underline */
.hospital-nav-links .nav-link.active::after {
  width: 100%;
}

/* ✅ Appointment Button */
.btn.btn-appointment {
  background: #ff4d88;
  color: white;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600;
}
.btn.btn-main{
  background-color: #ff4d88;
  color: #ffffff;
  padding: 5px 10px;
}

/* ✅ MOBILE RESPONSIVE FIX */
@media (max-width: 991px) {

  .navbar-collapse {
    background: white;
    padding: 20px;
    margin-top: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    text-align: center;
  }

  .hospital-nav-links .nav-link {
    margin: 12px 0;
    display: inline-block;
  }

  .btn-appointment {
    width: 100%;
    margin-top: 15px;
  }
}



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

.hero-section {
    height: 900px;
    display: flex;
    align-items: center;
    background: url("/static/images/hero-bg.webp") no-repeat center center/cover;
    position: relative;
    color: white;
  }
  
  /*  Dark Overlay */
  .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 40, 90, 0.65);
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
  }
  
  /* Hero Title */
  .hero-title {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  /* Subtitle */
  .hero-subtitle {
    font-size: 22px;
    font-weight: 500;
    color: var(--teal);
    margin-bottom: 20px;
  }
  
  /* Text */
  .hero-text {
    font-size: 17px;
    color: #f1f1f1;
    max-width: 600px;
  }
  
  /* Call Box */
  .hero-call-box {
    background: rgba(255, 255, 255, 0.12);
    padding: 18px;
    border-radius: 12px;
    margin-top: 25px;
  }
  
  .hero-phone {
    color: #20c997;
    font-weight: 700;
  }
  
  .hero-emergency {
    color: #ffffff;
    font-size: 15px;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
  
    .hero-title {
      font-size: 38px;
    }
  
    .hero-section {
      text-align: center;
      padding: 60px 20px;
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  
    .hero-buttons a {
      display: block;
      margin: 10px;
      padding: auto;
      margin-left: 16px;
    }
  }

  
  

/* ============================= */
/* ✅ INTRO SECTION (WELCOME)    */
/* ============================= */

.intro-section {
    background: var(--white);
  }
  
  /* Section Title */
  .section-title {
    font-size: 36px;
    color: var(--blue-dark);
    margin-bottom: 18px;
  }
  
  /* Paragraph */
  .section-text {
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: 15px;
    max-width: 520px;
  }
  
  /* Highlight Box */
  .intro-highlight {
    background: rgba(32, 201, 151, 0.15);
    padding: 14px 18px;
    border-left: 5px solid var(--teal);
    border-radius: 10px;
    font-weight: 600;
    margin-top: 20px;
    color: var(--blue-dark);
  }
  
  /* Cards */
  .intro-card {
    background: #f8fbff;
    padding: 30px;
    text-align: center;
    border-radius: 18px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
  }
  
  .intro-card h3 {
    font-size: 34px;
    font-weight: 700;
    color: var(--blue);
  }
  
  .intro-card p {
    margin: 0;
    font-weight: 500;
    color: var(--text-dark);
  }
  
  /* Hover Effect */
  .intro-card:hover {
    transform: translateY(-8px);
  }
  
  /* Accent Cards */
  .teal-card h3 {
    color: var(--teal);
  }
  
  .pink-card h3 {
    color: var(--pink);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
  
    .section-title {
      font-size: 28px;
      text-align: center;
    }
  
    .section-text {
      text-align: center;
      margin: auto;
    }
  
    .intro-highlight {
      text-align: center;
    }

    
  }

  

/* ============================= */
/* ✅ SECTION 3: KEY HIGHLIGHTS  */
/* ============================= */

.highlights-section {
    background: var(--light-bg);
  }
  
  /* Highlight Card */
  .highlight-card {
    background: white;
    padding: 18px 20px;
    border-radius: 14px;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06);
  
    border-left: 5px solid var(--blue);
  
    transition: all 0.35s ease;
  }
  
  /* Accent Borders */
  .teal-border {
    border-left: 5px solid var(--teal);
  }
  
  .pink-border {
    border-left: 5px solid var(--pink);
  }
  
  /* Full Width Card */
  .full-width {
    text-align: center;
    font-size: 17px;
    padding: 22px;
    background: rgba(13, 110, 253, 0.07);
  }
  
  /* ✅ Correct Hover Effect */
  .highlight-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.10);
  }

/* FOR FADE */
  .fade-section {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s ease;
  }
  
  .fade-section.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  
  /* Responsive */
  @media (max-width: 768px) {
    .highlight-card {
      text-align: center;}

    .btn-main{
      margin-bottom: 16px;
    }
    

  }
  


/* ============================= */
/* ✅ SECTION 4: SPECIALITIES    */
/* ============================= */

.specialities-section {
    background: white;
    position: relative;
    overflow: hidden;
  }
  
  /* Decorative Floating Shapes */
  .special-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
  }
  
  .shape1 {
    width: 250px;
    height: 250px;
    background: var(--teal);
    top: -80px;
    left: -80px;
  }
  
  .shape2 {
    width: 300px;
    height: 300px;
    background: var(--pink);
    bottom: -100px;
    right: -100px;
  }
  
  /* Speciality Card */
  .speciality-card {
    background: #f8fbff;
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.06);
  
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
  }
  
  /* Icon Styling */
  .speciality-icon {
    font-size: 42px;
    margin-bottom: 18px;
    color: var(--blue);
    transition: 0.3s ease;
  }
  
  /* Hover Icon Color Change */
  .speciality-card:hover .speciality-icon {
    color: var(--teal);
    transform: scale(1.15);
  }
  
  
  /* Title */
  .speciality-card h5 {
    font-weight: 600;
    color: var(--blue-dark);
    font-size: 18px;
  }
  
  /* Hover Effect */
  .speciality-card:hover {
    transform: translateY(-10px);
    background: white;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.12);
  }
  
 
  
  /* Responsive */
  @media (max-width: 768px) {
    .speciality-card {
      padding: 25px 18px;
    }
  }
  


/* ============================= */
/*  SECTION 5: RADIOLOGY       */
/* ============================= */

.radiology-section {
    background: linear-gradient(
      to right,
      rgba(13, 110, 253, 0.07),
      rgba(32, 201, 151, 0.08)
    );
    border-radius: 0;
  }
  
  /* Tag Line */
  .radiology-tag {
    font-weight: 700;
    color: var(--pink);
    letter-spacing: 1px;
    font-size: 14px;
    text-transform: uppercase;
  }
  
  /* Extra Note */
  .radiology-note {
    font-weight: 600;
    color: var(--blue-dark);
    margin-top: 15px;
  }
  
  /* Radiology Grid */
  .radiology-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  
  /* Card Style */
  .radio-card {
    background: white;
    padding: 25px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.08);
    transition: all 0.35s ease;
  }
  
  /* Icon */
  .radio-card i {
    font-size: 38px;
    margin-bottom: 12px;
    color: var(--blue);
    transition: 0.3s ease;
  }
  
  /* Title */
  .radio-card h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue-dark);
  }
  
  /* Hover Effect */
  .radio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.12);
  }
  
  .radio-card:hover i {
    color: var(--teal);
    transform: scale(1.15);
  }
  
  /* Accent Cards */
  .teal-card {
    border-top: 4px solid var(--teal);
  }
  
  .pink-card {
    border-top: 4px solid var(--pink);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .radiology-grid {
      grid-template-columns: 1fr;
    }
  }
  

/* ============================= */
/*  SECTION 6: FACILITIES      */
/* ============================= */

.facilities-section {
    background: var(--white);
  }
  
  /* Facility Box */
  .facility-box {
    background: #f8fbff;
    padding: 20px 22px;
    border-radius: 16px;
    font-weight: 600;
    color: var(--blue-dark);
  
    border-left: 6px solid var(--blue);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
  
    transition: all 0.35s ease;
  }
  
  /* Accent Lines */
  .teal-line {
    border-left: 6px solid var(--teal);
  }
  
  .pink-line {
    border-left: 6px solid var(--pink);
  }
  
  /* Full Facility Wide Box */
  .full-facility {
    text-align: center;
    background: rgba(32, 201, 151, 0.12);
    font-size: 17px;
    padding: 25px;
  }
  
  /* Hover Effect */
  .facility-box:hover {
    transform: translateY(-8px);
    background: white;
    box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.10);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .facility-box {
      text-align: center;
    }
  }
  

/* ============================= */
/*  SECTION 7: FINAL CTA       */
/* ============================= */

.final-cta-section {
    background: linear-gradient(
      to right,
      var(--blue-dark),
      var(--teal)
    );
    padding: 90px 0;
    text-align: center;
    color: white;
  }
  
  /* CTA Box */
  .cta-box {
    max-width: 850px;
    margin: auto;
  }
  
  /* Title */
  .cta-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  /* Text */
  .cta-text {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    margin-bottom: 25px;
  }
  
  /* Contact Line */
  .cta-contact {
    font-size: 16px;
    font-weight: 600;
  }
  
  /* Phone Highlight */
  .cta-phone {
    display: inline-block;
    margin-left: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    background: rgba(255, 77, 136, 0.95);
    font-weight: 700;
  }
  
  /* Buttons */
  .cta-buttons a {
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
  
    .cta-title {
      font-size: 34px;
    }
  
    .btn.btn-accent {
      display: block;
      width: 70%;
      margin: 16px auto;
      padding-left: 20px;
    }

    .btn.btn-outline-light {
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 600;

    }
    .btn.btn-outline-light1{
      
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 600;
    }
  
    .cta-phone {
      display: block;
      margin: 12px 32px;
      align-items: center;
    }
    /* .btn-outline{
      margin-right: 16px;
      padding: 12px 20px;
      border-radius: 50px;
      font-weight: 600;
  
    } */
  }


/* ============================= */
/* ✅ ABOUT PAGE HEADER SECTION  */
/* ============================= */

.page-header-section {
    height: 55vh;
    display: flex;
    align-items: center;
    background: url("/static/images/about-bg.jpg") no-repeat center center/cover;
    position: relative;
    color: white;
    text-align: center;
  }
  
  /* Dark Overlay */
  .page-header-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 40, 90, 0.7);
  }
  
  .page-header-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
  }
  
  /* Title */
  .page-title {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  /* Subtitle */
  .page-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .page-title {
      font-size: 34px;
    }
  
    .page-header-section {
      height: auto;
      padding: 80px 20px;
    }
  }
  



/* ============================= */
/* ✅ ABOUT SECTION 2: INTRO     */
/* ============================= */

.about-intro-section {
    background: var(--white);
  }
  
  /* Trust Box */
  .about-trust-box {
    background: linear-gradient(
      to bottom,
      rgba(13, 110, 253, 0.08),
      rgba(32, 201, 151, 0.10)
    );
  
    padding: 35px;
    border-radius: 22px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
    text-align: left;
  }
  
  /* Box Heading */
  .about-trust-box h3 {
    font-size: 34px;
    font-weight: 700;
    color: var(--blue-dark);
    margin-bottom: 12px;
  }
  
  /* Box Text */
  .about-trust-box p {
    color: var(--text-gray);
    font-size: 15px;
    line-height: 1.7;
  }
  
  /* Trust Items */
  .trust-details {
    margin-top: 20px;
  }
  
  .trust-item {
    background: white;
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 14px;
    font-weight: 600;
    color: var(--blue-dark);
  
    border-left: 5px solid var(--teal);
    transition: 0.3s ease;
  }
  
  /* Hover Effect */
  .trust-item:hover {
    transform: translateX(8px);
    border-left: 5px solid var(--pink);
  }
  

/* ============================= */
/* ✅ ABOUT SECTION 3: COMMITMENT */
/* ============================= */

.commitment-section {
    background: var(--light-bg);
  }
  
  /* Commitment Card */
  .commitment-card {
    background: white;
    padding: 30px 22px;
    border-radius: 20px;
    text-align: center;
  
    box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.07);
    transition: all 0.4s ease;
  }
  
  /* Heading */
  .commitment-card h5 {
    font-weight: 700;
    font-size: 18px;
    color: var(--blue-dark);
    margin-bottom: 12px;
  }
  
  /* Text */
  .commitment-card p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
  }
  
  /* Hover Effect */
  .commitment-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.12);
  }
  
  /* Accent Variants */
  .commitment-card.teal-card {
    border-top: 4px solid var(--teal);
  }
  
  .commitment-card.pink-card {
    border-top: 4px solid var(--pink);
  }
  
  .commitment-card:hover.teal-card {
    background: rgba(32, 201, 151, 0.06);
  }
  
  .commitment-card:hover.pink-card {
    background: rgba(255, 77, 136, 0.06);
  }

  
/* ============================= */
/* ✅ ABOUT SECTION: MISSION & VISION */
/* ============================= */

.mission-vision-section {
    background: white;
    position: relative;
    overflow: hidden;
  }
  
  /* Decorative Background Glow */
  .mission-vision-section::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(32, 201, 151, 0.18);
    border-radius: 50%;
    top: -120px;
    left: -120px;
  }
  
  .mission-vision-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(255, 77, 136, 0.15);
    border-radius: 50%;
    bottom: -120px;
    right: -120px;
  }
  
  /* Mission Vision Card */
  .mv-card {
    background: #f8fbff;
    padding: 45px 35px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0px 12px 28px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
  }
  
  /* Title */
  .mv-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--blue-dark);
  }
  
  /* Text */
  .mv-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-gray);
  }
  
  /* Hover Effect */
  .mv-card:hover {
    transform: translateY(-12px);
    box-shadow: 0px 18px 40px rgba(0, 0, 0, 0.13);
  }
  
  /* Accent Borders */
  .mission-card {
    border-top: 5px solid var(--teal);
  }
  
  .vision-card {
    border-top: 5px solid var(--pink);
  }
  
  /* Hover Background Tint */
  .mission-card:hover {
    background: rgba(32, 201, 151, 0.06);
  }
  
  .vision-card:hover {
    background: rgba(255, 77, 136, 0.06);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .mv-card {
      padding: 35px 25px;
    }
  }
  

/* ============================= */
/* ✅ ABOUT SECTION 6: WHY CHOOSE */
/* ============================= */

.choose-section {
    background: var(--light-bg);
  }
  
  /* Grid Layout */
  .choose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  
  /* Checklist Point Box */
  .choose-point {
    background: white;
    padding: 18px 20px;
    border-radius: 18px;
    font-weight: 600;
    color: var(--blue-dark);
  
    border-left: 6px solid var(--blue);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.07);
  
    transition: all 0.35s ease;
  }
  
  /* Accent Borders */
  .teal-border {
    border-left: 6px solid var(--teal);
  }
  
  .pink-border {
    border-left: 6px solid var(--pink);
  }
  
  /* Hover Effect */
  .choose-point:hover {
    transform: translateY(-8px);
    box-shadow: 0px 14px 32px rgba(0, 0, 0, 0.12);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .choose-grid {
      grid-template-columns: 1fr;
    }
  
    .choose-point {
      text-align: center;
    }
  }

  
  /* ============================= */
/* ✅ ABOUT SECTION 8: CLOSING CTA */
/* ============================= */

.about-closing-section {
    background: linear-gradient(
      to right,
      var(--blue-dark),
      var(--teal)
    );
    padding: 90px 0;
    text-align: center;
    color: white;
  }
  
  /* Box */
  .about-closing-box {
    max-width: 850px;
    margin: auto;
  }
  
  /* Title */
  .closing-title {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  /* Text */
  .closing-text {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 20px;
  }
  
  /* Highlight Line */
  .closing-highlight {
    display: inline-block;
    background: rgba(255, 77, 136, 0.95);
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 25px;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
  
    .closing-title {
      font-size: 32px;
    }
  
    .closing-highlight {
      display: block;
      width: fit-content;
      margin: 15px auto;
    }
  
  }

  
/* ============================= */
/*  SERVICES PAGE hero section       */
/* ============================= */

.services-header {
    background: url("/static/images/services-bg.jpg") no-repeat center center/cover;
  }

  
  /* ============================= */
/* ✅ SERVICES SECTION 2: INTRO  */
/* ============================= */

.services-intro-section {
    background: var(--white);
  }
  
  /* Trust Box */
  .service-trust-box {
    background: linear-gradient(
      to bottom,
      rgba(13, 110, 253, 0.08),
      rgba(32, 201, 151, 0.10)
    );
  
    padding: 35px;
    border-radius: 22px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
  }
  
  /* Box Title */
  .service-trust-box h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue-dark);
    margin-bottom: 12px;
  }
  
  /* Box Text */
  .service-trust-box p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.7;
  }
  
  /* Points */
  .service-points {
    margin-top: 20px;
  }
  
  .service-point {
    background: white;
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 14px;
    font-weight: 600;
    color: var(--blue-dark);
  
    border-left: 5px solid var(--blue);
    transition: 0.3s ease;
  }
  
  /* Accent Borders */
  .service-point.teal-border {
    border-left: 5px solid var(--teal);
  }
  
  .service-point.pink-border {
    border-left: 5px solid var(--pink);
  }
  
  /* Hover */
  .service-point:hover {
    transform: translateX(8px);
  }
  



  /* ============================= */
/* ✅ SERVICES SECTION 3: SINGLE SERVICE */
/* ============================= */

.single-service-section {
    background: var(--light-bg);
  }
  
  /* Small Tag */
  .service-tag {
    font-size: 14px;
    font-weight: 700;
    color: var(--pink);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  /* Checklist Grid */
  .service-list-grid {
    display: grid;
    gap: 16px;
  }
  
  /* Service Item Box */
  .service-item {
    background: white;
    padding: 18px 20px;
    border-radius: 18px;
    font-weight: 600;
    color: var(--blue-dark);
  
    border-left: 6px solid var(--blue);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
  
    transition: all 0.35s ease;
  }
  
  /* Accent Lines */
  .teal-line {
    border-left: 6px solid var(--teal);
  }
  
  .pink-line {
    border-left: 6px solid var(--pink);
  }
  
  /* Hover Effect */
  .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.10);
  }

  
  /* ============================= */
/* ✅ SERVICES SECTION 4: EMERGENCY */
/* ============================= */

.emergency-section {
    background: linear-gradient(
      to right,
      rgba(8, 60, 159, 0.95),
      rgba(255, 77, 136, 0.80)
    );
    padding: 90px 0;
    color: white;
    position: relative;
    overflow: hidden;
  }
  
  /* Tag */
  .emergency-tag {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
  }
  
  /* Title */
  .emergency-title {
    font-size: 42px;
    font-weight: 700;
    margin: 15px 0;
  }
  
  /* Text */
  .emergency-text {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
  }
  
  /* Emergency Button */
  .emergency-btn {
    background: white;
    color: var(--blue-dark);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    transition: 0.3s ease;
  }
  
  .emergency-btn:hover {
    background: var(--pink);
    color: white;
  }
  
  /* Emergency Points */
  .emergency-points {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  /* Point Box */
  .emergency-point {
    background: rgba(255, 255, 255, 0.15);
    padding: 18px 20px;
    border-radius: 18px;
    font-weight: 600;
    font-size: 16px;
    backdrop-filter: blur(8px);
    transition: 0.35s ease;
  }
  
  /* Hover Effect */
  .emergency-point:hover {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.25);
  }
  
  /* Responsive */
  @media (max-width: 768px) {
  
    .emergency-title {
      font-size: 32px;
    }
  
    .emergency-section {
      text-align: center;
    }
  
    .emergency-point:hover {
      transform: none;
    }
  }

  
/* ============================= */
/* ✅ SERVICES SECTION 5: LAB    */
/* ============================= */

.lab-section {
    background: var(--white);
  }
  
  /* Lab Card */
  .lab-card {
    background: #f8fbff;
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
  }
  
  /* Icon */
  .lab-card i {
    font-size: 42px;
    margin-bottom: 18px;
    color: var(--blue);
    transition: 0.3s ease;
  }
  
  /* Title */
  .lab-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-dark);
  }
  
  /* Hover Effect */
  .lab-card:hover {
    transform: translateY(-10px);
    background: white;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.12);
  }
  
  .lab-card:hover i {
    color: var(--teal);
    transform: scale(1.2);
  }
  
  /* Accent Variants */
  .lab-card.teal-card {
    border-top: 4px solid var(--teal);
  }
  
  .lab-card.pink-card {
    border-top: 4px solid var(--pink);
  }
  
  /* Note */
  .lab-note {
    font-size: 16px;
    font-weight: 600;
    color: var(--blue-dark);
    background: rgba(32, 201, 151, 0.12);
    display: inline-block;
    padding: 12px 22px;
    border-radius: 30px;
  }

  
/* ============================= */
/* ✅ SERVICES PAGE FINAL CTA     */
/* ============================= */

.services-closing-section {
    background: linear-gradient(
      to right,
      var(--blue-dark),
      var(--teal)
    );
    padding: 90px 0;
    text-align: center;
    color: white;
  }
  
  .services-closing-box {
    max-width: 850px;
    margin: auto;
  }

  

/* ============================= */
/* ✅ CONTACT PAGE          */
/* ============================= */

.contact-header {
    background: url("/static/images/contact-bg.jpg") no-repeat center center/cover;
  }
  
/* ============================= */
/* ✅ CONTACT page            */
/* ============================= */
  
/* ✅ Form Label Alignment */
.contact-form-box label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--blue-dark);
}

/* ✅ Full Width Inputs */
.contact-form-box input,
.contact-form-box textarea {
  width: 100% !important;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 15px;
}

/* ✅ Fix Textarea Resize */
.contact-form-box textarea {
  resize: none;
}

/* ✅ Input Focus */
.contact-form-box input:focus,
.contact-form-box textarea:focus {
  border-color: gray;
  outline: none;
  box-shadow: 0px 0px 0px 3px rgba(138, 138, 138, 0.2);
}

/* ✅ Submit Button Full Width */
.contact-form-box button {
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  font-weight: 700;
}

.contact-item i {
  font-size: 1.2rem;
  color: #09003a;
  margin-top: 6px;
}

  
  /* Responsive */
  @media (max-width: 768px) {
  
    .contact-form-box {
      padding: 25px;
    }
  
    .contact-info-box {
      text-align: center;
    }
  }
  
  

/* ============================= */
/* book APPOINTMENT PAGE HEADER     */
/* ============================= */

.appointment-header {
    background: url("/static/images/appointment-bg.jpg") no-repeat center center/cover;
  }
  
  /* ============================= */
  /* ✅ APPOINTMENT SECTION         */
  /* ============================= */
  
/* ✅ Form Label Alignment */
.appointment-form-box label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--blue-dark);
}

/* ✅ Full Width Inputs */
.appointment-form-box input,
.appointment-form-box textarea {
 width: 100% !important;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 15px;
}


/* ✅ Fix Textarea Resize */
.appointment-form-box textarea {
  resize: none;
}

/* ✅ Input Focus */
.appointment-form-box input:focus,
.appointment-form-box textarea:focus {
 border-color: gray;
  outline: none;
  box-shadow: 0px 0px 0px 3px rgba(138, 138, 138, 0.2);
}

/* ✅ Submit Button Full Width */
.appointment-form-box button {
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  font-weight: 700;
}

   /* Responsive */
@media (max-width: 768px) {
  
    .appointment-form-box {
      padding: 25px;
    }
  
    .appointment-info-box {
      text-align: center;
    }
  }
  

  
/* ============================= */
/*    GALLERY SECTION     */
/* ============================= */

.compact-gallery-section {
    background: var(--white);
  }
  
  /* Gallery Box */
  .gallery-box {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.10);
    transition: 0.35s ease;
  }
  
  /* Image Styling */
  .gallery-img {
    width: 100%;
    height: 350px;   /* ✅ Reduced Size */
    object-fit: cover;
    cursor: pointer;
    transition: 0.35s ease;
  }
  
  /* Hover Zoom + Lift */
  .gallery-box:hover {
    transform: translateY(-8px);
  }
  
  .gallery-box:hover .gallery-img {
    transform: scale(1.08);
  }


/* ============================= */
/* ✅ GALLERY MEMORY SECTION      */
/* ============================= */

.gallery-memory-section {
    background: var(--light-bg);
  }
  
  /* Highlight Boxes */
  .memory-highlights {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .memory-box {
    background: white;
    padding: 20px 22px;
    border-radius: 18px;
    font-weight: 700;
    color: var(--blue-dark);
    border-left: 6px solid var(--blue);
  
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.07);
    transition: 0.35s ease;
  }
  
  /* Accent Borders */
  .memory-box.teal-line {
    border-left: 6px solid var(--teal);
  }
  
  .memory-box.pink-line {
    border-left: 6px solid var(--pink);
  }
  
  /* Hover Effect */
  .memory-box:hover {
    transform: translateX(10px);
  }
  
/*GALLERY PAGE CTA SECTION */
.gallery-cta-section {
    background: linear-gradient(
      to right,
      var(--blue-dark),
      var(--teal)
    );
    padding: 90px 0;
    text-align: center;
    color: white;
  }
  
  .gallery-cta-box {
    max-width: 850px;
    margin: auto;
  }
  
  
  /* Responsive */
  @media (max-width: 768px) {
    .gallery-img {
      height: 200px;
    }
  }
  


/* ============================= */
/* ✅ PREMIUM FOOTER SECTION     */
/* ============================= */

.hospital-footer {
  background:white;
  color: rgb(26, 144, 186);
  padding: 80px 0 25px;
  position: relative;
  overflow: hidden;
}

/* ✅ Soft Background Glow */
.hospital-footer::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background: rgba(255, 77, 136, 0.18);
  border-radius: 50%;
  top: -120px;
  right: -120px;
}

.hospital-footer::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  background: rgba(32, 201, 151, 0.18);
  border-radius: 50%;
  bottom: -120px;
  left: -120px;
}

/* Ensure Footer Content Above Glow */
.footer-top,
.footer-bottom {
  position: relative;
  z-index: 2;
}

/* ✅ Footer Headings */
.footer-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
}

/* Underline Accent */
.footer-title::after {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--pink);
  display: block;
  margin-top: 8px;
  border-radius: 10px;
}

/* ✅ Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
  transition: 0.3s;
  padding-left: 0;
}

/* Hover Effect */
.footer-links a:hover {
  color: var(--pink);
  padding-left: 6px;
}

/* ✅ Contact Text */
.footer-contact {
  font-size: 14px;
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.88);
}

/* ✅ CTA Box */
.footer-cta-box {
  background: rgba(255, 255, 255, 0.12);
  padding: 25px;
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

.footer-cta-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-cta-box p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.9);
}

/* ✅ Footer Button */
.footer-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 22px;
  border-radius: 50px;
  background: var(--pink);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.footer-btn:hover {
  background: white;
  color: #062a66;
}

/* ✅ FOOTER BOTTOM BAR          */
.footer-bottom {
  margin-top: 55px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 18px;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

/* Bottom Links */
.footer-bottom-left a {
  text-decoration: none;
  color: rgba(1, 1, 1, 0.9);
  font-weight: 500;
  transition: 0.3s;
}

.footer-bottom-left a:hover {
  color: var(--pink);
}

.footer-bottom-left span {
  margin: 0 8px;
  opacity: 0.7;
}

/* Center */
.footer-bottom-center {
  text-align: center;
  flex: 1;
}

/* Right */
.footer-bottom-right {
  font-weight: 600;
}

.yuvaasoft-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none !important;
  transition: 0.3s ease;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .footer-bottom-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-center {
    flex: unset;
  }
}


/* ===============================
   Terms & Conditions Page Styles
   =============================== */

.terms-wrapper {
  background: var(--light-bg);
  padding: 60px 20px;
}

.terms-container {
  max-width: 900px;
  margin: auto;
  background: var(--white);
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 110, 253, 0.1);
}

/* Headings */
.terms-container h1 {
  color: var(--blue);
  font-size: 2.4rem;
  margin-bottom: 20px;
  text-align: center;
}

.terms-container h2 {
  color: var(--blue-dark);
  font-size: 1.4rem;
  margin-bottom: 10px;
}

/* Intro */
.terms-container .intro {
  text-align: center;
  color: var(--text-gray);
  margin-bottom: 40px;
}

/* Sections */
.terms-section {
  margin-bottom: 30px;
}

.terms-section p {
  color: var(--text-gray);
  margin-bottom: 10px;
}

/* Lists */
.terms-section ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

.terms-section ul li {
  margin-bottom: 6px;
  color: var(--text-gray);
}

/* Contact Box */
.contact-box {
  background: rgba(32, 201, 151, 0.08);
  border-left: 5px solid var(--teal);
  padding: 20px;
  border-radius: 8px;
}

.contact-box p {
  margin: 5px 0;
  color: var(--text-dark);
}

/* Responsive */
@media (max-width: 768px) {
  .terms-container {
    padding: 30px 20px;
  }

  .terms-container h1 {
    font-size: 2rem;
  }
}


/* ===============================
   Privacy Policy Page Styles
   =============================== */

.privacy-wrapper {
  background: var(--light-bg);
  padding: 60px 20px;
}

.privacy-container {
  max-width: 900px;
  margin: auto;
  background: var(--white);
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 110, 253, 0.1);
}

/* Headings */
.privacy-container h1 {
  color: var(--blue);
  font-size: 2.4rem;
  margin-bottom: 20px;
  text-align: center;
}

.privacy-container h2 {
  color: var(--blue-dark);
  font-size: 1.4rem;
  margin-bottom: 10px;
}

/* Intro */
.privacy-container .intro {
  text-align: center;
  color: var(--text-gray);
  margin-bottom: 40px;
}

/* Sections */
.privacy-section {
  margin-bottom: 30px;
}

.privacy-section p {
  color: var(--text-gray);
  margin-bottom: 10px;
}

/* Lists */
.privacy-section ul {
  padding-left: 20px;
  margin-bottom: 10px;
}

.privacy-section ul li {
  margin-bottom: 6px;
  color: var(--text-gray);
}

/* Contact Box */
.contact-box {
  background: rgba(32, 201, 151, 0.08);
  border-left: 5px solid var(--teal);
  padding: 20px;
  border-radius: 8px;
}

.contact-box p {
  margin: 5px 0;
  color: var(--text-dark);
}

/* Responsive */
@media (max-width: 768px) {
  .privacy-container {
    padding: 30px 20px;
  }

  .privacy-container h1 {
    font-size: 2rem;
  }
}