@use '../utils' as *;

/*=============================
    	23. Contact
===============================*/
.contact {
    &__area {
        padding: 85px 0 110px;
        &-two {
            background: var(--tg-theme-secondary);
            position: relative;
            z-index: 1;
        }
    }
    &__img {
        position: absolute;
        width: 45%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
        clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
        background-size: cover;
        background-position: center;
        @media #{$xl} {
            clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
        }
        @media #{$md} {
            display: none;
        }
    }
    &__shape {
        width: 286px;
        height: 100%;
        position: absolute;
        left: 32%;
        top: 0;
        background-size: cover;
        background-position: center;
        @media #{$xxl} {
            left: 30%;
        }
        @media #{$xl} {
            left: 26%;
        }
        @media #{$lg} {
            left: 20%;
        }
        @media #{$md} {
            display: none;
        }
    }
    &-map {
        width: 100%;
        height: 420px;
        @media #{$lg} {
            height: 360px;
        }
        & iframe {
            width: 100%;
            height: 100%;
            mix-blend-mode: luminosity;
        }
    }
    &__info {
        &-item {
            position: relative;
            background: var(--tg-color-white-default);
            border: 1px solid #DEE0EE;
            padding: 45px 55px;
            @include border-radius(15px);
            z-index: 1;
            overflow: hidden;
            margin-bottom: 18px;
            @media #{$lg} {
                padding: 40px 30px;
            }
            @media #{$xs} {
                padding: 30px 30px;
            }
            &:last-child {
                margin-bottom: 0;
            }
            & .title {
                font-size: 24px;
                margin-bottom: 6px;
            }
            & p {
                margin-bottom: 10px;
                font-size: 20px;
                font-weight: 500;
            }
            & .list-wrap {
                & li {
                    margin-bottom: 3px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    & a {
                        color: var(--tg-body-color);
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 1.4;
                        position: relative;
                        &::before {
                            content: "";
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 0%;
                            height: 1px;
                            background: var(--tg-theme-primary);
                            @include transition(.4s);
                        }
                        &:hover {
                            color: var(--tg-theme-primary);
                            &::before {
                                width: 100%;
                            }
                        }
                    }
                }
            }
            & .shape {
                position: absolute;
                right: -19px;
                bottom: -13px;
                color: #F4F5F8;
                z-index: -1;
            }
        }
    }
    &__form {
        &-wrap {
            background: var(--tg-color-gray-1);
            padding: 50px 60px 55px;
            @include border-radius(15px);
            margin-left: 30px;
            @media #{$lg} {
                padding: 35px 35px 40px;
            }
            @media #{$md} {
                margin-left: 0;
                margin-top: 50px;
            }
            @media #{$xs} {
                padding: 35px 30px 40px;
            }
            & .title {
                margin-bottom: 20px;
                font-size: 30px;
                font-weight: 600;
                text-transform: capitalize;
                @media #{$xs} {
                    font-size: 26px;
                }
            }
        }
        & .form-grp {
            margin-bottom: 15px;
            & > label {
                font-size: 16px;
                font-weight: 500;
                color: var(--tg-body-color);
                line-height: 1;
                margin-bottom: 14px;
            }
        }
        & .checkbox-grp {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: flex-start;
            margin: 20px 0;
            & input {
                width: 18px;
                margin-right: 9px;
                height: 18px;
                cursor: pointer;
                flex: 0 0 auto;
                margin-top: 3px;
            }
            & label {
                font-weight: 400;
                font-size: 16px;
                color: var(--tg-body-color);
                user-select: none;
                margin-bottom: 0;
                line-height: 1.2;
            }
        }
        &-two {
            & .row {
                --bs-gutter-x: 10px;
            }
            & .form-grp {
                margin-bottom: 10px;
                & textarea,
                & input {
                    border: none;
                }
            }
            & button {
                width: 100%;
                background: var(--tg-theme-primary);
                border: none;
                font-size: 16px;
                font-weight: 600;
                text-transform: uppercase;
                @include border-radius(6px);
                color: var(--tg-color-white-default);
                padding: 16px 20px;
                &:hover {
                    background: var(--tg-color-gray-1);
                    color: var(--tg-theme-primary);
                }
            }
        }
    }
}


.ajax-response {
    &.error,
    &.success {
        margin: 20px 0 0 !important;
    }
    &.error {
        color: red;
    }
    &.success {
        color: green;
    }
}