/* ------Common Styles or Utilities ------*/

body {
    font-family: 'Poppins';
    background-color: #9f9f9f;
}

.container {
    border-radius: 8px;
    width: 80%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    left: 10%;

}

nav {
    height: 75px;
    display: flex;
    justify-content: space-around;
    background-color: #562EFF;
    border: 1px solid black;
    border-radius: 8px;
    margin-bottom: 1%;
}

.idea {
    color: #FFFFFF;
}

.menu {
    display: flex;

}

.menu li {
    margin-left: 20%;
    list-style: none;
}

.menu li a {
    text-decoration: none;
    color: #FFFFFF;
}

.fa-house,
.fa-circle-info,
.fa-briefcase {
    color: goldenrod;
    font-size: 20px;
}


.list {
    position: relative;
    left: 27px;
    bottom: 25px;

}

.list-1 {
    position: relative;
    bottom: 26px;
    left: 23px;
}

.menu li img {
    width: 51px;
    height: 51px;
    position: relative;
    bottom: 5px;
}


/* --------Top Players Style-------- */

.top-players {
    padding: 30px;
}

.heading {
    color: #562EFF;
    margin-top: 2px;
}

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

.player {
    display: flex;
    align-items: center;
}

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

.name {
    position: relative;
    bottom: 5%;
    margin-left: 10px;
    font-size: 12px;
}

.horizontal {
    color: #D1D1D1;
    height: 1px;

}

/* --------Top Blogs style-------- */

.top-blogs {
    padding: 30px;
}

.blogheading {
    color: #562EFF;
    margin-top: 1px;
}

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

.blog {
    display: flex;
    align-items: center;
}

.thumbnail>img {
    width: 177px;
    height: 112px;
}

.description {
    margin-left: 15px;
    font-size: 13px;
    position: relative;
    bottom: 15%;
}

.author {
    color: #9F9F9F;
}

.author span a {
    text-decoration: none;
    color: #562EFF;
}


/* --------Latest Courses style --------*/

.course-section {

    background-color: #FFFFFF;
    border-radius: 8px;
    width: 75.5%;
    position: relative;
    left: 10%;
    margin-top: 0.5%;
    padding: 30px;
}

.courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.8%;
}

.course {
    box-shadow: 5px 5px 5px lightsteelblue;
    padding: 5px;
    width: 95%;
    border-radius: 8px;
}

.course-banner img {
    width: 224px;
    height: 104px;
}

.course-author {
    color: #ED6B4F;
}

.ratings {
    display: flex;
    justify-content: space-around;
    width: 73%;
}

.fa-star,
.fa-star-half-stroke {
    color: #FFC014
}

.grey-star {
    color: #AEAEAE;
}

.clock {
    color: #FF4A60;
    background-color: lightpink;
    padding: 2.5px;
    margin-left: 8%;
    margin-bottom: 8%;
    border-radius: 5px;
}


/* --------Media Quries --------*/

@media only screen and (max-width:688px) {

    nav {

        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: 100%;

    }

    .idea {
        position: relative;
        right: 13%;
    }

    .menu {
        flex-direction: column;
        position: relative;
        right: 30%;
    }

    .menu li img {

        position: relative;
        left: 10%;
    }


    .container {
        width: 100%;
        left: 0px;
        margin-top: 1.5%;
    }

    .players {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 6%;
    }

    .top-blogs {
        padding: 25px;
    }


    .blogs {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 1.9%;
    }

    .description {
        margin-left: 8%;
    }

    .course-section {
        width: 83.5%;
        left: 0px;
        margin-top: 2.2%;
    }

    .courses {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 1.4%;
    }

    .ratings {
        justify-content: space-evenly;
    }

    .clock {
        margin-left: 0.5%;
        margin-bottom: 8%;
    }

}

@media only screen and (min-width:689px) and (max-width:992px) {

    .container {
        margin-top: 1.5%;
    }

    nav {
        width: 100%;
    }

    .menu {

        margin-right: 25%;
        margin-top: 7%;

    }

    .fa-circle-info,
    .fa-briefcase {
        margin-top: 7%;
    }

    .menu li img {

        position: relative;
        bottom: 18%;
    }

    .players {

        grid-template-columns: repeat(2, 1fr);
        column-gap: 6%;
    }

    .blogs {

        grid-template-columns: repeat(1, 1fr);
        row-gap: 2.2%;

    }

    .description {

        margin-left: 5%;
    }

    .course-section {

        width: 72%;
        margin-top: 2%;

    }

    .courses {

        grid-template-columns: repeat(2, 1fr);
        column-gap: 3.2%;
        row-gap: 2.8%;

    }


}