/* studylab4u website: the parts every page shares (header, footer, phone layout).
   Each page keeps its own design styles in the page itself, exactly as approved in the v3 mockups. */

/* The mockups were drawn 1440 px wide: here the page follows the screen instead. */
html{scroll-behavior:smooth}
body{width:auto!important;min-width:0;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Inter,system-ui,sans-serif}
.wrap{width:auto!important;max-width:1248px;margin:0 auto;padding:0 24px}
img{max-width:100%}
a{color:inherit}
a.btn,.btn{text-decoration:none;cursor:pointer;border:0}
.btn.gh{border:1.5px solid #cdd6ee;background:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid #1d4fd8;outline-offset:2px}
[hidden]{display:none!important}
main{display:block}

/* header */
.sl-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid #e6eaf3}
.sl-in{max-width:1248px;margin:0 auto;padding:0 24px}
.sl-head .sl-in{height:76px;display:flex;align-items:center;gap:28px}
.sl-logo img{height:42px;display:block}
.sl-menu{display:flex;gap:30px;margin-left:auto;font-weight:600;font-size:15px}
.sl-menu a{color:#33405f;text-decoration:none;padding:6px 0}
.sl-menu a:hover{color:#1d4fd8}
.sl-menu a.on{color:#1d4fd8;box-shadow:inset 0 -3px 0 #1d4fd8}
.sl-cta{white-space:nowrap}
.sl-burger{display:none;margin-left:auto;width:44px;height:44px;border:1.5px solid #e6eaf3;border-radius:12px;background:#fff;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.sl-burger i{display:block;width:18px;height:2px;background:#0f1b3d;border-radius:2px}
.sl-only-phone{display:none}

/* footer */
.sl-foot{background:#040b25;color:#aeb8d6;padding:56px 0 28px;margin-top:0}
.sl-fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.sl-fg img{height:46px}
.sl-fg p{font-size:14.5px;line-height:1.6;max-width:330px;margin:18px 0}
.sl-fg h4{color:#fff;margin:4px 0 16px;font-size:15px}
.sl-fg a{display:block;font-size:14.5px;padding:5px 0;text-decoration:none;color:#aeb8d6}
.sl-fg a:hover{color:#fff}
.sl-soc{display:flex;flex-wrap:wrap;gap:10px}
.sl-soc a{display:inline-block;border:1px solid #233063;border-radius:10px;padding:8px 12px;font-size:13px;color:#dfe6ff}
.sl-legal{border-top:1px solid #18224a;margin-top:40px;padding-top:20px;font-size:13px;line-height:1.7}

/* phone and tablet */
@media (max-width:1100px){
  .sl-menu{gap:20px;font-size:14.5px}
}
@media (max-width:960px){
  .sl-head .sl-in{height:64px;gap:12px}
  .sl-logo img{height:34px}
  .sl-burger{display:flex}
  .sl-cta{display:none}
  .sl-menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid #e6eaf3;padding:8px 24px 18px;box-shadow:0 20px 30px -20px rgba(15,27,61,.3)}
  .sl-menu a{padding:13px 0;border-bottom:1px solid #f0f2f8;font-size:16px}
  .sl-menu a.on{box-shadow:none}
  .sl-head.open .sl-menu{display:flex}
  .sl-only-phone{display:block}
  .sl-fg{grid-template-columns:1fr 1fr}
  .sl-fg>div:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .wrap,.sl-in{padding:0 16px}
  .sl-fg{grid-template-columns:1fr}
}