@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}




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



.contact-hero,
.contact-main,
.contact-location{

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

}

.contact-hero *,
.contact-main *,
.contact-location *{

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

}

.contact-section{
    width:100%;
    background:#fff;
    color:#111;
}

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

.contact-hero{

    position:relative;

    width:100%;

    height:95vh;

    overflow:hidden;

    margin-top: 100px;


}

.hero-bg-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position: top center;

    z-index:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgb(7, 7, 7) 0%,

        rgba(0, 0, 0, 0.25) 25%,

        rgba(255,255,255,0) 50%,

        rgba(255,255,255,0) 90%

    );

    z-index:2;

}

.hero-content{

    position: relative;

    z-index: 3;

    width: 90%;
    
    max-width: 1280px;

    margin: 0 auto;

    
    padding-top: clamp(140px, 15vw, 260px);
}

/* Heading */

.hero-content h1{

    max-width: 420px;

    font-size: clamp(38px, 4vw, 56px);

    line-height: 1.05;

    font-weight: 500;

    color: #ffffff;

    margin-bottom: 18px;
}

/* Paragraph */

.hero-content p{

    max-width:560px;

    font-size:22px;

    line-height:1.7;

    color:#ffffff;

}

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

.contact-main{

    padding:120px 8vw;

    background:#fff;

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

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:start;

}

/* ===================================
   LEFT CONTENT
=================================== */

.section-tag{

    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 28px;
    border-radius:40px;
    background:#fdf2eb;
    color:#ff7a00;
    font-size:15px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:28px;

}


.contact-form-wrapper h2{

    font-size:52px;

    font-weight:700;

    color:#111;

    margin-bottom:18px;

    line-height:1.15;

}

.contact-form-text{

    color:#666;

    font-size:16px;

    line-height:1.9;

    margin-bottom:45px;

    max-width:620px;

}

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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.contact-field{

    display:flex;

    flex-direction:column;

}

.contact-field label{

    font-size:15px;

    font-weight:600;

    color:#222;

    margin-bottom:10px;

}

.contact-field label span{

    color:#000;

}

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

    width:100%;

    padding:18px 24px;

    border:1px solid #d9d9d9;

    border-radius:18px;

    background:#fff;

    color:#111;

    font-size:16px;

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

    outline:none;

    transition:.35s ease;

}

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

    color:#999;

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

}

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

    border-color:#111;

    box-shadow:0 0 0 4px rgba(0,0,0,.05);

}

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}

/* CAPTCHA */

/* django-simple-captcha renders <img class="captcha"> followed by the
   hidden key input and the text answer input, with no wrapper of its
   own. The .contact-captcha div wraps that output plus the refresh
   button; flex `order` puts the button beside the image and drops the
   answer field onto its own row underneath. */

.contact-captcha{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

}

.contact-captcha img.captcha{

    order:1;

    height:60px;

    width:auto;

    border:1px solid #d9d9d9;

    border-radius:14px;

    background:#fff;

}

.contact-captcha .contact-captcha-refresh{

    order:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    flex-shrink:0;

    border:1px solid #d9d9d9;

    border-radius:14px;

    background:#fff;

    color:#111;

    font-size:16px;

    cursor:pointer;

    transition:.35s ease;

}

.contact-captcha .contact-captcha-refresh:hover{

    border-color:#111;

}

.contact-captcha input[type="text"]{

    order:3;

    flex:1 0 100%;

}

.contact-field .errorlist{

    list-style:none;

    margin:8px 0 0;

    padding:0;

    color:#c0392b;

    font-size:14px;

    font-weight:600;

}

/* ===================================
   SUBMIT BUTTON
=================================== */

.contact-submit-btn{

    width:240px;

    height:60px;

    border:none;

    border-radius:18px;

    background:#111;

    color:#ff7a00;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

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

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s ease;

}

.contact-submit-btn:hover{

    transform:translateY(-4px);

    background:#222;

}

.contact-submit-btn i{

    transition:.35s ease;

}

.contact-submit-btn:hover i{

    transform:translateX(6px);

}

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

@media(max-width:992px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

}

@media(max-width:768px){

    .contact-main{

        padding:90px 20px;

    }

    .contact-form-wrapper h2{

        font-size:40px;

    }

    .contact-submit-btn{

        width:100%;

    }

}


/* ===================================
   WHATSAPP CARD
=================================== */

.contact-whatsapp-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    height:100%;

}

.contact-whatsapp-card{

    width:100%;

    max-width:500px;

    background:#fff;

    border-radius:28px;

    padding:40px;

    border:1px solid #ececec;

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

    transition:.35s;

}

.contact-whatsapp-card:hover{

    transform:translateY(-8px);

    box-shadow:0 35px 80px rgba(0,0,0,.12);

}

/* ===================================
   HEADER
=================================== */

.contact-whatsapp-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.contact-wa-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:#111;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    flex-shrink:0;

}

.contact-whatsapp-header h3{

    font-size:28px;

    font-weight:700;

    color:#111;

    margin-bottom:6px;

}

.contact-whatsapp-header p{

    color:#ff7a00;

    font-size:15px;

}

/* ===================================
   QR IMAGE
=================================== */

.contact-qr-box{

    background:#f8f8f8;

    border-radius:22px;

    padding:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.contact-qr-box img{

    width:260px;

    max-width:100%;

    display:block;

    background:#f8f8f8;


}

.contact-qr-text{

    text-align:center;

    color:#666;

    font-size:15px;

    line-height:1.8;

    margin-bottom:35px;

}

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

.contact-wa-number{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    font-size:16px;

    color:#222;

}

.contact-wa-number i{

    width:42px;
    aspect-ratio:1 / 1;

    min-width:42px;

    flex:0 0 42px;

    border-radius:50%;

    background:#ff7a00;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:16px;

}

/* ===================================
   BUTTON
=================================== */

.contact-wa-btn{

    margin-top:30px;

    width:100%;

    height:62px;

    background:#111;

    color:#fff;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.contact-wa-btn:hover{

    background:#222;

    transform:translateY(-3px);

    color:#fff;

}

.contact-wa-btn i{

    transition:.35s;

}

.contact-wa-btn:hover i{

    transform:translateX(6px);

}

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

@media(max-width:992px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .contact-whatsapp-card{

        max-width:100%;

    }

}

@media(max-width:768px){

    .contact-whatsapp-card{

        padding:30px;

    }

    .contact-whatsapp-header{

        flex-direction:column;

        text-align:center;

    }

    .contact-whatsapp-header h3{

        font-size:24px;

    }

    .contact-qr-box img{

        width:220px;

    }

}




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

.contact-location{
    padding:120px 8vw;
    background:#f5f5f5;
}

.location-grid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:80px;
    align-items:center;
}

.map-box{
    width:100%;
    height:550px;
    overflow:hidden;
    border-radius:12px;
}

.map-box iframe{
    width:100%;
    height:100%;
    border:none;
}

/* ===================================
   LOCATION INFO
=================================== */

.location-info{
    max-width:420px;
}

.section-label{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:13px;
    font-family:'Poppins',sans-serif;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#777;
    margin-bottom:12px;
}

.section-label::after{
    content:"";
    width:55px;
    height:1px;
    background:#cfcfcf;
}

.location-info h2{
    font-size:clamp(34px,4vw,52px);
    font-family:'Poppins',sans-serif;
    font-weight:400;
    line-height:1.1;
    color:#111;
    margin-bottom:15px;
    letter-spacing:-1px;
}

.location-info p{
    color:#555;
    font-size:18px;
    font-family:'Poppins',sans-serif;
    line-height:1.7;
    margin-bottom:28px;
    max-width:380px;
}

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

.contact-details{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:35px;
}

.info-item{
    display:flex;
    align-items:center;
    gap:14px;
    color:#111;
    font-size:17px;
    font-family:'Poppins',sans-serif;
    font-weight:500;
}

.info-item i{
    width:22px;
    font-size:18px;
    color:#111;
}

/* ===================================
   FOLLOW US
=================================== */

.follow-title{
    display:block;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#111;
    margin-bottom:18px;
}

/* ===================================
   SOCIAL ICONS
=================================== */

.social-links{
    display:flex;
    gap:14px;
}

.social-links a{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#fff;
    transition:.3s ease;
}

.social-links a:hover{
    transform:translateY(-4px);
}

.social-links i{
    font-size:18px;
}

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

@media(max-width:1200px){

    .contact-grid{
        gap:60px;
    }

    .contact-image{
        height:650px;
    }
}

@media(max-width:991px){

    .contact-grid{
        grid-template-columns:1fr;
    }

    .location-grid{
        grid-template-columns:1fr;
    }

    .contact-image{
        order:-1;
        height:500px;
    }

    .map-box{
        height:400px;
    }
}

@media(max-width:768px){

    .contact-hero{
        min-height:50vh;
        padding:110px 24px 60px;
    }

    .contact-main{
        padding:80px 24px;
    }

    .contact-location{
        padding:80px 24px;
    }

    .hero-content h1{
        font-size:42px;
        line-height:1.1;
    }

    .hero-content p{
        font-size:16px;
    }

    .contact-form-wrapper h2{
        font-size:42px;
    }

    .contact-form button{
        width:100%;
    }

    .contact-image{
        height:350px;
    }
}

@media(max-width:480px){

    .hero-content h1{
        font-size:34px;
    }

    .contact-form-wrapper h2{
        font-size:36px;
    }

    .location-info h2{
        font-size:34px;
    }

    .info-item{
        font-size:15px;
    }
}



/* ==========================
   International Phone Input
========================== */

.iti{

    width:100%;

}

.iti input{

    width:100% !important;

    padding:18px 24px 18px 90px !important;

    border:1px solid #d9d9d9;

    border-radius:18px;

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

    font-size:16px;

}

.iti__selected-country{

    padding-left:18px;

}

.iti__country-list{

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

}



.peq-message{

    padding:18px 22px;
    border-radius:12px;
    margin-bottom:25px;
    font-weight:600;

}

.peq-message.success{

    background:#eaf8ed;
    color:#1f7a3e;
    border:1px solid #b7e4c7;

}

.peq-message.error{

    background:#fdeaea;
    color:#b42318;
    border:1px solid #f5c2c7;

}