.contact-section{
min-height:100vh;
padding:160px 0 120px 0;
background:#1A1A1B;
display:flex;
justify-content:center
}

.contact-wrapper{
width:90%;
max-width:880px;
margin:auto
}

.contact-header{
margin-bottom:70px;
border-left:3px solid #D4AF37;
padding-left:24px
}

.contact-header h1{
font-size:2.2rem;
letter-spacing:.12em;
color:#E5E5E5;
margin-bottom:16px
}

.contact-header p{
font-family:'Fira Code', monospace;
font-size:.95rem;
color:#9a9a9a;
line-height:1.7;
max-width:640px
}

.contact-methods{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
margin-bottom:70px
}

.contact-card{
background:#2D2E2E;
padding:34px;
border:1px solid #3a3a3a;
display:flex;
flex-direction:column;
gap:16px;
transition:.25s ease
}

.contact-card h3{
font-family:'Fira Code', monospace;
font-size:.8rem;
letter-spacing:.2em;
color:#888;
text-transform:uppercase
}

.contact-card a{
font-size:1rem;
color:#D4AF37;
text-decoration:none;
word-break:break-all;
transition:.25s ease
}

.contact-card:hover{
border-color:#D4AF37;
transform:translateY(-6px)
}

.contact-card a:hover{
color:#fff
}

.contact-divider{
height:1px;
background:#2D2E2E;
margin:70px 0
}

.contact-form{
display:flex;
flex-direction:column;
gap:24px
}

.contact-form input,
.contact-form textarea{
background:#111;
border:1px solid #2D2E2E;
padding:16px;
color:#E5E5E5;
font-family:'Fira Code', monospace;
font-size:1rem;
transition:.25s ease
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border-color:#D4AF37
}

.contact-form button{
background:#2D2E2E;
border:1px solid #D4AF37;
color:#D4AF37;
padding:16px;
font-family:'Fira Code', monospace;
font-size:.95rem;
letter-spacing:.15em;
cursor:pointer;
transition:.25s ease
}

.contact-form button:hover{
background:#D4AF37;
color:#1A1A1B
}

@media(max-width:480px){

.contact-section{
padding:120px 1.2rem 80px 1.2rem;
}

.contact-wrapper{
width:100%;
}

.contact-header{
margin-bottom:50px;
padding-left:18px;
}

.contact-header h1{
font-size:1.8rem;
}

.contact-header p{
font-size:.9rem;
}

.contact-methods{
grid-template-columns:1fr;
gap:20px;
margin-bottom:50px;
}

.contact-card{
padding:22px;
}

.contact-card h3{
font-size:.75rem;
}

.contact-card a{
font-size:.95rem;
}

.contact-divider{
margin:50px 0;
}

.contact-form{
gap:18px;
}

.contact-form input,
.contact-form textarea{
font-size:.95rem;
padding:14px;
}

.contact-form button{
padding:14px;
font-size:.9rem;
}

}

@media(min-width:481px) and (max-width:767px){

.contact-section{
padding:130px 1.8rem 90px 1.8rem;
}

.contact-methods{
grid-template-columns:1fr;
gap:24px;
}

.contact-header h1{
font-size:2rem;
}

}

@media(min-width:768px) and (max-width:1023px){

.contact-section{
padding:140px 2rem 100px 2rem;
}

.contact-methods{
grid-template-columns:repeat(2,1fr);
gap:26px;
}

}

@media(min-width:1024px){

.contact-methods{
grid-template-columns:repeat(3,1fr);
}

}