/* Shree Aesthetic Clinic - premium rose / ivory theme */
:root {
  --rose: #b66a79;
  --rose-dark: #8e4658;
  --rose-soft: #f8e8eb;
  --ivory: #fffaf7;
  --cream: #f5eee9;
  --ink: #292329;
  --muted: #716a6d;
  --line: #eadfe0;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: "DM Sans", sans-serif;
  line-height: 1.7;
}
h1,h2,h3,h4,h5 { font-family: "Playfair Display", serif; line-height: 1.15; }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin-bottom: 1rem; }
h2 span, h1 em { color: var(--rose-dark); font-style: normal; }
a { color: inherit; text-decoration: none; }
.section-padding { padding: 100px 0; }
.section-lead { max-width: 680px; color: var(--muted); font-size: 1.05rem; }

.eyebrow {
  display: inline-block;
  color: var(--rose-dark);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: 14px;
}

/* Navbar */
.site-nav {
  background: rgba(255,250,247,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(234,223,224,.75);
  padding: 12px 0;
  transition: .25s ease;
}
.navbar-brand { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.brand-mark {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--rose-dark); color: #fff;
  font-family: "Playfair Display", serif; font-size: 1.25rem;
}
.nav-link { font-weight: 600; font-size: .9rem; color: #4d4548 !important; padding: 9px 11px !important; }
.nav-link:hover, .nav-link.active { color: var(--rose-dark) !important; }
.dropdown-menu { background: #fffaf7; border-radius: 16px; padding: 10px; }
.dropdown-item { border-radius: 10px; padding: 9px 12px; font-size: .9rem; }
.dropdown-item:hover { background: var(--rose-soft); color: var(--rose-dark); }

/* Buttons */
.btn-primary {
  background: var(--rose-dark); border-color: var(--rose-dark);
  box-shadow: 0 8px 22px rgba(142,70,88,.18);
}
.btn-primary:hover { background: #743646; border-color: #743646; }
.btn-outline-dark:hover { background: var(--ink); }

/* Hero */
.hero-section {
  position: relative; overflow: hidden; padding: 150px 0 90px;
  min-height: 760px; display: flex; align-items: center;
  background: linear-gradient(135deg, #fffaf7 0%, #f9ecee 100%);
      background-image: url(./images/bg-1.png);
    background-position: right; 
    background-repeat: no-repeat;
}
.hero-section h1 { font-size: clamp(3.2rem, 6vw, 5.6rem); margin-bottom: 20px; }
.hero-text { color: var(--muted); font-size: 1.12rem; max-width: 570px; margin-bottom: 28px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 15px; color: #5e5659; font-size: .88rem; }
.hero-image-wrap { position: relative; max-width: 590px; margin: auto; }
.hero-image { width: 100%; filter: drop-shadow(0 28px 40px rgba(82,45,53,.15)); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(5px); }
.hero-glow-one { width: 380px; height: 380px; right: -100px; top: 100px; background: rgba(229,180,190,.4); }
.hero-glow-two { width: 260px; height: 260px; left: -100px; bottom: -120px; background: rgba(242,215,190,.35); }
.floating-card {
  position: absolute; background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.8); border-radius: 18px; padding: 14px 17px;
  box-shadow: 0 16px 35px rgba(67,40,47,.12); display: flex; align-items: center; gap: 10px;
}
.floating-card small { display:block; color: var(--muted); font-size: .7rem; }
.card-one { left: -25px; top: 20%; }
.card-two { right: -10px; bottom: 10%; display:block; text-align:center; }
.card-two strong { font-size: 1.6rem; color: var(--rose-dark); display:block; }
.icon-circle { width: 34px; height:34px; display:grid; place-items:center; background:var(--rose-soft); color:var(--rose-dark); border-radius:50%; }

/* Intro */
.intro-section { background: #fff; }

/* Doctor */
.doctor-section { background: var(--cream); }
.doctor-image-box { position: relative; max-width: 470px; margin: auto; }
.doctor-image-box img { border-radius: 36px; width:100%; box-shadow: 20px 25px 0 #e8d1d4; }
.experience-badge {
  position: absolute; right: -20px; bottom: 25px; background: #fff; border-radius: 18px;
  padding: 16px 20px; box-shadow: 0 15px 35px rgba(54,35,39,.12); display:flex; gap:10px; align-items:center;
}
.experience-badge strong { font-size: 2rem; color:var(--rose-dark); font-family:"Playfair Display",serif; }
.experience-badge span { font-size:.75rem; line-height:1.25; color:var(--muted); }
.feature-box { background:#fff; padding:14px 16px; border-radius:12px; font-weight:600; font-size:.9rem; border:1px solid var(--line); }

/* Services */
.services-section { background: #fffaf7; }
.service-card {
  height:100%; background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:30px; transition:.3s; box-shadow:0 8px 25px rgba(75,49,54,.03);
}
.service-card:hover { transform:translateY(-7px); box-shadow:0 20px 40px rgba(75,49,54,.10); border-color:#e0c4c9; }
.service-icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--rose-soft); color:var(--rose-dark); font-size:1.35rem; margin-bottom:22px; }
.service-card h3 { font-size:1.5rem; }
.service-card p { color:var(--muted); font-size:.93rem; }
.service-card a { color:var(--rose-dark); font-weight:700; font-size:.9rem; }

/* Treatments */
.treatment-section { background:linear-gradient(135deg,#f8e8eb,#fffaf7); }
.treatment-pill {
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
  font-weight:600; box-shadow:0 7px 20px rgba(75,49,54,.04);
}
.treatment-pill b { color:var(--rose-dark); font-size:.78rem; margin-right:12px; }

/* Why */
.why-section { background:#fff; }
.why-card { border-top:3px solid var(--rose-dark); padding:25px 8px 10px; height:100%; }
.why-card > span { color:var(--rose-dark); font-weight:700; font-size:.8rem; letter-spacing:.1em; }
.why-card h3 { font-size:1.4rem; margin-top:14px; }
.why-card p { color:var(--muted); font-size:.9rem; }

/* CTA */
.cta-section { padding: 30px 0 100px; background:#fff; }
.cta-box {
  background:var(--rose-dark); color:#fff; border-radius:28px; padding:55px;
  display:flex; justify-content:space-between; align-items:center; gap:30px;
  box-shadow:0 25px 50px rgba(116,54,70,.18);
}
.cta-box .eyebrow { color:#f6dce1; }
.cta-box h2 { margin:0; }
.cta-box h2 em { color:#f7dce1; }

/* Contact */
.contact-section { background:var(--cream); }
.contact-item { display:flex; gap:15px; margin-top:24px; align-items:flex-start; }
.contact-icon { width:42px; height:42px; border-radius:50%; background:var(--rose-soft); color:var(--rose-dark); display:grid; place-items:center; flex:0 0 auto; }
.contact-item small { display:block; color:var(--muted); }
.contact-item strong { display:block; font-size:.92rem; max-width:420px; }
.contact-form-card { background:#fff; padding:34px; border-radius:25px; box-shadow:0 18px 45px rgba(75,49,54,.08); }
.form-control,.form-select { border:1px solid #e5d9da; border-radius:12px; padding:12px 15px; }
.form-control:focus,.form-select:focus { border-color:var(--rose); box-shadow:0 0 0 .2rem rgba(182,106,121,.12); }

/* Footer */
.footer { background:#272126; color:#d7cccf; padding:65px 0 25px; }
.footer-brand { color:#fff; display:flex; align-items:center; gap:10px; font-family:"Playfair Display",serif; font-size:1.25rem; }
.footer h5 { color:#fff; font-family:"DM Sans",sans-serif; font-size:.9rem; margin-bottom:17px; }
.footer a { display:block; color:#cbbfc2; font-size:.88rem; margin-bottom:7px; }
.footer a:hover { color:#fff; }
.footer hr { border-color:#493f44; margin:35px 0 20px; }

/* Back top */
.back-top { position:fixed; right:20px; bottom:20px; width:45px; height:45px; border:0; border-radius:50%; background:var(--rose-dark); color:#fff; opacity:0; visibility:hidden; transition:.25s; z-index:1000; }
.back-top.show { opacity:1; visibility:visible; }

/* Responsive */
@media (max-width: 991.98px) {
  .site-nav { padding: 9px 0; }
  .navbar-collapse { padding:15px 0 5px; }
  .hero-section { padding-top:125px; min-height:auto; }
  .hero-image-wrap { margin-top:20px; }
  .card-one { left:0; }
  .card-two { right:0; }
  .cta-box { padding:40px; }
}
@media (max-width: 575.98px) {
  .section-padding { padding:70px 0; }
  .hero-section { padding-bottom:70px; }
  .hero-section h1 { font-size:3rem; }
  .hero-points { flex-direction:column; gap:5px; }
  .floating-card { transform:scale(.88); }
  .card-one { left:-8px; }
  .card-two { right:-8px; }
  .experience-badge { right:5px; bottom:15px; }
  .cta-box { padding:32px 25px; flex-direction:column; align-items:flex-start; }
  .contact-form-card { padding:25px 20px; }
}