nav {
  background-color: #fcfaf3;
}

#hero-img {
  object-position: 0 -9rem;
}

.mission-video {
  z-index: 200;
}

.hero-img-container {
  z-index: 999;
}

.white-shape {
  z-index: 199;
}

@media (width <= 1280px) {
  body > main > section.challenges > div {
    gap: 4rem;
  }

  .partner {
    width: 261px;
  }
}

@media (width <= 1024px) {
  .mission-video {
    height: 435px;
    width: 435px;
  }

  .mission-top {
    gap: 4rem;
  }

  .mission-features {
    justify-content: center;
  }

  .features-container {
    width: 100%;
    border-radius: 0;
  }

  .bg-yellow-droplet {
    top: -2rem;
  }

  .challenges-text {
    width: 347px;
  }

  .challenges-dropdowns-container {
    width: 435px;
  }

  .bg-yellow-fan {
    top: -26rem;
  }

  .card {
    justify-content: center;
    padding: 30px;
  }

  #commitments > div {
    flex-direction: column;
    gap: 2.98vw;
    position: relative;
    z-index: 1;
  }

  .commitments-right {
    flex-direction: column;
    width: 100%;
    gap: 2.98vw;
    height: auto;
  }

  .card-group {
    width: 100%;
  }

  .partner {
    width: 209px;
    padding: 17px 65px;
  }
}

@media (width <= 768px) {
  .bg-yellow-fan {
    width: 264px;
    height: 255px;
    border-bottom-left-radius: 107.2px;
    border-top-right-radius: 107.2px;
    top: -15rem;
  }

  .mission-video {
    height: 298px;
    width: 298px;
    border-top-right-radius: 110px;
  }

  .mission-video video {
    border-top-right-radius: 110px;
  }

  .white-shape {
    border-top-right-radius: 110px;
  }

  .mission {
    padding-left: 80px !important;
    padding-right: 80px !important;
    margin-top: 88px !important;
  }

  .mission-text {
    width: 243px;
    height: fit-content;
  }

  .mission-bottom {
    width: 688px;
    height: 427px;
    align-self: flex-start;
    border-top-left-radius: 133px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    background-color: #003049;
  }

  .bg-rectangle {
    width: 227px;
  }

  .mission-features {
    width: 100%;
    height: 100%;
  }

  .features-container {
    flex-direction: column;
    padding: 0 !important;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 0 !important;
  }

  .mission-feature {
    width: 100%;
  }

  .bg-yellow-droplet {
    width: 140px;
    height: 134px;
  }

  .challenges {
    height: auto;
    padding-block: 80px !important;
  }

  body
    > main
    > section.challenges.bg-\[\#FCBF49\].h-\[556px\].\px-\[96px\].\py-\[130px\].flex.justify-center.relative
    > div.flex.justify-between.w-full.max-w-\[1233px\] {
    flex-direction: column;
    gap: 56px;
  }

  .challenges-text {
    width: 100%;
    text-align: center;
  }

  body
    > main
    > section.challenges.bg-\[\#FCBF49\].h-\[556px\].\px-\[96px\].\py-\[130px\].flex.justify-center.relative
    > div.flex.justify-between.w-full.max-w-\[1233px\]
    > div.challenges-text.w-\[488px\].flex.flex-col.justify-center.max-xl\:w-\[423px\]
    > p {
    text-align: left;
    margin-top: 16px !important;
  }

  .challenges-dropdowns-container {
    width: 100%;
  }

  body
    > main
    > section.challenges.bg-\[\#FCBF49\].h-\[556px\].\!px-\[96px\].\!py-\[130px\].flex.justify-center.relative
    > div.flex.justify-between.w-full.max-w-\[1233px\]
    > div.challenges-dropdowns-container.w-\[612px\].flex.flex-col.justify-center.max-xl\:w-\[530px\]
    > ul {
    gap: 39px;
  }

  .partners-container {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  #hero-img {
    object-position: center;
  }
}

@media (width <= 640px) {
  .hero {
    padding-left: 28px;
    padding-right: 28px;
  }

  .hero > p {
    text-align: center;
  }

  .hero-img-container {
    width: 78vw;
    height: 81px;
  }

  #hero-img {
    border-radius: 10px;
    object-position: 0 -4rem;
  }

  .mission {
    background-color: #003049;
    margin-top: 0 !important;
    padding-block: 88px;
    position: relative;
  }

  .white-shape {
    display: none;
  }

  .mission-text {
    color: white;
    width: 100%;
    text-align: center;
  }

  .mission-video {
    display: none;
  }

  .bg-rectangle {
    display: none;
  }

  .bg-yellow-fan {
    display: none;
  }

  .mission-bottom {
    width: 100vw;
    align-self: center;
    height: fit-content;
  }

  .mission-features {
    height: fit-content;
  }

  .hero-img-container {
    position: relative;
    top: 2.5rem;
    margin-top: 0 !important;
    height: 100px;
  }

  .mission,
  .mission-bottom,
  .challenges,
  #commitments,
  .partners {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body > main > section.mission > div.mission-top > div.mission-text > p {
    width: 100%;
    max-width: none;
  }

  .bg-yellow-droplet {
    display: none;
  }

  .circle-video-container {
    z-index: 2;
    width: 63.2vw;
    height: 63.2vw;
    bottom: -33vw;
  }

  .challenges {
    padding-block: 0 !important;
    padding-top: 39.5vw !important;
    padding-bottom: 14.5vw !important;
  }

  .mission {
    padding-bottom: 45vw;
  }

  .mobile-video-container {
    position: absolute;
    bottom: -26vw;
  }

  .circle-video-container {
    position: relative;
    bottom: 0;
  }

  .white-shape-mobile {
    position: absolute;
    top: -2rem;
    right: -2rem;
    opacity: 50%;
    z-index: 1;
    border-top-right-radius: 33.9vw;
    width: 39.7vw;
    height: 39.7vw;
  }

  .card {
    border-radius: 10px;
    height: fit-content;
  }

  body
    > main
    > section.challenges
    > div
    > div.challenges-dropdowns-container
    > ul {
    gap: 4.26vw;
  }

  body > main > section.hero > p {
    width: 90%;
  }

  body > main > section.hero > h1 > span {
    display: none;
  }

  body > main > section.hero > h1 > br {
    display: block;
  }
}

@media (width > 640px) {
  .mobile-video-container {
    display: none;
  }
}

@media (width > 1699px) {
  #commitments > div > div.commitments-left > h2 {
    text-wrap: nowrap;
  }

  .commitments-right {
    gap: 4rem;
  }
}

@media (width <= 640px) {
  .bg-yellow-droplet-mobile {
    display: block;
    border-radius: 300px;
    border-top-left-radius: 0;
    bottom: -7rem;
  }
}