@use "../utilities" as *;

/**----------------------------------------
START: Theme Contact CSS
----------------------------------------*/

.contact-section{
    padding: 350px 0;
    position: relative;
    z-index: 1;
    margin-bottom: -150px;
    overflow: hidden;
    &:after,
    &:before {
        background-color: var(--mt-color-common-white);
        content: "";
        width: 100%;
        height: 250px;
        position: absolute;
        top: -1px;
        left: 0;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
        z-index: -1;
    }
    &:after {
        top: auto;
        bottom: -1px;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    }
    @include breakpoint(xl){
        &:after{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
        &:before{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
    }
    .shape{
        position: absolute;
        &.headphone{
            top: 30%;
            left: 70px;
            animation: hero-anim 2s infinite linear alternate-reverse;
            @include breakpoint(xxl){
                top: 23%;
                left: 50px;
            }
            @include breakpoint(xl){
                display: none;
            }
        }
        &.bulb{
            bottom: 30%;
            right: 70px;
            animation: hero-anim 3s infinite linear alternate-reverse;
            @include breakpoint(xxl){
                bottom: 23%;
                right: 50px;
            }
            @include breakpoint(xl){
                display: none;
            }
        }
        &.bg{
            @include background;
            background-size: contain;
            position: absolute;
            top: 0;
            right: 0;
            z-index: -2;
            &.top-shape{
                top: auto;
                right: auto;
                left: 8%;
                bottom: 0;
                width: 265px;
                height: 300px;
                @include breakpoint(xxl){
                    left: 5%;
                }
            }
            &.bottom-shape{
                width: 490px;
                height: 700px;
            }
        }
    }
}

.contact-thumb{
    padding-right: 15px;
    @include breakpoint(md){
        padding-right: 0;
        margin-bottom: 50px;
    }
    img{
        width: 100%;
    }
}

.contact-info{
    padding-left: 15px;
    @include breakpoint(md){
        padding-left: 0;
    }
    .section-heading{
        margin-bottom: 30px;
        p,
        .section-title{
            color: var(--mt-color-common-white);
            margin-bottom: 15px;
        }
    }
    .form-wrap{
        .form-group{
            .form-control{
                background-color: transparent;
                color: var(--mt-color-common-white);
                padding: 15px;
                border: 1px solid #464648;
                margin-bottom: 30px;
                box-shadow: none;
                @include tp-placeholder{
                    font-family: var(--mt-ff-body);
                    font-size: 17px;
                    color: var(--mt-color-common-white);
                }
                &:focus{
                    background-color: transparent;
                }
            }
        }
    }
}

.contact-shapes{
    @include breakpoint(xl){
        display: none;
    }
}

.contact-2{
    padding: 100px 0;
    margin-bottom: 0;
    @include breakpoint(md){
        padding: 70px 0;
    }
    @include breakpoint(sm){
        padding: 50px 0;
    }
    &:after,
    &:before{
        display: none;
    }
    .shape{
        &.headphone{
            top: 20%;
        }
        &.bulb{
            bottom: 20%;
        }
        &.bg{
            &.top-shape{
                bottom: -236px;
            }
            &.bottom-shape{
                top: -250px;
            }
        }
    }
    .contact-info{
        padding-left: 0;
        padding-right: 15px;
        @include breakpoint(md){
            padding-right: 0;
        }
        .section-heading{
            p,
            .section-title{
                color: var(--mt-color-heading-primary);
            }
        }
        .form-wrap{
            .form-group{
                .form-control{
                    background-color: transparent;
                    color: var(--mt-color-common-white);
                    padding: 15px;
                    border: 1px solid #ddd;
                    margin-bottom: 30px;
                    box-shadow: none;
                    @include tp-placeholder{
                        font-family: var(--mt-ff-body);
                        font-size: 17px;
                        color: var(--mt-color-text-body);
                    }
                    &:focus{
                        background-color: transparent;
                    }
                }
            }
        }
    }
    .contact-thumb{
        padding-left: 15px;
        @include breakpoint(md){
            padding-left: 0;
            margin-bottom: 0;
            margin-top: 30px;
        }
    }
}

.contact-top-area{
    margin-bottom: -250px;
    position: relative;
    z-index: 2;
}

.contact-item{
    display: grid;
    align-items: center;
    grid-template-columns: 75px 1fr;
    grid-gap: 30px;
    .contact-icon{
        background-color: var(--mt-color-theme-secondary);
        font-size: 25px;
        color: var(--mt-color-heading-primary);
        height: 75px;
        width: 75px;
        @include flex-center;
        border-radius: 50%;
    }
    .title{
        margin-bottom: 0;
        span{
            display: block;
            font-family: var(--mt-ff-body);
            font-size: 18px;
            font-weight: 400;
            margin-top: 10px;
        }
    }
    &.item-2{
        .contact-icon{
            color: var(--mt-color-common-white);
        }
    }
}

.map-wrapper{
    position: relative;
    z-index: 1;
    margin-top: -250px;
}

/* !END: Theme Contact CSS */
