.heroSection {
  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);
}

.formRow input {
  height: 60px;
  width: 50%;
  border: none;
  border: 1px solid var(--lighter-light) !important;
  font-size: 16px;
  background-color: var(--card-background);
  color: var(--light);
  font-family: var(--font-primary);
  padding: 15px;
}

.formRow input:focus {
  border: none !important;
  border: 1px solid var(--dark-lighter) !important;
  outline: none !important;
}

.formRow textarea {
  height: 400px;
  border: none;
  border: 1px solid var(--lighter-light) !important;
  font-size: 16px;
  font-family: var(--font-primary);
  width: 100%;
  background-color: var(--card-background);
  color: var(--light);
  padding: 20px;
}

.formRow textarea:focus {
  border: none !important;
  border: 1px solid var(--dark) !important;
  outline: none !important;
  padding: 20px;
}

.contactForm form {
  width: 70%;
}

.contactForm button {
  cursor: pointer;
  width: 100%;
  height: 60px;
  font-size: 18px;
  color: var(--light);
  border: none;
  outline: none;
  background-color: var(--base-color);
}

.rightColContact {
  width: 400px;
  border: 1px solid var(--dark-lighter);
  padding: 30px;
}

.darkLabel h2 {
  font-size: 22px;
  color: var(--light);
}
.darkLabel p {
  font-size: 16px;
  line-height: 35px;
  color: var(--lighter-light);
}

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

.darkLabel a i {
  margin-right: 15px;
}

@media (max-width: 1700px) {
  .heroSection h1 {
    font-size: 175px !important;
    line-height: 145px !important;
  }
}
@media (max-width: 1600px) {
  .heroSection h1 {
    font-size: 160px !important;
    line-height: 130px !important;
  }
}
@media(max-width:1400px){
  .contactForm .row.align-center.gap-100 {
    gap: 70px !important;
}
}
@media (max-width: 1350px) {
  .heroSection h1 {
    font-size: 145px !important;
    line-height: 115px !important;
  }
}
@media (max-width: 1200px) {
  .heroSection h1 {
    font-size: 130px !important;
    line-height: 100px !important;
  }
  .contactForm .row.align-center.gap-100 {
    gap: 50px !important;
}
}
@media (max-width: 1100px) {
  .heroSection h1 {
    font-size: 110px !important;
    line-height: 80px !important;
  }
  .contactForm .row.align-center.gap-100 {
    gap: 30px !important;
}
}
@media (max-width: 1024px) {
  .heroSection h1 {
    font-size: 80px !important;
    line-height: 50px !important;
  }
  .contactForm .row.align-center.gap-100 {
    display: block !important;
}
.contactForm form, .rightColContact
{
  width: 100% !important;
}
.heroSection .spacer-80
{
  height: 60px !important;
}
.contactForm form, .rightColContact
{
  padding-left: 0 !important;
}
  .heroSection p {
    font-size: 18px !important;
    line-height: 42px !important;
    width: calc(100% - 40px) !important;
  }
  .shrink-last-spacer
  {
   height: 20px !important;
  }
}
@media (max-width: 767px) {
  .heroSection .spacer-80
  {
    height: 50px !important;
  }
  .formRow.row.justify-center.gap-30 {
    gap: 15px !important;
}
.contactForm form .spacer-30 {
  height: 15px !important;
}
.formRow textarea {
  height: 250px !important;
}
  .heroSection h1 {
    font-size: 70px !important;
    line-height: 40px !important;
  }
  .heroSection p {
    font-size: 16px !important;
    line-height: 40px !important;
    width: calc(100% - 20px) !important;
  }
  .shrink-last-spacer
  {
    display: none !important;
  }
}
@media(max-width:610px){
  .heroSection
  {
    padding-top: 80px !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;
  }
}