.refer-banner__wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.refer-banner__wrapper__left-side {
    top: 0px;
    position: relative;
    z-index: 999;
    width: 81%;
}
.refer__left-side{
    top: -3px;
    right: -17px;
}
.refer-header-title{
    position: relative;
    top: -21px;
}
.refer-header-desc{
    width: 500px;
    position: relative;
    top: -54px;
}

.try-button{
    position: relative;
    top: -64px;
}

.main-text-desc{
    width: 560px;
    border-left: 4px solid #30D3A6;
}
.delivery-content{
    top: 71px;
    right: 64px !important;
}

.refer-banner__wrapper__right-side__percentage__numbers {
    font-family: Futura PT;
    font-style: normal;
    font-size: 108px;
    font-weight: 600;
    line-height: 104.2%;
    color: #FFFFFF;
    /*display: flex;*/
    /*justify-content: flex-end;*/
}
.whatsapp-advantages h3{
    margin-bottom: 0;
}
.whatsapp-advantages h4{
    margin-top: 10px;
}
.delivery-right h3{
    margin-bottom: 20px;

}
.delivery-right{
    top: 60px;
}
.refer-banner__wrapper__right-side__percentage__desc {
    margin-top: -20px;
    width: 250px;
    font-family: Futura PT;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 28px;
    color: #80889A;
    margin-left: 88%;
    opacity: 0.3;
}

.refer-banner__wrapper__right-side__percentage {
    position: relative;
    margin-top: 30px;
}

.refer-banner__wrapper__right-side {
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 690px;
    right: 119px;
    top: 114px;
    position: absolute;
}


@media (max-width: 1245px){
    .refer-banner__wrapper__right-side{
        right: 0px;

    }
    .refer-banner__wrapper__right-side__percentage-20{
        left: 90px;
    }
    .refer-banner__wrapper__right-side__percentage-5{
        left: 150px;
    }
    .refer-header-desc{
        top: -25px;
    }

}

.refer-banner__wrapper__right-side__percentage__background-lights {
    position: absolute;
    margin-top: -20px;
    margin-left: 20px;
    width: 200px;
    height: 200px;
    /* opacity: 0.8; */
    background-color: #725FE4;
    filter: blur(150px);
}

/* ACTIVE */
.refer-banner__wrapper__right-side .active .refer-banner__wrapper__right-side__percentage__numbers{
    animation: opacity-from-active  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .active .refer-banner__wrapper__right-side__percentage__desc{
    animation: opacity-from-active  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .active .refer-banner__wrapper__right-side__percentage__background-lights{
    animation: opacity-from-active  7s infinite ease-in-out;
}

/* HALF ACTIVE */
.refer-banner__wrapper__right-side .half-active .refer-banner__wrapper__right-side__percentage__numbers{
    animation: opacity-from-half  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .half-active .refer-banner__wrapper__right-side__percentage__desc{
    animation: opacity-from-half  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .half-active .refer-banner__wrapper__right-side__percentage__background-lights{
    animation: opacity-from-half  7s infinite ease-in-out;
}

/* LOW ACTIVE */
.refer-banner__wrapper__right-side .low-active .refer-banner__wrapper__right-side__percentage__numbers{
    animation: opacity-from-low  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .low-active .refer-banner__wrapper__right-side__percentage__desc{
    animation: opacity-from-low  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .low-active .refer-banner__wrapper__right-side__percentage__background-lights{
    animation: opacity-from-low  7s infinite ease-in-out;
}

.refer-banner__wrapper__right-side .active{
    animation: float-first 9s ease-in-out infinite;
}

.refer-banner__wrapper__right-side .half-active{
    animation: float-second 8s ease-in-out infinite;
}

.refer-banner__wrapper__right-side .low-active{
    animation: float-third 7s ease-in-out infinite;
}


.refer-banner__wrapper__right-side .right{
    margin-left: 45%;
}

.title-advantages{
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
}
.title-mini-header{
    width: 100%;
    text-align: center;
    margin-bottom: 45px;
    margin-top: -70px;
}


@keyframes float-first {
    from {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes float-second {
    from {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-7px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes float-third {
    from {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes opacity-from-low {

    from {
        opacity: 0.1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.5;
    }

    to {
        opacity: 0.1;
    }
}

@keyframes opacity-from-half {

    from {
        opacity: 0.5;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    75% {
        opacity: 0.1;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes opacity-from-active {

    from {
        opacity: 1;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.1;
    }

    75% {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.refer-banner__color-background {
    top: 0;
    /* left: 0; */
    width: 100vw;
    height: 100vh;
    position: absolute;
}

@media screen and (max-width: 991px){
    .refer-banner__wrapper__left-side{
        top: 150px;
    }

    .refer-banner__color-background {
        top: 0;
        left: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: absolute;
    }
    .refer-banner__color-background img{
        width: 100vw;
    }
    .refer-banner__wrapper {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 50px;
        margin-top: 155px;
        flex-direction: column-reverse;
    }

    .refer-banner__wrapper__left-side {
        order: 2;
        z-index: 999;
        width: 100%;
        position: relative;
        top: 0;
    }

    .banner-numbers {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
    }

    .refer-banner__wrapper__right-side .right{
        margin-left: 40%;
    }

    .refer-banner__wrapper__right-side__percentage__numbers {
        font-family: Futura PT;
        font-style: normal;
        font-weight: 300;
        margin-right: 10px;
        font-size: 65px;
        line-height: 104.2%;
        color: #FFFFFF;
        display: flex;
        box-sizing: border-box;
        justify-content: center;
    }

    .refer-banner__wrapper__right-side__percentage__desc {
        box-sizing: border-box;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 5px;
        width: auto;
        font-family: Futura PT;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 20px;
        color: #80889A;
        opacity: 0.3;
    }

    .refer-banner__wrapper__right-side__percentage {
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0px;
    }

    .refer-banner__wrapper__right-side {
        left: 0;
        margin-bottom: 20px;
        /*z-index: 999;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        top: -237px;
        margin-top: 0;
    }

    .refer-banner__wrapper__right-side__percentage__background-lights {
        position: absolute;
        margin-top: -20px;
        margin-left: -10px;
        width: 100px;
        height: 100px;
        /* opacity: 0.8; */
        background-color: #725FE4;
        filter: blur(70px);
    }
    .refer-banner__wrapper__right-side__percentage-20 {
        left: -230px;
        top: -168px;
    }
    .refer-banner__wrapper__right-side__percentage-10 {
        top: -74px;
        left: -52px;
    }
    .refer-banner__wrapper__right-side__percentage-5 {
        top: 4px;
        left: -113px;
    }

}

@media (max-width: 950px){
    .container {
        width: 90%;
    }
    .delivery-content{
        right: 50px !important;
    }
    .refer-header-desc{
        width: 384px;

    }
}
@media (max-width: 830px){
    .refer-banner__wrapper__right-side__percentage-20 {
        left: -130px;
        top: -168px;
    }
    .refer-banner__wrapper__right-side__percentage-10 {
        top: -74px;
        left: -52px;
    }
    .refer-banner__wrapper__right-side__percentage-5 {
        top: -30px;
        left: -43px;
    }
}

@media (max-width: 750px){
    .refer-banner__wrapper__left-side{
        top: 330px;
    }
    .refer-banner__wrapper__right-side__percentage-20 {
        left: -50vw;
        top: -288px;
    }
    .refer-banner__wrapper__right-side__percentage-10 {
        top: -260px;
        left: unset;
        right: 15px;
    }
    .refer-banner__wrapper__right-side__percentage-5 {
        top: -189px;
        left: unset;
        right: 40vw;
    }
    .refer-header-desc {
        width: 100%;
        height: 177px;
    }
    .try-button {
        top: -145px;
    }
    .title-mini-header {
        margin-top: -36px;
    }

}

@media screen and (max-width: 575px){
    .main-text-desc {
        width: 100%;
    }
    .refer-banner__wrapper__right-side__percentage-20 {
        left: -36vw;
        top: -274px;
    }
    .refer-banner__wrapper__right-side__percentage-5 {
        right: 18vw;
    }
    .refer-banner__wrapper__right-side__percentage-10 {
        top: -229px;
    }
    .try-button {
        top: -117px;
    }
}