@use "../utilities" as *;

/**----------------------------------------
START: Popular CSS
----------------------------------------*/

.popular-course{
    margin-bottom: -161px;
}

.popular-item{
    background-color: #F2F4F7;
    position: relative;
    z-index: 1;
    padding: 60px;
    border: 1px solid #E0E5EB;
    border-radius: 15px;
    overflow: hidden;
    @include breakpoint(lg){
        padding-left: 40px;
    }
    @include breakpoint(sm){
        padding: 30px 20px;
    }
    .men{
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: -1;
        @include breakpoint(sm){
            display: none;
        }
    }
    .shapes{
        .shape{
            position: absolute;
            z-index: -2;
            &.shape-1{
                top: 0;
                right: 0;
                @include breakpoint(sm){
                    display: none;
                }
            }
            &.shape-2{
                width: 100%;
                height: 100%;
                top: 0;
                right: 0;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    span{
        color: var(--ed-color-theme-primary);
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        display: block;
        margin-bottom: 20px;
    }
    .title{
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 30px;
        @include breakpoint(sm){
            font-size: 22px;
        }
    }
}

/* !END: Popular CSS */