.contact-hero{

    width:100%;
    height:350px;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("contact.png");

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

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

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    color:#fff;

    font-size:60px;

    margin-bottom:15px;

}

.hero-content p{

    color:#f5f5f5;

    font-size:20px;

    max-width:650px;

    margin:auto;

    line-height:30px;

}

.contact-section{

    width:90%;

    margin:80px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info h2{

    font-size:40px;

    color:#6F4E37;

    margin-bottom:20px;

}

.contact-info p{

    color:#666;

    line-height:30px;

    margin-bottom:35px;

}

.info-box{

    display:flex;

    align-items:center;

    gap:20px;

    background:#fff;

    padding:18px 25px;

    border-radius:12px;

    margin-bottom:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.info-box i{

    width:55px;

    height:55px;

    background:#6F4E37;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.info-box span{

    font-size:18px;

    color:#444;

}

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:15px;

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

}

.contact-form h2{

    color:#6F4E37;

    font-size:35px;

    margin-bottom:30px;

}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px 20px;

    border:2px solid #ddd;

    border-radius:10px;

    font-size:16px;

    outline:none;

    transition:.3s;

    font-family:inherit;

    resize:none;

    box-sizing:border-box;

}


.contact-form input:focus,

.contact-form textarea:focus{

    border-color:#D4AF37;

    box-shadow:0 0 10px rgba(212,175,55,.3);

}

.contact-form input::placeholder,

.contact-form textarea::placeholder{

    color:#999;

}



.contact-form button{

    padding:15px;

    background:#6F4E37;

    color:#fff;

    border:none;

    border-radius:30px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.contact-form button:hover{

    background:#D4AF37;

    color:#222;

    transform:translateY(-2px);

}

.map-section{

    width:90%;

    margin:80px auto;

    text-align:center;

}

.map-section h2{

    color:#6F4E37;

    font-size:40px;

    margin-bottom:30px;

}

.map-section iframe{

    width:100%;

    height:450px;

    border:none;

    border-radius:15px;

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

}

.faq{

    width:90%;

    margin:80px auto;

}

.faq h2{

    text-align:center;

    color:#6F4E37;

    font-size:40px;

    margin-bottom:40px;

}

.faq-item{

    background:#fff;

    padding:25px;

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    margin-bottom:20px;

    transition:.3s;

}

.faq-item:hover{

    transform:translateY(-5px);

}

.faq-item h3{

    color:#6F4E37;

    margin-bottom:12px;

    font-size:22px;

}

.faq-item p{

    color:#666;

    line-height:28px;

}

@media(max-width:992px){

.contact-section{

    grid-template-columns:1fr;

    gap:40px;

}

}

@media(max-width:768px){

.contact-hero{

    height:260px;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    font-size:16px;

    padding:0 20px;

}

.contact-info h2,
.contact-form h2,
.map-section h2,
.faq h2{

    font-size:30px;

}

.info-box{

    flex-direction:column;

    text-align:center;

}

.contact-form{

    padding:25px;

}

.map-section iframe{

    height:300px;

}

}

@media(max-width:480px){

.hero-content h1{

    font-size:34px;

}

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

    padding:14px;

}

.contact-form button{

    font-size:16px;

}

}