@font-face {
  font-family: "Satoshi variable";
  font-weight: 100;
  src: url("../fonts/Satoshi-light.otf");
}
@font-face {
  font-family: "Satoshi variable";
  font-weight: 300;
  src: url("../fonts/Satoshi-regular.otf");
}
@font-face {
  font-family: "Satoshi variable";
  font-weight: 500;
  src: url("../fonts/Satoshi-medium.otf");
}
@font-face {
  font-family: "Satoshi variable";
  font-weight: 700;
  src: url("../fonts/Satoshi-bold.otf");
}
@font-face {
  font-family: "Satoshi variable";
  font-weight: 900;
  src: url("../fonts/Satoshi-black.otf");
}
@font-face {
  font-family: "Clash display";
  font-weight: 100;
  src: url("../fonts/ClashDisplay-Extralight.otf");
}
@font-face {
  font-family: "Clash display";
  font-weight: 200;
  src: url("../fonts/ClashDisplay-Light.otf");
}
@font-face {
  font-family: "Clash display";
  font-weight: 300;
  src: url("../fonts/ClashDisplay-Regular.otf");
}
@font-face {
  font-family: "Clash display";
  font-weight: 500;
  src: url("../fonts/ClashDisplay-Medium.otf");
}
@font-face {
  font-family: "Clash display";
  font-weight: 700;
  src: url("../fonts/ClashDisplay-Semibold.otf");
}
@font-face {
  font-family: "Clash display";
  font-weight: 900;
  src: url("../fonts/ClashDisplay-Bold.otf");
}
body {
  font-family: "Satoshi variable", sans-serif, system-ui !important;
  font-weight: 300 !important;
  color: #0F1419 !important;
  background-color: #F0F0F0;
}

a {
  text-decoration: none !important;
  color: inherit !important;
  transition: 0.2s !important;
}

img {
  user-select: none !important;
  pointer-events: none !important;
}

.link {
  color: #C9ED54 !important;
}
.link:hover {
  color: #bcde49 !important;
}

@media screen and (min-width: 1400px) {
  .container-fluid {
    padding-inline: 6rem;
  }
}

.weight-100 {
  font-weight: 100;
}

.weight-200 {
  font-weight: 200;
}

.weight-300 {
  font-weight: 300;
}

.weight-500 {
  font-weight: 500;
}

.weight-700 {
  font-weight: 700;
}

.weight-900 {
  font-weight: 900;
}

.fs-6 {
  font-size: 1.125rem;
}

.fs-7 {
  font-size: 1.25rem;
}

.fs-8 {
  font-size: 1.375rem;
}

.fs-9 {
  font-size: 1.5rem;
}

.color-base {
  color: #0F1419 !important;
}

.color-light {
  color: #4A5159 !important;
}

.color-primary {
  color: #C9ED54 !important;
}

.color-blue {
  color: #0058E6 !important;
}

.family-clash {
  font-family: "Clash Display", sans-serif, system-ui;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Clash Display", sans-serif, system-ui !important;
}

h1 {
  font-size: calc(2.5rem + 0.9vw);
  line-height: 1.1;
  font-weight: 700 !important;
}
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 3.2rem;
  }
}

h2 {
  font-size: calc(2rem + 0.9vw);
  line-height: 1.1;
  font-weight: 500 !important;
}
@media screen and (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
}

h3 {
  font-size: calc(1.75rem + 0.9vw);
  font-weight: 500 !important;
}
@media screen and (min-width: 1200px) {
  h3 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 991px) {
  .hide-small {
    display: none !important;
  }
}

@media screen and (min-width: 992px) {
  .hide-large {
    display: none !important;
  }
}

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.button {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  box-sizing: border-box;
  transition: 0.2s;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  min-width: 100px;
  padding: 12px 24px;
  border-radius: 100px;
}
.button-primary {
  background: #C9ED54;
  color: #0F1419 !important;
  border: none;
}
.button-primary:hover {
  background: #bcde49;
}
.button-light {
  background: white;
  color: #0F1419 !important;
  border: none;
}
.button-light:hover {
  background: rgb(200, 200, 200);
}
.button-outline {
  background: transparent;
  color: white !important;
  border: 1px solid white;
  transition: 0.2s;
}
.button-outline:hover {
  border-color: #C9ED54;
  color: #C9ED54 !important;
}
.button-outline-dark {
  background: transparent;
  color: #0F1419 !important;
  border: 1px solid #0F1419;
  transition: 0.2s;
}
.button-outline-dark:hover {
  border-color: #C9ED54;
  color: #C9ED54 !important;
}
.button:focus-visible {
  outline: none;
}

.form-label, .form-check-label {
  font-size: 0.875rem;
  font-weight: 200;
  color: #4A5159;
}
.form-control, .form-select, .form-check-input {
  color: #0F1419;
  font-weight: 300;
  border-radius: 0.5rem;
}
.form-control::placeholder, .form-select::placeholder, .form-check-input::placeholder {
  color: #4A5159;
  font-weight: 200;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: none;
  border-color: #C9ED54;
}
.form-check-input:checked {
  background-color: #C9ED54;
  border-color: #bcde49;
}

.white-box {
  background-color: white;
  border-radius: 2rem;
  padding: 2rem 1rem;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
@media screen and (min-width: 1200px) {
  .white-box {
    padding: 3.5rem 5rem;
  }
}

#accordionFaq .accordion {
  border: none;
}
#accordionFaq .accordion-item {
  box-shadow: none;
  border: none;
}
#accordionFaq .accordion-item:not(:last-of-type) {
  margin-bottom: 1rem;
}
#accordionFaq .accordion-button {
  font-size: 1.125rem;
  font-family: "Satoshi variable", sans-serif, system-ui;
  box-shadow: none;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
}
@media screen and (min-width: 992px) {
  #accordionFaq .accordion-button {
    padding-top: 2rem;
    padding-inline: 2rem;
  }
}
#accordionFaq .accordion-button:not(.collapsed) {
  background: #E6EFFF;
}
#accordionFaq .accordion-body {
  font-weight: 200;
  padding-top: 0;
}
@media screen and (min-width: 992px) {
  #accordionFaq .accordion-body {
    padding-bottom: 2rem;
    padding-inline: 2rem;
  }
}
#accordionFaq .accordion-collapse {
  background: #E6EFFF;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

#accordionQuestions .accordion-item {
  box-shadow: none;
  border: 1px solid #BEC2C5;
  border-radius: 2rem;
  padding: 2rem;
}
#accordionQuestions .accordion-item:not(:last-of-type) {
  margin-bottom: 1rem;
}
#accordionQuestions .accordion-button {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: "Clash Display", sans-serif, system-ui;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
#accordionQuestions .accordion-button:not(.collapsed) {
  color: #0F1419;
}
#accordionQuestions .accordion-body {
  font-weight: 200;
  padding: 1rem 0 0 0;
}

footer {
  background-color: #0F1419;
  border-top-right-radius: 2rem;
  border-top-left-radius: 2rem;
  padding-top: 6rem;
  padding-bottom: 3.5rem;
  color: white;
}
@media screen and (max-width: 1199px) {
  footer {
    padding-block: 2rem;
    text-align: center;
  }
}
footer .footer-top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  footer .footer-top {
    padding-bottom: 2rem;
    justify-content: space-between;
  }
}
footer .footer-top .brand {
  flex-shrink: 1;
}
footer .footer-top .brand-image {
  display: block;
}
footer .footer-top .brand-image img {
  max-height: 70px;
}
footer .footer-top .brand p {
  max-width: 450px;
}
@media screen and (max-width: 991px) {
  footer .footer-top .footer-link-column {
    width: 100%;
    margin-bottom: 1rem;
  }
}
footer .footer-top .footer-link-column > * {
  margin-bottom: 0.5rem;
}
footer .footer-top .footer-link a {
  font-size: 1.125rem;
}
footer .footer-top .footer-link a:hover {
  color: #C9ED54 !important;
}
footer .footer-bottom {
  font-family: "Clash Display", sans-serif, system-ui;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #424548;
  padding-top: 1rem;
  font-size: 0.75rem;
}
@media screen and (max-width: 991px) {
  footer .footer-bottom {
    padding-top: 2rem;
    justify-content: center;
  }
}
footer .footer-bottom a.nav-link:hover {
  color: #C9ED54 !important;
}

nav {
  background-color: transparent;
  transition: background-color 0.3s ease;
}
nav.navbar-scrolled {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
nav .navbar-brand img {
  max-height: 3rem;
}
@media screen and (min-width: 1200px) {
  nav .navbar-nav .nav-link {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}
nav .navbar-nav .nav-link.active {
  font-weight: 700;
}
nav .navbar-nav .nav-link:hover {
  color: #C9ED54 !important;
}

#introText {
  padding-top: 7rem;
}
#introText .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #introText .grid {
    grid-template-columns: 2fr 1fr;
  }
}
@media screen and (min-width: 992px) {
  #introText .grid .intro-content p {
    font-size: 1.5rem;
  }
}

#introImage {
  padding-top: 7rem;
}
#introImage .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #introImage .grid {
    grid-template-columns: 2fr 1fr;
  }
}
@media screen and (min-width: 992px) {
  #introImage .grid .intro-content p {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  #introImage .grid .img {
    grid-row: 2;
    max-height: 500px;
    grid-column-start: -3;
    grid-column-end: -1;
  }
}
#introImage .grid .img img {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  object-fit: cover;
}

#introTwoImages {
  padding-top: 7rem;
}
#introTwoImages .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #introTwoImages .grid {
    grid-template-columns: 2fr 1fr;
  }
}
@media screen and (min-width: 992px) {
  #introTwoImages .grid .intro-content p {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  #introTwoImages .grid .img-wide, #introTwoImages .grid .img-narrow {
    grid-row: 2;
    max-height: 500px;
  }
}
#introTwoImages .grid .img-wide img, #introTwoImages .grid .img-narrow img {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  object-fit: cover;
}

@media screen and (min-width: 992px) {
  #boldText {
    width: 75%;
  }
}

#categories .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #categories .grid {
    row-gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  #categories .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
#categories .grid .slot-item {
  background-color: white;
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: 0.3s ease-in-out;
}
#categories .grid .slot-item:hover {
  background-color: #C9ED54;
}
#categories .grid .slot-item__title {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-family: "Clash Display", sans-serif, system-ui;
  font-weight: 700;
  line-height: 1.1;
}
#categories .grid .slot-item__title .smaller {
  font-size: 1.4rem !important;
}
#categories .grid .slot-item__background {
  position: relative;
  text-align: end;
  margin-bottom: 1rem;
}
#categories .grid .slot-item__background .background-overlay {
  position: relative;
  right: -1.5rem;
  max-width: 250px;
  width: 100%;
}
#categories .grid .slot-item__background .background-category {
  position: absolute;
  right: -1.5rem;
  height: 100%;
  max-width: 260px;
  width: 100%;
  object-fit: contain;
}

#boxSwiper .white-box {
  overflow: hidden;
}
#boxSwiper .white-page .white-box {
  border: 1px solid #BEC2C5;
}
#boxSwiper .swiper {
  overflow: visible;
}
#boxSwiper .swiper-parent {
  position: relative;
}
#boxSwiper .swiper-button-prev, #boxSwiper .swiper-button-next {
  position: static;
  font-size: 3rem;
  color: #0F1419;
  width: 100%;
}
#boxSwiper .swiper-button-prev:after, #boxSwiper .swiper-button-next:after {
  display: none;
}
#boxSwiper .swiper-scrollbar {
  position: static;
  margin-top: 2rem;
  height: 0.5rem;
}
#boxSwiper .swiper-scrollbar-drag {
  background-color: #4D91FF;
}
#boxSwiper .swiper-slide {
  height: auto;
}
#boxSwiper .swiper-slide .box {
  background-color: #E6EFFF;
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  position: relative;
}
#boxSwiper .swiper-slide .box-content {
  position: relative;
  z-index: 2;
}
#boxSwiper .swiper-slide .box-content h3 {
  font-size: 3rem;
  font-weight: 700;
}
#boxSwiper .swiper-slide .box-content h4 {
  font-size: 2rem;
  font-weight: 700;
}
#boxSwiper .swiper-slide .box-overlay {
  position: absolute;
  top: 0.5rem;
  width: 100%;
  left: 0;
  z-index: 0;
}
#boxSwiper .swiper.image-swiper .swiper-slide img {
  border-radius: 1rem;
  min-height: 300px;
}

#testimonials .white-page .white-box {
  border: 1px solid #BEC2C5;
}
#testimonials .white-page .white-box .box {
  background-color: #E6EFFF;
}
#testimonials .white-box {
  overflow: hidden;
}
#testimonials .swiper {
  overflow: visible;
}
#testimonials .swiper-parent {
  position: relative;
}
#testimonials .swiper-button-prev, #testimonials .swiper-button-next {
  position: static;
  font-size: 3rem;
  color: #0F1419;
  width: 100%;
}
#testimonials .swiper-button-prev:after, #testimonials .swiper-button-next:after {
  display: none;
}
#testimonials .swiper-slide {
  height: auto;
}
#testimonials .swiper-slide .box {
  border: 1px solid #BEC2C5;
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  text-align: center;
}
#testimonials .swiper-slide .box-img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
}

#accordion .white-page .white-box {
  border: 1px solid #BEC2C5;
}
#accordion .grid {
  display: grid;
}
@media screen and (min-width: 1200px) {
  #accordion .grid {
    grid-template-columns: 1fr 3fr;
    gap: 8rem;
  }
}

#ctaArrow {
  color: white !important;
}
@media screen and (max-width: 767px) {
  #ctaArrow .d-flex {
    flex-wrap: wrap;
  }
}
#ctaArrow a:hover {
  transform: scale(1.05);
}
#ctaArrow img {
  margin-left: 1rem;
  height: 8rem;
  width: 8rem;
}

#ctaButton {
  color: white !important;
}
@media screen and (max-width: 767px) {
  #ctaButton .d-flex {
    flex-wrap: wrap;
  }
}

#numbers .numbers {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #numbers .numbers {
    grid-template-columns: repeat(3, 1fr);
  }
}
#numbers .numbers-item {
  background-color: #B3D0FF;
  position: relative;
  z-index: 1;
  text-align: center;
  border-radius: 2rem;
  padding-block: 1rem;
}
@media screen and (min-width: 768px) {
  #numbers .numbers-item {
    padding-block: 4rem;
  }
}
#numbers .numbers-item__number {
  font-size: 3.75rem;
  font-family: "Clash Display", sans-serif, system-ui;
  line-height: 1.15;
}
#numbers .numbers-item__text {
  font-size: 1.125rem;
}
#numbers .numbers-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

#freemodeSwiper img {
  border-radius: 1.5rem;
  height: 350px;
  object-fit: cover;
}
@media screen and (min-width: 1200px) {
  #freemodeSwiper img {
    height: 600px;
  }
}

#instructors .nav {
  border: 1px solid #F0F0F0;
  border-radius: 1.5rem;
  align-items: center;
}
#instructors .nav-item {
  flex: 1;
  text-align: center;
  padding: 0.33rem;
}
#instructors .nav-link {
  margin: auto;
  border: none;
  color: #0F1419;
  width: 100%;
  border-radius: 1rem;
}
#instructors .nav-link:hover {
  background-color: lightgray;
}
#instructors .nav-link.active {
  background-color: #C9ED54;
  font-weight: 700;
}
#instructors .instructors-grid {
  display: grid;
  margin-top: 2rem;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #instructors .instructors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  #instructors .instructors-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
#instructors .instructors-grid .card {
  border-radius: 1.5rem;
}
#instructors .instructors-grid .card-img {
  height: 200px;
}
@media screen and (min-width: 992px) {
  #instructors .instructors-grid .card-img {
    height: 250px;
  }
}
#instructors .instructors-grid .card-img img {
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#instructors .instructors-grid .card-content {
  padding: 1.5rem 0.75rem;
}
#instructors .instructors-grid .card-title {
  font-size: 1.25rem;
}

#faq .white-page .white-box {
  border: 1px solid #BEC2C5;
}

@media screen and (min-width: 1200px) {
  #conditions .section-title {
    width: 50%;
  }
}
#conditions .grid {
  display: grid;
  margin-top: 2rem;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #conditions .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  #conditions .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
#conditions .grid .box {
  background-color: #E6EFFF;
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  position: relative;
}
#conditions .grid .box-content {
  position: relative;
  z-index: 2;
  height: 100%;
}
#conditions .grid .box-content h4 {
  font-size: 2rem;
  font-weight: 700;
}
#conditions .grid .box-content p {
  margin-bottom: 0;
}
#conditions .grid .box-overlay {
  position: absolute;
  top: 0.5rem;
  width: 100%;
  left: 0;
  z-index: 0;
}
#conditions .grid .box .bi {
  font-size: 3rem;
  display: inline-block;
}
#conditions .grid .box .box-content > .mb-4:first-child {
  min-height: 3rem;
  display: block;
}

#signup .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #signup .grid {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}
#signup .grid .right-content {
  background-color: #E6EFFF;
  padding: 2rem;
  border-radius: 2rem;
}

#contactBoxes .grid {
  display: grid;
  margin-top: 2rem;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #contactBoxes .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
#contactBoxes .grid .box {
  background-color: #E6EFFF;
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
  position: relative;
}
#contactBoxes .grid .box-content {
  position: relative;
  z-index: 2;
  height: 100%;
}
#contactBoxes .grid .box-content h4 {
  font-size: 2rem;
  font-weight: 700;
}
#contactBoxes .grid .box-content p {
  margin-bottom: 0;
}
#contactBoxes .grid .box-overlay {
  position: absolute;
  top: 0.5rem;
  width: 100%;
  left: 0;
  z-index: 0;
}
#contactBoxes .grid .box .bi {
  font-size: 3rem;
}

#hero .boxes {
  display: grid;
  gap: 1rem;
  padding-top: 6rem;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 992px) {
  #hero .boxes {
    grid-template-columns: repeat(12, 1fr);
  }
}
#hero .boxes .box {
  border-radius: 1.5rem;
}
#hero .boxes .box-img {
  grid-column: 1/-1;
  max-height: 400px;
}
#hero .boxes .box-img img {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (min-width: 992px) {
  #hero .boxes .box-img {
    min-height: 20vh;
  }
}
#hero .boxes .box-white {
  padding: 1rem;
  background-color: white;
}

@media screen and (min-width: 768px) {
  #hero .boxes .box-white {
    padding: 2rem;
  }
}
@media screen and (min-width: 1400px) {
  #hero .boxes .box-white {
    padding: 3rem;
  }
  #hero .boxes .box-white p {
    max-width: 75%;
  }
}
#hero .boxes .box-black {
  padding: 1rem;
  background-color: black;
  color: white;
}
@media screen and (min-width: 768px) {
  #hero .boxes .box-black {
    padding: 2rem;
  }
}
@media screen and (min-width: 1400px) {
  #hero .boxes .box-black {
    padding: 3rem;
  }
}
#hero .boxes .box-black__image img {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#hero .boxes .box-green {
  background-color: #C9ED54;
  padding: 1.5rem;
}
#hero .boxes .box-green .arrow img {
  border: 1px solid #0F1419;
  border-radius: 1rem;
  height: 60px;
  width: 60px;
}
#hero .boxes .box-green .arrow:hover {
  transform: scale(1.1);
}
#hero .boxes .boxes-row {
  display: grid;
  gap: 1rem;
  grid-column: 1/-1;
}
@media screen and (min-width: 992px) {
  #hero .boxes .boxes-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

#vehicles .wrapper {
  background-color: white;
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 1200px) {
  #vehicles .wrapper {
    row-gap: 2rem;
    grid-template-columns: 3fr 1fr;
  }
}
#vehicles .wrapper .vehicles-video {
  border-radius: 1.5rem;
  background-color: gray;
  height: 300px;
}
@media screen and (min-width: 768px) {
  #vehicles .wrapper .vehicles-video {
    height: 500px;
  }
}
@media screen and (min-width: 1200px) {
  #vehicles .wrapper .vehicles-video {
    height: 600px;
  }
}
#vehicles .wrapper .vehicles-box {
  background-color: #0F1419;
  padding: 3.5rem 2.5rem;
  color: white;
  border-radius: 1.5rem;
  height: 100%;
}
#vehicles .wrapper .numbers {
  background-color: #E6EFFF;
  border-radius: 1rem;
  padding-block: 1rem;
  position: relative;
}
@media screen and (min-width: 1200px) {
  #vehicles .wrapper .numbers {
    grid-column-start: -3;
    grid-column-end: -1;
    padding-block: 4rem;
  }
}
#vehicles .wrapper .numbers-item {
  position: relative;
  z-index: 1;
  text-align: center;
}
#vehicles .wrapper .numbers-item__number {
  font-size: 3.75rem;
  font-family: "Clash Display", sans-serif, system-ui;
  line-height: 1.15;
}
#vehicles .wrapper .numbers-item__text {
  font-size: 1.125rem;
}
#vehicles .wrapper .numbers-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#reasons .white-page .white-box {
  background-color: #0F1419;
  color: white;
}
#reasons .white-page .white-box p {
  color: white !important;
}
#reasons .reasons-grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #reasons .reasons-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }
}
#reasons .reason-title {
  font-family: "Clash Display", sans-serif, system-ui;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
#reasons .reason-img {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#whyUs .reasons-grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #whyUs .reasons-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }
}
#whyUs .reason-title {
  font-family: "Clash Display", sans-serif, system-ui;
  font-size: 1.5rem;
}
#whyUs .reason p {
  margin-bottom: 0;
}
#whyUs .reason-img {
  border-radius: 1.5rem;
  width: 100%;
  max-height: 250px;
  object-fit: cover;
}
#whyUs .reason:not(:last-of-type) {
  margin-bottom: 2rem;
}

#notFound {
  padding-top: 7rem;
}
#notFound .button {
  width: 200px;
}
#notFound img {
  max-height: 500px;
}

#categoryHero {
  padding-top: 7rem;
  background-color: white;
  position: relative;
  overflow: hidden;
}
#categoryHero .grid {
  display: grid;
  gap: 2rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #categoryHero .grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 992px) {
  #categoryHero .grid .intro-content p {
    font-size: 1.5rem;
    width: 75%;
  }
}
#categoryHero .grid img {
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
}
@media screen and (min-width: 992px) {
  #categoryHero .grid img {
    height: 60vh;
  }
}
#categoryHero .background-overlay {
  position: absolute;
  z-index: 0;
  top: 5rem;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, 0);
}

#categoryInfo .white-page .white-box {
  background-color: #E6EFFF;
}
#categoryInfo .white-page .white-box .right-content {
  background-color: white;
}
#categoryInfo .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #categoryInfo .grid {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}
#categoryInfo .grid .right-content {
  background-color: #E6EFFF;
  padding: 2rem;
  border-radius: 2rem;
}

#white {
  background-color: white !important;
}

#rentHero {
  padding-top: 6rem;
}
#rentHero .grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: fit-content(10px) fit-content(10px) fit-content(10px);
}
@media screen and (min-width: 1200px) {
  #rentHero .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: fit-content(10px) fit-content(10px) fit-content(10px);
  }
}
#rentHero .grid .box {
  border-radius: 1.5rem;
}
#rentHero .grid .box-black {
  padding: 1rem;
  background-color: black;
  grid-row: 1;
  grid-column: 1/3;
}
@media screen and (min-width: 768px) {
  #rentHero .grid .box-black {
    grid-column: 1/2;
    grid-row: 1/2;
  }
}
@media screen and (min-width: 1200px) {
  #rentHero .grid .box-black {
    grid-column: 1/4;
    grid-row: 1/3;
    padding: 2rem;
  }
}
@media screen and (min-width: 1400px) {
  #rentHero .grid .box-black {
    padding: 5rem 3rem;
  }
}
#rentHero .grid .box-small {
  grid-row: 2;
  grid-column: 2/3;
}
@media screen and (min-width: 768px) {
  #rentHero .grid .box-small {
    grid-column: 1/2;
    grid-row: 2/3;
  }
}
@media screen and (min-width: 1200px) {
  #rentHero .grid .box-small {
    grid-column: 1/2;
    grid-row: 3/4;
  }
}
#rentHero .grid .box-small img {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#rentHero .grid .box-green {
  padding: 1rem;
  background-color: #C9ED54;
  grid-row: 3;
  grid-column: 1/3;
}
@media screen and (min-width: 768px) {
  #rentHero .grid .box-green {
    grid-column: 2/3;
    grid-row: 2/3;
  }
}
@media screen and (min-width: 1200px) {
  #rentHero .grid .box-green {
    grid-column: 2/4;
    grid-row: 3/4;
    padding: 2rem;
  }
}
#rentHero .grid .box-green .arrow img {
  border: 1px solid #0F1419;
  border-radius: 1rem;
  height: 60px;
  width: 60px;
}
#rentHero .grid .box-green .arrow:hover {
  transform: scale(1.1);
}
#rentHero .grid .box-img {
  grid-row: 2;
  grid-column: 1/2;
}
@media screen and (min-width: 768px) {
  #rentHero .grid .box-img {
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
@media screen and (min-width: 1200px) {
  #rentHero .grid .box-img {
    grid-column: 4/7;
    grid-row: 1/4;
  }
}
#rentHero .grid .box-img img {
  border-radius: 1.5rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#vehiclePark .white-page .white-box {
  background-color: #F0F0F0;
}
#vehiclePark .white-page .white-box .nav {
  border: 1px solid #F0F0F0;
  border-radius: 1.5rem;
  background-color: white;
}
#vehiclePark .white-page .white-box .nav-link {
  border: 1px solid #F0F0F0;
  color: #0F1419;
}
#vehiclePark .white-page .white-box .nav-link:hover {
  background-color: lightgray;
}
#vehiclePark .white-page .white-box .nav-link.active {
  background-color: #C9ED54;
  font-weight: 700;
}
#vehiclePark .white-box {
  border: 1px solid #BEC2C5;
}
#vehiclePark .nav {
  border-radius: 1.5rem;
  align-items: center;
  background-color: #E6EFFF;
}
#vehiclePark .nav-item {
  flex: 1;
  text-align: center;
  padding: 0.33rem;
}
#vehiclePark .nav-link {
  margin: auto;
  border: none;
  color: #0F1419;
  width: 100%;
  border-radius: 1rem;
}
#vehiclePark .nav-link:hover {
  background-color: lightgray;
}
#vehiclePark .nav-link.active {
  background-color: #C9ED54;
  font-weight: 700;
}
#vehiclePark .vehicles-grid {
  display: grid;
  margin-top: 2rem;
  gap: 2rem;
}
@media screen and (min-width: 768px) {
  #vehiclePark .vehicles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  #vehiclePark .vehicles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
#vehiclePark .vehicles-grid .card {
  border-radius: 1.5rem;
}
#vehiclePark .vehicles-grid .card-img {
  height: 200px;
}
@media screen and (min-width: 992px) {
  #vehiclePark .vehicles-grid .card-img {
    height: 250px;
  }
}
#vehiclePark .vehicles-grid .card-img img {
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#vehiclePark .vehicles-grid .card-content {
  padding: 1.5rem 0.75rem;
}
#vehiclePark .vehicles-grid .card-title {
  font-size: 1.25rem;
}
#vehiclePark .button {
  width: 300px;
}

#rentSignup .white-box {
  border: 1px solid #BEC2C5;
}
#rentSignup .grid {
  display: grid;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #rentSignup .grid {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}
#rentSignup .grid .right-content {
  background-color: #E6EFFF;
  padding: 2rem;
  border-radius: 2rem;
}

#rentInfo .info {
  background-color: #E6EFFF;
  border-radius: 2rem;
  padding: 2rem 1rem;
}
@media screen and (min-width: 1200px) {
  #rentInfo .info {
    padding: 3.5rem 5rem;
  }
}
@media screen and (max-width: 767px) {
  #rentInfo .info .col-4 {
    text-align: center;
  }
}/*# sourceMappingURL=style.css.map */

#hero .boxes .box-green{
  padding: 3rem;
}

#hero .boxes .box-green .button:hover{
  background: #0F1419 !important;
  color: #fff !important;
  border: 1px solid #0F1419 !important;
}

#hero .boxes .box-white .button:hover{
  background: #0F1419 !important;
  color: #fff !important;
  border: 1px solid #0F1419 !important;
}

#hero .boxes .box-black .button{
  background: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
#hero .boxes .box-black .button:hover{
  background: #fff !important;
  color: #0F1419 !important;
  border: 1px solid #fff !important;
}

#ctaArrow h2{
 color:#0F1419;
}

#ctaArrow .button{
  color: #FFF !important;
}

#introTwoImages ul{
  list-style-type: none;

} 

#introTwoImages ul li{

    font-size: 1.2rem; 
  font-weight: 200;

}

.font-size-1-5{
  font-size: 1.2rem;
}

#ctaArrow .white-box p{
  color: #0F1419;
}

#conditions .grid{
  grid-template-columns: repeat(2, 1fr);
}