.header-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 15px;
  box-sizing: border-box;
}

.contact-form-container {
  display: flex;
  background: white;
  border: 10px solid var(--gold);
  height: auto;
  min-height: calc(100vh - 30px);
  overflow: hidden;
  padding-top:7em;
}

.home {
  position:absolute;
  left:5%;
  top:5%;
  width:2em;
  height:2em;
}

.contact-form {
  flex: 1;
  padding: 2em;
  overflow-y: auto;
}

.contact-form::-webkit-scrollbar {
  display: none;
}

.contact-image {
  flex: 0 0 20%;
  overflow: hidden;
}

.contact-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-fields {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 0.5em;
  font-weight: bold;
}

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  margin-bottom: 1em;
  padding: 0.5em;
  border: 1px solid var(--gold);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--white);
  border: 1px solid var(--gold);
  transition: background-color 0.2s ease-in-out;
  margin: 0 1em 0 0;
  flex-shrink: 0;
}

input[type="checkbox"]:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.newsletter-info {
  margin-bottom: 1em;
}

.legal-text {
  font-size: 0.8em;
  color: grey;
  margin-top: 1em;
}

.form-button {
  background: var(--gold);
  border-radius: 96% 4% 96% 4% / 0% 100% 0% 100%;
  border: none;
  color: white;
  font-size: 1em;
  margin: 1em auto;
  display: block;
  font-family: 'Blinds Audience', sans-serif;
  cursor: pointer;
}

.form-button:hover{
  background:var(--white);
  color:var(--gold);
  border:1px solid var(--gold);
}

#calendly-container {
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.calendly-inline-widget {
  width: 100% !important;
  height: 100% !important;
  min-width: 320px;
}

@media screen and (max-width: 1024px) {
  .contact-form-container {
    flex-direction: column;
  }
  
  .contact-form {
    order: 1;
  }
  
  .contact-image {
    order: 0;
    flex: none;
    height: 200px;
  }
  
  #calendly-container {
    order: 2;
    height: 500px;
  }
}

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

  .home {
    position:absolute;
    left:10%;
    top:5%;
  }

  .contact-form-container {
    border-width: 5px;
  }
  
  .contact-form {
    padding: 1.5em;
  }
  
  .contact-image {
    height: 150px;
  }
  
  .form-button {
    font-size: 1.5em;
    height: 2.5em;
    width: 12em;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 1.2em;
    padding: 0.8em;
    width: 100%;
    box-sizing: border-box;
  }
  
  .checkbox-container label {
    font-size: 1.2em;
  }
  
  .newsletter-info,
  .legal-text {
    font-size: 1em;
  }
  
  #calendly-container {
    height: 450px;
  }
}