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

:root {
    --lwwm-blue: #00A2D3;
    --lwwm-blue-dark: #007FA6;
    --lwwm-blue-deep: #006987;
    --lwwm-gold: #E2B547;
    --lwwm-gold-light: #F1D27C;
    --lwwm-dark: #17242D;
    --lwwm-text: #64717A;
    --lwwm-light: #F5FBFD;
    --lwwm-border: #DCEFF5;
}


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

.contact-page-section {
    position: relative;

    overflow: hidden;

    padding: 105px 0;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(0,162,211,.08),
            transparent 30%
        ),
        #FFFFFF;
}


/* ============================================================
   HEADING
============================================================ */

.contact-page-heading {
    max-width: 800px;

    margin:
        0 auto 60px;

    text-align: center;
}


.contact-page-heading h1 {
    margin-bottom: 17px;

    color: var(--lwwm-dark);

    font-size: 46px;
    line-height: 1.15;

    font-weight: 800;
}


.contact-page-heading h1 span {
    display: block;

    color: var(--lwwm-blue);
}


.contact-page-heading p {
    max-width: 720px;

    margin:
        0 auto;

    color: var(--lwwm-text);

    font-size: 16px;
    line-height: 1.8;
}


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

.contact-form-card {
    padding: 42px;

    background: #FFFFFF;

    border:
        1px solid
        var(--lwwm-border);

    border-radius: 22px;

    box-shadow:
        0 22px 60px
        rgba(25,55,69,.09);
}


/* Heading */

.contact-form-heading {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 32px;
}


.contact-form-icon {
    width: 62px;
    height: 62px;

    min-width: 62px;

    display: flex;

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

    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            var(--lwwm-blue),
            var(--lwwm-blue-dark)
        );

    border-radius: 17px;

    font-size: 25px;
}


.contact-form-heading small {
    display: block;

    margin-bottom: 3px;

    color: var(--lwwm-gold);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.contact-form-heading h2 {
    margin: 0;

    color: var(--lwwm-dark);

    font-size: 27px;

    font-weight: 800;
}


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

.contact-form-card .form-label {
    margin-bottom: 8px;

    color: #344650;

    font-size: 13px;

    font-weight: 700;
}


.contact-form-card .form-label span {
    color: #D93F3F;
}


/* Input wrapper */

.contact-input-group {
    position: relative;
}


.contact-input-group > i {
    position: absolute;

    z-index: 4;

    top: 50%;
    left: 17px;

    color: var(--lwwm-blue);

    font-size: 16px;

    transform:
        translateY(-50%);
}


.contact-input-group .form-control,
.contact-input-group .form-select {
    min-height: 52px;

    padding:
        11px 15px 11px 46px;

    color: #344650;

    background: #F9FCFD;

    border:
        1px solid
        #DCE9EE;

    border-radius: 9px;

    font-size: 14px;

    box-shadow: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.contact-input-group .form-control:focus,
.contact-input-group .form-select:focus {
    background: #FFFFFF;

    border-color:
        var(--lwwm-blue);

    box-shadow:
        0 0 0 4px
        rgba(0,162,211,.10);
}


/* Textarea */

.textarea-group > i {
    top: 18px;

    transform: none;
}


.textarea-group textarea.form-control {
    min-height: 170px;

    resize: vertical;
}


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

.contact-submit-btn {
    padding:
        13px 27px;

    color: #FFFFFF !important;

    background:
        var(--lwwm-blue);

    border:
        2px solid
        var(--lwwm-blue);

    border-radius: 8px;

    font-weight: 700;

    transition:
        all .3s ease;
}


.contact-submit-btn:hover {
    background:
        var(--lwwm-blue-dark);

    border-color:
        var(--lwwm-blue-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(0,162,211,.22);
}


/* ============================================================
   CONTACT INFORMATION
============================================================ */

.contact-info-wrapper {
    position: relative;
}


/* ============================================================
   HEAD OFFICE
============================================================ */

.contact-office-card {
    display: flex;

    gap: 18px;

    padding: 30px;

    margin-bottom: 32px;

    color: #FFFFFF;

    background:
        linear-gradient(
            145deg,
            var(--lwwm-blue-deep),
            var(--lwwm-blue)
        );

    border-radius: 20px;

    box-shadow:
        0 22px 55px
        rgba(0,126,164,.20);
}


.office-icon {
    width: 60px;
    height: 60px;

    min-width: 60px;

    display: flex;

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

    color: var(--lwwm-gold-light);

    background:
        rgba(255,255,255,.13);

    border-radius: 50%;

    font-size: 25px;
}


.office-content small {
    display: block;

    margin-bottom: 5px;

    color:
        var(--lwwm-gold-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.office-content h3 {
    margin-bottom: 15px;

    color: #FFFFFF;

    font-size: 22px;

    font-weight: 800;
}


.office-content p {
    position: relative;

    padding-left: 27px;

    margin-bottom: 11px;

    color:
        rgba(255,255,255,.88);

    font-size: 14px;

    line-height: 1.7;
}


.office-content p i {
    position: absolute;

    top: 4px;
    left: 0;

    color:
        var(--lwwm-gold-light);
}


.office-content a {
    color: #FFFFFF;

    text-decoration: none;
}


.office-content a:hover {
    color:
        var(--lwwm-gold-light);
}


/* ============================================================
   BRANCHES
============================================================ */

.branches-title {
    margin:
        0 0 20px;
}


.branches-title span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--lwwm-blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.branches-title h3 {
    margin-bottom: 7px;

    color:
        var(--lwwm-dark);

    font-size: 27px;

    font-weight: 800;
}


.branches-title p {
    color:
        var(--lwwm-text);

    font-size: 14px;

    line-height: 1.7;
}


/* Branch Card */

.branch-card {
    display: flex;

    gap: 15px;

    padding: 20px;

    margin-bottom: 14px;

    background: #FFFFFF;

    border:
        1px solid
        var(--lwwm-border);

    border-radius: 13px;

    box-shadow:
        0 9px 25px
        rgba(22,55,72,.05);

    transition:
        all .3s ease;
}


.branch-card:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(0,162,211,.35);

    box-shadow:
        0 15px 32px
        rgba(0,162,211,.09);
}


.branch-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;

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

    color: #FFFFFF;

    background:
        var(--lwwm-blue);

    border-radius: 50%;

    font-size: 17px;
}


.branch-card h4 {
    margin-bottom: 4px;

    color:
        var(--lwwm-dark);

    font-size: 16px;

    font-weight: 750;
}


.branch-card p {
    margin: 0;

    color:
        var(--lwwm-text);

    font-size: 13px;

    line-height: 1.65;
}


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

.contact-social {
    margin-top: 25px;
}


.contact-social > span {
    display: block;

    margin-bottom: 12px;

    color:
        var(--lwwm-dark);

    font-size: 13px;

    font-weight: 700;
}


.contact-social-icons {
    display: flex;

    gap: 9px;
}


.contact-social-icons a {
    width: 42px;
    height: 42px;

    display: flex;

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

    color: var(--lwwm-blue);

    background: var(--lwwm-light);

    border:
        1px solid
        var(--lwwm-border);

    border-radius: 50%;

    text-decoration: none;

    transition: all .3s ease;
}


.contact-social-icons a:hover {
    color: #FFFFFF;

    background:
        var(--lwwm-blue);

    transform:
        translateY(-4px);
}


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

@media (max-width: 991.98px) {

    .contact-page-section {
        padding:
            80px 0;
    }


    .contact-page-heading h1 {
        font-size: 39px;
    }

}


@media (max-width: 767.98px) {

    .contact-page-section {
        padding:
            65px 0;
    }


    .contact-page-heading {
        margin-bottom: 45px;
    }


    .contact-page-heading h1 {
        font-size: 32px;
    }


    .contact-form-card {
        padding:
            30px 22px;
    }


    .contact-form-heading {
        align-items:
            flex-start;
    }


    .contact-form-heading h2 {
        font-size: 23px;
    }


    .contact-office-card {
        padding:
            25px 20px;
    }

}


@media (max-width: 480px) {

    .contact-page-heading h1 {
        font-size: 29px;
    }


    .contact-form-icon {
        width: 52px;
        height: 52px;

        min-width: 52px;

        font-size: 21px;
    }


    .contact-form-card {
        border-radius: 16px;
    }


    .contact-office-card {
        flex-direction: column;
    }

}