/*==========================================================
Version : 2.0
Author  : Erwin Echon
==========================================================*/
/*==========================================================
CONTACT
==========================================================*/

.mbi-contact {

    padding: 120px 0;

    background: var(--mbi-background);

}

.mbi-contact-content {

    margin-top: 70px;

}


/*==========================================================
CONTACT CARDS
==========================================================*/

.mbi-contact-card {

    height: 100%;

    padding: 36px 30px;

    text-align: center;

    border: 1px solid rgba(0,45,172,.08);

    border-radius: var(--mbi-radius-lg);

    background: #fff;

    box-shadow: var(--mbi-shadow-sm);

    transition: var(--mbi-transition);

}

.mbi-contact-card:hover {

    transform: translateY(-8px);

    border-color: rgba(0,45,172,.18);

    box-shadow: var(--mbi-shadow-lg);

}

.mbi-contact-card .mbi-icon-box {

    margin: 0 auto 24px;

}

.mbi-contact-card h3 {

    margin-bottom: 18px;

}

.mbi-contact-card p,
.mbi-contact-card address {

    margin: 0;

    color: var(--mbi-body);

    line-height: 1.8;

    font-style: normal;

}

.mbi-contact-card a {

    color: var(--mbi-primary);

    text-decoration: none;

    transition: var(--mbi-transition);

}

.mbi-contact-card a:hover {

    color: var(--mbi-secondary);

}

.mbi-contact-list {

    margin: 0;

    padding: 0;

    list-style: none;

}

.mbi-contact-list li + li {

    margin-top: 10px;

}


/*==========================================================
VISIT CARD
==========================================================*/

.mbi-visit-card {

    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(0,45,172,.08);

    border-radius: var(--mbi-radius-xl);

    background: #fff;

    box-shadow: var(--mbi-shadow-sm);

    transition: var(--mbi-transition);

}

.mbi-visit-card:hover {

    box-shadow: var(--mbi-shadow-lg);

}

.mbi-visit-map {

    overflow: hidden;

}

.mbi-visit-map img {

    width: 100%;

    transition: transform .4s ease;

}

.mbi-visit-card:hover .mbi-visit-map img {

    transform: scale(1.03);

}

.mbi-visit-content {

    padding: 40px;

}

.mbi-visit-content h3 {

    margin-bottom: 18px;

}

.mbi-visit-content>p {

    margin-bottom: 36px;

    color: var(--mbi-body);

}


/*==========================================================
VISIT LIST
==========================================================*/

.mbi-visit-list {

    display: flex;

    flex-direction: column;

    gap: 24px;

    margin-bottom: 40px;

}

.mbi-visit-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;

}

.mbi-visit-item .mbi-icon-box {

    flex-shrink: 0;

}

.mbi-visit-item h4 {

    margin-bottom: 8px;

}

.mbi-visit-item p {

    margin: 0;

    color: var(--mbi-body);

    line-height: 1.7;

}


/*==========================================================
BOTTOM CTA
==========================================================*/

.mbi-contact-cta {

    max-width: 860px;

    margin: 90px auto 0;

    padding: 60px;

    text-align: center;

    border: 1px solid rgba(0,45,172,.08);

    border-radius: var(--mbi-radius-xl);

    background: #fff;

    box-shadow: var(--mbi-shadow-sm);

}

.mbi-contact-cta h3 {

    margin-bottom: 18px;

}

.mbi-contact-cta p {

    max-width: 640px;

    margin: 0 auto 32px;

}