/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf'); 
}

/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
    margin: 0px; 
    padding: 0px; 
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Poppins-Regular, sans-serif;
}

/*---------------------------------------------*/
a {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: text-decoration 0.4s;
    -webkit-transition: text-decoration 0.4s;
    -o-transition: text-decoration 0.4s;
    -moz-transition: text-decoration 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
    margin: 0px;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}


/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
  outline: none;
  border: none;
  resize: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input::-webkit-input-placeholder { color: #999999; }
input:-moz-placeholder { color: #999999; }
input::-moz-placeholder { color: #999999; }
input:-ms-input-placeholder { color: #999999; }

textarea::-webkit-input-placeholder { color: #999999; }
textarea:-moz-placeholder { color: #999999; }
textarea::-moz-placeholder { color: #999999; }
textarea:-ms-input-placeholder { color: #999999; }

/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}


/*//////////////////////////////////////////////////////////////////
[ Contact 2 ]*/
.input-ph {
  position: absolute;
  left: 15px;
  top: 8px;
  color: #6E6E6E;   
  transition: 0.4s; 
  z-index: 0;     
}
.effect-8:focus ~ .input-ph {
  left: 0px;
  top: -22px;
  color: #278096;
}

label {
  display: none;       
}

.bg-contact2 {
  width: 100%;  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.container-contact2 {
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: -webkit-linear-gradient(45deg, #1687a6, #6dd5ed);
  background: -o-linear-gradient(45deg, #1687a6, #6dd5ed);
  background: -moz-linear-gradient(45deg, #1687a6, #6dd5ed);
  background: linear-gradient(45deg, #1687a6, #6dd5ed);
}

.wrap-contact2 {
  width: 600px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 72px 55px 90px 55px;
}

/*------------------------------------------------------------------
[  ]*/

.contact2-form {
  width: 100%;
}

.contact2-form-title {
  display: block;
  font-family: Poppins-Bold;
  font-size: 39px;
  color: #30a0bc;
  line-height: 1.2;
  text-align: center;
  padding-bottom: 90px;
}

/*------------------------------------------------------------------
[  ]*/

.wrap-input2 {
  width: 100%;
  position: relative;
  /* border-bottom: 2px solid #adadad; */
  margin-bottom: 37px;
}

textarea.input2 {
    min-height: 125px;
    padding-top: 7px;
    padding-bottom: 7px;
    position: relative;
    top: 0px;
}

textarea.input2 + .focus-input2::after {
  top: 16px;
  left: 0;
}

textarea.input2:focus {
    top: 0px;
}

/*= input focus effects css
=========================== */
:focus{outline: none;}

input[type="text"], textarea {
    font: 15px/24px "Lato", Arial, sans-serif; 
    color: #111; 
    width: 100%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    background: transparent; }


.textarea-in {
  height: 125px;              
}



.effect-8{border: 1px solid #ccc; padding: 7px 14px 9px; transition: background-color 0.4s;}

.effect-8 ~ .focus-border:before,
.effect-8 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #30a0bc; transition: 0.3s;}
.effect-8 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.effect-8 ~ .focus-border i:before,
.effect-8 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #30a0bc; transition: 0.4s;}
.effect-8 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.effect-8:focus ~ .focus-border:before,
.effect-8:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
.effect-8:focus ~ .focus-border i:before,
.effect-8:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}

/*------------------------------------------------------------------
[ Button ]*/
.container-contact2-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.wrap-contact2-form-btn {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 2px;
  width: auto;
  overflow: hidden;
  margin: 0 auto;
}

.contact2-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: -webkit-linear-gradient(-135deg,#2193b0, #6dd5ed, #2193b0, #6dd5ed);
  background: -o-linear-gradient(-135deg, #2193b0, #6dd5ed, #2193b0, #6dd5ed);
  background: -moz-linear-gradient(-135deg, #2193b0, #6dd5ed, #2193b0, #6dd5ed);
  background: linear-gradient(-135deg, #2193b0, #6dd5ed, #2193b0, #6dd5ed);
  top: 0;
  left: -100%;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.contact2-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 244px;
  height: 50px;

 

  font-family: Poppins-Medium;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  

}

.wrap-contact2-form-btn:hover .contact2-form-bgbtn {
  left: 0;
}

.button_cont {
  text-align: center;            
}

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 576px) {
  .wrap-contact2 {
    padding: 72px 15px 65px 15px;
  }
}




.example_f {
   border-radius: 4px;
   background: linear-gradient(to right, #67b26b, #4ca2cb)!important;
   border: none;
   color: #FFFFFF;
   text-align: center;
   text-transform: uppercase;
   font-size: 18px;
   padding: 10px 20px;
   width: 200px;
   transition: padding-right 0.4s;
   cursor: pointer;
   margin: 5px;
 }
 .example_f span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: padding 0.4s;
 }
 .example_f span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 }
 .example_f:hover span {
   padding-right: 25px;
 }
 .example_f:hover span:after {
   opacity: 1;
   right: 0;
 }

 /* ===============Label effects================ */

.has-content.effect-8 ~ .input-ph{transition: position 0.3s; height: 100%; top: -22px; left:0px;}