* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

body {
    font-family: 'Roboto', sans-serif;
}

/*
Important-colors{
color : #ffb320;
color : #131313bb;
color : #ff205f;
color : rgb(68, 122, 203);
color : #4eae60;
color : #694eae;
color : #ff205f;
color : #fb6e10;
color: #252525;
 color: #9a9a9a;
}
 */

/* -------------------------------- Header ------------------------------- */
.header-sec {
    width: 100%;
    height: 80px;
    position: absolute;
    z-index: 1000;
    background-color: #131313bb;
    border-bottom: 1px solid #ffb320;
}

.header-sec .container {
    width: 85%;
    height: 60%;
    margin-left: 7%;
    position: absolute;
    top: 25%;
    display: flex;

    /* border: 1px solid red; */
}

/**** header start ****/
.header-sec .container .logo {
    float: right;
    line-height: 50px;
}

/**** header center ****/
.header-sec .container nav {
    width: 37%;
    margin-left: 18%;
    line-height: 40px;
    float: right;
    /* border: 1px solid green; */
}


.header-sec .container nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.header-sec .container nav li {
    text-align: center;
}

.header-sec .container nav li a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: bolder;
    font-size: 16px;
    text-align: center;

}

.header-sec .container nav li a:hover {
    color: #ffb320;
}

/**** header end ****/

.header-sec .btn-login-register {
    width: 160px;
    height: 80%;
    float: right;
    margin-left: auto;
    text-align: center;
    line-height: 33px;
    padding: 3px 10px;
    margin-top: 0px;
    border-radius: 30px;
    background-color: #ffb320;
    /* border: 1px solid blue; */
}

.header-sec .btn-login-register a {
    color: #000;
    font-size: 14px;
    font-weight: bold;
}

/*-------------------------------- Main section---------------------------------*/

.main-bg {
    width: 100%;
    height: 100vh;
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.content-main-bg {
    width: 65%;
    position: absolute;
    left: 7%;
    top: 35%;
    line-height: 2.5;
    /* border: 1px solid blue; */
}

.content-main-bg .title {
    color: #fff;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 2px;
    animation: slid-down 2s 1 ease-in-out;
}

.content-main-bg .title span {
    color: #ffb320;
    animation: slid-down 3s 1 ease-in-out;
}

.content-main-bg .main-info {
    width: 60%;
    color: rgba(255, 255, 255, 0.9);
    line-height: 2;
    animation: slid-down 1s 1 ease-in-out;
}

.content-main-bg .main-info-btn {
    width: 150px;
    margin-top: 20px;
    padding: 18px 25px;
    border-radius: 50px;
    background-color: #ffb320;
    font-weight: bolder;
    color: rgba(0, 0, 0, 0.9);
    font-size: 15px;
    cursor: pointer;
    border: none;
    animation: slid-down .5s 1 ease-in-out;
}

@keyframes slid-down {
    0% {
        transform: translateY(-300px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/*-------------------------------- Article --------------------------------*/

article .container {
    width: 100%;
    height: 70px;
    margin-top: 0;
    margin-bottom: 100px;
}

article .latest-news {
    width: 25%;
    height: 100%;
    float: left;
    background-color: #ffb320;
}

article .latest-news h3 {
    float: right;
    line-height: 70px;
    margin-right: 50px;
    color: #fff;
    text-transform: capitalize;
}

article .news {
    width: 75%;
    height: 100%;
    float: left;

    animation: 13.1034s linear 0s infinite normal none running;
    background-color: #131313;
}

article .news .news-content {
    width: 450px;
    height: 100%;
    line-height: 70px;
    float: left;
    margin-right: 20px;
    transition: 5s;
    /* border: 1px solid red; */
}

article .news .news-content h4 {
    display: inline;
    width: 50px;
    background-color: #ffb320;
    padding: 5px 15px;
    font-size: smaller;
    text-transform: uppercase;
}

article .news .news-content p {
    display: inline;
    margin-left: 25px;
    color: #fff;
}

/* ------------------------------ Section 1 ---------------------------- */
.sec1 .container {
    width: 85%;
    height: 400px;
    margin: 105px auto;
    border: 1px solid red;
}

.game {
    width: 25%;
    height: 100%;
    background-image: url("../images/game1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    float: left;
}

.game .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

/* ------ Game info ------- */
.game h3 {
    width: 30%;
    margin: 10%;
    padding: 5px 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #fff;
    background-color: #ff205f;

}

.game .game-info {
    width: 85%;
    height: 40%;
    line-height: 2;
    position: absolute;
    top: 55%;
    left: 8%;
    /* border: 1px solid blue; */
}

.game-info .game-title {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.game-info p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.8);
}

.game-info .interactions {
    width: 90%;
    margin-right: auto;
    padding: 0px 5px;
    display: flex;
    justify-content: space-between;
}

.game-info .interactions span {
    font-size: 13px;
    color: gray;
    cursor: pointer;
}

.game-info .interactions i {
    margin-right: 5px;
}

.game-info .interactions span:hover {
    color: rgb(68, 122, 203);
}

.game-info .interactions .icon-bg:hover {
    color: #ffb320;
}

.game-2 {
    background-image: url("../images/game2.jpg");
}

.game-3 {
    background-image: url("../images/game3.jpg");
}

.game-4 {
    background-image: url("../images/game4.jpg");
}

/* ------------------------------ Section 2 ---------------------------- */
.sec2 {
    width: 100%;
    height: 850px;
    background-color: #eef2f6;
    position: relative;
    border-top: 1px solid #d6dee7;
    border-bottom: 1px solid #d6dee7;
}

.sec2 .container {
    width: 100%;
    height: 90%;
    margin: auto;
    top: 10%;
    position: absolute;
    background-image: url("../images/recent-game-bg.png");
    background-repeat: no-repeat;
    background-position: center;
}

.sec2 .title,
.sec4 .title {
    text-align: center;
    line-height: 2;
    margin-top: 50px;
}

.sec2 .title h4,
.sec4 .title h4 {
    width: 80px;
    margin: auto;
    padding: 3px 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: smaller;
    color: #fff;
    background-color: #ff205f;
}

.sec2 .title h2,
.sec4 .title h2 {
    font-size: 35px;
}

.sec2 .recent-content {
    width: 85%;
    height: 450px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
}

.sec2 .recent-content .recent-game {
    width: 31.5%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #d6dee7;
}

.sec2 .recent-game .recent-img {
    height: 50%;
    background-image: url("../images/recent-game1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.sec2 .recent-game .r-game2 {
    background-image: url(../images/recent-game2.jpg);
}

.sec2 .recent-game .r-game3 {
    background-image: url(../images/recent-game3.jpg);
}

.sec2 .recent-game .recent-img h3 {
    width: min-content;
    position: absolute;
    margin: 5%;
    padding: 6px 15px;
    text-align: center;
    text-transform: uppercase;
    font-size: smaller;
    color: #fff;
    background-color: #ff205f;
}

.sec2 .recent-game .recent-info {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    line-height: 3;
    /* border: 1px solid blue; */
}

.sec2 .recent-game .recent-info .recent-title {
    font-size: 27px;
    font-weight: bolder;
    color: #000;
}

.sec2 .recent-game .recent-info p {
    font-size: 15px;
    line-height: 1.8;
    color: gray;
    margin-bottom: 20px;
}

.sec2 .recent-game .recent-info h5 {
    font-size: 12px;
    color: gray;
}

.star-heart {
    display: flex;
    width: 20%;
    height: 35px;
    margin-left: auto;
    margin-top: -11px;
}

.star-heart .star {
    background-color: #ffb320;
    width: 50%;
    line-height: 35px;
    padding: 6px 7px;
}

.star-heart .heart {
    background-color: #ff205f;
    width: 50%;
    line-height: 35px;
    padding: 6px 7px;

}

/*------------------------------ Section 3 -------------------------------*/
.sec3 {
    width: 100%;
    height: 450px;
    background-image: url("../images/sec3-bg.png");
    position: relative;
}

.sec3 .container {
    width: 85%;
    height: 70%;
    position: absolute;
    left: 7.5%;
    top: 15%;
    /* border: 1px solid #ff205f; */
}

.sec3 .container h3, .sec3 .content h4 {
    width: max-content;
    padding: 8px 20px;
    background-color: #fb6e10;
    color: #fff;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 12px;
}

.sec3 .content {
    width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid rgb(1, 209, 228); */
}

.sec3 .part-left, .sec3 .part-right {
    width: 48.75%;
    height: 100%;
    background-color: #252525;
    /* border: 1px solid red; */
}

.sec3 .content h4 {
    background-color: #ffb320;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 20px;
}

.sec3 .content .content-info {
    width: 100%;
    height: 80%;
    float: left;
    margin: auto;
    margin-top: 30px;
    /* border: 1px solid rgb(148, 122, 122); */
}

.sec3 .content-info .content-img {
    width: 30%;
    height: 80%;
    float: left;
    margin-top: 10px;
    margin-left: 4%;

}

.sec3 .content-info .image-info {
    width: 60%;
    height: 90%;
    float: right;
    margin-right: 1%;
    line-height: 1.5;
    /* border: 1px solid red; */
}

.sec3 .content-info .image-info .title {
    font-size: 22px;
    padding-bottom: 10px;
    color: #ffb320;
}

.sec3 .content-info .image-info li {
    font-size: 13px;
    list-style: none;
    color: #fff;
    line-height: 2;
}

.sec3 .content-info .image-info li span {
    color: #9a9a9a;
}

.sec3 .content-info .image-info p {
    color: #9a9a9a;
    padding-top: 20px;
    font-size: 12px;
}

.sec3 .content-info .image-info p span {
    color: #ffb320;
}

/* ---------------------------- Section 4 ---------------------------- */
.sec4 {
    width: 100%;
    height: 800px;
    background-image: url("../images/review-bg1.png");
    background-repeat: no-repeat;
    background-position: right;
}

.sec4 .container {
    width: 85%;
    height: 100%;
    margin: auto;
    border: 1px solid transparent;
}

.sec4 .container .title {
    margin-top: 100px;
    margin-bottom: 50px;
}

.sec4 .content {
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid rgb(0, 255, 225); */
}

.sec4 .content .recent-review {
    width: 23%;
    height: 100%;
    /* border: 1px solid rgb(0, 68, 255); */
}

.sec4 .recent-review .rank {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffb320;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: 600;
    font-size: larger;
    margin-top: -30px;
    margin-left: 30px;
    position: absolute;
}

.sec4 .recent-review .review-img {
    width: 100%;
    height: 50%;
}

.sec4 .recent-review .review-info {
    width: 100%;
    height: 50%;
    text-align: center;
    /* border: 3px solid rgb(47, 255, 0); */
}

.sec4 .recent-review .review-info .title-review {
    padding-top: 20px;

}

.sec4 .recent-review .review-info p {
    line-height: 2;
    padding-top: 20px;
    font-size: 13px;
    color: gray;

}

/*------------------------------ Footer --------------------------------*/

footer {
    width: 100%;
    height: 600px;
    background-image: url("../images/sec3-bg.png");
    border: 1px solid transparent;
}

footer .container {
    width: 85%;
    height: 85%;
    margin: auto;
    margin-top: 5%;
    display: flex;
    justify-content: space-between;

    /* border: 1px solid red; */
}

footer .logo-footer-content {
    width: 35%;
    height: 100%;
    /* border: 1px solid rgb(1, 255, 119); */
}

footer .logo-footer-content p {
    margin-top: 20px;
    width: 90%;
    line-height: 1.8;
    color: #fff;
}

footer .posts,
footer .comments {
    width: 35%;
    height: 90%;
    margin-left: 20px;
    padding: 4% 2%;
    background-color: #252525;
    border: 1px solid #545252;
}

footer .title {
    color: #fff;
    font-weight: bolder;
    font-size: 22px;
    margin-top: -10px;
    padding-bottom: 20px;
}

footer .post-1 {
    width: 100%;
    height: 100px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
}


footer .post-1 .post-img {
    width: 35%;
    height: 100%;
    /* border: 1px solid rgb(121, 67, 67); */
}

footer .post-1 .post-info {
    width: 60%;
    height: 100%;
    font-size: 12px;
    line-height: 2;
    /* border: 1px solid rgb(40, 123, 27); */
}

footer .post-info p {
    color: #fff;
}

footer .post-info .post-date {
    color: #ffb320;
}

footer .post-info span {
    color: gray;
}

footer .comment-1 {
    height: 80px;
    margin-top: 10px;
}

footer .comment-img img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
}

.footer-bottom {
    width: 100%;
    height: 130px;
    background-color: #131313;
    text-align: center;
    color: rgba(255, 255, 255, 0.738);
    padding-top: 60px;
    line-height: 1.5;
}

.footer-bottom span {
    text-transform: capitalize;
}

.footer-bottom .myName {
    font-weight: 100;
    font-style: italic;
    text-decoration: underline;
    color: rgba(255, 255, 255, 0.9);
}