/**
* Hero Banner section
*
* @since 1.0.0
*/

.hero-banner {
  padding: 200px 0 125px;
}

.hero-banner::before,
.hero-banner::after {
  content: "";
  position: absolute;
  width: 100%;
  z-index: 1;
}

.hero-banner::before {
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #101014 0%, rgba(15, 15, 20, 0) 100%);
  height: 167px;
}

.hero-banner::after {
  left: 0;
  bottom: 0;
  background: linear-gradient(360deg, #05070f 0%, rgba(5, 7, 15, 0) 100%);
  height: 196px;
}

.hero-banner .bg-color {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: #17171799;
  width: 100%;
  height: 167px;
}

.hero-banner .hero-banner-title {
  font-size: 52px;
  background: linear-gradient(91.67deg, #ffffff 4.63%, #aaabad 99.1%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/**
* Our Philosophy section
*
* @since 1.0.0
*/

.our-philosophy .philosophy-text {
  font-size: 14px;
  line-height: 1.9;
}

/**
* The People section
*
* @since 1.0.0
*/

.the-people .card {
  background: #070b15;
  border: 1px solid rgba(27, 31, 47, 0.302);
}

.the-people .card::before,
.the-people .card::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
}

.the-people .card::before {
  top: -70px;
  background: linear-gradient(180deg, #05070f 0%, rgba(5, 7, 15, 0) 100%);
  width: 100%;
  height: 304px;
}

.the-people .card::after {
  bottom: -10px;
  background: linear-gradient(0deg, #05070f 0%, rgba(5, 7, 15, 0) 100%);
  width: calc(100% + 101px);
  height: 304px;
  transition: all 0.6s ease;
}

.the-people .card.active::after {
  left: -100px;
  bottom: -100px;
  transform: rotate(15deg);
}

.the-people .team-members-img,
.the-people .card-body {
  grid-area: 1 / 1;
}

.the-people .team-members-img {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.the-people .card.active .team-members-img {
  opacity: 0;
}

.the-people .card .bg-color {
  opacity: 0;
  background: linear-gradient(120.33deg, #fc935a -2.92%, #1c69fd 98.02%);
  transition: opacity 0.8s ease;
}

.the-people .card.active .bg-color {
  opacity: 1;
}

.the-people .card-info {
  transform: translateY(var(--offset, 0px));
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
}

.the-people .card.active .card-info {
  transform: translateY(0);
}

.the-people .card-title {
  font-size: 26px;
  line-height: 1.4;
}

.the-people .card-position {
  font-size: 10px;
  color: transparent;
  transition: color 0.6s ease;
}

.the-people .card-position::after {
  content: attr(data-text);
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;

  background: linear-gradient(90deg, #fc935a 0%, #31d6fd 65%, #1c69fd 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 1;
  transition: opacity 0.6s ease;
}

.the-people .card.active .card-position {
  color: #ffffff;
}

.the-people .card.active .card-position::after {
  opacity: 0;
}

.the-people .card-socials,
.the-people .card-content {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.the-people .card-content {
  line-height: 1.7;
  transform: translateY(400px);
}

.the-people .card.active .card-socials,
.the-people .card.active .card-content {
  opacity: 1;
  transform: translateY(0);
}

.the-people .card-content {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/**
* Awards section
*
* @since 1.0.0
*/

.awards > .container {
  max-width: 995px;
}

/**
* Quiz section
*
* @since 1.0.0
*/

.quiz .quiz-title {
  max-width: 514px;
}

.quiz .card {
  background: #070b15;
  border: 1px solid #1b1f2f;
}

.quiz .question-card {
  background: linear-gradient(180deg, #1d1f26 0%, #05070f 100%);
  border: 1px solid #ffffff1a;
}

.quiz .question-card .card-body {
  position: absolute;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.quiz .question-card .card-body.active {
  position: static;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.quiz .no-of-questions {
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 2.6px;
}

.quiz .question,
.quiz .result-title {
  font-size: 32px;
}

.quiz .result-text {
  font-size: 14px;
  max-width: 410px;
}

/**
* Mobile Responsiveness
*
* @since 1.0.0
*/

@media screen and (min-width: 768px) {
  .the-people .card-position::after {
    top: 0;
    left: 0;
    transform: unset;
  }
}

@media screen and (min-width: 1025px) {
  .hero-banner .hero-banner-title {
    max-width: 850px;
  }

  .our-philosophy .our-philosophy-title,
  .our-philosophy .our-philosophy-text {
    max-width: 530px;
  }

  .the-people .the-people-text {
    max-width: 595px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-banner {
    padding: 150px 0 100px;
  }

  .hero-banner .hero-banner-title {
    font-size: 48px;
  }

  .the-people .swiper-slide {
    max-width: calc((100% - (2 * 20px)) / 2);
  }

  .quiz .question,
  .quiz .result-title {
    font-size: 28px;
  }

  .quiz .quiz-text {
    font-size: 17px;
  }
}

@media screen and (max-width: 768px) {
  .hero-banner {
    padding: 150px 0 75px;
  }

  .hero-banner .hero-banner-title {
    font-size: 42px;
  }

  .the-people .swiper-slide {
    max-width: 100%;
  }

  .quiz .question,
  .quiz .result-title {
    font-size: 24px;
  }

  .quiz .quiz-text {
    font-size: 16px;
  }
}