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

.contact-section{

    padding:100px 0;

    background:#050505;

}

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-badge{

    display:inline-block;

    padding:8px 18px;

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

    border-radius:40px;

    color:#fff;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.section-heading h2{

    color:#fff;

    font-size:52px;

    line-height:1.2;

    margin-bottom:20px;

}

.section-heading p{

    color:#9ca3af;

    font-size:17px;

    line-height:30px;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    align-items:flex-start;

}

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

.contact-info{

    background:#0d0d0d;

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

    border-radius:20px;

    padding:40px;

    position:sticky;

    top:120px;

}

.contact-info h3{

    color:#fff;

    font-size:30px;

    margin-bottom:15px;

}

.contact-info>p{

    color:#bdbdbd;

    line-height:28px;

    margin-bottom:35px;

}

.info-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:20px;

    background:#111;

    transition:.35s;

}

.info-box:hover .info-icon{

    transform:translateY(-5px);

    border-color:#ffffff;

}

.info-box span{

    display:block;

    color:#888;

    margin-bottom:6px;

    font-size:14px;

}

.info-box a,

.info-box p{

    color:#fff;

    text-decoration:none;

    font-size:17px;

    line-height:28px;

}

.office-time{

    margin-top:35px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

}

.office-time h4{

    color:#fff;

    margin-bottom:12px;

}

.office-time p{

    color:#bfbfbf;

    margin-bottom:6px;

}

.office-time strong{

    color:#fff;

}

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

.contact-form-box{

    background:#0d0d0d;

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

    border-radius:20px;

    padding:45px;

}

.contact-form-box h3{

    color:#fff;

    font-size:32px;

    margin-bottom:30px;

}

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.form-group{

    margin-bottom:20px;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    background:#111;

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

    border-radius:12px;

    padding:16px 18px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:.3s;

}

.form-group textarea{

    resize:none;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    border-color:#ffffff;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#7d7d7d;

}

.contact-btn{

    background:#fff;

    color:#000;

    border:none;

    padding:16px 35px;

    border-radius:50px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.contact-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(255,255,255,.15);

}

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

.contact-map{

    background:#050505;

    padding:0 0 100px;

}

.contact-map iframe{

    width:100%;

    height:520px;

    border:0;

    filter:grayscale(100%) invert(92%) contrast(92%);

}

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

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-info{

position:relative;

top:0;

}

}

@media(max-width:767px){

.contact-section{

padding:70px 0;

}

.section-heading h2{

font-size:34px;

}

.form-grid{

grid-template-columns:1fr;

}

.contact-form-box{

padding:30px 22px;

}

.contact-info{

padding:30px 22px;

}

.contact-map iframe{

height:350px;

}

}