.question-recommender {
    height: 100vh;
    width: 100%;
    padding-inline: 10vw;
    font-family: 'Montserrat';
    display: flex;
    position: relative;
}

.question-recommender-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-basis: 45%;
    justify-content: center;
}

.question-recommender-title {
    font-size: 30px;
    line-height: 135%;
}

.question-recommender-explanation {
    font-weight: 500;
    line-height: 155%;
    font-size: 16px;
}

.doelgerichte::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -150%;
    left: 0;
    background-image: url('/images/green-arrow.svg'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* This will cover the entire area of the pseudo-element */
    width: 175%;
}

.question-recommender-illustration {
    display: flex;
    flex-grow: 1;
    position: relative;
    flex-direction: column;
    justify-content: center;
}

.question-recommender-button-wrapper {
    display: flex;
    justify-content: center;
    z-index: 1;
}

.cta-question-recommender {
    font-weight: 600;
    font-size: 18px;
    border-radius: 30px;
    background: var(--call-to-action-color);
    padding: 20px 30px;
    border: none;
    outline: none;
    font-family: inherit;
    color: #000;
}

.targer-illustration {
    position: absolute;
    width: 20vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.illustration-question-recommender {
    font-weight: 700;
    font-size: 20px;
    position: absolute;
}

.advertenties-illustration {
    top: 28%;
    transform: rotate(-23deg);
}

.advertenties-illustration::after {
    content: "";
    position: absolute;
    top: -175%;
    bottom: -218%;
    left: 0;
    background-image: url('/images/advertenties-illustration.svg'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* This will cover the entire area of the pseudo-element */
    width: 100%;
    transform: rotate(5deg);
}

.verouderde-informatie-illustration {
    top: 27%;
    transform: rotate(17deg);
    right: 0;
}

.verouderde-informatie-illustration::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -59%;
    left: -5%;
    background-image: url('/images/verouderde-informatie-illustration.svg'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* This will cover the entire area of the pseudo-element */
    width: 110%;
    transform: rotate(-8deg);
}

.lange-teksten-illustration {
    bottom: 27%;
    transform: rotate(16deg);
}

.lange-teksten-illustration::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -36%;
    left: -5%;
    background-image: url('/images/lange-teksten-illustration.svg'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* This will cover the entire area of the pseudo-element */
    width: 110%;
    transform: rotate(-8deg);
}

.popups-illustration {
    top: 50%;
    transform: rotate(-13deg);
    right: -10%;
}

.popups-illustration::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -91%;
    left: -25%;
    background-image: url('/images/popups-illustration.svg'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* This will cover the entire area of the pseudo-element */
    width: 156%;
}

.koop-nu-illustration {
    bottom: 25%;
    transform: rotate(-10deg);
    right: -5%;
}

.koop-nu-illustration::after {
    content: "";
    position: absolute;
    top: -52%;
    bottom: -136%;
    left: -25%;
    background-image: url('/images/“koop nu!”-knoppen-illustration.svg'); /* Replace with your image path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* This will cover the entire area of the pseudo-element */
    width: 156%;
    transform: rotate(10deg);
}

.tablet-5 {
    position: absolute;
    bottom: -12%;
    left: -5%;
    width: 12vw;
}

.tablet-8 {
    position: absolute;
    bottom: -20%;
    right: 40%;
    width: 17vw;
    rotate: 180deg;
}

.coming-soon-question-recommender {
    position: absolute;
    z-index: 2;
    width: 35vw;
    top: 25%;
    left: 5%;
}


@media only screen and (min-width: 1600px) {
    .question-recommender-title {
        font-size: 37px;
    }

    .question-recommender-explanation {
        font-size: 18px;
    }

    .illustration-question-recommender {
        font-size: 24px;
    }

    .cta-question-recommender {
        font-size: 22px;
    }

    .question-recommender {
        gap: 10%;
    }
}

@media only screen and (max-width: 1600px) {
    .question-recommender-title {
        font-size: 30px;
    }

    .question-recommender-explanation {
        font-size: 16px;
    }

    .illustration-question-recommender {
        font-size: 20px;
    }

    .cta-question-recommender {
        font-size: 18px;
    }

    .question-recommender {
        gap: 10%;
    }
}

@media only screen and (max-width: 1450px) {
    .question-recommender-content {
        flex-basis: 50%;
    }

    .question-recommender {
        gap: 5%;
    }
}

@media only screen and (max-width: 1300px) {
    .question-recommender-content {
        flex-basis: 55%;
    }

    .question-recommender {
        gap: 5%;
    }

    .doelgerichte::after {
        width: 150%;
    }

    .illustration-question-recommender {
        font-size: 18px;
    }

    .coming-soon-question-recommender {
        left: 0;
    }
}

@media only screen and (max-width: 1200px) {
    .coming-soon-question-recommender {
        top: 30%;
    }

    .doelgerichte::after {
        bottom: -110%;
    }

    .cta-question-recommender {
        font-size: 16px;
    }

    .illustration-question-recommender {
        font-size: 17px;
    }
}

@media only screen and (max-width: 1050px) {
    .question-recommender {
        flex-direction: column;
        margin-top: 100px;
        height: auto;
        gap: 25px;
        margin-bottom: 75px;
    }

    .doelgerichte::after {
        display: none;
    }

    .targer-illustration {
        width: 40vw;
    }

    .tablet-5 {
        display: none;
    }
    
    .tablet-8 {
        display: none;
    }

    .question-recommender-content {
        flex-basis: auto;
    }

    .question-recommender-illustration {
        flex-grow: 0;
        flex-direction: row;
        padding-block: 50px;
    }

    .targer-illustration {
        position: static;
        width: 40vw;
        transform: none;
    }

    .cta-question-recommender {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .coming-soon-question-recommender {
        width: 45vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .advertenties-illustration {
        top: 15%;
        left: 15%;
    }

    .verouderde-informatie-illustration {
        top: 12.5%;
        right: 12.5%;
    }

    .lange-teksten-illustration {
        bottom: 15%;
        left: 15%
    }

    .koop-nu-illustration {
        bottom: 10%;
        right: 12.5%;
    }

    .popups-illustration {
        display: none;
    }    
}

@media only screen and (max-width: 600px) {
    .targer-illustration {
        width: 50vw;
    }

    .coming-soon-question-recommender {
        width: 60vw;
    }

    .advertenties-illustration {
        top: 11%;
        left: 10%;
    }

    .verouderde-informatie-illustration {
        top: 10%;
        right: 4%;
    }

    .lange-teksten-illustration {
        bottom: 10%;
        left: 10%
    }

    .koop-nu-illustration {
        bottom: 9%;
        right: 6%;
    }

    .cta-question-recommender {
        width: 57.5%;
    }
}

@media only screen and (max-width: 500px) {
    .illustration-question-recommender {
        font-size: 16px;
    }

    .question-recommender {
        overflow: hidden;
    }
}

@media only screen and (max-width: 450px) {
    .targer-illustration {
        width: 60vw;
    }

    .cta-question-recommender {
        width: 67.5%;
    }

    .coming-soon-question-recommender {
        width: 85vw;
    }

    .advertenties-illustration {
        top: 12%;
        left: 0;
    }

    .verouderde-informatie-illustration {
        top: 11%;
        right: -10%;
    }

    .lange-teksten-illustration {
        bottom: 10%;
        left: 0
    }

    .koop-nu-illustration {
        bottom: 10%;
        right: -10%;
    }
}