.cleeks-home-joinus {
  margin-top: 0 !important;
}

#contact {
  background-image: url('../../images/pages/about/contact-bg.webp');
  background-image: image-set(url('../../images/pages/about/contact-bg.webp') 1x,
      url('../../images/pages/about/contact-bg@2x.webp') 2x);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 34px 0 40px 0;
}

#contact .container {
  width: 1150px;
}

#contact .right {
  width: 100%;
  height:538px;
  max-width: 554px;
}

#contact .title {
  font-size: 26.5px;
  line-height: 37px;
  margin-bottom: 10px;
  color: #262626;
  margin-bottom: 23px;
}

#contact .title span {
  font-size: 68px;
}

#contact p {
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  font-weight: 500;
  max-width: 410px;
  margin: 0 auto;
}

#contact .info {
  font-size: 35px;
  line-height: 31px;
  margin-bottom: 20px;
}

#contact .left {
  padding-right: 40px;
}

#contact .right .inner {
  max-width: 554px;
  width: 100%;
  padding: 34px 12px;
  background-color: #222;
  border: 5px solid var(--yellow);
  border-radius: 15px;
  box-shadow: 0px 0px 30px 0px rgba(70, 70, 70, 0.4);
  height:100%;
}

#contact .form-control {
  border-radius: 0;
  color: #222;
  font-family: 'Lato';
  font-size: 14px;
  letter-spacing: 0.01em;
  margin-bottom: 15px;
  height: 42px;
  line-height: 1;
  outline: none;
  box-shadow: none;
  border: 1px solid black;
}

#contact .info.f38 {
  font-size:38px;
}

#contact .info .f46 {
  font-size:46px;
}

#contact .form-control::placeholder {
  color: #222;
  opacity: 1;
}

#contact .selectric-wrapper {
  margin-bottom: 20px;
}

#contact select {
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  background-image: url(../../images/pages/contact-us/down-arrow.png);
  background-image: -webkit-image-set(url(../../images/pages/contact-us/down-arrow.png) 1x, url(../../images/pages/contact-us/down-arrow@2x.png) 2x);
  background-size: 12px 8px;
}
#contact a.button {
  border: none;
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  width: 100%;
  max-width: 224px;
  margin-top: 22px;
  padding: 0;
  color: #222;
}

#contact .col-12 {
  padding: 0 15px;
}

#contact .selectric {
  background: #fff;
  color: #222;
}

#contact .selectric i {
  display: none;
}

#contact .selectric .button {
  background: transparent;
}

#contact textarea.form-control {
  height: 84px;
  resize: none;
  padding-top: 12px;
}

#contact input[type="submit"] {
  background-color: var(--yellow);
  color: #000;
  border-radius: 0;
  letter-spacing: 0;
  margin: 11px auto 0 auto;
  font-size: 22.5px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  width:240px;
}

/* @media screen and (max-width: 992px ) {
  #contact .col-6 {
    width: 100%;
  }
} */

@media screen and (max-width: 768px ) {

  #contact {
    padding: 42px 0 67px 0;
  }

  #contact .container {
    flex-wrap: wrap;
    padding: 0;
  }

  #contact .left {
    width: 100%;
    padding-right: 0;
  }

  #contact .title {
    font-size: 20.5px;
    line-height: 28px;
    margin-bottom: 10px;
  }

  #contact .title span {
    font-size: 43.5px;
  }

  #contact .right {
    margin-top: 40px;
    padding: 0 13px;
  }

  #contact .right .inner {
    padding: 34px 4px;
  }

  #contact p {
    font-size: 17px;
    line-height: 20px;
    max-width: 280px;
  }

  #contact .col-6,
  #contact .col-12 {
    padding: 0 6px;
  }
}