.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}
.contact{
    background-color: white; align-content: space-between;display: flex; float: center;
    /* padding-top: 3vw;padding-bottom: 6vw; */
    padding-top: 30px;padding-bottom: 60px;
    padding-bottom: 0px;
    padding-top: 0px;

}

.contact .input_box{
    /* width: 55%;width: 686px;width: 52vw;width: 94vw; */
/* height: 609px;height: 43vw; */
border-radius: 5px;      
background: hwb(0 99% 1%);align-content: flex-start;justify-content: left;align-content: center;
display: grid;
/* padding-left: 50px; */
padding-top: 10px;
margin-left:70px;

/* width: 1168px; */
/* width: 100%; */
height: 534px;
}

/* .input */
.contact ::placeholder{
    color: #ADADAD;
    font-weight: 500;
}

.contact ::placeholder {
    color: #ADADAD;
    font-weight: 500;
    opacity: 1; /* Firefox */
  }
  
  .contact ::-ms-input-placeholder { /* Edge 12 -18 */
    color: #ADADAD;
    font-weight: 500;
  }
  
  


  .contact .btn-send{
    display: flex;
    width: 117px;
    height: 44px;
    
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* font-size: 1.2vw; */
    border-radius:5px;      
    margin-top: 30px;
    background: #02C652;
    font-weight: bold;
    border-color: transparent;
    font-size: 16px;

    
  }

  .contact .btn-send:hover{
    background-color: #D1FDF5;
    color: black;
    transition: ease-out .8s;
  }

  .contact .textarea{
    width: 505px;
height: 187px;
flex-shrink: 0;
border-radius: 5px;      
background: #F0F0F0;
font-size: 20px;
font-style: normal;
/* font-size: 1.4vw;width: 37.3vw;height: 13vw; */
font-weight: 300;color:#ADADAD;color: black;
line-height: normal;

margin-top:20px;


  }

  .contact .help{
    /* width: 505px;
height: 44px; */
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
flex-shrink: 0;
border-radius: 5px;      
color:#ADADAD;
/* font-size: 1.4vw;width: 37.3vw;height: 3.7vw; */
background: #F0F0F0;
color: black;

width: 505px;
height: 44px;
  }


.contact .email{
    /* width: 281px;
height: 44px; */
flex-shrink: 0;
border-radius: 5px;      
color:#ADADAD;
background: #F0F0F0;margin-left: 0px;margin-bottom: 10px;

font-size: 20px;
/* font-size: 1.4vw;width: 20vw;height: 3.7vw; */
font-style: normal;
font-weight: 300;
line-height: normal;color: black;

width: 281px;
height: 44px;
margin-right: 0;
width: 55%;

}

.contact .name{
    background: #F0F0F0;
/* width: 181px;
height: 44px; */
border-radius: 5px;      
color:#ADADAD;
font-size: 20px;
font-style: normal;
font-weight: 300;
/* font-size: 1.4vw;width: 15vw;height: 3.7vw; */
 /* margin-right: 40px; */
line-height: normal;color: black;
margin-left: 2px;
 margin-right: 20px;

width: 181px;
height: 44px;
width: 45%;
/* padding-left: 0; */
}

.contact .row-name{
  width: 505px;margin-bottom: 10px;display: flex;
}


.contact h2{
    color: #02C652;

font-family: 'NexaBold';
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;margin-bottom: 20px;
}

.contact .box-img{
    width: 213.418px;position: absolute;
height: 517px;
height: 500px;
border-radius:5px;      
margin-top: 20px;
right:140px;

background: #02C652;order: 1;
}

.image{
    
  margin-top:40px;
  
order:2;
margin-left: 10px;
/* right: 6vw; */
right: 153px;

flex-shrink: 0;

border-radius:5px;      
background-size: cover;
background-position: center top;
object-fit: fill;
background-repeat: no-repeat;position: absolute; object-fit: cover;
transition: background-image 1s ease-in-out;
width: 440.373px;
height: 480.071px;
height: 460.071px;


  }

  @media(max-width:1166px){
    .contact .box-img{
  right:40px;

  }
  
  .image{
    right: 53px;
    width: 340.373px;


  }
  
  }

      @media(max-width:1040px){
        /* 800 */
        .contact .box-img{
          width: 0;
          height: 0;
          background-color: #02C652;
    
        }
    
        .image{
          width: 0;
          height: 0;
        }
      }

      @media(max-width:763px){
        .contact h2{
          font-size: 40px;
        }
        .contact .textarea{
          width: 405px;
          font-size: 16px;

        }
        .contact .email{
          font-size: 16px;
        }
        .contact .name{
          font-size: 16px;
        }
        .contact .help{
          width: 405px;
          font-size: 16px;
        }
        .contact .row-name{
          width: 405px;
          font-size: 16px;
        }
      }

      @media(max-width:670px){
        .contact h2{
          font-size: 30px;
        }
        .contact .textarea{
          width: 305px;
          font-size: 14px;

        }
        .contact .email{
          font-size: 14px;
        }
        .contact .name{
          font-size: 14px;
        }
        .contact .help{
          width: 305px;
          font-size: 14px;
        }
        .contact .row-name{
          width: 305px;
          font-size: 14px;
        }
        
  .contact .btn-send{
  
    width: 100px;
    height: 34px;
    
    font-size: 14px;

    
  } 
      }

      @media(max-width:541px){
        .contact .input_box{
  
      margin-left:50px;
        }
        
      }

      @media(max-width:481px){
        .contact .input_box{
  
      margin-left:40px;
        }
        
      }

      @media(max-width:455px){
        .contact .input_box{
  
      margin-left:30px;
        }
        
      }

      @media(max-width:443px){
        .contact .input_box{
  
      margin-left:20px;
        }
        
      }

      @media(max-width:420px){
        .contact h2{
          font-size: 20px;
        }
        .contact .textarea{
          width: 250px;
          font-size: 11px;

        }
        .contact .email{
          font-size: 11px;
        }
        .contact .name{
          font-size: 11px;
        }
        .contact .help{
          width: 250px;
          font-size: 11px;
        }
        .contact .row-name{
          width: 250px;
          font-size: 11px;
        }