/* =========================================
   GLOBAL
========================================= */

html,
body{

    margin:0;
    padding:0;

    background:#ffffff !important;

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

    color:#111;

    overflow-x:hidden;
}

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

.contact-page{

    width:min(1400px, calc(100% - 80px));

    margin:auto;

    padding:120px 0 100px;

    background:#ffffff;
}

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

.contact-hero{

    text-align:center;

    margin-bottom:100px;

    padding:90px 80px;

    background:#ffffff;

    border-radius:32px;

    border:1px solid #f2f2f2;

    box-shadow:0 10px 40px rgba(0,0,0,0.04);
}

.contact-hero h1{

    font-size:78px;

    line-height:1.05;

    margin:25px auto;

    max-width:1050px;

    color:#111;

    font-weight:700;
}

.contact-hero p{

    max-width:900px;

    margin:auto;

    font-size:20px;

    line-height:1.9;

    color:#666;
}

/* =========================================
   HERO INFO
========================================= */

.hero-contact-info{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:60px;

    flex-wrap:wrap;
}

.hero-info-box{

    display:flex;

    align-items:center;

    gap:20px;

    background:#ffffff;

    padding:26px 30px;

    border-radius:22px;

    min-width:300px;

    border:1px solid #f2f2f2;

    transition:0.4s ease;
}

.hero-info-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,0.06);
}

.hero-info-box i{

    width:62px;
    height:62px;

    border-radius:50%;

    background:#111;

    color:#fff;

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

    font-size:18px;
}

.hero-info-box span{

    display:block;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#999;

    margin-bottom:6px;
}

.hero-info-box h4{

    font-size:22px;

    color:#111;

    margin:0;
}

/* =========================================
   MAIN SECTION
========================================= */

.contact-main-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-bottom:120px;
}

/* =========================================
   CARDS
========================================= */

.contact-details-card,
.contact-form-card{

    background:#ffffff;

    padding:55px;

    border-radius:30px;

    border:1px solid #f1f1f1;

    box-shadow:0 12px 40px rgba(0,0,0,0.04);

    position:relative;

    overflow:hidden;

    transition:0.4s ease;
}

.contact-details-card:hover,
.contact-form-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 60px rgba(0,0,0,0.06);
}

.contact-details-card::before,
.contact-form-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#b28b52;
}

.contact-details-card h2,
.contact-form-card h2{

    font-size:44px;

    margin:20px 0;

    color:#111;
}

.contact-description{

    color:#666;

    line-height:1.9;

    margin-bottom:45px;

    font-size:16px;
}

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

.contact-detail-item{

    display:flex;

    gap:20px;

    margin-bottom:35px;
}

.contact-detail-item i{

    width:60px;
    height:60px;

    border-radius:50%;

    background:#111;

    color:#fff;

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

    flex-shrink:0;

    font-size:18px;
}

.contact-detail-item h4{

    margin-bottom:8px;

    color:#111;

    font-size:20px;
}

.contact-detail-item p{

    color:#666;

    line-height:1.7;
}

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

.social-contact{

    display:flex;

    gap:15px;

    margin-top:45px;
}

.social-contact a{

    width:50px;
    height:50px;

    border-radius:50%;

    background:#111;

    color:#fff;

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

    transition:0.3s ease;

    text-decoration:none;
}

.social-contact a:hover{

    background:#b28b52;

    transform:translateY(-5px);
}

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

.contact-form{

    margin-top:30px;
}

.form-group{

    margin-bottom:22px;
}

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

    width:100%;

    padding:18px 22px;

    border-radius:16px;

    border:1px solid #e5e5e5;

    background:#ffffff;

    font-size:15px;

    outline:none;

    transition:0.3s ease;

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

.contact-form textarea{

    height:180px;

    resize:none;
}

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

    border-color:#b28b52;

    box-shadow:0 0 0 4px rgba(178,139,82,0.08);
}

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

.submit-btn{

    border:none;

    background:#111;

    color:#fff;

    padding:18px 36px;

    border-radius:16px;

    cursor:pointer;

    transition:0.3s ease;

    font-size:15px;

    font-weight:600;
}

.submit-btn:hover{

    background:#b28b52;

    transform:translateY(-4px);
}

/* =========================================
   OFFICE SECTION
========================================= */

.office-section{

    display:grid;

    grid-template-columns:1fr 500px;

    gap:70px;

    align-items:start;

    margin-bottom:120px;
}

.office-left h2{

    font-size:62px;

    line-height:1.1;

    margin:20px 0;

    color:#111;
}

.office-left p{

    color:#666;

    line-height:1.9;

    max-width:650px;

    font-size:17px;
}

.office-right{

    display:flex;

    flex-direction:column;

    gap:22px;
}

.office-card{

    background:#ffffff;

    padding:32px;

    border-radius:24px;

    border:1px solid #f1f1f1;

    box-shadow:0 10px 35px rgba(0,0,0,0.04);

    transition:0.3s ease;
}

.office-card:hover{

    transform:translateX(8px);

    box-shadow:0 16px 40px rgba(0,0,0,0.06);
}

.office-card h4{

    margin-bottom:10px;

    color:#111;

    font-size:20px;
}

.office-card p{

    color:#666;

    line-height:1.8;
}

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

.map-header{

    margin-bottom:35px;
}

.map-header h2{

    font-size:58px;

    margin-top:15px;

    color:#111;
}

.map-wrapper{

    overflow:hidden;

    border-radius:30px;

    border:1px solid #f1f1f1;

    box-shadow:0 20px 60px rgba(0,0,0,0.05);
}

.map-wrapper iframe{

    width:100%;

    height:550px;

    border:0;
}

/* =========================================
   TAG
========================================= */

.section-tag{

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b28b52;

    font-weight:600;
}

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

@media(max-width:992px){

    .contact-main-section,
    .office-section{

        grid-template-columns:1fr;
    }

    .contact-hero h1{

        font-size:52px;
    }

    .office-left h2{

        font-size:44px;
    }
}

@media(max-width:768px){

    .contact-page{

        width:calc(100% - 30px);
    }

    .contact-hero{

        padding:60px 30px;
    }

    .contact-hero h1{

        font-size:38px;
    }

    .contact-hero p{

        font-size:16px;
    }

    .contact-details-card,
    .contact-form-card{

        padding:35px;
    }

    .contact-details-card h2,
    .contact-form-card h2{

        font-size:30px;
    }

    .office-left h2{

        font-size:36px;
    }

    .map-header h2{

        font-size:38px;
    }

    .hero-info-box{

        width:100%;
    }
}