.contact-banner {
  background-image: url("/assets/Final Images for website/thomas-serer-r-xKieMqL34-unsplash.jpg");
  background-size: cover;
  background-position: bottom;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-title {
  color: #ffffff;
  font-family: "D-din-bold";
  font-size: 100px;
  width: 100%;
  text-align: center;
}

.contacts {
  background-color: #efede8;
  padding-bottom: 100px;
}

.contacts-forms {
  padding-top: 50px;
  max-width: 900px;
  margin: auto;
}

.forms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.input {
  margin: 5px 0;
  background-color: #efede8;
  border: 1px solid #707070;
  height: 40px;
  width: 98%;
  padding-left: 5px;
}

.text-input {
  display: grid;
  grid-area: 3 / 1 / 3 / span 3;
  margin-top: 5px;
  background-color: #efede8;
  border: 1px solid #707070;
  height: 150px;
  padding-left: 5px;
}

.celebrate-block {
  background-image: url("../assets/Final Images for website/Friends-Cheers-With-Shot-Glasses-In-Bar_wWmPYQvdWA2W.jpg");
  background-position: top;
  background-size: cover;
}

.celebrate-title {
  font-family: "D-din-bold";
  font-size: 50px;
  width: 38%;
  margin: auto;
  text-align: center;
  color: #ffffff;
  padding: 10% 0;
}

.celebrate-checkbox {
  grid-area: 4 / 1 / 4 / span 3;
}

.question-section {
  background-color: #efede8;
}

.question-block {
  padding: 100px 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1600px;
  margin: auto;
}

.question-block-content {
  justify-self: center;
}

.question-title {
  font-family: "D-din";
  font-size: 50px;
  width: 100%;
  text-align: center;
  color: #000000;
}

.message-input {
  grid-area: 2 / 1 / 3 / span 3;
  margin: 5px 10px 10px 10px;
  padding: 5px;
  background-color: #efede8;
  border: 1px solid #707070;
  height: 250px;
}

.questions-forms textarea.text-input {
  width: 413px;
}

.checkbox-block {
  display: grid;
  grid-template-columns: auto auto;
  display: flex;
  margin: 1rem 0;
}

.checkbox-title {
  font-size: 13px;
  color: #746969;
  margin-left: 5px;
}

.contact-info {
  margin-top: 10%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-info-block {
  background-color: #e4dfd9;
  width: 90%;
  justify-self: center;
  padding: 20px 0 20px 40px;
}

.contact-info-title {
  font-family: "D-din-bold";
  font-size: 35px;
  width: 100%;
  color: #000000;
}

.contact-info-subtitle {
  font-family: "Libre_Baskerville-Regular";
  font-size: 15px;
  color: #746969;
}

.follow-us-title {
  padding-top: 65px;
  font-family: "D-din-bold";
  font-size: 35px;
  width: 100%;
  color: #000000;
}

.follow-us-icons {
  display: flex;
}

.follow-us-icons a {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-top: 20px;
  font-size: 20px;
}

.follow-us-icons a:hover {
  text-decoration: none;
}

.follow-us-subtitle {
  color: #746969;
  padding: 0 40px 0 10px;
}

.button {
  margin-top: 0;
}

@media (max-width: 1380px) {
  .subtitle {
    padding-left: 20%;
    padding-right: 20%;
  }
}

@media (max-width: 1150px) {
  .celebrate-title {
    width: 100%;
  }

  .contact-info {
    margin-top: 5%;
  }

  .question-block {
    grid-template-columns: 1fr;
  }

  .subtitle {
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media (max-width: 939px) {
  .contacts-forms {
    margin: 0 20px;
  }
  .subtitle {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width: 630px) {
  .title {
    font-size: 40pt;
  }
  
  .questions-forms {
    grid-template-columns: 1fr;
  }
  
  .forms {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .text-input {
    grid-area: 7;
  }
  
  .message-input {
    grid-area: 3;
  }
  
  .checkbox-title {
    font-size: 14px;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
  }
  
  .contact-info-block {
    margin-bottom: 20px;
  }
  
  .follow-us-icons {
    display: block;
  }
  
  .question-block {
    padding: 20px 20px;
  }
  
  .checkbox-title {
    font-size: 10px;
  }

  .questions-forms textarea.text-input {
    width: 400px;
  }
}

@media (max-width: 430px) {
  .questions-forms textarea.text-input {
    width: 350px;
  }

}
@media (max-width: 355px) {
  .questions-forms textarea.text-input {
    width: 300px;
  }
}

@media (max-width: 342px) {
  .questions-forms textarea.text-input {
    width: auto;
    display: grid;
    grid-area: 7;
  }
}