@use '../abstract' as *;

/*----------------------------------------*/
/*  22. APPLY CSS START
/*----------------------------------------*/

.apply{
    &__wrapper{
        @media #{$xl}{
            padding-left: 20px;
        }
        @media #{$md, $sm, $xs}{
           padding-left: 0;
           margin-top: 50px;
           margin-left: 0;
        }
        @media #{$xs}{
           padding-right: 0;
        }
        & p{
            margin-bottom: 40px;
        }
    }
    &__thumb{
        @media #{$lg, $md, $sm, $xs}{
            margin-left: 0;
        }
        & .apply-img-1{
            position: relative;
            z-index: 1;
            margin-top: 90px;
        }
        & .apply-img-2{
            margin-left: -30px;
            margin-bottom: 30px;

            @media #{$lg}{
                margin-left: -70px;
            }
            @media #{$xs}{
                margin-left: -250px;
            }
        }
    }
    &__instructors{
        padding: 30px 30px 20px;
        position: absolute;
        bottom: -20px;
        right: 30px;
        @include border-radius(5px);
        @include box-shadow(0px 10px 40px rgba(25, 50, 132, 0.16));
        z-index: 1;
        & ul{
            & li{
                display: inline-block;
                &:not(:first-child){
                    margin-left: -15px;
                }
                & img{
                    width: 45px;
                    height: 45px;
                    border: 3px solid $white;
                    @include border-radius(50%);
                    @include box-shadow(0px 0px 20px rgba(0, 0, 0, 0.09));
                }
            }
        }
        & p{
            color: $black-2;
            margin-bottom: 0;
        }
    }
}