:root {
    --para-font-size-resposive: 10px;
}

@media only screen and (max-width:1310px) {
    .wrapper {
        padding: 30px;
    }
    .wrapper::before {
        display: none;
    }
    .wrapper .left-div,
    .wrapper .right-div {
        padding: 50px;
    }
    .wrapper .right-div .texts p {
        width: 90%;
        font-size: var(--para-font-size-resposive);
    }
    .wrapper .left-div .heading-texts p {
        font-size: var(--para-font-size-resposive);
    }
}

@media only screen and (max-width:500px) {
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0px;
        border-radius: 14px;
        width: 90%;
    }
    .wrapper::before {
        display: none;
    }
    .wrapper .right-div {
        display: none;
    }
    .wrapper .left-div {
        flex-basis: 100%;
        padding: 0px 30px;
    }
    .wrapper .left-div .heading-texts p {
        font-size: var(--para-font-size-resposive);
    }
}