:root{
      --fg:#0070B9;             /* text color */
      --bg:#ffffff;             /* page bg */
      --gray:#808080;
      --shadow:0 8px 24px rgba(16,16,24,.06),0 2px 8px rgba(16,16,24,.05);
      --maxw:1215px;
    }

    /* Smooth Scroll */
    html{scroll-behavior:smooth}

    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family: Open Sans, sans-serif;}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{max-width:var(--maxw);margin-inline:auto;padding:0 24px}

    /* Topbar */
    .topbar{position:sticky;top:0;z-index:40;background:rgba(0,0,0,1);backdrop-filter:blur(8px);padding-top:env(safe-area-inset-top);}
    .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 7.5px;gap:16px;flex-wrap:wrap}
    .logo{display:inline-flex;align-items:center;gap:10px}
    .btn{font-family: Open Sans Condensed, sans-serif; font-size:1.25rem;display:inline-flex;align-items:center;gap:10px;padding:10px 40px;border-radius:5px;font-weight:700;border:1.5px solid var(--gray);transition:.18s ease}
    .btn:hover{box-shadow:var(--shadow)}
    .btn-primary{background:var(--fg);color:#fff}
    .btn-reverse-primary{background:var(--bg);color:var(--fg)}
    .btn-outline{background:transparent;color:var(--bg)}

    /* Hero */
    .hero{color: #fff;background:linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('../images/creation-adam-painting.webp');background-size:cover;background-position:50% 22%;background-repeat:no-repeat }
    @media(max-width: 640px) {.hero {background-position:50% 50%}}
    .hero-container{text-align: center;max-width:700px;margin:0 auto;padding:107.5px 24px}
    .hero-container p{margin:30px 0}
    .hero .cta-row{justify-content:center}
    .hero .cta-row .btn{flex:0 0 auto !important;width:auto !important;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
    h1{font-size:clamp(45px,6vw,52px);line-height:1.12;margin:0 0 12px; font-family: Open Sans Condensed, sans-serif;}

    /* Sections */
    .section-layout{display: flex;flex-direction: column;align-items: center}
    h2{font-size:35px;margin:0; font-family: Open Sans Condensed, sans-serif; line-height: 40px;}
    .section-lead{margin-top:10px;color:#61677a}

    /* Support */
    #support{width:100%;min-height:300px}
    .support-background{color:#ffffff;min-height:300px;width: 100%;justify-content:center;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url('../images/campus-clocktower.webp') lightgray no-repeat;
      background-size:140%;background-position:0 37%;padding:24px}
  
    .support-container{display:flex;max-width:1016px;flex-direction:column;align-items:center;gap:20px;}
    .support-container p{font-size:1.125rem;text-align:center;margin:0}
    .support-container h2{text-align:center;}

    /* Newsletter */
    #newsletter{color:#ffffff;background: radial-gradient(57.03% 78.54% at 50% 50%, #2F6EB3 0%, #0C2752 100%);padding:75px 30px}
    .newsletter-container{display:flex;max-width:610px;flex-direction:column;align-items:center;gap:20px;}
    .newsletter-container p{font-size:1.125rem;text-align:center;margin:0}
    .newsletter-container h2{text-align:center;}

      /* Impact */
    #impact{color:var(--fg);background-color:#F6F7FB;padding:75px 30px}
    .impact-container{display:flex;max-width:1200px;flex-direction:column;align-items:center;gap:20px}
    .impact-container p{color:#61677A;font-size:1.125rem;text-align:center;margin:0}
    .impact-container h2{text-align:center;}
    .impact-statistics-container{max-width:776px;display:flex;flex-direction:column;align-items:center;gap:20px}
    @media(min-width:768px){
      .impact-statistics-container{
        flex-direction:row;
        gap:80px;
      }
    }
    .impact-statistics-container div{background-color:#ffffff;display:flex;flex-direction:column;align-items:center;justify-content:center;width:205px}
    .impact-statistics-container div span{color:#61677A;font-size:48px;font-weight:700;border-bottom:2px solid var(--fg);padding:0 10px;margin-top:30px}
    .impact-statistics-container div h3{font-size:1rem;margin:12px 0 30px 0}

    /* College */
    #college{color:#ffffff;background-color:#002755}
    .college-container{border-bottom:1.5px solid var(--gray);max-width:980px;width:100%;display:flex;flex-direction:column;
      align-items:center;gap:30px;padding:70px 30px}
    @media(min-width:992px){
      .college-container{
        flex-direction:row;
        gap:77px;
      }
    }
    .college-students-container{width:100%;max-width:492px}
    .college-students{background-image: url('../images/kids-on-campus.webp');background-size: 115%;
      background-position: 65% 30%;background-repeat: no-repeat;border-radius:12px;width:100%;aspect-ratio:492 / 277;}

    /* K-12 */
    #k12{color:#ffffff;background-color:#002755}
    .k12-container{max-width:980px;width:100%;display:flex;flex-direction:column;align-items:center;gap:30px;padding:70px 30px}
    @media(min-width:992px){
      .k12-container{
        flex-direction:row;
        gap:77px;
      }
    }
    .k12-students-container{width:100%;max-width:492px}
    .k12-students{background-image: url('../images/girl-raising-hand.webp');background-size: cover;
      background-position: 0 60%;background-repeat: no-repeat;border-radius:12px;width:100%;aspect-ratio:492 / 277}

    /* Resources */
    #resources{color:#ffffff;background-color:#000000}
    .resources-container{max-width:1200px;padding:70px 30px 30px 30px;margin:0 auto}
    #resources h2, .resources-description{text-align:center}
    .resources-description{font-size:1.125rem;margin-bottom:50px}
    .courses-container{font-family:'Open Sans Condensed', sans-serif;display:grid;grid-template-columns:repeat(1,1fr);gap:20px}
    @media(min-width: 768px) {
      .courses-container {
          grid-template-columns:repeat(2,1fr)
      }
    }
    @media(min-width: 1024px) {
        .courses-container {
            grid-template-columns:repeat(4,1fr)
        }
    }
    .course{display:flex;flex-direction:column}
    .course-link{position: relative;text-decoration: none;flex: 1 1;display: flex;flex-direction: column;border-radius: 5px;overflow: hidden;}
    .course-image{position: relative;overflow:hidden;height:360px}
    .course-image img{border-top-right-radius:5px;border-top-left-radius:5px;object-fit:cover;object-position:top;transition:scale;transition-duration:.5s;height:100%;width:100%;}
    #resources figure{text-decoration:none;border-radius:5px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;margin:0}
    .course-statistics{background-color: #1f1f1f;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;padding: 10px 15px;display: flex;flex-direction: row;justify-content: space-between}
    .course-statistics-container{display:flex;align-items:center}
    .course-statistics-container p{color:#9d9d9d;font-size:15px;font-weight:600;font-stretch:condensed;line-height:125%;min-height:25px;align-content:center;margin:0}
    .fa-video, .fa-timer{color:#9d9d9d;height:16px;margin-right:10px}
    .course-title-container{display:flex;flex-direction:column;align-items:center;padding:15px}
    .course-title-container h3{color: #fff;font-size: 17px;text-align: center;font-weight: 700;line-height: 120%;margin: 0 0 5px 0;width: 100%;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}
    .course-title-container p{color: #bfbfbf;font-size: 14px;font-weight: 600;font-stretch: condensed;line-height: 125%;margin:0}
    .resources-button{display:flex;flex-direction:column;align-items:center;margin:50px 0 15px 0}


    /* Footer */
    footer{padding:24px 0;color:#7a7d8c}
    footer .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
     .footer-separator {
      border-top: 1px solid #495d7d;
      margin-top: 40px;
    }
    footer {
      background-color: #0c2752;
      padding: 40px 20px;
      text-align: center;
      color: #bbb;
      font-size: 0.85rem;
      font-family: 'Open Sans', sans-serif;
      letter-spacing: 0.5px;
    }
    footer a {
      color: #bbb;
      text-decoration: none;
    }
    footer a:hover {
      color: #fff;
    }
    .footer-info {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 5px;
    }

  
/* Mobile-only tweaks */
@media (max-width: 640px){
  /* Hide the first "Start for FREE..." CTA in the top nav on small screens only */
  .topbar-nav .btn:first-child{display:none !important}
}
    
/* Fix bottom full-width button: keep it to content width and center it */
.footer .btn, .bottom-cta .btn, .end-cta .btn{
  width:auto;
  max-width:max-content;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}