:root {
            --green: #176b48;
            --deep: #123e30;
            --red: #c72b39;
            --cream: #f7f9f5;
            --ink: #20342b;
            --muted: #68776e
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

              body {
            margin: 0;
            font-family: 'DM Sans', sans-serif;
            color: var(--ink);
            background: white
        }

        h1,
        h2,
        h3 {
            font-family: 'Playfair Display', serif
        }


        a {
            text-decoration: none;
            color: inherit
        }

        button,
        input,
        textarea {
            font: inherit
        }

        button {
            cursor: pointer
        }

        .container {
            max-width: 1200px;
            padding: 0 24px;
            margin: auto
        }

        .top {
            background: var(--deep);
            color: #e8f3eb;
            padding: 10px 0;
            font-size: 12px;
            letter-spacing: .1em;
            text-align: center
        }

        .header {
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 30;
            box-shadow: 0 5px 24px #183d2912
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            min-height: 91px
        }

        .logo {
            width: 238px;
            max-width: 45vw;
            height: auto
        }

        .links {
            display: flex;
            align-items: center;
            gap: 26px;
            font-size: 14px;
            font-weight: 700
        }

        .links a:hover,
        .drop:hover>button {
            color: var(--red)
        }

        .drop {
            position: relative
        }

        .drop>button {
            border: 0;
            background: none;
            font-weight: 700;
            color: inherit
        }

        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: -20px;
            width: 250px;
            background: #fff;
            padding: 12px;
            box-shadow: 0 15px 35px #0002;
            border-radius: 12px
        }

        .drop:hover .submenu,
        .drop:focus-within .submenu,
        .drop.open .submenu {
            display: grid
        }

        .submenu a {
            padding: 10px 12px;
            font-size: 13px;
            border-radius: 7px
        }

        .submenu a:hover {
            background: #f1f7f1
        }

        .btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            background: var(--red);
            color: white !important;
            border: 1px solid var(--red);
            border-radius: 5px;
            padding: 15px 23px;
            font-weight: 700;
            font-size: 13px;
            transition: .25s
        }

        .btn:hover {
            background: #a51f2c;
            transform: translateY(-2px)
        }

        .btn.light {
            background: #fff;
            color: var(--deep) !important;
            border-color: #fff
        }

        .menu {
            display: none;
            background: none;
            border: 0;
            font-size: 26px;
            color: var(--deep)
        }

        .hero {
            height: min(690px, 80vh);
            min-height: 520px;
            position: relative;
            overflow: hidden;
            background: #183f31
        }

        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1s ease;
            background-size: cover;
            background-position: center
        }

        .slide.active {
            opacity: 1
        }

        .slide:before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(10, 39, 29, .93), rgba(13, 47, 36, .7) 45%, rgba(10, 40, 28, .08))
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            height: 100%;
            display: flex;
            align-items: center
        }

        .hero-copy {
            max-width: 660px;
            color: white;
            animation: rise .7s ease
        }
    .eyebrow1 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .23em;
    text-transform: uppercase;
    color: #b2d4bd;
}
        .eyebrow {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .23em;
            text-transform: uppercase;
            color: #266253;
        }

        .hero h1 {
            font-size: clamp(42px, 5.8vw, 76px);
            line-height: 1.12;
            margin: 19px 0
        }

        .hero p {
            font-size: 17px;
            line-height: 1.8;
            color: #e1eee5;
            max-width: 540px
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 30px
        }

        .dots {
            position: absolute;
            z-index: 5;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px
        }

        .dot {
            width: 10px;
            height: 10px;
            border: 1px solid white;
            border-radius: 50%;
            background: transparent;
            padding: 0
        }

        .dot.active {
            background: #fff;
            width: 30px;
            border-radius: 12px
        }

        .section {
            padding: 100px 0
        }

        .section.soft {
            background: var(--cream)
        }

        .center {
            text-align: center
        }

        .section h2 {
            font-size: clamp(32px, 3.6vw, 44px);
            margin: 12px 0 17px;
            line-height: 1.18;
                color: #0d8040;
        }

        .intro {
            color: var(--muted);
            line-height: 1.8;
            margin: 0 auto 42px
        }

        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 70px
        }

        .about-image {
            height: 640px;
            width: 100%;
            object-fit: cover;
            border-radius: 160px 12px 12px 12px
        }

        .about p {
            color: var(--muted);
            line-height: 1.9
        }

        .features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 28px
        }

        .feature {
            padding: 18px;
            background: #f2f8f3;
            border-left: 3px solid var(--green);
            font-size: 13px;
            font-weight: 700
        }

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

        .service {
            border: 1px solid #e6ede6;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            transition: .3s
        }

        .service:hover {
            transform: translateY(-7px);
            box-shadow: 0 20px 45px #163e2619
        }

        .service img {
            width: 100%;
            height: 225px;
            object-fit: cover;
            display: block
        }

        .service-content {
            padding: 26px
        }

        .service h3 {
            font-size: 20px;
            margin: 0 0 10px;
            color: #0d8040;
        }

        .service p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7;
            min-height: 70px
        }

        .service a {
            color: var(--green);
            font-weight: 700;
            font-size: 13px
        }

        .why {
            background: var(--deep);
            color: white
        }

        .why .intro {
            color: #c5d6ca
        }

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

        .why-item {
            padding: 35px 24px;
            border: 1px solid #ffffff2c;
            border-radius: 10px
        }

        .why-item span {
            font-size: 34px;
            color: #b6dfc5
        }

        .why-item h3 {
            font-size: 23px
        }

        .why-item p {
            font-size: 14px;
            line-height: 1.7;
            color: #d1e2d6
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
        }

        .gallery img {
            width: 100%;
            height: 265px;
            object-fit: cover;
            border-radius: 9px
        }

        .cta {
            padding: 70px 0;
            background: linear-gradient(120deg, #c72b39, #a51e30);
            color: #fff;
            text-align: center
        }

        .cta h2 {
            font-size: clamp(30px, 4vw, 48px);
            margin: 10px 0
        }

        .cta p {
            color: #ffe8ea
        }

        .contact {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            gap: 65px
        }

        .contact p {
            line-height: 1.8;
            color: var(--muted)
        }

        .form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px
        }

        .form input,
        .form textarea,
        .form select {
            padding: 16px;
            border: 1px solid #d9e4dc;
            border-radius: 6px;
            background: #fff;
            width: 100%;
            outline-color: var(--green)
        }

        .form textarea,
        .form select,
        .form button {
            grid-column: 1/-1
        }

        .form textarea {
            min-height: 120px;
            resize: vertical
        }

        .note {
            font-size: 12px;
            color: var(--muted)
        }

        footer {
            background: #102e23;
            color: #d7e7dd;
            padding: 52px 0 20px
        }

        .foot {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 2fr;
            gap: 50px
        }

        footer img {
            background: #fff;
            padding: 8px;
            border-radius: 5px;
            width: 230px;
            max-width: 100%
        }

        footer a {
            display: block;
            margin: 12px 0;
            font-size: 13px
        }

        footer h3 {
            font-family: 'DM Sans';
            font-size: 16px;
            color: white
        }

        .copyright {
            border-top: 1px solid #ffffff25;
            margin-top: 35px;
            padding-top: 20px;
            font-size: 12px;
            color: #aec5b6
        }

        .reveal {
            opacity: 0;
            transform: translateY(25px);
            transition: .7s
        }

        .reveal.visible {
            opacity: 1;
            transform: none
        }

        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(25px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @media(max-width:1000px) {
            .links {
                gap: 13px
            }

            .nav>.btn {
                display: none
            }

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

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

        @media(max-width:760px) {
            .nav {
                min-height: 75px
            }

            .logo {
                width: 190px
            }

            .menu {
                display: block
            }

            .links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                flex-direction: column;
                align-items: stretch;
                padding: 22px 24px;
                gap: 0;
                max-height: 75vh;
                overflow: auto;
                box-shadow: 0 20px 20px #0001
            }

            .links.show {
                display: flex
            }

            .links>a,
            .drop>button {
                padding: 13px 0;
                display: block;
                text-align: left;
                width: 100%
            }

            .submenu {
                position: static;
                box-shadow: none;
                width: 100%;
                padding: 0 10px
            }

            .hero {
                min-height: 580px;
                height: 72vh
            }

            .slide:before {
                background: linear-gradient(90deg, #0c3025e8, #0c30258c)
            }

            .hero p {
                font-size: 15px
            }

            .section {
                padding: 70px 0
            }

            .about,
            .contact {
                grid-template-columns: 1fr;
                gap: 35px
            }

            .about-image {
                height: 350px;
                border-radius: 90px 8px 8px 8px
            }

            .services,
            .why-grid,
            .gallery {
                grid-template-columns: 1fr
            }

            .gallery img {
                height: 240px
            }

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

            .foot>div:first-child {
                grid-column: 1/-1
            }

            .form {
                grid-template-columns: 1fr
            }

            .features {
                grid-template-columns: 1fr
            }

            .service p {
                min-height: 0
            }
        }

/* Floating Round Buttons */
.floating-btn {
  position: fixed;
  bottom: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: transform 0.3s ease;
}

/* Call - Bottom Left */
.floating-call {
  left: 25px;
  background: #d92332;
}

/* WhatsApp - Bottom Right */
.floating-whatsapp {
  right: 25px;
  background: #25D366;
}

.floating-btn:hover {
  transform: scale(1.1);
  color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .floating-btn {
    width: 54px;
    height: 54px;
    bottom: 18px;
    font-size: 26px;
  }

  .floating-call {
    left: 15px;
  }

  .floating-whatsapp {
    right: 15px;
  }
}
/* Multi-category services navigation and treatment pages */
.links .mega{width:min(900px,calc(100vw - 40px));left:50%;transform:translateX(-50%);grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-height:75vh;overflow-y:auto;padding:22px;z-index:1000}
.mega-group h3{font-size:14px;color:var(--red);margin:0 0 9px}.mega-group a{display:block;padding:7px 9px;line-height:1.4;font-weight:500}
.treatment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.treatment-card{background:#fff;border-radius:15px;padding:25px;box-shadow:0 6px 22px #0000000c}.treatment-card h3{font-size:17px;margin:0 0 14px; color: #0d8040;}.treatment-card a{display:block;padding:8px 0;color:#245b4b;text-decoration:none}.treatment-card a:hover{text-decoration:underline}
.inner-hero{background:linear-gradient(115deg,#103c32,#327664);padding:85px 0;color:#fff}.inner-hero h1{font-family:'Playfair Display',serif;font-size:clamp(34px,5vw,55px);margin:12px 0}.inner-hero p{max-width:700px;line-height:1.8}.inner-body{padding:65px 0}.inner-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:45px}.inner-body p,.inner-body li{line-height:1.85}.inner-body h2{margin-top:30px;color: #0a8140;}.inner-side{background:#f2f7f3;padding:25px;border-radius:16px;align-self:start}.inner-side a{display:block;padding:9px 0;color:#225a4a;text-decoration:none}.breadcrumb{font-size:13px;opacity:.9}
@media(max-width:950px){.links .mega{position:static;transform:none;width:100%;max-height:none;grid-template-columns:repeat(2,minmax(0,1fr));box-shadow:none;padding:10px}.treatment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.links .mega,.treatment-grid,.inner-layout{grid-template-columns:1fr}.inner-hero{padding:55px 0}}

/* Standalone gallery page */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}.photo-grid a{display:block;text-decoration:none;color:inherit;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 5px 20px #00000012}.photo-grid img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .25s}.photo-grid a:hover img{transform:scale(1.04)}.photo-grid span{display:block;padding:13px 16px;font-weight:600}@media(max-width:800px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.photo-grid{grid-template-columns:1fr}}

/* DR. ASHWINI'S CLINIC - TREATMENT DIRECTORY */

.ash-treatments {
  padding: 100px 20px;
  background:
    radial-gradient(circle at 5% 5%, #e5f4e9 0%, transparent 35%),
    linear-gradient(145deg, #f7fbf8, #ffffff);
  font-family: 'Poppins', sans-serif;
}

.ash-container {
  max-width: 1200px;
  margin: 0 auto;
}

.ash-section-heading {
  text-align: center;
  margin: 0 auto 55px;
}

.ash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #187447;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.ash-eyebrow-line {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: #187447;
}

.ash-section-heading h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.25;
  font-weight: 700;
  color: #183c2b;
  margin: 0 0 20px;
}

.ash-section-heading h2 span {
  color: #d72d3b;
}

.ash-section-heading p {
  color: #65766c;
  font-size: 15px;
  line-height: 1.9;
}

/* Grid */

.ash-treatment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  align-items: stretch;
}

/* Card */

.ash-treatment-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #187447;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 8px 30px rgba(20, 65, 40, 0.04);
  transition: transform .35s ease,
              box-shadow .35s ease,
              border-color .35s ease;
}

.ash-treatment-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #187447, #d72d3b);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.ash-treatment-card:hover {
  transform: translateY(-8px);
  border-color: #b8dfc6;
  box-shadow: 0 22px 45px rgba(20, 65, 40, .12);
}

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

.ash-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.ash-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #eaf6ee;
  color: #187447;
  font-size: 29px;
  transition: .3s;
}

.ash-treatment-card:hover .ash-card-icon {
  background: #187447;
  color: white;
  transform: rotate(-5deg);
}

.ash-card-number {
  font-size: 12px;
  color: #c0ccc3;
  font-weight: 600;
  letter-spacing: 1px;
}

.ash-treatment-card h3 {
  color: #183c2b;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 13px;
}

.ash-treatment-card p {
  color: #718076;
  font-size: 14px;
  line-height: 1.85;
  margin: 0 0 23px;
}

/* Treatment Links */

.ash-card-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #edf1ee;
  padding-top: 10px;
}

.ash-card-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #315443;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 4px;
  border-bottom: 1px solid #f0f3f1;
  transition: color .25s, padding .25s;
}

.ash-card-links a:last-child {
  border-bottom: 0;
}

.ash-card-links a::after {
  content: "\2192";
  font-size: 17px;
  color: #187447;
  transition: transform .25s;
}

.ash-card-links a:hover {
  color: #d72d3b;
  padding-left: 9px;
}

.ash-card-links a:hover::after {
  transform: translate(3px, -3px);
  color: #d72d3b;
}

/* Consultation CTA */

.ash-bottom-cta {
  margin-top: 50px;
  padding: 38px 45px;
  border-radius: 24px;
  background: linear-gradient(115deg, #123c29, #207c51);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

.ash-bottom-cta > div > span {
  color: #a9e3bc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.ash-bottom-cta h3 {
  color: white;
  font-size: 24px;
  line-height: 1.4;
  margin: 10px 0;
}

.ash-bottom-cta p {
  color: #d5e8dc;
  font-size: 14px;
  margin: 0;
}

.ash-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 17px 24px;
  background: #ffffff;
  color: #176b48;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: .3s;
}

.ash-cta-btn:hover {
  background: #d72d3b;
  color: white;
  transform: translateY(-3px);
}

/* Tablet */

@media (max-width: 991px) {
  .ash-treatment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ash-treatments {
    padding: 75px 20px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .ash-treatments {
    padding: 55px 15px;
  }

  .ash-treatment-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ash-treatment-card {
    padding: 24px;
    border-radius: 18px;
  }

  .ash-section-heading {
    margin-bottom: 35px;
  }

  .ash-section-heading h2 {
    font-size: 29px;
  }

  .ash-bottom-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 25px;
    border-radius: 20px;
  }

  .ash-bottom-cta h3 {
    font-size: 21px;
  }

  .ash-cta-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ash-treatment-card,
  .ash-treatment-card::before,
  .ash-card-icon,
  .ash-card-links a,
  .ash-card-links a::after,
  .ash-cta-btn {
    transition: none;
  }
}


/* Treatment Cards with Background Images */

.ash-treatment-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

/* Background Image Layer */
.ash-treatment-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.96),
      rgba(255,255,255,0.84)
    ),
    var(--treatment-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

/* Zoom Effect */
.ash-treatment-card:hover::after {
  transform: scale(1.08);
}

/* 1. Acne Treatment */
.ash-treatment-card:nth-child(1) {
  --treatment-image:
    url("../images/acne-treatment.jpg");
}

/* 2. Pigmentation */
.ash-treatment-card:nth-child(2) {
  --treatment-image:
    url("../images/pigmentation-treatment.jpg");
}

/* 3. Skin Rejuvenation */
.ash-treatment-card:nth-child(3) {
  --treatment-image:
    url("../images/skin-rejuvenation.jpg");
}

/* 4. Hair & Scalp */
.ash-treatment-card:nth-child(4) {
  --treatment-image:
    url("../images/hair-treatment.jpg");
}

/* 5. Laser Treatment */
.ash-treatment-card:nth-child(5) {
  --treatment-image:
    url("../images/laser-treatment.jpg");
}

/* 6. Skin Infections */
.ash-treatment-card:nth-child(6) {
  --treatment-image:
    url("../images/skin-infection.jpg");
}

/* Improve Text Readability */
.ash-treatment-card h3 {
  color: #173d2a;
  position: relative;
}

.ash-treatment-card p {
  color: #425b4b;
  position: relative;
}

.ash-card-links a {
  color: #174c32;
  position: relative;
}

/* Hover Effect */
.ash-treatment-card:hover {
  box-shadow: 0 20px 45px rgba(0,0,0,0.13);
  border-color: #1b8050;
}

@media (prefers-reduced-motion: reduce) {
  .ash-treatment-card::after {
    transition: none;
  }
}