.main-color{
	background-color: #98254a;
}

#departments .btn-read-more.font-13 {
    color: #98254a;
}


.blog_full img {
    height: 190px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 10px;
}
.review_full {
    padding: 15px;
    background-color: #f4f4f4;
	height: 210px;
}

li.dropdown:hover ul.dropdown {
    display: block;
}


.slider_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.slider_content .row {
    justify-content: flex-end;
    display: flex;
}


.slider_text_1 {
    background: #98254a;
    padding: 30px 30px;
}

.slider_text_1 h3 {
    color: #fff;
    font-size: 28px;
    line-height: 38px;
    font-weight: 500;
    margin-bottom: 20px;
}

.slider_content .container-fluid {
    width: 100%;
    padding-left: 70px;
    padding-right: 70px;
}

.slider_text_1 p {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
}
.gallery-img img {
    margin-bottom: 16px;
}
.main-tcolor{
	color: #a12f54;
}
.media-body.foot-mod p {
    color: #fff;
}

.media-body.foot-mod p strong {
    color: #fff;
}

.news-se .blog_full{
	margin-bottom: 16px;
}

/* ================================================
   Global Styles
   ================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Primary Colors from Logo */
    --primary-magenta: #b91d73;
    --primary-pink: #d41f7d;
    --light-pink: #fce4f0;
    --cream: #fef8fb;
    
    /* Supporting Colors */
    --text-dark: #2d1b2e;
    --text-gray: #5a5a5a;
    --white: #ffffff;
    --shadow: rgba(185, 29, 115, 0.15);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--cream);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   About Doctor Section
   ================================================ */

.about-doctor {
    padding: 40px 0;
    background: linear-gradient(180deg, var(--cream) 0%, var(--light-pink) 100%);
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.subtitle {
    display: inline-block;
    color: var(--primary-magenta);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-header h1 {
    font-size: 48px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 20px;
}

.header-underline {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-magenta), var(--primary-pink));
    margin: 0 auto;
    border-radius: 2px;
}

/* ================================================
   Content Grid Layout
   ================================================ */

.content-grid {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 60px;
    align-items: start;
}

/* ================================================
   Doctor Image Container
   ================================================ */
/* Doctor overlay: slow + darker + bottom half only */
.doctor-image-container .image-wrapper .image-overlay{
  top: auto !important;                 /* stop full cover overlays */
  height: 55% !important;               /* bottom half */
  opacity: 1 !important;                /* avoid other sections' opacity:0 */
  transform: translateY(100%) !important;
  transition: transform 0.9s ease-in-out !important; /* slower */
  background: linear-gradient(
    to top,
    rgba(185, 29, 115, 0.98) 0%,
    rgba(185, 29, 115, 0.75) 55%,
    transparent 100%
  ) !important;                         /* a bit darker */
}

.doctor-image-container .image-wrapper:hover .image-overlay{
  transform: translateY(0) !important;
}

/* Container */
.doctor-image-container {
    position: sticky;
    top: 30px;
    width: 100%;
}

/* Image Wrapper */
.image-wrapper {
    position: relative;
    width: 100%;
    min-height: 360px;              /* FIX: ensures overlay has height */
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover lift */
.image-wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 80px rgba(185, 29, 115, 0.25);
}

/* Image */
.logo-img {
    width: 100%;
    height: 100%;                   /* FIX */
    display: block;
    object-fit: contain;            /* logo-safe */
    padding: 40px;
    position: relative;
    z-index: 1;
}

/* Overlay */
.image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 2;                     /* FIX */
    background: linear-gradient(
        to top,
        rgba(185, 29, 115, 0.95) 0%,
        rgba(185, 29, 115, 0.65) 40%,
        transparent 75%
    );
    padding: 40px 30px;
    transform: translateY(100%);
    transition: transform 0.45s ease;
}

/* Hover Trigger */
.image-wrapper:hover .image-overlay {
    transform: translateY(0);
}

/* Overlay Content */
.overlay-content h3 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.overlay-content p {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    font-weight: 500;
}

/* Credentials Badge */
.credentials-badge {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.badge-item {
    background: var(--white);
    padding: 25px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px var(--shadow);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.badge-item:hover {
    border-color: var(--primary-magenta);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--shadow);
}

.badge-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-magenta);
    margin-bottom: 5px;
}

.badge-label {
    display: block;
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 500;
}

/* ================================================
   Doctor Details Section
   ================================================ */

.doctor-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Intro Box */
.intro-box {
    background: var(--white);
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 40px var(--shadow);
    border-left: 6px solid var(--primary-magenta);
    transition: all 0.3s ease;
}

.intro-box:hover {
    transform: translateX(5px);
    box-shadow: 0 15px 50px rgba(185, 29, 115, 0.2);
}

.intro-box h2 {
    font-size: 32px;
    color: var(--primary-magenta);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.intro-text {
    font-size: 17px;
    color: var(--text-gray);
    line-height: 1.8;
}

/* ================================================
   Highlights Grid
   ================================================ */

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.highlight-card {
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 5px 25px var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-magenta), var(--primary-pink));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s ease;
}

.highlight-card:hover::before {
    transform: scaleY(1);
}

.highlight-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(185, 29, 115, 0.25);
    border-color: var(--light-pink);
}

.card-icon {
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--white);
    transition: all 0.4s ease;
}

.highlight-card:hover .card-icon {
    transform: rotate(360deg) scale(1.1);
}

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

.highlight-card h4 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.highlight-card:hover h4 {
    color: var(--primary-magenta);
}

.highlight-card p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* ================================================
   Services Info Section
   ================================================ */

.services-info {
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    padding: 40px;
    border-radius: 25px;
    color: var(--white);
    box-shadow: 0 15px 50px rgba(185, 29, 115, 0.3);
}

.services-info h3 {
    font-size: 28px;
    margin-bottom: 25px;
    font-weight: 700;
}

.services-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.service-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.check-icon {
    width: 24px;
    height: 24px;
    background: var(--white);
    color: var(--primary-magenta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

/* ================================================
   Clinic Info Section
   ================================================ */

.clinic-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.info-item {
    background: var(--white);
    padding: 30px;
    border-radius: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 5px 20px var(--shadow);
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 35px rgba(185, 29, 115, 0.2);
}

.info-item svg {
    width: 40px;
    height: 40px;
    color: var(--primary-magenta);
    flex-shrink: 0;
}

.info-item strong {
    display: block;
    font-size: 18px;
    color: var(--primary-magenta);
    margin-bottom: 5px;
}

.info-item p {
    font-size: 15px;
    color: var(--text-gray);
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1200px) {
    .content-grid {
        grid-template-columns: 400px 1fr;
        gap: 40px;
    }

    .section-header h1 {
        font-size: 42px;
    }
}

@media (max-width: 992px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .doctor-image-container {
        position: relative;
        max-width: 500px;
        margin: 0 auto;
    }

    .highlights-grid {
        grid-template-columns: 1fr;
    }

    .services-content {
        grid-template-columns: 1fr;
    }

    .clinic-info {
        grid-template-columns: 1fr;
    }

    .section-header h1 {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .about-doctor {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-header h1 {
        font-size: 32px;
    }

    .intro-box {
        padding: 30px 25px;
    }

    .intro-box h2 {
        font-size: 26px;
    }

    .intro-text {
        font-size: 16px;
    }

    .highlight-card {
        padding: 25px 20px;
    }

    .services-info {
        padding: 30px 25px;
    }

    .services-info h3 {
        font-size: 24px;
    }

    .credentials-badge {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .section-header h1 {
        font-size: 28px;
    }

    .subtitle {
        font-size: 14px;
    }

    .intro-box h2 {
        font-size: 22px;
    }

    .card-icon {
        width: 55px;
        height: 55px;
    }

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

    .badge-number {
        font-size: 28px;
    }
}

/* ================================================
   Animations
   ================================================ */

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

.highlight-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.highlight-card:nth-child(1) { animation-delay: 0.1s; }
.highlight-card:nth-child(2) { animation-delay: 0.2s; }
.highlight-card:nth-child(3) { animation-delay: 0.3s; }
.highlight-card:nth-child(4) { animation-delay: 0.4s; }


/* ================================================
   FAQ Section Styles (SCOPED ONLY - no site-wide effects)
   ================================================ */

/* FAQ theme variables + typography only inside FAQ */
.faq-section{
  --primary-magenta:#b91d73;
  --primary-pink:#d41f7d;
  --light-pink:#fce4f0;
  --cream:#fef8fb;

  --text-dark:#2d1b2e;
  --text-gray:#5a5a5a;
  --white:#ffffff;
  --shadow:rgba(185,29,115,.15);

  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.6;
  color:var(--text-dark);
  padding:80px 0;
}

/* reset ONLY within FAQ */
.faq-section,
.faq-section *{
  box-sizing:border-box;
}

/* IMPORTANT: do not use/override global .container
   Use this wrapper class in your FAQ HTML: <div class="faq-container-wrap"> */
.faq-section .faq-container-wrap{
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
}

/* ================================================
   Section Header
   ================================================ */

.faq-section .section-header{
  text-align:center;
  margin-bottom:60px;
}

.faq-section .subtitle{
  display:inline-block;
  color:var(--primary-magenta);
  font-weight:600;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:15px;
}

.faq-section .section-header h2{
  font-size:42px;
  color:var(--text-dark);
  font-weight:700;
  margin-bottom:20px;
}

.faq-section .header-underline{
  width:100px;
  height:4px;
  background:linear-gradient(90deg,var(--primary-magenta),var(--primary-pink));
  margin:0 auto 20px;
  border-radius:2px;
}

.faq-section .header-description{
  font-size:18px;
  color:var(--text-gray);
  max-width:600px;
  margin:0 auto;
}

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

.faq-section .faq-container{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:50px;
}

/* ================================================
   FAQ Item
   ================================================ */

.faq-section .faq-item{
  background:var(--white);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 5px 20px var(--shadow);
  transition:all .3s ease;
  border:2px solid transparent;

  animation:fadeInUp .5s ease forwards;
  opacity:0;
}

.faq-section .faq-item:hover{
  box-shadow:0 10px 35px rgba(185,29,115,.2);
  border-color:var(--light-pink);
}

.faq-section .faq-item.active{
  border-color:var(--primary-magenta);
  box-shadow:0 10px 40px rgba(185,29,115,.25);
}

/* FAQ Question */
.faq-section .faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 30px;
  cursor:pointer;
  user-select:none;
  transition:all .3s ease;
  position:relative;
}

.faq-section .faq-question::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:linear-gradient(180deg,var(--primary-magenta),var(--primary-pink));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .3s ease;
}

.faq-section .faq-item.active .faq-question::before{
  transform:scaleY(1);
}

.faq-section .faq-question:hover{
  background:rgba(185,29,115,.03);
}

.faq-section .question-content{
  display:flex;
  align-items:center;
  gap:20px;
  flex:1;
}

.faq-section .question-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  background:linear-gradient(135deg,var(--primary-magenta),var(--primary-pink));
  color:var(--white);
  border-radius:12px;
  font-weight:700;
  font-size:16px;
  flex-shrink:0;
  transition:all .3s ease;
}

.faq-section .faq-item:hover .question-number{
  transform:scale(1.1);
}

.faq-section .faq-item.active .question-number{
  transform:rotate(360deg) scale(1.1);
}

.faq-section .question-content h3{
  font-size:18px;
  color:var(--text-dark);
  font-weight:600;
  line-height:1.4;
  transition:color .3s ease;
  margin:0;
}

.faq-section .faq-item.active .question-content h3{
  color:var(--primary-magenta);
}

/* Toggle Icon */
.faq-section .toggle-icon{
  width:35px;
  height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--light-pink);
  border-radius:50%;
  flex-shrink:0;
  transition:all .3s ease;
}

.faq-section .toggle-icon svg{
  width:20px;
  height:20px;
  color:var(--primary-magenta);
  transition:transform .3s ease;
}

.faq-section .faq-item.active .toggle-icon{
  background:linear-gradient(135deg,var(--primary-magenta),var(--primary-pink));
}

.faq-section .faq-item.active .toggle-icon svg{
  color:var(--white);
  transform:rotate(180deg);
}

/* FAQ Answer */
.faq-section .faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease, padding .4s ease;
  padding:0 30px 0 95px;
}

.faq-section .faq-item.active .faq-answer{
  max-height:1000px;
  padding:0 30px 25px 95px;
}

.faq-section .faq-answer p{
  font-size:16px;
  color:var(--text-gray);
  line-height:1.8;
  margin:0 0 15px;
}

.faq-section .faq-answer p:last-child{
  margin-bottom:0;
}

.faq-section .faq-answer ul{
  margin:15px 0;
  padding-left:20px;
}

.faq-section .faq-answer ul li{
  font-size:16px;
  color:var(--text-gray);
  line-height:1.8;
  margin-bottom:8px;
}

.faq-section .faq-answer ul li::marker{
  color:var(--primary-magenta);
}

/* ================================================
   FAQ CTA Section
   ================================================ */

.faq-section .faq-cta{
  background:linear-gradient(135deg,var(--primary-magenta),var(--primary-pink));
  border-radius:25px;
  padding:50px 40px;
  text-align:center;
  box-shadow:0 15px 50px rgba(185,29,115,.3);
  position:relative;
  overflow:hidden;
}

.faq-section .faq-cta::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-20%;
  width:300px;
  height:300px;
  background:rgba(255,255,255,.1);
  border-radius:50%;
}

.faq-section .faq-cta::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-10%;
  width:200px;
  height:200px;
  background:rgba(255,255,255,.1);
  border-radius:50%;
}

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

.faq-section .cta-content h3{
  font-size:32px;
  color:var(--white);
  margin:0 0 15px;
  font-weight:700;
}

.faq-section .cta-content p{
  font-size:18px;
  color:rgba(255,255,255,.95);
  margin:0 auto 30px;
  max-width:600px;
}

.faq-section .cta-button{
  background:var(--white);
  color:var(--primary-magenta);
  border:none;
  padding:16px 50px;
  font-size:18px;
  font-weight:600;
  border-radius:50px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 5px 20px rgba(0,0,0,.2);
}

.faq-section .cta-button:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,.3);
  background:var(--cream);
}

.faq-section .cta-button:active{
  transform:translateY(-1px);
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width:768px){
  .faq-section{ padding:60px 0; }

  .faq-section .section-header h2{ font-size:32px; }
  .faq-section .header-description{ font-size:16px; }

  .faq-section .faq-question{ padding:20px 20px; }

  .faq-section .question-number{
    width:40px;
    height:40px;
    font-size:14px;
  }

  .faq-section .question-content{ gap:15px; }
  .faq-section .question-content h3{ font-size:16px; }

  .faq-section .faq-answer{ padding:0 20px 0 75px; }
  .faq-section .faq-item.active .faq-answer{ padding:0 20px 20px 75px; }

  .faq-section .faq-answer p,
  .faq-section .faq-answer ul li{ font-size:15px; }

  .faq-section .faq-cta{ padding:40px 25px; }
  .faq-section .cta-content h3{ font-size:26px; }
  .faq-section .cta-content p{ font-size:16px; }

  .faq-section .cta-button{
    padding:14px 40px;
    font-size:16px;
  }
}

@media (max-width:480px){
  .faq-section .section-header h2{ font-size:28px; }
  .faq-section .subtitle{ font-size:14px; }

  .faq-section .question-content h3{ font-size:15px; }

  .faq-section .faq-answer{ padding:0 15px 0 15px; }
  .faq-section .faq-item.active .faq-answer{ padding:0 15px 20px 15px; }

  .faq-section .question-number{
    width:35px;
    height:35px;
    font-size:13px;
  }

  .faq-section .toggle-icon{
    width:30px;
    height:30px;
  }

  .faq-section .toggle-icon svg{
    width:16px;
    height:16px;
  }

  .faq-section .cta-content h3{ font-size:22px; }

  .faq-section .cta-button{
    width:100%;
    padding:14px 30px;
  }
}

/* ================================================
   Animations
   ================================================ */

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

.faq-section .faq-item:nth-child(1){ animation-delay:.05s; }
.faq-section .faq-item:nth-child(2){ animation-delay:.1s; }
.faq-section .faq-item:nth-child(3){ animation-delay:.15s; }
.faq-section .faq-item:nth-child(4){ animation-delay:.2s; }
.faq-section .faq-item:nth-child(5){ animation-delay:.25s; }
.faq-section .faq-item:nth-child(6){ animation-delay:.3s; }
.faq-section .faq-item:nth-child(7){ animation-delay:.35s; }
.faq-section .faq-item:nth-child(8){ animation-delay:.4s; }
.faq-section .faq-item:nth-child(9){ animation-delay:.45s; }
.faq-section .faq-item:nth-child(10){ animation-delay:.5s; }


/* ================================================
   Review Section Styles
   ================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Primary Colors from Logo */
    --primary-magenta: #b91d73;
    --primary-pink: #d41f7d;
    --light-pink: #fce4f0;
    --cream: #fef8fb;
    
    /* Supporting Colors */
    --text-dark: #2d1b2e;
    --text-gray: #5a5a5a;
    --white: #ffffff;
    --shadow: rgba(185, 29, 115, 0.15);
    --gold: #fbbf24;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   Review Section
   ================================================ */

.review-section {
    padding: 20px 0;
    position: relative;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.subtitle {
    display: inline-block;
    color: var(--primary-magenta);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 42px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 20px;
}

.header-underline {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-magenta), var(--primary-pink));
    margin: 0 auto 20px;
    border-radius: 2px;
}

.header-description {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ================================================
   Reviews Grid
   ================================================ */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* ================================================
   Review Card
   ================================================ */

.review-card {
    background: var(--white);
    padding: 35px 30px;
    border-radius: 20px;
    box-shadow: 0 5px 25px var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-magenta), var(--primary-pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.review-card:hover::before {
    transform: scaleX(1);
}

.review-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 45px rgba(185, 29, 115, 0.25);
    border-color: var(--light-pink);
}

/* Quote Icon */
.quote-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    align-self: flex-start;
    transition: all 0.4s ease;
}

.review-card:hover .quote-icon {
    transform: rotate(360deg) scale(1.1);
}

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

/* Rating */
.rating {
    display: flex;
    gap: 5px;
}

.star {
    color: var(--gold);
    font-size: 20px;
    transition: all 0.2s ease;
}

.review-card:hover .star {
    transform: scale(1.1);
}

/* Review Text */
.review-text {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.7;
    flex-grow: 1;
    font-style: italic;
}

/* Reviewer Info */
.reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--light-pink);
}

.reviewer-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.review-card:hover .reviewer-avatar {
    transform: scale(1.1);
}

.reviewer-details {
    flex-grow: 1;
}

.reviewer-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.review-date {
    font-size: 13px;
    color: var(--primary-magenta);
    font-weight: 500;
    margin: 0;
}

/* ================================================
   Review Stats Section
   ================================================ */

.review-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.stat-item {
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    padding: 40px 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 40px rgba(185, 29, 115, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(185, 29, 115, 0.4);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-icon {
    transform: rotate(360deg) scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}

.stat-icon svg {
    width: 30px;
    height: 30px;
}

.stat-content {
    color: var(--white);
}

.stat-content h3 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1;
}

.stat-content p {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.95;
    margin: 0;
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1200px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .review-section {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .header-description {
        font-size: 16px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .review-card {
        padding: 30px 25px;
    }

    .review-text {
        font-size: 14px;
    }

    .reviewer-name {
        font-size: 16px;
    }

    .review-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stat-item {
        padding: 30px 25px;
    }

    .stat-content h3 {
        font-size: 30px;
    }

    .stat-content p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 28px;
    }

    .subtitle {
        font-size: 14px;
    }

    .review-card {
        padding: 25px 20px;
        gap: 15px;
    }

    .quote-icon {
        width: 45px;
        height: 45px;
    }

    .quote-icon svg {
        width: 20px;
        height: 20px;
    }

    .star {
        font-size: 18px;
    }

    .reviewer-avatar {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
    }

    .stat-icon svg {
        width: 25px;
        height: 25px;
    }

    .stat-content h3 {
        font-size: 26px;
    }
}

/* ================================================
   Animations
   ================================================ */

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

.review-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }
.review-card:nth-child(4) { animation-delay: 0.4s; }

.stat-item {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.stat-item:nth-child(1) { animation-delay: 0.5s; }
.stat-item:nth-child(2) { animation-delay: 0.6s; }
.stat-item:nth-child(3) { animation-delay: 0.7s; }


/* ================================================
   Blog Section Styles
   ================================================ */

:root {
    /* Primary Colors from Logo */
    --primary-magenta: #b91d73;
    --primary-pink: #d41f7d;
    --light-pink: #fce4f0;
    --cream: #fef8fb;
    
    /* Supporting Colors */
    --text-dark: #2d1b2e;
    --text-gray: #5a5a5a;
    --white: #ffffff;
    --shadow: rgba(185, 29, 115, 0.15);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   Blog Section
   ================================================ */

.blog-section {
    padding: 0px 0;
    position: relative;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.subtitle {
    display: inline-block;
    color: var(--primary-magenta);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 42px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 20px;
}

.section-header h2 .highlight {
    color: var(--primary-magenta);
}

.header-underline {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-magenta), var(--primary-pink));
    margin: 0 auto 20px;
    border-radius: 2px;
}

.header-description {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ================================================
   Blog Grid
   ================================================ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 35px;
    margin-bottom: 50px;
}

/* ================================================
   Blog Card
   ================================================ */

.blog-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 25px var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(185, 29, 115, 0.25);
    border-color: var(--light-pink);
}

/* Blog Image */
.blog-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(185, 29, 115, 0.3), transparent);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
}

.blog-category {
    background: var(--white);
    color: var(--primary-magenta);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Blog Content */
.blog-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

/* Blog Meta */
.blog-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 500;
}

.meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--primary-magenta);
}

/* Blog Title */
.blog-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
}

.blog-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 600;
}

.blog-title a:hover {
    color: var(--primary-magenta);
}

/* Blog Excerpt */
.blog-excerpt {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* Read More Button */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-magenta);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 25px;
    border: 2px solid var(--primary-magenta);
    border-radius: 50px;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: 10px;
}

.read-more-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.read-more-btn:hover {
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    color: var(--white);
    border-color: transparent;
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(185, 29, 115, 0.3);
}

.read-more-btn:hover svg {
    transform: translateX(5px);
}

/* ================================================
   Blog CTA (View All Button)
   ================================================ */

.blog-cta {
    text-align: center;
    margin-top: 40px;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    padding: 18px 45px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(185, 29, 115, 0.3);
}

.view-all-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.view-all-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(185, 29, 115, 0.4);
}

.view-all-btn:hover svg {
    transform: translateX(5px);
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1200px) {
    .blog-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .blog-section {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .header-description {
        font-size: 16px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .blog-image {
        height: 220px;
    }

    .blog-content {
        padding: 25px 20px;
    }

    .blog-title {
        font-size: 20px;
    }

    .blog-excerpt {
        font-size: 14px;
    }

    .read-more-btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    .view-all-btn {
        font-size: 16px;
        padding: 16px 35px;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 28px;
    }

    .subtitle {
        font-size: 14px;
    }

    .blog-image {
        height: 200px;
    }

    .blog-content {
        padding: 20px 18px;
        gap: 12px;
    }

    .blog-title {
        font-size: 18px;
    }

    .blog-meta {
        gap: 15px;
    }

    .meta-item {
        font-size: 13px;
    }

    .meta-item svg {
        width: 14px;
        height: 14px;
    }

    .blog-category {
        font-size: 11px;
        padding: 6px 15px;
    }

    .read-more-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    .view-all-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 30px;
    }
}

/* ================================================
   Animations
   ================================================ */

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

.blog-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.blog-card:nth-child(1) { animation-delay: 0.1s; }
.blog-card:nth-child(2) { animation-delay: 0.2s; }
.blog-card:nth-child(3) { animation-delay: 0.3s; }


/* ================================================
   CTA Section Styles
   ================================================ */

:root {
    /* Primary Colors from Logo */
    --primary-magenta: #b91d73;
    --primary-pink: #d41f7d;
    --light-pink: #fce4f0;
    --cream: #fef8fb;
    
    /* Supporting Colors */
    --text-dark: #2d1b2e;
    --text-gray: #5a5a5a;
    --white: #ffffff;
    --shadow: rgba(185, 29, 115, 0.15);
}

/* ================================================
   CTA Section
   ================================================ */

.cta-section {
    position: relative;
    padding: 10px 0;
    overflow: hidden;
}

/* Background Image */
.cta-background {
    position: absolute;
    inset: 0;
    background-image: url("http://drsumitchakravarty.com/wp-content/uploads/2026/02/WhatsApp-Image-2026-02-06-at-10.35.04-AM.jpeg");
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Background Overlay */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(245, 150, 210, 0.75), rgba(255, 170, 220, 0.70));
    z-index: 2;
}

/* Add decorative shapes */
.background-overlay::before,
.background-overlay::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.background-overlay::before {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
}

.background-overlay::after {
    width: 300px;
    height: 300px;
    bottom: -80px;
    left: -80px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

/* ================================================
   CTA Content
   ================================================ */

.cta-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

.cta-text {
    margin-bottom: 40px;
}

.cta-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-content h2 {
    font-size: 48px;
    color: var(--white);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.cta-content h2 .highlight {
    color: var(--white);
    background: rgba(255, 255, 255, 0.2);
    padding: 0 15px;
    border-radius: 10px;
    display: inline-block;
}

.cta-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

/* ================================================
   CTA Buttons
   ================================================ */

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 45px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.cta-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* Primary Button */
.cta-btn.primary {
    background: var(--white);
    color: var(--primary-magenta);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-btn.primary:hover {
    background: var(--cream);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Secondary Button */
.cta-btn.secondary {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.cta-btn.secondary:hover {
    background: var(--white);
    color: var(--primary-magenta);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
}

.cta-btn:hover svg {
    transform: translateX(5px);
}

/* ================================================
   Info Cards
   ================================================ */

.cta-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.info-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    padding: 30px 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.info-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.info-icon {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.info-card:hover .info-icon {
    transform: rotate(360deg) scale(1.1);
}

.info-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-magenta);
}

.info-content h4 {
    font-size: 18px;
    color: var(--white);
    margin-bottom: 5px;
    font-weight: 600;
}

.info-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 500;
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 992px) {
    .cta-section {
        padding: 80px 0;
    }

    .cta-content h2 {
        font-size: 38px;
    }

    .cta-content p {
        font-size: 16px;
    }

    .cta-buttons {
        gap: 15px;
    }

    .cta-btn {
        padding: 16px 35px;
        font-size: 16px;
    }

    .cta-info-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 0;
    }

    .cta-content h2 {
        font-size: 32px;
    }

    .cta-content h2 .highlight {
        display: inline;
        background: none;
        padding: 0;
    }

    .cta-badge {
        font-size: 12px;
        padding: 8px 20px;
    }

    .background-overlay::before {
        width: 300px;
        height: 300px;
    }

    .background-overlay::after {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 640px) {
    .cta-content h2 {
        font-size: 28px;
    }

    .cta-content p {
        font-size: 15px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 30px;
    }

    .info-card {
        padding: 25px 20px;
        gap: 15px;
    }

    .info-icon {
        width: 50px;
        height: 50px;
    }

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

    .info-content h4 {
        font-size: 16px;
    }

    .info-content p {
        font-size: 14px;
    }
}

/* ================================================
   Animations
   ================================================ */

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

.cta-content {
    animation: fadeInUp 0.8s ease forwards;
}

.info-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.info-card:nth-child(1) { animation-delay: 0.2s; }
.info-card:nth-child(2) { animation-delay: 0.3s; }
.info-card:nth-child(3) { animation-delay: 0.4s; }

/* Floating animation for decorative shapes */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.background-overlay::before {
    animation: float 6s ease-in-out infinite;
}

.background-overlay::after {
    animation: float 8s ease-in-out infinite;
}


/* ================================================
   Services Section Styles
   ================================================ */

:root {
    /* Primary Colors from Logo */
    --primary-magenta: #b91d73;
    --primary-pink: #d41f7d;
    --light-pink: #fce4f0;
    --cream: #fef8fb;
    
    /* Supporting Colors */
    --text-dark: #2d1b2e;
    --text-gray: #5a5a5a;
    --white: #ffffff;
    --shadow: rgba(185, 29, 115, 0.15);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   Services Section
   ================================================ */

.services-section {
    padding: 40px 0;
    position: relative;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.subtitle {
    display: inline-block;
    color: var(--primary-magenta);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 42px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 20px;
}

.section-header h2 .highlight {
    color: var(--primary-magenta);
}

.header-underline {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-magenta), var(--primary-pink));
    margin: 0 auto 20px;
    border-radius: 2px;
}

.header-description {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 700px;
    margin: 0 auto;
}

/* ================================================
   Services Grid
   ================================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* ================================================
   Service Card
   ================================================ */

.service-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 25px var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-magenta), var(--primary-pink));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(185, 29, 115, 0.25);
    border-color: var(--light-pink);
}

/* Service Image */
.service-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .service-image img {
    transform: scale(1.15);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(185, 29, 115, 0.7));
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card:hover .image-overlay {
    opacity: 1;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.service-card:hover .service-icon {
    transform: translateY(0) rotate(360deg);
}

.service-icon svg {
    width: 30px;
    height: 30px;
    color: var(--primary-magenta);
}

/* Service Content */
.service-content {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.service-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.4;
}

.service-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 600;
    display: block;
}

.service-title a:hover {
    color: var(--primary-magenta);
}

.service-excerpt {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

/* Service Link */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-magenta);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.service-link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.service-link:hover {
    gap: 12px;
    color: var(--primary-pink);
}

.service-link:hover svg {
    transform: translateX(5px);
}

/* ================================================
   Services CTA
   ================================================ */

.services-cta {
    margin-top: 50px;
}

.cta-card {
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
    padding: 50px 40px;
    border-radius: 25px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    box-shadow: 0 15px 50px rgba(185, 29, 115, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cta-card::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -5%;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cta-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.cta-icon svg {
    width: 40px;
    height: 40px;
    color: var(--white);
}

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

.cta-text h3 {
    font-size: 28px;
    color: var(--white);
    margin-bottom: 10px;
    font-weight: 700;
}

.cta-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    line-height: 1.6;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    color: var(--primary-magenta);
    padding: 16px 35px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.cta-button svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    background: var(--cream);
}

.cta-button:hover svg {
    transform: translateX(5px);
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 992px) {
    .cta-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 25px;
    }

    .cta-icon {
        margin: 0 auto;
    }

    .cta-button {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .services-section {
        padding: 60px 0;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .header-description {
        font-size: 16px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-image {
        height: 200px;
    }

    .service-content {
        padding: 25px 20px;
    }

    .service-title {
        font-size: 20px;
    }

    .service-excerpt {
        font-size: 14px;
    }

    .cta-card {
        padding: 40px 25px;
    }

    .cta-text h3 {
        font-size: 24px;
    }

    .cta-text p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 28px;
    }

    .subtitle {
        font-size: 14px;
    }

    .service-image {
        height: 180px;
    }

    .service-content {
        padding: 20px 18px;
        gap: 12px;
    }

    .service-title {
        font-size: 18px;
    }

    .service-icon {
        width: 50px;
        height: 50px;
    }

    .service-icon svg {
        width: 25px;
        height: 25px;
    }

    .cta-icon {
        width: 70px;
        height: 70px;
    }

    .cta-icon svg {
        width: 35px;
        height: 35px;
    }

    .cta-text h3 {
        font-size: 20px;
    }

    .cta-text p {
        font-size: 14px;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
        padding: 14px 30px;
        font-size: 16px;
    }
}

/* ================================================
   Animations
   ================================================ */

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

.service-card {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
.service-card:nth-child(7) { animation-delay: 0.7s; }
.service-card:nth-child(8) { animation-delay: 0.8s; }
.service-card:nth-child(9) { animation-delay: 0.9s; }

.cta-card {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 1s;
    opacity: 0;
}

/* ================================================
   Home Boxes Section Styles
   ================================================ */

:root {
    /* Primary Colors from Logo */
    --primary-magenta: #b91d73;
    --primary-pink: #d41f7d;
    --light-pink: #fce4f0;
    --cream: #fef8fb;
    
    /* Supporting Colors */
    --text-dark: #2d1b2e;
    --text-gray: #5a5a5a;
    --white: #ffffff;
    --shadow: rgba(185, 29, 115, 0.15);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   Home Boxes Section
   ================================================ */

.home-boxes-section {
    padding: 0;
    margin-top: -100px;
    position: relative;
    z-index: 10;
}

/* ================================================
   Boxes Grid
   ================================================ */

.boxes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* ================================================
   Info Box
   ================================================ */

.info-box {
    background: var(--white);
    border-radius: 25px;
    padding: 40px 35px;
    box-shadow: 0 10px 40px var(--shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    overflow: hidden;
}

/* Gradient backgrounds for each box */
.info-box.time-table-box {
    background: linear-gradient(135deg, #ad3f62 0%, #8b2f4e 100%);
}

.info-box.doctor-box {
    background: linear-gradient(135deg, #a12f54 0%, #7d2442 100%);
}

.info-box.contact-box {
    background: linear-gradient(135deg, var(--primary-magenta), var(--primary-pink));
}

.info-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all 0.6s ease;
}

.info-box:hover::before {
    top: -30%;
    right: -10%;
}

.info-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(185, 29, 115, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ================================================
   Box Header
   ================================================ */

.box-header {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

.info-box:hover .header-icon {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(360deg) scale(1.1);
}

.header-icon svg {
    width: 30px;
    height: 30px;
    color: var(--white);
}

.header-text h3 {
    font-size: 22px;
    color: var(--white);
    font-weight: 700;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.header-text p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 500;
}

/* ================================================
   Box Content
   ================================================ */

.box-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* Location Items */
.location-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.location-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.location-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-icon svg {
    width: 20px;
    height: 20px;
    color: var(--white);
}

.location-details h4 {
    font-size: 15px;
    color: var(--white);
    font-weight: 600;
    margin: 0 0 5px 0;
}

.location-details p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
}

/* Timings List */
.timings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.timing-item.closed {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.2);
}

.timing-label {
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
}

.timing-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

/* Credential Items */
.credential-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.credential-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.credential-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.credential-icon svg {
    width: 20px;
    height: 20px;
    color: var(--white);
}

.credential-text h4 {
    font-size: 15px;
    color: var(--white);
    font-weight: 600;
    margin: 0 0 5px 0;
}

.credential-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Phone Display */
.phone-display {
    text-align: center;
    padding: 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.phone-icon {
    width: 60px;
    height: 60px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: all 0.3s ease;
}

.info-box:hover .phone-icon {
    transform: scale(1.1) rotate(10deg);
}

.phone-icon svg {
    width: 28px;
    height: 28px;
    color: var(--primary-magenta);
}

.phone-number {
    display: block;
    font-size: 32px;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.phone-number:hover {
    transform: scale(1.05);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Contact Features */
.contact-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 14px;
    color: var(--white);
    font-weight: 500;
}

.feature-item svg {
    width: 18px;
    height: 18px;
    color: var(--white);
}

/* ================================================
   Box Link (CTA Button)
   ================================================ */

.box-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--white);
    color: var(--primary-magenta);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
}

.box-link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.box-link:hover {
    background: var(--cream);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.box-link:hover svg {
    transform: translateX(5px);
}

/* ================================================
   Responsive Design
   ================================================ */

@media (max-width: 1200px) {
    .boxes-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .home-boxes-section {
        margin-top: 0;
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .info-box {
        padding: 30px 25px;
        gap: 20px;
    }

    .box-header {
        gap: 15px;
    }

    .header-icon {
        width: 50px;
        height: 50px;
    }

    .header-icon svg {
        width: 25px;
        height: 25px;
    }

    .header-text h3 {
        font-size: 20px;
    }

    .phone-number {
        font-size: 28px;
    }

    .location-details p,
    .credential-text p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .home-boxes-section {
        padding: 40px 0;
    }

    .info-box {
        padding: 25px 20px;
    }

    .header-text h3 {
        font-size: 18px;
    }

    .phone-number {
        font-size: 24px;
    }

    .location-item,
    .credential-item {
        padding: 12px;
        gap: 12px;
    }

    .location-icon,
    .credential-icon {
        width: 35px;
        height: 35px;
    }

    .location-icon svg,
    .credential-icon svg {
        width: 18px;
        height: 18px;
    }

    .timing-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .timing-value {
        text-align: left;
    }

    .box-link {
        width: 100%;
        padding: 14px 25px;
    }
}

/* ================================================
   Animations
   ================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-box {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
}

.info-box:nth-child(1) { animation-delay: 0.1s; }
.info-box:nth-child(2) { animation-delay: 0.3s; }
.info-box:nth-child(3) { animation-delay: 0.5s; }