/* -------------- 
  google font
--------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
/* -------------- 
  Re-use section
--------------- */
body{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #E5E5E5;
}
.flexible{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.container{ 
  background-color: #FFFFFF;
  margin: 20px 0;
  padding: 20px;
  border-radius: 15px;
}
.container-size{
  width: 870px;
}
/* -------------- 
  Header section
--------------- */
header{
    background-color: #562EFF;
    padding: 15px;
}
.nav-bar{
    display: flex;
    justify-content: space-between;
}
.logo, .menu{
    display: flex;
    align-items: center;
}
.logo img{
    width: 41px;
    height: 50px;
}
.logo span{
    color: #fff;
    margin-left: 15px;
    font-size: 24px;
    text-decoration: none;
}
.menu a{
    color: #fff;
    margin-left: 25px;
    font-size: 18px;
    text-decoration: none;
}

/* -------------- 
  main section
--------------- */
.section-title h2{
  color: #562EFF;
  font-size: 24px;
  font-weight: 500;
}
/* ---- player section ---- */
.players{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 30px;
  margin-bottom: 30px;
}
.player{
  display: flex;
  align-items: center;
}
.player img{
  width: 56px;
  height: 56px;
}
.player p{
  margin-left: 16px;
  font-size: 18px;
  font-weight: 500;
}
hr{
  border: 1px solid #D1D1D1;
}
/* ---- blog section ---- */
.blogs{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 26px;
}
.blog{
  display: flex;
  align-items: center;
}
.blog-img img{
  width: 177px;
  height: 117px;
}
.blog-info{
  margin-left: 16px;
}
.blog-info span{
  color: #562EFF;
}
/* ---- course section ---- */
.courses{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 0 30px 0;
}
.course{
  box-shadow: 0px 0px 8px 3px #b8b4b49d;
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
}
.course img{
  width: 224px;
  height: 104px;
}
.author{
  color: #ED6B4F;
}
.info{
  display: flex;
  align-items: center;
}
.fa-star.yellow{
  color: #FFC014;
}
.fa-star.gray{
  color: #AEAEAE;
}
.info p{
  margin: 0 0 0 7px;
}
.info-time{
  display: flex;
  align-items: center;
  margin-left: 20px;
  background-color: #FFE4E8;
  border-radius: 15px;
}
/* -------------- 
  Responsive section
--------------- */
@media only screen and (max-width: 688px) {
  .container{
    margin-left: 10px;
    margin-right: 10px;
  }
  .section-title h2{
    color: #562EFF;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
  }
  /* --- Header section --- */
  .container-size{
    width: 100%;
  }
  .logo img{
    width: 41px;
    height: 50px;
  }
  .logo span{
    margin-left: 5px;
    font-size: 20px;
  }
  .menu a{
    margin-left: 10px;
    font-size: 14px;
  }
  /* --- players section --- */
  .players{
    grid-template-columns: repeat(1, 1fr);
  }
  /* --- Blogs section --- */
  .blogs{
    grid-template-columns: repeat(1, 1fr);
  }
  /* --- courses section --- */
  .courses{
    grid-template-columns: repeat(1, 1fr);
  }
  .course{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .course h3{
    text-align: center;
  }
}