.contact-main{
padding:10px 0vw;
padding-top: 8%;
background:#020617;
font-family:Inter,system-ui;
}

/* GRID */

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
max-width:1100px;
margin:auto;
gap:40px;
}

/* ================= LEFT PANEL ================= */

.contact-left{
background:
linear-gradient(
135deg,
#8b5cf6cc,
#ec4899cc
),
url("/images/contact-bg.jpg");

background-size:cover;
background-position:center;
color:#fff;

padding:50px;
border-radius:20px;

display:flex;
flex-direction:column;
justify-content:center;
}

.contact-left small{
color:#fbbf24;
font-weight:700;
letter-spacing:1px;
}

.contact-left h1{
font-size:34px;
font-weight:900;
margin:16px 0;
line-height:1.3;
}

.contact-left p{
opacity:.9;
margin-bottom:30px;
}

/* ================= CONTACT INFO ================= */

.contact-info{
display:flex;
gap:16px;
margin-bottom:24px;
align-items:flex-start;
}

.contact-icon{
width:46px;
height:46px;
border-radius:10px;
background:#000;

display:flex;
align-items:center;
justify-content:center;

font-size:20px;
color:#fff;
}

/* ================= RIGHT FORM ================= */

.contact-right{
background:#ffffff;
padding:20px;
border-radius:20px;
}

.contact-right h3{
font-size:26px;
font-weight:900;
margin-bottom:0px;
color:#000;
}

.contact-right p{
color:#7d0695;
margin-bottom:10px;
}

/* ================= FORM ================= */

.contact-form{
display:grid;
gap:18px;
}

.contact-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

/* FIELD */

.form-field{
border:2px solid #7a0955;
border-radius:10px;
padding:6px;
background:#fff;
transition:all .2s ease;
}

/* EXACT FOCUS */

.form-field:focus-within{
border:2px solid #8b5cf6;
box-shadow:
0 0 0 2px
rgba(
139,
92,
246,
0.15
);
}

/* INPUTS */

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:5px 14px;
border:none;
outline:none;
font-size:14px;
background:transparent;
}

.contact-form textarea{
min-height:120px;
resize:none;
}

/* ================= BUTTON ================= */

.contact-form button{
margin-top:10px;
padding:14px;
border:none;
border-radius:8px;

background:linear-gradient(
135deg,
#8b5cf6,
#ec4899
);

color:#fff;
font-weight:700;
cursor:pointer;
transition:.25s ease;
}

/* EXACT BUTTON HOVER */

.contact-form button:hover{
transform:translateY(-2px);
opacity:.95;
}

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

@media(max-width:900px){
.contact-main{
    padding-top: 30%;
}
.contact-grid{
grid-template-columns:1fr;
}

.contact-row{
grid-template-columns:1fr;
}

}