@use "../utilities" as *;

/**----------------------------------------
    START: Request CSS
----------------------------------------*/

.request-section{
    background-color: #EBF3FF;
    position: relative;
    z-index: 1;
    overflow: hidden;
    .bg-color{
        background-color: var(--bz-color-common-white);
        width: 100%;
        height: 76px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .shapes{
        .shape{
            position: absolute;
            z-index: -1;
            &.shape-1{
                bottom: 0;
                left: 0;
            }
            &.shape-2{
                top: 60%;
                right: 0;
                transform: translateY(-50%);
            }
        }
    }
}

.request-form-wrap{
    max-width: 530px;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    .form-header{
        background-color: var(--bz-color-theme-primary);
        color: var(--bz-color-common-white);
        padding: 20px 40px;
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 0;
    }
    .request-form{
        background-color: var(--bz-color-common-white);
        padding: 40px;
        .form-control{
            border: 1px solid var(--bz-color-border-1);
            box-shadow: none;
            padding: 13px 20px;
            margin-bottom: 15px;
        }
    }
}

.request-img-wrap{
    position: relative;
    height: 665px;
    .men{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
    .bg-img{
        position: absolute;
        top: 76px;
        right: 0;
        height: 525px;
    }
}

// Request 2

.request-section-2{
    @include background;
    width: 100%;
    height: 100%;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    max-width: 1860px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    .request-bg-img{
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        max-width: 845px;
        width: 100%;
        clip-path: polygon(22% 0%, 100% 0, 100% 100%, 0% 100%);
        z-index: -1;
        @include breakpoint(md){
            display: none;
        }
        img{
            filter: saturate(0) contrast(110%);
            width: 100%;
            height: 100%;
        }
        &:before{
            background: #1E6EE7;
            content: "";
            mix-blend-mode: multiply;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
    }
}

.request-form-wrap.wrap-2{
    background-color: var(--bz-color-common-white);
    padding: 60px 50px;
    @include breakpoint(md){
        margin: 0 auto;
        margin-bottom: 30px;
    }
    @include breakpoint(sm){
        padding: 30px;
    }
    .form-header{
        background-color: var(--bz-color-common-white);
        color: var(--bz-color-heading-primary);
        padding: 0;
        padding-bottom: 0;
        margin-bottom: 15px;
    }
    p{
        margin-bottom: 30px;
    }
    .request-form{
        padding: 0;
    }
}

.request-map-wrapper{
    max-width: 625px;
    width: 100%;
    height: 475px;
    border: 5px solid var(--bz-color-common-white);
    border-radius: 15px;
    position: relative;
    z-index: 2;
    margin-left: 30px;
    @include breakpoint(md){
        margin: 0 auto;
    }
    iframe{
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
}

/* !END: Request CSS */
