.contact-form{
  position: relative;
  padding: 75px 30px;
  background-color: #C9DA76;
}

.contact-form:has(.template-2){
  background-color: var(--biond-background-secondary);
}

.contact-form h2{
  max-width: 740px;
  letter-spacing: 0;
  margin: 0 auto;
  line-height: 0.625;
}

.contact-form .description{
  max-width: 1080px;
  margin: 0 auto;
  font-size: 20px;
}

.contact-form .content-wrapper{
  padding: 30px;
  position: relative;
  z-index: 1;
  border-radius: 20px; 
}

.contact-form .content-wrapper.template-2{
  padding: 0;
}

.contact-form .content{
  margin: 54px auto 0;
  max-width: 1080px;
}

.contact-form .content-wrapper::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  opacity: 0.57;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 20px; 
}

.contact-form .content-wrapper.template-2::before{
  content: none;
}

.contact-form .field::before,
.contact-form .field::after{
  content: none;
} 

.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{
  opacity: 1;
  color: #000;
}

.contact-form .field{
  margin-bottom: 14px;
}

body .contact-form .field input{
  border-radius: 53px;
  font-size: 20px;
  color: #000;
  padding: 13.5px 20px 14px;
  box-shadow: 2px 2px 0 #000;
  line-height: 1.5;
  height: 54px;
}

body .contact-form .field textarea{
  box-shadow: 2px 2px 0 #000;
  border-radius: 30px;
  padding: 13.5px 20px 14px;
  font-size: 20px;
  color: #000;
  min-height: 263px;
  line-height: 1.5;
}

.contact-form .bd-button{
  border: none;
  cursor: pointer;
  min-width: unset;
  width: 100%;
}

.contact-form .contact__button {
  margin-top: 28px;
}

.contact-form .content{
  display: flex;
  gap: 30px;
  align-items: center;
  flex-direction: column-reverse;
}

.contact-form .content .info{
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: content;
}

.contact-form .content .info h3,
.contact-form .content .info .name{
  color: #000;
  font-weight: 700;
  line-height: 1.2;
  font-size: 25px;
  margin-top: 0;
}

.contact-form .content .info h3{
  margin-bottom: 40px;
}

.contact-form .content .info .name{
  margin-bottom: 17px;
}

.contact-form .content .info .image-wrap{
  width: 226px;
  height: 226px;
  margin-bottom: 21px;
}

.contact-form .content .info .image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 100%;
  border: 1px solid #707070;
}

.contact-form .content .info .text{
  font-size: 18px;
  margin-bottom: 20px;
}

.contact-form .content .info .icon-info{
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 20px;
}

.contact-form .content .info .icon-info::before{
  content: "";
  background-color: #DD403E;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

.contact-form .content .info .icon-info.phone::before{
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.648' height='25.648' viewBox='0 0 25.648 25.648'%3E%3Cg id='group_390' data-name='group 390' transform='translate(0 0)'%3E%3Cg id='group_389' data-name='group 389' transform='translate(0 0)'%3E%3Cpath id='path_132' data-name='path 132' d='M21.89,3.754a12.824,12.824,0,1,0,3.757,9.066A12.824,12.824,0,0,0,21.89,3.754ZM19.421,17.863l0,0v0l-.65.645a3.42,3.42,0,0,1-3.227.923,11.363,11.363,0,0,1-3.3-1.479,15.247,15.247,0,0,1-2.6-2.1,15.364,15.364,0,0,1-1.945-2.36,11.968,11.968,0,0,1-1.462-2.958,3.42,3.42,0,0,1,.855-3.492l.761-.761a.543.543,0,0,1,.768,0l0,0,2.4,2.4a.543.543,0,0,1,0,.768l0,0L9.609,10.863a1.15,1.15,0,0,0-.12,1.5,16.5,16.5,0,0,0,1.688,1.971A16.4,16.4,0,0,0,13.4,16.2a1.158,1.158,0,0,0,1.479-.128l1.364-1.385a.543.543,0,0,1,.768,0l0,0L19.419,17.1A.543.543,0,0,1,19.421,17.863Z' transform='translate(0 0)' fill='%23dd403e'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

.contact-form .content .info .icon-info.email::before{
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.646' height='25.646' viewBox='0 0 25.646 25.646'%3E%3Cpath id='path_133' data-name='path133' d='M12.823,0A12.823,12.823,0,1,1,0,12.823,12.823,12.823,0,0,1,12.823,0Zm8.14,17.794V8.264L16.2,13.029ZM5.7,17.988H19.945l-4.353-4.353-1.659,1.659a.429.429,0,0,1-.3.125H12.017a.428.428,0,0,1-.3-.125l-1.659-1.659L5.7,17.988ZM4.683,8.264v9.531l4.765-4.765Zm15.674-.606H5.29l6.9,6.9h1.258Z' fill='%23dd403e' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
}

.contact-form .content .contact{
  width: 100%;
}

@media screen and (min-width: 1200px) {
  .contact-form{
    position: relative;
    padding: 75px 135px;
  }
}

@media screen and (min-width: 991px) {
  .contact-form{
    padding: 75px 75px;
  }
  
  .contact-form .content{
    flex-direction: row;
    align-items: flex-start;
    gap: 90px;
  }

  .contact-form .content-wrapper{
    padding: 52px;
  }
}

@media screen and (min-width: 768px) {
  .contact-form .bd-button{
    min-width: 355px;
    width: max-content;
  }
}