*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  font-family: "Satoshi Light";
}
body {
  background-color: #101010;
  position: relative;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
  max-width: 155.1rem;
  margin: 0 auto;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 10;
}
body.nav-open::before {
  opacity: 1;
  visibility: visible;
}
/* 1 REM = 10PX */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
h1 {
  font-family: "Funnel Display Bold";
  font-size: 10rem;
  line-height: 120%;
  width: 100%;
  max-width: 122.4rem;
}
h2 {
  font-family: "Funnel Display SemiBold", sans-serif;
  font-size: 4.8rem;
  line-height: 120%;
  color: #ffffff;
  overflow-wrap: break-word;
}
.h2-second {
  font-family: "Funnel Display Medium", sans-serif;
  font-size: 2.4rem;
  line-height: 120%;
  color: #ffffff;
}
.h2-ter {
  font-family: "Funnel Display SemiBold", sans-serif;
  font-size: 3.2rem;
  line-height: 120%;
  color: #ffffff;
}
h3 {
  font-family: "Funnel Display SemiBold", sans-serif;
  font-size: 2rem;
  line-height: 120%;
  color: #ffffff;
}
h4 {
  font-family: "Satoshi Light", sans-serif;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #ffffff;
}
h5 {
  font-family: "Satoshi Light", sans-serif;
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: #ffffff;
}
.h5-sec {
  font-family: "Satoshi Light", sans-serif;
  font-size: 1rem;
  line-height: 1.8rem;
  color: #ffffff;
}
p {
  font-family: "Satoshi Light", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #dddcdc;
}
.width-center {
  width: 100%;
  text-align: center;
}
/*************************************/
/*********** STICKY NAV BAR **********/
/*************************************/
.section-header {
  width: 100%;
  height: 7.4rem;
  display: flex;
  justify-content: center;
}
header {
  margin-top: 0.5rem;
  position: fixed;
  top: 0;
  border-radius: 10rem;
  z-index: 10;
}
.mobile-header {
  display: none;
  z-index: 12;
}
.mobile-header-open,
.mobile-header-close {
  width: 2.4rem;
  height: 2.4rem;
}
.dropdown-visible {
  display: block;
}
.hero-head,
.header-regular,
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Satoshi Light", sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.4rem;
  border-radius: 4rem;
  width: 100%;
  max-width: 127.7rem;
  height: 7.4rem;
  padding: 1.6rem 2.4rem;
}
.header-regular,
.mobile-header {
  backdrop-filter: blur(5rem);
}
.mobile-header {
  display: none;
}
.hero-logo {
  height: 3.2rem;
}
a:link,
a:visited {
  font-family: "Satoshi Light";
  text-decoration: none;
  color: #dddcdc;
}
.hero-nav:hover,
.hero-nav:active {
  color: #27e88d;
}
.icon-text {
  font-family: "Satoshi Light", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.4rem;
}
/*************************************/
/************* SECTION CTA ***********/
/*************************************/
.section-cta {
  width: 100%;
  max-width: 122.4rem;
  padding-top: 16rem;
  margin: auto;
}
.cta-box-home,
.cta-box {
  position: relative;
  border-radius: 4rem;
  background: #0f0f0f1a;
  backdrop-filter: blur(1rem);
  box-shadow: inset 1rem 1rem 1.5rem #1a1b1cf2, inset 0 -1rem 2.5rem #005123;
  overflow: hidden;
}
.cta-box-home {
  padding: 6.4rem 19rem;
}
.cta-box {
  padding: 6.4rem 24rem;
  height: 32.2rem;
  overflow-wrap: break-word;
  width: 100%;
}
.green-horizon-mini {
  position: absolute;
  width: 100%;
  max-width: 122.3rem;
  height: 12rem;
  bottom: 0;

  z-index: -1;
}
/*************************************/
/****** STICKY NAV DROPDOWN BOX ******/
/*************************************/
.hero-drop {
  position: relative;
  display: inline-block;
}
.hero-drop::before {
  content: "";
  position: absolute;
  top: 100%;
  height: 2rem;
  width: 100%;
  z-index: 10;
}
.hero-drop:hover .sub-nav {
  display: block;
}
.dropdown-box {
  position: relative;
  width: 2rem !important;
  height: 2rem !important;
}
.hero-dropdown,
.hero-dropdown-active {
  position: absolute;
  transition: opacity 0.2s ease;
  opacity: 0;
  z-index: 1;
  object-fit: contain;
}
.hero-dropdown-active {
  z-index: 2;
}
.nav-title {
  font-weight: 500;
  line-height: 2.4rem;
}
.sub-nav {
  display: none;
  position: absolute;
  width: 40rem;
  height: 17.6rem;
  color: #fff;
  background-color: #1c1c1e;
  box-shadow: 0 0.8rem 2rem 0 #0000001a;
  border-bottom-left-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  padding: 1.6rem 2rem;
  top: calc(100% + 2rem);
  left: -15rem;
  z-index: 1;
}
.nav-links {
  width: 36rem;
}
.sub-nav-mobile {
  display: none;
  position: absolute;
  width: 100%;
  max-width: 40rem;
  color: #fff;
  background-color: #1c1c1e;
  box-shadow: 0 0.8rem 2rem 0 #0000001a;
  border-bottom-left-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  padding: 1.6rem 2rem;
  top: 80%;
  left: 0;
  z-index: 11;
}
.hero-dropdown-active,
.hero-dropdown-active-mobile {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hero-drop-mobile.active .sub-nav {
  display: block;
}
.hero-drop-mobile.active .hero-dropdown,
.hero-drop-mobile.active .hero-dropdown-mobile {
  opacity: 0;
}
.hero-drop-mobile.active .hero-dropdown-active,
.hero-drop-mobile.active .hero-dropdown-active-mobile {
  opacity: 1;
}
.dropdown-box-mobile {
  position: relative;
  width: 2rem !important;
  height: 2rem !important;
}
.hero-dropdown-active-mobile,
.hero-dropdown-mobile {
  position: absolute;
  z-index: 1;
  object-fit: contain;
}
.hero-drop-mobile.active .sub-nav-mobile {
  display: block !important;
}
/*************************************/
/****** GENERAL STYLES: FLEXBOX ******/
/*************************************/
.if {
  display: inline-flex;
}
.f {
  display: flex;
}
.f-jc-sb {
  justify-content: space-between;
}
.f-jc-c {
  justify-content: center;
}
.f-jc-l {
  justify-content: end;
}
.f-js-c {
  justify-self: center;
}
.f-js-s {
  justify-self: start;
}
.f-js-e {
  justify-self: end;
}
.f-ai-c {
  align-items: center;
}
.f-as-c {
  align-self: center;
}
.f-as-fs {
  align-self: flex-start;
}
.f-d-c {
  flex-direction: column;
}
.g-4 {
  gap: 0.4rem;
}
.g-8 {
  gap: 0.8rem;
}
.g-12 {
  gap: 1.2rem;
}
.g-16 {
  gap: 1.6rem;
}
.g-24 {
  gap: 2.4rem;
}
.g-32 {
  gap: 3.2rem;
}
.g-40 {
  gap: 4rem;
}
.g-50 {
  gap: 5rem;
}
.g-55 {
  gap: 5.5rem;
}
.g-60 {
  gap: 6rem;
}
.g-64 {
  gap: 6.4rem;
}
.g-72 {
  gap: 7.2rem;
}
.g-80 {
  gap: 8rem;
}
.g-88 {
  gap: 8.8rem;
}
.g-99 {
  gap: 9.9rem;
}
.g-100 {
  gap: 10rem;
}
.g-120 {
  gap: 12rem;
}
.g-180 {
  gap: 18rem;
}
/*************************************/
/******** GENERAL STYLES: GRID *******/
/*************************************/
.g {
  display: grid;
}
.g-c2 {
  grid-template-columns: 1fr 1fr;
}
.g-c2-1 {
  grid-template-columns: 2fr 1fr;
}
.g-c3-1a1 {
  grid-template-columns: 1fr auto 1fr;
}
.g-c3 {
  grid-template-columns: repeat(3, 1fr);
}
.g-c4 {
  grid-template-columns: repeat(4, 1fr);
}
.g-r5 {
  grid-template-rows: repeat(5, 1fr);
}
.g-ji-c {
  justify-items: center;
}
.g-ac-c {
  align-content: center;
}
.g-cg-24 {
  column-gap: 2.4rem;
}
.g-cg-32 {
  column-gap: 3.2rem;
}
/*************************************/
/***** GENERAL STYLES: POSITIONS *****/
/*************************************/
.p-r {
  position: relative;
}
.p-a {
  position: absolute;
}
/*************************************/
/****** GENERAL STYLES: COLOURS ******/
/*************************************/
.bc-n200 {
  background-color: #101010;
}
.c-white {
  color: #fff;
}
.c-n50 {
  color: #dddcdc;
}
.c-secondary100 {
  color: #27e88d;
}
.c-n180 {
  color: #1c1c1e;
}
.c-ter100 {
  color: #ff3c22;
}
.c-blue {
  color: #7140ff;
}
.gradient-glassdark {
  background: linear-gradient(
    278deg,
    rgba(0, 0, 0, 0.15) 13.66%,
    rgba(85, 85, 85, 0.16) 86.02%
  );
}
.gradient-dark-hori {
  background: linear-gradient(90deg, #101010, #1c1c1e00);
}
.gradient-dark-vert {
  background: linear-gradient(0deg, #1c1c1e, #101010);
}

/*************************************/
/****** GENERAL STYLES: BUTTONS ******/
/*************************************/
/* SMALL */
.btn-primary-s {
  font-family: "Satoshi Bold", sans-serif !important;
  font-size: 1.6rem;
  background-color: #fff;
  width: 13.5rem;
  height: 4rem;
  border-radius: 5rem;
  border: none;
  padding: 0.8rem 2.4rem;
  color: #101010 !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
.btn-primary-s:hover {
  background-color: #27e88d;
  color: #101010;
  cursor: pointer;
}
.btn-ghost-s {
  font-family: "Satoshi Bold", sans-serif !important;
  font-size: 1.6rem;
  font-weight: 500;
  width: 28.8rem;
  height: 4rem;
  color: #fff;
  background-color: transparent;
  border: 0.1rem solid #ffffff;
  border-radius: 5rem;
  padding: 0.8rem 2.4rem;
  transition: all 0.2s ease-in-out;
}
.btn-ghost-s:hover,
.btn-ghost-l:hover,
.pricing-btn-ghost:hover {
  color: #27e88d;
  border: 0.1rem solid #27e88d;
  cursor: pointer;
}
/* LARGE */
.btn-primary-l {
  font-family: "Satoshi Bold", sans-serif;
  font-size: 16px;
  width: 35rem;
  height: 4rem;
  border-radius: 5rem;
  border: none;
  padding: 0.8rem 2.4rem;
  color: #101010;
  transition: all 0.2s ease-in-out;
  z-index: 3;
}
.btn-primary-l:hover {
  background-color: #27e88d;
  cursor: pointer;
}
.btn-ghost-l {
  width: 35rem;
  height: 4rem;
  font-size: 16px;
  color: #fff;
  background-color: transparent;
  border: 0.1rem solid #ffffff;
  border-radius: 5rem;
  padding: 0.8rem 2.4rem;
  transition: all 0.2s ease-in-out;
}
.pricing-btn-ghost {
  width: 100%;
  height: 4rem;
  font-size: 16px;
  color: #fff;
  background-color: transparent;
  border: 0.1rem solid #ffffff;
  border-radius: 5rem;
  padding: 0.8rem 2.4rem;
  transition: all 0.2s ease-in-out;
}
/*************************************/
/***** GENERAL STYLES: RADIO BTN *****/
/*************************************/
/* Pricing Toggler */
.toggle-container {
  width: 16.6rem;
  height: 4.4rem;
  font-family: "Satoshi Light", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2rem;
  position: relative;
  border-radius: 5rem;
  padding: 0.8rem;
}
input[type="radio"] {
  display: none;
}
.toggle-label {
  width: 7.1rem;
  height: 2.8rem;
  padding: 0.4rem 0.8rem;
  color: white;
  cursor: pointer;
  z-index: 1;
  position: relative;
  transition: all 0.2s ease-in-out;
}
input[type="radio"]:checked + label {
  font-family: "Satoshi Medium", sans-serif;
  padding: 0.4rem 0.8rem;
  color: #101010;
  background-color: #27e88d;
  border-radius: 5rem;
  cursor: pointer;
  z-index: 1;
}
.discount-box {
  width: 3.2rem;
  height: 1.8rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 5rem;
  background: linear-gradient(90deg, #27e88d80, #16824f00);
  backdrop-filter: blur(1rem);
  position: absolute;
  top: -1rem;
  right: -2rem;
  z-index: 1;
  transition: all 0.2s ease-in-out;
}
.discount {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}
/*************************************/
/***** GENERAL STYLES: NAV LINKS *****/
/*************************************/
/* Learn More & GO Setups */
.learn-more:hover .icon-box,
.learn-more:active .icon-box,
.learn-more-dynamic:hover .icon-box,
.learn-more-dynamic:active .icon-box,
.go-learn-more:hover .icon-box,
.go-learn-more:active .icon-box {
  background-color: #27e88d;
  border: none;
  cursor: pointer;
}
.learn-more:hover .icon-more,
.learn-more:active .icon-more,
.learn-more-dynamic:hover .icon-more,
.learn-more-dynamic:active .icon-more,
.go-learn-more:hover .icon-more,
.go-learn-more:active .icon-more {
  filter: brightness(0) invert(0);
}
.learn-more:hover .icon-text,
.learn-more:active .icon-text,
.learn-more-dynamic:hover .icon-text,
.learn-more-dynamic:active .icon-text {
  color: #fff;
  font-weight: 700;
}
.icon-box {
  width: 3.2rem;
  height: 3.2rem;

  border: 0.5px solid #ffffff;
  border-radius: 6rem;
  padding: 0.4rem;
  transition: all 0.2s ease-in-out;
}
.icon-more {
  width: 1.6rem;
  height: 1.6rem;
  filter: brightness(0) invert(1);
  transition: all 0.2s ease-in-out;
}
.page-link:hover {
  color: #27e88d;
}
/*************************************/
/****** GENERAL STYLES: MARGINS ******/
/*************************************/
/* Margin Top */
.mt-16 {
  margin-top: 1.6rem;
}
.mt-32 {
  margin-top: 3.2rem;
}
.mt-50 {
  margin-top: 5rem;
}
.mt-72 {
  margin-top: 7.2rem;
}
.mt-80 {
  margin-top: 8rem;
}
.mt-100 {
  margin-top: 10rem;
}
.mt-160 {
  margin-top: 16rem;
}
.mt-230 {
  margin-top: 23rem;
}
.mt-320 {
  margin-top: 32rem;
}
/* Margin Bottom */
.mb-40 {
  margin-bottom: 4rem;
}
.mb-80 {
  margin-bottom: 8rem;
}
.mb-100 {
  margin-bottom: 10rem;
}
.mb-160 {
  margin-bottom: 16rem;
}
/*************************************/
/****** GENERAL STYLES: PADDING ******/
/*************************************/
/* Padding Top */
.p-t-32 {
  padding-top: 3.2rem;
}
/* Padding Left & Right */
.p-lr-16 {
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.p-lr-32 {
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}
/* Padding All */
.p-4 {
  padding: 0.4rem;
}
.p-16 {
  padding: 1.6rem;
}
.p-24 {
  padding: 2.4rem;
}
.p-32 {
  padding: 3.2rem;
}
/*************************************/
/******* GENERAL STYLES: WIDTH *******/
/*************************************/
.w-100percent {
  width: 100% !important;
}

.w-10 {
  width: 1rem;
}
.w-590 {
  width: 59rem;
}
.w-600 {
  width: 60rem;
}
.w-808 {
  width: 100%;
  max-width: 80.8rem;
}
.w-900 {
  width: 90rem;
}
/*************************************/
/******* GENERAL STYLES: HEIGHT ******/
/*************************************/
.h-10 {
  height: 1rem;
}
.h-460 {
  height: 46rem;
}
.h-550 {
  height: 55rem;
}
.h-684 {
  height: 68.4rem;
}
/*************************************/
/****** GENERAL STYLES: OPACITY ******/
/*************************************/
.v-h {
  visibility: hidden;
}
.o-30 {
  opacity: 0.3;
  transition: opacity 0.5s ease-in-out;
}
.o-100-filter {
  filter: opacity(100%);
}
.o-70 {
  opacity: 0.7;
}
.o-80 {
  opacity: 0.8;
}
.o-100 {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
/*************************************/
/*** GENERAL STYLES: BORDER RADIUS ***/
/*************************************/
.br-20 {
  border-radius: 2rem;
}
/*************************************/
/***** GENERAL STYLES: FONT SIZE *****/
/*************************************/
.fs-8 {
  font-size: 0.8rem;
}
.fs-12 {
  font-size: 1.2rem;
}
.fs-13 {
  font-size: 1.3rem;
}
.fs-14 {
  font-size: 1.4rem;
}
.fs-16 {
  font-size: 1.6rem;
}
.fs-24 {
  font-size: 2.4rem;
}
/*************************************/
/**** GENERAL STYLES: FONT WEIGHT ****/
/*************************************/
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
/*************************************/
/**** GENERAL STYLES: FONT FACES *****/
/*************************************/
.ff-sl {
  font-family: "Satoshi Light", sans-serif;
}
.ff-sr {
  font-family: "Satoshi Regular", sans-serif;
}
.ff-sm {
  font-family: "Satoshi Medium", sans-serif;
}
.ff-sbd {
  font-family: "Satoshi Bold", sans-serif;
}
.ff-sbk {
  font-family: "Satoshi Black", sans-serif;
}
.ff-fdl {
  font-family: "Funnel Display Light", sans-serif;
}
.ff-fdr {
  font-family: "Funnel Display Regular", sans-serif;
}
.ff-fdm {
  font-family: "Funnel Display Medium", sans-serif;
}
.ff-fdsb {
  font-family: "Funnel Display SemiBold", sans-serif;
}
.ff-fsb {
  font-family: "Funnel Display Bold", sans-serif;
}
.ff-fseb {
  font-family: "Funnel Display ExtraBold", sans-serif;
}
/*************************************/
/******** GENERAL STYLES: TEXT *******/
/*************************************/
.ta-c {
  text-align: center;
}
/* Text Direction */
.td-v {
  transform: rotate(-90deg);
  display: inline-block;
}
.tt-u {
  text-transform: uppercase;
}
.f-r {
  float: right;
}
/*************************************/
/*********** MEDIA QUERIES ***********/
/*************************************/

@media screen and (max-width: 320px) {
  .pricing-wrapper-mini {
    height: 55.6rem;
  }
}
@media screen and (max-width: 290px) {
  .pricing-wrapper-mini {
    height: 57.6rem;
  }
}
@media screen and (max-width: 270px) {
  .pricing-wrapper-mini {
    height: 62.6rem;
  }
}
@media screen and (max-width: 238px) {
  .pricing-wrapper-mini {
    height: 69.6rem;
  }
}
@media screen and (max-width: 895px) {
  .feature-text {
    padding: 0 1.6rem;
  }
}
@media screen and (max-width: 1000px) {
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.7;
  }
  .session-data {
    top: -13.5rem;
    right: -12rem;
  }
  .session-stats {
    top: -13rem;
    left: -13rem;
  }
  .setup-spring-box {
    top: 1rem;
    right: -16rem;
  }
}
@media screen and (max-width: 1260px) {
  .price-feature {
    grid-template-columns: repeat(3, 25.1rem);
  }
  .pricing-btn-last {
    width: 100%;
    max-width: 92.4rem;
  }
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.8;
  }
  .circle-wing {
    top: -2.2rem;
    left: -6.9rem;
  }
  .circle-front {
    top: 17.8rem;
    right: 5.2rem;
  }
  .circle-rear {
    top: 17.8rem;
    left: 13.3rem;
  }
  .front-car-box {
    top: 6.5rem;
    right: -10rem;
  }
  .rear-car-box {
    top: 27rem;
    left: 26rem;
  }
  .wing-lvl-box {
    bottom: 28.5rem;
    left: 8rem;
  }
  .session-data {
    top: -13.5rem;
    right: -10rem;
  }
  .session-lines {
    top: 20rem;
    left: -9.5rem;
  }
  .session-stats {
    top: -13rem;
    left: -9rem;
  }
  .psi-box {
    top: 27rem;
    left: 30rem;
  }
  .large-circle-box {
    top: 13.5rem;
    left: 9.2rem;
  }
  .fuel-box {
    top: 28.5rem !important;
    left: -10rem;
  }
  .fuel-needed {
    top: -13rem !important;
    right: -1rem;
  }
  .setup-wing-box {
    top: -12.9rem;
    left: 6rem;
  }
  .setup-spring-box {
    top: 1rem;
    right: -19rem;
  }
  .skills-feature-l,
  .skills-img-l {
    width: 100%;
    max-width: 80.8rem;
  }
}
@media screen and (max-width: 350px) {
  .mobile-header-content {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .mobile-download {
    width: 100%;
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 370px) {
  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
}
@media screen and (max-width: 900px) {
  .price-feature {
    grid-template-columns: repeat(3, 22.1rem);
  }
  .pressure-p1,
  .installer-p1,
  .telemetry-p1,
  .tracking-p1,
  .fuel-p1,
  .optimizer-p1 {
    text-align: center;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .page-btn {
    justify-content: center;
  }
  .pressure-button-game {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cta-box {
    text-align: center;
    padding: 3.2rem 12rem;
    height: auto;
  }
  .feature-l-car {
    display: none;
  }
  .setup-spring-box-feature,
  .setup-wing-box-feature {
    text-align: left;
  }
}
@media screen and (max-width: 440px) {
  .installer-lines {
    justify-content: flex-start !important;
  }
}
@media screen and (max-width: 700px) {
  .section-installer,
  .section-pressure,
  .section-telemetry,
  .section-stint,
  .section-fuel,
  .section-opti,
  .section-footer,
  .cta-box,
  .trusted-by,
  .section-cta,
  #main-animation-container,
  .section-games,
  .section-hero,
  .section-master-skills {
    padding: 0 2.6rem;
  }
  .section-pricing {
    padding: 2.8rem;
  }
  .footer-top {
    padding: 0 0.5rem;
  }
  .footer-bottom {
    padding: 0 0.5rem;
  }
  .section-installer,
  .section-pressure,
  .section-telemetry,
  .section-stint,
  .section-fuel,
  .section-opti {
    margin-top: 8rem;
  }
  .setups-2,
  .setups-2-img {
    height: 24rem !important;
  }
  .pricing-features {
    margin-bottom: 8rem;
  }
  .hero-animation {
    padding-top: 10rem;
  }
  .animation-container {
    height: auto;
  }
  .mobile-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 122.9rem;
    border-radius: 4rem;
    padding: 1.6rem 2.4rem;
    height: auto;
    align-self: flex-start;
    align-items: normal;
    z-index: 12;
  }
  .mobile-header-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12;
  }
  .dropdowns-mobile {
    display: none;
  }
  .mobile-header-close {
    display: none;
  }
  .mobile-header.nav-open {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-content: flex-start;
    background-color: #1c1c1e;
  }
  .mobile-header.nav-open .dropdowns-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 12;
  }
  .mobile-header.nav-open .mobile-header-open {
    display: none;
  }
  .mobile-header.nav-open .mobile-header-close {
    display: block;
  }
  .mobile-features {
    display: flex !important;
    flex-direction: column;
    gap: 3.2rem;
    width: 100%;
    max-width: 39.2rem;
    margin: 0 auto;
  }
  .mobile-pricing-mini {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
  }
  .mobile-creators {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .mobile-creator {
    margin-top: 10.2rem;
  }
  .mobile-footer {
    display: flex !important;
    flex-direction: column;
    gap: 1.5rem;
  }
  .mobile-hero {
    width: 10rem;
    height: 2.5rem;
  }
  .mobile-download {
    margin-left: 0.5rem;
  }
  .hero-logo {
    width: 13rem;
  }
  .skills-feature-l {
    padding-bottom: 2rem;
  }
  /*********** Setup Installer Queries ***********/
  .installer-games {
    flex-wrap: wrap;
    justify-content: center;
    z-index: 3;
  }
  .installer-p1 {
    flex-direction: column;
    text-align: center;
  }
  .installer-p2 {
    flex-direction: column;
    align-items: center;
    margin-top: -5rem;
  }
  .installer-p3 {
    grid-template-columns: 1fr;
    justify-content: center;
    text-align: center;
  }
  .feature-l-container,
  .red-mesh,
  .go-learn-mobile {
    justify-content: center;
    text-align: center;
    height: auto;
  }
  .feature-l-container {
    padding: 3.2rem 2.4rem;
  }
  .installer-p4 {
    flex-direction: column;
    align-items: center;
  }
  .installer-img,
  .installer-feature {
    height: auto;
  }
  .cta-box {
    padding: 3.2rem 2.4rem;
    text-align: center;
    height: auto;
    margin-bottom: 8rem;
  }
  .cta-box-head {
    font-size: 4.8rem;
  }
  .installer-text-p2,
  .installer-text-p4 {
    width: 100%;
  }
  .installer-car {
    height: auto;
  }
  /*********** Tyre Pressure Queries ***********/
  .pressure-p1 {
    flex-direction: column;
    text-align: center;
  }
  .pressure-p2 {
    flex-direction: column;
    align-items: center;
    margin-top: -5rem;
  }
  .pressure-btn-game {
    flex-direction: column;
  }
  .pressure-car {
    height: auto;
  }
  /*********** Telemetery Data Queries ***********/
  .telemetry-p1 {
    flex-direction: column;
    text-align: center;
    gap: 6rem;
  }
  .telemetry-p2 {
    flex-direction: column;
    align-items: center;
    margin-top: -2rem;
  }
  .telemetry-p3 {
    grid-template-columns: 1fr;
  }
  .telemetry-p4 {
    flex-direction: column;
    align-items: center;
  }
  .telemetry-text {
    width: 100%;
  }
  .skills-feature-l-mobile {
    width: 100%;
    max-width: 39.2rem;
    overflow: hidden;
  }
  .skills-img-l-mobile {
    width: 39.2rem;
  }
  .telemetry-feature-text {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .telemetry-car {
    margin: 6rem 0;
    height: auto;
  }
  /*********** Stint Tracking Queries ***********/
  .tracking-p1 {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  .tracking-p1-text {
    align-items: center;
  }
  .tracking-p2 {
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
  }
  .tracking-text {
    width: 100%;
  }
  .tracking-img {
    height: auto;
  }
  /*********** Fuel Calculator Queries ***********/
  .fuel-p1 {
    flex-direction: column;
    text-align: center;
    gap: 6rem;
  }
  .fuel-p1-text {
    align-items: center;
  }
  .fuel-p2 {
    flex-direction: column;
    align-items: center;
    margin-top: -2rem;
  }
  .fuel-p2-text {
    width: 100%;
  }
  .fuel-car {
    margin: 6rem 0;
    height: auto;
  }
  /*********** Setup Optimizer Queries ***********/
  .optimizer-p1 {
    flex-direction: column;
    text-align: center;
    gap: 4rem;
  }
  .optimizer-p1-text {
    align-items: center;
  }
  .optimizer-p2 {
    flex-direction: column;
    align-items: center;
    margin-top: -2rem;
  }
  .optimizer-p3 {
    grid-template-columns: 1fr;
  }
  .optimizer-text {
    width: 100%;
  }
  .skills-feature-l-mobile {
    width: 100%;
    max-width: 39.2rem;
    overflow: hidden;
    height: auto;
  }
  .skills-img-l-mobile {
    width: 100%;
    max-width: 39.2rem;
  }
  .optimizer-feature-text {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  .spring-rate-absolute {
    display: none;
  }
  .optimizer-car {
    height: auto;
  }
  .optimizer-btn {
    flex-direction: column;
  }
  /*********** Pricing Page Queries ***********/
  .section-pricing {
    margin-top: 8rem;
  }
  .price-feature {
    grid-template-columns: repeat(3, 20rem);
  }
  .btn-ghost-l {
    width: 32rem;
  }
  .pricing-btn-last {
    justify-content: end;
    width: 79rem;
  }
  .pricing-table-scroll {
    width: 100%;
    max-width: 35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pricing-table-scroll::-webkit-scrollbar {
    display: none;
  }
  .pricing-p1 {
    flex-direction: column;
    align-items: center;
  }
  .pricing-table {
    gap: 2.4rem;
  }
  .pricing-placeholder {
    display: none;
  }
  .break {
    display: none;
  }
  /*********** Landing Page Queries ***********/
  .cta-box-home {
    padding: 3.2rem 2.4rem;
    text-align: center;
  }
  .games-main,
  .games-wrapper {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.4rem;
  }
  .section-cta {
    margin-top: 10rem;
  }
  .section-setup-autoinstall,
  .trusted-by {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .feature-text {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  h1 {
    font-size: 4.8rem;
    overflow-wrap: break-word;
  }
  h2 {
    font-size: 3.2rem;
  }
  .h2-l-font {
    font-size: 4.8rem;
  }
  .delta-box,
  .landing-lines,
  .header-regular,
  .feature-l-car,
  .car-badge {
    display: none;
  }
  .installer-line {
    width: 5.1rem;
  }
}
@media screen and (max-width: 800px) {
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.65;
  }
  .circle-box {
    scale: 1.35;
  }
  .circle-wing {
    top: -3rem;
    left: -16.2rem;
  }
  .circle-front {
    top: 18.3rem;
    right: -2.9rem;
  }
  .circle-rear {
    top: 18.3rem;
    left: 5.3rem;
  }
  .front-car-box {
    top: 6.5rem;
    right: -18rem;
  }
  .rear-car-box {
    top: 28rem;
    left: 19rem;
  }
  .wing-lvl-box {
    bottom: 28.5rem;
    left: 2rem;
  }
  .session-data {
    top: -13.5rem;
    right: -18rem;
  }
  .session-lines {
    top: 20rem;
    left: -18.5rem;
  }
  .session-stats {
    top: -13rem;
    left: -14rem;
  }
  .psi-box {
    top: 29rem;
    left: 24rem;
  }
  .large-circle-box {
    top: 14.5rem;
    left: 1.4rem;
  }
  .fuel-box {
    top: 30.5rem !important;
    left: -14rem;
  }
  .fuel-needed {
    top: -12rem !important;
    right: -8rem;
  }
  .setup-wing-box {
    top: -14.3rem;
    left: -3rem;
  }
  .setup-spring-box {
    top: -1rem;
    right: -19rem;
  }
}
@media screen and (max-width: 700px) {
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.6;
  }
  .loader {
    top: 11rem;
  }
  .circle-wing {
    top: -2rem;
    left: -18rem;
  }
  .circle-front {
    top: 17.8rem;
    right: -6rem;
  }
  .circle-rear {
    top: 17.8rem;
    left: -2rem;
  }
  .circle-wing-feature {
    top: 3rem;
    left: 0.1rem;
  }
  .circle-front-feature {
    top: 13.8rem;
    right: 6.5rem;
  }
  .circle-rear-feature {
    top: 13.8rem;
    left: 10.8rem;
  }
}
@media screen and (max-width: 600px) {
  .animation-container-features {
    height: 23rem;
  }
  .circle-wing-feature {
    top: 3.8rem;
    left: -0.5rem;
  }
  .circle-front-feature {
    top: 13.2rem;
    right: 5.5rem;
  }
  .circle-rear-feature {
    top: 13.3rem;
    left: 9.2rem;
  }
  .wing-lvl-box-feature,
  .rear-car-box-feature,
  .front-car-box-feature {
    scale: 0.6;
    text-align: left !important;
  }
  .wing-lvl-box-feature {
    top: 2.5rem;
    left: 6rem;
  }
  .rear-car-box-feature {
    top: 19rem;
    left: 13.5rem;
  }
  .front-car-box-feature {
    top: 8rem;
    right: -5rem;
  }
  .large-circle-box-feature {
    scale: 0.6;
    top: 9rem;
    left: 4.2em;
  }
  .psi-box-feature {
    scale: 0.6;
    top: 19rem;
    left: 19rem;
  }
  .session-data-feature {
    top: -15rem;
    right: -8rem;
    scale: 0.4;
  }
  .session-stats-feature {
    top: -12rem;
    left: -8rem;
    scale: 0.5;
  }
  .session-lines-feature {
    top: 1rem;
    left: -6rem;
    scale: 0.5;
  }
  .fuel-needed-feature {
    top: -16rem !important;
    right: 2.5rem;
    scale: 0.5;
  }
  .fuel-box-feature {
    top: 7rem !important;
    left: -7rem;
    scale: 0.5;
  }
  .setup-optimizer-wrapper-feature {
    left: 0;
    top: -2.5rem;
  }
  .setup-wing-box-feature {
    scale: 0.6;
    top: -4.2rem;
    left: 5rem;
  }
  .setup-spring-box-feature {
    scale: 0.6;
    top: 1.5rem;
    right: -7rem;
  }
}
@media screen and (max-width: 500px) {
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.5;
  }
  .installer-wrapper-feature,
  .setup-optimizer-wrapper-feature {
    scale: 0.7;
  }
  .circle-wing {
    top: 0.5rem;
    left: -20.2rem;
  }
  .circle-front {
    top: 16.5rem;
    right: -10.5rem;
  }
  .circle-rear {
    top: 16.5rem;
    left: -4rem;
  }
  .large-circle-box {
    top: 11.5rem;
    left: -8rem;
  }
  .circle-wing-feature {
    top: 2.7rem;
    left: -9rem;
  }
  .circle-front-feature {
    top: 14rem;
    right: -2.5rem;
  }
  .circle-rear-feature {
    top: 14rem;
    left: 2.1rem;
  }
  .wing-lvl-box-feature {
    top: 1.5rem;
    left: -0.5rem;
  }
  .rear-car-box-feature {
    top: 20rem;
    left: 7.2rem;
  }
  .front-car-box-feature {
    top: 8rem;
    right: -14rem;
  }
  .large-circle-box-feature {
    scale: 0.5;
    top: 8.3rem;
    left: 2rem;
  }
  .psi-box-feature {
    scale: 0.5;
    top: 17rem;
    left: 14.5rem;
  }
  .fuel-needed-feature {
    top: -17rem !important;
    right: 0.6rem;
  }
  .fuel-box-feature {
    top: 6rem !important;
    left: -8rem;
  }
  .setup-wing-box-feature {
    scale: 0.5;
    top: -4.7rem;
    left: -5rem;
  }
  .setup-spring-box-feature {
    scale: 0.5;
    top: 1rem;
    right: -15rem;
  }
}
@media screen and (max-width: 438px) {
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.4;
  }
  .circle-wing {
    top: -1rem;
    left: -26rem;
  }
  .circle-front {
    top: 16.5rem;
    right: -15.5rem;
  }
  .circle-rear {
    top: 16.5rem;
    left: -8.6rem;
  }
  .circle-wing-feature {
    top: 3.5rem;
    left: -8.5rem;
  }
  .circle-front-feature {
    top: 13.5rem;
    right: -2.8rem;
  }
  .circle-rear-feature {
    top: 13.5rem;
    left: 1.3rem;
  }
  .front-car-box {
    top: 6.5rem;
    right: -30rem;
  }
  .rear-car-box {
    top: 25rem;
    left: 1rem;
  }
  .wing-lvl-box {
    bottom: 26.5rem;
    left: -13rem;
  }
  .session-stats {
    top: -13rem;
    left: -29rem;
  }
  .session-lines {
    top: 20rem;
    left: -32.5rem;
  }
  .session-data {
    top: -13.5rem;
    right: -31rem;
  }
  .psi-box {
    top: 26rem;
    left: 3rem;
  }
  .large-circle-box {
    top: 12.6rem;
    left: -13rem;
  }
  .fuel-needed {
    top: -12rem !important;
    right: -21rem;
  }
  .fuel-box {
    top: 27.5rem !important;
    left: -31rem;
  }
  .setup-wing-box {
    top: -12.3rem;
    left: -15rem;
  }
  .setup-spring-box {
    top: -2rem;
    right: -29rem;
  }
  .wing-lvl-box-feature {
    top: 3rem;
    left: -1rem;
  }
  .rear-car-box-feature {
    top: 19rem;
    left: 5.2rem;
  }
  .front-car-box-feature {
    top: 8rem;
    right: -14rem;
  }
  .large-circle-box-feature {
    scale: 0.4;
    top: 7.8rem;
    left: 0.8rem;
  }
  .psi-box-feature {
    scale: 0.4;
    top: 16.5rem;
    left: 11.5rem;
  }
  .session-data-feature {
    top: -13.5rem;
    right: -12rem;
    scale: 0.3;
  }
  .session-stats-feature {
    top: -10rem;
    left: -10rem;
    scale: 0.4;
  }
  .session-lines-feature {
    top: -0.5rem;
    left: -8rem;
    scale: 0.4;
  }
  .fuel-needed-feature {
    top: -15.5rem !important;
    right: -0.5rem;
    scale: 0.4;
  }
  .fuel-box-feature {
    top: 5rem !important;
    left: -10rem;
    scale: 0.4;
  }
  .setup-wing-box-feature {
    scale: 0.5;
    top: -4rem;
    left: -5rem;
  }
  .setup-spring-box-feature {
    scale: 0.5;
    top: 2rem;
    right: -15rem;
  }
}
@media screen and (max-width: 425px) {
  .installer-wrapper,
  .session-wrapper,
  .pressure-tool-wrapper,
  .fuel-slide-wrapper,
  .setup-optimizer-wrapper,
  .loader {
    scale: 0.4;
  }
  .installer-wrapper-feature,
  .setup-optimizer-wrapper-feature {
    scale: 0.6;
  }
  .circle-wing {
    top: -1rem;
    left: -26rem;
  }
  .circle-front {
    top: 16.5rem;
    right: -15.5rem;
  }
  .circle-rear {
    top: 16.5rem;
    left: -8.6rem;
  }
  .large-circle-box {
    top: 11rem;
    left: -13rem;
  }
  .circle-wing-feature {
    top: 3rem;
    left: -12rem;
  }
  .circle-front-feature {
    top: 14rem;
    right: -5.8rem;
  }
  .circle-rear-feature {
    top: 14rem;
    left: -1rem;
  }
  .wing-lvl-box-feature {
    top: 2rem;
    left: -3.5rem;
  }
  .rear-car-box-feature {
    top: 20rem;
    left: 4rem;
  }
  .front-car-box-feature {
    top: 8rem;
    right: -18rem;
  }
  .large-circle-box-feature {
    scale: 0.4;
    top: 7.8rem;
    left: 0.3rem;
  }
  .psi-box-feature {
    scale: 0.4;
    top: 16.5rem;
    left: 10.5rem;
  }
  .setup-wing-box-feature {
    scale: 0.5;
    top: -4rem;
    left: -8rem;
  }
  .setup-spring-box-feature {
    scale: 0.5;
    top: 2.5rem;
    right: -19rem;
  }
}
@media screen and (max-width: 390px) {
  .loader {
    top: 11.5rem;
  }
  .circle-wing {
    top: 0;
    left: -24.2rem;
  }
  .circle-front {
    top: 16rem;
    right: -14.5rem;
  }
  .circle-rear {
    top: 16rem;
    left: -8.2rem;
  }
  .large-circle-box {
    top: 11rem;
    left: -13rem;
  }
  .circle-wing-feature {
    top: 3.5rem;
    left: -11.7rem;
  }
  .circle-front-feature {
    top: 13.3rem;
    right: -5.5rem;
  }
  .circle-rear-feature {
    top: 13.4rem;
    left: -1.2rem;
  }
  .wing-lvl-box-feature {
    top: 3rem;
    left: -3.5rem;
  }
  .rear-car-box-feature {
    top: 19rem;
    left: 2.8rem;
  }
  .front-car-box-feature {
    top: 9rem;
    right: -18rem;
  }
  .large-circle-box-feature {
    scale: 0.4;
    top: 7.5rem;
    left: -0.5rem;
  }
  .psi-box-feature {
    scale: 0.4;
    top: 15.5rem;
    left: 9.5rem;
  }
  .fuel-needed-feature {
    top: -15.5rem !important;
    right: -1.4rem;
  }
  .fuel-box-feature {
    top: 4rem !important;
    left: -11rem;
  }
}
@media screen and (max-width: 375px) {
  .circle-wing {
    top: 1rem;
    left: -23.2rem;
  }
  .circle-front {
    top: 15.5rem;
    right: -14.4rem;
  }
  .circle-rear {
    top: 15.5rem;
    left: -8rem;
  }
  .circle-wing-feature {
    top: 4rem;
    left: -11rem;
  }
  .circle-front-feature {
    top: 13rem;
    right: -5.4rem;
  }
  .circle-rear-feature {
    top: 13rem;
    left: -1.5rem;
  }
  .large-circle-box-feature {
    scale: 0.4;
    top: 7.3rem;
    left: -0.8rem;
  }
  .psi-box-feature {
    scale: 0.4;
    top: 15.5rem;
    left: 9.5rem;
  }
  .session-data-feature {
    top: -13.5rem;
    right: -12rem;
    scale: 0.2;
  }
  .session-stats-feature {
    top: -10rem;
    left: -10rem;
    scale: 0.3;
  }
  .session-lines-feature {
    top: -0.5rem;
    left: -8rem;
    scale: 0.3;
  }
  .fuel-needed-feature {
    top: -14.5rem !important;
    right: -1.3rem;
    scale: 0.3;
  }
  .fuel-box-feature {
    top: 4rem !important;
    left: -11rem;
    scale: 0.3;
  }
}
@media screen and (max-width: 320px) {
  .installer-wrapper-feature,
  .setup-optimizer-wrapper-feature {
    scale: 0.4;
  }
  .circle-wing {
    top: 1rem;
    left: -22rem;
  }
  .circle-front {
    top: 15rem;
    right: -13.3rem;
  }
  .circle-rear {
    top: 15rem;
    left: -8rem;
  }
  .circle-wing-feature {
    top: 2.5rem;
    left: -19.4rem;
  }
  .circle-front-feature {
    top: 14rem;
    right: -12.4rem;
  }
  .circle-rear-feature {
    top: 14rem;
    left: -7.5rem;
  }
  .wing-lvl-box-feature {
    top: 2rem;
    left: -9.5rem;
  }
  .rear-car-box-feature {
    top: 20rem;
    left: -2.3rem;
  }
  .front-car-box-feature {
    top: 9rem;
    right: -26rem;
  }
  .large-circle-box-feature {
    scale: 0.3;
    top: 6.7rem;
    left: -2.3rem;
  }
  .psi-box-feature {
    scale: 0.3;
    top: 14.5rem;
    left: 6.5rem;
  }
  .session-data-feature {
    top: -12rem;
    right: -10rem;
    scale: 0.2;
  }
  .session-stats-feature {
    top: -8rem;
    left: -10rem;
    scale: 0.3;
  }
  .session-lines-feature {
    top: -2rem;
    left: -9.3rem;
    scale: 0.3;
  }
  .fuel-needed-feature {
    top: -14.5rem !important;
    right: -2rem;
    scale: 0.3;
  }
  .fuel-box-feature {
    top: 3rem !important;
    left: -11rem;
    scale: 0.3;
  }
  .setup-wing-box-feature {
    top: -5rem;
    left: -15rem;
  }
  .setup-spring-box-feature {
    top: 2.4rem;
    right: -25rem;
  }
}