/* ## Hero Banner section
--------------------------------------------- */
.hero-banner {
  padding: 53px 0 96px;
}

.hero-banner .hero-banner-title-container {
  font-size: 55px;
  padding: 40px;
  background: rgba(14, 14, 14, 0.8);
}

/* ## Contact Form section
--------------------------------------------- */
.contact-form form {
  background: #f8f8f8;
}

.contact-form .input-container:not(:last-of-type) {
  margin-bottom: 20px;
}

.contact-form .form-control {
  font-size: 18px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(93, 97, 89, 0.122);
}

.contact-form .form-control::placeholder {
  color: #52525a;
  font-weight: 300;
}

.contact-form .btn {
  color: #383838;
  background: var(--yellow);
  padding: 16px;
  margin-top: 32px;
}

.contact-form .btn:hover {
  background: #fecb3b;
}

/* ## Mobile Responsiveness
--------------------------------------------- */
@media only screen and (min-width: 992px) {
  .hero-banner .hero-banner-title {
    max-width: 600px;
  }

  .contact-form .contact-form-content {
    padding-right: 65px;
  }
}

@media only screen and (max-width: 992px) {
  .hero-banner {
    padding: 48px 0 76px;
  }

  .contact-form .form-control {
    font-size: 17px;
  }

  .contact-form .btn {
    margin-top: 27px;
  }
}

@media only screen and (max-width: 768px) {
  .hero-banner {
    padding: 43px 0 56px;
  }

  .contact-form .form-control {
    font-size: 16px;
  }

  .contact-form .btn {
    margin-top: 22px;
  }
}