/* ======================================
CONTACT PAGE
====================================== */

.contact-page{
    padding:100px 0;
    background:#0B1120;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}

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

    background:#111827;

    border-radius:20px;

    padding:45px;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

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

    font-size:42px;

    color:#fff;

    margin-bottom:25px;

    font-family:'Playfair Display',serif;

}

.contact-info p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:25px;

}

.contact-item{

    margin-bottom:28px;

}

.contact-item strong{

    display:block;

    color:#fff;

    font-size:20px;

    margin-bottom:8px;

}

.contact-item p{

    margin:0;

    color:#ddd;

}

.whatsapp-btn{

    width:100%;

    display:block;

    text-align:center;

    margin-top:35px;

    padding:18px;

    border-radius:50px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    font-weight:700;

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

.contact-form-box form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-form-box label{

    color:#fff;

    font-weight:600;

    margin-bottom:6px;

}

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

    width:100%;

    padding:15px 18px;

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

    border-radius:12px;

    background:#1F2937;

    color:#fff;

    font-size:16px;

    font-family:'Poppins',sans-serif;

    transition:.3s;

    box-sizing:border-box;

}

.contact-form-box input:focus,
.contact-form-box textarea:focus{

    outline:none;

    border-color:#D4AF37;

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

}

.contact-form-box textarea{

    resize:vertical;

    min-height:180px;

}

.contact-btn{

    margin-top:15px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#D4AF37;

    color:#111827;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.contact-btn:hover{

    background:#fff;

    transform:translateY(-2px);

}

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

.map-section{

    padding:90px 0;

    background:#fff;

}

.map-section h2{

    text-align:center;

    font-size:52px;

    margin-bottom:40px;

    color:#111827;

    font-family:'Playfair Display',serif;

}

.map-wrapper{

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.map-wrapper iframe{

    display:block;

    width:100%;

    height:500px;

    border:0;

}

/* ======================================
RESPONSIVE
====================================== */

/* ======================================
TABLET
====================================== */

@media (max-width:992px){

.contact-grid{

display:grid;
grid-template-columns:1fr;
gap:35px;

}

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

padding:30px;

}

}

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

@media (max-width:768px){

.contact-page{

padding:50px 0;

}

.contact-page .container{

width:92%;
max-width:100%;
padding:0;

}

.contact-grid{

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

}

/* Cards */

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

width:100%;
padding:22px;
border-radius:16px;
box-sizing:border-box;

}

/* Heading */

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

font-size:30px;
line-height:1.3;
margin-bottom:20px;

}

/* Paragraph */

.contact-info>p{

font-size:16px;
line-height:1.8;
margin-bottom:25px;

}

/* Contact Item */

.contact-item{

display:block;
margin-bottom:20px;

}

.contact-item strong{

display:block;
margin-top:8px;
margin-bottom:5px;
font-size:18px;

}

.contact-item p{

margin:0;
font-size:16px;
line-height:1.7;
word-break:break-word;

}

/* WhatsApp */

.whatsapp-btn{

display:block;
width:100%;
padding:15px;
margin-top:25px;
font-size:16px;
box-sizing:border-box;

}

/* FORM */

.contact-form-box form{

display:flex;
flex-direction:column;

}

.contact-form-box label{

display:block;
margin-bottom:8px;
margin-top:15px;
font-size:16px;

}

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

display:block;
width:100%;
padding:15px;
font-size:16px;
border-radius:10px;
box-sizing:border-box;

}

.contact-form-box textarea{

min-height:140px;

}

.contact-btn{

display:block;
width:100%;
padding:16px;
margin-top:20px;

}

/* MAP */

.map-section{

padding:55px 0;

}

.map-section h2{

font-size:32px;
margin-bottom:25px;

}

.map-wrapper{

border-radius:16px;

}

.map-wrapper iframe{

height:280px;

}

}/* ==========================================
   CONTACT PAGE MOBILE FIX
   (KEEP AT THE VERY END OF contact.css)
========================================== */

@media only screen and (max-width:768px){

.contact-page{
    padding:50px 15px !important;
}

.contact-page .container{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
}

.contact-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:25px !important;
}

.contact-info,
.contact-form-box{
    width:100% !important;
    padding:20px !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
}

.contact-info h2,
.contact-form-box h2{
    font-size:28px !important;
    margin-bottom:20px !important;
}

.contact-info p,
.contact-item p{
    font-size:16px !important;
    line-height:1.8 !important;
}

.contact-item{
    margin-bottom:18px !important;
}

.contact-item strong{
    display:block !important;
    margin:8px 0 6px !important;
    font-size:18px !important;
}

/* FORM */

.contact-form-box form{
    display:block !important;
}

.contact-form-box label{
    display:block !important;
    width:100% !important;
    margin:14px 0 8px !important;
    font-size:16px !important;
    color:#fff !important;
}

.contact-form-box input,
.contact-form-box textarea{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:14px !important;
    box-sizing:border-box !important;
}

.contact-form-box textarea{
    min-height:140px !important;
}

.contact-btn,
.whatsapp-btn{
    width:100% !important;
    display:block !important;
    text-align:center !important;
    box-sizing:border-box !important;
}

.map-wrapper iframe{
    height:280px !important;
}

}