@import url("https://fonts.googleapis.com/css?family=Rajdhani:500,700&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
} 
body {
  -webkit-box-align: center;
          align-items: center;
  background: #614385;   
  background: -webkit-linear-gradient(to right, #516395, #614385);
  background: linear-gradient(to right, #516395, #614385); 
  display: -webkit-box;
  display: flex;
  font-family: "Rajdhani", sans-serif;
  height: 100vh;
  -webkit-box-pack: center;
          justify-content: center;
} 
.contact-wrapper{
  background:#fff;
  box-shadow: 3px 3px 2px rgba(255, 253, 253, 0.15);
  border-radius: .75em;
  padding:4em 2em;
  width:60em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
}
.left_side,
.right_side{
  width:50%;
  padding:0 3em;
  display: block;
  justify-content: center;
  align-items:center;
  text-align: center;
}
.left_side img{
    position:relative;
    border-radius: .5em;
    color:#fff;
    height:80%;
    transition:all 300ms ease-in-out;
    width:80%;
    top: 10px;
    bottom: 10px;
    transform: rotateY(0deg);
    animation: animationLogo 2s linear infinite;
}

@keyframes animationLogo {
    50%{
        bottom:30px;
        top:-10px;
    }
}

.right_side > h2{
  color:#3e3f5e;
  font-size: 1.75em;
  text-align: center;
}
form{
  margin:2em 0;
}
form > .form-row{
  display:-webkit-box;
  display:flex;
  margin:.75em 0;
  position:relative;
}
form > .form-row > span{
  background:#fff;
  color:#adafca;
  display:inline-block;
  font-weight: 400;
  left:1em;
  padding:0 .5em;
  position:absolute;
  pointer-events:none;
  -webkit-transform:translateY(-50%); 
  transform:translateY(-50%); 
  top:50%;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
form > .form-row > input,
form > .form-row > button{
  border-radius: .5em;
  padding:1em .5em;
  width:100%;
  font-family: inherit;
}
form > .form-row > input{
  font-weight: bold;
  -webkit-transition:100ms ease all;
  transition:100ms ease all;
  width:100%;
}
form > .form-row > input[type=text],
form > .form-row > input[type=password]{
  border:.075em solid #ddd;
}
form > .form-row > input:valid + span{
  top:0;
  font-size: .90rem;
}
form > .form-row > input:focus + span{
  top:0;
  color: #001F72;
  font-weight: 600;
}
form > .form-row > input:required{
  box-shadow: none;
}
form > .form-row > input:focus{
  border-color:#001F72;
  outline:none;
}
form > .form-row > input:focus:invalid{
  box-shadow: none;
  top:50%;
}
form > .form-row > input:focus:valid{
  top:0;
}
form > .form-row > button{
  background-color:#001F72;
  border:.10em solid #7b5dfa;
  color:#fff;
  cursor: pointer;
  font-weight: bold;
  transition:all 300ms ease;
}
form > .form-row > button:focus{
  border:0.1em solid #533cf8;
  outline:none;
}
form> .form-row > button:hover{
  background:#6744f9;
}
.socials-wrapper > h2{
  background:#fff;
  color:#3e3f5e;
  font-size: 1rem;
  position: relative;
  text-align: center;
  z-index: 10;
}
.socials-wrapper > h2:before,
.socials-wrapper > h2:after{
  background:#d3d3e2;
  content:'';
  display: block;
  height:.10em;
  position: absolute;
  top:50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width:17.5%;
}
.socials-wrapper > h2:before{
  left:0;
}
.socials-wrapper > h2:after{
  right:0;
}
.socials-wrapper > ul{
  display:-webkit-box;
  display:flex;
  list-style: none;
  -webkit-box-pack: center;
  justify-content:center;
  padding:0;
}
.socials-wrapper > ul > li{
  margin:.5em;
}
.socials-wrapper > ul > li > a{
  -webkit-box-align:center;
  align-items:center;
  border-radius: .5em;
  color:#fff;
  display:-webkit-box;
  height:2em;
  -webkit-box-pack: center;
  justify-content:center;
  text-align: center;
  text-decoration: none;
  -webkkit-transition:all 300ms ease;
  transition:all 300ms ease;
  width:2em;
}
.socials-wrapper > ul > li > a.facebook{
  background:#3763d2;
}
.socials-wrapper > ul > li > a.twitter{
  background:#1abcff;
}
.socials-wrapper > ul > li > a.instagram{
  background:#ff00aa;
}
.socials-wrapper > ul > li > a.youtube{
  background:#fd434f;
}
.socials-wrapper > ul > li > a:hover{
  -webkit-transform:translateY(-0.50em);
   transform:translateY(-0.50em);
}

@media (max-width:992px){ 
  .socials-wrapper > h2:after,
  .socials-wrapper > h2:before{
    width:10.5%
  }
}
@media (max-width:767px){
  .contact-wrapper{
    flex-direction: column;
  }
  .left_side,
  .right_side{
    width:100%;
    padding:0 0.2em;
  }
  .socials-wrapper > h2:after,
  .socials-wrapper > h2:before{
    width:10.5%
  }
}