:root{
  --primary:#e94e1b; --text:#333; --white:#fff; --black:#000;
  --radius:8px; --gap:20px; --shadow:0 4px 12px rgba(0,0,0,.1);
  --transition:.3s; --container-width:90%; --container-max:1200px;
}
*{margin:0; padding:0; box-sizing:border-box; font-family:'Roboto',sans-serif}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{color:var(--text); background:var(--black); line-height:1.6}
a{text-decoration:none; color:inherit}
img{max-width:100%; height:auto; display:block}
.container{width:var(--container-width); max-width:var(--container-max); margin:0 auto; padding:0 var(--gap)}

/* Header */
header{
  background:var(--white); padding:26px 0; box-shadow:var(--shadow);
  position:sticky; top:0; z-index:100; display:flex; justify-content:space-between; align-items:center; column-gap:12px;
}
.banner-header img{height:96px; object-fit:contain}
nav{position:absolute; left:50%; transform:translateX(-50%); z-index:2}
nav ul{list-style:none; display:flex; gap:var(--gap); align-items:center}
nav a, nav .programs-link{
  font-weight:500; padding:4px 8px; font-size:1.25rem; transition:color var(--transition); background:none; border:0; color:inherit; cursor:pointer;
}
nav a:hover, nav .programs-link:hover{color:var(--primary)}

/* Dropdown (shared) */
.has-dropdown{position:relative}
.submenu{
  position:absolute; left:50%; transform:translateX(-50%); top:100%;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  list-style:none; padding:8px 0; min-width:240px; max-width:100vw; display:none; z-index:10;
}
.submenu::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.submenu a{
  display:block; padding:10px 14px; color:var(--text); font-size:1rem; font-weight:400; line-height:1.4; letter-spacing:0; font-family:'Roboto',sans-serif;
}
.submenu a:hover{background:#f3f4f6}
.has-dropdown.open > .submenu{display:block}
@media (min-width: 769px){
  .has-dropdown:hover > .submenu,
  .has-dropdown:focus-within > .submenu{display:block}
}

/* Phone callout */
.phone-call{
  display:inline-flex; align-items:center; gap:8px; color:var(--text);
  padding:6px 10px; border-radius:8px; transition:background var(--transition), color var(--transition);
  font-weight:500; font-size:1.25rem;
}
.phone-call:hover{color:var(--primary); background:#f8f8f8}
.phone-call svg{width:18px; height:18px; display:block}

/* Hero — rotating backgrounds */
#hero{
  margin-top:var(--gap); position:relative; height:70vh; min-height:400px;
  display:flex; align-items:center; isolation:isolate;
  --bg-a: url('/Assets/Images/tutoring-image1.PNG');
  --bg-b: url('/Assets/Images/tutoring-image2.PNG');
}
#hero::before,#hero::after{
  content:""; position:absolute; inset:0; background-repeat:no-repeat; background-position:center;
  background-size:cover; transition:opacity .8s ease; z-index:-1; pointer-events:none;
}
#hero::before{ background-image:linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), var(--bg-a); opacity:1; }
#hero::after { background-image:linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), var(--bg-b); opacity:0; }
#hero.flip::before{ opacity:0; } #hero.flip::after { opacity:1; }
#hero .container{position:relative; text-align:center; color:var(--white)}
#hero h1:first-child{font-size:2.75rem; color:var(--white); text-shadow:2px 2px 4px rgba(0,0,0,.7); margin-bottom:.5rem}
#hero h1.stem{font-size: clamp(6rem, 12vw + 2rem, 14rem); line-height: 1; margin-bottom: 1rem; color: var(--white); text-shadow: 2px 2px 4px rgba(0,0,0,.7); white-space: nowrap; display: inline-block;}
#hero h1.stem .stem-s{color:#129b59} #hero h1.stem .stem-t{color:#0662b8}
#hero h1.stem .stem-e{color:#f8ae20} #hero h1.stem .stem-m{color:#fc1002}
#hero p{font-size:1.25rem; text-shadow:1px 1px 3px rgba(0,0,0,.7); margin-bottom:1rem}
.btn{display:inline-block; background:var(--primary); color:var(--white); font-weight:500; padding:12px 32px; border-radius:var(--radius); box-shadow:var(--shadow); transition:background var(--transition)}
.btn:hover{background:#cf3b17}

/* Our Programs */
#programs{margin:var(--gap) auto; padding:60px 0; background:#444444}
#programs h2{text-align:center; margin-bottom:40px; font-size:2.5rem; color:var(--white); text-shadow:1px 1px 2px rgba(0,0,0,.7)}
.program-item{display:flex; align-items:flex-start; gap:var(--gap); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:var(--gap)}
.program-item img{width:80px; height:80px; object-fit:contain}
.program-item-content{flex:1}
.program-item-content h3{margin-bottom:8px; font-size:1.5rem}
#programs .program-item-content p{color:#e0e0e0}
.program-science{background:rgba(0,128,0,.1)} .program-science h3{color:#129b59}
.program-technology{background:rgba(0,0,255,.1)} .program-technology h3{color:#0662b8}
.program-engineering{background:rgba(255,140,0,.1)} .program-engineering h3{color:#f8ae20}
.program-math{background:rgba(255,0,0,.1)} .program-math h3{color:#fc1002}

/* Testimonial */
#testimonial{padding:40px 0; background:#444444; margin:var(--gap) auto}
#testimonial h2{text-align:center; margin-bottom:20px; font-size:2.5rem; color:var(--white); text-shadow:1px 1px 2px rgba(0,0,0,.7)}
.testimonial-container{max-width:800px; margin:0 auto; background:var(--white); padding:40px; border-radius:var(--radius); box-shadow:var(--shadow)}
blockquote.testimonial{font-style:italic; color:#555; font-size:1.5rem; line-height:1.4; margin:0}
blockquote.testimonial cite{display:block; margin-top:12px; font-weight:500; color:#333; text-align:right}

/* Footer */
footer.site-footer{background:#222; color:#ddd; padding:36px 0}
.footer-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:16px; margin-bottom:16px;
}
.footer-brand{display:inline-block; margin-left:12px}
.footer-brand img{height:144px}
.footer-nav > ul{list-style:none; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.footer-nav .submenu{display:none}
.footer-nav a{color:#ddd; font-weight:500; font-size:1.3rem}
.footer-nav a:hover{color:#fff}
.footer-nav .programs-link{
  background:none; border:0; color:#ddd; font-weight:500; font-size:1.3rem; padding:0; cursor:pointer; font-family:inherit; line-height:inherit;
}
.footer-nav .programs-link:hover{color:#fff}

/* Footer submenu text */
.site-footer .submenu a{
  display:block; padding:10px 14px; color:var(--text); font-size:1rem; font-weight:400; line-height:1.4; letter-spacing:0; font-family:'Roboto',sans-serif; background:transparent;
}
.site-footer .submenu a:hover{background:#f3f4f6}

/* Footer drop-up positioning */
.site-footer .has-dropdown .submenu{ top:auto; bottom:100%; margin-bottom:8px; }
.site-footer .submenu::before{ top:auto; bottom:-10px; }

/* Phone + socials */
.footer-aside{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-right:12px; }
.footer-social{ display:flex; gap:10px; }
.footer-social .social-link{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  color:#ddd; background:rgba(255,255,255,0.08); transition:background var(--transition), color var(--transition), transform var(--transition); cursor:default;
}
.footer-social .social-link:hover{ color:#fff; background:rgba(255,255,255,0.15); transform:translateY(-1px); }
.footer-social svg{ width:18px; height:18px; display:block; }
.footer-legal-nav{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:1rem; color:#bbb; margin:8px 0 6px}
.footer-legal-nav a{color:#bbb} .footer-legal-nav a:hover{color:#fff}
.footer-address{margin:4px 0 6px; text-align:center; color:#c9c9c9; font-size:1rem}
.copyright{margin-top:4px; text-align:center; color:#aaa; font-size:.9rem}

/* Footer phone style */
.site-footer .phone-call{ font-size:1.3rem; font-weight:500; color:#ddd; background:transparent; margin:0; }
.site-footer .phone-call:hover{ color:#fff; background:transparent }

/* Desktop only */
@media (min-width: 769px){
  #hero h1:first-child, #hero p{white-space:nowrap}
}

/* Mobile */
@media (max-width: 768px){
  body{overflow-x:hidden}
  header{padding:16px 0; flex-wrap:wrap}
  .banner-header{order:1}
  .banner-header img{height:72px}
  header .phone-call{order:2; margin-left:auto; font-size:1rem; white-space:normal}
  .phone-call span{display:inline-block; max-width:100%; overflow-wrap:anywhere}

  nav{position:static; transform:none; width:100%; order:3; margin-top:8px}
  nav ul{justify-content:center; flex-wrap:nowrap; gap:10px}
  nav a, nav .programs-link{font-size:clamp(.82rem, 3.4vw, .95rem); padding:2px 4px}

  .submenu{min-width:220px; z-index:1000}

  .testimonial-container{padding:24px}
  #testimonial h2{font-size:2rem}

  .footer-top{ display:grid; grid-template-columns: 1fr auto; align-items:center; row-gap:10px; column-gap:12px; }
  .footer-brand{grid-column:1; justify-self:start; margin-left:8px}
  .footer-brand img{height:110px}
  .footer-aside{grid-column:2; justify-self:end; margin:0 8px 0 0; align-items:center;}
  .site-footer .phone-call{font-size:.95rem}

  .footer-nav{grid-column:1 / -1}
  .footer-nav > ul{justify-content:center; flex-wrap:nowrap; gap:10px}
  .footer-nav a{font-size:clamp(.9rem, 3.3vw, 1.05rem)}
  .footer-nav .programs-link{font-size:clamp(.9rem, 3.3vw, 1.05rem)}
  .site-footer .submenu a{ font-size:1rem; }

  .footer-social .social-link{ width:28px; height:28px; }
}
@media (max-width: 380px){
  nav ul{gap:8px}
  nav a, nav .programs-link{font-size:.82rem; padding:2px 3px}
  .footer-nav > ul{gap:8px}
}
@media (max-width: 340px){
  nav ul{gap:6px}
  nav a, nav .programs-link{font-size:.78rem}
  .footer-nav > ul{gap:6px}
}