.contact{
   display: flex;
   justify-content: center;
   margin-top: 20px;
   gap: 20px;
}
.social-media{
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   width: 40%;
   height: fit-content;
}
.sosmed-container{
   opacity: 0;
   width: 100%;
}
.sosmed-icon{
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   margin: 10px;
   background-color: #3f3f3f;
   color: #fff;
}
.sosmed-icon .icon{
   background-color: #5a5a5a;
   display: flex;
   justify-content: center;
   align-items: center;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   padding: 25px;
   width: 10%;
}
.sosmed-icon .title{
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 90%;
   padding: 25px;
   font-size: 20px;
}
.sosmed-icon .title p:last-child{
   font-size: 16px;
   color: #aaa;
}
.sosmed-icon .icon i{
   font-size: 30px;
}
.sosmed-icon:hover{
   transition: 0.3s;
   transform: translateY(-5px);
   cursor: pointer;
}
.sosmed-icon .instagram {
   position: relative;
}
.sosmed-icon .instagram::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #ffd644 0%, #f949a7 100%);
   opacity: 0;
   z-index: 1;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}
.sosmed-icon .instagram i{
   z-index: 2;
}
.sosmed-icon:hover .facebook{
   transition: 0.3s;
   background-color: #3b5998;
}
.sosmed-icon:hover .instagram::before{
   transition: 0.3s;
   opacity: 1;
}
.sosmed-icon:hover .github{
   transition: 0.3s;
   background-color: #222;
}
.sosmed-icon:hover .email{
   transition: 0.3s;
   background-color: #d14836;
}
.form-container{
   display: flex;
   flex-direction: column;
   width: 40%;
   background-color: #3f3f3f;
   border-radius: 10px;
   margin: 10px;
}
.form-container p{
   color: #fff;
   text-align: center;
   padding: 20px;
   font-size: 30px;
}
input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
   font-size: 12px;
   top: -5px;;
   -webkit-transition: 0.3s;
   transition: 0.3s;
}
.input-container{
   position: relative;
   border-radius: 5px;
   padding: 0 5%;
}
.input-container label{
   position: absolute;
   top: 10px;
   color: #777;
   font-size: 16px;
   pointer-events: none;
   -webkit-transition: 0.3s;
   transition: 0.3s;
}
.form-container hr, .form-container input, .form-container textarea{
   display: flex;
   width: 90%;
}
.form-container hr{
   border: 2px solid #aaa;
   border-radius: 2px;
   margin: 0px auto 20px auto;
}
.form-container input, .form-container textarea{
   background-color: #3f3f3f;
   border: none;
   padding: 10px 0;
   color: #fff;
}
.form-container input:focus, .form-container textarea:focus {
   outline: 0;
}
.form-container textarea{
   width: 100%;
   height: 20px;
   min-height: 20px;
   resize: vertical;
}
.submit{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #de4040;
   color: #fff;
   padding: 10px 0;
   border-radius: 10px;
   margin: 20px auto;
   width: 50%;
   cursor: pointer;
}
.submit:hover{
   transition: 0.3s;
   background-color: #ff4d4d;
}
.submit:active{
   transition: 0s;
   background-color: #cb3737;
}

.form-status{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #3f3f3f;
   color: #fff;
   font-size: 15px;
   margin: 10px;
}
@media screen and (max-width: 900px){
   .contact{
      flex-direction: column;
      align-items: center;
   }
   .social-media{
      width: 90%;
   }
   .form-container{
      width: 87%;
   }
}
@media screen and (max-width: 600px){
   .social-media .title{
      font-size: 16px;
      padding: 20px;
   }
   .social-media .title p:last-child{
      font-size: 12px;
   }
   .social-media .icon i{
      font-size: 20px;
   }
   .sosmed-icon .icon{
      padding: 20px;
   }
   .form-container p{
      font-size: 24px;
   }
}
@media screen and (max-width: 400px){
   .social-media{
      width: 97%;
   }
   .form-container{
      width: 90%;
   }
   .social-media .title{
      font-size: 14px;
      padding: 14px;
   }
   .social-media .title p:last-child{
      font-size: 10px;
   }
   .social-media .icon i{
      font-size: 16px;
   }
   .sosmed-icon .icon{
      padding: 15px;
   }
}