:root {
      --navy: #0D1B2A;
      --red: #E63946;
      --light: #F2F4F7;
      --text: #1d1d1d;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }

    body {
      background: #ffffff;
      color: var(--text);
    }

    /* NAVBAR */
    .navbar {
      /*position: fixed;*/
      top: 0;
      width: 100%;
      padding: 18px 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(13, 27, 42, 0.9);
      backdrop-filter: blur(6px);
      z-index: 10;
    }

    .navbar a {
      color: #fff;
      margin-left: 25px;
      text-decoration: none;
      font-weight: 500;
    }

    .navbar .logo, .logo {
      font-size: 1.5rem;
      font-weight: 700;
      color: #fff;
      font-family: "Oswald", sans-serif;
      letter-spacing: 1px;
    }

    .btn-primary {
      background: var(--red);
      padding: 10px 22px;
      color: white;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 600;
    }


    /* HERO */
    .hero {
      height: 90vh;
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
                  url('https://kelmmedia.site/SampleSites/Academy/img/baseballHero.webp');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      padding: 0 8%;
    }

    .hero h1 {
      font-size: 4rem;
      color: white;
      font-family: "Oswald";
      line-height: 1.1;
      max-width: 600px;
      text-transform: uppercase;
    }

    .hero p {
      color: #f1f1f1;
      max-width: 500px;
      margin: 18px 0;
      font-size: 1.1rem;
    }

    .hero-buttons {
      margin-top: 20px;
    }

    .btn-outline {
      border: 2px solid white;
      padding: 10px 22px;
      color: white;
      text-decoration: none;
      margin-left: 12px;
      font-weight: 600;
      border-radius: 4px;
    }


    /* SECTION WRAPPER */
    section {
      padding: 40px 8%;
    }

    h2.section-title {
      font-family: "Oswald";
      font-size: 2.4rem;
      margin-bottom: 30px;
      text-align: center;
      text-transform: uppercase;
      color: var(--navy);
    }

    .three-col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 35px;
      margin-top: 30px;
    }

    .card {
      background: var(--light);
      padding: 25px;
      border-radius: 8px;
      text-align: center;
    }

    .card h3 {
      font-family: "Oswald";
      margin-bottom: 10px;
      color: var(--navy);
    }


    /* PROGRAM CARDS */
    .program-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
      margin-top: 30px;
    }
    @media (max-width: 768px) and (width > 600px) {
        .program-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 600px) {
        .program-grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    
    .why-choose-us-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
    @media (max-width: 768px) and (width > 600px) {
        .why-choose-us-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 600px) {
        .why-choose-us-grid {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .program {
      background: white;
      border: 1px solid #e5e7eb;
      padding: 20px;
      text-align: center;
      border-radius: 8px;
    }


    /* COACHES */
    .coach-card img {
      width: 100%;
      border-radius: 8px;
      height: 260px;
      object-fit: cover;
      margin-bottom: 15px;
    }

    .coach-card h4 {
      font-family: "Oswald";
      color: var(--navy);
      margin-bottom: 6px;
    }


    /* CTA BANNER */
    .cta {
      background: var(--navy);
      color: white;
      text-align: center;
      padding: 70px 8%;
    }

    .cta h2 {
      font-family: "Oswald";
      font-size: 2.6rem;
      margin-bottom: 20px;
    }

    /* FOOTER */
    footer {
      background: #0b1520;
      color: white;
      text-align: center;
      padding: 25px;
      margin-top: 0;
    }
    
.program-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
        
/*.program-img*/.program-img-container > img {
    max-width: 300px;
    height: auto;
}
        
@media (max-width: 768px) {
    .program-container {
        flex-direction: column-reverse;
    }
            
    .program-img-container {
        margin-bottom: 1rem;
    }
}

.required {
    color: #a63b23;
}
            
button[type="submit"] {
    cursor: pointer;
}
            
/* Contact form CSS from contractor site */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 767px) {
    .contact-grid {
        display: flex;
        flex-direction: column;
    }
    
    .contact-grid > div {
        flex: 100%;
        width: 100%;
    }
}

.contact-details ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.contact-details li {
  margin-bottom: 10px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/*label {
    display: block;
}*/

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row textarea,
.form-row select,
.radio-area,
.form-row input[type="tel"] {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.form-row textarea {
  height: 120px;
  resize: vertical;
}

.form-success {
  background: #e6f9ec;
  color: #1b7a2a;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-weight: 600;
}

.valid {
    color: green;
}