/* ----- Common Style Start ----- */
body {
  font-family: "Poppins", sans-serif;
  background: #f3f1ff;
}
main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.container {
  background: #ffffff;
  border-radius: 10px;
  width: 870px;
  padding: 30px;
  margin-top: 21px;
  box-shadow: 1px 1px 15px -2px rgb(0 0 0 / 20%);
}
hr {
  margin-top: 30px;
  margin-bottom: 30px;
  border: 1px solid #d1d1d1;
  /* width: 807px;
    height: 0px;
    position: absolute;
    left: 315px;
    top: 410px; */
}
nav {
  width: 1257px;
  height: 94px;
  background: #562eff;
  border-radius: 10px;
  box-shadow: 1px 1px 15px -2px rgb(0 0 0 / 20%);
}

.main-menu {
  display: flex;
  margin: 0px 12%;
  align-items: center;
  flex-direction: row;
  /* justify-content: space-between; */
}
.icon {
  display: flex;
  margin-top: 1%;
}
.icon img {
  width: 11%;
  height: 7%;
}
.icon h1 {
  color: #fff;
  margin-left: 16px;
  font-size: 24px;
  font-weight: 500;
}
.menu {
  display: flex;
  align-items: center;
}
.menu a {
  text-decoration: none;
  color: #fff;
  font-weight: normal;
  font-size: 16px;
  padding: 0 38px;
}
/* ----- Common Style End ----- */

/* ----- Top player Style-----  */
.section-title {
    color: #562eff;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    margin-top: 3px;
    margin-left: 33px;
}
.players {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 30px;
  margin-left: 30px;
}
.player {
  display: flex;
  align-items: center;
}
.player img {
  width: 56px;
  height: 56px;
}
.player-name {
  margin-left: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}
/* ----- Top Blogs Start ----- */
.blogs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 30px;
    grid-column-gap: 13px;
    margin-left: 23px;
}
.blog {
  display: flex;
}
.blog .thumbnail img {
  width: 224px;
  height: 127px;
}
.blog-info {
  margin-left: 16px;
}
.blog-title {
  font-size: 20px;
  font-weight: normal;
  margin-top: 0;
}
.blog-author {
  color: #9f9f9f;
  font-size: 16px;
  font-weight: normal;
}
.blog-author a {
  text-decoration: none;
  font-size: 16px;
  font-weight: normal;
  color: #562eff;
}

/* Latest Course start */
.courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-column-gap: 50px; */
    margin-left: 30px;
}
.course-items {
  width: 226.42px;
  height: 272.79px;
  border-radius: 12px;
  box-shadow: 1px 1px 15px -2px rgb(0 0 0 / 55%);
  margin: 0px 0px;
  padding: 14px 13px;
}
.courses .course-banner img {
  width: 224px;
  height: 104px;
}
.course-text {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 18.0336px;
  margin-top: 20px;
}
.course-author {
  color: #ed6b4f;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14.6913px;
  margin-top: 7px;
}
.course-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;
  opacity: 0.25;
}
span {
  color: #a2a2a2;
  font-size: 14.6913px;
}
.course-duration {
  background: #ffe4e8;
  border-radius: 14.6913px;
  padding: 3px 10px;
  color: #ff4a60;
  font-size: 14.6913px;
  font-family: Open Sans;
  font-weight: 600;
}
/* Latest Course End */

/* Footer Section Start */

.footer-section {
  width: 924px;
  height: 140px;
  background-color: #ecf0f1;
  margin-top: 19px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 1px 1px 15px -2px rgb(0 0 0 / 20%);
}

.idea h2 {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  margin-bottom: -1%;
}
.idea span {
  color: rgb(250, 23, 23);
  font-size: 40px;
}
.idea p {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
}
.idea,
h2 p {
  text-align: center;
}
.idea a {
  text-decoration: none;
  color: #562eff;
}

/* Footer Section End */

/* Set Media query  */

/* mobile devices */

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 35%;
            height: 7%;
        }

   
}


/* Smartphones (portrait and landscape) ----------- */
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 35%;
            height: 7%;
        }

   
  }

  /* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) { 
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 35%;
            height: 7%;
        }

   

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 35%;
            height: 7%;
        }


}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(1, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 35%;
            height: 7%;
        }


}

/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) {
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(2, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 35%;
            height: 7%;
        }

    

}
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(2, 1fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 15%;
            height: 7%;
        }

    
}

/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(2, 2fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 50%;
            height: 7%;
        }

   

}

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(2, 2fr);
    }
    .blog {
        display: flex;
        flex-direction: column;
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 10%;
            height: 7%;
        }

   
}
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
    main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
        max-width: 100%;
        
    }
    .courses, .blogs, .players{
        grid-template-columns: repeat(3, 1fr);
    }
    .blogs {
        grid-template-columns: repeat(2, 1fr);
        
    }
    .icon{    
        display: flex;
        margin-top: 1%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        }
        .icon img {
            width: 10%;
            height: 7%;
        }

}

@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
    @media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
      main, .container, nav, .main-menu, .players, .blogs, .courses, .footer-section {
          max-width: 100%;
          
      }
      .courses, .blogs, .players{
          grid-template-columns: repeat(3, 1fr);
      }
      .blogs {
          grid-template-columns: repeat(2, 1fr);
          
      }
      .icon{    
          display: flex;
          margin-top: 1%;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          justify-content: flex-start;
          }
          .icon img {
              width: 10%;
              height: 7%;
          }
}