:root {
    --Navbar-color: #33373C;
    --Navbar-Hover-color: #3D4248;
    /* BackGround */
    --site-main-background: #232528;
    /* Text */
    --primary-text-color: #EFEFEF;
    --primary-white: #FFFFFF;
    --primary-color: #007bff;
    --secondary-text-color: #DCDCDC;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: auto;

}

body::-webkit-scrollbar {
    width: 15px;
}

body::-webkit-scrollbar-track {
    background: #181818;
}

body::-webkit-scrollbar-thumb {
    background: #1EB3FF;
    height: 100px;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
}

h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-white);
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

input:focus {
    outline: none;
    color: #FFFFFF;
}

/* Navbar Start */
body {
    background-color: var(--site-main-background);
}

.Landing-Page {
    height: 10vh;
    background-color: var(--Navbar-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0em 2em;
}

.leftalignfor-menu-div {
    display: flex;
    /* border: 1px solid red; */
    /* width: 60%; */
    /* justify-content: space-between; */
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    margin-right: 2em;
}

.menu-conatiner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-conatiner ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-conatiner ul li {
    cursor: pointer;
    margin-right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.8em 1em;
    border-radius: 5px;
    transition: .3s ease-in-out;
}

.menu-conatiner ul li:hover {

    background-color: #494d50;
}

.menu-conatiner ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.menu-conatiner ul li img {
    margin-top: 3.5px;
}

.menu-conatiner ul li span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-text-color);
    padding-right: 20px;
}

.gamewrap-search-input-box {
    background-color: #3D4248;
    border: 1px solid hsla(0, 0%, 100%, .05);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gamewrap-search-input-box img {
    padding-left: 1rem;
    width: 34px;
    height: 34px;
}

.gamewrap-search-input-box input {
    font-size: 15px;
    padding: 0px 0px 0px 10px;
    line-height: 46px;
    min-height: 46px;
    min-width: 440px;
    background-color: transparent;
    border: none;
    color: #EFEFEF;
}

.gamewrap-search-input-box input:focus {
    outline: #0863C5;
}


.search-results {
    position: absolute;
    width: 100%;
    max-width: 470px;
    top: 75px;
    /* max-height: 150px; */
    overflow-y: auto;
    background-color: #3D4248;
    border: 1px solid hsla(0, 0%, 100%, .05);
    border-radius: 10px;
    display: none;
    z-index: 1;
}

.search-result {
    display: flex;
    align-items: flex-start;
    padding: 10px 5px 10px 0px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1);
}

.search-result a {
    display: flex;
    align-items: flex-start;
}

.search-result a img {
    width: 150px;
    height: 100%;
    margin-right: 8px;
}

.result-details {
    color: #EFEFEF;
}

.result-name {
    font-weight: bold;
}

.result-info {
    font-size: 12px;
}

.rating-search-container {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 12px;
    height: 12px;
}

.rating-search-container img {
    display: flex;
    margin-right: 5px;
    padding: 0;
}

/* ... Your existing CSS ... */

.view-more-button {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #3498db;
    /* Change to your preferred color */
    text-decoration: none;
}


/*  */
.button {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    background-color: var(--Navbar-Hover-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

.button:hover {
    background-color: #494d50;
}

.button i {
    margin-left: 5px;
}

.container {
    display: none;
    position: absolute;
    top: 92px;
    border-radius: 10px;
    background-color: #33373C;
    border: 2px solid #555c66;
    min-width: 850px;
    height: 350px;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

/* 
.container::before {
    background-color: var(--clr-background-primary);
    border-left: 2px solid var(--clr-border);
    border-top: 2px solid var(--clr-border);
    content: "";
    display: inline-block;
    height: 1.6rem;
    left: 170px;
    position: absolute;
    top: -10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 1.6rem
} */

.left-container {
    /* float: left; */
    width: 28%;
    padding: 18px;

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

.right-container {
    /* float: right; */
    padding: 18px;
    width: 72%;
    background-color: #3D4248;
    /* border: 1px solid green; */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

}

.heading {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 30px;
}

.options {
    /* margin-bottom: 10px; */
}

.options div {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--secondary-text-color);
    background-color: var(--Navbar-Hover-color);
    margin-top: 15px;
    padding: 15px 10px !important;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.options div img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.heading-genre {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 15px;
}

.genre-names {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 10px;
    flex-wrap: wrap;
    transition: opacity 0.3s ease;
}

.genre-names a {
    padding: 15px 15px;
    border-radius: 10px;
    color: var(--secondary-text-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.5s ease;
}

.genre-names a:hover {
    background-color: var(--site-main-background);
}

.windowsGenreContainer {}

/*  */

/*  */
.header-Right-Section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: var(--Navbar-Hover-color);
    border-radius: 4px;
    cursor: pointer;
}

.header-Right-Section:hover {
    background-color: #494d50;
}

.header-Right-Section ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-Right-Section a {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: .3em .5em;
    border-radius: 5px;
}

.header-Right-Section a img {
    margin: 2px 2px 0px 0px;
}

.header-Right-Section a span {
    font-size: 1rem;
    color: var(--primary-text-color);
    padding-left: 5px;
}

.header-Right-Section ul li:hover {
    background-color: var(--Navbar-Hover-color);
}

.header-Right-Section .searchIcon-li {
    margin-right: 2em;
}

.header-Right-Section .searchIcon-li:hover {
    background-color: var(--Navbar-color);
}

/* Navbar End */

/* Slider Start */
.slider-container {
    display: flex;
}


/* .slider {
    display: flex;
    overflow: hidden;
    position: relative;
    height: 80vh;
} */

.slide {
    /* position: relative;
    flex: 0 0 100%;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%; */
}

.slide img {
    /* width: 100%;
    height: auto; */
}

.bullet-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    bottom: 80px;
    margin-bottom: -60px;
    height: 230px;
    background: linear-gradient(180deg, rgba(35, 37, 40, 0) 0%, #232528 64.06%);
}

.bullet {
    /* background-color: #ccc; */
    /* border-radius: 50%; */
    /* margin: 0 5px; */
    /*  */
    position: relative;
    width: 240px;
    height: auto;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid #ffffff00;
}

.bullet.active {
    /* background-color: #333; */
    border: 3px solid #FFFFFF;
    transform: scale(1.1);
    transition: transform 0.5s ease-in-out;
}

.smallSlide-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0.01%, rgba(0, 0, 0, 0.8) 73.96%, #000000 100%);
}

.smallSlide-innerText h3 {
    font-size: 1.2rem;
    margin: 80px 0px 0px 20px;
}

.smallSlider-rating-container {
    display: flex;
    margin: 5px 0px 0px 20px;
    float: left;
}

.smallSlider-rating-container img {
    margin-right: 6px;
}

.smallSlider-rating-container span {
    font-size: 0.8rem;
    color: var(--primary-white);
}

.smallSlider-featured-container {
    position: absolute;
    right: 25px;
    bottom: 20px;
}

.slider-info-container {
    position: absolute;
    width: 500px;
    top: calc(67% - 419px/2 - 104.5px);
    left: 65px;
    padding: 30px;
    border: 1px solid #5D656F;
    border-radius: 16px;
    background: rgba(35, 37, 40, 0.8);
    /* border: 1px solid red; */
}

.slider-inner-section {}

.slider-trending {
    display: flex;
    align-items: center;
}

.slider-trending img {
    width: 22px;
    height: 22px;
}

.slider-trending span {
    font-weight: 800;
    font-size: 1.1rem;
    margin-left: 10px;
    color: var(--secondary-text-color);
}

.sliderGame-Name {
    padding-top: 10px;
    /* line-height: 0px; */
}

.sliderGame-Name h2 {
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--primary-white);
}

.sliderGame-Name p {
    font-weight: 400;
    font-size: 0.9rem;
    /* line-height: 22px; */
    color: var(--secondary-text-color);
}

.silder-gameCatogery {
    display: flex;
    align-items: center;
    width: auto;
    padding: 8px;
    margin-top: 30px;
    width: 115px;
    border: 2px solid var(--primary-white);
    border-radius: 4px;
    transition: 0.5s ease-in-out;

}

/* .silder-gameCatogery img {
    width: 22px;
    height: 22px;
    padding-right: 8px;
} */
.silder-gameCatogery svg {
    width: 22px;
    height: 22px;
    padding-right: 8px;
    transition: 0.5s ease-in-out;
}

.silder-gameCatogery span {
    font-weight: 300;
    font-size: 1rem;
    color: var(--primary-white);
    transition: 0.5s ease-in-out;
}

.silder-gameCatogery:hover {
    background-color: var(--primary-white);
}

.silder-gameCatogery:hover span {
    color: var(--Navbar-color);
}

.silder-gameCatogery:hover svg path {
    fill: var(--Navbar-color);
}


.slider-rating-container {
    display: flex;
    align-items: center;
    padding-top: 28px;
    padding-bottom: 10px;
    /* line-height: 10px; */
}

.slider-rating-container img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.slider-rating-container span {
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--primary-white);
}

.sliderBtn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 25px;
}

.slider-watchTrailer-btn {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    background: #5D656F;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
}

.slider-watchTrailer-btn:hover {
    background: #3D4248;
}

.slider-watchTrailer-btn img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
}

.slider-watchTrailer-btn span {
    font-weight: 300;
    font-size: 1.4rem;
    color: var(--primary-white);
}

.slider-download-btn {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    background: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-weight: 300;
    font-size: 1.4rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.slider-download-btn:hover {
    background: #DCDCDC;
}

.slider-download-btn img {
    margin-right: 8px;
}













#slider {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 95vh !important;
}

.slider {
    white-space: nowrap;
    overflow: hidden;
}

#slider ul {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100%;
    list-style: none;
}

#slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100vw;
}

#slider ul li img {
    width: 100%;
    background: linear-gradient(90deg, #232528 0%, rgba(35, 37, 40, 0.00) 100%), linear-gradient(0deg, #232528 20.05%, rgba(35, 37, 40, 0.90) 28.6%, rgba(35, 37, 40, 0.28) 39.39%, rgba(35, 37, 40, 0.00) 49.06%);
}


.slider-shadow-linear {
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #3d3d3d;
    background: linear-gradient(90deg, #232528 0%, rgba(35, 37, 40, 0.00) 100%), linear-gradient(0deg, #232528 20.05%, rgba(35, 37, 40, 0.90) 28.6%, rgba(35, 37, 40, 0.28) 39.39%, rgba(35, 37, 40, 0.00) 49.06%);
}


.control_next {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
    background: #434950;
    z-index: 999;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 10px;
}

.control_prev {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 5px 0px;
    margin-right: 5px;
    background: #434950;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    z-index: 999;
    cursor: pointer;
}


.slidermovingBtn-section {
    display: flex;
    position: absolute;
    right: 20px;
    bottom: 90px;
    z-index: 999;
}

.innerslider-card-conatiner {
    width: 100%;
    padding: 0px 0px 90px 64px;
}

.innerslider-card-conatiner h2 {
    color: var(--primary-white);
    font-size: 33.178px;
    font-weight: 700;
}

.innerslider-card-conatiner .slider-list-cate {
    display: flex;
}

.innerslider-card-conatiner .slider-list-cate span {
    width: auto;
    color: var(--primary-white);
    font-size: 14px;
    width: auto !important;
    margin-right: 30px !important;
    margin-top: 12px;
}

.innerslider-card-conatiner h5 {
    color: var(--primary-white);
    font-size: 16px;
    font-weight: 700;
    padding-top: 12px;
}

.innerslider-card-conatiner h5 span {
    color: var(--secondary-text-color);
    font-size: 14px;
    font-weight: 400;
    padding-left: 22px;
}

.slider-rating-boxCheck {
    display: flex;
    width: auto !important;
    margin-top: 20px;
}

.slider-rating-boxCheck svg {
    border: 1px solid #fff;
    width: 34px;
    height: 34px;
    padding: 5px;
    border-radius: 5px;
}

.slider-rating-Inner-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
}

.slider-rating-Inner-box img {
    width: 16px;
    height: 16px;
    margin-right: 7px;
}

.slider-rating-Inner-box span {
    color: var(--primary-white);
    font-size: 14px;
    font-weight: 400;
}

.slider-btns-container {
    display: flex;
    padding-top: 20px;
}

.btnDownload {
    color: var(--white-100, #EFEFEF);
    font-size: 16px;
    font-weight: 400;
    padding: 12px 24px 12px 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: var(--primary-color);
    margin-right: 14px;
    transition: 0.5s ease-in-out;
}

.btnDownload:hover {
    background-color: #1EB3FF;
}

.btnDownload svg {
    width: 20px;
    height: 20px;
}

.btnWatchTrailer {
    color: var(--white-100, #EFEFEF);
    font-size: 16px;
    font-weight: 400;
    padding: 12px 24px 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: transparent;
    transition: 0.5s ease-in-out;
}

.btnWatchTrailer svg {
    width: 20px;
    height: 20px;
}

.btnWatchTrailer:hover {
    background-color: #5D656F;
}


/* Add this to your CSS */
/* .slider-container {
    cursor: grab;
}

.slider-container:active {
    cursor: grabbing;
} */

/* Slider End */

/*  */
.latestGames-container {
    margin-top: 70px;
}

.latest-h4 {
    width: 90%;
    margin: auto;
    font-weight: 700;
    font-size: 23.04px;
    color: var(--secondary-text-color);
}

.latestGames-Section {
    display: flex;
    justify-content: space-between;
    width: 90%;
    padding: 40px 0px;
    margin: auto;
}

.latestGames-Section h4 {
    font-weight: 700;
    font-size: 23px;
    letter-spacing: 1px;
    color: var(--secondary-text-color);
}

.gamesListing-container-left {
    width: 66%;
}

.listing-a {
    text-decoration: none;
}

.gamesListing-Box {
    display: flex;
    margin-bottom: 25px;
    border-radius: 16px;
    border: 2px solid transparent;
    transition: 0.5s ease-in-out;
}

.gamesListing-Box:hover {
    border: 2px solid var(--primary-white);
}

.gamesListing-img-container {
    position: relative;
    border-radius: 16px 0px 0px 16px;
    display: flex;
    box-shadow: inset -20px 0 9px -1px rgb(0, 0, 0);
}

.gamesListing-img-container img {
    display: flex;
    /* width: 80%; */
    width: 380px;
    height: 250px;
    border-radius: 16px 0px 0px 16px;
}

.trend-and-shadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px 20px 10px 10px;
    background: linear-gradient(90deg, rgba(56, 60, 66, 0) 63.32%, #5B636D 96.04%);
}

.trend-category {
    font-size: 12px;
    font-weight: 400;
    background: #00950F;
    box-shadow: 0px 5px 10px rgba(35, 37, 40, 0.5);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--primary-white);
    animation: scale-up-out 2s infinite ease-in-out;
    border: 1px solid var(--primary-white);
}

@keyframes scale-up-out {
    0% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}

.gamesListing-details-container {
    width: 100%;
    background: linear-gradient(90deg, rgb(93, 101, 111) 33.61%, #232528 107.39%);
    padding: 0em 1em;
    border-radius: 0px 16px 16px 0px;
}

.gamesListing-details-container hr {
    margin-top: 15px;
    margin-bottom: 10px;
    border: 1px solid var(--secondary-text-color);
}

.gamesListing-name-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gamesListing-name-section {
    padding: 20px 0px 0px 0px;
}

.gamesListing-name-section h5 {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 20px;
    padding-bottom: 4px;
    color: var(--secondary-text-color);
}

.gamesListing-name-section p {
    font-weight: 400;
    font-size: 0.8rem;
    color: #BDBDBD;
}

.gamesListing-icon-section {
    display: flex;
}

.white-on-hover:hover{
    color:white;
}

.gamesListing-icon-section span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    margin-left: 10px;
    border-radius: 4px;
    background-color: var(--Navbar-Hover-color);
    
}

.gamesListing-icon-section span img {}

.list-tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    color: white;
    font-size: 12px;
    text-align: center;
    background-color: #191b1d;
    border-radius: 10px;
    padding: 8px 15px 8px 15px;
    margin-top: -80px;
    transition: 0.3s ease-in;
}

.list-tooltip::before {
    content: "";
    position: absolute;
    /* transform: rotate(45deg); */
    background-color: #5B636D;
    z-index: 1;
    transition: 0.3s ease-in;

}

.gamesListing-icon-section span:hover .list-tooltip {
    visibility: visible;
}




.Listing-rating-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.Listing-rating-container img {
    margin-right: 5px;
}

.Listing-rating-container span {
    margin-left: 3px;
    display: flex;
    color: #BDBDBD;
    font-size: 0.9rem;
}

.Listing-rating-container span img {
    display: flex;
    margin-left: 10px;
}

.Listing-subCategory-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
}

.Listing-game-size {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-white);
}

.Listing-subCategory-btnsection {}

.Listing-subCategory-btn{
    color: var(--primary-white);
    border-radius: 4px;
    padding: 6px 10px;
    border: 2px solid var(--primary-white);
    background-color: transparent;
    font-size: 0.7rem;
    letter-spacing: 1px;
    transition: 0.5s ease-in-out;
    margin-right: 5px;
    margin-bottom: 8px;
}

.Listing-subCategory-btn:hover {
    background-color: var(--primary-white);
    color: var(--Navbar-Hover-color);
    cursor:pointer;
}

.Listing-game-desc {
    font-weight: 300;
    font-size: 15px;
    padding-bottom: 20px;
    color: var(--primary-text-color);
}

.magin-bottom-15{
    margin-bottom: 15px;
}

/* Right Container of Listing Start */
.gamesListing-container-right {
    width: 30%;
}

.ad-conatiner {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #9CA4AC;
    height: 200px;
    border-radius: 8px;
}

.game-requesting-conatiner {
    margin-top: 20px;
    background: #33373C;
    padding: 24px;
    border-radius: 8px;
}

.game-requesting-conatiner h5 {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary-text-color);
}

.game-requesting-conatiner h6 {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin: 12px 0px;
    color: #EFEFEF;

}

.game-platform-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}


.game-platform-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-right: 8.12px;
    margin-bottom: 20px;
    background: #5D656F;
    font-size: 1rem;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.game-platform-btn img {
    padding-right: 5px;
}


.game-platform-btn:hover {
    background: #434950;
}

.cancel-icon {
    display: none;
    margin-left: 10px;
}

.requestGame-input {
    background: #494F58;
    border: 1px solid #5D656F;
    border-radius: 8px;
    width: 100%;
    padding: 15px 0px 15px 10px;
    color: #BDBDBD;
    font-weight: 400;
    font-size: 0.8rem;
}

.requestGame-input:focus {
    outline: none;
}

.submit-request-btn {
    padding: 12px;
    color: var(--primary-white);
    border: 1.5px solid var(--primary-white);
    border-radius: 4px;
    background: transparent;
    margin-top: 20px;
    width: 100%;
    transition: 0.5s ease-in-out;
}

.submit-request-btn:hover {
    color: var(--Navbar-Hover-color);
    font-weight: 500;
    background-color: var(--primary-white);
}

.upcoming-games-container {
    margin-top: 30px;
}

.upcoming-games-container h5 {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--secondary-text-color);
}

.upcoming-games-img-container {
    display: block;
}

.upcoming-games-img-container a {
    display: flex;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 2px solid transparent;
    height: 190px;
    transition: 0.5s ease-in-out;
}

.upcoming-games-img-container a:hover {
    border: 2px solid var(--primary-white);

}

.upcoming-games-img-container img {
    display: flex;
    width: 100%;
    border-radius: 10px;
}



.join-socialPlatform-container {
    margin-top: 20px;
    background: #33373C;
    padding: 24px;
    border-radius: 8px;
}

.join-socialPlatform-container h5 {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary-text-color);
}

.join-socialPlatform-container h6 {
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    padding-top: 5px;
}

.join-socialPlatorm-icon-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 15px 15px;
    margin-top: 20px;
    background: #232528;
}

.join-socialPlatorm-icon-container span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--Navbar-Hover-color);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.join-socialPlatorm-icon-container span:hover {
    background: #434950;
}

.Essential-Links-container {
    margin-top: 30px;
    /* padding-top: 35px; */
    border-radius: 8px;
    padding: 24px;
    background: #33373C;
}

.Essential-Links-container h5 {
    text-align: left;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--secondary-text-color);
}

.articles-links-conatainer {
    padding-top: 10px;
}

.articles-links-conatainer a {
    color: #b4b4b4;
    text-decoration: none;
    transition: 0.5s ease-in-out;
    display: block;
    line-height: 25px;
}

.more-articles-link {
    display: flex;
    align-items: baseline;
    text-align: right;
    margin-top: 15px;
    font-size: 1rem;
}

.articles-links-conatainer .more-articles-link {
    display: flex;
    align-items: center !important;
    justify-content: flex-end;
}

.articles-links-conatainer .more-articles-link img {
    margin-top: 3px;
}

.articles-links-conatainer a:hover {
    color: #FFFFFF;
}

.singleGame-article-right-conatiner-home {
    padding-top: 30px;
    width: 100%;
}

.singleGame-article-right-conatiner-home h5 {
    font-size: 1.4rem !important;
    color: var(--secondary-text-color) !important;
}

/* Right Container of Listing End */
/* Pagination Start */
.pagination-conatiner {
    width: 100%;
    margin: auto;
    padding-bottom: 50px;

}

.pagination-conatiner p {
    font-weight: 400;
    font-size: 0.9rem;
    /* padding-bottom: 15px; */
    color: var(--secondary-text-color);
}

.pagination-conatiner hr {
    width: 100%;
    border: 1px solid #BDBDBD;
    margin: 15px 0px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border: 1px solid red; */

}

.pagination div a {
    color: #000;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--secondary-text-color);
    transition: 0.5s ease-in-out;
}

.pagination a:hover {
    background: #33373C;
}

.prev {
    padding: 12px;
    background: #5D656F;
    border-radius: 4px;
    border: none;
    color: var(--primary-text-color);
    font-weight: 400;
    font-size: 0.9rem;
}

.next {
    padding: 12px;
    background: #5D656F;
    border-radius: 4px;
    border: none;
    color: var(--primary-text-color);
    font-size: 0.9rem;
    cursor: pointer;
}

.pagination a.prev,
.pagination a.next {
    background-color: #f0f0f0;
}

.pagination .count {
    margin: 0 10px;
    font-size: 14px;
    white-space: normal;
}

.pagination .count .page {
    display: inline-block;
    margin: 0 2px;
}

.pagination .count .page.active1 {
    background: #1EB3FF;
    color: #fff;
}

@media (max-width: 576px) {
    .pagination a {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .pagination a {
        padding: 6px 12px;
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .pagination a {
        padding: 8px 14px;
        font-size: 14px;
    }

    .pagination .count .page {
        margin: 0 1px;
    }
}

@media (max-width: 1200px) {
    .pagination a {
        padding: 8px 14px;
        font-size: 14px;
    }
}

@media (max-width: 1600px) {
    .pagination a {
        padding: 8px 16px;
        font-size: 16px;
    }
}

/* Pagination End */

/* Blog Start Start */
.download-page-recommended-container-blog {
    width: 90%;
    padding-bottom: 100px;
    margin: auto;
}

.download-page-recommended-container-blog h5 {
    color: var(--primary-white) !important;
    font-size: 1.8rem !important;
    text-align: center;
    padding-bottom: 10px;
}

.gamewrap-blog-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    transition: 0.5s ease-in-out;
}

.gamewrap-blog-container a {
    display: flex;
}


.blog-viewMore-btn {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 50px;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.blog-viewMore-btn:hover {
    background-color: #0863C5;
}

/* Blog End */

/* Footer Section Start */
footer {
    background-color: var(--Navbar-Hover-color);
}

footer hr {
    border: 1px solid #7C7C7C;
}

.inner-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    padding: 4rem 0rem 3rem 0rem;
    margin: auto;
}

.footer-brand-detail-conatiner p {
    font-weight: 400;
    font-size: 1rem;
    color: #BDBDBD;
    margin-top: 10px;
}

.footer-pages-lists {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 30px;
}

.footer-pages-lists a {
    font-weight: 400;
    font-size: 16px;
    color: var(--primary-white);
    padding: 12px;
    border-left: 2px solid var(--primary-color);
    text-align: left;
    transition: 0.5s ease-in-out;
}

.footer-pages-lists a:hover {
    background: #33373C;
}

.footer-lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
    padding: 1rem 0rem 1rem 0rem;
}

.footer-lower p {
    font-weight: 400;
    font-size: 0.9rem;
    color: #BDBDBD;
}

.footer-social-icons img {
    margin-left: 15px;
}

/* Footer Section End */

/* Download Page CSS Start */
.download-conatiner {
    padding: 40px 0px;
}

.download-section {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.download-left-container {
    background: #33373C;
    border-radius: 16px;
    padding: 24px;
    width: 66%;
    height: 100%;
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-left-container-center {}

.download-left-container h1 {
    color: #BDBDBD;
    text-align: center;
}

.downloadingGame-detail-container {
    background-color: var(--Navbar-Hover-color);
    padding: 4px 0px;
    border-radius: 12px;

}

.download-left-container h1 strong {
    color: #1EB3FF;
}

.downloadingGame-detail-container {
    margin: 20px 0px;
    padding: 15px 20px;
}

.downloadingGame-detail-container span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
}

.downloadingGame-detail-container span h2 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-white);
}

.downloadingGame-detail-container span p {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--secondary-text-color);
}

.downloading-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: auto;
    padding: 10px 16px;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--Navbar-Hover-color);
    background: #FFFFFF;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.downloading-btn img {
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.download-button {
    display: flex;
    align-items: center;
}

.download-button i {
    margin-left: 5px;
}


.download-right-container {
    width: 30%;
}

.download-page-recommended-container {}

.download-page-recommended-container h5 {
    font-weight: 700;
    font-size: 1.2rem;
    color: #BDBDBD;
}

.recommendedGame-card-box {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #7C7C7C;
    background: linear-gradient(180deg, #5D656F 0%, #232528 100%);
    margin-top: 15px;
    width: 100%;
    transition: 0.5s ease-in-out;
}

.recommendedGame-card-box:hover {
    border: 2px solid var(--primary-white);
}

.recommendedGame-card-img-conatiner {
    position: relative;
}

.recommendedGame-card-img-conatiner img {
    display: flex;
    width: 100%;
}

.recommendedGame-shadow-container {
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 20px;
    background: linear-gradient(180deg, rgba(56, 60, 66, 0) 53.12%, #383C42 100%);
}

.recommended-subcategory-btn {
    padding: 8px 12px;
    background: var(--primary-white);
    border-radius: 4px;
    border: none;
    font-weight: 400;
    font-size: 13.333px;
    color: var(--Navbar-Hover-color);
    margin: 0px 10px 15px 0px;
    transition: 0.5s ease-in-out;
}

.recommended-subcategory-btn:hover {
    background-color: #DCDCDC;
}

.recommendedGame-card-detail-conatiner {
    padding: 20px 16px;
}

.recommendedGame-name-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.recommendedGame-name h3 {
    font-weight: 700;
    font-size: 16px;
    color: var(--secondary-text-color);
}

.recommendedGame-name p {
    font-weight: 400;
    font-size: 13.333px;
    color: #989898;
}

.recommended-rating-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.recommended-rating-inner {}

.recommended-rating-inner img {}

.recommended-rating-container span {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary-white);
}

/* Download Page CSS End */
/* Search Listing Filters header details start */
.search-listing-results-container {}

.search-listing-results-section {
    display: flex;
    margin: auto;
    width: 90%;
    padding: 20px 0px;
}

.search-listing-result-h {}

.search-listing-result-h h1 {
    font-weight: 700;
    font-size: 23.04px;
    color: #DCDCDC;
    padding-right: 5em;
}

.search-listing-results-btns-container {
    display: flex;
}

.filterbyPlatform-container {}

.filterbyPlatform-container h6 {
    font-weight: 700;
    font-size: 19.2px;
    color: #BDBDBD;
    margin: 30px 0px 10px 0px;
}

.filterbyPlatform-section {
    padding: 16px;
    background: #33373C;
    border-radius: 16px;

}

.filterbyPlatform-section label {
    margin-left: 5px;
}

input[type="checkbox"] {
    display: none;
}

/* input[type="checkbox"]:hover+label:before {
    opacity: .5;
} */
.checkbox {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    line-height: 34px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #bdbdbd;
    font-weight: 600;
}

.checkbox:before {
    z-index: 15;
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #BDBDBD;
}

input[type="checkbox"]:checked+label {
    color: #fff;
    border-width: 2px;
}

input[type="checkbox"]:checked+label:before {
    border-color: transparent;
    border-left-color: #000;
    border-bottom-color: #000;
    transform: rotate(-50deg);
    width: 9px;
    height: 3px;
    top: 11px;
    left: 1px;
    border-width: 3px;
}

input[type="checkbox"]:checked+label:after {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #444;
    background-color: var(--primary-white);
}

.gamewrap-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    margin: auto;
    width: 90%;
    overflow: hidden;
}

.gamewrap-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    cursor: pointer;
    color: #FFFFFF;
    background-color: #434950ab;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    padding: 20px 20px 30px 20px;
    height: 50px;
    transform: translateY(-50%);
    z-index: 1;
}

.gamewrap-left-arrow {
    left: 0px;
}

.gamewrap-right-arrow {
    right: 0px;
}

.gamewrap-slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
    padding: 0px 40px;
}

.gamewrap-pill {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
    width: 10px;
    padding: 10px 10px 12px 10px;
    box-sizing: border-box;
    background-color: #5D656F;
    border-radius: 30px;
    margin-right: 20px;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gamewrap-pill.active {
    background-color: var(--primary-white);
    color: #000000;
}

.gamewrap-pill.active:hover {
    color: #ffffff;
}

.gamewrap-pill:hover {
    background-color: var(--Navbar-Hover-color);
}

/* Rest of your existing CSS styles here */



/* Help Center Page Start */
.helpCenter-Maincontainer {}

.helpCenter-center-container {
    padding: 50px 0px;
}

.helpCenter-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    width: 90%;
    background: linear-gradient(272.1deg, #232528 -30.98%, #5D656F 114.15%, #5D656F 114.15%);
    border: 1px solid #5D656F;
    border-radius: 16px;
}

.helpCenter-headerDetail-container {
    padding: 0px 0px 0px 40px;
}

.helpCenter-headerDetail-container h1 {
    font-weight: 700;
    font-size: 2rem;
    color: #FFFFFF;
}

.helpCenter-headerDetail-container p {
    font-weight: 400;
    font-size: 0.9rem;
    color: #FFFFFF;
    margin-top: 5px;
}

.helpCenter-headerImg-container {}

.helpCenter-headerImg-container img {}

.helpCenter-questions-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width: 90%;
    margin: auto;
    margin-top: 40px;
}

.helpCenter-questions-box {
    padding: 25px 30px;
    background: #33373C;
    border: 2px solid #494F58;
    border-radius: 16px;
    transition: 0.5s ease-in-out;
}

.helpCenter-questions-box:hover {
    border: 2px solid var(--primary-white);
}

.helpCenter-questions-box h2 {
    font-weight: 700;
    font-size: 1.2rem;
    color: #FFFFFF;
}

.helpCenter-questions-box p {
    font-weight: 400;
    font-size: 1rem;
    margin-top: 5px;
    color: #BDBDBD;
}

/* Help Center Page end */

/* Help Center Article Page Start */
.helpArtcile-container {}

.helpArtcile-Section {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    padding: 60px 0px;
}

.helpArtcile-container-left {
    width: 66%;
}

.helpArtcile-container-left h1 {
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-white);
    padding-bottom: 10px;
}

.helpArtcile-container-left p {
    font-weight: 300;
    font-size: 1rem;
    color: var(--primary-white);
    padding-bottom: 20px;
}

.hr3 {
    border-color: rgba(204, 204, 204, 0.411);
    margin: 20px 0px 30px 0px;
}

.helpArtcile-img-container {
    display: flex;
}

.helpArtcile-img-container img {
    width: 100%;
}

.helpArtcile-detailed-container {
    padding: 20px 0px;
}

.helpArtcile-detailed-container-pricavy {
    padding: 0px 0px 20px 0px;
}

.helpArtcile-detailed-container h1 {
    font-weight: 700;
    font-size: 2rem;
    color: var(--primary-white);
    padding-bottom: 10px;
}

.helpArtcile-detailed-container span {
    font-weight: 400;
    font-size: 1rem;
    text-align: left;
    color: #BDBDBD;
}

.helpArtcile-detailed-container p {
    font-weight: 300;
    font-size: 1rem;
    color: #EFEFEF;
    margin-top: 25px;
}

.helpArtcile-detailedOverview-container {}

.helpArtcile-detailedOverview-container h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: #DCDCDC;
    padding-top: 10px;
    padding-bottom: 10px;
}

.helpArtcile-detailedOverview-container p {
    font-weight: 300;
    font-size: 1rem;
    color: #EFEFEF;
    padding-bottom: 25px;
}

.helpArtcile-detailedOverview-container h3 {
    font-weight: 700;
    font-size: 1.5rem;
    color: #DCDCDC;
    padding: 10px 0px 10px 0px;
}

.helpArtcile-detailedOverview-container ul {
    list-style-type: disc;
    padding: 0px 0px 10px 50px;
}

.helpArtcile-detailedOverview-container li {
    font-weight: 400;
    font-size: 1rem;
    color: #EFEFEF;
    margin-bottom: 3px;
}


.helpArtcile-container-right {
    width: 30%;
}

.share-socialPlatform-container {
    background: #33373C;
    padding: 24px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.share-socialPlatform-container h5 {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--secondary-text-color);
}

.share-socialPlatform-container h6 {
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    padding-top: 5px;
}

.share-socialPlatorm-icon-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 15px 15px;
    margin-top: 20px;
    background: #232528;
}

.share-socialPlatorm-icon-container span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--Navbar-Hover-color);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.share-socialPlatorm-icon-container span:hover {
    background: #434950;
}

.relatedArticle-conatiner {
    margin-top: 30px;
}

.relatedArticle-conatiner h5 {
    font-weight: 700;
    font-size: 19.2px;
    color: #BDBDBD;
    padding-bottom: 10px;
}

.related-article-box {
    margin-bottom: 20px;
}

/* Help Center Article Page end */

/* Hero Single Game Section Start */
.sad {
    width: 100%;
    height: 100%;
}

.singleGame-hero-mainContainer {
    position: relative;
    width: 100%;
}

.gallery-container {
    position: relative;
    width: 100%;
    height: 90vh;
    /* border: 1px solid red; */
    /* display: flex; */
    /* justify-content: flex-end; */
    /* align-items: flex-end; */
}

.gallery-small-conatiner {
    height: 500px;
    overflow: hidden;
    position: absolute;
    top: 5px;
    right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid red;
}

.gallery-small-box {
    width: 250px;
    height: 140.625px;
    margin-bottom: 10px;
    border-radius: 8px;
}

.gallery-small-box:nth-child(3) {
    width: 270px;
    height: 150px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 3px solid var(--primary-white);
}

.gallery-small-box img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.arrow-gallery-icon {
    width: 50px !important;
    height: 50px;
    cursor: pointer;
}









.singleGame-hero-mainContainer img {
    width: 100%;
}

.singleGame-name-conatiner {
    position: absolute;
    bottom: -5px;
    left: 0;
    /* border: 1px solid red; */
}

.singleGame-name-section {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 6%;
    margin-top: 20px;
}

.singleGame-name-section h1 {
    color: var(--primary-white);
    font-size: 1.7rem;
    font-weight: 700;
}

.singleGame-detail-section {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.singleGame-mainCategory {
    display: flex;
    justify-content: center;
    align-items: center;
}

.singleGame-mainCategory img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.singleGame-mainCategory span {
    color: #BDBDBD;
    font-size: 1rem;
}

.singleGame-releasingDate-conatiner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.smallbullet {
    padding: 5px;
    border-radius: 50%;
    margin: 0px 10px;
    background-color: #525252;
}

.singleGame-releasingDate-conatiner span {
    color: #BDBDBD;
    font-size: 1rem;
}

.singleGame-releasingDate-conatiner span img {
    width: 14px;
    height: 14px;
}

.singlGame-review-span {
    margin-left: 10px;
    color: #BDBDBD;
    font-size: 1rem;
}

.singleGame-article-mainContainer {
    padding: 30px 0px;
}

.singleGame-article-mainSection {
    width: 90%;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
    margin: auto;
}

.singleGame-article-left-conatiner {
    width: 66%;
}

.singleGame-article-right-conatiner {
    width: 30%;
}


.tab-container {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #7C7C7C;
}

.tab-btn-container {}

#overview-tab {
    display: block;
}

#how-to-download-tab,
#update-tab,
#DLCs-tab,
#MODs-tab {
    padding: 50px 0px;
}

/* Style the buttons inside the tab */
.tab-container button {
    padding: 16px 24px;
    font-size: 1rem;
    color: #1EB3FF;
    font-size: 1.1rem;
    font-weight: 700;
    background-color: transparent;
    border: none;
}

/* Change background color of buttons on hover */
.tab-container button:hover {
    background: #33373C;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 3px solid #007bff;
}

/* Create an active/current tablink class */
.tab-container button.active {
    background: #33373C;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 3px solid #007bff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

.tabcontent a {
    color: #1EB3FF;
    font-weight: 500;
}

.singleGame-download-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    border-radius: 4px;
    border: none;
    background: #FFF;
    color: #3D4248;
    font-size: 1rem;
}

.singleGame-download-btn img {
    width: 14px;
    height: 14px;
    margin-right: 10px;
}

#how-to-download-tab h2 {
    color: #DCDCDC;
    font-size: 1.5rem;
    font-weight: 700;
}

#how-to-download-tab p {
    color: #EFEFEF;
    font-size: 1rem;
    padding: 15px 0px;
}

#how-to-download-tab img {
    width: 100%;
    border-radius: 5px;
}

#how-to-download-tab ul {
    list-style-type: decimal;
    padding: 15px 0px 0px 20px;
}

#how-to-download-tab ul li {
    color: #BDBDBD;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 5px;
}




.heart-content {
    display: flex;
    border-radius: 4px;
    background: #3D4248;
    margin-bottom: 10px;
    height: 50px;
    width: 50px;
}

svg {
    cursor: pointer;
    overflow: visible;
    width: 50px;
}

svg #heart {
    transform-origin: center;
    animation: animateHeartOut 0.3s linear forwards;
}

svg #main-circ {
    transform-origin: 29.5px 29.5px;
}

#checkbox {
    display: none;
}

#checkbox:checked+label svg #heart {
    transform: scale(0.2);
    fill: #e2264d;
    animation: animateHeart 0.3s linear forwards 0.25s;
}

#checkbox:checked+label svg #main-circ {
    transition: all 2s;
    animation: animateCircle 0.3s linear forwards;
    opacity: 1;
}

#checkbox:checked+label svg #grp1 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp1 #oval1 {
    transform: scale(0) translate(0, -30px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp1 #oval2 {
    transform: scale(0) translate(10px, -50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp2 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp2 #oval1 {
    transform: scale(0) translate(30px, -15px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp2 #oval2 {
    transform: scale(0) translate(60px, -15px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp3 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp3 #oval1 {
    transform: scale(0) translate(30px, 0px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp3 #oval2 {
    transform: scale(0) translate(60px, 10px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp4 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp4 #oval1 {
    transform: scale(0) translate(30px, 15px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp4 #oval2 {
    transform: scale(0) translate(40px, 50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp5 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp5 #oval1 {
    transform: scale(0) translate(-10px, 20px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp5 #oval2 {
    transform: scale(0) translate(-60px, 30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp6 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp6 #oval1 {
    transform: scale(0) translate(-30px, 0px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp6 #oval2 {
    transform: scale(0) translate(-60px, -5px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp7 {
    opacity: 1;
    transition: 0.1s all 0.3s;
}

#checkbox:checked+label svg #grp7 #oval1 {
    transform: scale(0) translate(-30px, -15px);
    transform-origin: 0 0 0;
    transition: 0.5s transform 0.3s;
}

#checkbox:checked+label svg #grp7 #oval2 {
    transform: scale(0) translate(-55px, -30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform 0.3s;
}

#checkbox:checked+label svg #grp2 {
    opacity: 1;
    transition: 0.1s opacity 0.3s;
}

#checkbox:checked+label svg #grp3 {
    opacity: 1;
    transition: 0.1s opacity 0.3s;
}

#checkbox:checked+label svg #grp4 {
    opacity: 1;
    transition: 0.1s opacity 0.3s;
}

#checkbox:checked+label svg #grp5 {
    opacity: 1;
    transition: 0.1s opacity 0.3s;
}

#checkbox:checked+label svg #grp6 {
    opacity: 1;
    transition: 0.1s opacity 0.3s;
}

#checkbox:checked+label svg #grp7 {
    opacity: 1;
    transition: 0.1s opacity 0.3s;
}

@keyframes animateCircle {
    40% {
        transform: scale(10);
        opacity: 1;
        fill: #dd4688;
    }

    55% {
        transform: scale(11);
        opacity: 1;
        fill: #d46abf;
    }

    65% {
        transform: scale(12);
        opacity: 1;
        fill: #cc8ef5;
    }

    75% {
        transform: scale(13);
        opacity: 1;
        fill: transparent;
        stroke: #cc8ef5;
        stroke-width: 0.5;
    }

    85% {
        transform: scale(17);
        opacity: 1;
        fill: transparent;
        stroke: #cc8ef5;
        stroke-width: 0.2;
    }

    95% {
        transform: scale(18);
        opacity: 1;
        fill: transparent;
        stroke: #cc8ef5;
        stroke-width: 0.1;
    }

    100% {
        transform: scale(19);
        opacity: 1;
        fill: transparent;
        stroke: #cc8ef5;
        stroke-width: 0;
    }
}

@keyframes animateHeart {
    0% {
        transform: scale(0.2);
    }

    40% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes animateHeartOut {
    0% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.gameSize-container {
    display: flex;
    flex-direction: column;
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #494F58;
    border-radius: 16px;
}

.gameSize-container p {
    text-align: center;
    color: #BDBDBD;
    font-size: 1.4rem;
    font-weight: 700;
}

.gameSize-container h5 {
    text-align: center;
    font-weight: 700;
    font-size: 32px;
    color: #1EB3FF;
}

.gameSize-container form {
    margin-top: 20px;
}

.game-download {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3D4248;
    font-size: 1.2rem;
    width: 100%;
    padding: 18px 24px;
    background: #FFF;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 20px;
}

.game-download img {
    margin-right: 5px;
    width: 22px;
    height: 22px;
}

.checkUpdates-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.2rem;
    width: 100%;
    padding: 18px 24px;
    background: transparent;
    border: 3px solid #fff;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    transition: 0.5s ease-in-out;
}

.checkUpdates-btn:hover {
    background: #FFF;
    color: #3D4248;
}

.form-check-label {
    color: #BDBDBD;
    font-size: 1.1rem;
}

.BitTorrent {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    margin-top: 20px;
    background: #5D656F;
    border-radius: 8px;
}

.BitTorrent img {
    margin-right: 6px;
    margin-top: 3px;
    width: 20px;
    height: 20px;
}

.BitTorrent p {
    font-weight: 600;
    font-size: 0.9rem;
    color: #FFFFFF;
    text-align: left;
    letter-spacing: 1px;
}

.BitTorrent p a {
    color: #1EB3FF;
}

/* Hero Single Game Section End */


.gameVersion-detail-conatiner {
    padding: 24px 24px 5px 24px;
    margin-top: 20px;
    background: #494F58;
    box-shadow: 0px 0px 0px 0px rgba(46, 46, 46, 0.10), 0px 8px 17px 0px rgba(46, 46, 46, 0.10), 0px 31px 31px 0px rgba(46, 46, 46, 0.09), 0px 69px 41px 0px rgba(46, 46, 46, 0.05), 0px 123px 49px 0px rgba(46, 46, 46, 0.01), 0px 192px 54px 0px rgba(46, 46, 46, 0.00);
    border-radius: 16px;
}

.gameVersion-detail-conatiner ul {}

.gameVersion-detail-conatiner ul li {
    display: flex;
    flex-direction: column;
    color: #BDBDBD;
    font-size: 1.15rem;
    padding-bottom: 26px;
}

.gameVersion-detail-conatiner ul li span {
    color: #EFEFEF;
    font-size: 1.15rem;
    font-weight: 700;
}


.Genre-div {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
}

.genre-span {
    display: flex;
    padding: 8px 12px;
    margin-right: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-weight: 300;
    border: 1.5px solid #FFF;
    cursor: pointer;
}

.genre-span:hover {
    background-color: #858585;
}

.genre-span img {
    padding-right: 5px;
}

.gameShare-container {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    background: #494F58;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 16px;
}

.gameShare-img-container {
    display: flex;
}

.gameShare-img-container img {
    width: 60px;
    height: 60px;
}

.gameShare-txt-container {
    margin-left: 8px;
}

.gameShare-txt-container h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #EFEFEF;
}

.gameShare-txt-container span {
    color: #EFEFEF;
    font-size: 15px;
    font-weight: 500;
    line-height: 35px;
    margin-left: 2px;
    display: flex;
    align-items: center;
}

.gameShare-txt-container span img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.gameShare-container p {
    margin: 25px 0px;
    color: #EFEFEF;
    padding-right: 20px;
}

.gameShare-container hr {
    height: 1px;
    background-color: #5D656F;
    border: none;
}

.gameShare-social-container {
    padding: 20px 0px 0px 0px;
}

.gameShare-social-container label {
    color: #EFEFEF;
    font-weight: 700;
    font-size: 1.2rem;
}

/* SingleGame Page Comment Section Start */
.singleGame-article-comment-conatiner {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
}

.singlePage-login-alert-container {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #CDC72F;
    background: #3C3C33;
    padding: 24px;
}

.singlePage-login-alert-container h5 {
    color: #CDC72F;
    font-size: 1rem;
    font-weight: 700;
    padding-left: 10px;
}

.leave-a-comment-container {
    display: block;
    padding-top: 30px;
}

.leave-a-comment-container-contact {
    display: block;
    padding-top: 9px;
}

.input-flex {
    display: flex;
    gap: 15px;
    padding-bottom: 10px;
}

.textarea-contact {
    margin-top: 18px !important;
}

.leave-a-comment-container h5 {
    color: #BDBDBD;
    font-size: 1.4rem;
    font-weight: 700;
}

.leave-a-comment-container textarea {
    width: 100%;
    height: 150px;
    padding: 16px 24px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 2px solid #33373C;
    border-radius: 8px;
    background-color: #33373C;
    font-size: 1.1rem;
    resize: none;
    color: #BDBDBD;
}

.leave-a-comment-container textarea:focus {
    outline: none;
}

.leave-a-comment-container input {
    width: 100%;
    padding: 16px 24px;
    margin-top: 5px;
    box-sizing: border-box;
    border: 2px solid #33373C;
    border-radius: 8px;
    background-color: #33373C;
    font-size: 1.1rem;
    resize: none;
    color: #BDBDBD;
}

.submit-comment-btn {
    color: #3D4248;
    font-size: 1rem;
    padding: 12px;
    margin-top: 10px;
    border-radius: 4px;
    background: #FFF;
    border: 2px solid #fff;

    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.submit-comment-btn:hover {
    background-color: transparent;
    color: var(--primary-white);
    border: 2px solid #fff;
}

.previous-comment-container {
    margin-top: 30px;
}

.previous-comment-container h5 {
    color: #BDBDBD;
    font-size: 1.4rem;
    font-weight: 700;
}

.previous-comment-section {
    border-radius: 8px;
    background: #33373C;
    border: 1px solid #77808A;
    padding: 24px;
    margin-top: 10px;
}

.previous-comment-profile-container {}

.previous-comment-profile-container img {
    padding-right: 10px;
}

.previous-comment-profile-container span {
    float: left;
}

.previous-comment-profile-container h6 {
    color: #BDBDBD;
    font-size: 1rem;
    font-weight: 700;
}

.previous-comment-profile-container p {
    color: #7C7C7C;
    font-size: 0.9rem;
    padding-bottom: 8px;
}

.comment-para {
    color: #EFEFEF;
    font-size: 1rem;
    font-weight: 300;
}

.previous-comment-like-container {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.previous-comment-like-container button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.previous-comment-like-container img {}

.previous-comment-like-container span {
    color: #BDBDBD;
    font-size: 1rem;
    padding-left: 8px;
}

.previous-comment-like-container h6 {
    color: #BDBDBD;
    font-size: 1rem;
    font-weight: 700;
    margin-left: 20px;
}

/* SingleGame Page Comment Section End */
.androidSingleGame-img-conatiner {
    position: absolute;
    top: -100px;
    left: 42px;
}

.androidsingleGame-name-section {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 17%;
    margin-top: 10px;
}

.androidsingleGame-name-section h1 {}


/*  */
/* sidebar css start */
.header__action {
    display: none;
}

.sidebar-toggle-btn {}

.sidebar-toggle-btn .line {
    width: 30px;
    height: 3px;
    background-color: var(--primary-white);
    display: block;
    margin: 6px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.sidebar-toggle-btn:hover {
    cursor: pointer;
}

.sidebar__area {
    position: fixed;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--Navbar-color) none repeat scroll 0 0;
    overflow: none;
    -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index: 9999;
}

.sidebar__area.sidebar-opened {
    left: 0px;
    overflow: auto;
}

.sidebar__area.sidebar-opened::-webkit-scrollbar {
    display: none;
}

.sidebar__wrapper {
    position: relative;
    padding: 30px;
    overflow: hidden;
}

.sidebar__tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.sidebar__tab .nav-tabs {
    background: #130d2d;
    border-bottom: 0;
}

.sidebar__tab .nav-tabs .nav-item {
    text-align: center;
    width: 50%;
}

.sidebar__tab .nav-tabs .nav-item .nav-link {
    color: #ffffff;
    background-color: transparent;
    border: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
}

.sidebar__tab .nav-tabs .nav-item .nav-link.active {
    background: #1b133f;
}

.sidebar__tab .nav-tabs .nav-item .nav-link:hover {
    background: #ffffff;
    color: #1a152e;
}

.sidebar__close {
    position: absolute;
    top: 25px;
    right: 80px;
}

.sidebar__close-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
}

.sidebar__close-btn:focus {
    border: 1px solid #2a3a57;
}

.sidebar__close-btn span {
    font-size: 14px;
    font-weight: 900;
}

.sidebar__close-btn span img {
    margin-top: 4px;
}

.sidebar__info p {
    color: #f7f7f9;
    margin-bottom: 30px;
    line-height: 28px;
    font-size: 14px;
}

.sidebar__contact ul li {
    margin-bottom: 8px;
    display: flex;
}

.sidebar__contact ul li .icon i {
    line-height: 27px;
    color: #f7f7f9;
    margin-right: 15px;
}

.sidebar__contact ul li .text span {
    color: #f7f7f9;
    font-weight: 700;
}

.sidebar__contact ul li .text span a {
    color: #f7f7f9;
}

.sidebar__contact ul li:hover i,
.sidebar__contact ul li:hover span {
    color: #ffffff;
}

.sidebar__contact ul li:hover i a,
.sidebar__contact ul li:hover span a {
    color: #ffffff;
}

.sidebar__search {
    margin-top: 30px;
    position: relative;
}

.sidebar__search input {
    width: 100%;
    height: 50px;
    line-height: 50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 0 15px;
    background: #292151;
    color: #f7f7f9;
}

.sidebar__search input::placeholder {
    color: #f7f7f9;
}

.sidebar__search button {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 50px;
    line-height: 50px;
    color: #f7f7f9;
    background: transparent;
}

.sidebar__login a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    padding-right: 15px;
    margin-right: 15px;
}

.sidebar__login a i {
    padding-right: 5px;
    font-size: 18px;
}

.sidebar__login a:hover {
    color: #ffffff;
}

.sidebar__cart a {
    font-size: 20px;
    color: #ffffff;
    padding-right: 15px;
    margin-right: 15px;
    position: relative;
}

.sidebar__cart a span {
    position: absolute;
    top: -5px;
    right: 5px;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 19px;
    text-align: center;
    font-size: 14px;
    color: #1a152e;
    background: #ffffff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.sidebar__cart a:hover span {
    background: #1a152e;
    color: #ffffff;
}

.dropRight-txt {
    padding: 14px 24px;
    text-align: left;
}

.dropRight-txt h6 {
    font-size: 1.1rem;
    font-weight: 300;
    text-align: left;

}

/* over lay css*/
.body-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.body-overlay.opened {
    opacity: 1;
    visibility: visible;
}

/* bg shape area */
.bg-shape {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: -1;
}

.bg-shape img {
    width: 100%;
}

/* Responsive navbar */
.mobile-menu {
    margin-top: 20px;
}

.center-side-nav {
    width: 100%;
    overflow-y: scroll;
}

.center-side-nav::-webkit-scrollbar {
    display: none;
}

.center-side-nav ul {
    display: block;
}

.center-side-nav ul li {
    padding-left: 15px;
    border: none;
    font-size: 16px;
    transition: 0.3s ease;
}

.center-side-nav ul li a {
    width: 100%;
    height: 100%;
    font-size: 16px;
}

.center-side-nav ul li svg {
    font-size: 16px;
}

.dropdown-mob {
    padding-left: 17.5px;
    background-color: #f0f3f6;
}

.dropdown-content-mob {
    width: 100%;
    height: 0px;
    margin: 0px;
    border-radius: 0px;
    background-color: #f0f3f6;
    overflow: hidden;
    transition: 0.3s ease;
}

.dropdown-content-mob-show {
    height: 255px;
    overflow: scroll;
}

.dropdown-content-mob-show::-webkit-scrollbar {
    display: none;
}

.mobile-li {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;
    cursor: pointer;
    background-color: #3D4248;
    border-radius: 6px;
    font-size: 1.5rem !important;
    font-weight: 400;
    margin-top: 20px;
    padding-right: 20px;
}

.mobile-li:hover {
    background-color: #3D4248;
}

.mobile-li a {
    color: #fff;
    display: flex;
    justify-items: center;
    align-items: center;
}

.mobile-li svg {
    display: flex;
    width: 1.8em;
    height: 1.8em;
    margin-right: 10px;
}

.mobclick-down {
    display: flex;
    align-items: center;
}

.mobnar-arrow {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.Categories-li-mob {
    cursor: pointer;
}

.dropdown-content-mob {}

.dropdown-txt-mob {
    cursor: pointer;
    padding: 7px 0px;
}

.dropdown-txt-mob h6 {
    margin-top: 6px;
    font-size: 15px;
    padding-bottom: 10px;
}

.dropdown-txt-mob p {
    margin-top: -6px;
    font-size: 13px;
    line-height: 20px;
    color: rgb(153, 152, 152);
    transition: 0.3s ease-in;
}

.dropdown-content-inner2-right-mob {
    height: 0px;
    overflow: hidden;
    transition: 0.3s ease;
}

.dropdown-content-inner2-right-mob-show {
    height: 100%;
    transition: 0.3s ease;
}

.dropdown-txt-mob-windows {}

.dropdown-txt-mob-android {}

.dropdown-txt-mob-mac {}

.dropdown-content-inner2-right-mob-android {
    height: 0px;
    overflow: hidden;
    transition: 0.3s ease;
}

.dropdown-content-inner2-right-mob-show-android {
    height: 100%;
    transition: 0.3s ease;
}

.dropdown-content-inner2-right-mob-mac {
    height: 0px;
    overflow: hidden;
    transition: 0.3s ease;
}

.dropdown-content-inner2-right-mob-show-mac {
    height: 100%;
    transition: 0.3s ease;
}


/* single */
.dropdown-content-inner2-right-mob-window-single {
    height: 0px;
    background-color: #3D4248;
    padding-left: 10px;
    transition: 0.3s ease-in-out !important;
    overflow: auto;
    text-align: left !important;
}

.dropdown-content-inner2-right-mob-window-single::-webkit-scrollbar {
    width: 8px;
}

.dropdown-content-inner2-right-mob-window-single::-webkit-scrollbar-track {
    background: #383838;
}

.dropdown-content-inner2-right-mob-window-single::-webkit-scrollbar-thumb {
    background: #888;
}

.dropdown-content-inner2-right-mob-window-single::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dropdown-content-inner2-right-mob-window-single-show {
    height: 300px;
    transition: 0.3s ease-in-out;
    margin-top: 10px;
    border-radius: 8px;
}

.dropdown-content-inner2-right-mob-android-single {
    height: 0px;
    transition: 0.3s ease;
    background-color: #3D4248;
    padding-left: 10px;
    overflow: auto;
}

.dropdown-content-inner2-right-mob-android-single::-webkit-scrollbar {
    width: 8px;
}

.dropdown-content-inner2-right-mob-android-single::-webkit-scrollbar-track {
    background: #383838;
}

.dropdown-content-inner2-right-mob-android-single::-webkit-scrollbar-thumb {
    background: #888;
}

.dropdown-content-inner2-right-mob-android-single::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dropdown-content-inner2-right-mob-android-single-show {
    height: 300px;
    transition: 0.3s ease-in-out;
    border-radius: 8px;
    margin-top: 10px;
}

.dropdown-content-inner2-right-mob-mac-single {
    height: 0px;
    overflow: auto;
    transition: 0.3s ease;
    background-color: #3D4248;
    padding-left: 10px;
}

.dropdown-content-inner2-right-mob-mac-single::-webkit-scrollbar {
    width: 8px;
}

.dropdown-content-inner2-right-mob-mac-single::-webkit-scrollbar-track {
    background: #383838;
}

.dropdown-content-inner2-right-mob-mac-single::-webkit-scrollbar-thumb {
    background: #888;
}

.dropdown-content-inner2-right-mob-mac-single::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dropdown-content-inner2-right-mob-mac-single-show {
    border-radius: 8px;
    height: 300px;
    transition: 0.3s ease-in-out;
    margin-top: 10px;
}

.li_iconSearch {}

.header_search_icon svg path {
    stroke: #fff;
}


/*  */
.gameRelease-alert-container {
    display: flex;
    align-items: center;
    display: flex;
    padding: 16px 8px;
    width: 60%;
    border-radius: 8px;
    margin-left: 65px;
    background: #3D4248;
}

.gameRelease-alert-container svg {
    margin-top: 2px;
}

.gameRelease-alert-container p {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    margin-left: -10px;
}

/*  */


.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
.close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    color: white;
}
#videoFrame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #ffffff;
    width: 90%;
    height: 100%;
}

.watchTrailerBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3D4248;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    background: #FFF;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 20px;
}

.watchTrailerBtn img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
















/* Responsive navbar */

/* Responsiveness Start */
@media only screen and (max-width: 1200px) {
    .slider-info-container {}

    .container {
        left: 100px;
    }

}

@media only screen and (max-width: 1100px) {
    .slider-info-container {
        top: 10%;
    }
}

@media only screen and (max-width: 1010px) {
    .search-listing-results-section {
        justify-content: space-between;
    }

    .search-listing-result-h h1 {
        padding-right: 0em;
    }

    .latestGames-Section {
        display: block;
    }

    .gamesListing-container-left {
        width: 100%;
    }

    .gamesListing-container-right {
        width: 100%;
    }

    .upcoming-games-img-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 10px;
    }

    .upcoming-games-img-container a {
        height: auto;
    }
}

@media only screen and (max-width: 995px) {
    .menu-conatiner {
        display: none;
    }

    .header-Right-Section {
        display: none;
    }
}

@media only screen and (max-width: 990px) {
    .header__action {
        display: block;
    }

    .bullet-container {
        display: none;
    }

    .helpCenter-questions-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .helpArtcile-Section {
        display: block;
    }

    .helpArtcile-container-left {
        width: 100%;
        padding-bottom: 20px;
    }

    .helpArtcile-container-right {
        width: 100%;
    }

    .related-article-grid-divider {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        grid-column-gap: 15px;
    }

    .share-socialPlatform-container h5,
    h6 {
        text-align: center;
    }

    .share-socialPlatorm-icon-container-helparticle {
        justify-content: center;
        gap: 10px;
    }

    .download-section {
        display: block;
    }

    .download-left-container {
        width: 100%;
    }

    .download-right-container {
        width: 100%;
    }

    .download-page-recommended-container h5 {
        padding-top: 30px;
    }

    .recommendedGame-card-box-grid-divider {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        grid-column-gap: 15px;
    }

    .slider-info-container {
        width: 50%;
    }

    .slider-trending span {
        font-size: 1rem;
    }

    .sliderGame-Name h2 {
        font-size: 1.5rem;
    }

    .sliderGame-Name p {
        font-size: 0.7rem;
    }

    .silder-gameCatogery {
        margin-top: 10px;
        width: 100px;
        padding: 5px;
    }

    .silder-gameCatogery svg {}

    .silder-gameCatogery span {
        font-size: 0.8rem;
    }

    .slider-rating-container {
        padding-top: 10px;
    }

    .sliderBtn-container {
        padding-top: 10px;
    }

    .slider-watchTrailer-btn {
        padding: 10px 10px;
    }

    .slider-watchTrailer-btn img {
        width: 20px;
        height: 20px;
    }

    .slider-watchTrailer-btn span {
        font-size: 1rem;
    }

    .slider-download-btn {
        padding: 10px 10px;
        font-size: 1rem;
    }

    .slider-download-btn img {
        width: 20px;
        height: 20px;
    }

    .game-requesting-conatiner h6 {
        text-align: left;
    }

    .singleGame-article-mainSection {
        flex-direction: column-reverse;
    }

    .singleGame-article-left-conatiner {
        width: 100%;
    }

    .singleGame-article-right-conatiner {
        width: 100%;
    }

    .singleGame-article-comment-conatiner {
        flex-direction: column;
    }

    .singleGame-article-left-conatiner {}

    .singleGame-article-right-conatiner {}

    .androidSingleGame-img-conatiner {
        position: absolute;
        top: -35px;
        left: 12px;
    }

    .androidSingleGame-img-conatiner img {
        width: 100px;
        height: 100px;
    }

    .singleGame-name-section h1 {
        font-size: 2.5vw;
    }

    .singleGame-mainCategory img {
        width: 2vw;
        height: 2vw;
    }

    .singleGame-mainCategory span {
        color: #BDBDBD;
        font-size: 2vw;
    }

    .release-spam {
        display: none;
    }

    .smallbullet:nth-child(1) {
        display: none;
    }
}

@media only screen and (max-width: 890px) {
    .gamewrap-blog-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 840px) {
    .helpCenter-header-section {}

    .helpCenter-headerDetail-container {
        padding: 8px 5px 8px 40px;
    }

    .helpCenter-headerImg-container {
        width: 100%;
        height: 100%;
    }

    .helpCenter-headerImg-container img {
        width: 100%;
    }
}


@media only screen and (max-width: 800px) {
    #slider {
        height: 100% !important;
    }

    #slider ul {
        width: 100vw;
        height: 100%;
    }

    #slider ul li {
        height: 100%;
        width: 100vw;
    }

    #slider ul li img {
        width: 100%;
    }

    .innerslider-card-conatiner {
        width: 100%;
        padding: 0px 0px 30px 64px;
    }

    .slidermovingBtn-section {
        bottom: 35px;
    }
}

@media only screen and (max-width: 780px) {
    .helpCenter-questions-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 700px) {
    .search-listing-results-section {
        width: 97%;
    }

    .gamewrap-slider-container {
        width: 97%;
    }

    .latestGames-Section {
        width: 97%;
    }

    .helpCenter-header-section {
        width: 97%;
    }

    .helpCenter-questions-container {
        width: 97%;
    }

    .helpArtcile-Section {
        width: 97%;
    }

    .download-page-recommended-container-blog {
        width: 97%;
    }

    .download-section {
        width: 97%;
    }

    .silder-gameCatogery {
        display: none;
    }

    .slider-rating-container {
        display: none;
    }

    .slider-inner-section h3 {
        display: none;
    }

    .slider-info-container {
        top: 20%;
        left: 20px;
    }

    .sliderBtn-container {
        justify-content: flex-start;
    }

    .slider-watchTrailer-btn {
        padding: 8px;
    }

    .slider-watchTrailer-btn span {
        font-size: 0.7rem;
    }

    .slider-watchTrailer-btn img {
        width: 15px;
        height: 15px;
    }

    .slider-download-btn {
        font-size: 0.7rem;
        padding: 8px;
        margin-left: 10px;
    }

    .slider-download-btn img {
        width: 15px;
        height: 15px;
    }

    .slider-info-container {
        padding: 15px;
    }

}

@media only screen and (max-width: 630px) {
    .gamesListing-name-section h5 {
        font-size: 1rem;
    }

    .gamesListing-name-section p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 600px) {
    .upcoming-games-img-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .search-listing-results-section {
        display: block;
    }

    .search-listing-results-btns-container {
        margin-top: 15px;
    }

    .gamesListing-Box {
        display: block;
    }

    .gamesListing-details-container {
        border-radius: 0px 0px 16px 16px;
    }


    .gamesListing-img-container {
        /* border-radius: 16px 0px 0px 16px; */
        border-radius: 16px 16px 0px 0px;
    }

    .gamesListing-img-container img {
        width: 100%;
        height: 100%;
        border-radius: 16px 16px 0px 0px;
    }


    .trend-and-shadow {
        background: none;
    }

    .inner-footer {
        display: block;
        padding: 2rem 0rem 3rem 0rem;
    }

    .footer-pages-lists {
        margin-top: 20px;
    }

    .footer-pages-lists a {
        display: flex;
        align-items: center;
    }

    .gamewrap-blog-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .recommendedGame-card-box-grid-divider {
        grid-template-columns: repeat(1, 1fr);

    }
}

@media only screen and (max-width: 550px) {
    .helpCenter-header-section {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .helpCenter-headerDetail-container {
        padding: 8px 20px 8px 20px;
    }

    .helpCenter-headerImg-container {
        padding: 8px 20px 0px 20px;
        /* border: 1px solid red; */
    }

    .related-article-grid-divider {
        grid-template-columns: repeat(1, 1fr);
    }

    #slider {
        height: 80vh !important;
    }

    #slider ul {
        width: 100vw;
        height: 80vh;
    }

    #slider ul li {
        height: 100%;
        width: 100vw;
    }

    .slider-img {
        width: 100%;
        height: 100%;
    }

    .innerslider-card-conatiner {
        width: 100%;
        padding: 0px 0px 80px 20px;
        text-align: center;
    }

    .innerslider-card-conatiner h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .innerslider-card-conatiner .slider-list-cate {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        text-align: center !important;
    }

    .innerslider-card-conatiner .slider-list-cate span {
        font-size: 14px;
        margin-right: .9rem !important;
    }

    .innerslider-card-conatiner h5 {
        font-size: 16px;
        padding-top: 10px;
    }

    .innerslider-card-conatiner h5 span::before {
        width: 0px;
        height: 0px;
    }

    .innerslider-card-conatiner h5 span {
        font-size: 14px;
        font-weight: 400;
        padding-left: 36px;
    }

    .slider-rating-boxCheck {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

    .slider-btns-container {
        display: flex;
        justify-content: center;
        align-items: baseline;
        padding-top: 15px;
    }

    .slidermovingBtn-section {
        right: 0px;
        bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .btnDownload {
        font-size: 14px;
        padding: 10px 24px 10px 22px;
        margin-right: 10px;
    }

    .btnDownload svg {
        width: 15px;
        height: 15px;
    }

    .btnWatchTrailer {
        font-size: 14px;
        padding: 10px 24px 10px 22px;
    }

    .btnWatchTrailer svg {
        width: 15px;
        height: 15px;
    }

    .btnWatchTrailer:hover {
        background-color: #5D656F;
    }



}

@media only screen and (max-width: 480px) {
    .helpCenter-questions-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer-pages-lists {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 20px;
    }

    .footer-lower {
        flex-direction: column;
    }

    .footer-lower p {
        font-size: 1rem;
        padding-bottom: 10px;
    }

    .helpArtcile-detailed-container h1 {
        font-size: 7vw;
    }

    .helpArtcile-detailedOverview-container h2 {
        font-size: 6.5vw;
    }

    .helpArtcile-detailedOverview-container h3 {
        font-size: 6vw;
    }

    .download-left-container {
        padding: 15px;
    }

    .download-left-container h1 {
        font-size: 7vw;
    }
}

@media only screen and (max-width: 470px) {
    .pagination {
        display: block;
    }

    .pagination .count {
        margin: 20px 0px;
    }

    .slider-info-container {
        width: 60%;
    }
}

@media only screen and (max-width: 430px) {
    .search-listing-result-h h1 {
        font-size: 6vw;
    }

    .search-listing-results-btns-container {
        flex-wrap: wrap;
    }

    .game-platform-btn {
        padding: 8px 10px;
        margin-right: 5px;
        margin-bottom: 10px;
        background: #5D656F;
        font-size: 5vw;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
}

@media only screen and (max-width: 400px) {
    .slider-info-container {
        width: 70%;
        top: 15%;
    }
}

@media only screen and (max-width: 366px) {
    .slider-info-container {
        display: none;
    }

    .footer-pages-lists {
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 20px;
    }

    .footer-social-icons img {
        margin-left: 4px;
        width: 15px;
        height: 15px;
    }

    .downloadingGame-detail-container span h2 {
        font-size: 4vw;
    }

    .downloadingGame-detail-container span p {
        font-size: 4vw;
    }
}

@media only screen and (max-width: 330px) {
    .share-socialPlatorm-icon-container span {
        padding: 5px;
    }

    .share-socialPlatorm-icon-container span img {
        width: 20px;
        height: 20px;
    }

    .logo-container img {
        width: 130px;
        height: 130px;
    }
}

/* Responsiveness End */





.gallery-container-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: absolute;
    right: 40px;
    top: 20px;
}

.gallery-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    height: 442px;
    width: 300px;
    margin-top: 20px;
    /* border: 1px solid red; */
}

.imgtype-indecator {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.4;
}

.imgtype-indecator-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.gallery-slide {
    position: relative;
    width: 250px;
    height: 130px !important;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    margin-bottom: 18px;
    transition: 0.5s ease-in-out;
}


.gallery-slide img {
    border-radius: 8px;
    opacity: 0.7;
    height: 130px !important;
}

.gallery-slide.centered img {
    border: 3px solid #fff;
    width: 270px;
    height: 130px !important;
    opacity: 1;
}

.gallery-slide.centered .imgtype-indecator {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 1;
}


.gallery-arrows {
    display: flex;
    justify-content: space-between;
    width: 250px;
    margin-top: 10px;
}

.gallery-prev,
.gallery-next {
    cursor: pointer;
    width: 60px !important;
    height: 50px;
    position: absolute;
    z-index: 999;
}

.gallery-prev {
    top: 30px;
}

.gallery-next {
    bottom: 30px;
}

.video_container {
    display: none;
    height: 90vh;
}

.no-controls::-webkit-media-controls {
    display: none !important;
}

.no-controls::-webkit-media-controls-enclosure {
    display: none !important;
}

.vid {
    /* border: 3px solid #fff; */
    border-radius: 8px;
    opacity: 0.8;
}

/*.gallery-slide .video-container {
    border-radius: 8px;
    width: 100% !important;
    height: 100% !important;
    
}
.video-container source{
    width: 100% !important;
    height: 100% !important;
}

.no-controls::-webkit-media-controls {
    display: none !important;
}*/