:root {
  --blue: #27e8b7;
  --yellow: #FFFA65;
  --yellow2: #CCFF56;
}

@media (max-width: 765px) {
  main {
    overflow-x: clip;
  }

  .nav-first {
    display: none;
  }

  .nav ul {
    gap: 2px;
  }

  .nav-third a {
    font-size: 12.8px;
  }

  .nav-active {
    color: black;
    background-color: var(--yellow2);
  }

  .nav-active::before {
    /* z-index: -1; */
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background-color: var(--blue);
  }

  /* .nav-third a::before {
    content: "";
    position: absolute;
    right: -4px;
    width: 1px;
    height: 80%;
    background-color: rgb(245, 243, 243);
  } */

  .nav-second img {
    bottom: -40px;
    width: 120px;
    transform: translateX(0%)
  }

  .content {
    width: 80%;
    /* background-color: red; */
  }

  .msg h2 {
    font-size: 4.5vw;
  }

  .title h1 {
    font-size: 15vw;
  }

  .title h1::before {
    left: 0px;
    top: 30px;
  }

  .description {
    font-size: 4vw;
  }

  .button-wrapper a {
    font-size: 4vw;
  }

  .about-football-club {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .af-second {
    width: 100%;
  }

  .af-first {
    width: 100%;
  }

  .af-first img {
    width: 100vw;
  }

  .af-second .row1 {
    width: 100%;
  }

  .af-second .row1 .h-line {
    width: 25%;
  }

  .af-second .row2 {
    margin-left: 0;
  }

  .af-second .row2 h2 {
    font-size: 8vw;
  }

  .af-second .row3 {
    width: 100%;
  }

  .af-second .row3 p {
    font-size: 16px;
  }

  .af-second .row4 a {
    padding: 8px 33vw;
  }

  .explore-tournaments {
    flex-direction: column;
    margin-left: 2vw;
  }

  .et-first {
    width: 100%;
  }

  .et-second {
    width: 100%;
  }

  .et-first .row1 {
    font-size: 4vw;
    line-height: 50px;
  }

  .et-first .row1 span {
    text-decoration: underline wavy;
    -webkit-text-decoration-line: wavy;
    -webkit-text-decoration-style: wavy;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: rgb(248, 194, 93);
  }

  .et-first .row3 a {
    padding: 8px 33vw;
  }

  .et-first .row2 p {
    width: 90%;
    font-size: 14px;
  }

  .et-first .row3 a {
    font-size: 14px;
  }

  .et-second {
    width: 100vw;
    padding: 0%;
    width: 100%;
    height: 100%;
  }

  .explore-tournaments .et-second img {
    /* background-color: red; */
    width: 100vw;
  }

  .page3 {
    margin-top: 350vw;
  }

  .coaches-wrapper {
    flex-direction: column;
  }

  .coaches-box {
    width: 90vw;
  }

  .coaches-title {
    font-size: 4vw;
  }

  .coaches-box .description {
    font-size: 4vw;
  }

  .page4 {
    margin-top: 2500px !important;
  }

  .toffie-wrapper {
    top: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .toffie-wrapper img {
    width: 100vw;
  }

  .tw-box {
    text-align: center;

  }

  .page4 {
    margin-top: 2200px;
  }

  .page4 .archievement-container .video-container {
    height: 120%;
  }

  .archievement-container video {
    height: 120%;
  }

  .tw-box p {
    font-size: 8vw;
  }

  .page5 {
    margin-top: 20vh;
    margin-left: 1vw;
    margin-left: 1vw;
    width: 98%;
  }

  .register-wrapper {
    overflow: hidden;
    flex-direction: column;
    height: 100%;
    padding: 0;
    margin-left: 1vw;
    margin-right: 1vw;
    gap: 0;
  }

  .register-wrapper .first img {
    width: 120vw;
    transform: translateX(-42px) translateY(-40px);
  }

  .register-wrapper .first {
    width: 100%;
  }

  .register-wrapper .second {
    width: 80%;
    transform: translateY(-40px);
  }

  .register-wrapper .second .row1 h1 {
    font-size: 10vw;
  }

  .register-wrapper .row2 form input::placeholder {
    font-size: 4vw;
  }

  .register-wrapper .row2 form input {
    width: 100%;
  }

  .register-wrapper .row2 button {
    font-size: 4vw;
    height: 60%;
    right: 1.3vw;
  }

  .register-wrapper .row2 form input {
    font-size: 4vw;
  }

  footer .row1 {
    flex-direction: column;
  }

  .container {
    transition: all 0.4s ease !important;
    z-index: 999;
    width: 100vw !important;
    left: 50vw !important;
    transform: translate(-50%);
    margin: 50px auto;
    padding: 25px;
    background: #ffffff6b;
    backdrop-filter: blur(60px);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    font-family: 'poppins';
  }

  .page3content {

    margin-top: 100px;
    margin-top: none;
    display: flex;
    flex-direction: column;
  }

  .page3content .p3first {
    width: 100%;
  }

  .contact-us-container {
    flex-direction: column;
  }

  .cont-first {
    width: 100%;
    height: 40vh;
  }

  .cont-second {
    width: 100%;
  }

  .contact-us .cont-first img {
    left: 0px;
    width: 100vw;
  }

  .contact-us-container {
    width: 100%;
  }

  .p3second img {
    width: 100vw;
  }

  .page4Contact {
    margin-top: 100vw;
  }

  /* gallery  */
  .gallery-image-box {
    width: 90vw;
    height: 80vw;
  }

  #showMoreButtonGallery:hover {
    padding: 0;
  }
}