@font-face {
  font-family: "Commuters Sans Light";
  font-weight: 300;
  src: url(../assets/fonts/fontspring-demo-commuterssans-light-webfont.woff2)
      format("woff2"),
    url(../assets/fonts/fontspring-demo-commuterssans-light-webfont.woff)
      format("woff");
}
@font-face {
  font-family: "Commuters Sans Heavy";
  font-weight: 900;
  src: url(../assets/fonts/fontspring-demo-commuterssans-heavy-webfont.woff2)
      format("woff2"),
    url(../assets/fonts/fontspring-demo-commuterssans-heavy-webfont.woff)
      format("woff");
}

@font-face {
  font-family: "TT Fors";
  src: url(../assets/fonts/fontspring-demo-tt_fors_regular-webfont.woff2)
      format("woff2"),
    url(../assets/fonts/fontspring-demo-tt_fors_regular-webfont.woff)
      format("woff");
}

@font-face {
  font-family: "Rock Slayers";
  font-weight: 400;
  src: url(../assets/fonts/rockslayers-bw6lw-webfont.woff2) format("woff2"),
    url(../assets/fonts/rockslayers-bw6lw-webfont.woff) format("woff");
}

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 300;
  src: url(../assets/fonts/helveticaneuelight-webfont.woff2) format("woff2"),
    url(../assets/fonts/helveticaneuelight-webfont.woff2) format("woff");
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

html {
  font-size: 62.5%; /* 10px */
  font-family: "Commuters Sans Light", sans-serif;
  font-weight: 300;
  scroll-behavior: smooth;
}

.header {
  background-color: #2f2857;
  padding: 8.1rem 3.5rem;

  .header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1540px;
    margin: 0 auto;

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 1.2rem;

      .nav-logo-img {
        width: 66.956px;
        height: 61.6px;
        flex-shrink: 0;
      }
      .nav-logo-span {
        color: #ccbfa2;
        text-align: center;
        font-family: "TT Fors", sans-serif;
        font-size: 3.2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }
    .nav-links {
      .nav-link {
        color: #fff;
        text-align: center;
        font-size: 1.8rem;
        line-height: normal;
      }
      .nav-link:first-child {
        margin-right: 1.8rem;
      }
    }
  }
}

.hero-section {
  background-color: #2f2857;
  padding: 4rem 3.5rem 8rem;

  text-align: center;

  .hero-heading {
    color: #ccbfa2;
    font-family: "Rock Slayers";
    font-size: 6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .hero-paragraph {
    color: #fff;
    font-size: 2rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 3.2rem auto;
    max-width: 911px;
  }
  .hero-paragraph-span {
    font-family: "Commuters Sans Heavy", sans-serif;
    font-weight: 900;
  }
  .cta-btn {
    padding: 1rem 3rem;

    border-radius: 10px;
    background: #fff;
    color: #2f2857;

    font-family: "TT Fors", sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    transition: opacity 0.1s ease;
  }
  .cta-btn:hover {
    opacity: 0.7;
  }
}

.sponsors-section {
  text-align: center;
  padding: 3.8rem 3.5rem 5.4rem;
  background-color: #fff;
  h2 {
    color: #2f2857;
    font-family: "Rock Slayers";
    font-size: 4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 3.5rem;
  }
  .sponsors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;

    img {
      width: 200px;
      height: auto;
      border-radius: 10px;
      object-fit: contain;
    }
  }
}
.about-us-section {
  background-color: #2f2857;
  padding: 8rem 3.5rem;
  .wrapper {
    max-width: 1230px;
    margin: 0 auto;
  }

  h2 {
    color: #ccbfa2;
    font-family: "Rock Slayers";
    font-size: 6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 1.3rem;
  }
  p {
    color: #fff;
    font-size: 2rem;
    font-style: normal;
    line-height: normal;
  }
  .what-container {
    max-width: 728px;
    margin-bottom: 8rem;
    position: relative;
    .hide-on-mobile {
      .footstep-1,
      .footstep-2,
      .arrow-1 {
        position: absolute;
        left: 105%;
        top: 80%;
      }
      .footstep-1 {
        left: 115%;
        top: 60%;
      }
      .footstep-2 {
        left: 125%;
        top: 100%;
      }
    }
  }
  .how-container {
    max-width: 750px;
    margin-bottom: 8rem;
    margin-left: 50%;
    position: relative;
    .hide-on-mobile {
      .footstep-3,
      .footstep-4,
      .arrow-2 {
        position: absolute;
        right: 105%;
        bottom: -20%;
      }
      .footstep-3 {
        right: 140%;
        top: 40%;
      }
      .footstep-4 {
        right: 155%;
        top: 70%;
      }
    }
  }
  .why-container {
    max-width: 604px;
  }
}

.contact-us-section {
  padding: 3.8rem 3.5rem;
  background-color: #fff;
  .wrapper {
    max-width: 1230px;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .form-content {
      margin-right: auto;
      width: 100%;
      max-width: 600px;

      h2 {
        color: #000;

        font-family: "Rock Slayers", sans-serif;
        font-size: 4rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      p {
        color: #000;
        font-family: "Commuters Sans Light", sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        max-width: 388px;
        margin: 0.8rem 0 4rem;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        margin-bottom: 1.8rem;

        label {
          color: #000;
          font-size: 1.8rem;
          font-style: normal;
          font-weight: 300;
          line-height: normal;
        }
        span {
          font-family: "Helvetica Neue", sans-serif;
        }
      }
      #email {
        max-width: 446px;
        height: 4.4rem;
      }
      #email,
      #message {
        border-radius: 10px;
        border: 1px solid #afafaf;
        background: #fff;
        padding: 1rem 2rem;
        font-size: 1.8rem;
        font-family: "Helvetica Neue", sans-serif;
        color: inherit;
        transition: border-color 0.3s, background-color 0.3s;
      }

      /* Focus state */
      #email:focus,
      #message:focus {
        border-color: #afafaf; /* Gray border on focus */
        outline: none;
      }

      /* Focus visible state */
      #email:focus-visible,
      #message:focus-visible {
        border-color: #afafaf; /* Gray border on focus visible */
      }

      /* Hover state */
      #email:hover,
      #message:hover {
        border-color: #888; /* Darker gray border on hover */
      }

      /* Active state */
      #email:active,
      #message:active {
        border-color: #555; /* Dark gray border on active */
      }

      /* Valid state */
      #email:valid,
      #message:valid {
        border-color: #afafaf; /* Gray border on valid input */
      }

      /* Invalid state */
      #email:invalid,
      #message:invalid {
        border-color: #afafaf; /* Gray border on invalid input */
      }

      /* Disabled state */
      #email:disabled,
      #message:disabled {
        border-color: #ddd; /* Light gray border on disabled */
        background-color: #f8f8f8;
        cursor: not-allowed;
      }
      #message {
        resize: none;
      }
      .submit-btn {
        padding: 1rem 2rem;
        color: #fff;
        background-color: #2f2857;
        border-radius: 10px;
        border: 1px solid #2f2857;
        text-align: center;
        cursor: pointer;
        width: 50%;
        min-width: 20rem;
      }
    }
  }
}
.footer {
  background-color: #000;
  padding: 3rem 2rem;
  .footer-content {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 996px;
    gap: 7.1rem;

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 1.2rem;

      img {
        width: 50px;
        height: 46px;
      }
      span {
        color: #f5f2ec;
        font-family: "TT Fors", sans-serif;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
    }
    .footer-contact-info {
      display: flex;
      flex-direction: column;
      color: #f5f2ec;
      font-size: 2rem;
      font-style: normal;
      font-weight: 300;
      line-height: normal;
      a {
        color: inherit;
      }
      span {
        font-family: "Helvetica Neue", sans-serif;
      }
    }
    .footer-social-media-links {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .phoneNumber {
      color: #f5f2ec;
      font-family: "TT Fors", sans-serif;
      font-size: 2rem;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      span {
        font-family: "Helvetica Neue", sans-serif;
      }
    }
  }
}
/* Styles for scroll animations */
section > * {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
section > .show {
  opacity: 1;
  transform: translateY(0);
}

/* Media queries for tablets and phones */
@media screen and (max-width: 1134px) {
  .about-us-section {
    .what-container,
    .how-container,
    .why-container {
      /* margin: 0 auto 5rem 0 !important;*/
      margin-bottom: 5rem;
    }

    .what-container,
    .why-container {
      margin-right: 10%;
    }
    .how-container {
      margin-left: 25%;
    }
    .hide-on-mobile {
      display: none;
    }
  }

  .contact-us-section {
    .wrapper {
      .form-content {
        width: 50%;
      }
    }
  }
}

@media screen and (max-width: 991.98px) {
  html {
    font-size: 50%; /* 8px */
  }

  .hero-paragraph {
    padding: 0 10rem;
  }
  .contact-us-section {
    & .wrapper {
      & .form-content {
        width: 45%;
        #email {
          width: 35rem;
        }
      }
    }
  }
}

@media screen and (max-width: 820px) {
  .contact-us-section {
    & .wrapper {
      & .form-content {
        width: 35%;
        #email {
          width: 30rem;
        }
      }
    }
  }

  .footer {
    .footer-content {
      gap: 5rem;
    }
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    .hero-paragraph {
      padding: 0 8rem;
    }
    .cta-btn {
      margin-top: 2rem;
    }
  }

  .contact-us-section {
    & .wrapper {
      flex-direction: column;
      & .form-content {
        width: 100%;
        margin-bottom: 8rem;
        #email {
          width: 35rem;
        }
        #message {
          width: 85%;
        }
      }
    }
  }
  .footer {
    .footer-content {
      gap: 5rem;
    }
  }
}

@media screen and (max-width: 576px) {
  html {
    font-size: 37.5%; /* 6px */
  }

  .header {
    .header-nav {
      .nav-logo {
        .nav-logo-img {
          width: 50px;
          height: auto;
        }
      }
      .nav-links {
        .nav-link {
          font-size: 2rem;
        }
      }
    }
  }

  .hero-section {
    .hero-paragraph {
      padding: 0 4rem;
    }
  }
  .sponsors-section {
    h2 {
      margin-bottom: 5rem;
    }
    .sponsors {
      flex-direction: column;
    }
  }
  .about-us-section {
    .how-container {
      margin-left: 10%;
    }
  }
}