body {
  background-color: #fff;
  font-size: 14px;
  color: #1b1b1b;
  font-family: "Inter", sans-serif;
  /* font-family: "Plus Jakarta Sans", sans-serif; */
  font-optical-sizing: auto;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
ul li a {
  color: #1b1b1b;
  text-decoration: none;
}

.home-wrap {
  .showcaseSection {
    background: url("../Images/img_banner.png") no-repeat center center #1b985e;
    min-height: 897px;
    position: relative;
    &::after {
      background: url("../Images/start_playing_card.png") no-repeat;
      position: absolute;
      left: 41%;
      bottom: 172px;
      z-index: 1;
      content: "";
      width: 295px;
      height: 212px;
    }
    .logo {
      height: 68px;
      display: flex;
      align-items: center;
    }
    .navigation-section {
      ul {
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 46px;
        padding: 0;
        margin: 0;
        li {
          font-family: "Inter", sans-serif;
          font-weight: 600;
          font-size: 14px;
          line-height: 100%;
          letter-spacing: 5%;
          text-transform: uppercase;
          a {
            color: #d4f549;
          }
        }
      }
      @media (max-width: 991.98px) {
        ul {
          gap: 20px;
        }
      }
    }
    .signBtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40px;
      border-radius: 8px;
      gap: 10px;
      padding: 10px;
      background-color: #141414;
      font-family: "Inter", sans-serif;
      font-weight: 600;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 5%;
      text-transform: uppercase;
      color: #d4f549;
      cursor: pointer;
      margin-top: 14px;
    }
    h3 {
      font-family: "Agdasima", sans-serif;
      font-weight: 700;
      /* font-size: 289.28px; */
      font-size: clamp(40px, 22vw, 289.28px); /* Responsive font size */
      line-height: 77%;
      letter-spacing: 2%;
      text-transform: uppercase;
      color: #d4f549;
      padding: 35px 0 100px 0;
    }
    p {
      font-family: "Inter", sans-serif;
      font-weight: 600;
      font-size: 16px;
      line-height: 150%;
      letter-spacing: 1%;
      color: #000000;
      padding-bottom: 27px;
    }
    .singUpBtn {
      width: 188px;
      height: 40px;
      top: 725.33px;
      left: 68.73px;
      border-radius: 8px;
      gap: 10px;
      padding: 10px;
      background-color: #d4f549;
      font-family: "Inter", sans-serif;
      font-weight: 600;
      font-size: 14px;
      line-height: 100%;
      letter-spacing: 5%;
      text-transform: uppercase;
      color: #000;
    }
    .hamburger-menu {
      display: none;
    }
    @media (max-width: 1199.98px) {
      background: url("../Images/img_banner3.png") no-repeat center center
        #1b985e;
    }
    @media (max-width: 991.98px) {
      background-size: contain;
      background-position-y: top;
      min-height: 532px;
      text-align: center;
      .singUpBtn {
        margin: 0 auto;
      }
      &::after {
        width: 100px;
        height: 72px;
        background-size: contain;
        bottom: 224px;
        left: 73%;
      }
      h3 {
        padding: 5px 0 0 0;
        font-size: clamp(40px, 17vw, 289.28px);
      }
      p {
        padding-bottom: 0;
      }
    }
    @media (max-width: 767.98px) {
      background-size: contain;
      background-position-y: top;
      min-height: 420px;
      &::after {
        width: 100px;
        height: 72px;
        background-size: contain;
        bottom: 153px;
      }
      h3 {
        padding: 5px 0 0 0;
        font-size: clamp(40px, 17vw, 289.28px);
      }
      p {
        padding-bottom: 0;
      }
      .nav-card {
        display: none;
      }
      .btn-card {
        display: none;
      }
      .hamburger-menu {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        width: 150px;
        text-align: center;
        .menu-icon {
          display: inline-block;
          cursor: pointer;
          .bar1,
          .bar2,
          .bar3 {
            width: 30px;
            height: 3px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
          }
          &.change {
            .bar1 {
              transform: translateY(9px) rotate(-45deg);
            }
            .bar2 {
              opacity: 0;
            }
            .bar3 {
              transform: translateY(-9px) rotate(45deg);
            }
          }
        }
        .menuList {
          padding: 5px;
          border-radius: 4px;
          background: #fff;
          display: none;
          ul {
            padding: 0;
            margin: 0;
            li {
              border-bottom: #1b985e 1px solid;
              padding-bottom: 3px;
              &:last-child {
                border: none;
                padding-bottom: 0;
              }
            }
          }
        }
      }
    }
    @media (max-width: 575.98px) {
      &::after {
        bottom: 195px;
        left: 419px;
      }
    }
  }
  .feature-section {
    background: url("../Images/list_bg.png") no-repeat center top;
    height: 204px;
    margin-top: -90px;
    z-index: 2;
    position: relative;
    .feature-box {
      height: 204px;
      font-size: 14px;
      color: #256a4a;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
      justify-content: center;
      &.first-child {
        padding-right: 33%;
      }
      &.last-child {
        padding-left: 33%;
      }
    }
    @media (max-width: 991.98px) {
      background: #9ee228;
      border: #d4f549 2px solid;
      height: 174px;
      margin-top: -64px;
      margin-bottom: 38px;
      .feature-box {
        height: 174px;
        .text {
          text-align: center;
        }
      }
    }
    @media (max-width: 767.98px) {
      margin-top: 0px;
      .feature-box {
        &.first-child {
          padding-right: 0;
        }
        &.last-child {
          padding-left: 0;
        }
        .text {
          min-height: 42px;
        }
      }
    }
    @media (max-width: 575.98px) {
      min-height: 174px;
      height: auto;
      .feature-box {
        height: auto;
        min-height: 174px;
        border-bottom: #d4f549 2px solid;
      }
    }
  }
  .match-wrap {
    font-family: "Inter", sans-serif;
    margin-bottom: 60px;
    h2 {
      font-size: 72px;
      color: #141414;
      padding: 0;
      margin: 0 0 20px 0;
      font-weight: bold;
      text-align: center;
    }
    .match-slider {
      display: flex;
      overflow-x: auto;
      flex-wrap: nowrap;
      gap: 20px;
      padding: 10px;
      justify-content: center;
      .match-card {
        flex: 0 0 auto; /* Important: ensures it doesn't shrink or grow */
        width: 580px;
        border: #f0f0f0 1px solid;
        border-radius: 16px;
        padding: 10px;
        .title {
          width: 100%;
          height: 50px;
          display: flex;
          font-size: 16px;
          color: #000;
          font-weight: bold;
          background-image: linear-gradient(#d4f549, #9ee228);
          border: #f0f0f0 1px solid;
          box-shadow: 0 1px 4px #bddd84 inset;
          padding: 0 14px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-transform: uppercase;
          letter-spacing: 9%;
          margin-bottom: 20px;
        }
        .flag-card {
          h3 {
            font-family: "Inter", sans-serif;
            display: flex;
            align-items: center;
            font-size: 19px;
            text-transform: inherit;
            color: #000;
            gap: 4px;
            font-weight: 600;
            letter-spacing: -1px;
            padding: 0;
          }
          h4 {
            font-family: "Inter", sans-serif;
            font-size: 16px;
            text-transform: inherit;
            color: #a0a0a0;
            gap: 4px;
            font-weight: 600;
          }
          &.last {
            text-align: end;
            h3 {
              justify-content: end;
            }
          }
        }
        .time-card {
          display: flex;
          flex-direction: column;
          text-align: center;
          font-size: 12px;
          color: #404040;
          font-weight: bold;
          gap: 5px;
          span {
            background-color: #f4f9cf;
            font-size: 16px;
            color: #1b985e;
            border-radius: 10px;
          }
        }
        .txtb {
          border-top: 1px solid #f0f0f0;
          padding: 20px 0 0 0;
          margin-top: 30px;
          font-size: 12px;
          color: #a0a0a0;
        }
      }
    }
    @media (max-width: 575.98px) {
      & .match-slider {
        justify-content: left;
        & .match-card {
          width: 356px;
          & .flag-card {
            text-align: center;
            h3 {
              justify-content: center;
            }
            &.last {
              text-align: center;
              h3 {
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
  .startLearning-section {
    background: url("../Images/bg_startLearning.png") no-repeat right bottom
      #fff;
    background-size: 76%;
    border: #f0f0f0 1px solid;
    border-radius: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
    padding: 40px 0 0 0;
    min-height: 800px;
    font-family: "Inter", sans-serif;
    h3 {
      font-size: 72px;
      color: #141414;
      font-weight: bold;
      text-align: center;
      span {
        color: #1b985e;
      }
    }
    .cardSection {
      .imgb {
        width: 85%;
      }
      .txtb {
        padding: 40px 50px 0 0;
        p {
          font-size: 16px;
          color: #080808;
          padding-bottom: 40px;
        }
        strong {
          font-size: 20px;
          color: #080808;
          font-weight: 600;
          display: block;
        }
        .learnBtn {
          margin-top: 30px;
          background-color: #d4f549;
          text-transform: uppercase;
          color: #000;
        }
      }
    }
    @media (max-width: 991.98px) {
      h3 {
        font-size: 40px;
      }
      & .cardSection {
        .txtb {
          padding: 20px 10px 10px 10px;
        }
      }
    }
  }
  .frequentQueries-section {
    padding: 40px 0;
    .imgb {
      width: 100%;
    }
    h3 {
      font-size: 70px;
      color: #080808;
      font-family: "Inter", sans-serif;
      padding-bottom: 20px;
    }
    ul {
      margin: 0 0 30px 0;
      padding: 0;
      li {
        font-size: 16px;
        color: #080808;
        padding: 20px 0;
        border-bottom: #e7e7e7 1px solid;
      }
    }
    .btn {
      background-color: #d4f549;
      text-transform: uppercase;
    }
    @media (max-width: 991.98px) {
      text-align: center;
      h3 {
        padding-bottom: 0;
        font-size: 40px;
      }
      ul {
        li {
          padding: 10px 0;
        }
      }
    }
  }
}