:root{--ink:#2b2b2b;--blue:#00a0e4;--navy:#293655;--band:#f5f5f7;--purple:#6a2c9c;--wrap:1200px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.6 "Source Sans 3","Myriad Pro",Calibri,Arial,sans-serif;color:var(--ink);background:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,p{margin:0}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* hero */
.contect-hero{display:flex;align-items:center;min-height:clamp(160px,16.2vw,311px);padding:0 max(20px,10vw);background:#5e3122 url('../images/contactus/hero.png') center/cover}
.contect-hero h1{font:400 clamp(44px,5vw,72px)/1 "Times New Roman",Times,serif;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,403px);gap:40px;align-items:start;padding:clamp(32px,5vw,70px) 0 clamp(40px,6vw,90px)}
.contact h2{font:700 clamp(24px,2.6vw,30px)/1.1 Montserrat,Arial,sans-serif;text-transform:uppercase;color:var(--navy);margin:24px 0 18px}
.card{background:#fff;border-radius:10px;padding:48px 30px 52px;box-shadow:0 10px 40px rgba(0,0,0,.14)}
.card h2{margin:0 0 26px;text-align:center;font:700 clamp(19px,2vw,24px)/1.2 "Open Sans",Arial,sans-serif;color:#112040}
.card input,.card textarea{display:block;width:100%;margin-bottom:17px;padding:15px 22px;border:2px solid var(--band);border-radius:3px;background:var(--band);font:18px/1.3 "Open Sans",Arial,sans-serif;color:var(--ink)}
.card textarea{min-height:153px;resize:vertical}
.card ::placeholder{color:#6e7078;opacity:1}
.card input:focus,.card textarea:focus{border-color:var(--blue);background:#fff}
.card button{display:block;width:min(100%,247px);margin:30px auto 0;padding:19px;border:0;border-radius:32px;background:linear-gradient(90deg,#0a9fe6,#22c8c8);color:#fff;font:700 18px/1 "Open Sans",Arial,sans-serif;box-shadow:0 8px 16px rgba(0,160,228,.35);cursor:pointer}
.card button:hover{filter:brightness(1.08)}


@media (max-width:900px){
 .top{justify-content:center;text-align:center;padding-block:14px}
 .brand{flex-direction:column;gap:6px}
 nav ul{justify-content:center;gap:4px 22px}
 .contact{grid-template-columns:1fr}
 .card{max-width:520px;width:100%;margin-inline:auto}
}
@media (max-width:560px){
 .card{padding:32px 18px 36px}
 .up{width:56px;height:56px}
 .up img{width:22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}