@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
*{
    font-family: 'Ubuntu';
}
.contact-form {
  display: flex;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 2px solid #FFFFFF;
  box-shadow: 0px 0px 150px rgba(159, 0, 6, 0.08);
  backdrop-filter: blur(10px);
  flex-direction: column;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  padding: 50px 50px 30px 50px;
}

.show-more {
  cursor: pointer;
  margin-bottom: 10px;
}

.default-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.default-fields .field-container {
  flex-basis: 18%;
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.default-fields label {
  margin-bottom: 5px;
}

.contact-form input::placeholder,
.contact-form option,
.contact-form textarea::placeholder {
  padding-left: 10px;
  font-family: 'Ubuntu', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #00000050;
  line-height: 21px;
}
select{
  padding-left: 10px;
  font-family: 'Ubuntu', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #00000050;
  line-height: 21px;
}
.field-container input,
.contact-form select {

  background: #FFFFFF;
  border: 1px solid #CED7E1;
  border-radius: 500px;
}

.default-fields input[type="text"],
.default-fields input[type="tel"],
.default-fields input[type="email"] {
  width: 100%;
  padding: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #CED7E1;
  border-radius: 20px;

}

.extra-fields textarea {
  width: 100%;
  height: 300px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #CED7E1;
  border-radius: 20px;
}

.default-fields button[type="submit"] {
  background-color: transparent;
  color: #9F0006;
  border: 2px solid #9F0006;
  border-radius: 193.985px;
  cursor: pointer;
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-size: 15px;

}

.default-fields button[type="submit"]:hover {
  color: #fff;
  background-color: #9F0006;
}

.extra-fields {
  display: none;
  gap: 20px;
margin-top: 30px;
}

.extra-fields .field-container {
  display: flex;
  flex-direction: column;
}

.textarea {
  width: 60%;
}

.drop {
  width: 40%;
  background: rgba(255, 255, 255, 0.9);
border: 1px solid #CED7E1;
border-radius: 20px;
padding: 25px;
}

.extra-fields input[type="file"] {
  border: 2px dashed #1B323E;
  
  text-align: center;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
}

.extra-fields input[type="file"]:hover {
  border-color: #007bff;
}

.contact-form.collapsed .default-fields {
  display: none;
}

.contact-form.collapsed .show-more {
  display: block;
}

.hide-extra {
  display: none;
}
.drop-message{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.drop-message img{
  max-width: 75px;
}
#drop-zone {
  display: flex;
  position: relative;
  height: 250px;
  padding: 25px;
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 0 auto;
}

#drop-zone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #1B323E;
  border-radius: 20px;
}
#drop-zone::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px dashed #1B323E;
  border-radius: 20px;
  pointer-events: none;
}
#drop-zone.highlight {
  background-color: #c7e5ff;
}

.buttons {
  padding-top: 50px;
  display: flex;
  justify-content: space-between;

}

.buttons button {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  color: #1B323E;
  border: none !important;
}

.buttons button:hover {
  background: none !important;
}

.contact-form h2 {
  font-weight: 700;
font-size: 32px;
line-height: 46px;
}
.contact-form p{
  font-weight: 400;
font-size: 18px;
margin-bottom: 40px;
}

@media (min-width: 320px) and (max-width: 767px) {
  
  .default-fields .field-container {
    flex-basis: 100%;
    margin-right: 0;
  }

  .textarea {
    width: 100%;
    height: 80px;
  }

  .drop {
    width: 100%;
  }
.drop-message img{
  max-width: 20%;
}
.drop-message p{
  font-size: 16px;
}
  #drop-zone {
    height: 150px;
  }
  .extra-fields{
flex-wrap: wrap;
  }
  .contact-form {

    padding: 15px;
  }
  .contact-form p{
    text-align: center;
  }
}