@use "../utilities" as *;

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

.request-section{
    background-color: #191A1F;
    position: relative;
    z-index: 1;
    @include background;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .bg-img{
        @include background;
        background-size: contain;
        height: 513px;
        max-width: 845px;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50px;
        transform: translateY(-50%);
        z-index: -1;
        @include breakpoint(xxxl){
            max-width: 700px;
        }
        @include breakpoint(xxl){
            max-width: 600px;
        }
        @include breakpoint(lg){
            display: none;
        }
        &:before{
            background-color: var(--ed-color-theme-primary);
            content: "";
            height: 220px;
            width: 100px;
            position: absolute;
            bottom: 100px;
            right: -20px;
            opacity: 0.06;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            border-radius: 15px;
        }
    }
    .shape{
        position: absolute;
        top: 50px;
        right: 30px;
        z-index: -1;
    }
}

.request-content{
    p{
        color: #9FA0A0;
        max-width: 650px;
        width: 100%;
    }
    .request-form-wrapper{
        max-width: 650px;
        width: 100%;
        margin-bottom: 30px;
        .form-items{
            @include flex-vertical-center;
            justify-content: space-between;
            column-gap: 10px;
            flex-wrap: wrap;
            row-gap: 15px;
            @include breakpoint(lg){
                justify-content: start;
            }
            .form-item{
                max-width: 300px;
                width: 100%;
                .form-control{
                    background-color: transparent;
                    box-shadow: none;
                    outline: none;
                    border: 1px solid #3D3E44;
                    border-radius: 100px;
                    color: var(--ed-color-common-white);
                    padding: 14px 30px;
                    @include tp-placeholder{
                        color: var(--ed-color-common-white);
                    }
                }
            }
        }
    }
}

/* !END: Request CSS */