

.tutorial-card{

    border:none;
    border-radius:12px;

    overflow:hidden;

    height:185px;

    background:#fff;

    transition:all .25s ease;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.tutorial-card:hover{

    transform:translateY(-4px);

    box-shadow:0 8px 24px rgba(0,0,0,.18);

}



.thumbnail-wrapper{
    position:relative;
    width:100%;
    height:190px;
    overflow:hidden;
    cursor:pointer;
}

.tutorial-thumbnail{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}

.tutorial-card:hover .tutorial-thumbnail{
    transform:scale(1.05);
}



.thumbnail-wrapper::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.18);
    z-index:1;
    transition:.3s;
}

.tutorial-card:hover .thumbnail-wrapper::after{
    background:rgba(0,0,0,.08);
}



.play-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background:#ff9033;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:5;
    box-shadow:0 5px 15px rgba(0,0,0,.35);
    transition:.3s;
}

.play-button i{
    color:#fff;
    font-size:24px;
    margin-left:4px;
}

.tutorial-card:hover .play-button{
    transform:translate(-50%,-50%) scale(1.1);
    background:#ff7a00;
}


.tutorial-body{

    height:185px;

    padding:12px 14px;

    display:flex;

    flex-direction:column;

}



.week-name{

    color:#0d6efd;

    font-weight:700;

    font-size:15px;

    margin-bottom:8px;

    line-height:1.3;

}



.tutorial-title{

    font-size:17px;

    font-weight:600;

    color:#222;

    line-height:1.45;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:4;

    overflow:hidden;

    min-height:50px;

    margin-bottom:12px;

}



.language{

    margin-top:auto;
     font-weight:500;

    font-size:15px;

    color:black;

}



@media (max-width:991px){

    .tutorial-card{

        height:auto;

    }

    .tutorial-thumbnail{

        height:210px;

    }

    .tutorial-body{

        height:auto;

    }

}

@media (max-width:576px){

    .tutorial-card{

        border-radius:10px;

    }

    .tutorial-thumbnail{

        height:180px;

    }

    .tutorial-title{

        min-height:auto;

    }

}
	
  :root {
  --plyr-color-main: #ff9033;
   
}
  .plyr__controls__item plyr__volume{
    margin-bottom: 25px;
    padding-bottom:25px;
  }
  

