.contact-hero{

min-height:500px;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;

background:
linear-gradient(
rgba(27,67,50,.85),
rgba(27,67,50,.85)
),
url("/wild-digital-lab/assets/images/contact.jpg");

background-size:cover;
background-position:center;

}


.contact-hero h1{

font-size:55px;
font-weight:800;

}


.contact-hero span{

color:#E09F3E;

}



.btn-gold{

background:#E09F3E;
color:white;
border-radius:50px;
padding:13px 35px;
border:none;

}


.btn-gold:hover{

background:#cf841f;
color:white;

}





.contact-card{

background:white;
padding:35px 25px;
height:100%;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.3s;
color:#1B4332;

}


.contact-card:hover{

transform:translateY(-10px);

}



.icon-circle{

width:75px;
height:75px;
background:#1B4332;
color:#E09F3E;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto auto 20px;
font-size:30px;

}



.contact-card span{

color:#E09F3E;
font-weight:600;

}





.contact-form-card{

background:white;
padding:35px;
border-radius:20px;
box-shadow:0 15px 45px rgba(0,0,0,.1);

}



.form-header{

display:flex;
align-items:center;
gap:15px;
margin-bottom:15px;

}



.form-header i{

font-size:30px;
color:#E09F3E;

}



.form-header h3{

color:#1B4332;
margin:0;

}



.form-control,
.form-select{

padding:13px;
border-radius:10px;

}




@media(max-width:600px){


.contact-hero h1{

font-size:36px;

}


.contact-form-card{

padding:25px;

}


}


/* ================= FAQ SECTION ================= */


.faq-section {

    background:#F4EFE6;

}


.faq-section h2 {

    font-family:Georgia,serif;

    color:#0E2F2B;

    text-align:center;

    font-size:2.7rem;

    margin-bottom:40px;

}



.faq-container {

    max-width:900px;

    margin:auto;

}



.faq-item {

    background:#fff;

    margin-bottom:20px;

    padding:25px 30px;

    border-radius:12px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s ease;

}



.faq-item:hover {

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}



.faq-item h4 {

    color:#0E2F2B;

    font-family:Georgia,serif;

    font-size:1.3rem;

    margin-bottom:12px;

    position:relative;

    padding-left:35px;

}



.faq-item h4::before {

    content:"?";

    position:absolute;

    left:0;

    top:0;

    width:25px;

    height:25px;

    background:#C6A75E;

    color:#111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:Arial,sans-serif;

    font-size:16px;

    font-weight:bold;

}



.faq-item p {

    color:#666;

    line-height:1.8;

    margin:0;

    padding-left:35px;

}



/* FAQ hover accent */

.faq-item:hover h4 {

    color:#2e8b57;

}





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


@media(max-width:600px){


    .faq-section h2 {

        font-size:2rem;

    }


    .faq-item {

        padding:20px;

    }


    .faq-item h4 {

        font-size:1.1rem;

        padding-left:30px;

    }


    .faq-item p {

        padding-left:0;

        font-size:.95rem;

    }


}