:root {
  --ink:#101113;
  --ink2:#17191d;
  --gold:#e9b949;
  --gold2:#ffd875;
  --paper:#f7f6f2;
  --muted:#686b72;
  --line:#e6e3dc;
  --white:#fff;
  --radius:22px;
  --shadow:0 18px 50px rgba(20,20,20,.10);
  --max:1200px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px
}
body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans Bengali","Segoe UI",sans-serif;
  color:#202126;
  background:#fff;
  line-height:1.6
}
button,a {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
img {
  display:block;
  max-width:100%
}
.container {
  width:min(var(--max),calc(100% - 44px));
  margin-inline:auto
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#a77915;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800
}
.eyebrow:before {
  content:"";
  width:24px;
  height:2px;
  background:var(--gold)
}
.section {
  padding:88px 0
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px
}
.section-head h2 {
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.1;
  letter-spacing:-.045em;
  margin:10px 0 0;
  color:var(--ink)
}
.section-head p {
  max-width:490px;
  color:var(--muted);
  margin:0
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:750;
  font-size:.92rem;
  transition:transform .2s,background .2s,color .2s,border-color .2s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-gold {
  background:var(--gold);
  color:#171717
}
.btn-gold:hover {
  background:var(--gold2)
}
.btn-outline {
  border-color:rgba(255,255,255,.45);
  color:#fff;
  background:rgba(255,255,255,.04)
}
.btn-dark {
  background:var(--ink);
  color:white
}
.icon-btn {
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:white;
  display:grid;
  place-items:center;
  color:var(--ink);
  font-size:1.15rem
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(15,16,18,.96);
  color:white;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .25s,background .25s,backdrop-filter .25s
}
.site-header.scrolled {
  background:rgba(15,16,18,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 30px #0002
}
.nav-wrap {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand {
  display:flex;
  align-items:center;
  min-width:0
}
.brand img {
  width:178px;
  height:70px;
  object-fit:contain;
  object-position:left center
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,22px)
}
.desktop-nav a {
  font-size:.87rem;
  color:#e4e4e4;
  font-weight:650;
  white-space:nowrap;
  transition:color .2s
}
.desktop-nav a:hover,.desktop-nav a.active {
  color:var(--gold2)
}
/* The two services that actually bring customers in keep the same treatment as
   every other header link, so the bar reads as plain navigation. Promotion is
   carried by a small "Hot deal" tag pinned to each link's top-right corner
   instead of by a competing button style. */
.desktop-nav a.nav-hot,.mobile-nav a.nav-hot {
  position:relative
}
.desktop-nav a.nav-hot {
  margin-right:10px
}
.nav-hot-tag {
  position:absolute;
  padding:3px 6px;
  border-radius:99px;
  background:linear-gradient(135deg,#ffd875,#e9b949);
  color:#171717;
  font-size:.5rem;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 3px 10px rgba(233,185,73,.45);
  pointer-events:none
}
.desktop-nav a.nav-hot .nav-hot-tag {
  top:-11px;
  right:-13px
}
.nav-cta {
  padding:10px 16px;
  font-size:.83rem
}
.menu-toggle {
  display:none;
  color:white;
  background:transparent;
  border:1px solid #ffffff35;
  border-radius:12px;
  width:46px;
  height:44px;
  font-size:1.35rem
}
.mobile-nav {
  display:none;
  padding:0 22px 18px;
  background:#111216
}
.mobile-nav.open {
  display:grid;
  gap:4px
}
.mobile-nav a {
  padding:12px 8px;
  border-bottom:1px solid #ffffff14;
  color:#f4f4f4;
  font-weight:650
}
.mobile-nav a.nav-hot {
  padding-right:88px
}
.mobile-nav a.nav-hot .nav-hot-tag {
  top:10px;
  right:8px
}
.hero {
  position:relative;
  min-height:min(790px,calc(100svh - 82px));
  background:#0b0c0e;
  color:white;
  overflow:hidden;
  isolation:isolate
}
.hero-slide {
  position:absolute;
  inset:0;
  z-index:0;
  visibility:hidden;
  /* A slide waits one full screen to the right, so leaving is the same
     left-to-right movement it arrived with. */
  transform:translateX(100%);
  display:flex;
  align-items:center
}
/* Both directions are keyframes, never transitions: dropping a class does not
   transition a property that an animation was driving, it snaps - which left the
   hero empty while the next banner flew in across it. */
.hero-slide.leaving {
  visibility:visible;
  animation:heroSlideOut 1.15s cubic-bezier(.45,0,.25,1) both
}
.hero-slide.active {
  visibility:visible;
  z-index:1;
  animation:heroSlideIn 1.15s cubic-bezier(.45,0,.25,1) both
}
/* The first slide is already in place when the page opens, so it must not sweep
   in. It still needs the resting transform the keyframe would have left behind,
   otherwise it would sit off-screen. renderHero() adds hero-ready the first time
   a slide is actually changed. */
.hero:not(.hero-ready) .hero-slide.active {
  animation:none;
  transform:none
}
/* Slides travel as one strip: the incoming banner enters from the left while the
   outgoing one leaves to the right at the same speed, so their edges stay flush
   and the hero never shows the page background between them. No fade, so a change
   reads as one image sliding after another rather than two images blending. */
@keyframes heroSlideIn {
  from {
    transform:translateX(-100%)
  }
  to {
    transform:none
  }
}
@keyframes heroSlideOut {
  from {
    transform:translateX(0)
  }
  to {
    transform:translateX(100%)
  }
}
.hero-media {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  /* Ken Burns: the active banner settles out of a slight over-scale instead of
     sitting still. The scale is restored while the slide is hidden, so the
     reset is never visible. */
  transform:scale(1.12);
  transition:transform 18s linear
}
.hero-slide.active .hero-media {
  transform:scale(1)
}
/* The banner supplies its own headline along its left edge, so on a wide screen
   the crop is anchored left to keep that line whole. Narrow screens still centre
   the crop, where the portrait of the tutor is what actually reads. */
@media(min-width:801px) {
  .hero-slide.no-copy .hero-media {
    object-position:left center
  }
}
.hero-slide:after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(7,8,10,.94) 0%,rgba(7,8,10,.78) 45%,rgba(7,8,10,.25) 100%),linear-gradient(0deg,rgba(7,8,10,.48),transparent 60%)
}
/* Artwork that already carries its own headline needs no dark scrim - only a thin
   shade along the bottom, so the slide counter and arrows stay readable. */
.hero-slide.no-copy:after {
  background:linear-gradient(0deg,rgba(7,8,10,.55),transparent 42%)
}
.hero-content {
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
  padding:80px 0 112px;
  position:relative;
  z-index:2
}
.hero-content .eyebrow {
  color:var(--gold2)
}
.hero h1 {
  max-width:780px;
  font-size:clamp(2.7rem,6.3vw,5.9rem);
  letter-spacing:-.065em;
  line-height:.99;
  margin:20px 0 24px
}
.hero h1 span {
  color:var(--gold)
}
.hero p {
  max-width:610px;
  font-size:clamp(1rem,1.5vw,1.17rem);
  color:#e0e1e4;
  margin:0 0 30px
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
/* Each line of slide copy rises into place after the image has started to
   settle, so the change reads as a transition rather than a swap. The short
   transition is the exit path: when .active is removed the animation stops and
   the copy fades back out instead of disappearing on one frame. */
.hero-content > * {
  opacity:0;
  transform:translateY(26px);
  transition:opacity .35s ease,transform .35s ease
}
.hero-slide.active .hero-content > * {
  animation:heroCopyIn .95s cubic-bezier(.22,1,.36,1) both
}
.hero-slide.active .hero-content > *:nth-child(1) {
  animation-delay:.28s
}
.hero-slide.active .hero-content > *:nth-child(2) {
  animation-delay:.4s
}
.hero-slide.active .hero-content > *:nth-child(3) {
  animation-delay:.54s
}
.hero-slide.active .hero-content > *:nth-child(4) {
  animation-delay:.68s
}
@keyframes heroCopyIn {
  from {
    opacity:0;
    transform:translateY(26px)
  }
  to {
    opacity:1;
    transform:none
  }
}
.hero-bottom {
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(var(--max),calc(100% - 44px));
  margin:auto
}
.hero-count {
  font-size:.8rem;
  color:#e3e3e3;
  letter-spacing:.1em
}
.hero-count strong {
  color:var(--gold);
  font-size:1rem
}
.hero-controls {
  display:flex;
  align-items:center;
  gap:9px
}
/* One banner means nothing to page through, so the dots and arrows are
   dropped and the slide counter is left on its own. */
.hero-controls.is-single {
  display:none
}
.hero-controls button {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #ffffff66;
  color:white;
  background:#ffffff10;
  backdrop-filter:blur(5px)
}
.hero-controls button:hover {
  background:var(--gold);
  color:#111
}
.dots {
  display:flex;
  gap:7px;
  margin-right:12px
}
.dots button {
  width:7px;
  height:7px;
  border:0;
  border-radius:99px;
  background:#ffffff70;
  padding:0;
  transition:width .45s cubic-bezier(.4,0,.2,1),background .35s ease,transform .35s ease
}
.dots button:hover {
  background:#ffffffc4;
  transform:scale(1.3)
}
.dots button.active {
  width:26px;
  background:var(--gold);
  transform:none
}
.service-section {
  background:var(--paper)
}
.carousel-tools {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.carousel-viewport {
  overflow:hidden;
  touch-action:pan-y
}
.card-track {
  display:flex;
  gap:20px;
  transition:transform .6s cubic-bezier(.2,.75,.25,1);
  will-change:transform
}
.service-card {
  flex:0 0 calc((100% - 60px)/4);
  background:#fff;
  border:1px solid #eeece6;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 5px 22px #16161607;
  transition:transform .25s,box-shadow .25s
}
.service-card:hover,.teacher-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow)
}
.service-image {
  height:180px;
  position:relative;
  overflow:hidden;
  background:#ddd
}
.service-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}
.service-card:hover .service-image img {
  transform:scale(1.05)
}
.service-number {
  position:absolute;
  top:14px;
  left:14px;
  background:#111d;
  color:var(--gold2);
  font-size:.76rem;
  font-weight:800;
  padding:5px 10px;
  border-radius:99px;
  backdrop-filter:blur(6px)
}
.service-body {
  padding:22px
}
.service-body h3 {
  font-size:1.18rem;
  margin:0 0 8px;
  color:var(--ink)
}
.service-body p {
  font-size:.9rem;
  color:var(--muted);
  margin:0 0 18px;
  min-height:72px
}
.text-link {
  font-weight:800;
  color:#93690f;
  font-size:.87rem;
  display:inline-flex;
  gap:8px;
  align-items:center
}
.text-link:hover {
  color:#4d3807
}
/* The services that are actually open for enrolment carry a filled call to
   action; the one that is not yet launched keeps the quieter text link, so a
   visitor is pulled towards something they can act on today. */
.service-cta {
  width:100%;
  padding:12px 16px;
  font-size:.88rem;
  box-shadow:0 10px 24px rgba(233,185,73,.35)
}
.service-cta span {
  transition:transform .2s ease
}
.service-cta:hover span {
  transform:translate(3px,-3px)
}
/* Only three services are live, so on wide screens the row is divided into
   thirds. Left at the four-up width, one empty quarter sat to the right of the
   cards and shrank the calls to action. */
@media (min-width:1051px) {
  .card-track.services-3 > .service-card {
    flex-basis:calc((100% - 40px)/3)
  }
}
.teachers-section {
  background:#fff
}
.teacher-card {
  flex:0 0 calc((100% - 60px)/4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:transform .25s,box-shadow .25s
}
.teacher-photo {
  height:260px;
  overflow:hidden;
  background:#e9e5dc
}
.teacher-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s
}
.teacher-card:hover .teacher-photo img {
  transform:scale(1.045)
}
.teacher-info {
  padding:21px
}
.teacher-info h3 {
  margin:0 0 4px;
  font-size:1.12rem
}
.teacher-subject {
  color:#a77915;
  font-size:.83rem;
  font-weight:800
}
.teacher-info p {
  color:var(--muted);
  font-size:.88rem;
  margin:12px 0 17px;
  min-height:66px
}
.teacher-info .btn {
  width:100%;
  padding:11px
}
.promo-section {
  padding:64px 0 42px
}
.promo-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:370px;
  border-radius:28px;
  overflow:hidden;
  background:#f4f1e9
}
.promo-card.reverse .promo-media {
  order:2
}
.promo-card.reverse .promo-copy {
  order:1
}
.promo-media {
  min-height:320px;
  position:relative;
  overflow:hidden;
  background:#d7d1c4
}
.promo-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.promo-copy {
  padding:clamp(28px,5vw,64px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center
}
.promo-copy h2 {
  font-size:clamp(1.9rem,3.4vw,3.2rem);
  line-height:1.08;
  letter-spacing:-.045em;
  margin:13px 0 15px
}
.promo-copy p {
  color:#62636a;
  margin:0 0 24px;
  max-width:470px
}
.why-section {
  background:#111216;
  color:white;
  position:relative;
  overflow:hidden
}
.why-section:before {
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  border:1px solid #e9b94920;
  right:-190px;
  top:-170px;
  box-shadow:0 0 0 55px #e9b94908,0 0 0 110px #e9b94905
}
.why-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
  position:relative
}
.why-visual {
  position:relative;
  min-height:430px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(145deg,#29251a,#111216 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e9b94942
}
.why-visual img {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  opacity:.28;
  mix-blend-mode:screen
}
.monogram {
  position:relative;
  text-align:center;
  color:var(--gold);
  font-weight:900;
  font-size:clamp(5rem,12vw,9rem);
  letter-spacing:-.1em;
  line-height:1
}
.monogram small {
  display:block;
  letter-spacing:.28em;
  font-size:.75rem;
  color:white;
  margin-top:20px
}
.why-copy .eyebrow {
  color:var(--gold2)
}
.why-copy h2 {
  font-size:clamp(2.3rem,4.5vw,4rem);
  line-height:1.02;
  letter-spacing:-.05em;
  margin:14px 0 24px
}
.why-copy p {
  color:#c9c9ce;
  margin:0 0 16px
}
.why-copy p strong {
  color:#fff
}
.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px
}
.feature {
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 14px;
  border:1px solid #ffffff18;
  border-radius:13px;
  background:#ffffff06;
  font-weight:700;
  font-size:.9rem
}
.feature span {
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e9b94920;
  color:var(--gold);
  flex-shrink:0
}
.contact-band {
  background:var(--gold);
  padding:30px 0
}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.contact-inner h2 {
  margin:0;
  font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:-.04em
}
.contact-inner p {
  margin:5px 0 0;
  color:#493914
}
.site-footer {
  background:#0b0c0e;
  color:#f5f5f5;
  padding:64px 0 22px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px
}
.footer-brand img {
  width:190px;
  height:75px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:16px
}
.footer-brand p {
  color:#aeb0b5;
  font-size:.9rem;
  max-width:300px
}
.footer-col h3 {
  font-size:.92rem;
  margin:0 0 18px;
  color:var(--gold2)
}
.footer-col a,.footer-col p {
  display:block;
  color:#b9bbc0;
  font-size:.87rem;
  margin:0 0 11px
}
.footer-col a:hover {
  color:white
}
.socials {
  display:flex;
  gap:9px;
  margin-top:18px
}
.socials a {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #ffffff26;
  border-radius:50%;
  color:white;
  font-size:.75rem;
  font-weight:800;
  margin:0
}
.socials a:hover {
  background:var(--gold);
  color:#111
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #ffffff18;
  padding-top:20px;
  margin-top:44px;
  color:#888b92;
  font-size:.8rem
}
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#050608c9;
  backdrop-filter:blur(7px);
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px
}
.modal-backdrop.open {
  display:flex
}
.teacher-modal {
  background:#fff;
  border-radius:24px;
  width:min(760px,100%);
  max-height:min(88svh,800px);
  overflow:auto;
  position:relative;
  box-shadow:0 30px 100px #0007;
  animation:modalIn .22s ease
}
.modal-close {
  position:absolute;
  right:15px;
  top:15px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:1.35rem;
  z-index:2
}
.modal-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr
}
.modal-photo {
  min-height:420px;
  background:#ddd
}
.modal-photo img {
  width:100%;
  height:100%;
  object-fit:cover
}
.modal-content {
  padding:42px 34px
}
.modal-content h2 {
  font-size:2rem;
  line-height:1.1;
  margin:10px 0 4px
}
.modal-content p {
  color:#666
}
.modal-content h3 {
  font-size:.92rem;
  margin:22px 0 7px
}
.modal-content ul {
  padding-left:20px;
  color:#555
}
.toast {
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  background:#111;
  color:#fff;
  padding:12px 18px;
  border-radius:99px;
  z-index:120;
  transition:.25s;
  box-shadow:var(--shadow);
  font-size:.9rem
}
.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s,transform .65s
}
.reveal.visible {
  opacity:1;
  transform:none
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
:focus-visible {
  outline:3px solid #e9b949;
  outline-offset:3px
}
@keyframes modalIn {
  from {
    opacity:0;
    transform:translateY(10px) scale(.985)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(max-width:1050px) {
  .desktop-nav {
    gap:10px
  }
  .desktop-nav a {
    font-size:.8rem
  }
  .desktop-nav a.nav-hot {
    margin-right:6px
  }
  .desktop-nav a.nav-hot .nav-hot-tag {
    padding:2px 5px;
    font-size:.46rem
  }
  .brand img {
    width:150px
  }
  .service-card,.teacher-card {
    flex-basis:calc((100% - 40px)/3)
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:32px
  }
  .why-grid {
    gap:38px
  }
}
/* Header links carry a corner tag, so the menu button takes over from 960px
   instead of 800px and the links never collide with the call to action. */
@media(max-width:960px) {
  .desktop-nav,.nav-wrap>.nav-cta {
    display:none
  }
  .menu-toggle {
    display:block
  }
}
@media(max-width:800px) {
  .nav-wrap {
    height:72px
  }
  .brand img {
    width:150px;
    height:62px
  }
  .desktop-nav,.nav-wrap>.nav-cta {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .hero {
    min-height:680px;
    min-height:min(760px,calc(100svh - 72px))
  }
  .hero-content {
    padding-top:76px
  }
  .hero-slide:after {
    background:linear-gradient(90deg,rgba(7,8,10,.91),rgba(7,8,10,.62)),linear-gradient(0deg,rgba(7,8,10,.5),transparent)
  }
  .section {
    padding:68px 0
  }
  .section-head {
    align-items:flex-start;
    flex-direction:column
  }
  .service-card,.teacher-card {
    flex-basis:calc((100% - 20px)/2)
  }
  .service-image {
    height:170px
  }
  .teacher-photo {
    height:230px
  }
  .promo-card {
    grid-template-columns:1fr
  }
  .promo-card.reverse .promo-media,.promo-card.reverse .promo-copy {
    order:initial
  }
  .promo-media {
    min-height:270px
  }
  .promo-copy {
    padding:32px
  }
  .why-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .why-visual {
    min-height:300px
  }
  .why-visual img {
    object-position:center 35%
  }
  .contact-inner {
    align-items:flex-start;
    flex-direction:column
  }
  .modal-layout {
    grid-template-columns:1fr
  }
  .modal-photo {
    height:260px;
    min-height:0
  }
  .modal-content {
    padding:28px
  }
}
@media(max-width:520px) {
  .container,.hero-content,.hero-bottom {
    width:calc(100% - 32px)
  }
  .brand img {
    width:130px
  }
  .hero h1 {
    font-size:clamp(2.55rem,13vw,4rem)
  }
  .hero-content {
    padding-top:65px
  }
  .hero p {
    font-size:.98rem
  }
  .hero-bottom {
    bottom:18px
  }
  .hero-count {
    font-size:.72rem
  }
  .hero-controls button {
    width:38px;
    height:38px
  }
  .dots {
    margin-right:2px
  }
  .service-card,.teacher-card {
    flex-basis:100%
  }
  .service-image {
    height:210px
  }
  .teacher-photo {
    height:300px
  }
  .service-body p,.teacher-info p {
    min-height:0
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .footer-grid {
    grid-template-columns:1fr;
    gap:26px
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px
  }
  .section {
    padding:58px 0
  }
  .promo-section {
    padding:36px 0 24px
  }
  .promo-media {
    min-height:220px
  }
  .why-visual {
    min-height:250px
  }
  .hero-actions .btn {
    padding:12px 16px
  }
  .carousel-tools {
    align-self:flex-end;
    margin-top:-8px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}
/* ==========================================================
   Language switch + Google website translator
   See assets/js/translate.js. Only the switch is visible: Google's own
   widget container and toolbar stay hidden, because the widget is used
   purely for its translation pass over the page.
   ========================================================== */
#google_translate_element {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}
/* Google's own toolbar. The iframe, its wrapper, the hover tooltip and the 40px
   offset Google writes into <body> all have to go; `html body` is used because
   Google appends its `body{top:40px}` rule at runtime and a plain element
   selector of equal weight would lose to it. */
iframe.goog-te-banner-frame,.goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt,.goog-logo-link,.goog-te-gadget>span {
  display:none!important;
  visibility:hidden!important;
  height:0!important
}
html body {
  position:static!important;
  top:0!important;
  margin-top:0!important
}
.goog-text-highlight {
  background:none!important;
  box-shadow:none!important
}
/* Bengali runs longer than the Latin these headlines were tuned for and its
   conjuncts break under negative tracking, so the translated page gets the
   letterspacing back and a little more line height. The widget marks the page
   with translated-ltr on <html> once it has rewritten it. */
html.translated-ltr h1,html.translated-ltr h2,html.translated-ltr h3 {
  letter-spacing:normal;
  line-height:1.24
}
html.translated-ltr .hero h1 {
  letter-spacing:normal;
  line-height:1.18
}
.lang-switch {
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid #ffffff28;
  border-radius:99px;
  background:#ffffff0a;
  flex:0 0 auto
}
.lang-switch button {
  padding:5px 9px;
  border-radius:99px;
  color:#cfcfcf;
  font:inherit;
  font-size:.74rem;
  font-weight:700;
  line-height:1;
  transition:background .2s,color .2s
}
.lang-switch button:hover {
  color:#fff
}
.lang-switch button[aria-pressed="true"] {
  background:var(--gold2);
  color:#101113
}
@media(max-width:520px) {
  .nav-wrap {
    gap:10px
  }
  .lang-switch button {
    padding:4px 7px;
    font-size:.7rem
  }
}