/*
 * Stylesheet for Dr. Manju Nair profile website
 *
 * This file defines a clean, responsive layout using modern CSS techniques.
 * Colour variables make it easy to adjust the theme, and simple
 * transitions add subtle interactivity. The design aims to be
 * accessible and readable on all devices.
 */

/* CSS reset and base styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--body-font), 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-color);
  background-color: #FEFEFE;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------
   Global animated background overlay

   To create a sense of continuous movement across the entire site,
   we add a subtle animated gradient overlay on the body. This
   pseudo‑element sits behind all content (z‑index: -1) and slowly
   shifts its colours over time. The low opacity ensures the effect
   enhances the theme without overpowering readability. In dark
   theme the colours automatically adapt via CSS variables.
*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  /* Use a multi‑colour gradient based on the theme colours */
  background: linear-gradient(120deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--secondary-color));
  background-size: 400% 400%;
  opacity: 0.06;
  animation: globalGradient 30s ease infinite;
}

/* ------------------------------------------------------------------
   IVF illustration across the entire site

   To reinforce the fertility theme on every page, we add another
   pseudo‑element behind the gradient overlay. This uses the same
   sperm‑and‑egg illustration as the hero section but at a lower
   opacity so it doesn’t compete with content. The animation slides
   the image horizontally across the viewport to create continuous
   motion throughout the scrolling experience.
*/
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  pointer-events: none;
  background: transparent;
}

/* Modern Colour palette */
:root {
  --primary-color: #8B1538; /* dark pink */
  --secondary-color: #E91E63; /* medium pink */
  --accent-color: #F8BBD9; /* light pink */
  --bg-color: #FEFEFE; /* milky white background */
  --light-gray: #F8F9FA;
  --text-color: #2C3E50;
  --text-muted: #7F8C8D;
  --heading-font: 'Poppins', sans-serif;
  --body-font: 'Open Sans', sans-serif;
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 25px 0 rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 15px 35px 0 rgba(0, 0, 0, 0.15);
  --border-radius: 12px;
  --border-radius-lg: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gradient-primary: linear-gradient(135deg, #8B1538 0%, #E91E63 100%);
  --gradient-secondary: linear-gradient(135deg, #E91E63 0%, #F8BBD9 100%);
  --gradient-accent: linear-gradient(135deg, #F8BBD9 0%, #FFB6C1 100%);
}

/* Dark theme support (toggle by setting data-theme="dark" on body) */
body[data-theme="dark"] {
  --bg-color: #1A1A1A;
  --light-gray: #2D2D2D;
  --text-color: #FFFFFF;
  --primary-color: #3498DB;
  --secondary-color: #E74C3C;
  --accent-color: #F39C12;
}

/* Utility classes */
.container {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
}

.section {
  padding: 0.5rem 0;
}

.section-title {
  font-family: var(--heading-font);
  font-weight: 700;
  color: #8B1538;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  margin-bottom: 0.5rem;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.025em;
  font-size: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: #ffffff;
  box-shadow: var(--shadow);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--primary-color);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  background: var(--secondary-color);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 1000;
  transition: left 0.3s ease;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Header & Navigation */
.header {
  background: linear-gradient(135deg, #FFE5F1 0%, #FFF0F5 50%, #FFF8FA 100%);
  width: 100%;
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15);
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  padding: 0.75rem 1.5rem;
  gap: 3rem;
}

.logo {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  margin-right: auto;
}

.navigation {
  display: flex;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-left: auto;
}

.nav-list a {
  font-weight: 600;
  color: #8B1538;
  text-decoration: none;
  position: relative;
  padding: 0.6rem 1rem;
  transition: all 0.3s ease;
  font-size: 1rem;
  border-radius: 8px;
  white-space: nowrap;
}

.nav-list a::after {
  content: '';
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  transition: width 0.3s ease;
}

.nav-list a:hover,
.nav-list a:focus {
  color: #EC4899;
  background-color: rgba(236, 72, 153, 0.1);
  transform: translateY(-1px);
}

.nav-list a:hover::after,
.nav-list a:focus::after {
  width: 100%;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  width: 2.5rem;
  height: 2rem;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}

/* Dark mode toggle */
.mode-toggle {
  background: none;
  border: none;
  font-size: 1.3rem;
  margin-right: 1rem;
  color: var(--primary-color);
  cursor: pointer;
  transition: color 0.3s ease;
}

/* Audio toggle button */
.audio-toggle {
  background: none;
  border: none;
  font-size: 1.3rem;
  margin-right: 1rem;
  color: var(--primary-color);
  cursor: pointer;
  transition: color 0.3s ease;
}


/* Generic wave separators between sections */
.section-wave {
  display: block;
  width: 100%;
  height: 80px;
  line-height: 0;
}

/* Variant for waves that transition into a section with the default background */
.wave--to-white path {
  fill: var(--bg-color);
}

/* Variant for waves that transition into a section with the light gray background */
.wave--to-light path {
  fill: var(--light-gray);
}

.audio-toggle:hover,
.audio-toggle:focus {
  color: var(--secondary-color);
}

/* Top wave at the top of the hero section */
.hero-top-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 0;
  z-index: 2;
  /* Flip the wave vertically to create an inverted effect */
  transform: scaleY(-1);
}

.hero-top-wave path {
  /* Use primary colour for the top wave to blend into the hero */
  fill: var(--primary-color);
}

.mode-toggle:hover,
.mode-toggle:focus {
  color: var(--secondary-color);
}

@media (max-width: 768px) {
  .mode-toggle {
    margin-right: 0.5rem;
  }
}

.nav-toggle span {
  display: block;
  height: 4px;
  width: 100%;
  background-color: #8B1538;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

/* Hero Section */
.hero {
  background: 
    linear-gradient(135deg, rgba(255, 229, 241, 0.9) 0%, rgba(255, 240, 245, 0.9) 25%, rgba(255, 248, 250, 0.9) 50%, rgba(255, 255, 255, 0.95) 75%, rgba(248, 249, 250, 0.9) 100%);
  color: var(--text-color);
  padding: 4rem 0 5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 80vh;
  border-radius: 0 0 30px 30px;
}

/* Hero Animations */
.hero-title {
  animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-tagline {
  animation: fadeInUp 1s ease-out 0.4s both;
}

.hero-buttons {
  animation: fadeInUp 1s ease-out 0.6s both;
}

.doctor-image-card {
  animation: fadeInRight 1s ease-out 0.8s both;
}

.success-badges-container {
  animation: fadeInUp 1s ease-out 1s both;
}

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

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

/* Scroll Animations */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease-out;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(236, 72, 153, 0.4);
}

/* Mobile Hero Section Fixes */
@media (max-width: 768px) {
  .hero {
    padding: 2rem 0 3rem;
    min-height: 70vh;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 1rem;
  }

  .hero-tagline {
    font-size: clamp(1rem, 4vw, 1.2rem);
    margin-bottom: 2rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 280px;
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }

  .doctor-card-container {
    height: auto;
    max-width: 300px;
    margin: 0 auto;
  }

  .doctor-image-card {
    max-width: 280px;
    height: 350px;
  }

  .success-badges-container {
    flex-direction: column;
    gap: 0.8rem;
    max-width: 280px;
    margin: 0 auto;
  }

  .success-badge-card,
  .experience-badge-card {
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}

/* Responsive positioning for chat and back to top */
@media (max-width: 768px) {
  .back-to-top {
    bottom: 5rem;
    right: 1rem;
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
  
  .chat-widget {
    bottom: 0.5rem;
    right: 0.5rem;
  }
}

/* Micro-interactions for buttons */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn:active {
  transform: scale(0.95);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

/* Enhanced form field interactions */
.form-group input,
.form-group textarea {
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.15);
  border-color: #EC4899;
}

/* Loading animation for form submission */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Progress Bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #EC4899 0%, #F472B6 100%);
  z-index: 1001;
  transition: width 0.3s ease;
}

/* Enhanced mobile navigation */
@media (max-width: 768px) {
  .navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #FFE5F1 0%, #FFF0F5 100%);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navigation.open {
    transform: translateX(0);
  }

  .nav-list {
    position: static;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: none;
    padding: 2rem;
    gap: 1rem;
  }

  .nav-list a {
    font-size: 1.2rem;
    padding: 1rem 2rem;
    margin: 0.5rem 0;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: block;
  }

  /* Close button for mobile nav */
  .navigation::before {
    content: '✕';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    color: #8B1538;
    cursor: pointer;
    z-index: 1001;
  }
}

/* Lazy loading for images */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[data-src].loaded {
  opacity: 1;
}

/* Skip links for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}


  animation: laboratoryGlow 8s ease-in-out infinite alternate;
}

@keyframes laboratoryGlow {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  z-index: 1;
}

/* Hero Decorative Elements */
.hero-decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.decoration-icon {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.15;
  animation: gentleFloat 8s ease-in-out infinite;
  color: var(--secondary-color);
}

.decoration-1 {
  top: 8%;
  left: 5%;
  animation-delay: 0s;
}

.decoration-2 {
  top: 15%;
  right: 10%;
  animation-delay: 0.6s;
}

.decoration-3 {
  top: 45%;
  left: 2%;
  animation-delay: 1.2s;
}

.decoration-4 {
  bottom: 30%;
  right: 5%;
  animation-delay: 1.8s;
}

.decoration-5 {
  top: 30%;
  left: 40%;
  animation-delay: 2.4s;
}

.decoration-6 {
  top: 65%;
  right: 15%;
  animation-delay: 3.0s;
}

.decoration-7 {
  bottom: 15%;
  left: 12%;
  animation-delay: 3.6s;
}

.decoration-8 {
  top: 75%;
  left: 25%;
  animation-delay: 4.2s;
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
    opacity: 0.6;
  }
}

/* Laboratory Equipment Visual Elements */
.laboratory-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.microscope-glow {
  position: absolute;
  top: 20%;
  right: 15%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(194, 24, 91, 0.4) 0%, rgba(194, 24, 91, 0.1) 30%, transparent 70%);
  border-radius: 50%;
  animation: microscopePulse 6s ease-in-out infinite;
  filter: blur(2px);
}

.petri-dish-glow {
  position: absolute;
  bottom: 25%;
  left: 20%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(139, 21, 56, 0.3) 0%, rgba(139, 21, 56, 0.1) 40%, transparent 80%);
  border-radius: 50%;
  animation: petriGlow 8s ease-in-out infinite;
  filter: blur(1px);
}

.test-tube-glow {
  position: absolute;
  top: 60%;
  right: 25%;
  width: 100px;
  height: 120px;
  background: linear-gradient(180deg, rgba(248, 187, 217, 0.4) 0%, rgba(194, 24, 91, 0.2) 50%, transparent 100%);
  border-radius: 50px 50px 0 0;
  animation: testTubeGlow 7s ease-in-out infinite;
  filter: blur(1px);
}

@keyframes microscopePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes petriGlow {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.7;
  }
}

@keyframes testTubeGlow {
  0%, 100% {
    transform: scale(1) translateY(0px);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05) translateY(-10px);
    opacity: 0.8;
  }
}

/* Hero Layout */
.hero-content {
  position: relative;
  z-index: 20;
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
  background: transparent;
  padding: 0;
  margin: 0;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 95%;
}

.hero-info {
  position: relative;
  z-index: 15;
  background: transparent;
  padding: 0;
  margin: 0;
}

.hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(24, 154, 180, 0.3);
}

.hero-title {
  font-family: var(--heading-font);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-shadow: none;
}

.hero-designation {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--primary-color);
  line-height: 1.3;
  text-shadow: none;
}

.hero-subtitle {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--secondary-color);
  line-height: 1.4;
  text-shadow: none;
}

.hero-tagline {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 100%;
  padding: 0.5rem 0;
  text-shadow: none;
}

.hero-credentials {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0;
}

.credential-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.credential-icon {
  font-size: 1.2rem;
  width: 24px;
  text-align: center;
}

.hero-description {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  color: #4a5568;
  line-height: 1.6;
  max-width: 650px;
  font-weight: 400;
}

.hero-credentials {
  margin-bottom: 0;
}

.credentials-text {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

.credentials-details {
  background: rgba(45, 125, 210, 0.05);
  border-left: 4px solid #2d7dd2;
  padding: 0.8rem;
  border-radius: 0.5rem;
}

.credentials-details h4 {
  font-family: var(--heading-font);
  font-size: 1rem;
  color: #1a365d;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.credentials-details p {
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.credentials-details strong {
  color: #2d7dd2;
  font-weight: 600;
}

.expertise-widget,
.memberships-widget {
  background: rgba(45, 125, 210, 0.08);
  border: 2px solid #2d7dd2;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(45, 125, 210, 0.1);
  transition: all 0.3s ease;
}

.expertise-widget:hover,
.memberships-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(45, 125, 210, 0.15);
}

.expertise-widget h4,
.memberships-widget h4 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  color: #1a365d;
  margin-bottom: 1rem;
  font-weight: 600;
}

.widget-text {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.expertise-list {
  margin: 1rem 0;
}

.expertise-item {
  font-size: 0.9rem;
  color: #2d7dd2;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.hero-buttons .btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  font-weight: 600;
  min-width: 200px;
  text-align: center;
  border: none;
  letter-spacing: 0.5px;
}

.hero-buttons .btn-primary {
  background: linear-gradient(135deg, #EC4899 0%, #F472B6 50%, #FBBF24 100%);
  color: white;
  border: none;
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3), 0 0 20px rgba(244, 114, 182, 0.2);
  position: relative;
  overflow: hidden;
  font-weight: 600;
}

.hero-buttons .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(24, 154, 180, 0.4);
}

.hero-buttons .btn-secondary {
  background: linear-gradient(135deg, #A78BFA 0%, #C084FC 100%);
  color: white;
  border: none;
  box-shadow: 0 8px 25px rgba(167, 139, 250, 0.3), 0 0 15px rgba(192, 132, 252, 0.2);
  backdrop-filter: blur(10px);
  font-weight: 600;
}

.hero-buttons .btn-secondary:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 68, 94, 0.2);
}

/* Hero Image */
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
}

.hero-image-wrapper {
  position: relative;
  display: inline-block;
}

.doctor-photo-container {
  position: relative;
  display: inline-block;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border: 6px solid #ffffff;
  transition: all 0.4s ease;
}

.doctor-photo {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  transition: all 0.4s ease;
}

.doctor-photo-container:hover {
  transform: scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.consultation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(34, 197, 94, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.doctor-photo-container:hover .consultation-overlay {
  opacity: 1;
}

.fertility-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
}

.lotus-icon {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.heart-icon {
  top: 30%;
  right: 20%;
  animation-delay: 1s;
}

.leaf-icon {
  bottom: 25%;
  left: 25%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hero-image-badge {
  position: absolute;
  bottom: -15px;
  right: -15px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 1.5rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(5, 68, 94, 0.3);
  border: 5px solid #ffffff;
  min-width: 120px;
}

.experience-years {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.experience-text {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}


@media (max-width: 768px) {
  .hero {
    padding: 1rem 0 4rem;
    min-height: auto;
  }
  
  .hero-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .hero-info {
    padding-right: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    order: 2;
  }
  
  .hero-image {
    order: 1;
  }
  
  .hero-title {
    font-size: 2.8rem;
  }
  
  .hero-tagline {
    font-size: 1.5rem;
  }
  
  .hero-description {
    font-size: 1rem;
    max-width: 100%;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .hero-buttons .btn {
    min-width: 160px;
    padding: 0.9rem 1.5rem;
  }
  
  .about-text p {
    font-size: 1.1rem;
  }
  
  .about-details {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .about-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 0.5rem 0 3rem;
  }
  
  .hero-title {
    font-size: 2.4rem;
  }
  
  .hero-designation {
    font-size: 1.2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .hero-tagline {
    font-size: 1.3rem;
  }
  
  
  .hero-image-badge {
    padding: 0.8rem 1.2rem;
    bottom: -8px;
    right: -8px;
  }
  
  .experience-years {
    font-size: 1.5rem;
  }
  
  .experience-text {
    font-size: 0.7rem;
  }
}

/* IVF & Fertility Highlights Section */
.highlights-section {
  background: linear-gradient(135deg, #FEFEFE 0%, #F8F9FA 100%);
  color: var(--text-color);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(139, 21, 56, 0.1);
}

.highlights-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 0;
}

.highlights-section .container {
  position: relative;
  z-index: 1;
}

.highlights-intro {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.highlights-section .section-title {
  color: var(--primary-color);
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

/* Statistics Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1rem;
  padding: 0.6rem 0.3rem;
  text-align: center;
  transition: transform 0.3s ease, background 0.3s ease;
  box-shadow: var(--shadow);
}

.stat-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--shadow-lg);
}

.stat-number {
  font-family: var(--heading-font);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.2rem;
  text-shadow: none;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-disclaimer {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.2rem;
  line-height: 1.2;
}

.stat-card.featured-stat {
  border: 2px solid var(--secondary-color);
  background: rgba(255, 255, 255, 1);
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.stat-card.featured-stat:hover {
  transform: scale(1.05) translateY(-5px);
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--shadow-xl);
}

.stat-card.featured-stat .stat-number {
  color: var(--secondary-color);
  text-shadow: none;
}

/* IVF Showcase */
.ivf-showcase {
  margin-bottom: 0.5rem;
}

.showcase-title {
  font-family: var(--heading-font);
  font-size: 1.4rem;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: none;
}

.ivf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.ivf-card {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-color);
  border-radius: 1rem;
  padding: 0.8rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
}

.ivf-card.featured {
  border: 2px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.05);
}

.ivf-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.ivf-card.featured:hover {
  transform: scale(1.05) translateY(-8px);
}

.ivf-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  display: block;
}

.ivf-card h4 {
  font-family: var(--heading-font);
  font-size: 1rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.ivf-card p {
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.ivf-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.feature-tag {
  background: var(--accent-color);
  color: var(--primary-color);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Success Stories Highlight */
.success-highlight {
  margin-bottom: 4rem;
}

.success-intro {
  text-align: center;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  font-style: italic;
}

.success-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.success-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1rem;
  padding: 2rem;
  border-left: 4px solid var(--accent-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.success-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.success-quote {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  position: relative;
}

.success-quote::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent-color);
  position: absolute;
  top: -1rem;
  left: -0.5rem;
  opacity: 0.3;
}

.success-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-info strong {
  color: var(--primary-color);
  font-family: var(--heading-font);
  display: block;
  margin-bottom: 0.25rem;
}

.author-info span {
  color: var(--secondary-color);
  font-size: 0.9rem;
}

.success-card.featured-success {
  border: 2px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.02);
}

.success-card.featured-success:hover {
  transform: scale(1.02) translateY(-5px);
}

.success-rating {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 1rem;
  color: #ffc107;
}

/* Testimonials Scroll Container */
.testimonials-scroll-container {
  margin: 1rem 0;
  overflow: hidden;
  padding: 0.5rem 0;
  position: relative;
}

.testimonials-scroll-track {
  display: flex;
  gap: 1.5rem;
  padding: 0 1rem;
  animation: scrollTestimonials 60s linear infinite;
  width: max-content;
}

.testimonials-scroll-track:hover {
  animation-play-state: paused;
}

.testimonials-scroll-track .testimonial-card {
  flex: 0 0 350px;
  min-width: 350px;
}

/* Continuous scrolling animation */
@keyframes scrollTestimonials {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* Bottom Call to Action Section */
.bottom-cta-section {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  padding: 4rem 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.bottom-cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 0;
}

.bottom-cta-section .container {
  position: relative;
  z-index: 1;
}

.bottom-cta {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.bottom-cta h3 {
  font-family: var(--heading-font);
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.bottom-cta p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.bottom-cta .cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bottom-cta .cta-buttons .btn {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-width: 200px;
}

.bottom-cta .cta-buttons .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.bottom-quote {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-color);
  position: relative;
  box-shadow: var(--shadow);
}

.bottom-quote blockquote {
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  position: relative;
}

.bottom-quote blockquote::before {
  content: '"';
  font-size: 4rem;
  color: var(--accent-color);
  position: absolute;
  top: -1rem;
  left: -0.5rem;
  opacity: 0.3;
}

.bottom-quote cite {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--secondary-color);
  font-style: normal;
}


/* About Section */
.about-section {
  background-color: var(--light-gray);
}

.about-content {
  max-width: 1000px;
  margin: 0 auto;
}

.about-text {
  text-align: center;
  margin-bottom: 3rem;
}

.about-text p {
  font-size: 1.2rem;
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.about-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.about-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary-color);
  transition: transform 0.3s ease;
}

.about-card:hover {
  transform: translateY(-5px);
}

.about-card h4 {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.about-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-card li {
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  padding-left: 1rem;
  position: relative;
}

.about-card li::before {
  content: "•";
  color: var(--primary-color);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.about-card li strong {
  color: var(--primary-color);
  font-weight: 600;
}

.about-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

.about-text p + p {
  margin-top: 1rem;
}

.about-info h3 {
  font-family: var(--heading-font);
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.info-list {
  list-style: none;
  margin-bottom: 1rem;
}

.info-list li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.info-list strong {
  color: var(--secondary-color);
  font-weight: 600;
}

/* Services Section */
.services-section {
  background-color: #FEFEFE;
}

.services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.8rem;
}

.service-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 0.8rem 0.6rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
  border: 1px solid rgba(139, 21, 56, 0.05);
  backdrop-filter: blur(10px);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-12px) rotateX(5deg) rotateY(5deg);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 30px rgba(236, 72, 153, 0.2);
  border-color: var(--secondary-color);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-wrapper {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-placeholder {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--primary-color);
  background-color: var(--accent-color);
  box-shadow: var(--shadow);
}

.service-card h3 {
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.service-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
  font-weight: 400;
}

/* Locations Section */
.locations-section {
  background-color: var(--light-gray);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.location-card {
  background-color: var(--bg-color);
  padding: 1.5rem;
  border-left: 4px solid var(--secondary-color);
  box-shadow: var(--shadow);
  border-radius: 0.25rem;
}

.location-card h3 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.location-card p {
  font-size: 0.95rem;
  color: var(--text-color);
  line-height: 1.4;
}

/* Contact Section */
.contact-section {
  background-color: var(--bg-color);
}

.contact-container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.contact-intro {
  margin-bottom: 2rem;
  color: var(--text-color);
}

.contact-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.form-group {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
}

.form-full {
  flex-basis: 100%;
}

.form-group label {
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--primary-color);
}

.form-group input,
.form-group textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(24, 154, 180, 0.3);
}

.contact-form .btn {
  margin-top: 1rem;
}

/* Footer */
.footer {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 3rem 0 1rem;
  margin-top: auto;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer h3 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.footer p,
.footer a {
  font-size: 0.9rem;
  color: #f5f5f5;
  line-height: 1.5;
  text-decoration: none;
}

.footer a:hover,
.footer a:focus {
  text-decoration: underline;
}

.footer-nav ul {
  list-style: none;
}

.footer-nav li + li {
  margin-top: 0.5rem;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: #e0e0e0;
}

/* Success Stories Section */
.testimonials-section {
  background-color: var(--light-gray);
}

.testimonials-intro {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 2rem;
  font-style: italic;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  border: 1px solid rgba(139, 21, 56, 0.1);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  backdrop-filter: blur(10px);
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--secondary-color);
}

.testimonial-card.featured-testimonial {
  border: 2px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.02);
}

.testimonial-card.featured-testimonial:hover {
  transform: scale(1.02) translateY(-5px);
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--text-color);
  line-height: 1.6;
  position: relative;
}

.testimonial-text::before {
  content: '"';
  font-size: 3rem;
  color: var(--accent-color);
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  opacity: 0.3;
}

.testimonial-author {
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.testimonial-rating {
  text-align: center;
  font-size: 1.2rem;
  color: #ffc107;
}

/* Resources Section */
.resources-section {
  background-color: var(--bg-color);
}

/* Video Gallery Section */
.video-section {
  background-color: var(--light-gray);
}

.video-description {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--text-color);
  font-size: 1.1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.video-card {
  background-color: var(--bg-color);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.video-thumbnail iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.75rem 0.75rem 0 0;
}

.video-info {
  padding: 1.5rem;
  background-color: var(--bg-color);
}

.video-info h3 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.video-info p {
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Video container for single video (legacy support) */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-container iframe {
  width: 100%;
  height: 450px;
  border: none;
  border-radius: 0.5rem;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.resource-card {
  background-color: var(--light-gray);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.resource-image img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.resource-card h3 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  margin: 1rem;
  color: var(--primary-color);
}

.resource-card p {
  margin: 0 1rem 1rem;
  color: var(--text-color);
  flex-grow: 1;
}

.read-more {
  margin: 0 1rem 1.5rem;
  color: var(--secondary-color);
  font-weight: 600;
  text-decoration: none;
}

.read-more:hover,
.read-more:focus {
  text-decoration: underline;
}

/* FAQ Section */
.faq-section {
  background-color: var(--bg-color);
}

.faq-item + .faq-item {
  margin-top: 1.5rem;
}

.faq-question {
  width: 100%;
  background-color: var(--light-gray);
  border: none;
  padding: 1rem;
  text-align: left;
  font-family: var(--heading-font);
  font-size: 1rem;
  color: var(--primary-color);
  cursor: pointer;
  border-radius: 0.25rem;
  box-shadow: var(--shadow);
  transition: background-color 0.3s ease;
}

.faq-question:hover,
.faq-question:focus {
  background-color: var(--accent-color);
  color: var(--bg-color);
}

.faq-answer {
  background-color: var(--light-gray);
  padding: 1rem;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  color: var(--text-color);
  box-shadow: var(--shadow);
}

/* Language selector */
.language-select {
  margin-right: 1rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--primary-color);
  border-radius: 0.25rem;
  background: var(--bg-color);
  color: var(--primary-color);
  font-family: var(--heading-font);
  font-size: 0.9rem;
  cursor: pointer;
}

.language-select option {
  color: var(--text-color);
}

/* Chat widget */
.chat-widget {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
}

.chat-toggle {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.chat-box {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 300px;
  max-height: 380px;
  background-color: var(--bg-color);
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 0.75rem;
  background-color: var(--primary-color);
  color: #fff;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  font-family: var(--heading-font);
}

.chat-messages {
  flex-grow: 1;
  padding: 0.75rem;
  overflow-y: auto;
  color: var(--text-color);
}

.chat-form {
  display: flex;
  border-top: 1px solid var(--light-gray);
}

.chat-input {
  flex-grow: 1;
  padding: 0.5rem;
  border: none;
  border-right: 1px solid var(--light-gray);
  font-family: inherit;
  font-size: 0.9rem;
}

.chat-send {
  padding: 0.5rem 1rem;
  border: none;
  background-color: var(--secondary-color);
  color: #fff;
  cursor: pointer;
}

.chat-send:hover,
.chat-send:focus {
  background-color: var(--primary-color);
}

/* Chat message bubbles */
.chat-message {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.chat-message-user {
  text-align: right;
  color: var(--primary-color);
}

.chat-message-bot {
  text-align: left;
  color: var(--secondary-color);
}

/* Responsive styling */
@media (max-width: 768px) {
  .hero {
    /* Disable parallax on small screens for performance */
    background-attachment: scroll;
  }
  /* Collapse navigation into hamburger */
  .navigation {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--bg-color);
    box-shadow: var(--shadow);
    width: 200px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .navigation.open {
    transform: translateX(0);
  }

  .nav-list {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }

  .nav-toggle {
    display: flex;
  }

  /* Hide horizontal nav links */
  .nav-list a {
    padding: 0.5rem 0;
  }

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


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

  .video-container iframe {
    height: 250px;
  }

  /* Video gallery responsive */
  .video-gallery {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .video-thumbnail {
    height: 180px;
  }

  .video-info {
    padding: 1rem;
  }

  .video-info h3 {
    font-size: 1.1rem;
  }

  /* Highlights section responsive */
  .highlights-section .section-title {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .ivf-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ivf-card.featured {
    transform: none;
  }

  .ivf-card.featured:hover {
    transform: translateY(-8px);
  }

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

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Bottom section responsive */
  .bottom-cta h3 {
    font-size: 2rem;
  }

  .bottom-cta p {
    font-size: 1.1rem;
  }

  .bottom-cta .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .bottom-cta .cta-buttons .btn {
    width: 100%;
    max-width: 300px;
  }

  .bottom-quote {
    padding: 2rem 1.5rem;
  }

  .bottom-quote blockquote {
    font-size: 1.2rem;
  }

  .bottom-quote cite {
    font-size: 1rem;
  }

  /* Testimonials scroll responsive */
  .testimonials-scroll-track .testimonial-card {
    flex: 0 0 300px;
    min-width: 300px;
  }
}


/* Sticky Book Consultation Button */
.sticky-consultation-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: none;
}

.sticky-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 8px 25px rgba(139, 21, 56, 0.3);
  transition: var(--transition);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  min-width: 200px;
  justify-content: center;
}

.sticky-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(139, 21, 56, 0.4);
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.sticky-btn:active {
  transform: translateY(-1px) scale(1.02);
}

.sticky-btn-icon {
  font-size: 1.2rem;
  animation: pulse 2s ease-in-out infinite;
}

.sticky-btn-text {
  font-family: var(--heading-font);
  letter-spacing: 0.025em;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Show sticky button only on mobile */
@media (max-width: 768px) {
  .sticky-consultation-btn {
    display: block;
    bottom: 1rem;
    right: 1rem;
    z-index: 999;
  }
  
  .sticky-btn {
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 25px;
  }
  
  /* Add bottom padding to body to prevent content from being hidden behind sticky button */
  body {
    padding-bottom: 100px;
  }
  
  
  
  /* Services grid responsive - 2 columns on mobile */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Large tablets - 4 columns */
@media (max-width: 1200px) and (min-width: 1025px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem;
  }
}

/* Medium tablets - 3 columns */
@media (max-width: 1024px) and (min-width: 769px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem;
  }
}

/* Hide sticky button on larger screens */
@media (min-width: 769px) {
  .sticky-consultation-btn {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Animation keyframes

   These keyframes drive the continuous animations used throughout
   the site. `globalGradient` animates the body background overlay
   gradient, slowly cycling through the colours defined in the
   palette. `heroSlide` animates the IVF illustration within the
   hero section, producing a gentle horizontal drift. Both
   animations run infinitely and are intentionally slow to avoid
   distracting visitors.
*/

@keyframes globalGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes heroSlide {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes bodySlide {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ------------------------------------------------------------------
   Floating bubbles animation

   To enhance the modern feel of the landing section, subtle translucent
   circles float upward across the hero. These bubbles are drawn with
   radial gradients and vary in size, speed and horizontal position.
   They sit behind the hero content but above the background. */
.floating-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.floating-bubbles span {
  position: absolute;
  bottom: -10%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  filter: blur(2px);
  animation: bubbleMove 20s linear infinite;
}

/* Each bubble has its own size, position and animation duration */
.floating-bubbles span:nth-child(1) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-duration: 18s;
  animation-delay: 0s;
}
.floating-bubbles span:nth-child(2) {
  left: 25%;
  width: 30px;
  height: 30px;
  animation-duration: 22s;
  animation-delay: -5s;
}
.floating-bubbles span:nth-child(3) {
  left: 40%;
  width: 25px;
  height: 25px;
  animation-duration: 24s;
  animation-delay: -10s;
}
.floating-bubbles span:nth-child(4) {
  left: 55%;
  width: 35px;
  height: 35px;
  animation-duration: 28s;
  animation-delay: -15s;
}
.floating-bubbles span:nth-child(5) {
  left: 70%;
  width: 15px;
  height: 15px;
  animation-duration: 26s;
  animation-delay: -8s;
}
.floating-bubbles span:nth-child(6) {
  left: 85%;
  width: 22px;
  height: 22px;
  animation-duration: 20s;
  animation-delay: -12s;
}
.floating-bubbles span:nth-child(7) {
  left: 95%;
  width: 28px;
  height: 28px;
  animation-duration: 25s;
  animation-delay: -3s;
}
.floating-bubbles span:nth-child(8) {
  left: 5%;
  width: 18px;
  height: 18px;
  animation-duration: 23s;
  animation-delay: -18s;
}
.floating-bubbles span:nth-child(9) {
  left: 32%;
  width: 32px;
  height: 32px;
  animation-duration: 27s;
  animation-delay: -9s;
}
.floating-bubbles span:nth-child(10) {
  left: 60%;
  width: 24px;
  height: 24px;
  animation-duration: 30s;
  animation-delay: -20s;
}

@keyframes bubbleMove {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-120%) scale(1.5);
    opacity: 0;
  }
}

/* ========================================
   MODERN LANDING PAGE STYLES
   ======================================== */

/* Modern Hero Section */
.hero-title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #1E3A8A;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-tagline {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  color: #4A5568;
  margin-bottom: 3rem;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #25D366;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-icon {
  font-size: 1.5rem;
}

/* Doctor Image Card Container */
.doctor-card-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.doctor-image-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 480px;
  background: white;
  border-radius: 25px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 20;
}

.doctor-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.doctor-image-card:hover .doctor-image {
  transform: scale(1.05);
}

.success-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  backdrop-filter: blur(10px);
  padding: 1rem 1.5rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
}

.success-text {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.success-number {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
}

.doctor-info {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.doctor-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.doctor-expertise {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Meet Doctor Section */
.meet-doctor-section {
  padding: 1rem 0;
  background: #FEFEFE;
}

.doctor-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: center;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(139, 21, 56, 0.1);
}

.doctor-image {
  position: relative;
}

.doctor-image .success-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.doctor-image .success-text {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}

.doctor-image .success-number {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
}

.doctor-portrait {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.doctor-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.doctor-credentials {
  font-size: 1.2rem;
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.doctor-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.doctor-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.badge {
  background: var(--gradient-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}

/* Treatments Section */
.treatments-section {
  padding: 6rem 0;
  background: #F8F9FA;
}

.treatments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.treatment-card {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(139, 21, 56, 0.1);
  transition: all 0.3s ease;
}

.treatment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.treatment-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

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

.treatment-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.treatment-description {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Testimonials Preview Section */
.testimonials-preview-section {
  padding: 6rem 0;
  background: #FEFEFE;
}

.testimonials-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 3rem 0;
}

.testimonial-preview-card {
  background: white;
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(139, 21, 56, 0.1);
  transition: all 0.3s ease;
}

.testimonial-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.testimonial-quote {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-rating {
  font-size: 1.2rem;
}

.testimonials-cta {
  text-align: center;
  margin-top: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .hero {
    padding: 2rem 0 4rem;
    min-height: 70vh;
  }
  
  .doctor-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem;
  }
  
  .treatments-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .testimonials-preview-grid {
    grid-template-columns: 1fr;
  }
  
  .baby-image {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .treatments-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-whatsapp {
    margin-top: 1rem;
  }
}

/* Success badges container */
.success-badges-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}

/* Success stories card */
.success-badge-card {
  background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
  padding: 1rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.success-badge-card .success-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin: 0;
}

.success-badge-card .success-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

/* Experience card */
.experience-badge-card {
  background: linear-gradient(135deg, #A78BFA 0%, #C084FC 100%);
  padding: 1rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(167, 139, 250, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.experience-badge-card .experience-text {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin: 0;
}