html{
scroll-behavior:smooth;
}
:root{
--pink:#ff2d8a;
--navy:#0b2545;
--navy-2:#20114a;
--muted:#64748b;
--bg:#f4f8ff;
--line:rgba(19, 58, 110, 0.1);
--surface:rgba(255,255,255,0.08);
--surface-strong:rgba(255,255,255,0.12);
--glass-border:rgba(255,255,255,0.18);
--shadow:0 28px 80px rgba(11,37,69,0.16);
}
*{box-sizing:border-box}
body{
font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
margin:0;
color:var(--navy);
background:
radial-gradient(circle at top left, rgba(255,45,138,0.10), transparent 28%),
linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
min-height:100vh;
overflow-x:hidden;
position:relative;
}
body::before,
body::after{
content:"";
position:fixed;
width:34vw;
height:34vw;
border-radius:50%;
pointer-events:none;
z-index:-1;
filter:blur(70px);
opacity:.45;
animation:drift 16s ease-in-out infinite;
}
body::before{
top:-8vw;
left:-10vw;
background:rgba(255,45,138,0.14);
}
body::after{
right:-8vw;
bottom:-10vw;
background:rgba(22,101,178,0.12);
animation-delay:-8s;
}
a{color:inherit;transition:color .25s ease,opacity .25s ease,transform .25s ease}
a:hover{opacity:.95}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{0%{opacity:0;transform:translateY(12px) scale(.992)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14px,-10px,0) scale(1.02)}}
.reveal.visible .program-card,
.reveal.visible .course-card,
.reveal.visible .promo-card,
.reveal.visible .camp-card,
.reveal.visible .testimonial-card,
.reveal.visible .result-card,
.reveal.visible .summer-card,
.reveal.visible .footer-card,
.reveal.visible .location-info,
.reveal.visible .benefit-card,
.reveal.visible .stat-card,
.reveal.visible .hero-highlights div,
.reveal.visible .detail-highlights div,
.reveal.visible .footer-link{animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both}
.reveal.visible .programs-overview .program-card:nth-child(2){animation-delay:.08s}
.reveal.visible .programs-overview .program-card:nth-child(3){animation-delay:.16s}
.reveal.visible .programs-overview .program-card:nth-child(4){animation-delay:.24s}
.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(9,24,58,0.78);
backdrop-filter:blur(20px);
color:#fff;
border-bottom:1px solid rgba(255,255,255,0.12);
box-shadow:0 30px 80px rgba(2,9,28,0.24);
transition:padding .3s ease,background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.programs-overview .program-card,
.course-card,
.promo-card,
.camp-card,
.location-info,
.testimonial-card,
.benefit-card,
.result-card,
.footer-card,
.hero-highlights div,
.detail-highlights div,
.section-slate .info-grid > div,
.instructors-section .info-grid div{
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,background .45s ease,border-color .45s ease;
will-change:transform,box-shadow;
}
.programs-overview .program-card:hover,
.course-card:hover,
.promo-card:hover,
.camp-card:hover,
.location-info:hover,
.testimonial-card:hover,
.benefit-card:hover,
.result-card:hover,
.footer-card:hover,
.hero-highlights div:hover,
.detail-highlights div:hover,
.section-slate .info-grid > div:hover,
.instructors-section .info-grid div:hover{
transform:translateY(-4px) scale(1.004);
}
.site-header.scrolled{
padding:6px 0;
background:rgba(9,24,58,0.72);
box-shadow:0 20px 50px rgba(2,9,28,0.22);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px;padding:14px 0;position:relative}
.logo{display:flex;align-items:center;flex-shrink:0;background:transparent}
.logo img{height:126px;display:block;filter:drop-shadow(0 18px 44px rgba(11,37,69,0.35));transition:transform .3s ease}
.logo img:hover{transform:scale(1.02)}
.burger-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);border-radius:16px;cursor:pointer;flex-shrink:0;backdrop-filter:blur(12px)}
.burger-toggle svg{display:block;width:30px;height:30px;overflow:visible}
.burger-toggle .bt-line{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;transform-origin:16px 16px}
.burger-toggle.active .bt-line1{transform:translateY(6px) rotate(45deg)}
.burger-toggle.active .bt-line2{opacity:0}
.burger-toggle.active .bt-line3{transform:translateY(-6px) rotate(-45deg)}
.nav{display:flex;align-items:center;justify-content:center;gap:16px;flex:1;margin:0 16px;flex-wrap:nowrap;white-space:nowrap;order:2}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:20px;text-decoration:none;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;box-shadow:0 0 0 rgba(255,255,255,0)}
.nav a:hover{color:#fff;background:rgba(255,255,255,0.16);transform:translateY(-1px) scale(1.02);box-shadow:0 12px 30px rgba(255,255,255,0.16)}
.nav a:focus-visible{outline:2px solid rgba(255,255,255,0.5);outline-offset:4px}
.mobile-nav-overlay{position:fixed;inset:0;background:rgba(2,8,23,0.54);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:45}
.mobile-nav-overlay.visible{opacity:1;pointer-events:auto}
.mobile-nav-close{display:none}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;padding-left:18px;border-left:1px solid rgba(255,255,255,0.14);order:3}
.lang-switcher,.nav-lang-switcher{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,0.16);color:#fff;background:rgba(255,255,255,0.10);font-size:.92rem;cursor:pointer;white-space:nowrap;letter-spacing:.08em;box-shadow:0 10px 24px rgba(0,0,0,0.12);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.lang-switcher:hover,.nav-lang-switcher:hover{transform:translateY(-1px);background:rgba(255,255,255,0.16);box-shadow:0 14px 30px rgba(255,255,255,0.14)}
.lang-option{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:8px 10px;border-radius:999px;color:rgba(255,255,255,0.72);font-weight:600;transition:color .25s ease,transform .25s ease,background .25s ease,box-shadow .25s ease}
.lang-option.is-active{color:#fff;background:rgba(255,255,255,0.16);box-shadow:0 8px 18px rgba(0,0,0,0.14)}
.lang-option:hover{transform:translateY(-1px)}
.lang-separator{color:rgba(255,255,255,0.45);font-size:.9rem;line-height:1}
.nav-lang-switcher{display:none}
@media(max-width:980px){
.site-header{
background:rgba(9,24,58,0.95);
box-shadow:0 18px 42px rgba(2,9,28,0.28);
}
.container{padding:0 16px}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:0;
min-height:74px;
gap:8px;
}
.logo{
display:flex;
align-items:center;
flex-shrink:0;
margin-right:0;
order:1;
align-self:center;
}
.logo img{height:84px;max-height:84px;filter:drop-shadow(0 10px 22px rgba(11,37,69,0.22))}
.header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
margin-left:auto;
padding-left:0;
border-left:0;
flex-shrink:0;
order:2;
align-self:center;
}
.header-actions .lang-switcher{
order:1;
}
.header-actions .burger-toggle{
order:2;
margin-left:0;
}
.burger-toggle{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
padding:0;
margin:0;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
backdrop-filter:none;
order:3;
align-self:center;
}
.nav{position:fixed;top:0;right:0;bottom:0;width:min(84vw,320px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:linear-gradient(180deg,#08111f 0%,#13264e 100%);padding:92px 20px 24px;border-left:1px solid rgba(255,255,255,0.12);box-shadow:0 28px 60px rgba(0,0,0,0.28);backdrop-filter:blur(14px);transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.9,.2,1),opacity .35s ease;z-index:60}
.nav.open{transform:translateX(0);opacity:1;pointer-events:auto}
.nav a{width:100%;padding:14px 16px;border-radius:18px;justify-content:flex-start}
.lang-switcher,
.nav-lang-switcher{
padding:4px 6px;
border:0;
background:transparent;
box-shadow:none;
gap:4px;
}
.lang-switcher:hover,
.nav-lang-switcher:hover{transform:none;background:transparent;box-shadow:none}
.lang-option{
min-width:auto;
padding:4px 2px;
font-size:.9rem;
color:rgba(255,255,255,0.82);
}
.lang-option.is-active{background:transparent;color:#fff;font-weight:700}
.nav-lang-switcher{display:none}
}
@media(max-width:760px){
.hero{padding:44px 0 36px}
.hero-inner{flex-direction:column;gap:24px;align-items:stretch}
.hero-copy{max-width:none}
.hero-copy h1{font-size:clamp(1.65rem,5.6vw,2.15rem);line-height:1.2;margin-bottom:12px}
.hero-copy p{font-size:0.98rem;line-height:1.7}
.hero-ctas{flex-direction:column;align-items:stretch}
.hero-panel{width:100%;max-width:none}
.hero-inner .hero-panel{animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) .15s both}
.hero-highlights{grid-template-columns:repeat(3,1fr);gap:10px}
.hero-highlights div{padding:14px 10px}
.hero-stat-icon{font-size:17px;margin-bottom:6px}
.hero-highlights strong{font-size:17px}
.hero-highlights span{font-size:.76rem}
.section{padding:60px 0}
.section-title{font-size:clamp(1.5rem,5.5vw,1.9rem)}
.section-subtitle{font-size:0.96rem;line-height:1.7;margin-bottom:22px}
.programs-overview .program-grid{grid-template-columns:1fr;gap:16px}
.programs-overview .program-card{min-height:auto;padding:22px 20px}
.course-grid{grid-template-columns:1fr;gap:22px}
.course-card-media{height:158px}
.course-card-body{padding:32px 20px 20px}
.promo-card{grid-template-columns:1fr;padding:24px 20px;gap:18px}
.promo-copy h2{font-size:clamp(1.4rem,5.2vw,1.8rem)}
.promo-actions{flex-direction:column;align-items:stretch}
.camp-grid,.location-grid{grid-template-columns:1fr;gap:18px}
.camp-photo img{height:260px}
.map-small{width:100%;height:360px}
.testimonials-grid{grid-template-columns:1fr;gap:12px}
.testimonial-card{padding:14px}
.footer-inner{flex-direction:column;align-items:stretch}
.footer-card{min-width:0;max-width:none;width:100%}
}
@media(max-width:480px){
.container{padding:0 14px}
.hero-badge{padding:9px 14px;font-size:12px}
.btn{min-height:44px;padding:11px 16px;font-size:0.95rem}
.course-card,.programs-overview .program-card,.promo-card,.camp-card,.location-info,.footer-card{border-radius:18px}
.programs-overview .program-card li,.course-card-body p{font-size:0.88rem}
.course-card-media{height:140px}
.course-card-icon{width:40px;height:40px;font-size:1rem;bottom:-18px;left:16px}
.course-card-body{padding:28px 16px 18px}
.section{padding:54px 0}
}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border-radius:20px;font-weight:600;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease;box-shadow:0 10px 24px rgba(11,37,69,0.10);border:1px solid transparent;will-change:transform,box-shadow}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);transform:translateX(-120%);transition:transform .55s ease}
.btn:hover{transform:translateY(-2px) scale(1.014) rotate(-0.18deg);box-shadow:0 14px 30px rgba(11,37,69,0.14)}
.btn:hover::before{transform:translateX(120%)}
.btn:focus-visible{outline:2px solid rgba(255,45,138,0.35);outline-offset:3px;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,0.10);color:#fff;border-color:rgba(255,255,255,0.18)}
.btn-primary{background:linear-gradient(135deg,rgba(255,45,138,0.98),#df2a96);color:#fff;box-shadow:0 18px 42px rgba(255,45,138,0.22)}
.btn-primary:hover{box-shadow:0 20px 52px rgba(255,45,138,0.28);background:linear-gradient(135deg,rgba(255,45,138,1),#e62f9f)}
.btn-outline{background:transparent;border:2px solid var(--pink);color:#fff}
.btn-outline:hover{background:rgba(255,45,138,0.10);box-shadow:0 12px 30px rgba(255,45,138,0.16)}
.hero{
position:relative;
padding:64px 0;
background:linear-gradient(135deg,#0a1230 0%,#121a3c 45%,#1a1140 100%);
background-size:220% 220%;
animation:heroGradientShift 18s ease-in-out infinite;
overflow:hidden;
isolation:isolate;
}
@keyframes heroGradientShift{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
.hero::before,
.hero::after{
content:"";
position:absolute;
border-radius:50%;
filter:blur(110px);
pointer-events:none;
z-index:-1;
opacity:.4;
animation:heroGlowDrift 15s ease-in-out infinite;
}
.hero::before{
width:34vw;height:34vw;
top:-14%;left:-6%;
background:radial-gradient(circle,rgba(255,45,138,0.24),transparent 70%);
}
.hero::after{
width:30vw;height:30vw;
bottom:-18%;right:-4%;
background:radial-gradient(circle,rgba(139,92,246,0.2),transparent 70%);
animation-delay:-7s;
}
@keyframes heroGlowDrift{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(18px,-16px,0) scale(1.08)}
}
.hero-particles{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-particles span{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.65);box-shadow:0 0 14px 3px rgba(255,255,255,0.3);opacity:0;animation:heroParticlePulse 8s ease-in-out infinite}
.hero-particles span:nth-child(1){top:14%;left:8%;animation-delay:0s}
.hero-particles span:nth-child(2){top:24%;left:82%;animation-delay:1.3s}
.hero-particles span:nth-child(3){top:68%;left:16%;animation-delay:2.6s}
.hero-particles span:nth-child(4){top:78%;left:68%;animation-delay:3.9s}
.hero-particles span:nth-child(5){top:42%;left:48%;animation-delay:5.2s}
.hero-particles span:nth-child(6){top:56%;left:90%;animation-delay:.7s}
@keyframes heroParticlePulse{
0%,100%{opacity:0;transform:translateY(0) scale(.8)}
50%{opacity:.8;transform:translateY(-16px) scale(1.2)}
}
.hero-inner{position:relative;z-index:1;display:flex;gap:36px;align-items:center;justify-content:space-between}
.hero-copy{flex:1;max-width:620px;color:#fff}
.hero-copy h1{font-size:clamp(2.1rem,3.1vw,2.85rem);line-height:1.16;margin:0 0 16px;color:#fff;letter-spacing:-.015em;font-weight:700;text-shadow:0 10px 30px rgba(0,0,0,0.14)}
.hero-inner .hero-copy h1{animation-delay:.1s}
.hero-title-highlight{background:linear-gradient(135deg,#ff2d8a,#c084fc);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,45,138,0.35))}
.hero-copy p{color:rgba(255,255,255,0.78);margin:0 0 24px;font-size:1.02rem;line-height:1.75;max-width:540px}
.hero-inner .hero-copy p{animation:heroFadeUp .7s cubic-bezier(.22,1,.36,1) .22s both}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero-inner .hero-ctas{animation:heroFadeUp .7s cubic-bezier(.22,1,.36,1) .5s both}
.hero-inner .hero-ctas .btn{padding:14px 26px;border-radius:999px;font-size:1rem;letter-spacing:.005em}
.hero-inner .hero-ctas .btn-primary{box-shadow:0 20px 50px rgba(255,45,138,0.3)}
.hero-inner .hero-ctas .btn-primary:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 26px 60px rgba(255,45,138,0.42)}
.hero-inner .hero-ctas .btn-outline:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 44px rgba(255,255,255,0.14)}
.hero-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.hero-inner .hero-highlights div{animation:heroFadeUp .6s cubic-bezier(.22,1,.36,1) both}
.hero-inner .hero-highlights div:nth-child(1){animation-delay:.34s}
.hero-inner .hero-highlights div:nth-child(2){animation-delay:.4s}
.hero-inner .hero-highlights div:nth-child(3){animation-delay:.46s}
.hero-highlights div{background:rgba(255,255,255,0.07);padding:14px 12px;border-radius:18px;backdrop-filter:blur(10px);transition:transform .32s ease,background .32s ease,box-shadow .32s ease;box-shadow:0 10px 24px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.08)}
.hero-highlights div:hover{transform:translateY(-6px) scale(1.02);background:rgba(255,255,255,0.11);box-shadow:0 22px 46px rgba(2,9,28,0.3),0 0 26px rgba(255,45,138,0.22)}
.hero-stat-icon{display:block;font-size:20px;margin-bottom:8px;line-height:1}
.hero-highlights strong{display:block;font-size:22px;color:#fff;margin-bottom:6px}
.hero-highlights span{display:block;color:rgba(255,255,255,0.75);font-size:.88rem}
.hero-panel{display:grid;gap:18px;width:460px;max-width:100%;position:relative}
.hero-inner .hero-panel{opacity:0;animation:heroPanelIn .8s cubic-bezier(.22,1,.36,1) .2s forwards}
.hero-panel::before{content:"";position:absolute;inset:-14px;background:radial-gradient(circle at 30% 25%,rgba(255,45,138,0.2),transparent 62%),radial-gradient(circle at 80% 80%,rgba(139,92,246,0.16),transparent 65%);filter:blur(38px);z-index:-1;border-radius:40px;opacity:.65}
.hero-panel-top{background:#fff;border-radius:34px;overflow:hidden;box-shadow:0 26px 70px rgba(2,9,28,0.28),0 0 0 1px rgba(255,255,255,0.06)}
.hero-panel-top img,.camp-photo img,.detail-image-card img,.map-small,.summer-hero-visual img,.result-card img,.summer-card img{width:100%;display:block;transition:transform .45s ease,filter .45s ease,box-shadow .45s ease}
.hero-panel-top:hover img,.camp-photo:hover img,.detail-image-card:hover img,.map-card:hover .map-small,.summer-hero-visual:hover img,.result-card:hover img,.summer-card:hover img{transform:scale(1.03);filter:saturate(1.04)}
.hero-panel-top:hover img{transform:scale(1.02)}
.hero-panel-bottom{background:#0b2545;padding:24px 18px;border-radius:34px;color:#fff;box-shadow:0 20px 60px rgba(0,0,0,0.15)}
.hero-panel-bottom p{margin:0;font-size:16px;line-height:1.75}
@keyframes heroFadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroPanelIn{0%{opacity:0;transform:translateX(30px)}100%{opacity:1;transform:translateX(0)}}
.home-video-section{position:relative;padding-top:54px;padding-bottom:88px;background:linear-gradient(145deg,#0a1230 0%,#15143d 52%,#241447 100%);color:#fff;overflow:hidden;isolation:isolate}
.home-video-section::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:64px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg) 62%);pointer-events:none;z-index:0}
.home-video-inner{position:relative;z-index:1}
.home-video-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,330px);align-items:flex-start;column-gap:clamp(28px,4vw,52px)}
.home-video-copy{max-width:100%}
.home-video-section .section-title{color:#fff;text-align:left;padding-left:20px;border-left:4px solid var(--pink);line-height:1.18;text-transform:uppercase;margin-top:-8px;margin-bottom:16px}
.home-video-accent,.home-video-text span{color:var(--pink)}
.home-video-text{max-width:560px;margin:0;color:rgba(255,255,255,0.82);font-size:1rem;line-height:1.7}
.home-video-text span{font-weight:600}
.home-video-support{max-width:560px;margin:12px 0 0;color:rgba(255,255,255,0.72);font-size:.96rem;line-height:1.6}
.home-video-support--small{margin-top:8px}
.home-video-card{display:flex;align-items:flex-start;justify-content:center;width:100%;padding-top:8px}
.home-video-frame{position:relative;width:100%;max-width:320px;min-width:280px;aspect-ratio:9 / 16;border-radius:24px;background:#071226;box-shadow:0 18px 44px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.12);z-index:2;overflow:hidden}
.home-video-frame iframe{position:relative;z-index:3;width:100%;height:100%;display:block;border:0;border-radius:24px;pointer-events:auto;background:#000;overflow:hidden}
.home-video-preview-image,.home-video-play{display:none}
.home-video-embed{display:block}
.courses{background:linear-gradient(180deg,rgba(255,255,255,0.72),rgba(238,245,255,0.86));border-radius:0;box-shadow:none;border-top:1px solid rgba(17,29,63,0.08)}
@media (min-width: 1024px){
.home-video-frame{max-width:360px;min-width:0;aspect-ratio:16 / 11;border-radius:26px;overflow:hidden;box-shadow:0 26px 54px rgba(0,0,0,0.26)}
.home-video-preview-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px}
.home-video-play{display:inline-flex;align-items:center;justify-content:center;gap:10px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:16px 28px;border:0;border-radius:999px;background:rgba(255,255,255,0.95);color:#111827;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 20px 40px rgba(5,7,12,0.3);transition:transform .22s ease,box-shadow .22s ease;background:linear-gradient(135deg,#fff,#e5e7eb)}
.home-video-play:hover{transform:translate(-50%,-50%) scale(1.03);box-shadow:0 24px 48px rgba(5,7,12,0.38)}
.home-video-play span:first-child{font-size:1.2rem;line-height:1}
.home-video-embed{display:none}
.home-video-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 32px 40px;opacity:0;visibility:hidden;pointer-events:none;z-index:1000;transition:opacity .22s ease,visibility .22s ease;overflow:visible}
.home-video-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.home-video-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.8);backdrop-filter:blur(4px)}
.home-video-modal-dialog{position:relative;z-index:1;width:min(100%, 1200px);max-width:1200px;max-height:92vh;display:flex;align-items:center;justify-content:center;overflow:visible}
.home-video-modal-close{position:absolute;top:-16px;right:-16px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#111827;font-size:1.4rem;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,0.24);z-index:2}
.home-video-modal-close:hover{transform:scale(1.05)}
.home-video-modal-frame{position:relative;width:min(100vw - 96px, 1200px);height:clamp(420px, 76vh, 760px);min-height:420px;max-height:86vh;border-radius:22px;overflow:visible;background:#000;box-shadow:0 28px 70px rgba(0,0,0,0.45)}
.home-video-modal-frame iframe{width:100%;height:100%;display:block;border:0;background:#000;min-height:420px}
}
@media (max-width: 1023px){
.home-video-modal,
.home-video-modal-backdrop,
.home-video-modal-dialog,
.home-video-modal-close,
.home-video-modal-frame,
.home-video-play,
.home-video-preview-image{
display:none !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
}
.home-video-section + #services.courses{margin-top:-2px;border-radius:0;box-shadow:none}
.section{padding:78px 0;position:relative}
.section-title{font-size:clamp(1.8rem,2.3vw,2.25rem);color:var(--navy);margin:0 0 14px;text-align:center;font-weight:700;letter-spacing:-.02em}
.section-subtitle{max-width:760px;margin:0 auto 30px;color:var(--muted);text-align:center;line-height:1.8;font-size:1rem}
.section-title,.section-subtitle{transition:transform .35s ease,opacity .35s ease}
.section:hover .section-title,.section:hover .section-subtitle{transform:translateY(-2px)}
.hero-copy h1,.detail-copy h1,.summer-copy h1{animation:textReveal .8s cubic-bezier(.22,1,.36,1) both}
@keyframes textReveal{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
/* English section and slate variants removed to restore original homepage styling */
.programs-overview .program-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0}
.programs-overview .program-card{position:relative;padding:30px 26px 28px;color:#ffffff;min-height:336px;display:flex;flex-direction:column;justify-content:flex-start;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,0.20);box-shadow:0 18px 42px rgba(11,37,69,0.16), inset 0 1px 0 rgba(255,255,255,0.16);transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s ease,background .34s ease,border-color .34s ease,filter .34s ease;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);isolation:isolate}
.programs-overview .program-card::before{content:"";position:absolute;top:-36px;right:-36px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.26),transparent 62%);filter:blur(18px);pointer-events:none;transition:transform .4s ease,opacity .4s ease;opacity:0.9}
.programs-overview .program-card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.14),transparent 55%);pointer-events:none;z-index:-1}
.programs-overview .program-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 28px 72px rgba(11,37,69,0.22), inset 0 1px 0 rgba(255,255,255,0.22);border-color:rgba(255,255,255,0.32);filter:saturate(1.04)}
.programs-overview .program-card:hover::before{transform:scale(1.08)}
.programs-overview .program-card h3{color:#fff;margin:0 0 18px;font-size:1.28rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;font-weight:700;transition:transform .25s ease,letter-spacing .25s ease}
.programs-overview .program-card:hover h3{transform:translateY(-1px);letter-spacing:.08em}
.programs-overview .program-card ul{margin:0;padding:0;list-style:none;color:rgba(255,255,255,0.95);line-height:1.9}
.programs-overview .program-card li{position:relative;margin-bottom:12px;padding-left:26px;font-weight:600;font-size:0.96rem;transition:transform .25s ease,opacity .25s ease}
.programs-overview .program-card:hover li{transform:translateX(1px)}
.programs-overview .program-card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.98);box-shadow:0 0 0 4px rgba(255,255,255,0.12);transition:transform .25s ease,box-shadow .25s ease}
.programs-overview .program-card:hover li::before{transform:scale(1.08);box-shadow:0 0 0 4px rgba(255,255,255,0.16)}
.programs-overview .card-green{background:linear-gradient(135deg,rgba(16,29,55,0.96) 0%,rgba(8,20,52,0.98) 100%)}
.programs-overview .card-yellow{background:linear-gradient(135deg,rgba(29,72,136,0.96) 0%,rgba(8,19,48,0.98) 100%)}
.programs-overview .card-blue{background:linear-gradient(135deg,rgba(18,90,145,0.96) 0%,rgba(8,20,49,0.98) 100%)}
.programs-overview .card-magenta{background:linear-gradient(135deg,rgba(255,45,138,0.95) 0%,rgba(54,19,95,0.98) 100%)}
.programs-overview .card-green:hover{box-shadow:0 30px 74px rgba(45,127,249,0.22), inset 0 1px 0 rgba(255,255,255,0.22)}
.programs-overview .card-yellow:hover{box-shadow:0 30px 74px rgba(56,142,235,0.24), inset 0 1px 0 rgba(255,255,255,0.22)}
.programs-overview .card-blue:hover{box-shadow:0 30px 74px rgba(45,159,235,0.26), inset 0 1px 0 rgba(255,255,255,0.22)}
.programs-overview .card-magenta:hover{box-shadow:0 30px 74px rgba(255,45,138,0.32), inset 0 1px 0 rgba(255,255,255,0.22)}
.programs-overview .program-icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.28);font-size:1.55rem;margin-bottom:18px;backdrop-filter:blur(6px);box-shadow:0 10px 24px rgba(0,0,0,0.18);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.programs-overview .program-card:hover .program-icon{transform:scale(1.1) rotate(-6deg)}
@media(max-width:1000px){
.programs-overview .program-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.programs-overview .program-grid{grid-template-columns:1fr}
.programs-overview .program-card{min-height:200px;padding:20px}
}
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px}
.course-grid .course-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(160deg,#0b1730 0%,#102247 55%,#170f34 100%);border:1px solid rgba(255,255,255,0.08);border-radius:26px;box-shadow:0 20px 50px rgba(2,9,28,0.32);transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s cubic-bezier(.2,.8,.2,1),border-color .38s ease}
.course-grid .course-card:hover{transform:translateY(-10px);box-shadow:0 30px 64px rgba(255,45,138,0.22),0 22px 54px rgba(45,127,249,0.16),0 18px 46px rgba(2,9,28,0.4);border-color:rgba(255,255,255,0.22)}
.course-card-media{position:relative;height:182px;overflow:hidden;background:#0b1730}
.course-card-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.course-card:hover .course-card-media img{transform:scale(1.08)}
.course-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,17,38,0.04) 0%,rgba(9,17,38,0.42) 55%,rgba(8,13,28,0.92) 100%)}
.course-card-icon{position:absolute;left:22px;bottom:-20px;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff2d8a,#c81866);box-shadow:0 14px 28px rgba(255,45,138,0.4);font-size:1.2rem;z-index:2;border:2px solid rgba(255,255,255,0.2);transition:transform .35s ease,box-shadow .35s ease}
.course-card:hover .course-card-icon{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 34px rgba(255,45,138,0.5)}
.course-card-body{padding:34px 24px 24px;position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
.course-card-body h3{margin:0 0 8px;color:#fff;font-size:1.18rem;font-weight:700;letter-spacing:.005em;line-height:1.28}
.course-card-body p{margin:0 0 18px;color:rgba(255,255,255,0.68);line-height:1.6;font-size:.9rem;flex:1}
.course-card-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:#ff9fc9;font-weight:700;font-size:.88rem;text-decoration:none;transition:gap .3s ease,color .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}
.course-card-arrow{display:inline-block;transition:transform .3s ease}
.course-card-link:hover{color:#fff;gap:12px;background:linear-gradient(135deg,rgba(255,45,138,0.9),rgba(200,24,102,0.9));border-color:rgba(255,255,255,0.3);box-shadow:0 10px 24px rgba(255,45,138,0.35)}
.course-card-link:hover .course-card-arrow{transform:translateX(3px)}
.course-card-link:focus-visible{outline:2px solid rgba(255,111,179,0.6);outline-offset:4px;border-radius:999px}
.reveal.visible .course-grid .course-card:nth-child(1){animation-delay:0s}
.reveal.visible .course-grid .course-card:nth-child(2){animation-delay:.1s}
.reveal.visible .course-grid .course-card:nth-child(3){animation-delay:.2s}
.reveal.visible .course-grid .course-card:nth-child(4){animation-delay:.3s}
.reveal.visible .course-grid .course-card:nth-child(5){animation-delay:.4s}
.reveal.visible .course-grid .course-card:nth-child(6){animation-delay:.5s}
@media(max-width:980px){
.course-grid{grid-template-columns:repeat(2,1fr);gap:26px}
}
.btn-small{border-radius:18px}
.promo-card{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;padding:30px 32px;border-radius:28px;background:linear-gradient(135deg,#0b1533 0%,#13264e 55%,#163765 100%);box-shadow:0 28px 80px rgba(11,37,69,0.18);border:1px solid rgba(255,255,255,0.12);position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}
.promo-card:hover{transform:translateY(-4px) scale(1.006);box-shadow:0 28px 70px rgba(11,37,69,0.2)}
.promo-card::before{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(233,30,99,0.18);filter:blur(8px)}
.promo-card::after{content:"";position:absolute;left:-30px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,0.10);filter:blur(8px)}
.promo-copy{position:relative;z-index:1}
.promo-copy h2{margin:0 0 12px;font-size:clamp(1.7rem,2.5vw,2.3rem);color:#fff;line-height:1.2}
.promo-copy p{margin:0 0 18px;color:rgba(255,255,255,0.82);line-height:1.8;max-width:620px}
.promo-actions{display:flex;flex-wrap:wrap;gap:12px}
.promo-highlights{display:grid;gap:12px;position:relative;z-index:1}
.promo-highlight{background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:16px 18px;backdrop-filter:blur(8px)}
.promo-highlight strong{display:block;color:#fff;margin-bottom:6px;font-size:1rem}
.promo-highlight span{display:block;color:rgba(255,255,255,0.8);font-size:0.95rem;line-height:1.6}
.summer-announcement{margin-bottom:48px}
.course-thumb{width:100%;height:140px;object-fit:cover;border-radius:12px;margin:12px 0}
.camp-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:24px;align-items:center}
.camp-photo img{width:100%;height:320px;object-fit:cover;border-radius:18px;box-shadow:0 22px 54px rgba(11,37,69,0.12);transition:transform .4s ease,box-shadow .4s ease}
.camp-photo:hover img{transform:scale(1.02);box-shadow:0 28px 70px rgba(11,37,69,0.18)}
.camp-info{padding:8px 2px}
.camp-card{background:linear-gradient(135deg,#102444 0%,#1a3e68 100%);color:#fff;padding:28px;border-radius:24px;border:1px solid rgba(255,255,255,0.12);box-shadow:0 24px 60px rgba(11,37,69,0.18);transition:transform .28s ease,box-shadow .28s ease}
.camp-card:hover{transform:translateY(-4px) scale(1.006);box-shadow:0 24px 60px rgba(11,37,69,0.16)}
.camp-card h2{margin-top:0;margin-bottom:10px;color:#fff;font-size:1.8rem}
.camp-card p,.camp-card .camp-list{color:rgba(255,255,255,0.92)}
.camp-card a{color:#fff;text-decoration:underline}
.camp-card .btn{display:inline-flex;margin-top:18px;text-decoration:none}
.camp-list{margin:10px 0 12px 18px;padding:0;line-height:1.7}
.camp-list li{margin-bottom:6px}
.section.gallery{padding-top:44px}
.location-grid{display:grid;grid-template-columns:520px 1fr;gap:22px;align-items:start}
.map-card{display:block;position:relative;overflow:hidden;border-radius:18px;box-shadow:0 30px 80px rgba(11,37,69,0.12);text-decoration:none;margin-top:14px;transition:transform .28s ease,box-shadow .28s ease}
.map-card:hover{transform:translateY(-4px) scale(1.004);box-shadow:0 28px 68px rgba(11,37,69,0.13)}
.map-card:hover .map-small{transform:scale(1.02)}
.map-small{width:480px;height:640px;object-fit:cover;border-radius:18px;display:block;transition:transform .35s ease;border:0;background:#f4f7fb}
.map-badge{position:absolute;left:14px;bottom:14px;background:rgba(11,37,69,0.92);color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:0 12px 28px rgba(0,0,0,0.18)}
.location-info{background:linear-gradient(135deg,#0f1f3d 0%,#163b67 100%);color:#fff;padding:24px;border-radius:18px;box-shadow:0 20px 60px rgba(11,37,69,0.16);transition:transform .28s ease,box-shadow .28s ease}
.location-info:hover{transform:translateY(-4px) scale(1.004);box-shadow:0 20px 54px rgba(11,37,69,0.16)}
.location-info h3{margin:0 0 8px;color:#fff}
.location-info p{margin:6px 0;color:rgba(255,255,255,0.9)}
.location-info .muted{color:rgba(255,255,255,0.78)}
.location-info a{color:#fff}
.location-link{display:inline-block;margin-top:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,0.16);color:#fff;text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,0.18)}
.location-link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,37,69,0.18)}
.gis-card{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.16)}
.gis-card strong{display:block;margin-bottom:4px}
.gis-card p{margin:4px 0 8px;color:rgba(255,255,255,0.86)}
.gis-card a{color:#fff;font-weight:600;text-decoration:underline}
#reviews.testimonials{max-width:1000px;margin:0 auto}
#reviews .testimonials-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto;align-items:stretch}
#reviews .testimonial-card{display:flex;flex-direction:column;gap:16px;background:#fff;padding:24px;border-radius:16px;border:1px solid rgba(15,23,42,0.06);box-shadow:0 10px 30px rgba(0,0,0,0.06);transition:transform .28s ease,box-shadow .28s ease;min-width:0;overflow:hidden}
#reviews .testimonial-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(15,23,42,0.08)}
#reviews .testimonial-header{display:flex;align-items:center;gap:14px}
#reviews .testimonial-avatar{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#dfeaf8,#c9d7ea);color:#1e293b;font-size:1.2rem;font-weight:800;box-shadow:inset 0 0 0 1px rgba(15,23,42,0.04)}
#reviews .avatar-alt{background:linear-gradient(135deg,#e8f0f4,#cfe0e7)}
#reviews .avatar-alt-2{background:linear-gradient(135deg,#f5e8f9,#e1d0ea)}
#reviews .avatar-alt-3{background:linear-gradient(135deg,#eef6e8,#dcecc6)}
#reviews .testimonial-author{display:flex;flex-direction:column;gap:4px;min-width:0}
#reviews .testimonial-author h3{margin:0;color:#111827;font-size:1.02rem;font-weight:800;line-height:1.3}
#reviews .testimonial-author span{color:#64748b;font-size:.82rem;font-weight:600}
#reviews .testimonial-rating{font-size:1.05rem;letter-spacing:.12em;color:#f5b942;line-height:1}
#reviews .testimonial-date{color:#475569;font-size:.82rem;font-weight:600;letter-spacing:.01em}
#reviews .testimonial-text{margin:0;color:#1f2937;font-size:1rem;line-height:1.75;font-weight:500}
#reviews .testimonial-controls{display:none !important}
#reviews .testimonial-arrow{display:none !important}
/* Testimonials slider - active at every viewport size */
#reviews .testimonials-grid.is-mobile-slider{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;margin-top:8px;padding:0 12px}
#reviews .testimonials-grid.is-mobile-slider::-webkit-scrollbar{display:none}
#reviews .testimonials-grid.is-mobile-slider .testimonial-card{flex:0 0 100%;min-width:100%;width:min(100%,620px);max-width:620px;margin:0 auto;gap:14px;padding:18px 16px;border-radius:16px;scroll-snap-align:start;box-shadow:0 12px 28px -8px rgba(15,23,42,0.10)}
#reviews .mobile-testimonial-dots{display:none;align-items:center;justify-content:center;gap:9px;margin-top:18px}
#reviews .mobile-testimonial-dots.is-visible{display:flex}
#reviews .mobile-testimonial-dot{width:8px;height:8px;border:0;border-radius:999px;background:rgba(30,41,59,0.22);padding:0;cursor:pointer;transition:transform .25s ease,background .25s ease,width .25s ease}
#reviews .mobile-testimonial-dot.is-active{width:24px;background:#1e293b;transform:scale(1.02)}
@media (max-width: 768px){
#reviews .testimonials-grid{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;padding:0 8px}
#reviews .testimonials-grid.is-mobile-slider{padding:0 8px}
#reviews .testimonials-grid .testimonial-card{width:92%;max-width:100%;margin:0 auto;padding:18px 16px;border-radius:16px;box-shadow:0 10px 26px -10px rgba(15,23,42,0.12)}
#reviews .testimonial-card{flex:0 0 92%;min-width:92%;max-width:95%}
#reviews .testimonial-header{gap:12px}
#reviews .testimonial-avatar{width:44px;height:44px;font-size:1rem}
#reviews .testimonial-author h3{font-size:.97rem}
#reviews .testimonial-author span{font-size:.75rem}
#reviews .testimonial-rating{font-size:1rem;letter-spacing:.1em}
#reviews .testimonial-date{font-size:.76rem}
#reviews .testimonial-text{font-size:.94rem;line-height:1.7}
#reviews .testimonial-controls{gap:14px}
#reviews .testimonial-arrow{width:38px;height:38px;font-size:1.6rem}
#reviews .mobile-testimonial-dots{margin-top:16px}
#reviews .mobile-testimonial-dot{background:rgba(30,41,59,0.24)}
#reviews .mobile-testimonial-dot.is-active{background:#1e293b;width:22px}
}
.site-footer{background:linear-gradient(135deg,#08111f 0%,#111d36 100%);border-top:1px solid rgba(255,255,255,0.08);padding:48px 0;color:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer-brand strong{display:block;font-size:1.2rem;margin-bottom:10px;color:#fff}
.footer-brand p{margin:0;color:rgba(255,255,255,0.78);line-height:1.75}
.footer-note{margin-top:10px;max-width:340px;color:rgba(255,255,255,0.70)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.12)}
.footer-copyright{margin:0;color:rgba(255,255,255,0.66);font-size:.85rem;line-height:1.6}
.footer-legal-links{display:flex;gap:18px}
.footer-legal-links a{color:rgba(255,255,255,0.78);font-size:.85rem;text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.footer-legal-links a:hover{color:#fff}
.footer-logo{display:none}
.footer-contact-line{display:none}
.footer-card{background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.04));border:1px solid rgba(255,255,255,0.12);border-radius:24px;padding:24px;box-shadow:0 28px 80px rgba(0,0,0,0.18);min-width:280px;max-width:360px;transition:transform .28s ease,box-shadow .28s ease}
.footer-card:hover{transform:translateY(-4px) scale(1.004);box-shadow:0 28px 70px rgba(0,0,0,0.18)}
.footer-card-title{display:block;margin-bottom:18px;font-size:1rem;font-weight:700;letter-spacing:.02em;color:#fff;text-transform:uppercase}
.footer-link{display:flex;align-items:center;gap:14px;margin-bottom:12px;color:#fff;text-decoration:none;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,0.08);transition:transform .28s ease,background .28s ease,box-shadow .28s ease}
.footer-link:hover{background:rgba(255,255,255,0.14);transform:translateY(-3px) scale(1.004);box-shadow:0 10px 18px rgba(0,0,0,0.12)}
.footer-link .contact-badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,0.16);box-shadow:0 10px 24px rgba(0,0,0,0.16);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;background:#fff}
.footer-link .contact-badge img{width:100%;height:100%;object-fit:cover;display:block}
.footer-link:hover .contact-badge{transform:scale(1.05) translateY(-2px);box-shadow:0 16px 32px rgba(255,45,138,0.18);filter:saturate(1.08)}
.footer-link .contact-link-text{font-weight:600}
.icon{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;font-size:0.95rem;font-weight:700;color:#fff}
.icon-whatsapp{background:#25d366}
.icon-instagram{background:linear-gradient(45deg,#feda77,#d62976 45%,#f58529)}
.icon-2gis{background:#0c59c1}
.muted{color:var(--muted);font-size:15px}
@media(max-width:1100px){
.hero-inner{grid-template-columns:1fr}
.hero-panel{justify-self:start;max-width:520px}
.location-grid{grid-template-columns:1fr}
.camp-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
.hero{padding:48px 0}
.hero-copy h1{font-size:clamp(2.4rem,5vw,3.4rem)}
.hero-panel{width:100%}
.hero-highlights{grid-template-columns:1fr}
.promo-card{grid-template-columns:1fr}
.camp-grid{grid-template-columns:1fr}
.summer-hero-inner{grid-template-columns:1fr}
}
@media(max-width:780px){
.testimonial-photo-card{grid-template-columns:1fr}
.testimonial-photo{height:260px}
.footer-inner{flex-direction:column;align-items:flex-start}
}
.detail-hero{padding:70px 0 60px;background:radial-gradient(circle at 12% 18%, rgba(255,45,138,0.12), transparent 40%),radial-gradient(circle at top left, rgba(120, 188, 255, 0.14), transparent 25%),radial-gradient(circle at 88% 78%, rgba(139,92,246,0.14), transparent 46%),linear-gradient(180deg,#071226 0%,#091f3e 35%,#112e5f 100%);position:relative;overflow:hidden;border-radius:0 0 42px 42px;}
.detail-hero::before{content:"";position:absolute;right:-120px;top:20px;width:420px;height:420px;background:radial-gradient(circle, rgba(255,255,255,0.18), transparent 65%);filter:blur(18px);pointer-events:none;}
.detail-hero::after{content:"";position:absolute;left:-80px;bottom:-40px;width:360px;height:360px;background:radial-gradient(circle, rgba(22,101,178,0.16), transparent 70%);filter:blur(18px);pointer-events:none;}
.detail-hero + .section{margin-top:-46px;position:relative;z-index:2}
.section-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 8px;max-width:320px;padding:20px 0;opacity:0;transform:translateY(10px)}
.section-divider.visible{animation:fadeUp .6s ease both}
.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(11,37,69,0.18))}
.section-divider::after{background:linear-gradient(90deg,rgba(11,37,69,0.18),transparent)}
.section-divider span{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pink),#8b5cf6);color:#fff;font-size:.92rem;box-shadow:0 12px 26px rgba(255,45,138,0.28);transition:transform .35s ease}
.section-divider:hover span{transform:rotate(180deg) scale(1.08)}
.detail-hero-inner{display:grid;grid-template-columns:1.05fr 0.95fr;gap:24px;align-items:center;position:relative;z-index:1;}
.detail-copy{padding:12px 6px;}
.detail-copy h1{font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.05;margin-bottom:16px;color:#fff;max-width:620px;}
.detail-copy p{color:rgba(255,255,255,0.86);font-size:1.02rem;margin-bottom:24px;line-height:1.75;max-width:570px;}
.detail-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.detail-highlights div{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);padding:18px 20px;border-radius:22px;backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,0.12);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.detail-highlights div:hover{transform:translateY(-4px) scale(1.008);box-shadow:0 24px 56px rgba(0,0,0,0.16);border-color:rgba(255,255,255,0.24)}
.detail-highlights strong{display:block;font-size:1.1rem;color:#ffffff;margin-bottom:6px}
.detail-highlights span{display:block;color:rgba(255,255,255,0.82)}
.detail-image-card{position:relative;max-width:420px;justify-self:end}
.detail-image-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:30px;pointer-events:none;}
.detail-image-card img{width:100%;height:auto;max-height:520px;border-radius:30px;box-shadow:0 24px 70px rgba(0,0,0,0.24);display:block}
.camp-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.camp-gallery-grid .detail-image-card{max-width:none;justify-self:stretch}
@media (max-width:760px){.camp-gallery-grid{grid-template-columns:1fr}}
.section-slate{background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);border-radius:32px;padding:52px 0;margin:0 0 8px;position:relative;overflow:hidden;border:1px solid rgba(11,37,69,0.08);box-shadow:0 30px 70px rgba(11,37,69,0.06)}
.section-slate::before,.section-slate::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(18px)}
.section-slate::before{right:-60px;top:-70px;width:240px;height:240px;background:rgba(255,45,138,0.08)}
.section-slate::after{left:-50px;bottom:-60px;width:220px;height:220px;background:rgba(22,101,178,0.08)}
.section-slate .container{position:relative;z-index:1}
.section-slate .section-title{color:var(--navy)}
.section-slate .section-subtitle{color:var(--muted);max-width:700px}
.section-slate .info-grid{gap:20px;margin-top:28px}
.section-slate .info-grid>div{position:relative;background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.78));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.7);border-radius:24px;padding:30px 26px;box-shadow:0 18px 44px rgba(11,37,69,0.08);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;overflow:hidden}
.section-slate .info-grid>div::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pink),#8b5cf6,#2d7ff9);opacity:0;transition:opacity .35s ease}
.section-slate .info-grid>div:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 56px rgba(11,37,69,0.14),0 0 44px rgba(255,45,138,0.10);border-color:rgba(255,45,138,0.2)}
.section-slate .info-grid>div:hover::before{opacity:1}
.section-slate .info-grid>div strong{display:block;color:var(--navy);font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.section-slate .info-grid>div p{color:var(--muted);line-height:1.8;font-size:.96rem;margin:0}
.section-slate .section-note{max-width:740px;margin:24px auto 0;padding:20px 24px;border-radius:22px;background:#fff;border:1px solid rgba(11,37,69,0.10);box-shadow:0 14px 34px rgba(11,37,69,0.06);color:var(--navy);line-height:1.75}
.detail-final-card{background:linear-gradient(180deg,#0d2a58 0%,#112f66 100%);border-radius:28px;padding:36px;box-shadow:0 28px 90px rgba(10,24,50,0.24);text-align:center;margin-top:20px}
.detail-final-card h2{margin:0 0 18px;font-size:2rem;color:#ffffff}
.detail-final-card p{margin:0 0 22px;color:rgba(255,255,255,0.92);line-height:1.8;max-width:700px;margin-left:auto;margin-right:auto}
.final-list{list-style:none;padding:0;margin:0 0 24px}
.final-list li{position:relative;padding-left:30px;margin-bottom:12px;color:#f3f7ff;font-weight:600;line-height:1.7}
.final-list li::before{content:'•';position:absolute;left:0;top:2px;color:var(--pink);font-size:1.2rem;line-height:1}
.results-section{padding:78px 0 64px}
.results-intro{max-width:760px;margin:0 auto 30px;text-align:center}
.results-eyebrow{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(233,30,99,0.12);color:#e91e63;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;margin-bottom:16px}
.results-intro h2{margin:0 0 12px;font-size:clamp(2rem,3vw,2.8rem);color:#0b1533}
.results-intro p{margin:0;color:var(--muted);line-height:1.8;font-size:1rem}
.results-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:30px 0 34px}
.stat-card{background:linear-gradient(135deg,#ffffff 0%,#f5f8ff 100%);border:1px solid rgba(11,37,69,0.10);border-radius:20px;padding:18px 20px;box-shadow:0 14px 34px rgba(11,37,69,0.08);text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.stat-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 20px 42px rgba(11,37,69,0.12)}
.stat-card strong{display:block;font-size:1.14rem;color:#0b1533;margin-bottom:6px}
.stat-card span{display:block;color:var(--muted);font-size:.95rem;line-height:1.5}
.results-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.result-card{position:relative;border:1px solid rgba(11,37,69,0.16);border-radius:20px;background:linear-gradient(145deg,#ffffff,#f7faff);padding:10px;box-shadow:0 16px 44px rgba(11,37,69,0.10);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;overflow:hidden;cursor:pointer;display:block}
.result-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(233,30,99,0.12) 100%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.result-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 22px 48px rgba(233,30,99,0.13),0 16px 32px rgba(11,37,69,0.1);border-color:rgba(233,30,99,0.34)}
.result-card:hover::after{opacity:.5}
.result-card img{width:100%;height:255px;object-fit:cover;display:block;border-radius:14px;transition:transform .32s ease,filter .32s ease}
.result-card:hover img{transform:scale(1.04) translateY(-2px);filter:saturate(1.04)}
.result-card-label{position:absolute;left:20px;bottom:20px;padding:8px 12px;border-radius:999px;background:rgba(11,37,69,0.88);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,0.12);transition:transform .28s ease,background .28s ease,box-shadow .28s ease,opacity .28s ease}
.result-card:hover .result-card-label{transform:translateY(-3px);background:rgba(11,37,69,0.94);box-shadow:0 12px 24px rgba(0,0,0,0.14);opacity:0.97}
.result-card:focus-visible{outline:2px solid #e91e63;outline-offset:4px}
.lightbox{position:fixed;inset:0;background:rgba(2,8,23,0.90);display:none;align-items:center;justify-content:center;padding:24px;z-index:1000}
.lightbox.open{display:flex}
.lightbox img{max-width:min(100%,1100px);max-height:88vh;width:auto;height:auto;border-radius:24px;box-shadow:0 35px 100px rgba(0,0,0,0.45);object-fit:contain}
.lightbox-close,.lightbox-nav{position:absolute;border:0;background:rgba(255,255,255,0.12);color:#fff;width:54px;height:54px;border-radius:50%;font-size:24px;cursor:pointer;backdrop-filter:blur(10px);transition:background .2s ease,transform .2s ease}
.lightbox-close{top:20px;right:20px}
.lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,0.24);transform:translateY(-2px)}
@media(max-width:980px){
.results-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
.results-stats{grid-template-columns:1fr}
.results-grid{grid-template-columns:1fr}
.result-card img{height:230px}
}
.section-note{max-width:740px;margin:18px auto 0;padding:18px 20px;border-radius:18px;background:rgba(16,40,73,0.08);border:1px solid rgba(16,40,73,0.14);color:#12294a;line-height:1.75}
.instructors-section{background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);padding:52px 0;margin-top:8px;border-radius:32px;border:1px solid rgba(11,37,69,0.08);box-shadow:0 30px 70px rgba(11,37,69,0.06);position:relative;overflow:hidden}
.instructors-section::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(139,92,246,0.08);filter:blur(18px);pointer-events:none}
.instructors-section .container{padding:0 20px;position:relative;z-index:1}
.instructors-section .section-title{color:var(--navy)}
.instructors-section .section-subtitle{color:var(--muted);margin-bottom:28px}
.instructors-section .info-grid{gap:20px;margin-top:28px}
.instructors-section .info-grid div{position:relative;background:linear-gradient(165deg,rgba(255,255,255,0.95),rgba(255,255,255,0.78));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.7);border-radius:24px;padding:30px 26px;box-shadow:0 18px 44px rgba(11,37,69,0.08);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;overflow:hidden}
.instructors-section .info-grid div::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pink),#8b5cf6,#2d7ff9);opacity:0;transition:opacity .35s ease}
.instructors-section .info-grid div:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 56px rgba(11,37,69,0.14),0 0 44px rgba(255,45,138,0.10);border-color:rgba(255,45,138,0.2)}
.instructors-section .info-grid div:hover::before{opacity:1}
.instructors-section .info-grid strong{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin-bottom:10px;color:var(--navy)}
.instructors-section .info-grid p{color:var(--muted);line-height:1.8;font-size:.96rem;margin:0}
.benefits-grid, .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:28px}
.benefit-card{position:relative;background:linear-gradient(165deg,rgba(255,255,255,0.96),rgba(255,255,255,0.82));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:24px;padding:30px 26px;border:1px solid rgba(255,255,255,0.7);box-shadow:0 20px 52px rgba(11,37,69,0.07);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;overflow:hidden}
.benefit-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pink),#8b5cf6,#2d7ff9);opacity:0;transition:opacity .35s ease}
.benefit-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 54px rgba(11,37,69,0.12),0 0 40px rgba(255,45,138,0.10);border-color:rgba(255,45,138,0.2)}
.benefit-card:hover::before{opacity:1}
.benefit-card h3{margin:0 0 12px;color:var(--navy);font-size:1.1rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.benefit-card p{margin:0;color:var(--muted);line-height:1.8;font-size:.96rem}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;font-size:1.5rem;margin-bottom:16px;background:linear-gradient(135deg,rgba(255,45,138,0.14),rgba(139,92,246,0.12));border:1px solid rgba(255,45,138,0.18);box-shadow:0 10px 24px rgba(255,45,138,0.10),inset 0 1px 0 rgba(255,255,255,0.6);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.section-slate .info-grid>div:hover .card-icon,
.instructors-section .info-grid div:hover .card-icon,
.benefit-card:hover .card-icon{transform:scale(1.1) rotate(-6deg);box-shadow:0 14px 30px rgba(255,45,138,0.2),inset 0 1px 0 rgba(255,255,255,0.7)}
.benefit-card .card-icon{margin-bottom:14px}
.benefit-icon-inline{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;font-size:1.05rem;background:linear-gradient(135deg,rgba(255,45,138,0.16),rgba(139,92,246,0.14));flex-shrink:0}
@media(max-width:1100px){
.hero-inner{grid-template-columns:1fr}
.hero-panel{justify-self:start;max-width:520px}
.location-grid{grid-template-columns:1fr}
.camp-grid{grid-template-columns:1fr}
.detail-hero-inner{grid-template-columns:1fr}
.detail-image-card{max-width:100%}
}
@media(max-width:780px){
.testimonial-photo-card{grid-template-columns:1fr}
.testimonial-photo{height:260px}
.footer-inner{flex-direction:column;align-items:flex-start}
}
.summer-hero{
padding:72px 0 74px;
background:radial-gradient(circle at 12% 20%, rgba(255,45,138,0.10), transparent 42%),linear-gradient(135deg,#07152d 0%,#102547 45%,#16335f 100%);
position:relative;
overflow:hidden;
border-radius:0 0 42px 42px;
}
.summer-hero::before,
.summer-hero::after{
content:"";
position:absolute;
border-radius:50%;
filter:blur(20px);
pointer-events:none;
}
.summer-hero::before{
width:320px;
height:320px;
background:rgba(255,45,138,0.16);
top:-80px;
right:-80px;
}
.summer-hero::after{
width:260px;
height:260px;
background:rgba(255,255,255,0.10);
left:-80px;
bottom:-80px;
}
.summer-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;position:relative;z-index:1}
.summer-copy{color:#fff}
.summer-copy h1{font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1.08;margin:0 0 16px;color:#fff}
.summer-copy p{font-size:1rem;line-height:1.8;color:rgba(255,255,255,0.84);max-width:620px}
.summer-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 26px}
.summer-highlights div{background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.16);border-radius:18px;padding:16px 14px;backdrop-filter:blur(10px)}
.summer-highlights strong{display:block;font-size:1rem;margin-bottom:6px;color:#fff}
.summer-highlights span{color:rgba(255,255,255,0.78);font-size:.92rem}
.summer-hero-visual img{width:100%;height:480px;object-fit:cover;border-radius:28px;border:1px solid rgba(255,255,255,0.16);box-shadow:0 24px 70px rgba(0,0,0,0.22)}
.summer-section-intro{max-width:760px;margin:0 auto 30px;text-align:center}
.summer-section-intro.compact{margin-bottom:24px}
.summer-eyebrow{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(255,45,138,0.12);color:var(--pink);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem;margin-bottom:14px}
.summer-section-intro h2{font-size:clamp(1.8rem,2.5vw,2.4rem);margin:0 0 12px;color:var(--navy)}
.summer-section-intro p{margin:0;color:var(--muted);line-height:1.8}
.summer-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.summer-card{position:relative;padding:0;border:1px solid rgba(11,37,69,0.12);border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 14px 38px rgba(11,37,69,0.10);cursor:pointer;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;display:block}
.summer-card:hover{transform:translateY(-4px) scale(1.008);box-shadow:0 16px 38px rgba(233,30,99,0.1),0 12px 28px rgba(11,37,69,0.08);border-color:rgba(233,30,99,0.3)}
.summer-card img{width:100%;height:260px;object-fit:cover;display:block;transition:transform .28s ease}
.summer-card:hover img{transform:scale(1.03)}
.summer-card-label{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:999px;background:rgba(11,37,69,0.92);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px)}
.summer-card:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
.summer-destinations{background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);padding:72px 0}
.summer-destination-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.summer-destination-card{background:#fff;border-radius:22px;padding:22px;border:1px solid rgba(11,37,69,0.10);box-shadow:0 16px 42px rgba(11,37,69,0.08);transition:transform .25s ease,box-shadow .25s ease}
.summer-destination-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(11,37,69,0.14)}
.summer-destination-card h3{margin:0 0 8px;color:var(--navy)}
.summer-destination-card p{margin:0;color:var(--muted);line-height:1.7}
.summer-inclusion-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.summer-inclusion-card{background:linear-gradient(145deg,#ffffff 0%,#f6f9ff 100%);border:1px solid rgba(11,37,69,0.10);border-radius:20px;padding:18px;box-shadow:0 14px 36px rgba(11,37,69,0.08);transition:transform .25s ease,box-shadow .25s ease}
.summer-inclusion-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(11,37,69,0.12)}
.summer-inclusion-card h3{margin:0 0 8px;color:var(--navy);font-size:1rem}
.summer-inclusion-card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6}
.summer-cta-card{background:linear-gradient(135deg,#0b1533 0%,#112958 100%);padding:40px;border-radius:28px;text-align:center;color:#fff;box-shadow:0 24px 70px rgba(11,37,69,0.18)}
.summer-cta-card h2{margin:0 0 12px;font-size:clamp(1.8rem,2.5vw,2.4rem)}
.summer-cta-card p{max-width:720px;margin:0 auto 24px;line-height:1.8;color:rgba(255,255,255,0.84)}
.summer-lightbox{position:fixed;inset:0;background:rgba(2,8,23,0.92);display:none;align-items:center;justify-content:center;padding:24px;z-index:1000}
.summer-lightbox.open{display:flex}
.summer-lightbox img{max-width:min(100%,1100px);max-height:88vh;width:auto;height:auto;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,0.38);object-fit:contain}
.summer-lightbox-close,.summer-lightbox-nav{position:absolute;border:0;background:rgba(255,255,255,0.14);color:#fff;width:50px;height:50px;border-radius:50%;font-size:24px;cursor:pointer;backdrop-filter:blur(8px)}
.summer-lightbox-close{top:20px;right:20px}
.summer-lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}
.summer-lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
.summer-lightbox-close:hover,.summer-lightbox-nav:hover{background:rgba(255,255,255,0.24)}
@media(max-width:1080px){
.summer-hero-inner{grid-template-columns:1fr}
.summer-hero-visual img{height:360px}
.summer-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.summer-inclusion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.summer-destination-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.summer-highlights{grid-template-columns:1fr}
.summer-gallery-grid{grid-template-columns:1fr}
.summer-inclusion-grid{grid-template-columns:1fr}
.summer-destination-grid{grid-template-columns:1fr}
.summer-hero-visual img{height:280px}
.summer-cta-card{padding:28px 20px}
.nav{width:100%}
.hero{padding:70px 0 56px}
.hero-copy h1{font-size:2rem}
.hero-highlights{grid-template-columns:1fr}
.section{padding:60px 0}
}
@media(max-width:480px){
.logo img{height:72px}
.btn{padding:10px 13px;font-size:0.95rem}
.testimonial-photo{height:220px}
}
/* =========================================================================
MOBILE-ONLY OPTIMIZATION (phones, 320px-768px)
Everything below is scoped inside max-width media queries and only
affects phone-sized viewports. Desktop (>980px) rules above are
completely untouched.
========================================================================= */
@media(max-width:768px){
/* Compact, single-line header: logo left, lang switcher + burger right */
.header-inner{min-height:60px;gap:8px}
.logo img{height:52px;max-height:52px}
.header-actions{gap:8px}
.burger-toggle{width:40px;height:40px}
.lang-switcher,.nav-lang-switcher{padding:5px 6px}
.lang-option{padding:7px 9px;min-width:34px;font-size:.85rem}
.lang-separator{font-size:.8rem}
/* Smooth staggered reveal for burger nav links */
.nav{padding-top:82px}
.nav a{opacity:0;transform:translateX(16px);transition:transform .35s ease,opacity .35s ease,background .3s ease,color .3s ease,box-shadow .3s ease}
.nav.open a{opacity:1;transform:translateX(0)}
.nav.open a:nth-of-type(1){transition-delay:.05s}
.nav.open a:nth-of-type(2){transition-delay:.1s}
.nav.open a:nth-of-type(3){transition-delay:.15s}
.nav.open a:nth-of-type(4){transition-delay:.2s}
.nav.open a:nth-of-type(5){transition-delay:.25s}
.nav a,.btn{min-height:46px}
/* Eliminate horizontal scrolling caused by fixed-size elements */
.map-small{width:100%;height:auto;max-height:300px}
.hero-panel-top,.detail-image-card{max-width:100%}
/* Section rhythm & typography tuned for phones */
.section{padding:48px 0}
.section-title{font-size:clamp(1.5rem,6vw,1.85rem);margin-bottom:10px}
.section-subtitle{font-size:.92rem;line-height:1.65;margin-bottom:18px}
/* Subpage hero (IELTS / SAT / TOEFL / English / AIT / Summer) */
.detail-hero{padding:52px 0 40px;border-radius:0 0 28px 28px}
.detail-hero-inner{gap:20px}
.detail-copy h1{font-size:clamp(1.7rem,7vw,2.2rem);line-height:1.15;max-width:100%}
.detail-copy p{font-size:.95rem;line-height:1.65}
.detail-highlights{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.detail-highlights div{padding:12px 10px}
.detail-image-card{justify-self:stretch}
/* Cards & images: comfortable, proportional sizing */
.course-card-media{height:150px}
.camp-photo img{height:220px}
}
@media(max-width:480px){
.header-inner{min-height:56px}
.logo img{height:46px;max-height:46px}
.container{padding:0 14px}
.detail-highlights{grid-template-columns:1fr}
.course-card-media{height:135px}
.camp-photo img{height:190px}
}
@media(max-width:360px){
.header-inner{min-height:52px}
.logo img{height:40px;max-height:40px}
.container{padding:0 12px}
.section{padding:40px 0}
}
/* =========================================================================
MOBILE POLISH PASS 2 (phones, 320px-768px)
Tightens whitespace, resizes course cards for natural text wrapping, and
fixes two legacy cascade bugs (course-grid columns + footer-card width
were being silently overridden by later base rules earlier in this file).
Desktop (>980px) rules above remain completely untouched.
========================================================================= */
@media(max-width:768px){
/* Course cards: comfortable 2-up down to ~540px, then stack to 1 column */
.course-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.course-card-media{height:150px}
.course-card-body{padding:20px 16px 16px}
.course-card-body h3{font-size:1rem;margin-bottom:6px}
.course-card-body p{font-size:.84rem;line-height:1.55;margin-bottom:14px}
.course-card-link{padding:8px 13px;font-size:.82rem}
.course-card-icon{width:38px;height:38px;font-size:1rem;left:16px;bottom:-18px}
/* Footer card must stretch full-width on mobile */
.footer-card{min-width:0;max-width:none;width:100%;padding:20px}
.footer-inner{gap:18px}
/* Reduce excess whitespace between/within sections */
.results-section{padding:44px 0 36px}
.section-slate{padding:40px 0}
.instructors-section{padding:40px 0}
.detail-final-card{padding:26px 20px;margin-top:16px}
.detail-final-card h2{font-size:1.5rem;margin-bottom:12px}
.section-slate .info-grid>div,
.instructors-section .info-grid div,
.benefit-card{padding:22px 20px}
.benefits-grid,.info-grid,
.section-slate .info-grid,
.instructors-section .info-grid{gap:14px;margin-top:20px}
}
@media(max-width:540px){
/* Below ~540px, two columns feel cramped: switch course cards to 1-up
with more generous sizing so text wraps naturally */
.course-grid{grid-template-columns:1fr;gap:18px}
.course-card-media{height:190px}
.course-card-body{padding:24px 20px 20px}
.course-card-body h3{font-size:1.15rem}
.course-card-body p{font-size:.92rem;line-height:1.65;margin-bottom:16px}
.course-card-link{padding:10px 16px;font-size:.88rem}
}
/* Lock background scroll while the mobile menu is open */
body.nav-open{overflow:hidden}
.nav a.mobile-only-nav-link{display:none}
.mobile-nav-social{display:none}
/* =========================================================================
MOBILE PREMIUM REDESIGN (phones, 320px-768px)
Every rule below is scoped inside max-width media queries so desktop
(>980px) is completely unaffected. This is the authoritative mobile
section: it lives at the end of the file so it always wins the cascade
over earlier/legacy mobile rules above.
========================================================================= */
@media(max-width:768px){
html,body{overflow-x:clip}
body{overflow-x:clip}
/* ---------- Header: bigger, calmer, perfectly centered ---------- */
/* backdrop-filter removed on mobile: it makes .site-header a containing
block for position:fixed descendants (like #siteNav), which can break
the fixed panel once the sticky header has scrolled/engaged on some
mobile browsers. Background is already near-opaque (0.95) so visually
there is no difference without the blur. */
.site-header{padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.header-inner{min-height:86px;gap:14px;flex-wrap:nowrap;align-items:center}
.logo{min-width:0;flex:0 0 auto;align-items:center}
.logo img{height:78px;max-height:78px}
.header-actions{gap:18px;flex:0 0 auto;margin-left:auto;align-items:center;border-left:0;padding-left:0}
.lang-switcher{padding:6px 9px;gap:6px;flex-shrink:0}
.lang-option{min-width:32px;padding:7px 9px;font-size:.82rem}
.lang-separator{font-size:.78rem}
.burger-toggle{width:46px;height:46px;position:relative;z-index:60;border-radius:14px;margin-left:8px}
.burger-toggle::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:1px;height:26px;background:rgba(255,255,255,0.22)}
/* ---------- Burger menu: premium slide-in panel ---------- */
.mobile-nav-overlay{background:rgba(4,10,26,0.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:opacity .35s ease}
.nav{
position:fixed;
inset:0 0 0 auto;
width:min(84vw,360px);
height:100dvh;
margin:0;
padding:100px 22px 28px;
border-left:1px solid rgba(255,255,255,0.10);
border-radius:28px 0 0 28px;
box-shadow:-26px 0 60px rgba(0,0,0,0.38);
background:linear-gradient(165deg,#0a1630 0%,#101f42 50%,#171240 100%);
overflow-y:auto;
overflow-x:hidden;
z-index:70;
gap:8px;
justify-content:flex-start;
transform:translateX(100%);
transition:transform .36s cubic-bezier(.16,.9,.28,1),opacity .32s ease;
}
.nav.open{transform:translateX(0)}
.nav a{
min-height:54px;
padding:14px 16px;
font-size:.98rem;
font-weight:600;
letter-spacing:.01em;
border-radius:16px;
background:rgba(255,255,255,0.05);
gap:12px;
}
.nav a[data-nav-icon]::before{content:attr(data-nav-icon);font-size:1.1rem;line-height:1;flex:0 0 auto}
.nav a:hover{background:rgba(255,255,255,0.11);transform:translateX(2px) scale(1.01);box-shadow:0 10px 22px rgba(0,0,0,0.18)}
.nav a:active{transform:scale(.97)}
.nav a.active{background:linear-gradient(135deg,rgba(255,45,138,0.28),rgba(139,92,246,0.2));border:1px solid rgba(255,45,138,0.4);box-shadow:0 12px 26px rgba(255,45,138,0.18);color:#fff}
.nav a.mobile-only-nav-link{display:inline-flex}
.mobile-nav-social{display:flex;justify-content:center;align-items:center;gap:16px;padding-top:16px;margin-top:14px}
.nav a.mobile-nav-social-link{
box-sizing:border-box;
width:48px;
height:48px;
min-height:48px;
padding:10px;
margin:0;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#fff;
border:1px solid rgba(255,255,255,0.16);
text-decoration:none;
flex:0 0 auto;
transition:transform .25s ease,box-shadow .25s ease;
}
.mobile-nav-social-link img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
display:block;
}
.nav a.mobile-nav-social-link:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,0.22)}
.nav a.mobile-nav-social-link:active{transform:scale(.94)}
.nav-lang-switcher{display:flex;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,0.12)}
.mobile-nav-close{
position:absolute;
top:18px;
right:18px;
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border:1px solid rgba(255,255,255,0.16);
border-radius:16px;
background:rgba(255,255,255,0.08);
color:#fff;
font-size:1.7rem;
line-height:1;
cursor:pointer;
box-shadow:0 14px 30px rgba(0,0,0,0.22);
transition:transform .3s cubic-bezier(.2,.8,.2,1),background .28s ease,opacity .28s ease;
}
.mobile-nav-close:hover{transform:scale(1.06) rotate(90deg);background:rgba(255,255,255,0.16)}
.mobile-nav-close:active{transform:scale(.94) rotate(90deg)}
.mobile-nav-close:focus-visible{outline:2px solid rgba(255,255,255,0.55);outline-offset:3px}
/* ---------- Typography & vertical rhythm ---------- */
.hero{padding:40px 0 40px}
.hero-copy h1{font-size:clamp(1.5rem,6.6vw,1.95rem);line-height:1.22;margin-bottom:14px}
.hero-copy p,
.promo-copy p,
.camp-card p,
.location-info p,
.detail-copy p,
.summer-copy p,
.section-slate .info-grid>div p,
.instructors-section .info-grid p,
.benefit-card p,
.results-intro p,
.testimonial-card blockquote,
.footer-brand p,
.footer-note{font-size:.92rem;line-height:1.72}
.hero-highlights strong{font-size:1.02rem}
.hero-highlights span{font-size:.74rem}
.hero-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:18px}
.hero-highlights div{min-width:0;padding:9px 4px;border-radius:12px;background:rgba(255,255,255,0.06);box-shadow:none}
.hero-highlights div:hover{transform:none;box-shadow:none}
.hero-highlights .hero-stat-icon{display:none}
.hero-highlights strong{font-size:.92rem;line-height:1.2;margin-bottom:3px;white-space:nowrap}
.hero-highlights span{font-size:.67rem;line-height:1.2;white-space:nowrap}
body .section{padding-top:18px;padding-bottom:18px}
.section.gallery{padding-top:18px}
body .home-video-section{padding-top:36px;padding-bottom:82px}
.home-video-section::after{height:42px}
.home-video-grid{display:block;gap:0}
.home-video-copy{max-width:100%}
.home-video-section .section-title{font-size:clamp(1.15rem,5.2vw,1.5rem);padding-left:14px;margin-top:0;margin-bottom:16px}
.home-video-text{margin-top:0;padding:0 0 0 2px;font-size:.9rem;line-height:1.7}
.home-video-support,.home-video-support--small{margin:10px 0 0;padding:0 2px;font-size:.88rem;line-height:1.6}
.home-video-card{width:100%;margin:20px auto 0;padding-top:0}
.home-video-frame{width:100%;max-width:340px;min-width:0;border-radius:18px;margin:0 auto}
/* .programs-overview (english.html) has no opaque background of its own,
unlike .section-slate used by the other detail pages. The shared rule
".detail-hero + .section{margin-top:-46px}" pulls it up to overlap the
dark hero block; on desktop the section's larger padding keeps the
heading clear of that overlap, but the smaller mobile padding above
let the heading sit inside the transparent overlap area, so the dark
hero background showed through behind/under the title text. Cancel
the overlap on mobile only so the heading always sits on the page
background. */
.detail-hero + .programs-overview{margin-top:0}
.section-title{font-size:clamp(1.32rem,5.4vw,1.65rem);margin-bottom:12px;line-height:1.28}
.section-subtitle{font-size:.9rem;line-height:1.68;margin-bottom:32px}
.btn{min-height:46px;padding:12px 18px;font-size:.9rem}
/* ---------- Course cards: big premium images, equal heights ---------- */
.course-grid{grid-template-columns:1fr;gap:22px;margin-top:32px}
.course-grid .course-card{min-height:372px}
.course-card-media{height:216px}
.course-card-media img{object-fit:cover;object-position:center}
.course-card-body{padding:22px 20px 20px;display:flex;flex-direction:column}
.course-card-body h3{font-size:1.08rem;line-height:1.3;margin-bottom:8px}
.course-card-body p{font-size:.88rem;line-height:1.62;margin-bottom:16px;min-height:3.6em}
.course-card-link{min-height:44px;padding:10px 16px;font-size:.86rem}
.course-card-icon{width:42px;height:42px;font-size:1.05rem;left:18px;bottom:-19px}
.promo-card{padding:22px 20px;gap:16px;margin-top:28px}
.camp-grid,.location-grid{gap:20px}
.camp-card{padding:24px}
.camp-card h2{font-size:1.45rem;margin-bottom:12px}
.camp-photo img{height:230px;object-fit:cover}
/* ---------- Location: large, premium, full-width map ---------- */
.location-grid{margin-top:6px}
.map-card{margin-top:0;border-radius:26px;box-shadow:0 30px 70px rgba(11,37,69,0.20)}
.map-small{width:100%;height:auto;aspect-ratio:3/4;max-height:520px;object-fit:cover;border-radius:26px}
.map-badge{padding:11px 16px;font-size:13.5px;left:16px;bottom:16px}
.location-info{padding:24px;border-radius:22px;margin-top:18px}
.location-info h3{font-size:1.1rem;margin-bottom:10px}
.location-link{min-height:46px;padding:11px 16px;font-size:.86rem}
.gis-card{padding:14px 16px;margin-top:16px}
/* ---------- Testimonials: mobile slider tweaks ---------- */
.testimonials-grid.is-mobile-slider .testimonial-card{max-width:none;padding:26px 22px;border-radius:22px}
.testimonials-grid.is-mobile-slider .testimonial-avatar{width:56px;height:56px;flex:0 0 56px;font-size:1.7rem}
/* ---------- Results / info sections ---------- */
.results-section{padding:44px 0 40px}
.result-card img{height:220px;object-fit:cover}
.section-slate{padding:40px 0;border-radius:26px}
.instructors-section{padding:40px 0;border-radius:26px}
.section-slate .info-grid>div,
.instructors-section .info-grid div,
.benefit-card{padding:24px 20px;border-radius:22px}
.benefits-grid,.info-grid,
.section-slate .info-grid,
.instructors-section .info-grid{gap:16px;margin-top:22px}
.detail-hero{padding:48px 0 38px;border-radius:0 0 26px 26px}
.detail-copy h1{font-size:clamp(1.6rem,6.8vw,2.05rem);line-height:1.2;margin-bottom:14px}
.detail-highlights{gap:12px;margin-bottom:22px}
.detail-highlights div{padding:14px 12px;border-radius:18px}
.detail-image-card img{max-height:360px;object-fit:cover;border-radius:24px}
.summer-hero-visual img{height:260px;object-fit:cover}
.detail-final-card{padding:28px 20px;margin-top:18px;border-radius:24px}
.detail-final-card h2{font-size:1.45rem;margin-bottom:14px}
/* ---------- Footer: minimal, elegant, complete ---------- */
.site-footer{padding:36px 0 26px}
.footer-inner{flex-direction:column;align-items:stretch;gap:20px}
.footer-logo{display:block;height:42px;margin-bottom:14px;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.3))}
.footer-brand strong{font-size:1.12rem;margin-bottom:10px}
.footer-contact-line{display:flex;align-items:center;gap:8px;margin:6px 0 0;color:rgba(255,255,255,0.82);font-size:.9rem}
.footer-contact-line a{color:#fff;text-decoration:none}
.footer-contact-line a:hover{text-decoration:underline}
.footer-card{min-width:0;max-width:none;width:100%;padding:20px;border-radius:22px}
.footer-card-title{font-size:.84rem;margin-bottom:14px}
.footer-link{padding:11px 14px;min-height:56px;margin-bottom:12px}
.footer-link .contact-badge{width:48px;height:48px}
.footer-link .contact-link-text{font-size:.9rem}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px;padding-top:18px}
.footer-legal-links{gap:16px}
}
@media(max-width:480px){
.header-inner{min-height:74px;gap:11px}
.logo img{height:68px;max-height:68px}
.container{padding:0 16px}
.lang-option{min-width:30px;padding:7px 8px;font-size:.8rem}
.nav{padding:96px 20px 28px}
.course-grid .course-card{min-height:352px}
.course-card-media{height:196px}
.course-card-body{padding:20px 18px 18px}
.course-card-body p{font-size:.86rem;min-height:3.4em}
.hero-copy h1{font-size:clamp(1.4rem,7vw,1.8rem)}
.section-title{font-size:clamp(1.24rem,5.8vw,1.5rem)}
}
@media(max-width:360px){
.header-inner{min-height:68px}
.logo img{height:62px;max-height:62px}
.lang-option{min-width:26px;padding:6px 6px;font-size:.76rem}
.course-card-media{height:180px}
.course-grid .course-card{min-height:336px}
.btn{font-size:.85rem}
}