.steps > div:first-child:before{
    content: '1';
}
.steps > div:nth-child(2):before{
    content: '2';
}
.steps > div:last-child:before{
    content: '3';
}
.stars{
    max-width: 100%;
    background-color: #141C4A;
    width: 100%;
    justify-content: center;
}
.stars ul{
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}
.stars li{
    color: #fff;
    display: flex;
    align-items: center;
    
}
.stars li::before{
    content: url(/assets/images/v2/star.png);    
}
/* Mobile */
@media screen and (max-width: 428px) {
    .stars{
        padding: 10px 0 20px 20px;;
    }
    .stars ul{
        margin: 0 auto;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        
    }
    .stars li{
        font: 500 22px/35px 'Montserrat', sans-serif;
        gap: 10px;
        
    }
    .stars li::before{
        height: 27px;    
    }
    .steps{
        margin: 0 auto;
        max-width: 100vw; 
        
        width: 100%;
        padding: 0 15px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        background-color: #fff;
    }
    .steps > div{
        display: flex;
        flex-direction: column;
        position: relative;
        min-height: 60px;
        justify-content: center;
        padding: 20px 0 20px 70px;
        width: 100%;

    }
    .steps > div:not(:last-child){
        border-bottom: 1px solid rgba(204, 204, 204, 0.34);
        
    }
    .steps > div::before{
        width: 60px; height: 60px;
        border-radius: 50%;
        background-color: #FFD100;
        color: #191947;
        font: 900 31px/31px 'Montserrat', sans-serif;
        display: flex;
        align-items: center; justify-content: center;

        position: absolute;
        left: 0;
    }
    .steps em{
        font: 900 25px/30px 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: #191947;
    }
    .steps span{
        
        font: normal 15px/15px 'Montserrat', sans-serif;
    }
}
/* Tablet */
@media screen and (min-width: 429px) and (max-width: 1024px){
    .stars{
        height: 40px;
    }
    .stars ul{
        max-width: 1200px;
        gap: 60px;
    }
    .stars li{
        font: 500 12px/35px 'Montserrat', sans-serif;
        gap: 10px;
        
    }
    .stars li::before{
        height: 27px;    
    }
    .steps{
        margin: 0 auto;
        max-width: 768px;
        height: 60px;
        width: 100%;
        align-items: center;
        justify-content: space-around;
        padding: 0 20px;
    }
    .steps span{
                    
        font: 500 11px/11px 'Montserrat', sans-serif;
    }
    .steps > div{
        display: flex;
        flex-direction: column;
        position: relative;
        height: 40px;
        justify-content: center;
        padding-left: 50px;
        
    }
    .steps > div::before{
        width: 40px; height: 40px;
        border-radius: 50%;
        background-color: #FFD100;
        color: #191947;
        font: 900 22px/22px 'Montserrat', sans-serif;
        display: flex;
        align-items: center; justify-content: center;

        position: absolute;
        left: 0;
    }
    .steps em{
        font: 900 18px/26px 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: #191947;
    }
}
/* Desktop */
@media screen and (min-width: 1025px){
    .stars{
        height: 40px;
    }
    .stars ul{
        max-width: 1200px;
        gap: 100px;
    }
    .stars li{
        font: 500 18px/35px 'Montserrat', sans-serif;
        gap: 10px;
        
    }
    .stars li::before{
        height: 27px;    
    }
    .steps{
        margin: 0 auto;
        max-width: 1200px;
        height: 80px;
        width: 100%;
        align-items: center;
        justify-content: space-around;
        padding: 0 20px;
    }
    .steps > div{
        width: 33%;
        display: flex;
        flex-direction: column;
        position: relative;
        height: 60px;
        justify-content: center;
        padding-left: 80px;
    }
    .steps > div::before{
        width: 60px; height: 60px;
        border-radius: 50%;
        background-color: #FFD100;
        color: #191947;
        font: 900 35px/35px 'Montserrat', sans-serif;
        display: flex;
        align-items: center; justify-content: center;

        position: absolute;
        left: 0;
    }
    .steps em{
        font: 900 30px/30px 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: #191947;
    }
    .steps span{
        letter-spacing: 0;
        font: 500 18px/18px 'Montserrat', sans-serif;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    
}