* {
  font-family: "Roboto", sans-serif;
}

.container-sm {
  max-width: 1260px;
}

.gradient-background {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}


h1,
.h1 {
  font-size: 32px !important;
  font-family: "Roboto Slab", serif;
  font-weight: bold;
}

h2,
.h2 {
  font-size: 22px !important;
  font-family: "Roboto Slab", serif;
}

p.h2 {
  font-size: 16px !important;
}

@media (min-width: 1200px) {

  h1,
  .h1 {
    font-size: 54px !important;
  }

  h2,
  .h2 {
    font-size: 32px !important;
  }

  p.h2 {
    font-size: 20px !important;
  }
}

.splide__arrow {
  background: none !important;
  width: auto;
}

.splide__arrow--prev {
  left: unset !important;
}

.splide__arrow--next {
  right: unset !important;
}

@media(max-width: 1024px) {
  #mediaSplide .splide__arrow--next {
    left: 80px;
  }
}

@media(min-width: 1025px) {
  #mediaSplide .splide__arrow--next {
    margin-left: 60px;
    right: unset;
  }
}

.splide__track {
  height: 100% !important;
}

.media-section h1,
.media-section h2,
.media-section p {
  text-shadow: 0 0 32px black;
}

.text-shadow {
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.pricing-section>div {
  background-color: #080a0b;
}

.splide__slide__second img {
  background-position: 90%;
}

.price-card {
  height: 330px;
}

header.navigation nav ul {
  max-width: 0;
  overflow: hidden;
  padding: 6em 0;
  transition: all 0.2s ease-in-out;
}

header.navigation.open nav ul {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  padding: 6em 1.5em;
}

#about,
#offering,
#faq,
#resource {
  padding-top: 90px;
  margin-top: -40px;
}

#contact {
  padding-top: 100px;

}

#faq ul li {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

#faq ul li span,
#faq ul li p {
  font-weight: 500;
}

#faq ul li span {
  color: #4da7a0;
}

#faq ul li p {
  color: #141f1d;
}

#faq ul li p a {
  color: #4da7a0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

p {
  line-height: 1.7em;
}

.mission-img {
  height: 260px
}

.btn-primary {
  background-color: #469bf0;
  color: white;
  outline: none;
  box-shadow: 0px 0px rgba(0, 0, 0, 0.5);
  padding: 12px 30px;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .mission-img {
    height: 80vh;
  }
}

.font-roboto {
  font-family: "Roboto Slab", serif;
}