.contact{margin:100px 20px;.content{margin:0 auto;max-width:1100px;display:flex;background-color:var(--primary-color);padding:60px;color:#FFF;border-radius:20px;& .info{flex:1 1;display:flex;flex-direction:column;gap:60px;& h1{margin:0}& .details{display:flex;flex-direction:column;gap:30px;& .detail{display:flex;gap:18px;align-items:center;& .icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:20px;background:#FFF}& p{font-size:14px}}}& .socials{display:flex;gap:24px;& .social{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:30px;background-color:#FFF}}}& form{flex:1 1;display:flex;flex-direction:column;justify-content:center;& label{font-size:20px;margin-bottom:6px}& input,& textarea{padding:10px;border-radius:10px;margin-bottom:24px;border:none}& input{height:48px}& input:focus,& textarea:focus{outline:none}& button{margin-top:24px;align-self:flex-start}}}}@media screen and (max-width:820px){.contact{margin:65px 20px 50px;.content{flex-direction:column;gap:40px;padding:40px;& .info{gap:40px;border-bottom:1px solid #fff;padding-bottom:40px;align-items:center;& h1{text-align:center}& .socials{justify-content:center}}& form{& button{align-self:center}}}}}