/* font caveat ggoogle  */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Overpass:ital,wght@0,600;1,600&display=swap');


/* common style and utilities */
body{
    font-family: 'Caveat', cursive;
    /* font-family: 'Overpass', sans-serif; */
    background-color: #F3F1FF;
}
main{
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    align-items: center;
}
.container{
    background-color: #FFFFFF ;
    width: 870px;
    padding: 30px;
    border-radius: 5px;
    margin-top: 21px;
}
hr{
    border: 1px solid #D1D1D1;
    margin-bottom: 27px;
}


.section-title{
    font-size: 24px;
    color: #562EFF;
    margin-top: 3px;
}

/* top players styles */

.top-players{
    margin-bottom: 30px;
}

.players{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-row-gap: 30px;
}

.player{
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.player img{
    width: 56px;
    height: 56px;
}

.player-name{
  margin-left: 16px;
  font-size: 18px;

}

/*-----------------
top blogs styles here 

-------------------*/

.blogs{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-row-gap: 26px;
}

.blog{
    display: flex;
}
.blog .thumbnail img{
    width: 177px;
    height: 117px;
}
.blog-info{
    margin-left: 16px;
}
.blog-title{
    font-size: 20px;
}
.blog-author{
    color: #9F9F9F;
    font-size: 16px;
}
.blog-author a{
   text-decoration: none;
   font-size: 16px;
    color: #562EFF
}


/*_____________________
 
Latest Courses Style here

_________________*/
.courses{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 50px;
    /* grid-column-gap: 24px; */
}


.course .course-banner img{
    width: 224px;
    height: 104px;
}
.course-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* justify-content: space-evenly; */
    /* justify-content: space-around; */
}
.fa-star{
    font-size: 12px;
}
.fa-star.filled{
    /* gap dewa ar na dewar difference ache
     gap dewwa= mane child ke bujay
     gap na dewa= imediate je class / bas pashapashi je class ache
    */
    color: #FFC014;

}
.fa-star.empty{
    color: #aeaeae
}

/*  Extra added styles */
.course-duration{
    background-color: #FFE4E8;
    border:1px solid blue;
    border-radius: 10px;
}



/*  Media  Queryy for Dofferent Device   */

/* Mobile Device  */
@media only screen and (max-width:688px) {
    .container{
        /* debug kore dekhlab width a problem */
        width: 100%;
    }
    .players , .blogs, .courses{
        background-color: cornsilk;
        grid-template-columns: repeat(1,1fr);
    }
    .player{
        flex-direction: column;
    }

    .course{
        margin-bottom: 40px;
    }
    .course-info{
        /* justify-content: space-between; */
        justify-content: stretch;
    }
    .course-duration{
        margin-left: 10px;
    }

    /* .courses{
        display: none;
    } */

    /*Muri kaaw */ 
    /*
    .blogs, .courses{
        display: none;   }
    */
    
    
}



/*  For IPAD/ Tablet Device  */
@media only screen and (min-width:688px) and (max-width:992px) {
    .container{
        width: 100%;
    }
    
    .players{
        background-color: rgb(178, 241, 149);
        grid-template-columns: repeat(2,1fr);

    }
    .blogs{
        background-color: rgb(240, 186, 168);
        grid-template-columns: repeat(1,1fr);
    }

    .courses{
        background-color: rgba(240, 245, 196, 0.664);
        grid-template-columns: repeat(1,1fr);
    }
    .course{
        margin-bottom: 40px;
    }
    .course-info{
        /* justify-content: space-between; */
        justify-content: stretch;
    }
    .course-duration{
        margin-left: 10px;
    }
    
}