.contact_container{
background: var(--color-bg1);
padding: 4rem;
display: grid;
grid-template-columns: 40% 60%;
height: 30rem;
gap: 4rem;
margin: 4rem auto;
border-radius: 1rem;
}
.contact_aside{
background: var(--color-primary);
padding: 3rem;
border-radius: 1rem;
position: relative;
bottom: 7rem;
width: 20rem;
}
.aside_image{
width: 14rem;
margin-bottom: 2rem;
}
.contact_aside h2{
text-align: left;
margin-bottom: 1rem;
}
.contact_aside p{
font-size: 0.9rem;
margin-bottom: 2rem;
}
.contact_details li{
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.contact_socials{
display: flex;
gap: 0.8rem;
margin-top: 3rem;
}
.contact_socials a{
background: var(--color-bg2);
padding: 0.5rem;
border-radius: 50%;
font-size: 0.5rem;
transition: var(--transition);
}
.contact_socials a:hover{
background: transparent;
}
.contact_form{
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-right: 4rem;
}
.form_name{
display: flex;
gap: 1.2rem;
}
.contact_form input[type="text"]{
width: 50%;
}
input, textarea{
width: 100%;
padding: 1rem;
background: var(--color-bg);
color: var(--color-white);
}
.contact_form .btn{
width: max-content;
margin-top: 1rem;
cursor: pointer;
}
/*=================================== Media Query Tablet=====================================*/
@media screen and (max-width: 1024px) {
.contact_container{
gap: 2.5rem;
margin-top: 3rem;
height: auto;
padding: 1.rem;
}
.contact_aside{
width: auto;
padding: 0.4rem;
bottom: 0;
position: relative;
}
.aside_image{
width: auto;
}
.contact_form{
align-self: center;
margin-right: 1.5rem;
}
.contact_aside h5{
font-size: 0.7rem;
}
}
/*=================================== Media Query Phone=====================================*/
@media screen and (max-width: 600px) {
.contact_container{
grid-template-columns: 1fr;
gap: 3rem;
margin-top: 0;
padding: 0;
}
.contact_form{
margin: 0 1.5rem 3rem;
}
.form_name{
flex-direction: column;
}
.form_name input[type="text"]{
width: 100%;
}
}
/* Mobile menu fix */
@media (max-width: 991px){
  .navbar-collapse{background:#5f61ff;}
  .navbar-nav{padding:10px 0;}
  .navbar-nav .nav-link{color:#fff!important;padding:14px 20px;}
  .navbar-toggler{border:0;}
}