@font-face {font-family:Gilroy-Bold;src:url(../fonts/Gilroy-Bold.ttf);}
@font-face {font-family:Gilroy-Regular;src:url(../fonts/Gilroy-Regular.ttf);}


#contactModal .modal-dialog{width: 600px;
    min-width: 600px;}
#contactModal .modal-dialog .modal-header{border-bottom:none;}
.modal-content{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.9), 0 6px 20px 0 rgba(0, 0, 0, 0.19);     flex-direction: row;}
.left-container-outer{width:50px;height:580px;background:red;position:relative;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1d574+0,dcb760+31,fedf7f+66,d7a139+100 */
background: linear-gradient(to right,  #f1d574 0%,#dcb760 31%,#fedf7f 66%,#d7a139 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.left-container{position:absolute; width:280px;height:300px; background:#000;border-radius:0px 25px 25px 0px;padding:20px;color:#fff;top:150px;left:0px;}
.form-left{float:left;width:10%;}

.form-left h4{
    letter-spacing: 1px;
    padding-bottom: 15px;font-family:Gilroy-Bold !important;
}

.info_single{
    margin: 10px 0px;
}
.info_single i{
    margin-right: 15px;
}
.info_single span{
    font-size: 18px;
    letter-spacing: 1px;font-family:Gilroy-Regular !important;
}


.rightform-container{width: 87%; margin-left: 3%;}
.mainForm{width:94%;text-align: center;}
.mainForm p{font-family:Gilroy-Regular;font-size:18px;line-height:25px;text-align:center;}
.mainForm .text{
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1d574+0,dcb760+31,fedf7f+66,d7a139+100 */
background: linear-gradient(to right,  #f1d574 0%,#dcb760 31%,#fedf7f 66%,#d7a139 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
;display:inline-block;text-align:center;padding:5px 28px;border-radius:30px;margin:0px 0px 10px 0px;line-height: 40px;
   

}
.mainForm .text:hover{background:#000;color:#fff;}
.mainForm form{
  padding: 30px 0 0 0;
}
.mainForm form .form-row{
  display: flex;
  margin: 32px 0;
}
form .form-row .input-data{
  width: 100%;
  height: 40px;
  margin: 0 20px;
  position: relative;text-align:left;
}
form .form-row .textarea{
  height: 70px;text-align:left;
}
.input-data input,
.textarea textarea{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid rgba(0,0,0, 0.12);text-align:left;
}
.input-data input:focus ~ label, .textarea textarea:focus ~ label,
.input-data input:valid ~ label, .textarea textarea:valid ~ label{
  transform: translateY(-20px);
  font-size: 18px;
    color: #000;
}
.textarea textarea{
  resize: none;
  padding-top: 10px;
}
.input-data label{
  position: absolute;
  pointer-events: none;
  bottom: 10px;
  font-size:18px;
  transition: all 0.3s ease;text-align:left;
}
.textarea label{
  width: 100%;
  bottom: 40px;
  background: #fff;text-align:left;
}
.input-data .underline{
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.input-data .underline:before{
  position: absolute;
  content: "";
  height: 2px;
  width: 100%;
  background: #cfad52;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:valid ~ .underline:before{
  transform: scale(1);
}
.submit-btn .input-data{
  overflow: hidden;
  height: 45px!important;
  width: 25%!important;text-align: center;
    display: inline-block;
}
.submit-btn .input-data .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
  transition: all 0.4s;
}
.form-row.submit-btn{margin:0px 0px !important;text-align: center !important;display: inline-block !important;width: 100%;}
.submit-btn .input-data:hover input{background:#000 !important; color:#fff;}
.submit-btn .input-data:hover .inner{
  left: 0;
}
.submit-btn .input-data input{
  background: none;
  border: none;
  color: #000;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;text-align: center;
  z-index: 2;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1d574+0,dcb760+31,fedf7f+66,d7a139+100 */
background: linear-gradient(to right,  #f1d574 0%,#dcb760 31%,#fedf7f 66%,#d7a139 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@media (max-width: 700px) {
.left-container-outer {width: 25px;height: 750px !important;}
#contactModal .modal-dialog{width:90%;max-width:90%;min-width: 90%;}
.container .text{font-size: 30px;}
.container form{padding: 10px 0 0 0;}
.container form .form-row{display: block;}
 form .form-row .input-data{margin: 15px 0!important;}
.submit-btn .input-data{width: 40%!important;}
.mainForm form .form-row {display: flex;margin: 0px 0;flex-wrap: wrap;}
}

@media (max-width: 575px) {
#contactModal .modal-dialog {width: 90%;max-width: 90%;min-width: 90%;margin: 20px auto;}
.mainForm .text{font-size: 25px;line-height: 25px;}
.mainForm p {font-size: 16px;line-height: 20px;}
.input-data label, .input-data input, .textarea textarea{font-size:15px;}
.input-data input:focus ~ label, .textarea textarea:focus ~ label, .input-data input:valid ~ label, .textarea textarea:valid ~ label {
transform: translateY(-20px);font-size: 15px;}
form .form-row .input-data {margin: 10px 0 !important;}
.submit-btn .input-data {height: 35px !important;}

.left-container-outer {height: 660px !important;}

}