/* ==========================================
   MARUWATA CONTACT PAGE PREMIUM DESIGN
   FIXED - NO HEADER / FOOTER CONFLICT
========================================== */


/* RESET ONLY CONTACT PAGE */

.contact-area *,
.contact-hero *,
.map-section *,
.newsletter *{

    box-sizing:border-box;
    font-family:'Poppins',sans-serif;

}



/* ==========================================
 HERO SECTION
========================================== */


.contact-hero{

    height:450px;

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url("../images/contact-banner.jpg");


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


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

    text-align:center;

    color:white;

}



.contact-hero .hero-overlay h1{

    font-size:60px;
    font-weight:700;
    margin-bottom:20px;

}



.contact-hero .hero-overlay p{

    font-size:20px;
    margin-bottom:35px;

}



.contact-hero .hero-overlay a{

    display:inline-block;

    background:
    linear-gradient(
        135deg,
        #F53333,
        #F89A1C
    );


    color:white;

    padding:16px 45px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.contact-hero .hero-overlay a:hover{

    transform:translateY(-5px);

}




/* ==========================================
 TITLE
========================================== */


.contact-area .title,
.map-section .title{

    text-align:center;

    margin-bottom:50px;

}



.contact-area .title span{

    color:#F53333;

    font-weight:700;

}



.contact-area .title h2,
.map-section .title h2{

    font-size:42px;

    margin:10px 0;

    color:#111;

}



.contact-area .title p{

    color:#777;

}




/* ==========================================
 CONTAINER
========================================== */


.contact-area .container,
.map-section .container{

    width:90%;

    max-width:1200px;

    margin:auto;

}




/* ==========================================
 CONTACT AREA
========================================== */


.contact-area{

    padding:90px 0;

    background:#f7f9fc;

}



/* ==========================================
 CONTACT BOX WITH GAP
========================================== */


.contact-area .contact-box{

    display:grid;

    grid-template-columns:40% 60%;

    gap:40px;

    background:transparent;

    overflow:visible;

    box-shadow:none;

}



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


.contact-area .contact-info{

    background:#1e4f8a;

    padding:50px;

    color:white;

    border-radius:30px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}



.contact-area .contact-info h3{

    font-size:34px;

    margin-bottom:15px;

    color:white;

}



.contact-area .contact-info > p{

    color:#e5e7eb;

    line-height:1.8;

    margin-bottom:35px;

}





/* INFO BOX */


.contact-area .info{

    display:flex;

    align-items:center;

    gap:20px;


    padding:20px;

    margin-bottom:20px;


    background:white;

    border-radius:18px;


    transition:.3s;

}



.contact-area .info:hover{

    transform:translateX(10px);

}




.contact-area .info i{

    width:65px;

    height:65px;

    min-width:65px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:#2d74c4;


    color:white;

    font-size:30px;

}



.contact-area .info:hover i{

    background:#F53333;

    transform:scale(1.1);

}



.contact-area .info h4{

    color:#1f2937;

    font-size:18px;

}



.contact-area .info p{

    color:#64748b;

    font-size:15px;

}





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


.contact-area .form-box{


    background:white;


    padding:50px;


    border-radius:30px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}




.contact-area .form-box h3{


    font-size:32px;

    margin-bottom:30px;

}



.contact-area .input-group{

    margin-bottom:20px;

}



.contact-area input,
.contact-area textarea{


    width:100%;


    padding:18px;


    border:1px solid #d1d5db;


    border-radius:15px;


    outline:none;


}



.contact-area textarea{

    height:160px;

    resize:none;

}




.contact-area input:focus,
.contact-area textarea:focus{


    border-color:#F53333;


    box-shadow:

    0 0 0 4px rgba(245,51,51,.12);


}




/* TURNSTILE */


.contact-area .cf-turnstile{

    display:flex;

    justify-content:center;

    margin:30px 0 35px;

}




/* BUTTON */


.contact-area .form-box button{


    width:100%;


    padding:18px;


    border:none;


    background:

    linear-gradient(
        135deg,
        #F53333,
        #F89A1C
    );


    color:white;


    border-radius:50px;


    font-size:17px;


    cursor:pointer;


}



.contact-area .form-box button:hover{


    transform:translateY(-4px);


}





/* ==========================================
 MAP
========================================== */


.map-section{

    padding:80px 0;

}



.map-section iframe{

    width:100%;

    height:450px;

    border:0;

    border-radius:25px;

}





/* ==========================================
 NEWSLETTER
========================================== */


.newsletter{

    background:#111827;

    padding:80px 20px;

    color:white;

    text-align:center;

}



.newsletter h2{

    font-size:42px;

}



.newsletter p{

    margin:20px 0 35px;

    color:#ddd;

}



.newsletter form{

    display:flex;

    max-width:650px;

    margin:auto;

}



.newsletter input{

    flex:1;

    padding:18px 25px;

    border:none;

    border-radius:50px 0 0 50px;

}



.newsletter button{

    padding:0 45px;

    border:none;

    background:#F53333;

    color:white;

    border-radius:0 50px 50px 0;

}




/* ==========================================
 SUCCESS MESSAGE
========================================== */


.success-message{


    width:90%;


    max-width:1200px;


    margin:0 auto 40px;


    background:#e8fff0;


    border:1px solid #28a745;


    color:#198754;


    padding:20px;


    border-radius:15px;


    font-size:17px;


    text-align:center;


    font-weight:600;


}



.success-message i{

    font-size:25px;

    margin-right:8px;

}





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


@media(max-width:900px){


.contact-area .contact-box{

    grid-template-columns:1fr;

    gap:30px;

}



.contact-area .contact-info,
.contact-area .form-box{

    padding:30px;

}



.contact-hero .hero-overlay h1{

    font-size:40px;

}



.newsletter form{

    flex-direction:column;

}



.newsletter input,
.newsletter button{

    width:100%;

    height:55px;

    border-radius:50px;

    margin:5px;

}



}



@media(max-width:500px){


.contact-hero .hero-overlay h1{

    font-size:32px;

}



.contact-area .title h2{

    font-size:30px;

}



.contact-area .info{

    align-items:flex-start;

}


}