.how-works-container{
    display: flex;
    justify-content: space-between;
}

.how-works-item{
    position: relative;
    background: url(../../img/how-works/box-circle.svg);
    background-size: 100% 100%;
    width: 27vw;
    height: 29.6vw;
}

.how-works-item *{
    position: absolute;
}

.how-works-item .bold-56{
    top: 4.765vw;
    left: 1.25vw;
}

.how-works-item .bold-32, .how-works-item .regular-16{
    color: var(--white) !important;
    left: 2.5vw;
    width: 21.875vw;
}

.how-works-item .bold-32{
    bottom: 7.5vw;
    line-height: 3.125vw;
    letter-spacing: -0.039vw;
}

.how-works-item .regular-16{
    bottom: 2.5vw;
    line-height: 1.875vw;
}

.how-works-item img{
    width: 9.375vw;
    right: 0px;
    bottom: 10.9375vw;
}

.how-works-options-container{
    margin-top: 1.25vw;
    background: url(../../img/BG_des.png);
    background-size: 100% 100%;
    /*height: 89.0625vw;*/
    width: 95.9375vw;
    margin-left: 2vw;
    padding: 5.46875vw;
    margin-bottom: 12vw;
    text-align: center;
}

.how-works-options-container *{
    color: #FFF !important;
}

.how-works-options{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75vw;

}

.dot-x .dot{
    border: solid 0.2vw black !important; 
}

.dot-x .dot.active{
    background: black !important;
}

.how-works-options-item{
    height: 29.6875vw;
    border-radius: 2.5vw;
    background: #FFF;
    cursor: pointer;
    position: relative;
    padding: 2.8125vw;
    position: relative;
    text-align: left;
    padding: 2.8125vw;
}

#how-works-content{
    background: #FFF;
    border-radius: 2.5vw;
    position: relative;
    padding: 2.8125vw;
    height: 14.375vw;
    text-align: left;
    align-content: end;
}

#how-works-content .hworks-close{
    position: absolute;
    top: 2.5vw;
    left: 2.8125vw;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.hworks-close img{
    margin-right: 0.6vw;
    width: 2.5vw;
}

#how-works-content *{
    color: #000 !important;
}

.how-works-options-item *{
    color: #000 !important;
}

.how-works-options-item img{
    position: absolute;
    width: 9.375vw;
    top: 8.75vw;
}

.hwo-title{
    position: absolute;
    bottom: 5.625vw;
}

.hwo-text{
    position: absolute;
    bottom: 2.5vw;
}

.hworks-info{
    position: absolute;
    right: 2.8125vw;
    width: 9.375vw;
    align-self: anchor-center;
    top: 0px;
}

.how-works-active{
    background: #FFF;
    border-radius: 2.5vw;
    position: relative;
    padding: 2.9vw 3vw;
    height: 14vw;
    text-align: left;
    align-content: end;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0px -0.15625vw 0.625vw rgba(3, 6, 13, 0.04), 0px 1.25vw 1.875vw rgba(3, 6, 13, 0.48);
    backdrop-filter: blur(1.5625vw);
    border-radius: 2.5vw;
}

.hwa2{
    height: 12vw !important;
}

.how-works-active .hworks-close{
    position: absolute;
    top: 2.5vw;
    left: 2.8125vw;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.how-works-active *{
    color: #FFF !important;
}

.how-works-active .regular-16{
    width: 80%; 
}

.how-works-active2{
    height: 10vw !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
}

.how-works-active2 img{
    position: static !important;
    margin-right: 3.5vw !important;
    height: 7vw !important;
}

.how-works-active3{
    height: auto;
    display: flex;
    align-items: center;
}

.how-works-active2 .regular-18{
    color: #6F6B4D !important;
    width: auto;
}

.wha3{
    height: 8vw;
    display: flex;
}

.wha3 .wh4{
    width: 3.125vw !important;
    right: 4.45vw;
}

.wha5{
    height: 9vw;
    display: flex;
    align-items: center;
}

.wha5 img{
    width: 5vw !important;
    right: 3.5vw;
}


@media (min-height: 120vw){
    .how-works-options-container{
        padding: 12vw 3vw;
        border-radius: 3.076vw;
        width: 90vw;
        margin-left: 5vw !important;
        background-size: 100% 100%;
    }
    .how-works-options{
        gap: 3.75vw;
    }
    .how-works-options-item{
        border-radius: 8.205vw;
        height: 39vw;
        text-align: center;
        text-align: -webkit-center;
    }
    .how-works-options-item img{
        top: -8.2vw;
        width: 20.51vw;
        place-self: anchor-center;
        position: static;
        margin-top: 2.5vw;
    }
    .how-works-options-item .regular-16{
        display: none !important;
    }
    .how-works-options-item .bold-32{
        font-size: 4.4vw !important;
        width: 84%;
        text-align: center;
    }

    #how-works-content{
        height: auto !important;
        padding-top: 13vw !important;
    }
    .hworks-close img{
        width: 4.615vw !important;
    }

    .how-works-active .regular-16 {
        width: 100%;
        margin-bottom: 0px !important;
    }
    .how-works-active{
        height: auto;
    }
    .how-works-active .hworks-close {
        position: static;
        margin-bottom: 2vw;
    }
    .how-works-active img{
        position: static;
        width: 20.5vw;
        float: right;
    }
    .hwa2 {
        height: 53vw !important;
    }
    #how-works-content {
        background: none;
        filter: invert(1);
    }
    #how-works-content #hworks-icon{
        width: 30.76vw;
    }
    .how-works-active2{
        height: auto !important;
        padding: 4vw;
    }

    .how-works-active2 img{
        width: 10vw;
        height: 10vw !important;
    }

    .how-works-active3{
        height: auto !important;
    }

    .how-works-active2 .regular-18{
        text-align: left;
    }
    #how-works-content .hworks-close img{
        width: 6vw !important;
        margin-right: 2vw;
    }
    #how-works-title{
        width: 60%;
    }
    .hww3{
        padding: 5vw 9vw;
    }
    .wha3{
        height: auto !important;
        padding: 6.5vw 4vw;
        display: flex;
    }
    .wha3 .wh4 {
        width: 9.125vw !important;
        margin-left: 3vw;
        margin-right: 1vw;
        align-self: start;
    }
    .wha5{
        height: auto !important;
        padding: 5.5vw 4vw;
        display: flex;
    }
    .wha5 img {
        width: 10vw !important;
        margin-left: 4.5vw;
    }
}

@media (min-width: 120vh){
    .how-works-options-container{
        transform: scale(0.8) !important;
        transform-origin: top center !important;
        height: 87vw !important;
        margin-bottom: -15vw !important;
    }
    .r-box-reviews{
        transform: scale(0.8) !important;
        transform-origin: top center !important;
        height: 25vw !important;
        margin-bottom: -3vw !important;
        margin-top: -1.5vw !important;
    }
}