/* ENLY — Polished professional styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
:root{
  --bg:#eaf5ff; /* pleasant soft blue */
  --card:#ffffff;
  --text:#0f1724;
  --muted:#6b7280;
  --accent:#2563eb;
  --accent-2:#1e40af;
  --accent-3:#06b6d4;
  --success:#0b8457;
  --radius:14px;
  --shadow: 0 8px 30px rgba(16,24,40,0.08);
  --soft-shadow: 0 4px 18px rgba(16,24,40,0.06);
  --max-width:1200px;
} 



*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 26px;
}
a{color:inherit}
img{max-width:100%;display:block}
/* Header */
.site-header{
  background:rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid rgba(15,23,36,0.06);
}
.site-header .container{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:18px 26px;
}
.logo{
  font-weight:800;
  letter-spacing:1px;
  color:var(--accent-3);
  text-decoration:none;
  font-size:20px;
}
.logo-img{display:flex;align-items:center;padding:0}
.logo-img img{width:50px;height:50px;border-radius:50%;object-fit:cover;box-shadow:0 4px 12px rgba(16,24,40,0.12)}
.site-nav{display:flex;gap:10px;align-items:center}
.site-nav a{
  color:var(--muted);
  text-decoration:none;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  transition:all .18s ease;
}
.site-nav a:hover{background:rgba(37,99,235,0.06);color:var(--accent-2);transform:translateY(-2px)}
.nav-toggle{background:transparent;border:0;font-size:22px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
/* Hero */
.hero{
  padding:78px 0 64px;
  background-image:linear-gradient(180deg, rgba(37,99,235,0.06) 0%, rgba(6,182,212,0.02) 100%), url('https://images.unsplash.com/photo-1522204505743-3d4ebf0e9d6d?q=80&w=1400&auto=format&fit=crop');
  background-position:center center;
  background-size:cover;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2) 40%);pointer-events:none} 
.hero .hero-inner{display:flex;justify-content:center}
/* Full-width hero variant */
.hero .hero-inner--wide{max-width:100%;padding:0;margin:0;display:block}
.hero-content--wide{background:transparent;box-shadow:none;padding:80px 40px;border-radius:0;color:var(--text);max-width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.hero-content--wide h1{color:var(--text);text-shadow:none}
.hero-content--wide .lead{color:rgba(15,23,36,0.8);font-size:20px;max-width:980px;margin-top:6px}
.hero .hero-ctas{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.hero-content--wide .btn{padding:12px 20px}
.hero-content--wide .btn.secondary{border-color:rgba(30,64,175,0.12);color:var(--accent-2);background:transparent}
@media(max-width:720px){
  .hero h1{text-align:center}
  .hero-content--wide{padding:40px 20px}
  .hero .hero-ctas{justify-content:center}
} 
.hero-content{max-width:940px;padding:26px 18px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.7));box-shadow:0 12px 36px rgba(2,6,23,0.06)}
.hero h1{font-size:clamp(26px,4.8vw,40px);line-height:1.04;margin:0;font-weight:700;color:#000;letter-spacing:-0.4px}
.hero-content--wide h1{font-size:clamp(36px,6.6vw,72px);line-height:1.02;margin:0;font-weight:800;color:#000;letter-spacing:-0.6px;text-shadow:none}
.hero-content--wide .lead{color:rgba(15,23,36,0.78);font-size:18px}
.lead{color:var(--muted);font-size:15px;max-width:720px;margin-top:8px}
.hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:18px}
.trust{margin-top:14px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-3));color:white;padding:10px 20px;border-radius:12px;text-decoration:none;font-weight:800;box-shadow:0 8px 22px rgba(5,24,18,0.24);transition:transform .09s ease,box-shadow .09s ease,filter .08s ease}
.btn:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 18px 36px rgba(37,99,235,0.18);filter:brightness(1.02)}
.btn.secondary{background:transparent;color:var(--accent-2);border:1px solid rgba(30,64,175,0.08);box-shadow:none}

/* Testimonials */
.testimonials-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.testimonial-card{padding:28px;border-radius:14px;background:linear-gradient(180deg,var(--card),#fbfdff);border:1px solid rgba(15,23,36,0.10);box-shadow:0 10px 30px rgba(16,24,40,0.06);min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.testimonial-card .small{margin-top:12px;color:var(--muted)}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:120}
.modal[aria-hidden="false"], .modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,8,20,0.45);backdrop-filter:blur(2px)}
.modal-dialog{position:relative;background:var(--card);border-radius:12px;padding:20px;max-width:520px;width:92%;box-shadow:0 18px 42px rgba(2,8,6,0.36);transform:translateY(12px);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.2,1),opacity .16s ease}
.modal.open .modal-dialog{transform:none;opacity:1}
.modal-close{position:absolute;right:12px;top:12px;border:0;background:transparent;font-size:18px;cursor:pointer}
/* Modal buttons: polished, accessible, consistent with site */
.modal .btn{min-width:110px;padding:10px 16px;border-radius:12px;font-weight:800;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.modal .btn:focus{outline:3px solid rgba(37,99,235,0.12);outline-offset:3px}
.modal .btn.btn-secondary{background:transparent;color:var(--accent-2);border:1px solid rgba(30,64,175,0.08);box-shadow:none}
.modal .btn.btn-secondary:hover{transform:translateY(-3px);filter:brightness(0.98)}
.modal .enroll-btn, .modal .btn.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-3));color:#fff;padding:10px 18px;border-radius:12px;box-shadow:0 14px 40px rgba(37,99,235,0.12);border:0}
.modal .enroll-btn:hover, .modal .btn.btn-primary:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(37,99,235,0.18);filter:brightness(1.02)}
#booking-form .btn{width:100%;padding:12px 18px;border-radius:12px}
/* Section headings */
.section-header{display:flex;align-items:end;gap:18px;justify-content:space-between;margin-bottom:20px}
.section-header h2{margin:0;font-size:22px}
.section-sub{color:var(--muted);font-size:14px}
section{padding:72px 0}
.about-card{max-width:920px;margin:0 auto;background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,252,255,0.98));padding:26px;border-radius:14px;box-shadow:var(--soft-shadow);border:1px solid rgba(15,23,36,0.10);display:flex;flex-direction:column;gap:12px;min-height:260px}
.about p{max-width:100%;margin:0;color:var(--muted);font-size:16px}
.about .about-cta{margin-top:8px}
/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:20px;align-items:stretch}
/* keep a clear 3-column layout on wider viewports for consistency */
@media(min-width:880px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
.card{padding:20px;border-radius:12px;background:var(--card);border:1px solid rgba(15,23,36,0.10);box-shadow:var(--soft-shadow);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(37,99,235,0.12)}
.card h3{font-size:18px;color:var(--text);line-height:1.2;margin:0 0 10px}
.card p{color:var(--muted);margin:0} 
.card h3{margin:0 0 8px}
/* Offers: lessons and courses */
.lessons .lang-switch{display:flex;gap:8px;margin:18px 0}
.lang-btn{padding:12px 22px;border-radius:999px;border:1px solid rgba(30,64,175,0.08);background:white;cursor:pointer;font-weight:800;color:var(--muted);font-size:16px;box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform .12s ease,box-shadow .12s ease}
.lang-btn.active{background:var(--accent);color:white;border-color:var(--accent-2);box-shadow:0 8px 18px rgba(37,99,235,0.12)}
.lesson-card{padding:22px;border-radius:12px;background:linear-gradient(180deg,var(--card),#fbfdff);border:1px solid rgba(15,23,36,0.10);text-align:center;box-shadow:var(--soft-shadow);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
.lesson-card .price{font-weight:800;color:var(--accent-2);margin:12px 0;font-size:18px}
.lesson-card p{color:var(--muted)}
.reserve-btn{display:inline-block;background:linear-gradient(90deg,#60a5fa,#3b82f6);color:#fff;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;box-shadow:0 8px 20px rgba(59,130,246,0.12);border:0}
.reserve-btn:hover{transform:translateY(-3px);filter:brightness(1.06);box-shadow:0 18px 40px rgba(59,130,246,0.14)}
.courses .card{display:flex;flex-direction:column;justify-content:space-between}
.courses .card .price{font-weight:800;color:var(--accent-2);margin-top:12px}
/* Teachers */
.teacher-list{display:block}
.teacher-carousel{position:relative;display:flex;align-items:center}
.teacher-track{display:flex;gap:20px;overflow-x:auto;padding:12px 6px;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.teacher-track::-webkit-scrollbar{height:10px}
.teacher-track::-webkit-scrollbar-thumb{background:rgba(15,23,36,0.06);border-radius:999px}
.teacher{flex:0 0 calc(50% - 10px);min-width:260px;scroll-snap-align:start;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:12px;background:var(--card);border:1px solid rgba(15,23,36,0.04);box-shadow:var(--soft-shadow);text-align:center}

/* Testimonials carousel */
.testimonials-carousel{position:relative;display:flex;align-items:center}
.testimonial-track{display:flex;gap:18px;overflow-x:auto;padding:12px 6px;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.testimonial-track::-webkit-scrollbar{height:9px}
.testimonial-track::-webkit-scrollbar-thumb{background:rgba(15,23,36,0.06);border-radius:999px}
.testimonial{flex:0 0 300px;min-width:300px;scroll-snap-align:start;display:flex}
.testimonial-card{width:100%;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;border-radius:12px;background:var(--card);border:1px solid rgba(15,23,36,0.04);box-shadow:var(--soft-shadow)}
.testimonial-card p.muted{font-style:italic;color:var(--muted);margin:0}
.testimonial-card .small{margin-top:12px;color:var(--muted);font-weight:700}
@media(max-width:720px){
  .testimonial{flex:0 0 80%;min-width:80%}
}
.contact .container{max-width:920px;margin:0 auto;padding:0 26px;display:block}
.contact-cta-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.contact-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-3));color:white;text-decoration:none;font-weight:800;box-shadow:0 14px 40px rgba(37,99,235,0.12);transition:transform .12s ease,box-shadow .12s ease}
.contact-cta:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(37,99,235,0.18)}
.contact-cta.contact-cta-outline{background:transparent;color:var(--accent-2);border:1px solid rgba(30,64,175,0.08);box-shadow:none}
.contact .contact-form{max-width:720px;margin:0 auto;display:grid;gap:12px}
.contact .contact-form .btn{width:100%}
/* small screens: CTA buttons full width */
@media(max-width:720px){
  .contact-cta{flex:0 0 100%;justify-content:center}
  .contact .container{padding:0 18px}
}
/* ensure carousel arrows are on top and always clickable */
.carousel-btn{z-index:6;position:relative}
.teacher-track{z-index:1}.teacher-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px;position:relative}
.teacher-photo{width:62%;height:auto;aspect-ratio:1/1;border-radius:10px;object-fit:cover;box-shadow:0 14px 34px rgba(10,20,40,0.08)}
.teacher-info h3{margin:0 0 6px;font-size:16px}
.teacher-role{font-size:13px;color:var(--accent-2);font-weight:700;margin-bottom:6px}
.teacher-info p{margin:0;color:var(--text);line-height:1.4;font-size:14px}
.teacher-actions{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .12s ease,transform .12s ease}
.teacher-card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(10,20,40,0.12)}
.teacher-card:hover .teacher-actions{opacity:1;transform:translateX(-50%) translateY(0)}
.btn.small{padding:8px 12px;font-size:14px;border-radius:10px;padding-left:14px;padding-right:14px}

.carousel-btn{background:var(--card);border:1px solid rgba(15,23,36,0.06);border-radius:999px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:var(--soft-shadow);transition:transform .12s ease}
.carousel-btn:hover{transform:translateY(-3px)}
.carousel-btn.left{margin-right:8px}
.carousel-btn.right{margin-left:8px}

/* contact info */
.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:18px}
.contact-item{background:transparent;padding:8px;border-radius:10px}
.contact-item a{display:inline-block;margin-left:8px;color:var(--accent-2);font-weight:700}
.contact-item.social a{display:inline-block;margin-left:8px;color:var(--muted);font-weight:600}

/* Language selector */
.site-lang{position:relative;margin-left:12px}
.site-lang-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid rgba(15,23,36,0.04);background:var(--card);cursor:pointer;font-weight:700}
.site-lang-arrow{opacity:0.7}
.site-lang-menu{position:absolute;right:0;top:54px;background:var(--card);border-radius:10px;padding:6px;list-style:none;border:1px solid rgba(15,23,36,0.06);box-shadow:var(--shadow);display:none;margin:0}
.site-lang-menu[aria-hidden="false"], .site-lang-menu.open{display:block}
.site-lang-menu li{padding:8px 12px;cursor:pointer;border-radius:8px}
.site-lang-menu li:hover{background:rgba(37,99,235,0.04)}
/* Contact form */
.contact-form{max-width:640px;margin:6px auto 0;display:grid;gap:12px}
.contact-form input,.contact-form textarea{padding:12px;border:1px solid rgba(15,23,36,0.06);border-radius:10px}
.contact-form label{font-size:13px;color:var(--muted);font-weight:600}
.contact-form .btn{width:fit-content;padding:12px 24px}
/* Footer */
.site-footer{padding:36px 0;background:transparent;border-top:1px solid rgba(15,23,36,0.04);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 360px;gap:22px;align-items:start}
.footer-col h4{margin:0 0 10px;font-size:15px}
.newsletter-form{display:flex;gap:8px;align-items:center}
.newsletter-form input{padding:10px;border:1px solid rgba(15,23,36,0.06);border-radius:10px;flex:1}
.newsletter-form .btn.small{white-space:nowrap}
/* Responsive */
@media(min-width:880px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .nav-toggle{display:none}
  .site-nav{display:flex !important}
  .teacher-list{grid-template-columns:repeat(3,1fr)}
  .lessons .grid,.courses .grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:879px){
  .site-nav{display:none;flex-direction:column;background:rgba(255,255,255,0.96);position:absolute;right:18px;top:72px;padding:12px;border-radius:12px;box-shadow:0 12px 26px rgba(16,24,40,0.12)}
  .site-nav.open{display:flex}
  .hero{padding:60px 0}
}
@media(max-width:520px){
  .teacher{flex:0 0 calc(100% - 20px);min-width:180px}
  .hero-content{padding:20px}
  .hero h1{font-size:28px}
  .testimonial-card{padding:20px}
  .footer-grid{grid-template-columns:1fr;gap:12px}
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .fade-in, .slide-up, .modal-dialog, .teacher-card, .testimonial, .card {animation-duration: 0s !important; transition: none !important}
}

/* Utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.fade-in{animation:fadeIn .36s ease both;animation-delay:var(--a-delay,0ms)}
.slide-up{animation:slideUp .42s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--a-delay,0ms)}
/* smoother transforms and smaller translate distances to feel snappier */
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
.card-cta{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px}
.btn-small{padding:8px 12px;font-size:13px;border-radius:10px;background:transparent;color:var(--accent-2);border:1px solid rgba(30,64,175,0.08);font-weight:700;cursor:pointer}
.details-body{margin-top:12px}
.details-heading{margin:0 0 8px;font-size:18px}
.details-desc{color:var(--muted);line-height:1.6}
.details-desc ul{margin:10px 0 0 18px;padding:0;color:var(--muted);}
.details-desc li{margin:8px 0}
.details-desc li::marker{color:var(--accent-2);font-weight:700}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.enroll-btn{background:linear-gradient(90deg,var(--accent),var(--accent-3));color:#fff;padding:10px 16px;border-radius:12px;font-weight:800}
.enroll-btn:hover{transform:translateY(-3px)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}