/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

/* Commn & utilites */
body{
    font-family: 'Poppins', sans-serif;
background-color: #F3F1FF;
}
main{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
}
.container{
    width: 870px ;
background-color: white;
padding: 30px 42px ;
margin-top: 20px;
}
.section-title{
    color: #562EFF;
    font-size: 24px;
    margin-top: 1px;
}
/* Top Players style */
.top-players{
    margin-bottom: 30px;

}
.players {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
grid-row-gap: 30px;
}
.player{
    display: flex;
    align-items: center;
  
}
.player img{
    width: 56px;
    height: 56px;
}
.player-name{
    margin-left: 15px;
    font-size: 18px;
    font-weight: 500;
}
hr{
    border: 1px solid #D1D1D1;
    margin-bottom: 30px;
}

/* blog section  */
.blog .thambnail img{
    width: 224px;
height: 127px;
}
.top-blogs{

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

}
.blog-info{
    font-size: 20px;
    margin-left: 16px;
    

}
.blog-title{
font-size: 20px;
}
.blog-author{
    font-size: 16px;
    text-decoration: none;
    color: #9F9F9F;
    
}
.blog-author a{
    text-decoration: none;
    font-size: 16px;
    color: #562EFF;
}
/* latest course */
.courses{

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 24px;
}

.courses .courses-banner img{
    width: 224px;
    height: 104px;
}
.info{
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
}
.fa-star{
font-size: 12px;
}
.fa-star.filled{
    color: #FFC014;
}
.fa-star.empty{
   color:#AEAEAE ;
}

/* ------------------
--Media Quaries--------
---------------- --------*/

/* Mobile Devises */
@media only screen and (max-width:688px){
   .container{
       width: 100%;
   }
    .players, .blogs, .courses{
   
    grid-template-columns: repeat(1, 1fr);
   }
.player, .blog{
flex-direction: column;

   }

}

/* tablet */
@media only screen and (min-width:688px) and (max-width:992px){
    .container{
        width: 100%;
    }
     .players, .blogs, .courses{
    
     grid-template-columns: repeat(2, 1fr);
    }
 .player, .blog{
 flex-direction: column;
 
    }
 
 }