/*------------------------------------*\
    #Contacts
\*------------------------------------*/

.contact {
    position: relative;

    .contact-action {
        margin-bottom: 100px;

        @media #{$maxSmall} {
            display       : flex;
            flex-direction: column;
            align-items   : center;
            margin-bottom : 50px;
        }

        .btn {
            display        : inline-flex;
            justify-content: space-between;
            width          : 180px;
            height         : 65px;
            margin-right   : 40px;

            @media #{$noteBook} {
                margin-right: 10px;
            }

            @media #{$maxTablet} {
                margin: 0 30px 0 0;
            }

            @media #{$maxSmall} {
                margin-right : 0;
                margin-bottom: 15px;
                height       : 50px;
            }

            i {
                color     : inherit;
                transition: 0.3s ease-in-out;
                font-size : 10px;
            }

            &:first-child {
                i {
                    color: #063464;
                }

                &:hover {
                    i {
                        color: var(--global--color-white);
                    }
                }
            }

            &:last-child {
                padding     : 0 28px;
                margin-right: 0;
            }

            &.btn--white {
                box-shadow: 0px 3px 63px 0px rgba(6, 52, 100, 0.11);
            }
        }

        &.contact-action-2 {
            display      : flex;
            align-items  : center;
            margin-bottom: 85px;

            @media #{$maxTablet} {
                justify-content: center;
            }

            @media #{$maxSmall} {
                flex-direction: column;
            }

            .contact-icons {
                margin-right: 40px;

                @media #{$maxSmall} {
                    margin-right : 0;
                    margin-bottom: 30px;

                    .icon {
                        margin-bottom: 0;
                    }
                }
            }

            .btn {
                &:hover {
                    i {
                        color: var(--global--color-white);
                    }
                }

                i {
                    transition: 0.3s ease-in-out;
                }
            }
        }
    }

    .contact-icons {
        display    : flex;
        flex-wrap  : no-wrap;
        align-items: center;

        @media #{$maxTablet} {
            flex-wrap      : wrap;
            justify-content: center;
        }

        .icon {
            max-width      : 130px;
            margin-right   : 20px;
            display        : inline-flex;
            justify-content: center;
            align-items    : center;
            flex-direction : column;
            position       : relative;
            transition     : 0.3s ease-in-out;

            @media #{$minLarge} {
                align-items: flex-start;
            }

            @media #{$noteBook} {
                margin-right: 20px;
            }

            @media #{$maxSmall} {
                margin-right: 0;
                margin      : 0 15px 25px;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            &:hover {
                transform: translateY(-5px);
            }

            i {
                display      : inline-block;
                margin-bottom: 26px;
                font-size    : 65px;
                color        : var(--global--color-white);
            }

            h4 {
                font-family  : var(--global--font-heading);
                color        : var(--global--color-white);
                font-size    : 18px;
                font-weight  : 500;
                line-height  : 27px;
                margin-bottom: 0
            }

            a {
                @include overlay(transparent);
                z-index: 2;
            }
        }

        &.contact-icons-2 {
            .icon {
                margin-right: 40px;
                max-width   : unset;

                &:last-child {
                    margin-right: 0;
                }

                i {
                    margin-bottom: 0;
                }
            }
        }
    }

    .contact-overlay {
        position     : absolute;
        top          : 50%;
        left         : 50%;
        transform    : translate(-50%, -50%);
        width        : calc(100% - 5%);
        border-radius: 8px;
        height       : 100%;
        z-index      : 1;

        @media #{$noteBook} {
            width: calc(100% - 2%);
        }

        @media #{$maxSmall} {
            width        : 100%;
            border-radius: 8px 8px 0 0;
        }
    }

    .contact-content {
        position: relative;
        z-index : 2;
    }

    &.contact-1 {
        padding-top   : 110px;
        padding-bottom: 0;
        overflow      : visible;
        position      : relative;
        z-index       : 5;

        @media #{$maxTablet} {
            padding-top   : 70px;
            padding-bottom: 63px;
        }

        .contact-panel {
            .contact-card {
                @media #{$minLarge} {
                    transform : translateY(50px);
                    margin-top: -50px;
                }
            }
        }
    }

    &.contact-2 {
        padding-top   : 110px;
        padding-bottom: 110px;

        @media #{$maxTablet} {
            padding-top   : 70px;
            padding-bottom: 70px;
        }

        .contact-panel {
            .heading {
                @media #{$maxTablet} {
                    margin-bottom: 50px;
                }
            }

            .contact-card {
                margin-bottom: 0;
            }
        }
    }

    &.contact-3 {
        padding : 0;
        overflow: visible;
        position: relative;
        z-index : 5;
    }
}

.contact-panel {
    display : flex;
    position: relative;

    @media #{$maxTablet} {
        flex-direction: column;
    }

    @media #{$minLarge} {
        justify-content: space-between;
    }

    .heading {
        z-index: 4;

        @media#{$minLarge} {
            flex-basis   : 40%;
            flex-shrink  : 0;
            margin-bottom: 0;
            transform    : translateY(-12px);
            margin-bottom: -12px;
        }

        @media #{$noteBook} {
            flex-basis: 46%;
        }
    }

    .contact-card {
        z-index: 4;

        @media #{$minLarge} {
            flex-basis : 54%;
            flex-shrink: 0;
        }

        @media #{$noteBook} {
            flex-basis: 50%;
        }

        @media #{$maxTablet} {
            margin-bottom: 50px;
        }
    }

    &.contact-panel-2 {
        .heading {
            @media#{$minLarge} {
                transform    : translateY(-6px);
                margin-bottom: -6px;
            }
        }
    }

    &.contact-panel-3 {
        transform       : translateY(-145px);
        margin-bottom   : -145px;
        padding         : 60px 70px 60px;
        background-color: var(--global--color-white);
        box-shadow      : 0px 5px 83px 0px rgba(3, 43, 86, 0.12);
        border-radius   : 4px;
        z-index         : 5;

        @media #{$noteBook} {
            padding-left : 40px;
            padding-right: 40px;
        }

        @media #{$maxSmall} {
            padding-left : 25px;
            padding-right: 25px;
        }

        .contact-card {
            padding-top   : 0;
            padding-bottom: 0;
            padding-left  : 0;
            box-shadow    : none;

            @media #{$maxTablet} {
                padding-right: 0;
            }

            @media #{$noteBook} {
                padding-right: 0;
            }

            .contact-body {
                .card-desc {
                    margin-bottom: 32px;
                }

                textarea {
                    &.form-control {
                        margin-bottom: 40px;
                    }
                }

                .btn {
                    height: 75px;
                    width : 100%;

                    i {
                        font-size: 10px;
                    }
                }
            }

            .contact-result {
                margin-top: 0;
            }
        }
    }

}

.contact-card {
    background-color: var(--global--color-white);
    padding         : 47px 50px 40px;
    border-radius   : 4px;
    box-shadow      : 0px 5px 83px 0px rgba(3, 43, 86, 0.12);
    position        : relative;
    height          : max-content;

    @media #{$noteBook} {
        padding: 37px 25px 30px;
    }

    @media #{$maxSmall} {
        padding: 37px 25px 30px;
    }

    .contact-body {
        .card-heading {
            font-family   : var(--global--font-heading);
            font-size     : 24px;
            line-height   : 1;
            font-weight   : 700;
            text-transform: capitalize;
            color         : #05213f;
            margin-bottom : 20px;

            @media #{$maxTablet} {
                text-align : center;
                line-height: 1.4;
            }
        }

        .card-desc {
            font-family  : var(--global--font-body);
            font-weight  : 400;
            font-size    : 15px;
            line-height  : 25px;
            color        : #8e949e;
            margin-bottom: 28px;

            @media #{$maxTablet} {
                text-align: center;
            }
        }

        form {
            margin-bottom: 0;

            .form-control {
                margin-bottom: 26px;
            }
        }

        .custom-radio-group {
            margin-bottom: 22px;
        }

        .btn {
            justify-content: space-between;
            height         : 60px;

            @media #{$minTablet} {
                height: 75px;
            }

            i {
                font-size: 10px;
            }
        }

        .contact-result {
            margin-top: 10px;
            text-align: center;
        }
    }

    &.contact-card-2 {
        @media #{$maxTablet} {
            margin-bottom: 70px;
        }

        .custom-radio-group {
            flex-wrap: wrap;
        }

        .price-value {
            display         : block;
            width           : 100%;
            color           : var(--global--color-body);
            font-size       : 14px;
            font-weight     : 700;
            height          : 55px;
            line-height     : 1;
            border-radius   : 4px;
            background-color: #e6eaef;
            border          : 0;
            padding-left    : 25px;
            margin-bottom   : 50px;
            color           : #1d65b9;
        }

        .block-info {
            &:first-child {
                border-bottom: 2px solid #e6eaef;
                margin-bottom: 42px;
            }
        }
    }
}


.img-card-holder {
    display       : flex;
    flex-direction: column;

    .img-card {
        border-radius : 4px;
        flex-shrink   : 0;
        height        : auto;
        padding       : 44px 50px 47px;
        display       : flex;
        align-items   : flex-end;
        text-align    : center;
        display       : flex;
        flex-direction: column;
        flex-grow     : 1;

        @media #{$minLarge} {
            text-align: left;
        }

        @media #{$noteBook} {
            padding-left : 25px;
            padding-right: 25px;
        }

        @media #{$maxSmall} {
            padding-left : 20px;
            padding-right: 20px;
        }

        .card-content {
            max-width      : 100%;
            flex-direction : column;
            display        : flex;
            flex-grow      : 1;
            justify-content: space-between;
            position       : relative;
            z-index        : 3;

            .content-top {
                @media #{$maxTablet} {
                    margin-bottom: 30px;
                }

                .heading-subtitle {
                    font-family   : var(--global--font-secondary);
                    text-transform: capitalize;
                    color         : var(--global--color-white);
                    font-size     : 30px;
                    font-weight   : 400;
                    line-height   : 1;
                    margin-bottom : 19px;
                }

                .heading-title {
                    font-family   : var(--global--font-heading);
                    text-transform: capitalize;
                    color         : var(--global--color-white);
                    font-size     : 22px;
                    font-weight   : 700;
                    line-height   : 33px;
                    margin-bottom : 26px;
                }

                .heading-desc {
                    font-family   : var(--global--font-body);
                    text-transform: capitalize;
                    color         : #f9f9f9;
                    font-size     : 16px;
                    font-weight   : 700;
                    line-height   : 27px;
                    margin-bottom : 0px;
                }
            }

            .content-bottom {
                .contact-infos {
                    margin-bottom: 0;

                    .contact-info {
                        display      : flex;
                        align-items  : center;
                        margin-bottom: 14px;

                        &:last-child {
                            margin-bottom: 0;
                        }

                        i {
                            color       : #f4f4f4;
                            font-size   : 16px;
                            margin-right: 10px;
                        }

                        a,
                        p {
                            font-family   : var(--global--font-body);
                            line-height   : 22px;
                            font-size     : 14px;
                            font-weight   : 700;
                            margin-bottom : 0;
                            color         : #f4f4f4;
                            text-transform: capitalize;
                        }

                        a {
                            &:hover {
                                color: var(--global--color-heading);
                            }
                        }
                    }
                }

                .btn {
                    width     : 150px;
                    height    : 55px;
                    box-shadow: 0px 3px 63px 0px rgba(40, 40, 40, 0.11);
                    padding   : 0 20px;
                    color     : var(--global--color-primary);

                    i {
                        color: var(--global--color-primary);
                    }

                    &:hover {
                        color: var(--global--color-white);

                        i {
                            color: var(--global--color-white);
                        }
                    }

                    @media #{$maxTablet} {
                        display: inline-flex;
                    }
                }
            }
        }
    }
}



.map {
    position: relative;
    height  : 510px;

    iframe {
        position: absolute;
        top     : 0;
        left    : 0;
        right   : 0;
        height  : 100%;
        width   : 100%;

        &.map-gray {
            filter: brightness(104%) contrast(99%) saturate(0%) blur(0px) hue-rotate(0deg);
        }
    }
}


.mb-20 {
    margin-bottom: 20px !important;
}