.contact{

    position:relative;

    padding:140px 20px;

    background:#060d16;

    overflow:hidden;

}

.contact-wrapper{

    max-width:1300px;

    margin:auto;

    display:grid;

    gap:70px;

    align-items:center;

}

@media(min-width:950px){

.contact-wrapper{

grid-template-columns:1fr 1fr;

}

}

/************************/

.contact h2{

    color:white;

    font-size:clamp(2rem,5vw,4rem);

    margin:20px 0;

}

.contact p{

    color:#c0cad4;

    line-height:1.8;

    margin-bottom:40px;

}

/************************/

.contact-cards{

display:grid;

gap:20px;

}

.info-card{

display:flex;

align-items:center;

gap:20px;

padding:22px;

border-radius:24px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.10);

backdrop-filter:blur(25px);

transition:.4s;

}

.info-card:hover{

transform:translateX(8px);

border-color:#FFD54A;

}

.info-card span{

font-size:34px;

}

.info-card strong{

display:block;

color:white;

}

.info-card small{

color:#c9d2dc;

}

/************************/

.contact-form{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(30px);

padding:40px;

border-radius:30px;

box-shadow:0 30px 60px rgba(0,0,0,.35);

}

.input-group{

position:relative;

margin-bottom:30px;

}

.input-group input,

.input-group textarea{

width:100%;

padding:20px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.10);

border-radius:18px;

outline:none;

color:white;

font-size:16px;

transition:.3s;

}

.input-group textarea{

resize:none;

}

.input-group label{

position:absolute;

left:18px;

top:18px;

color:#b7c1cb;

pointer-events:none;

transition:.3s;

background:#09111b;

padding:0 6px;

}

.input-group input:focus,

.input-group textarea:focus,

.input-group input:valid,

.input-group textarea:valid{

border-color:#FFD54A;

}

.input-group input:focus+label,

.input-group textarea:focus+label,

.input-group input:valid+label,

.input-group textarea:valid+label{

top:-10px;

font-size:13px;

color:#FFD54A;

}

button{

width:100%;

padding:18px;

border:none;

cursor:pointer;

border-radius:60px;

font-size:17px;

font-weight:bold;

background:linear-gradient(135deg,#FFD54A,#ff9800);

transition:.35s;

}

button:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(255,193,7,.35);

}

/************************/

.contact-glow{

position:absolute;

width:350px;

height:350px;

border-radius:50%;

filter:blur(130px);

opacity:.28;

}

.glow-left{

left:-180px;

top:80px;

background:#00a8ff;

}

.glow-right{

right:-180px;

bottom:80px;

background:#ffc107;

}

/************************/

.reveal{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:none;

}