.contact-hero{

    padding:170px 0 120px;

    background:
    radial-gradient(circle at 20% 20%,rgba(0,170,255,.12),transparent 35%),
    radial-gradient(circle at 80% 80%,rgba(0,120,255,.08),transparent 40%),
    linear-gradient(180deg,#071321,#091826);

}

.contact-shell{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:80px;

    align-items:center;

}

.contact-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(0,170,255,.12);

    color:#17b7ff;

    font-size:13px;

    font-weight:700;

}

.contact-left h1{

    font-size:72px;

    color:white;

    line-height:1.05;

    margin:30px 0;

}

.contact-left h1 span{

    color:#19b7ff;

}

.contact-left p{

    color:#9fb5d1;

    font-size:20px;

    line-height:1.9;

    max-width:620px;

}

.contact-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

@media(max-width:1100px){

.contact-shell{

grid-template-columns:1fr;

}

}
/*==================================================
CONTACT CARDS
==================================================*/

.contact-cards{

    padding:120px 0;

    background:#071523;

}

.contact-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.contact-card{

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

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

    border-radius:28px;

    padding:45px 35px;

    text-align:center;

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:#16b8ff;

    box-shadow:0 25px 60px rgba(0,170,255,.18);

}

.contact-card i{

    font-size:42px;

    color:#18b9ff;

    margin-bottom:25px;

}

.contact-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:15px;

}

.contact-card p{

    color:#9fb5d1;

    line-height:1.8;

}

@media(max-width:1100px){

.contact-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.contact-grid{

grid-template-columns:1fr;

}

}
/*==================================================
CONTACT FORM
==================================================*/

.contact-form-section{

padding:140px 0;

background:#050d18;

}

.contact-form-layout{

display:grid;

grid-template-columns:58% 42%;

gap:80px;

align-items:start;

}

.contact-form{

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

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

border-radius:30px;

padding:55px;

}

.contact-form h2{

color:#fff;

margin-bottom:35px;

font-size:38px;

}

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:20px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:18px 20px;

background:#0d1b2c;

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

border-radius:14px;

color:#fff;

font-size:16px;

outline:none;

}

.contact-form textarea{

margin-bottom:25px;

resize:vertical;

}

.contact-info{

display:flex;
flex-direction:column;
align-items:flex-start;

}

.contact-info > span{

color:#19b5ff;

font-size:13px;

font-weight:700;

letter-spacing:1px;

}

.contact-info > h2{

font-size:42px;

color:#fff;

margin:20px 0 35px;

}

.info-list{

display:flex;
flex-direction:column;
gap:16px;

margin-top:35px;
margin-bottom:35px;
width:100%;

}

.contact-mini-card{

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

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

border-radius:24px;

padding:35px;

margin-top:20px;

}

.contact-mini-card small{

display:block;

color:#9fb5d1;

margin-bottom:10px;

}

.contact-mini-card strong{

font-size:42px;

color:#18b8ff;

}

@media(max-width:1100px){

.contact-form-layout{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

}
/*==================================================
FAQ
==================================================*/

.contact-faq{

    padding:140px 0;

    background:#071523;

}

.faq-list{

    max-width:900px;

    margin:70px auto 0;

}

.faq-list details{

    margin-bottom:20px;

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

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

    border-radius:20px;

    padding:25px 30px;

}

.faq-list summary{

    color:#fff;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    list-style:none;

}

.faq-list summary::-webkit-details-marker{

    display:none;

}

.faq-list p{

    color:#9fb5d1;

    margin-top:20px;

    line-height:1.8;

}
.section-title h2{

font-size:56px;

font-weight:800;

color:#ffffff;

margin:25px 0;

}
.contact-faq .section-title{

max-width:850px;

margin:auto;

text-align:center;

}
.contact-faq .section-title span{

margin-bottom:25px;

}

.contact-info i{

    display:block;

    font-size:54px;

    color:#18b8ff;

    margin:20px 0 25px;

}
.contact-contact-grid{

    display:grid;

    gap:18px;

    margin-top:35px;

}

.contact-small-card{

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

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

    border-radius:18px;

    padding:22px;

    transition:.35s;

}

.contact-small-card:hover{

    border-color:#17b8ff;

    transform:translateX(8px);

}

.contact-small-card i{

    color:#17b8ff;

    font-size:26px;

    margin-bottom:14px;

}

.contact-small-card h4{

    color:#fff;

    margin-bottom:8px;

    font-size:20px;

}

.contact-small-card span{

    color:#9fb5d1;

    font-size:15px;

}

.contact-note{

    margin-top:18px;

    color:#9fb5d1;

    font-size:15px;

}

.contact-note strong{

    color:#18b8ff;

}