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

.contact{

    padding:30px 0 90px;

    background:#f8f9fb;

    scroll-margin-top:120px;

}

.contact .section-title{

    max-width:760px;

    margin:0 auto 55px;

}

.contact .section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    background:#F15A24;

    color:#ffffff;

    border-radius:50px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.contact h2{

    color:#0B1F45;

    font-size:48px;

    font-weight:800;

    margin-bottom:25px;

    line-height:1.2;

}

.contact .section-title p{

    color:#6c757d;

    font-size:18px;

    line-height:1.8;

    margin-bottom:0;

}

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

.contact-form,
.contact-info{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    border:1px solid rgba(11,31,69,.05);

    box-shadow:0 18px 45px rgba(11,31,69,.08);

    transition:.35s ease;

    height:100%;

    display:flex;

    flex-direction:column;

}

.contact-form:hover,

.contact-info:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 65px rgba(11,31,69,.14);

}

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

.contact-form .form-control,

.contact-form .form-select{

    height:58px;

    border-radius:14px;

    border:1px solid #e8edf4;

    padding:15px 18px;

    font-size:16px;

    transition:all .30s ease;

    background:#ffffff;

}

.contact-form textarea.form-control{

    height:auto;

    min-height:180px;

    resize:none;

    padding-top:18px;

}

.contact-form .form-control:focus,

.contact-form .form-select:focus{

    border-color:#F15A24;

    box-shadow:0 8px 24px rgba(241,90,36,.18);

    transform:translateY(-2px);

}

.contact-form .btn-primary-custom{

    min-width:240px;

    min-height:58px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border:none;

    font-size:16px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.30s ease;

}

.contact-form .btn-primary-custom:hover{

    transform:translateY(-3px);

}

/*=========================================================
=                    CONTACT INTRO
=========================================================*/

.contact-intro{

    margin-bottom:40px;

    padding-bottom:30px;

    border-bottom:1px solid #eceff3;

}

.contact-intro h4{

    color:#0B1F45;

    font-size:30px;

    font-weight:800;

    margin-bottom:15px;

}

.contact-intro p{

    margin:0;

    color:#6c757d;

    line-height:1.8;

}

/*=========================================================
=                    CONTACT ITEMS
=========================================================*/

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-info{

    justify-content:space-between;

}

.contact .col-lg-7,
.contact .col-lg-5{

    display:flex;

}

.contact-form,
.contact-info{

    width:100%;

}

.contact-item i{

    width:60px;

    height:60px;

    background:#F15A24;

    color:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    flex-shrink:0;

    transition:.30s ease;

}

.contact-item:hover i{

    transform:translateY(-4px) scale(1.10);

    box-shadow:0 12px 24px rgba(241,90,36,.35);

}

.contact-item h5{

    color:#0B1F45;

    font-weight:700;

    margin-bottom:8px;

}

.contact-item p{

    margin:0;

    color:#6c757d;

    line-height:1.7;

}

.contact-item a{

    color:#6c757d;

    text-decoration:none;

    font-size:16px;

    transition:.30s ease;

}

.contact-item a:hover{

    color:#F15A24;

}

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

@media (max-width:991px){

    .contact{

        padding:45px 0 90px;

    }

    .contact h2{

        font-size:40px;

    }

    .contact-form,

    .contact-info{

        padding:35px;

    }

    .contact-info{

        margin-top:15px;

    }

}

@media (max-width:767px){

    .contact{

        padding:70px 0;

    }

    .contact h2{

        font-size:32px;

    }

    .contact .section-title{

        margin-bottom:50px;

    }

    .contact-form,

    .contact-info{

        padding:28px;

        border-radius:18px;

    }

    .contact-intro h4{

        font-size:24px;

    }

    .contact-item{

        gap:15px;

    }

    .contact-item i{

        width:50px;

        height:50px;

        font-size:18px;

    }

    .contact-form .btn-primary-custom{

        width:100%;

    }

}