/* Base best colors */
:root {
  --bs-primary: #ffa200;
  --bs-primary-hover: #ff8b0f;
  --bs-primary-dark: #151414;
  --bs-light-gray: #a5a5a5;
  --bs-dark-gray: #747474;
  --bs-super-dark-gray: #575757;
  --bs-super-light-gray: #f4f4f4;
  --bs-white: #fff;
  --bs-yellow: #ffd70d;
  --bs-light-blue-background-orig: #f1f6fa;
  --bs-light-blue-background: #f3f3f3;
  --bs-blue-primary: #007bff;
  --bs-blue-secondary: #0056b3;
}

body {
  font-family: 'Poppins', sans-serif;
  /* font-family: 'Georgia', serif; */
  /* font-family: 'Roboto', sans-serif; */
  color: var(--bs-primary-dark);
}

form input {
  margin-top: 15px;
}

#logo {
  padding-top: 60px;
  padding-bottom: 60px;
}

#logo-image {
  max-width: 200px;
  height: auto;
}

#hero {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2rem;
  line-height: 150%;
}

#hero-image {
  padding-top: 60px;
  max-width: 400px;
  height: auto;
}
#sample-image {
  max-width: 500px;
  height: auto;
  border-color: rgb(206, 206, 206) !important;
  box-shadow: 0 0 10px 1rem rgba(200, 200, 200, 0.15);
}

#sub-hero {
  margin-top: 30px;
  margin-bottom: 30px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  color: var(--bs-dark-gray);
}

#newsletter-info {
  font-size: 0.7rem;
  color: var(--bs-light-gray);
  padding-top: 30px;
}

#newsletter-info a:link,
#newsletter-info a:visited {
  color: var(--bs-light-gray);
}
#newsletter-info a:hover {
  color: var(--bs-dark-gray);
}

#timer {
  /* background-color: var(--bs-super-light-gray); */
  background: rgb(255, 160, 0);
  background: linear-gradient(
    90deg,
    rgba(255, 160, 0, 1) 0%,
    rgb(255, 139, 15) 100% /* rgba(0, 86, 179) 0%,
    rgb(0, 123, 255) 100% */
  );
  padding: 70px 0px;
  color: var(--bs-white);
  margin-top: 60px;
}
#timer h2 {
  line-height: 150%;
}

#timer h2:last-of-type {
  color: var(--bs-primary-dark);
  font-size: 1.5rem;
}

#advantage {
  padding-top: 60px;
  padding-bottom: 60px;
  color: var(--bs-dark-gray);
  background-color: var(--bs-light-blue-background);
}

#advantage h2 {
  margin-bottom: 30px;
  color: var(--bs-primary-dark);
}

#advantage p {
  margin-bottom: 60px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bs-primary-dark);
  /* color: var(--bs-primary-hover); */
}

#advantage .ul-header {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bs-primary-hover);
}

#advantage li {
  font-size: 1.2rem;
  line-height: 220%;
}

#last-sign-up {
  margin-top: 60px;
  margin-bottom: 60px;
}

#last-sign-up h2 {
  font-weight: 600;
  font-size: 3rem;
  line-height: 150%;
}

#last-sign-up p {
  font-size: 2rem;
}

#last-form {
  max-width: 500px;
  margin: 60px auto;
}

.confirmation-info {
  font-size: 0.9rem !important;
}

#hurry-up {
  margin-bottom: 50px;
}

ul li::marker {
  color: var(--bs-primary-hover) !important;
}

footer {
  font-size: 0.8rem;
  color: var(--bs-dark-gray);
}

footer a:link,
footer a:hover,
footer a:visited {
  color: var(--bs-dark-gray);
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  /* background-color: var(--bs-blue-primary);
  border-color: var(--bs-blue-primary); */
  font-weight: 600;
  font-size: 1.7rem;
  padding-top: 12px;
  padding-bottom: 12px;
}

.btn-primary:hover {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  /* background-color: var(--bs-blue-secondary);
  border-color: var(--bs-blue-secondary); */
}

.form-control:focus {
  box-shadow: 0 0 2px 0.1rem rgba(255, 160, 0, 1);
}

@media (max-width: 1399.98px) {
  #logo {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #hero-image {
    padding-top: 0px;
    max-width: 400px;
    height: auto;
  }
}

@media (max-width: 991.98px) {
  html {
    font-size: 30px;
  }
  #sub-hero {
    font-size: 1.5rem;
  }
  #hero-image {
    margin-top: 60px;
  }
  #logo {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  #logo-image {
    max-width: 600px;
    height: auto;
  }
  .form-control {
    padding: 30px 30px;
    font-size: 1.3rem;
  }
  .btn-primary {
    font-size: 2rem;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .confirmation-info {
    font-size: 1.2rem !important;
  }
  #newsletter-info {
    font-size: 1rem;
    color: var(--bs-light-gray);
    padding-top: 30px;
  }
  #hero-image {
    padding-top: 60px;
    max-width: 600px;
    height: auto;
  }
  #timer h2 {
    font-size: 2.2rem;
  }

  #timer h2:last-of-type {
    color: var(--bs-primary-dark);
    font-size: 1.8rem;
  }
  #advantage h2 {
    font-size: 2.2rem;
  }

  #advantage p {
    font-size: 1.8rem;
  }
  #advantage li {
    font-size: 1.8rem;
    line-height: 200%;
  }
  #last-form {
    max-width: 100%;
  }
}