.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}}}}& 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}}& dialog{position:fixed;border:none;border-radius:20px;max-width:470px;text-align:center;padding:35px;top:100px;margin:0 auto;background:#FFF;&>img{margin:10px auto 0}& h3{color:var(--primary-color);font-size:24px;text-transform:capitalize;margin:20px 0}& p{color:var(--secondary-color);font-size:16px;margin-bottom:10px}& a button{margin-top:20px}& .close{position:absolute;top:34px;right:28px}}& dialog::-webkit-backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}& dialog::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}}@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}}& form{& button{align-self:center}}& dialog{margin:0 10px}}}}