.contact{color:var(--white);display:flex;flex-direction:column;gap:24px;padding-top:25px;font-family:var(--font-dm-sans);& a{align-self:flex-start;color:var(--white-60);text-decoration:underline;&:hover{color:var(--primary)}}& .contact-socials{display:flex;flex-direction:column;gap:12px;& .contact-socials-title{margin:0;font-size:18px;font-weight:500}& .contact-social-links{display:flex;gap:12px;flex-wrap:wrap;& .contact-social-link{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:var(--white-5);border:1px solid var(--white-10);color:var(--white);text-decoration:none;font-size:14px;font-weight:500;transition:background .2s,border-color .2s;& svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}&:hover{background:var(--white-10);border-color:var(--primary);color:var(--white)}}}}& .contact-form{display:flex;flex-direction:column;gap:16px;& .contact-form-title{margin:0;font-size:18px;font-weight:500}& .contact-form-field{display:flex;flex-direction:column;gap:6px;& label{font-size:13px;color:var(--white-60)}& input,& textarea{padding:12px 16px;border-radius:10px;background:var(--white-5);border:1px solid var(--white-10);color:var(--white);font-size:15px;outline:none;resize:vertical;font-family:inherit;transition:border-color .2s;&::placeholder{color:var(--white-20)}&:focus{border-color:var(--primary)}&.input-error{border-color:#ff6b6b}}& .contact-form-field-error{font-size:12px;color:#ff6b6b}}& .contact-form-success{margin:0;padding:12px 16px;border-radius:10px;background:rgba(0,200,100,.1);border:1px solid rgba(0,200,100,.3);color:#4cdb8e;font-size:14px}& .contact-form-error{margin:0;padding:12px 16px;border-radius:10px;background:rgba(220,50,50,.1);border:1px solid rgba(220,50,50,.3);color:#ff6b6b;font-size:14px}& .contact-form-submit{align-self:flex-start;padding:12px 24px;border-radius:10px;background:var(--primary);border:none;color:var(--black);font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .2s;width:100%;&:disabled{opacity:.5;cursor:not-allowed}&:hover:not(:disabled){opacity:.85}}& .contact-form-hint{margin:0;font-size:12px;color:var(--white-20)}}}