/* ================= CONTACT HERO ================= */

.contact-hero{
    min-height:500px;
    padding:100px 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        linear-gradient(rgba(29,21,53,.84),rgba(29,21,53,.94)),
        url("../img/hero-building.jpg") center/cover no-repeat;
}

.contact-hero-content{
    max-width:850px;
}

.contact-hero h1{
    color:#fff;
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.05;
    margin-bottom:25px;
}

.contact-hero h1 span{
    color:#d4a017;
}

.contact-hero p{
    max-width:650px;
    margin:auto;
    color:#ddd;
    font-size:1.05rem;
    line-height:1.8;
}


/* ================= CONTACT SECTION ================= */

.contact-section{
    padding:120px 0;
    background:#f7f7f5;
}

.contact-container{
    width:90%;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}


/* ================= CONTACT INFORMATION ================= */

.contact-info{
    padding-top:20px;
}

.contact-info h2{
    color:#1d1535;
    font-size:clamp(2.5rem,4vw,3.5rem);
    line-height:1.1;
    margin-bottom:25px;
}

.contact-info h2 span{
    color:#d4a017;
}

.contact-info > p{
    max-width:520px;
    color:#666;
    font-size:.95rem;
    line-height:1.9;
    margin-bottom:45px;
}


/* ================= CONTACT DETAILS ================= */

.contact-details{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.contact-detail{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.contact-icon{
    flex-shrink:0;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#efe3b8;
    color:#d4a017;
    font-size:1.1rem;
}

.contact-detail h3{
    color:#1d1535;
    font-size:1rem;
    margin-bottom:6px;
}

.contact-detail p,
.contact-detail a{
    display:block;
    color:#777;
    font-size:.85rem;
    line-height:1.7;
}

.contact-detail a{
    width:fit-content;
    transition:.3s;
}

.contact-detail a:hover{
    color:#d4a017;
}


/* ================= CONTACT CARD ================= */

.contact-card{
    padding:45px;
    background:#fff;
    border-radius:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.1);
    border:1px solid #eee;
}

.contact-card h2{
    color:#1d1535;
    font-size:2.2rem;
    line-height:1.15;
    margin-bottom:15px;
}

.contact-card > p{
    color:#777;
    font-size:.88rem;
    line-height:1.8;
    margin-bottom:30px;
}


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

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    color:#333;
    font-size:.8rem;
    font-weight:600;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    background:#fafafa;
    color:#333;
    font-family:inherit;
    font-size:.85rem;
    transition:.3s;
}

.form-group textarea{
    resize:vertical;
    min-height:130px;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#d4a017;
    background:#fff;
    box-shadow:0 0 0 3px rgba(212,160,23,.1);
}

.contact-card .btn{
    width:100%;
    border:none;
    cursor:pointer;
}


/* ================= CONTACT CTA ================= */

.contact-cta{
    padding:110px 30px;
    text-align:center;
    background:
        linear-gradient(rgba(29,21,53,.94),rgba(29,21,53,.97)),
        url("../img/hero-building.jpg") center/cover no-repeat;
}

.contact-cta-content{
    max-width:700px;
    margin:auto;
}

.contact-cta h2{
    color:#fff;
    font-size:clamp(2.5rem,5vw,4rem);
    line-height:1.1;
    margin-bottom:18px;
}

.contact-cta h2 span{
    color:#d4a017;
}

.contact-cta p{
    color:#ccc;
}


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

@media(max-width:768px){

    .contact-hero{
        min-height:450px;
        padding:80px 25px;
    }

    .contact-hero h1{
        font-size:2.7rem;
    }

    .contact-hero p{
        font-size:.92rem;
    }

    .contact-section{
        padding:80px 0;
    }

    .contact-container{
        width:88%;
        grid-template-columns:1fr;
        gap:55px;
    }

    .contact-info{
        padding-top:0;
    }

    .contact-info h2{
        font-size:2.4rem;
    }

    .contact-card{
        padding:30px 25px;
    }

    .contact-card h2{
        font-size:1.9rem;
    }

    .contact-cta{
        padding:85px 25px;
    }

    .contact-cta h2{
        font-size:2.7rem;
    }

}


/* ================= SMALL PHONES ================= */

@media(max-width:420px){

    .contact-hero h1{
        font-size:2.3rem;
    }

    .contact-info h2{
        font-size:2.1rem;
    }

    .contact-card{
        padding:25px 20px;
    }

    .contact-card h2{
        font-size:1.7rem;
    }

    .contact-detail{
        gap:13px;
    }

    .contact-icon{
        width:44px;
        height:44px;
    }

}