/* Hero Section */
body > main > section.hero > h1 > span {
  display: none;
}

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

body > main > section.hero > h1 {
  text-align: center;
}

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

/* Mission and Vision */
.mission-feature {
  width: 27%;
}

.mission-features {
  height: auto;
}

.features-container {
  padding-block: calc(var(--spacing) * 12);
}

.card {
  padding-block: 5.6vw;
}

.pricing-cards-container {
  height: auto;
}

.pricing-card {
  height: auto;
}

.pricing-cards-text {
  width: 75% !important;
  text-align: center !important;
}

@media (width <= 737px) {
  body > main > section.mission > div.mission-text > h2 {
    width: 70%;
  }
}

@media (width <= 979px) {
  .features-container {
    flex-direction: column;
    gap: 4rem;
    padding: 4rem;
  }

  .mission-feature {
    width: 100%;
  }

  .mission-text {
    position: relative;
    z-index: 1;
  }
}

@media (width <= 768px) {
  .mission-bottom {
    height: auto !important;
    align-items: flex-start;
    padding-right: 10rem !important;
  }

  .mission-top {
    flex-direction: column;
  }

  .mission-text {
    width: 100% !important;
  }

  .mission-video {
    align-self: flex-end;
    width: 100% !important;
    border-radius: 20px;
  }

  body > main > section.mission > div.mission-top > div.mission-video > video {
    border-radius: 0;
  }

  .white-shape {
    top: 10rem;
  }
}

/* Challenges Section */
@media (width <= 990px) {
  .challenges-text h2 {
    font-size: 30px;
  }

  .challenges-text p {
    font-size: 16px;
  }

  .challenges {
    padding-block: 96px !important;
  }

  .challenges,
  body > main > section.challenges > div {
    height: fit-content;
  }

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

/* Pricing card section */
@media (width <= 1024px) {
  .pricing-card {
    height: auto !important;
  }
}

#pricing-cards
  > div.pricing-cards-container.xl\:w-\[1248px\].xl\:h-\[618px\].mt-\[44px\].mb-\[96px\].flex.items-end.aos-init.aos-animate
  > div.pricing-card.second-card.flex.flex-col.gap-\[16px\].w-\[448px\].h-\[618px\].rounded-tl-\[25px\].rounded-tr-\[25px\].bg-white.border-\[1px\].border-\[solid\].border-\[\#f77f00\].px-\[48px\].py-\[32px\].overflow-hidden.relative
  > span {
  top: 1.1rem !important;
  right: 1.5rem !important;
}

#pricing-cards
  > div.pricing-cards-container
  > div.pricing-card
  > div.features
  > ul
  > li
  > svg {
  min-width: 20px;
  min-height: 20px;
}