@use '../utils' as *;
.quote-form-one {
    &__wrapper {
        position: relative;
    }
    .quote-form-one__img1 {
        position: absolute;
        left: 3%;
        top: 20%;
        animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
        @media #{$xxl} {
            left: 4%;
        }
        @media #{$xl} {
            left: 4%;
        }
        @media #{$lg} {
            left: 4%;
        }
        @media #{$md} {
            left: 5%;
            top: 5%;
        }
        @media #{$xs} {
            left: 15%;
            top: -6%;
        }
    }
    .quote-form-one__img2 {
        position: absolute;
        left: 6%;
        bottom: 27%;
        animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
        @media #{$xxl} {
            left: 2%;
        }
        @media #{$xl} {
            left: 1%;
        }
        @media #{$lg} {
            left: 2%;
        }
        @media #{$md} {
            left: 3%;
            bottom: 60%;
        }
        @media #{$sm} {
            bottom: 10%;
        }
        @media #{$xs} {
            bottom: -4%;
            left: 4%;
        }
    }
    .quote-form-one__img3 {
        position: absolute;
        right: 27%;
        bottom: 0;
        animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
        @media #{$xxl} {
            bottom: 15%;
        }
        @media #{$lg} {
            right: 65%;
        }
    }
    .quote-form-one__img4 {
        position: absolute;
        top: 55%;
        right: 8%;
        animation: rrdevsrotate 6s ease-in-out 0.1s forwards infinite alternate;
        @media #{$xxl} {
            right: 2%;
        }
        @media #{$xl} {
            right: 2%;
        }
        @media #{$lg} {
            top: 65%;
            right: 2%;
        }
        @media #{$md} {
            top: 80%;
            right: 4%;
        }
        @media #{$xs} {
            top: 48%;
        }
    }
    .quote-form-one__img5 {
        position: absolute;
        top: 25%;
        right: 8%;
        animation: rrdevsleftright 6s ease-in-out 0.1s forwards infinite alternate;
        @media #{$xxl} {
            right: 2%;
        }
        @media #{$xl} {
            right: 1%;
        }
        @media #{$lg} {
            top: 22%;
            right: 40%;
        }
        @media #{$md} {
            top: 65%;
            right: 2%;
        }
        @media #{$xs} {
            top: 39%;
            right: 4%;
        }
    }
    .quote-form-one__img {
        position: relative;
        @media #{$md} {
            margin-bottom: 30px;
        }
        @media #{$sm} {
            margin-bottom: 30px;
        }
        @media #{$xs} {
            margin-bottom: 30px;
        }
        .quote-form-one__img-animation1 {
            position: absolute;
            top: 0;
            right: 50px;
            animation: rrdevsanimation1 6s infinite linear alternate;
            @media #{$lg} {
                right: 32%;
            }
            @media #{$xs} {
                right: -35px;
            }
        }
        .quote-form-one__img-animation2 {
            position: absolute;
            left: -140px;
            bottom: 65px;
            animation: rrdevsupdown 2s infinite alternate;
            @media #{$xxl} {
                left: -60px;
            }
            @media #{$xl} {
                left: -70px;
            }
            @media #{$lg} {
                left: -60px;
            }
            @media #{$md} {
                left: -70px;
            }
            @media #{$sm} {
                left: -65px;
            }
            @media #{$xs} {
                left: -52px;
                bottom: 0;
            }
        }
    }
    .quote-form-one__content {
        @media #{$lg} {
            margin-top: 50px;
        }
        .quote-form-one__title {
            color: #0B1728;
            text-align: center;
            font-family: $montserrat;
            font-size: 44px;
            font-style: normal;
            font-weight: 700;
            line-height: 54px;
            text-align: left;
            margin-bottom: 24px;
        }
        p {
            color: #0B1728;
            font-family: $montserrat;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 26px;
        }
        .contact-quote-form {
            position: relative;
            input,
            textarea {
                color: rgba(11, 23, 40, 0.6);
                font-family: $montserrat;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 26px;
                width: 100%;
                height: 46px;
                border-radius: 10px;
                padding: 18px 24px;
                border: 1px solid rgba(11, 23, 40, 0.14);
                background: #FFF;
                margin-bottom: 20px;
                &::placeholder {
                    color: rgba(11, 23, 40, 0.6);
                }
            }
            input {
                height: 46px;
            }
            textarea {
                height: 180px;
            }
        }
    }
}