.heroSection {
  min-height: 90vh;
  padding-top: 100px;
}

.heroSection h1 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 200px;
  font-weight: 700;
  text-align: center;
  line-height: 170px;
  color: var(--light);
}

.heroSection p {
  width: 950px;
  font-size: 20px;
  line-height: 44px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--lighter-light);
}
.heroImages img {
  height: 550px !important;
  object-fit: cover;
  object-position: 90% 65% !important;
}
.aboutDoubleCol {
  background-color: var(--card-background);
}
.mainFeatureBody i {
  color: var(--light);
  font-size: 30px !important;
  margin-top: 5px !important;
}
.aboutDoubleCol .leftCol h2 {
  font-size: 80px;
  line-height: 70px;
  width: 700px;
  margin-left: auto;
  font-weight: 400;
  text-transform: uppercase;
  font-family: var(--font-heading);
  color: var(--light);
}

.aboutDoubleCol .leftCol p.aboutPara {
  font-size: 18px;
  line-height: 40px;
  width: 700px;
  color: var(--lighter-light);

  margin-left: auto;
}

.aboutDoubleCol .leftCol,
.aboutDoubleCol .rightCol {
  width: 50%;
}

.aboutDoubleCol .rightCol img {
  width: 50%;
}

.mainfeatureSection .mainHeader h2 {
  color: var(--light);
  font-size: 70px;
  font-family: var(--font-heading);
  font-weight: 400;
  text-align: center;
}

.mainfeatureSection .mainHeader p {
  font-size: 18px;
  text-align: center;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 38px;
  color: var(--lighter-light);
}

.featureCol {
  width: 370px;
}

.featureCol h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--light);
}

.featureCol p {
  font-size: 16px;
  line-height: 30px;
  color: var(--lighter-light);
}

.centerSection {
  background-color: var(--card-background);
}

.centerSection h2 {
  font-family: var(--font-heading);
  font-size: 70px;
  font-weight: 400;
  text-align: center;
  color: var(--light);
}

.centerSection p {
  text-align: center;
  font-size: 18px;
  line-height: 38px;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  color: var(--lighter-light);
}

.centerSectionAnchor a {
  text-decoration: none;
  color: var(--light);
  font-size: 18px;
  border-bottom: 1px solid var(--light) !important;
  width: 300px;
  display: block;
  text-align: left;
  padding-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.centerSectionAnchor a i {
  margin-left: 20px;
}

.trans-bg {
  background-color: transparent;
  padding-bottom: 10px;
}

@media (max-width: 1700px) {
  .heroSection h1 {
    font-size: 175px !important;
    line-height: 145px !important;
  }
  .mainFeatureBody .row.justify-space {
    gap: 20px !important;
  }
}

@media (max-width: 1600px) {
  .heroSection h1 {
    font-size: 160px !important;
    line-height: 130px !important;
  }
}

@media (max-width: 1500px) {
  .aboutDoubleCol .leftCol h2,
  .aboutDoubleCol .leftCol p.aboutPara,
  .centerSection h2 {
    width: 100% !important;
  }
  .mainFeatureBody .spacer-100 {
    height: 70px !important;
  }
  .mainFeatureBody .spacer-80 {
    height: 50px !important;
  }
  .featureCol h2 {
    font-size: 20px !important;
  }
}

@media (max-width: 1350px) {
  .heroSection h1 {
    font-size: 145px !important;
    line-height: 115px !important;
  }
}
@media (max-width: 1205px) {
  .aboutDoubleCol .leftCol h2,
  .mainfeatureSection .mainHeader h2,
  .centerSection h2 {
    font-size: 68px !important;
    line-height: 63px !important;
  }
}
@media (max-width: 1200px) {
  .heroSection h1 {
    font-size: 130px !important;
    line-height: 100px !important;
  }
}

@media (max-width: 1100px) {
  .heroSection h1 {
    font-size: 110px !important;
    line-height: 80px !important;
  }
  .aboutDoubleCol .row.align-center.gap-90 {
    gap: 40px !important;
  }
}

@media (max-width: 1024px) {
  .aboutDoubleCol .leftCol p.aboutPara {
    font-size: 16px !important;
  }
  .mainfeatureSection .mainHeader p,
  .centerSection p {
    font-size: 16px !important;
    line-height: 36px !important;
  }
  .mainFeatureBody .row.justify-space {
    flex-wrap: wrap !important;
    gap: 30px !important;
  }
  .featureCol {
    width: calc(50% - 30px) !important;
  }
  .mainFeatureBody .spacer-80 {
    height: 30px !important;
  }
  .heroSection h1 {
    font-size: 80px !important;
    line-height: 50px !important;
  }
  .heroSection p {
    width: calc(100% - 40px) !important;
    font-size: 18px !important;
    line-height: 40px !important;
  }
  .spacer-50.hero-spacer,
  .about-spacer {
    height: 30px !important;
  }
  .aboutDoubleCol .leftCol .spacer-30 {
    height: 15px !important;
  }
  .aboutDoubleCol .leftCol {
    margin-bottom: 35px !important;
  }
  .about-spacer-two {
    height: 40px !important;
  }
  .mainFeatureBody .spacer-100 {
    height: 60px !important;
  }
  .aboutDoubleCol .leftCol h2,
  .mainfeatureSection .mainHeader h2,
  .centerSection h2 {
    font-size: 63px !important;
  }
  .aboutDoubleCol .row.align-center.gap-90 {
    display: block !important;
  }
  .aboutDoubleCol .leftCol,
  .aboutDoubleCol .rightCol {
    width: 100% !important;
  }
  .aboutDoubleCol .leftCol {
    margin-bottom: 50px !important;
  }
  .mainfeatureSection .mainHeader p,
  .centerSection p {
    width: 100% !important;
  }
  .feature-section-spacer {
    height: 20px !important;
  }
  .feature-section-end-spacer,
  .centerSection .spacer-50:first-child,
  .centerSection .spacer-50:last-child {
    height: 20px !important;
  }
  .aboutDoubleCol.trans-bg .spacer-50:first-child, .aboutDoubleCol.trans-bg .spacer-50:last-child
  {
    height: 20px !important;
  }
}

@media (max-width: 767px) {
  .feature-section-spacer {
    height: 10px !important;
  }
  .feature-section-end-spacer,
  .centerSection .spacer-50:first-child,
  .centerSection .spacer-50:last-child {
    height: 20px !important;
  }
  .aboutDoubleCol.trans-bg .spacer-50:first-child, .aboutDoubleCol.trans-bg .spacer-50:last-child
  {
    height: 10px !important;
  }
  .mainFeatureBody .row.justify-space {
    display: block !important;
  }
  .featureCol {
    width: 100% !important;
    margin-bottom: 30px !important;
  }
  .mainFeatureBody .spacer-80 {
    display: none !important;
  }
  .heroSection p {
    font-size: 16px !important;
    line-height: 36px !important;
    width: calc(100% - 20px) !important;
  }
  .heroSection h1 {
    font-size: 70px !important;
    line-height: 40px !important;
  }
  .heroSection .spacer-80 {
    height: 50px !important;
  }
  .spacer-50.hero-spacer,
  .about-spacer {
    height: 10px !important;
  }
  .about-spacer-two {
    height: 20px !important;
  }
  .mainFeatureBody .spacer-100 {
    height: 40px !important;
  }
  .aboutDoubleCol .leftCol h2,
  .mainfeatureSection .mainHeader h2,
  .centerSection h2 {
    font-size: 58px !important;
    line-height: 58px !important;
  }
  .aboutDoubleCol .spacer-50.about-spacer {
    display: none !important;
  }
  .featureCol:last-child
  {
    margin-bottom: 0 !important;
  }
  .centerSectionAnchor a
  {
    font-size: 16px !important;
  }
}
@media (max-width: 680px) {
  .heroSection {
    padding-top: 80px !important;
  }
}
@media (max-width: 510px) {
  .aboutDoubleCol .leftCol h2,
  .mainfeatureSection .mainHeader h2,
  .centerSection h2 {
    font-size: 53px !important;
    line-height: 53px !important;
  }
}

@media (max-width: 500px) {
  .heroSection h1 {
    font-size: 60px !important;
    line-height: 60px !important;
    width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .heroSection .spacer-30 {
    height: 20px !important;
  }
  .heroSection p {
    width: calc(100% - 20px) !important;
  }
}