@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); 
*{ 
 margin: 0; 
 padding: 0; 
 outline: none; 
 box-sizing: border-box; 
 font-family: 'Poppins', sans-serif; 
} 
body{ 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 background : url("contact.wallpaperflare.com_wallpaper.jpg") no-repeat center ; 
 background-size: cover; 
 min-height: 120vh; 
 padding: 30px; 
 cursor: url(normal_select.cur), auto; 
 
} 
#map{ 
 position: absolute; 
 margin-left:900px ; 
 margin-top:-400px; 
 width:400px; 
 height:350px; 
 border: 21px; 
 transition:transform(0.2s) ; 
 cursor: url(link_grab.cur), auto; 
} 
#map:hover{ 
 color: #26edf0; 
 background-color: aqua; 
transform:scale(1.5); 
cursor: url(link_grab.cur), auto; 
} 
.container{ 
 max-width: 800px; 
 margin-bottom: 400px; 
 margin-right: 700px; 
 background-color: rgb(42, 200, 231, 0.2); 
 width: 800px; 
 padding: 25px 40px 10px 40px; 
 box-shadow: 0px 0px 10px rgba(11, 179, 222, 0.1); 
} 
.container .text{ 
 text-align: center; 
 font-size: 45px; 
 font-weight: 600; 
 background: -webkit-linear-gradient(right, #49cbfa, #c7cbda, #3a0897, #10e7aa); 
  -webkit-background-clip : text; 
 -webkit-text-fill-color: transparent; 
} 
.container form{ 
 padding: 30px 0px 0px 0px; 
} 
.container form .form-row{ 
 display: flex; 
 margin: 32px 0; 
} 
form .form-row .input-data{ 
 width: 100%; 
 height: 40px; 
 margin: 0 20px; 
 position: relative; 
 cursor: url(text_select.cur), pointer;
} 
form .form-row .textarea{ 
 height: 70px; 
 
} 
.input-data input, 
.textarea textarea{ 
 display: block; 
 width: 100%; 
 height: 100%; 
 border: none; 
 font-size: 17px; 
 border-bottom: 2px solid rgba(13, 77, 84, 0.12); 
} 
.input-data input:focus ~ label, .textarea textarea:focus ~ label, 
.input-data input:valid ~ label, .textarea textarea:valid ~ label{ 
 transform: translateY(-20px); 
 font-size: 24px; 
 color: #3498db; 
} 
.textarea textarea{ 
 resize: none; 
 padding-top: 10px; 
 cursor: url(text_select.cur), pointer; 
} 
.input-data label{ 
 position: absolute; 
 pointer-events: none; 
 bottom: 10px; 
 font-size: 26px; 
 transition: all 0.3s ease; 
} 
.textarea label{ 
 width: 100%; 
 bottom: 40px; 
 background: #fff; 
} 
.input-data .underline{ 
 position: absolute; 
 bottom: 0; 
 height: 3px; 
 width: 100%; 
 cursor: url(text_select.cur), pointer; 
} 
.input-data .underline:before{ 
 position: absolute; 
 content: ""; 
 height: 5px; 
 width: 100%; 
 background: #3498db; 
 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; 
 
} 
.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; 
 
} 
.submit-btn .input-data:hover .inner{ 
 left: 0; 
} 
.submit-btn .input-data input{ 
 background: none; 
 border: none; 
 color: #fff; 
 font-size: 17px; 
 font-weight: 500; 
 text-transform: uppercase; 
 letter-spacing: 2px; 
 cursor: pointer; 
 position: relative; 
 z-index: 2; 
 cursor: url(link_select.cur), pointer; 
} 
@media (max-width: 700px) { 
 .container .text{ 
 font-size: 30px; 
 } 
 .container form{ 
 padding: 10px 0 0 0; 
 } 
 .container form .form-row{ 
 display: block; 
 } 
 form .form-row .input-data{ 
 margin: 35px 0!important; 
 } 
 .submit-btn .input-data{ 
 width: 40%!important; 
 } 
}