enroll.css

.contact__container{
    background: var(--color-bg1);
    padding: 64px;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 64px;
    height: 480px;
    margin: 112px auto;
    border-radius: 16px
}
.contact__aside{
    background: var(--color-primary);
    padding: 48px;
    border-radius: 16px;
    position: relative;
    bottom: 160px;
}
.aside__image{
    width: 192px;
    margin-bottom: 32px;
}
.contact__aside h2{
    text-align: left;
    margin-bottom: 16px;
}
.contact__aside p{
    font-size: 14px;
    margin-bottom: 32px;
}
.contact__details li{
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.contact__socials{
    display: flex;
    gap: 12px;
    margin-top: 48px;
}
.contact__socials a{
    background: var(--color-bg2);
    padding: 8px;
    border-radius: 50%;
    font-size: 14px;
    transition: var(--transition);
}
.contact__socials a:hover{
    background: transparent;
}
.contact__form{
    display: flex;
    flex-direction: column;
    gap: 19px;
    margin-right: 64px;
}
.form__name{
    display: flex;
    gap: 19px;

}
.contact__form input[type="text"] {
    width: 50%;
}
input, textarea{
    width: 100%;
    padding: 16px;
    background: var(--color-bg);
    color: var(--color-white);
     
}
.contact__form .btn{
    width: max-content;
    cursor: pointer;
    margin-top: 16px;
}
    





@media screen and (max-width: 1024px) {
       .contact{
       padding-bottom: 0; 
       }
       .contact__container{
gap: 24px;
margin-top: 48px;
height: auto;
padding: 24px;

       }
       .contact__aside{
        width: auto;
        padding: 24px;
        bottom: 0;
       }

       .contact__form{
        align-self: center;
        margin-right: 24px;
       }
    }
  

    
   @media screen and (max-width: 600px){
        .contact__container{
            grid-template-columns: 1fr;
            gap: 48px;
            margin-top: 0;
            padding: 0;
        }
        .contact__form{
            margin: 0 24px 48px;
        }
        .form__name{
            flex-direction: column;
        }
        .form__name input[type="text"] {
            width: 100%;
 
        }
        
   }