.container {
  height: 80%;
}

.main-banner-content {
  width: 65%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  h1 {
    margin-top: 80px;
    text-align: left;
    font-size: 60px;
    line-height: 1.4;
  }

  h3 {
    width: 100%;
    font-size: 24px;
    border-top: 1px solid white;
    padding-top: 120px;
    color: white;
    text-align: left;
    line-height: 1.4;

    em {
      color: #ffae52;
    }
  }
}

.vid-fluid {
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
}

.partner-section {
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;

  .partner-heading {
    h3 {
      line-height: 50px;
    }

    :last-child {
      color: #649429;
      font-weight: 600;
    }
  }

  .partner-images {
    width: 100%;
    height: auto;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;

    img {
      width: 12vw;
      height: 12vh;
      object-fit: contain;
      cursor: pointer;
    }
  }
}

.introduction {
  width: 100%;
  height: auto;
  padding: 80px 0 28px;
  background-color: #f9f5f0;
  text-align: center;

  h3 {
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    word-spacing: 0;
    color: #232323;
  }

  .intro-container {
    margin: 80px 120px;
    border-bottom: 1px solid #d4b593;
    padding-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;

    .intro-container-info {
      width: 102%;
      word-spacing: 0;
      color: #242424;
      text-align: left;

      p {
        font-size: 17px;
        line-height: 25.5px;
      }
    }

    .intro-container-img {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 15px;
      }
    }
  }

  :last-child {
    margin-bottom: 45px;
    border-bottom: 0px solid white;
  }
}

.ceo-section {
  width: 100%;
  height: auto;
  margin-top: -45px;
  padding: 95px 120px 100px;
  display: flex;
  gap: 260px;
  background-color: #4e4e4e;
  color: white;
  font-size: 17px;

  .ceo-info {
    width: 47%;

    .ceo-links {
      margin-top: 35px;
      display: flex;
      justify-content: space-between;

      .ceo-email {
        width: 100%;
        display: flex;
        flex-direction: column;

        p b {
          color: #ffae52;
        }

        a {
          margin: 10px 0px;

          img {
            object-fit: contain;
          }
        }

        :hover {
          color: #8cc63f;
        }

        .icon-link {
          width: 100%;
          height: 100%;

          img {
            width: 2.25vw;
            height: 4.5vh;
            margin-right: 18px;
            object-fit: cover;
          }
        }
      }

      .ceo-img {
        width: auto;
        height: auto;
        text-align: right;

        img {
          width: 74%;
          height: auto;
          border: 2px solid white;
          border-radius: 100%;
          object-fit: cover;
          cursor: pointer;
        }
      }
    }
  }

  .funding-info {
    width: auto;
    border: 1px solid white;
    border-radius: 20px;
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;

    .funding-heading {
      b {
        color: #ffae52;
      }
    }

    img {
      width: 18vw;
      height: auto;
      object-fit: contain;
      border: 2px solid white;
      border-radius: 50px;
      cursor: pointer;
    }
  }
}

.links-section {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  padding: 80px 110px;
  font-size: 17px;

  h1 {
    margin-bottom: 35px;
    text-align: center;
  }

  .links-container {
    width: 100%;
    height: auto;
    display: flex;
    gap: 20px;

    .link-box {
      width: calc(100% / 6.5);
      height: 38vh;
      border: 4px solid black;
      border-radius: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;

      img {
        width: 5vw;
        height: 10vh;
        object-fit: cover;
      }

      h3 {
        width: auto;
        height: 100%;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      button {
        width: 100%;
        height: 13vh;
        border: none;
        border-radius: 25px;
        padding: 8px 0px;
        color: #fff;
        background-color: rgba(50, 50, 133, 0.877);
        font-weight: 700;
      }
    }
  }
}

.faq-section {
  width: 100%;
  height: auto;
  padding: 80px 110px;
  font-size: 17px;
  line-height: 1.6rem;
  background-color: #f9f5f0;
  text-align: center;

  .faq-heading {
    width: auto;
    height: auto;
  }

  .faq-desc {
    width: 100%;
    margin: 24px 0 16px;
    font-size: 17px;
  }

  .faq-container {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .faq-accordian {
      width: 80%;
      height: auto;
      margin-top: 26px;
      border-radius: 5px;
      padding: 4px 21px;
      box-shadow: 1px 1px #ffae52;
      background-color: #fff;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      text-align: left;

      .question {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h5 {
          width: auto;
          height: auto;
          margin-top: 7px;
          font-size: 17px;
        }

        .icon {
          width: 1vw;
          height: 2vh;
          margin-right: 16px;
          transition: transform 0.2s;
        }

        .icon.active {
          transform: rotate(-180deg);
        }
      }

      .answer {
        width: auto;
        max-height: 0;
        color: #2e2e2e;
        overflow: hidden;
        transition: max-height 0.2s;

        p {
          width: auto;
          height: auto;
          padding-top: 8px;
          font-size: 16px;
        }
      }
    }
  }
}

.footer {
  width: 100%;
  height: 42vh;
  background-color: #181516;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .footer-background {
    width: 100%;
    height: 45vh;
    margin: 50px auto 8px;
    opacity: 0.03;
    object-fit: cover;
    position: relative;

    img {
      height: 90%;
    }
  }

  .footer-container {
    width: 100%;
    height: auto;
    position: absolute;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 18px;

    .footer-img {
      width: auto;
      height: auto;
      margin-top: 18px;

      a {
        img {
          width: auto;
          height: auto;
          object-fit: cover;
          cursor: pointer;
        }
      }
    }

    .footer-address {
      width: auto;
      height: auto;

      p {
        width: auto;
        height: auto;
        color: #ffae52;
      }
    }

    .footer-email {
      width: auto;
      height: auto;
      margin-top: -10px;

      a {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        img {
          width: 2.3vw;
          height: 4.6vh;
          object-fit: contain;
        }
      }

      :hover {
        color: #8cc63f;
      }
    }

    .footer-social-ids {
      width: auto;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;

      a {
        img {
          width: 2.5vw;
          height: 5vh;
          object-fit: contain;
        }
      }
    }

    .footer-copyright {
      color: #a4a3a3;
    }
  }
}

.contact-container {
  width: 100%;
  height: 100%;
  display: none;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.644);
}

.contact-left {
  border: 2px solid #ffae52;
  border-radius: 30px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: #f9f5f0;
}

.contact-inputs {
  width: 400px;
  height: 50px;
  border: none;
  outline: none;
  padding-left: 25px;
  font-weight: 500;
  color: #666;
  border-radius: 50px;
}

.contact-left textarea {
  height: 140px;
  padding-top: 15px;
  border-radius: 20px;
}

.contact-inputs:focus {
  border: 2px solid #ff994f;
}

.contact-inputs::placeholder {
  color: #a9a9a9;
}

.contact-left button {
  display: flex;
  align-items: center;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  gap: 10px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(170deg, #ff994f, #fa6d86);
  cursor: pointer;
}

@media screen and (max-width: 853px) {
  .app-main {
    width: 1490px;
  }

  header {
    width: 1490px;

    .navbar {
      width: 1490px;
    }
  }

  .partner-section {
    height: 100vh;
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .partner-heading {
      h3 {
        font-size: 13.5vw;
        line-height: 9vh;
      }

      :last-child {
        margin: 30px 0px;
      }
    }

    .partner-images {
      margin-top: 45px;
      justify-content: space-evenly;
      gap: 50px;

      img {
        width: 80vw;
      }
    }
  }

  .introduction {
    padding: 150px 0 100px;

    h3 {
      font-size: 16vw;
    }

    .intro-container {
      display: grid;

      .intro-container-info {
        width: 100%;
        word-spacing: 1.5vw;

        p {
          margin-bottom: 40px;
          font-size: 10vw;
          line-height: 6vh;
        }
      }

      .intro-container-img {
        img {
          object-fit: contain;
        }
      }
    }

    :last-child {
      display: flex;
      flex-direction: column-reverse;
      margin-top: 7px;

      img {
        margin-top: -20px;
      }
    }
  }

  .ceo-section {
    margin-top: 0;
    padding: 200px 120px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 50px;
    font-size: 10.2vw;

    .ceo-info {
      width: 100%;
      margin-bottom: 35px;

      p {
        word-spacing: 1.5vw;
        line-height: 8vh;
      }

      .ceo-links {
        margin-top: 64px;

        .ceo-email {
          a {
            margin: 24px 0px;
          }

          .icon-link {
            img {
              width: 19vw;
              height: auto;
              margin-right: 30px;
            }
          }
        }

        .ceo-img {
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 85%;
          }
        }
      }
    }

    .funding-info {
      border: 2px solid white;
      border-radius: 30px;
      padding: 35px;
      gap: 24px;

      img {
        width: 100%;
        border-radius: 60px;
      }
    }
  }

  .links-section {
    height: 240vh;
    margin-bottom: 70px;
    padding: 130px 110px 170px;
    font-size: 10.2vw;

    h1 {
      margin-bottom: 100px;
      font-size: 16vw;
      font-weight: 700;
    }

    .links-container {
      height: 100%;
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 45px;

      .link-box {
        width: 92%;
        height: 50vh;
        border-radius: 28px;
        padding: 30px;
        justify-content: space-evenly;
        gap: 24px;

        img {
          width: fit-content;
          height: 13vh;
        }

        h3 {
          height: auto;
          font-size: 10.2vw;
        }

        button {
          width: 80%;
          height: 12vh;
        }
      }
    }
  }

  .faq-section {
    padding: 120px 110px 140px;

    .faq-heading {
      font-size: 16vw;
      font-weight: 700;
    }

    .faq-desc {
      margin: 40px 0;
      font-size: 10vw;
      line-height: 6vh;
    }

    .faq-container {
      padding-bottom: 20px;

      .faq-accordian {
        width: 90%;
        margin-top: 40px;
        padding: 10px 21px;

        .question {
          h5 {
            font-size: 10vw;
          }

          .icon {
            width: auto;
            height: auto;
            object-fit: cover;
          }
        }

        .answer {
          p {
            padding-top: 15px;
            font-size: 8.6vw;
            line-height: 6vh;
          }
        }
      }
    }
  }

  .footer {
    height: auto;

    .footer-container {
      gap: 15px;

      .footer-img {
        margin-top: 20px;
      }

      .footer-address {
        margin-top: 5px;
      }

      .footer-email {
        a {
          img {
            width: 8.1vw;
            height: auto;
            object-fit: cover;
          }
        }
      }

      .footer-social-ids {
        margin: 10px;

        a img {
          width: 8.1vw;
          height: auto;
          object-fit: cover;
        }
      }
    }
  }

  .contact-left {
    width: 80%;
    height: auto;
    padding: 100px;
    gap: 70px;
    font-size: 10vw;

    textarea {
      height: 50vh;
    }

    button {
      padding: 20px 45px;
      font-size: 8vw;
    }
  }

  .contact-inputs {
    width: 100%;
    height: 10vh;
    padding-left: 35px;
  }

  .contact-right {
    display: none;
  }
}