:root{
  --primary:#0f857a;
  --primary-dark:#0b6f66;
  --mint:#d6fffb;
  --card:#d9fffb;
  --text:#111;
  --muted:#444;
  --shadow: 0 16px 40px rgba(0,0,0,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:90px 0}

/* ================= HEADER ================= */
.header{
  position:sticky;top:0;z-index:999;
  background:var(--primary);
  box-shadow:0 2px 0 rgba(0,0,0,.08);
}
.nav{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  color:#fff;
  font-weight:900;
  text-decoration:none;
  font-size:32px;
  letter-spacing:.2px;
}

/* NAV LINKS */
.nav__links{
  list-style:none;
  display:flex;
  gap:26px;
  align-items:center;
}
.nav__link{
  color:#e9ffff;
  text-decoration:none;
  font-weight:700;
  padding:10px 16px;
  border-radius:999px;
  transition: .25s ease;
}
.nav__link:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
}
.nav__link.active{
  background:rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}

/* Mobile toggle */
.nav__toggle{
  display:none;
  border:none;
  background:transparent;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

/* ================= HOME ================= */
.home{padding-top:82px}
.home__grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:60px;
  align-items:center;
}
.home__imgWrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.home__small{font-size:34px;font-weight:900;margin-bottom:8px}
.home__title{font-size:58px;line-height:1.02;font-weight:900;margin-bottom:10px}
.home__subtitle{font-size:36px;font-weight:900;margin-bottom:14px}
.accent{color:var(--primary)}

.home__text{
  color:var(--muted);
  line-height:1.8;
  max-width:620px;
  margin-bottom:22px;
}

/* ===== Circle Image (FIXED: never goes outside frame on hover) ===== */
.circle{
  width:420px;
  height:420px;
  border-radius:50%;
  background:var(--primary);
  display:grid;
  place-items:center;

  position:relative;
  overflow:hidden; /* ✅ important: clip image inside circle */

  box-shadow: 0 20px 45px rgba(15,133,122,.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.circle::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(15,133,122,.28), transparent 60%);
  filter: blur(6px);
  z-index:-1;
}
.circle img{
  width:100%;
  height:100%;
  object-fit:cover;

  transform: scale(0.88);
  border-radius:50%;
  /*border:6px solid rgba(255,255,255,.18);*/
  box-sizing:border-box;

  transition: transform .35s ease;
}
.circle:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(15,133,122,.26);
}
.circle:hover img{
  transform: scale(0.92); /* ✅ zoom feel but still inside frame */
}

/* Social icons */
.social{display:flex;gap:14px;margin:12px 0 18px}
.social__btn{
  width:44px;height:44px;border-radius:50%;
  border:2px solid var(--primary);
  display:grid;place-items:center;
  color:var(--primary);
  text-decoration:none;
  transition:.25s ease;
}
.social__btn:hover{
  background:var(--primary);
  color:#fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 25px rgba(15,133,122,.22);
}

/* Button */
.btn{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:12px 32px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:.25s ease;
  box-shadow: 0 12px 22px rgba(15,133,122,.18);
}
.btn:hover{
  background:var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(15,133,122,.22);
}
.btn--sm{padding:10px 24px}

/* ================= ABOUT ================= */
.about{background:var(--mint)}
.about__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:60px;
  align-items:center;
}
.about__imgWrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.section__title{
  font-size:66px;
  font-weight:900;
  line-height:1.06;
  margin-bottom:10px;
}
.section__sub{
  font-size:30px;
  font-weight:900;
  margin-bottom:14px;
}
.section__text{
  color:var(--muted);
  line-height:1.8;
  max-width:640px;
  margin-bottom:22px
}
.circle--sm{width:360px;height:360px}

/* ================= SERVICES ================= */
.center{text-align:center}
.services .section__title{margin-bottom:34px}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:14px;
}
.card{
  background:var(--card);
  border-radius:22px;
  padding:38px 34px;
  text-align:center;
  box-shadow: var(--shadow);
  border:3px solid transparent;
  transition: .30s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(15,133,122,.16), transparent 55%);
  opacity:0;
  transition:.3s ease;
}
.card:hover::before{opacity:1}
.card:hover{
  transform: translateY(-10px);
  border-color: rgba(15,133,122,.85);
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
}

/* अगर default selected नहीं चाहिए तो HTML से card--active हटा दो */
.card--active{
  border-color: rgba(15,133,122,.95);
  transform: translateY(-8px);
}

.card__icon{
  font-size:54px;
  color:var(--primary);
  margin-bottom:16px;
}
.card__title{font-size:28px;font-weight:900;margin-bottom:14px}
.card__text{color:var(--muted);line-height:1.75;margin-bottom:22px}

/* ================= TESTIMONIAL ================= */
.testimonial{background:var(--mint)}
.testimonial .section__title{margin-bottom:38px}

.testGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.tCard{
  background:#fff;
  border-radius:22px;
  padding:34px 34px;
  text-align:center;
  box-shadow: var(--shadow);
  border:3px solid transparent;
  transition:.30s ease;
}
.tCard:hover{
  transform: translateY(-10px);
  border-color: rgba(15,133,122,.85);
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}

/* अगर default selected नहीं चाहिए तो HTML से tCard--active हटा दो */
.tCard--active{border-color: rgba(15,133,122,.95)}

.tCard__img{
  width:140px;height:140px;border-radius:50%;
  margin:0 auto 16px;
  border:4px solid var(--primary);
  box-shadow: 0 12px 28px rgba(15,133,122,.20);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.tCard__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tCard__name{font-size:30px;font-weight:900;margin-bottom:8px}
.stars{display:flex;gap:8px;justify-content:center;margin-bottom:14px;color:#f2b705}
.tCard__text{color:var(--muted);line-height:1.75}

/* ================= CONTACT ================= */
.form{
  width:min(900px,100%);
  margin:30px auto 0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
input,textarea{
  width:100%;
  padding:14px 16px;
  border-radius:8px;
  border:2px solid var(--primary);
  outline:none;
  font-family:inherit;
  font-size:15px;
  transition:.2s ease;
}
textarea{resize:none;border-radius:10px}
input:focus,textarea:focus{
  box-shadow:0 0 0 4px rgba(15,133,122,.14);
  transform: translateY(-1px);
}

/* ================= FOOTER ================= */
.footer{
  background:var(--mint);
  padding:38px 0;
  border-top:1px solid rgba(0,0,0,.05)
}
.footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px
}
.social--footer{margin:0}
.footer__copy{color:#111;font-weight:700}

/* ===== Scroll reveal animation ===== */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: .7s ease;
}
.reveal.show{
  opacity:1;
  transform: translateY(0);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .home__grid,.about__grid{
    grid-template-columns:1fr;
    text-align:center
  }
  .social{justify-content:center}
  .cards,.testGrid{grid-template-columns:1fr}

  .circle{width:340px;height:340px}
  .circle--sm{width:300px;height:300px}

  .home__title{font-size:54px}
  .section__title{font-size:52px}
}

@media (max-width: 820px){
  .nav__toggle{display:block}

  .nav__links{
    position:fixed;
    top:72px;
    right:-100%;
    width:min(340px,88%);
    height:calc(100vh - 72px);
    background:var(--primary);
    flex-direction:column;
    padding:22px;
    gap:10px;
    transition:.25s ease;
  }
  .nav__links.open{right:0}
  .nav__link{width:100%;text-align:left}

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

@media (max-width: 420px){
  .logo{font-size:24px}
  .home__title{font-size:44px}
  .home__subtitle{font-size:28px}
  .section__title{font-size:44px}
  .circle{width:280px;height:280px}
}