.contacts{background:var(--bg-clr);min-height:100svh;display:flex}.contacts__title{margin-bottom:40px;font-size:2rem;font-weight:500}.contacts-details{flex-direction:column;width:100%;padding:100px 40px 40px;display:flex}.contacts-details__link{font-weight:300}.contacts-form{width:100%;padding:100px 40px 40px}.form{background:#000;border-radius:20px;flex-direction:column;gap:40px;height:100%;padding:40px;display:flex}.input-container{flex-direction:column;padding-bottom:5px;display:flex;position:relative}.input-container:before{content:"";background:#ffffff80;width:100%;height:2px;position:absolute;bottom:0;left:0}.input-container:after{content:"";transform-origin:0;background:#fff;width:100%;height:2px;transition:transform .5s;position:absolute;bottom:0;left:0;transform:scaleX(0)}.input-container label{transition:transform .5s,color .5s,font-size .5s;position:absolute}.input-container:focus-within:after{transform:scaleX(1)}.input-container:focus-within label{color:#ffffff80;font-size:14px;transform:translateY(-20px)}.input-container--active:after{transform:scaleX(1)}.input-container--active label{color:#ffffff80;font-size:14px;transform:translateY(-20px)}.textarea{resize:none;flex-grow:1}.form__btn{background:#2f5b72;border-radius:10px;padding:10px;font-weight:500}@media screen and not (min-width:1000px){.contacts-details{flex-direction:column;width:100%;padding:80px 20px 20px;display:flex}.contacts-form{padding:80px 20px 20px}}@media screen and not (min-width:800px){.contacts{flex-direction:column}}
