/* ==========================
   CONTACT HERO
========================== */


.contact-hero{

background:#0B132B;

background-image:
linear-gradient(
rgba(214,216,220,.045) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(214,216,220,.045) 1px,
transparent 1px
);

background-size:72px 72px;

}


.contact-container{

max-width:1200px;
margin:0 auto;
padding:0 32px;

}



.contact-hero .contact-container{

padding-top:72px;
padding-bottom:72px;

}



.contact-kicker{

font-family:'Space Mono',monospace;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#86A9D6;

}



.contact-hero-title{

font-family:'Space Grotesk',sans-serif;

font-size:48px;

font-weight:700;

line-height:1.05;

letter-spacing:-1.2px;

color:#fff;

margin-top:12px;

}





/* ==========================
   CONTACT SECTION
========================== */


.contact-section{

padding:64px 0 96px;

}


.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:start;

}



/* ==========================
   LEFT INFO
========================== */


.contact-info{

display:flex;

flex-direction:column;

gap:18px;

}



.contact-card{

background:#fff;

border:1px solid #D6D8DC;

border-radius:16px;

padding:24px;

display:flex;

gap:16px;

align-items:center;

}



.contact-icon{

width:46px;

height:46px;

border-radius:11px;

background:#EAF1F8;

display:flex;

align-items:center;

justify-content:center;

font-family:'Space Mono',monospace;

font-weight:700;

font-size:12px;

color:#3F6FA8;

}



.contact-label{

font-size:13px;

color:#6B7280;

}



.contact-value{

font-size:16px;

font-weight:600;

color:#0B132B;

}




/* MAP */


.contact-map{

height:200px;

border-radius:16px;

background:#0B132B;

background-image:

linear-gradient(
rgba(214,216,220,.09) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(214,216,220,.09) 1px,
transparent 1px
);


background-size:36px 36px;


display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

gap:15px;

color:#9AA0A8;

font-family:'Space Mono',monospace;

font-size:11px;

}



.map-pin{

width:18px;

height:18px;

border-radius:50%;

background:#86A9D6;

box-shadow:
0 0 0 8px rgba(134,169,214,.28);

}




/* SOCIAL */


.contact-social{

display:flex;

gap:10px;

}



.contact-social a{

flex:1;

text-align:center;

text-decoration:none;

font-family:'Space Mono',monospace;

font-size:12px;

color:#3F6FA8;

background:#fff;

border:1px solid #D6D8DC;

padding:12px;

border-radius:10px;

}

/* ==========================
   CONTACT FORM EXACT MATCH
========================== */


.contact-form-box{

background:#fff;

border:1px solid #D6D8DC;

border-radius:20px;

padding:36px;

box-shadow:
0 10px 40px rgba(11,19,43,0.07);

box-sizing:border-box;

}



.contact-form-box form{

width:100%;

margin:0;

}



.contact-form-box h3,
.contact-form-title{

font-family:'Space Grotesk',sans-serif;

font-weight:700;

font-size:24px;

line-height:1.2;

color:#0B132B;

margin:0 0 22px;

}



.contact-form-box p{

margin:0 0 16px;

padding:0;

width:100%;

}



.contact-form-box label{

display:block;

width:100%;

font-size:13px;

font-weight:600;

color:#0B132B;

margin:0;

}



.contact-form-box br{

display:none;

}




.contact-form-box input[type="text"],
.contact-form-box input[type="email"],
.contact-form-box textarea{


display:block;

width:100%;

box-sizing:border-box;

padding:13px 15px;

margin-top:7px;

border:1px solid #D6D8DC;

border-radius:10px;

font-size:15px;

font-family:inherit;

color:#0B132B;

outline:none;

background:#fff;

}




.contact-form-box textarea{

height:150px;

resize:vertical;

}



.contact-form-box input:focus,
.contact-form-box textarea:focus{


border-color:#3F6FA8;

box-shadow:

0 0 0 3px rgba(63,111,168,0.16);

}




.contact-form-box input[type="submit"]{


display:block;

width:100%;

box-sizing:border-box;

background:#0B132B;

border:none;

cursor:pointer;

font-size:16px;

font-weight:600;

color:#fff;

padding:15px;

border-radius:12px;

box-shadow:

0 10px 26px rgba(11,19,43,0.22);

margin-top:4px;

}




/* ==========================
   MOBILE
========================== */


@media(max-width:900px){


.contact-grid{

grid-template-columns:1fr;

}


.contact-hero-title{

font-size:40px;

}

}


@media(max-width:600px){


.contact-container{

padding-left:20px;

padding-right:20px;

}


.contact-form-box{

padding:24px;

}


}