body {
      
  color: #111111;
  font-family: 'Poppins', 'Roboto', Arial, sans-serif;

     
    }
    .navbar {
      background:#FFFFFF;
     
      box-shadow: 0 2px 12px rgba(143, 146, 148, 0.1);
    }
    .navbar-nav .nav-link {
      color: #222222;
  font-weight: 500;
  padding: 10px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  

    }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover {
      color: #E70098 !important;
    }
   
    nav a:hover,
nav a.active {
  border-bottom: 2px solid #D42E70; /* Vibrant pink */
  color: #D42E70;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
}

.brand-title {
  margin-left: 16px;   /* Creates guaranteed space */
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  background: #e70098 ;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dropdown-menu {
  border-radius: 12px;
  box-shadow: 0 6px 24px #e7009850;
  border: none;
  background: #fff;
}
.dropdown-item {
  color: #e70098;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: black;
  background: linear-gradient(90deg,#e70098,#fff 90%);
}








.banner-section {
  margin-top: 0;              /* tweak if navbar is fixed */
}

.banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;          /* keeps banner looking good on wide screens */
}
/* initial state */
.banner-animate {
  opacity: 0;
  transform: translateY(-20px) scale(1.02);
  animation: bannerFadeIn 1.2s ease-out forwards;
  animation-delay: 0.2s;
}

/* keyframes */
@keyframes bannerFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* slight hover zoom on image */
.banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.banner-img:hover {
  transform: scale(1.03);
}












    
     .hero-section {
    display: flex;
    flex-wrap: wrap;
    min-height: 75vh;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 3rem;
    overflow: hidden;
     background: black;
  
    animation: gradient-move 5s ease-in-out infinite;
  }

   .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FFF5FA 0%, #F2FCFF 100%);
  
    pointer-events: none;
    z-index: 1;
  }
    .hero-left {
      flex: 1 1 310px;
      padding: 4rem 2rem;
      max-width: 650px;
    }
    .hero-heading {
      font-size: 2.0rem;
      font-weight: 800;
      color:  #D42E70;
      margin-bottom: 1rem;
      background: linear-gradient(90deg,#ee1fb0 20%,#a7108e 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .hero-text {
      font-size: 1.25rem;
      color: #444;
      margin-bottom: 2rem;
      animation-delay: .3s;
    }
    .hero-cta {
      margin: 1rem 0;
    }
    .btn-animated {
      background: #D42E70;
      color: #fff;
      font-size: 1.13rem;
      font-weight: 700;
      border-radius: 40px;
      box-shadow: 0 4px 24px rgba(120,70,255,0.08);
      transition: background 0.4s, transform 0.2s;
      padding: 0.75rem 2.3rem;
      margin-right: 1rem;
    }
    .btn-animated:hover {
      background: linear-gradient(90deg,#e6d9db 40%,#7460e6 100%);
      transform: scale(1.07);
      box-shadow: 0 8px 36px rgba(120,70,255,0.12);
      color: black;
    }
    .hero-right {
      flex: 1 1 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 280px;
    }
    .doctor-img {
      width: 550px;
      height: 420px;
      border-radius: 30px;
      object-fit: cover;
      box-shadow: 0 10px 40px rgba(90,206,255,0.18);
      animation: zoomIn 1.2s;
    }
    
    @media (max-width: 991px) {
      .hero-section { flex-direction: column; text-align:center; }
      .hero-right { margin-top: 2rem; }
    }
    @media (max-width: 480px) {
  .hero-section {
    padding: 0.7rem 0.2rem;
    min-height: 60vh;
  }
  .hero-left {
    padding: 1.2rem 0.1rem;
    max-width: 100%;
  }
  .hero-card-bg {
    padding: 1.1rem;
    margin-right: 0;
  }
  .hero-heading {
    font-size: 1.35rem;
    margin-bottom: 0.9rem;
  }
  .hero-text {
    font-size: 1rem;
    margin-bottom: 1.3rem;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
  }
  .btn-animated {
    font-size: 1rem;
    width: 80%;
    padding: 0.65rem 0;
  }
  .hero-right {
    margin-top: 1.1rem;
  }
  .doctor-img {
    width: 95vw;
    max-width: 310px;
    height: auto;
    border-radius: 18px;
  }
}

 @keyframes gradient-move {
    0% { background: linear-gradient(120deg, #e9efff 50%, #d1ffd6 100%);}
    50% { background: linear-gradient(120deg, #d1ffd6 40%, #e9efff 100%);}
    100% { background: linear-gradient(120deg, #e9efff 50%, #d1ffd6 100%);}
  }
   @keyframes floatIcon {
    0%, 100% { transform: translateY(0);}
    50% { transform: translateY(18px) scale(1.12);}
  }
   @media (max-width: 480px) {
    .hero-section { padding: 0.7rem 0.2rem; min-height: 60vh; }
    .hero-left { padding: 1.2rem 0.1rem; max-width: 100%; }
    .hero-heading { font-size: 1.10rem; margin-bottom: 0.55rem;}
    .hero-text { font-size: 0.99rem; margin-bottom: 1.1rem;}
    .hero-cta { flex-direction: column; align-items: stretch; gap: 12px;}
    .btn-animated { font-size: 0.92rem; width: 95%; padding: 0.65rem 0;}
    .hero-right { margin-top: 0.8rem;}
    .doctor-img { width: 92vw; max-width: 250px; height: auto; border-radius: 14px;}
  }

  /*service*/
 
/* Services Section Layout */

/* Services Section Layout */
.service-card {
  border-radius: 24px;
  /* softer, more uniform pink background so it shows at all sizes */
  background: radial-gradient(circle at 10% 0%, #ffe6f1 0%, #fff5fa 40%, #ffffff 100%);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* responsive pink blob */
.service-card::before {
  content: "";
  position: absolute;
  width: clamp(80px, 30%, 140px);
  height: clamp(80px, 30%, 140px);
  border-radius: 50%;
  background: rgba(212, 46, 112, 0.1);
  top: -20px;
  right: -20px;
  z-index: 0;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(212, 46, 112, 0.18);
}

.service-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #d42e70, #9e3360);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  color: #fff;
  font-size: 1.7rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(212, 46, 112, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card h5 {
  position: relative;
  z-index: 1;
}

.service-img {
  width: 100%;
  max-width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
}

/* hover icon effect (fixed) */
.service-card:hover .service-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 26px 60px rgba(212, 46, 112, 0.25);
}
@media (max-width: 768px) {
  .service-card {
    border-radius: 20px;
    padding: 16px;
    /* slightly stronger pink so it’s visible on small screens */
    background: radial-gradient(circle at 10% 0%, #ffd3ea 0%, #fff5fa 40%, #ffffff 100%);
  }

  .service-card::before {
    top: -10px;
    right: -10px;
    opacity: 1;
  }

  .service-img {
    height: 200px;
    max-width: 100%;
  }
}

/* Services Section Layout */

/* Testimonial */
/* Slider container */
.testimonial-slider {
  max-width: 1100px;
  margin: 2rem auto 0 auto;
  overflow: hidden;
  padding: 0 1rem;
}

/* Track that moves left/right */
.testimonial-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 1.5rem; 
}

/* Reuse your existing card styles, just tweak width */

.testimonial-card {
  background: linear-gradient(135deg, #fff 82%, #ece6fa 100%);
  border-radius: 38px;
  border: 2.5px solid;
  box-shadow: 0 4px 28px #d3c4fa66, 0 2px 10px #89e3c174;
  padding: 2.1rem 1.7rem 2rem 1.7rem;
  min-width: 33.3333%;        /* 3 cards visible on desktop */
  box-sizing: border-box;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transition: box-shadow 0.26s, border 0.26s, transform 0.23s;
  animation-timing-function: cubic-bezier(.58,1.47,.53,.98);
}

.testimonial-card:nth-child(1) { border-color: #30cfd0; }
.testimonial-card:nth-child(2) { border-color: #8f63f6; }
.testimonial-card:nth-child(3) { border-color: #89e3c1; }

.testimonial-card:hover {
  transform: translateY(-8px) scale(0.87);
  box-shadow: 0 10px 38px #b6aafc33, 0 4px 18px #4ccfd033;
  border-color: rgb(231, 9, 168);
}

.testimonial-quote {
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 0.21rem;
}
.testimonial-card p {
  color: #453587;
  font-size: 1.02rem;
  line-height: 1.6;
  margin-bottom: 1.05rem;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.testimonial-author {
  color: #361b8b;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 1.1px;
  margin-top: 0.2rem;
}

/* Dots */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
   margin-bottom: 3.5rem;
}
.testimonial-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d9c9ff;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.testimonial-dots .dot.active {
  background: #e70098;
  transform: scale(1.2);
}

/* Responsive: 2 cards on tablets */
@media (max-width: 900px) {
  .testimonial-card {
    min-width: 50%;
  }
}

/* Responsive: 1 card on mobile */
@media (max-width: 600px) {
  .testimonial-card {
    min-width: 80%;
  }
}

.testimonial-section {
  padding: 3rem 1.5rem 2rem;
  background: #ffeef9;
}

.testimonial-header {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-kicker {
  font-size: 0.95rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e70098;
  margin-bottom: 0.4rem;
}

.testimonial-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #2c104e;
  margin: 0 0 0.6rem 0;
  
}

/* rating row */

/* mobile */
@media (max-width: 600px) {
  .testimonial-section { padding: 2.2rem 1rem 1.5rem; }
  .testimonial-title { font-size: 1.7rem; }
}


/*contact us */

.contact-section {
  background: linear-gradient(90deg,#fff 65%,#ffe6f6 100%);
 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  width: 100vw;
}

.contact-card {
  background: rgba(255,255,255,0.98);
  border-radius: 44px;
  box-shadow: 0 10px 38px #c3b7fa44;
  max-width: 560px;
  width: 100%;
  padding: 2.4rem 2rem  2.5rem 2rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 60px;
 


  
}

.contact-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #E70098;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap:18px;
  margin-bottom: 0.9rem;
  background: #E70098;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 100px;
  
   
  
}
.contact-icon {
  font-size: 2.6rem;
  margin-right:8px;
  filter: drop-shadow(0 2px 8px #82f5ef55);
}

.contact-desc {
  color: black;
  font-size: 1.13rem;
  margin-bottom: 1.25rem;
  text-align: center;
  opacity: 0.95;
}

.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: -0.1rem;
}

.input-icon {
  font-size: 1.5rem;
  color:  #E70098;;
  filter: drop-shadow(0 0px 2px #7a58e766);
  margin-right: 0.18rem;
}

.contact-input, .colorful-input {
  background: #f6f1ff;
  border-radius: 18px;
  border: 2.3px solid  #E70098;;
  box-shadow: 0 2px 12px #dde1fa33, 0 0 0 #82f5ef00;
  padding: 0.94rem 1.2rem;
  font-size: 1.0rem;
  color: #322b74;
  transition: border-color 0.38s, box-shadow 0.38s;
  outline: none;
  width: 100%;
  margin-bottom: 0.1rem;
  font-family: 'Segoe UI', Arial, sans-serif;
}



.contact-btn {
  background: #D42E70;
  color: #fff;
  font-weight: 900;
  border-radius: 33px 33px 60px 60px/38px 38px 60px 60px;
  font-size: 1.23rem;
  letter-spacing: 0.7px;
  padding: 0.96rem 0;
  border: none;
  margin-top: 0.2rem;
  box-shadow: 0 8px 36px #76f1e933;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
  text-align: center;
 
}
.contact-btn:hover {
   background:  linear-gradient(90deg,#e6d9db 40%,#7460e6 100%);
 color: black;
}

@media (max-width: 700px) {
  .contact-card { max-width:97vw; padding: 1.1rem 0.4rem;}
  .contact-title { font-size:1.20rem; }
}



.footer-section {
  background: linear-gradient(90deg,#fff 65%,#ffe6f6 100%);
  color: black;
  border-radius: 38px 38px 0 0 / 18px 18px 0 0;
  box-shadow: 0 -2px 32px #E7009822;
  padding: 2.5rem 1.5rem 1.1rem 1.5rem;
  margin-top: 3rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 2.2rem;
  max-width: 1100px;
  margin: auto;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-icon {
  width: 38px;
  margin-bottom: 0px;
}
.footer-title {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: black;
  background: #E70098 ;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 10px;
  margin-left: 30px;
}
.footer-social-btn {
  background: #fff;
  border-radius: 50%;
  color: #E70098;
  font-size: 1.28rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #e7009844;
  transition: background 0.33s, color 0.32s, box-shadow 0.23s, transform 0.17s;
  text-decoration: none;
}
.footer-social-btn:hover {
  background: linear-gradient(90deg,#E70098,#fff 100%);
  color: #121212;
  transform: scale(1.13);
  box-shadow: 0 6px 32px #e7009855;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
  margin-left: 10px;
}
.footer-links h3 {
  color: #E70098;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.footer-links a {
  color: black;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.07rem;
  transition: color 0.2s, background 0.2s;
  padding-left: 2px;
  border-radius: 6px;
}
.footer-links a:hover {
  color: #E70098;
  background: #fff;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.footer-contact h3 {
  color: #E70098;
  margin-bottom: 0.5rem;
  font-size: 1.07rem;
  font-weight: 900;
  letter-spacing: 1px;
}
.footer-contact i {
  color: #E70098;
  margin-right: 7px;
}
.footer-contact div { font-size: 0.97rem; font-weight: 600; }
.footer-map {
  margin: 0.8rem 0 0.6rem 0;
  text-align: left;
}
.footer-map iframe {
  box-shadow: 0 4px 16px #e7009844;
  border-radius: 10px;
  border: 2px solid #E70098;
  transition: box-shadow 0.3s, border 0.3s;
}
.footer-map iframe:hover {
  box-shadow: 0 8px 30px #e7009855;
  border-color: #fff;
}

.footer-copy {
  text-align: center;
  margin-top: 1.1rem;
  font-size: 1.04rem;
  color: #E70098;
  opacity: 0.85;
}
/* Responsive */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap:1.4rem;}
}
@media (max-width: 700px) {
  .footer-section {padding: 1.7rem 0.6rem;}
  .footer-grid { grid-template-columns: 1fr; gap:0.8rem;}
  .footer-brand,.footer-links,.footer-contact { align-items:flex-start; text-align: left;}
  .footer-map iframe { max-width: 88vw; width: 100%;}
  .footer-brand-row { justify-content: center;}
}


.footer-rights-link {
  color: #ed2cb3;
  text-decoration: underline;
}

.footer-rights-link:hover {
  text-decoration: none;
}



.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.4fr;
  gap: 2rem;
  align-items: flex-start;
}


.footer-brand {
  max-width: 320px;
}

.footer-social {
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}

.footer-about-text {
  font-size: 1.0rem;
  line-height: 1.6;
  color: black;
  margin: 0;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  
  }
  .footer-brand,
  .footer-links,
  .footer-contact {
    max-width: 100%;
  }
}








.about-hero {
  border-radius: 0 0 36px 36px;
  background: radial-gradient(circle at top left, #ffe6f6 0, #fff6fb 38%, #ffeef9 100%);
}

.about-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.86rem;
  color: #e70098;
  margin-bottom: 0.4rem;
}

.about-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #2a0c4b;
  margin-bottom: 0.7rem;
}

.about-intro {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto 0;
}

.about-doctor-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.2rem 1.1rem 1.4rem;
  box-shadow: 0 8px 28px rgba(231, 0, 152, 0.09);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-doctor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 38px rgba(231, 0, 152, 0.18);
}

.about-doctor-photo {
  width: 200px;
  height: 200px;

  object-fit: cover;
  margin-bottom: 0.7rem;
  border: solid 1px pink;
}

.about-doctor-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #2b1359;
  margin-bottom: 0.1rem;
}

.about-doctor-qual {
  font-size: 0.9rem;
  font-weight: 600;
  color: #e70098;
  margin-bottom: 0.5rem;
}

.about-doctor-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  text-align: left;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .about-hero {
    border-radius: 0 0 22px 22px;
  }
  .about-title {
    font-size: 1.6rem;
  }
}


.about-btn {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #d42e70, #ff4fa8);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.about-doctor-card:hover .about-btn {
  box-shadow: 0 6px 16px rgba(212, 46, 112, 0.45);
  transform: translateY(-1px);
}