/* ===========
   Base Styles
   =========== */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     scroll-behavior: smooth;
   }
   
   body {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     background-color: #fdfbf8;
     color: #332b24;
     line-height: 1.6;
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   .container {
     width: 100%;
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 1.5rem;
   }
   
   .section {
     padding: 2rem 0;
   }
   
   .section-header {
     text-align: center;
     margin-bottom: 2.5rem;
   }
   
   .section-header h2 {
     font-size: 2rem;
     margin-bottom: 0.75rem;
   }
   
   .section-header p {
     max-width: 540px;
     margin: 0 auto;
     color: #6a5f55;
   }
   
   /* ===========
      Color System (non-blue, medical)
      =========== */
   :root {
     --primary: #e16c3a; /* warm terracotta */
     --primary-soft: #fbe1d4;
     --accent: #56a36c; /* soft green */
     --accent-soft: #d9f0e1;
     --bg-light: #fdfbf8;
     --bg-elevated: #ffffff;
     --border-subtle: #e4d9cf;
     --text-main: #332b24;
     --text-muted: #7a6d63;
     --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
   
   }
   
   /* ===========
      Buttons
      =========== */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.75rem 1.7rem;
     border-radius: 999px;
     border: 1px solid transparent;
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
     transition: all 0.2s ease;
     white-space: nowrap;
   }
   
   .btn-primary {
     background: linear-gradient(135deg, var(--primary), #f08a4e);
     color: #fff;
     box-shadow: 0 10px 18px rgba(225, 108, 58, 0.45);
   }
   
   .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 14px 26px rgba(225, 108, 58, 0.55);
   }
   
   .btn-outline {
     background-color: transparent;
     color: var(--primary);
     border-color: var(--primary-soft);
     background-image: linear-gradient(135deg, rgba(225, 108, 58, 0.08), rgba(225, 108, 58, 0.02));
   }
   
   .btn-outline:hover {
     border-color: var(--primary);
     color: #fff;
     background-image: linear-gradient(135deg, var(--primary), #f08a4e);
   }
   
   /* ===========
      Navbar
      =========== */
   .navbar {
     position: sticky;
     top: 0;
     z-index: 50;
     background-color: rgba(253, 251, 248, 0.96);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(228, 217, 207, 0.9);
   }
   
   .nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.8rem 1.5rem;
   }
   
   .logo {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
     font-weight: 700;
     color: var(--primary);
   }
   
   .logo-icon {
     width: 32px;
     height: 32px;
     border-radius: 10px;
     background: radial-gradient(circle at 30% 20%, #ffe9de, var(--primary));
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
   }
   
   .logo-text {
     color: #4b3f36;
     font-size: 1.1rem;
     display: block;
   }
   
   .logo-qualification {
     color: var(--text-muted);
     font-size: 0.75rem;
     font-weight: 500;
     display: block;
     margin-top: 0.2rem;
   }
   
   .nav-links {
     display: flex;
     align-items: center;
     gap: 1.7rem;
     font-size: 0.95rem;
   }
   
   .nav-links a {
     position: relative;
     color: #574b41;
     padding-bottom: 0.2rem;
     font-weight: 600;
     text-decoration: bold;
   }
   
   .nav-links a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     transition: width 0.2s ease;
   }
   
   .nav-links a:hover::after {
     width: 100%;
   }
   
   .nav-cta {
     margin-left: 1.5rem;
   }
   
   .nav-toggle {
     display: none;
     width: 38px;
     height: 34px;
     border-radius: 10px;
     border: none;
     background-color: #fff;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 4px;
     padding: 4px 0;
     cursor: pointer;
   }
   
   .nav-toggle span {
     width: 60%;
     height: 2px;
     background-color: #6a5f55;
     border-radius: 2px;
     transition: transform 0.2s ease, opacity 0.2s ease;
   }
   
   .nav-toggle.active span:nth-child(1) {
     transform: translateY(4px) rotate(45deg);
   }
   .nav-toggle.active span:nth-child(2) {
     opacity: 0;
   }
   .nav-toggle.active span:nth-child(3) {
     transform: translateY(-4px) rotate(-45deg);
   }
   
   /* ===========
      Animations
      =========== */
   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(30px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes fadeIn {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
   
   @keyframes slideInLeft {
     from {
       opacity: 0;
       transform: translateX(-30px);
     }
     to {
       opacity: 1;
       transform: translateX(0);
     }
   }
   
   @keyframes slideInRight {
     from {
       opacity: 0;
       transform: translateX(30px);
     }
     to {
       opacity: 1;
       transform: translateX(0);
     }
   }
   
   @keyframes scaleIn {
     from {
       opacity: 0;
       transform: scale(0.9);
     }
     to {
       opacity: 1;
       transform: scale(1);
     }
   }
   
   .fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards;
   }
   
   .fade-in {
     animation: fadeIn 1s ease-out forwards;
   }
   
   .slide-in-left {
     animation: slideInLeft 0.8s ease-out forwards;
   }
   
   .slide-in-right {
     animation: slideInRight 0.8s ease-out forwards;
   }
   
   .scale-in {
     animation: scaleIn 0.6s ease-out forwards;
   }
   
   /* Scroll Animation Classes */
   .scroll-animate {
     opacity: 0;
     transform: translateY(50px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   }
   
   .scroll-animate.animated {
     opacity: 1;
     transform: translateY(0);
   }
   
   .service-card.scroll-animate {
     transition-delay: 0s;
   }
   
   .service-card.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
   .service-card.scroll-animate:nth-child(2) { transition-delay: 0.15s; }
   .service-card.scroll-animate:nth-child(3) { transition-delay: 0.2s; }
   .service-card.scroll-animate:nth-child(4) { transition-delay: 0.25s; }
   .service-card.scroll-animate:nth-child(5) { transition-delay: 0.3s; }
   .service-card.scroll-animate:nth-child(6) { transition-delay: 0.35s; }
   .service-card.scroll-animate:nth-child(7) { transition-delay: 0.4s; }
   .service-card.scroll-animate:nth-child(8) { transition-delay: 0.45s; }
   
   .scroll-animate-left {
     opacity: 0;
     transform: translateX(-50px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   }
   
   .scroll-animate-left.animated {
     opacity: 1;
     transform: translateX(0);
   }
   
   .scroll-animate-right {
     opacity: 0;
     transform: translateX(50px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
   }
   
   .scroll-animate-right.animated {
     opacity: 1;
     transform: translateX(0);
   }
   
   /* ===========
      Hero Carousel
      =========== */
   .hero-carousel {
     position: relative;
     overflow: hidden;
   }
   
   .carousel {
     position: relative;
   }
   
   .carousel-track {
     position: relative;
   }
   
   .carousel-slide {
     position: relative;
     min-height: 420px;
     max-height: 520px;
     display: none;
   }
   
   .carousel-slide.active {
     display: block;
   }
   
   .carousel-media {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     filter: saturate(110%);
     animation: fadeIn 1.2s ease-out;
   }
   
   .bg-img-1 {
     background-image: linear-gradient(135deg, rgba(217, 205, 189, 0.7), rgba(248, 237, 227, 0.9)),
       url("images/banner-img.png");
   }
   
   .bg-img-2 {
     background-image: linear-gradient(135deg, rgba(190, 210, 198, 0.7), rgba(249, 236, 221, 0.9)),
       url("https://images.pexels.com/photos/8460094/pexels-photo-8460094.jpeg?auto=compress&cs=tinysrgb&w=1600");
   }
   
   .bg-img-3 {
     background-image: linear-gradient(135deg, rgba(217, 205, 189, 0.7), rgba(248, 237, 227, 0.9)),
       url("https://images.pexels.com/photos/7578800/pexels-photo-7578800.jpeg?auto=compress&cs=tinysrgb&w=1600");
   }
   
   .carousel-content {
     position: relative;
     z-index: 2;
     padding: 4rem 1.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     max-width: 720px;
   }
   
   .carousel-slide.active .carousel-content h1 {
     font-size: clamp(2.1rem, 4vw, 2.7rem);
     margin-bottom: 0.8rem;
     color: #2b241e;
     animation: fadeInUp 0.8s ease-out 0.2s both;
   }
   
   .carousel-content h1 {
     font-size: clamp(2.1rem, 4vw, 2.7rem);
     margin-bottom: 0.8rem;
     color: #2b241e;
     opacity: 0;
   }
   
   .carousel-slide.active .carousel-content p {
     font-size: 1rem;
     max-width: 520px;
     color: #564b43;
     margin-bottom: 1.5rem;
     animation: fadeInUp 0.8s ease-out 0.4s both;
   }
   
   .carousel-content p {
     font-size: 1rem;
     max-width: 520px;
     color: #564b43;
     margin-bottom: 1.5rem;
     opacity: 0;
   }
   
   .carousel-slide.active .carousel-actions {
     animation: fadeInUp 0.8s ease-out 0.6s both;
   }
   
   .carousel-actions {
     display: flex;
     gap: 0.8rem;
     flex-wrap: wrap;
     opacity: 0;
   }
   
   .carousel-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: rgba(255, 255, 255, 0.92);
     border: none;
     border-radius: 999px;
     width: 38px;
     height: 38px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
     color: #5c5148;
     font-size: 1.1rem;
   }
   
   .carousel-arrow.prev {
     left: 1rem;
   }
   
   .carousel-arrow.next {
     right: 1rem;
   }
   
   .carousel-dots {
     position: absolute;
     bottom: 1.4rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.6rem;
   }
   
   .carousel-dots button {
     width: 9px;
     height: 9px;
     border-radius: 999px;
     border: none;
     background-color: rgba(255, 255, 255, 0.6);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .carousel-dots button.active {
     width: 22px;
     background: linear-gradient(90deg, var(--primary), var(--accent));
     display: none;
   }
   
   /* ===========
      About Section
      =========== */
   .about {
     background: radial-gradient(circle at top left, #fbe1d4, transparent 60%),
       radial-gradient(circle at bottom right, #d9f0e1, transparent 60%);
   }
   
   .about-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
     gap: 2.8rem;
     align-items: center;
   }
   
   .about-image {
     aspect-ratio: 1.2 / 1;
     overflow: hidden;
     background-color: #f6f2ed;
     padding: 0.5rem;
     border-radius: 0;
   }
   
   .about-image img {
     border-radius: 0;
     box-shadow: var(--shadow-soft);
     object-fit: cover;
     width: 100%;
     height: 100%;
   }
   
   .about-content h2 {
     font-size: 2rem;
     /* margin-bottom: 1rem;/ */
   }
   
   .about-content h2 .doctor-name {
     font-size: 1.2rem;
     color: var(--primary);
     font-weight: 600;
   }
   
   .about-content p {
     margin-bottom: 0.75rem;
     color: var(--text-muted);
   }
   
   .about-content .doctor-title {
     font-size: 0.7rem;
     font-weight: 700;
   }
   
   .about-list {
     list-style: none;
     margin-top: 1rem;
     margin-bottom: 1rem;
     display: flex;
     flex-direction: column;
     gap: 0.1rem;
     padding-left: 0;
   }
   
   .about-list li {
     padding-left: 0;
     position: relative;
     margin-bottom: 0;
     color: #4b4038;
     font-weight: 700;
     font-size: 0.95rem;
   }
   
   .about-list li::before {
     display: none;
   }
   
   /* ===========
      Services
      =========== */
   .services {
     background: #faf8f5;
     position: relative;
     overflow: hidden;
   }
   
   .services::before {
     content: "";
     position: absolute;
     top: -50%;
     right: -10%;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(225, 108, 58, 0.06), transparent 70%);
     border-radius: 50%;
     pointer-events: none;
   }
   
   .services::after {
     content: "";
     position: absolute;
     bottom: -30%;
     left: -5%;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(86, 163, 108, 0.05), transparent 70%);
     border-radius: 50%;
     pointer-events: none;
   }
   
   .services-layout {
     display: grid;
     grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
     gap: 2.5rem;
     align-items: start;
   }
   
   .services-intro {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
   
   .section-header-left {
     text-align: left;
     margin-bottom: 0.75rem;
   }
   
   .section-header-left p {
     margin-left: 0;
   }
   
   .services-subtext {
     font-size: 0.96rem;
     color: var(--text-muted);
   }
   
   .services-list {
     list-style: disc;
     padding-left: 1.5rem;
     margin-bottom: 1rem;
     color: #4b4038;
   }
   
   .services-list li + li {
     margin-top: 0.25rem;
   }
   
   .services-image img {
     margin-top: 0.75rem;
     border-radius: 22px;
     box-shadow: var(--shadow-soft);
     object-fit: cover;
   }
   
   .services-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.5rem;
     padding: 1rem 0;
     position: relative;
     z-index: 1;
   }
  
  .services-center-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
  }
   
   .service-card {
     background: #ffffff;
     border-radius: 16px;
     padding: 2rem 1.5rem;
     border: none;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06),
                 0 1px 3px rgba(0, 0, 0, 0.04);
     transition: all 0.35s ease;
     position: relative;
     overflow: hidden;
     border-left: 4px solid transparent;
   }
   
   .service-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: linear-gradient(180deg, var(--primary), var(--text-main));
     transform: scaleY(0);
     transform-origin: top;
     transition: transform 0.35s ease;
   }
   
   .service-card::after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, rgba(225, 108, 58, 0.05), transparent 70%);
     border-radius: 50%;
     transform: translate(30px, -30px);
     opacity: 0;
     transition: opacity 0.35s ease;
   }
   
   .service-card:hover::before {
     transform: scaleY(1);
   }
   
   .service-card:hover::after {
     opacity: 1;
   }
   
   .service-header {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 1rem;
     text-align: left;
     position: relative;
     z-index: 1;
   }
   
   .service-icon {
     width: 64px;
     height: 64px;
     border-radius: 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #fbe1d4 0%, #ffe9de 100%);
     padding: 0.75rem;
     box-shadow: 0 4px 12px rgba(225, 108, 58, 0.12);
     transition: all 0.35s ease;
     object-fit: contain;
     position: relative;
   }
   
   .service-icon::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--primary), var(--accent));
     opacity: 0;
     transition: opacity 0.35s ease;
   }
   
   .service-card:hover .service-icon::before {
     opacity: 0.1;
   }
   
   .service-card:hover .service-icon {
     transform: translateY(-4px);
     box-shadow: 0 8px 20px rgba(225, 108, 58, 0.2);
   }
   
   .service-card h3 {
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 0;
     color: var(--text-main);
     line-height: 1.5;
     transition: color 0.35s ease;
     letter-spacing: -0.02em;
   }
   
   .service-card p {
     font-size: 0.93rem;
     color: var(--text-muted);
   }
   
   .service-more {
     margin-top: 0.75rem;
     padding-top: 0.75rem;
     border-top: 1px dashed rgba(228, 217, 207, 0.9);
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     transition: max-height 0.25s ease, opacity 0.25s ease;
   }
   
   .service-more a {
     display: inline-block;
     margin-top: 0.4rem;
     font-weight: 600;
     font-size: 0.9rem;
     color: var(--primary);
   }
   
   .service-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
                 0 4px 12px rgba(225, 108, 58, 0.15);
     background: #ffffff;
   }
   
   .service-card:hover h3 {
     color: var(--primary);
   }
   
   .service-card:hover .service-more {
     max-height: 200px;
     opacity: 1;
   }
   
   /* ===========
      Testimonials
      =========== */
   .testimonials {
     background-color: #f6f2ed;
   }
   
   .testimonial-card {
     max-width: 100%;
     background-color: var(--bg-elevated);
     padding: 2rem 2.2rem;
     border-radius: 20px;
     border: 1px solid var(--border-subtle);
     box-shadow: 8px 8px 0 0 rgba(225, 108, 58, 0.15),
                 0 10px 24px rgba(0, 0, 0, 0.06);
     text-align: center;
     transition: all 0.3s ease;
     position: relative;
   }
   
   .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.5rem;
   }
   
   .testimonial-avatar {
     width: 72px;
     height: 72px;
     margin: 0 auto 0.8rem;
   }
   
   .testimonial-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 999px;
     border: 3px solid var(--accent-soft);
   }
   
   .testimonial-text {
     font-size: 0.98rem;
     color: #4c423a;
     margin-bottom: 0.9rem;
     transition: color 0.3s ease;
   }
   
   .testimonial-name {
     font-weight: 600;
     transition: color 0.3s ease;
   }
   
   .testimonial-stars {
     margin: 0.2rem 0 0.6rem;
     color: #f1a545;
     letter-spacing: 1px;
   }
   
   .testimonial-role {
     font-size: 0.85rem;
     color: var(--text-muted);
     transition: color 0.3s ease;
   }
   
   .testimonial-card:hover {
     transform: translateY(-4px);
     box-shadow: 8px 8px 0 0 rgba(225, 108, 58, 0.7),
                 0 18px 36px rgba(225, 108, 58, 0.25);
   }
   
   /* remove old carousel controls in testimonials (no longer used) */
   
   /* ===========
      CTA
      =========== */
   .cta {
     background: linear-gradient(135deg, #fbe1d4, #d9f0e1);
   }
   
   .cta-inner {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 2.2rem;
   }
   
   .cta-content h2 {
     font-size: 2rem;
     margin-bottom: 0.6rem;
   }
   
   .cta-content p {
     color: #5a4e45;
   }
   
   .cta-content .cta-strong {
     font-weight: 700;
   }
   
   .cta-actions {
     display: flex;
     gap: 0.7rem;
     flex-wrap: wrap;
   }
   
   /* ===========
      Footer
      =========== */
   .footer {
     background-color: #2a231d;
     color: #f2e9e0;
     padding-top: 3rem;
   }
   
   .footer-grid {
     display: grid;
     grid-template-columns: 1.2fr 1.4fr 1.4fr;
     gap: 1.8rem;
     padding-bottom: 2.2rem;
     border-bottom: 1px solid rgba(248, 236, 221, 0.08);
   }
   
   .footer .logo-text {
     color: #f7ede4;
   }
   
   .footer p {
     font-size: 0.9rem;
     color: #d6c9bc;
   }
   
   .footer-links h4,
   .footer-contact h4,
   .footer-address h4,
   .footer-map h4 {
     font-size: 0.98rem;
     margin-bottom: 0.7rem;
   }
   
   .footer-links a {
     display: block;
     font-size: 0.9rem;
     color: #e8dbce;
     margin-bottom: 0.3rem;
   }
   
   .footer-links a:hover {
     color: var(--primary-soft);
   }
  
  .footer-address a {
    color: #e8dbce;
    text-decoration: none;
  }
  
  .footer-address a:hover {
    color: #e8dbce;
  }
  
  .footer-address p + p {
    margin-top: 0.5rem;
  }
   
   .footer-contact p + p {
     margin-top: 0.2rem;
   }
   
   .map-embed iframe {
     max-width: 100%;
     border-radius: 12px;
   }
   
   .footer-social {
     margin-top: 0.6rem;
     display: flex;
     gap: 0.6rem;
   }
   
   .footer-social a {
     font-size: 0.8rem;
     padding: 0.3rem 0.6rem;
     border-radius: 999px;
     border: 1px solid rgba(246, 231, 214, 0.3);
   }
   
   .footer-bottom {
     text-align: center;
     padding: 0.9rem 1.5rem 1.6rem;
     font-size: 0.82rem;
     color: #bbaa9a;
   }
   
   /* ===========
      Responsive
      =========== */
   @media (max-width: 960px) {
     .services-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   
     .testimonial-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   
     .footer-grid {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
   
   @media (max-width: 768px) {
     .nav-links {
       position: absolute;
       inset: 100% 1rem auto 1rem;
       background-color: #ffffff;
       border-radius: 16px;
       padding: 0.9rem 1.1rem 1rem;
       box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
       flex-direction: column;
       align-items: flex-start;
       gap: 0.9rem;
       transform-origin: top center;
       transform: scaleY(0.7);
       opacity: 0;
       pointer-events: none;
       transition: transform 0.2s ease, opacity 0.2s ease;
     }
   
     .nav-links.open {
       transform: scaleY(1);
       opacity: 1;
       pointer-events: auto;
     }
   
     .nav-cta {
       display: none;
     }
   
     .nav-toggle {
       display: inline-flex;
     }
   
     .carousel-content {
       padding: 3.4rem 1.5rem 3.1rem;
     }
   
     .carousel-content p {
       max-width: 90%;
     }
   
     .about-grid {
       grid-template-columns: minmax(0, 1fr);
     }
   
     .about-image {
       order: -1;
     }
   
     .cta-inner {
       flex-direction: column;
       align-items: flex-start;
     }
   
     .footer-grid {
       grid-template-columns: minmax(0, 1fr);
     }
   
     .carousel-arrow {
       width: 34px;
       height: 34px;
     }
   }
   
   @media (max-width: 576px) {
     .section {
       padding: 3.2rem 0;
     }
   
     .carousel-slide {
       min-height: 420px;
     }
   
     .carousel-actions {
       flex-direction: column;
       align-items: flex-start;
     }
   
     .services-grid {
       grid-template-columns: minmax(0, 1fr);
     }
    
    .services-center-row {
      flex-direction: column;
      align-items: center;
    }
   
     .testimonial-grid {
       grid-template-columns: minmax(0, 1fr);
     }
   
     .testimonial-card {
       padding: 1.7rem 1.4rem;
     }
   
     .nav-container {
       padding-inline: 1rem;
     }
   }
  
  /* ===========
     Floating Action Buttons
     =========== */
  .floating-buttons {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 1000;
  }
  
  .floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
    color: #ffffff;
  }
  
  .floating-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  .floating-btn:active {
    transform: translateY(0);
  }
  
  .whatsapp-btn {
    background-color: #25D366;
  }
  
  .whatsapp-btn:hover {
    background-color: #20BA5A;
  }
  
  .call-btn {
    background-color: var(--primary);
  }
  
  .call-btn:hover {
    background-color: #d15a2e;
  }
  
  @media (max-width: 768px) {
    .floating-buttons {
      bottom: 1.5rem;
      right: 1.5rem;
    }
    
    .floating-btn {
      width: 50px;
      height: 50px;
    }
    
    .floating-btn svg {
      width: 20px;
      height: 20px;
    }
  }