:root {
    --color-text: navy;
    --color-bg: papayawhip;
    --color-bg-accent: #ecdcc0;
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 14);
    --duration: 50s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
    --sidebar-width : 250px;
    --sidebar-collapsed-width: 50px;
    }
.ul_top_hypers {
    overflow-x: scroll;
    overflow-y: hidden; 
    scrollbar-width: none;
    padding: 2px;
}

/* Hide scrollbar */
.ul_top_hypers::-webkit-scrollbar {
    display: none;
}

/* Heart icon color */
.fa_ic {
    color: #fedd12 !important;
}

/* Ensure flex children don't shrink */
.ul_random_list {
    flex: 0 0 auto;
    margin: 10px;
    list-style: none;
}

/* Odd blocks (big images) */
.ul_random_list:nth-child(odd) {
    width: 100%; 
}

/* Even li acts as container for 4 small images */
.ul_random_list:nth-child(even) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

/* Anchor and image styling */
.ul_random_list a {
    position: relative;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

/* General image styles */
.ul_random_list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover zoom */
.ul_random_list a:hover img {
    transform: scale(1.1);
}

/* Gradient overlay effect */
.ul_random_list a::before {
    content: '';
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 6px;
}
.ul_random_list a:hover::before {
    opacity: 1;
}

/* Game title */
.ul_random_list .game-title {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, 10px);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 0;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

/* Title outline effect */
.ul_random_list .game-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}
.ul_random_list a:hover .game-title {
    opacity: 1;
    transform: translate(-50%, 0);
}
.ul_random_list a:hover .game-title::after {
    width: 100%;
    height: 100%;
    opacity: 1;
}
.ul_random_list a:hover{
    box-shadow: 0 0 0 2px #affffa;
}

.new_games_list img , .trend_games_list img{
	width : 100%;
    height: 100%;
	border-radius : 6px;
}

.arrow_dv {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #22253bd4;
    padding: 24px 6px;
    height: 100%;
    width: 40px;
    color: #fefefe;
    z-index: 9;
    transition: opacity 0.3s ease;
}
.position-relative:hover .arrow_dv {
    opacity: 1;
    pointer-events: auto;
}
#left_arrow , #left_arrow_New , #left_arrow_trend {
    left: 10px; /* Positioning for left arrow */
	 z-index: 9;
}
.right_arrow_div{
    right: 10px; /* Positioning for right arrow */
        display: flex;
        justify-content: center;
        height: 88%;
        align-items: center;
	 /*z-index: 9999*/
    	font-size: 34px;
    }
.left_arrow_div{
    left: 10px; /* Positioning for right arrow */
        display: flex;
        justify-content: center;
        height: 88%;
        align-items: center;
		font-size: 34px;
    }

.head_span{
    color: #fefefe !important;
    font-size: 18px;
}
/* Random Games Home Page Top CSS Grid Start */
/* Container for the game grid Start */
.game-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 
        "ip0   ip1    ip2  ip2   ip3   ip4   ip5   ip6   ip6   ip7  ip8  ip8" 
        "ip9   ip9    ip2  ip2   ip10  ip11  ip12  ip6   ip6   ip13 ip8  ip8" 
        "ip9   ip9   ip16  ip17  ip17  ip18  ip19  ip21  ip20  ip20 ip22 ip23" 
        "ip37  ip38  ip25  ip17  ip17  ip26  ip26  ip27  ip20  ip20 ip28 ip29" 
        "ip24  ip24  ip30  ip31  ip32  ip26  ip26  ip33  ip34  ip35 ip35 ip36" 
        "ip24  ip24  ip39  ip39  ip40  ip41  ip42  ip43  ip43  ip35 ip35 ip49" 
        "ip44  ip45  ip39  ip39  ip46  ip47  ip48  ip43  ip43  ip14 ip15 ip50" ;
       
    gap: 12px;
    grid-auto-rows: auto!important;
}
/* Base styles for the game-gallery */

/* Responsive Design */
@media (max-width: 468px) { /* Very small devices (Phones in portrait) */
    .game-gallery {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto!important;
        grid-template-areas:
    "ip0 ip0 ip1 ip1 ip1 ip1"
    "ip0 ip0 ip1 ip1 ip1 ip1"
    "ip2 ip2 ip1 ip1 ip1 ip1"
    "ip2 ip2 ip1 ip1 ip1 ip1"
    "ip3 ip3 ip4 ip4 ip5 ip5"
    "ip3 ip3 ip4 ip4 ip5 ip5"
    "ip6 ip6 ip6 ip6 ip7 ip7"
    "ip6 ip6 ip6 ip6 ip7 ip7"
    "ip6 ip6 ip6 ip6 ip8 ip8"
    "ip6 ip6 ip6 ip6 ip8 ip8"
    "ip9 ip9 ip10 ip10 ip11 ip11"
    "ip9 ip9 ip10 ip10 ip11 ip11"
    "ip13 ip13 ip12 ip12 ip12 ip12"
    "ip13 ip13 ip12 ip12 ip12 ip12"
    "ip14 ip14 ip12 ip12 ip12 ip12"
    "ip14 ip14 ip12 ip12 ip12 ip12"
    "ip15 ip15 ip16 ip16 ip17 ip17"
    "ip15 ip15 ip16 ip16 ip17 ip17"
    "ip18 ip18 ip18 ip18 ip19 ip19"
    "ip18 ip18 ip18 ip18 ip19 ip19"
    "ip18 ip18 ip18 ip18 ip20 ip20"
    "ip18 ip18 ip18 ip18 ip20 ip20"
    "ip21 ip21 ip22 ip22 ip23 ip23"
    "ip21 ip21 ip22 ip22 ip23 ip23"
    "ip25 ip25 ip24 ip24 ip24 ip24"
    "ip25 ip25 ip24 ip24 ip24 ip24"
    "ip26 ip26 ip24 ip24 ip24 ip24"
    "ip26 ip26 ip24 ip24 ip24 ip24"
    "ip27 ip27 ip28 ip28 ip29 ip29"
    "ip27 ip27 ip28 ip28 ip29 ip29"
    "ip30 ip30 ip30 ip30 ip31 ip31"
    "ip30 ip30 ip30 ip30 ip31 ip31"
    "ip30 ip30 ip30 ip30 ip32 ip32"
    "ip30 ip30 ip30 ip30 ip32 ip32"
    "ip35 ip35 ip34 ip34 ip33 ip33"
    "ip35 ip35 ip34 ip34 ip33 ip33"
    "ip37 ip37 ip36 ip36 ip36 ip36"
    "ip37 ip37 ip36 ip36 ip36 ip36"
    "ip38 ip38 ip36 ip36 ip36 ip36"
    "ip38 ip38 ip36 ip36 ip36 ip36"
    "ip39 ip39 ip41 ip41 ip43 ip43"
    "ip39 ip39 ip41 ip41 ip43 ip43"
    "ip40 ip40 ip42 ip42 ip44 ip44"
    "ip40 ip40 ip42 ip42 ip44 ip44"
    "ip45 ip45 ip45 ip45 ip46 ip46"
    "ip45 ip45 ip45 ip45 ip46 ip46"
    "ip45 ip45 ip45 ip45 ip47 ip47"
    "ip45 ip45 ip45 ip45 ip47 ip47"
    "ip48 ip48 ip49 ip49 ip50 ip50"
    "ip48 ip48 ip49 ip49 ip50 ip50";
    }
        /* Hide the ad container on very small screens */
        .ad-container {
            display: block; /* Ad hidden on very small devices */
        }
        .ul_random_list {
        width: 100% !important; /* stacked full width */
    }

    .ul_random_list li a {
        display: block;
        width: 100%;
        height: auto; /* let height adjust automatically */
    }
    }
/* Responsive Design */
@media (min-width: 469px) and (max-width: 767px) { /* Very small devices (Phones in portrait) */
	.game-gallery {
		grid-template-columns: repeat(7, 1fr);
		grid-auto-rows: auto!important;
		grid-template-areas:
			"ip0 ip0 ip1 ip1 ip1 ip2 ip2"
			"ip0 ip0 ip1 ip1 ip1 ip2 ip2"
			"ip4 ip4 ip1 ip1 ip1 ip3 ip3"
			"ip4 ip4 ip1 ip1 ip1 ip3 ip3"
			"ip5 ip5 ip6 ip6 ip7 ip7 ip7"
			"ip5 ip5 ip6 ip6 ip7 ip7 ip7"
			"ip9 ip9 ip8 ip8 ip7 ip7 ip7"
			"ip9 ip9 ip8 ip8 ip7 ip7 ip7"
			"ip10 ip10 ip10 ip11 ip11 ip13 ip13"
			"ip10 ip10 ip10 ip11 ip11 ip13 ip13"
			"ip10 ip10 ip10 ip12 ip12 ip14 ip14"
			"ip10 ip10 ip10 ip12 ip12 ip14 ip14"
			"ip18 ip18 ip16 ip16 ip15 ip15 ip15"
			"ip18 ip18 ip16 ip16 ip15 ip15 ip15"
			"ip19 ip19 ip17 ip17 ip15 ip15 ip15"
			"ip19 ip19 ip17 ip17 ip15 ip15 ip15"
			"ip20 ip20 ip20 ip21 ip21 ip23 ip23"
			"ip20 ip20 ip20 ip21 ip21 ip23 ip23"
			"ip20 ip20 ip20 ip22 ip22 ip24 ip24"
			"ip20 ip20 ip20 ip22 ip22 ip24 ip24"
			"ip26 ip26 ip25 ip25 ip25 ip28 ip28"
			"ip26 ip26 ip25 ip25 ip25 ip28 ip28"
			"ip27 ip27 ip25 ip25 ip25 ip29 ip29"
			"ip27 ip27 ip25 ip25 ip25 ip29 ip29"
			"ip30 ip30 ip31 ip31 ip32 ip32 ip32"
			"ip30 ip30 ip31 ip31 ip32 ip32 ip32"
			"ip34 ip34 ip33 ip33 ip32 ip32 ip32"
			"ip34 ip34 ip33 ip33 ip32 ip32 ip32"
			"ip35 ip35 ip35 ip36 ip36 ip38 ip38"
			"ip35 ip35 ip35 ip36 ip36 ip38 ip38"
			"ip35 ip35 ip35 ip37 ip37 ip39 ip39"
			"ip35 ip35 ip35 ip37 ip37 ip39 ip39"
			"ip40 ip40 ip40 ip41 ip41 ip43 ip43"
			"ip40 ip40 ip40 ip41 ip41 ip43 ip43"
			"ip40 ip40 ip40 ip42 ip42 ip44 ip44"
			"ip40 ip40 ip40 ip42 ip42 ip44 ip44"
			"ip45 ip45 ip46 ip46 ip47 ip47 ip47"
			"ip45 ip45 ip46 ip46 ip47 ip47 ip47"
			"ip48 ip48 ip50 ip49 ip47 ip47 ip47";
	}
	/* Hide the ad container on very small screens */
	.ad-container {
		display: block; /* Ad hidden on very small devices */
	}
	.ul_random_list:nth-child(even) img{
		width: 100% !important;
		margin:0;
		padding: 2px 0px !important;
	}
    .ul_random_list {
        width: 100% !important; /* full width stacked */
    }

    .ul_random_list li:nth-child(even) a {
        display: block;
        width: 100%;
        height: 100%; /* ensures link fills parent */
    }
}


    /* Responsive Design */
@media (min-width: 769px) and (max-width: 992px) { /* Medium devices (Tablets in portrait) */

    .game-gallery {
        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: auto!important;
        grid-template-areas:
    "ip0 ip0 ip1 ip1 ip1 ip2 ip2"
    "ip0 ip0 ip1 ip1 ip1 ip2 ip2"
    "ip4 ip4 ip1 ip1 ip1 ip3 ip3"
    "ip4 ip4 ip1 ip1 ip1 ip3 ip3"
    "ip5 ip5 ip6 ip6 ip7 ip7 ip7"
    "ip5 ip5 ip6 ip6 ip7 ip7 ip7"
    "ip9 ip9 ip8 ip8 ip7 ip7 ip7"
    "ip9 ip9 ip8 ip8 ip7 ip7 ip7"
    "ip10 ip10 ip10 ip11 ip11 ip13 ip13"
    "ip10 ip10 ip10 ip11 ip11 ip13 ip13"
    "ip10 ip10 ip10 ip12 ip12 ip14 ip14"
    "ip10 ip10 ip10 ip12 ip12 ip14 ip14"
    "ip18 ip18 ip16 ip16 ip15 ip15 ip15"
    "ip18 ip18 ip16 ip16 ip15 ip15 ip15"
    "ip19 ip19 ip17 ip17 ip15 ip15 ip15"
    "ip19 ip19 ip17 ip17 ip15 ip15 ip15"
    "ip20 ip20 ip20 ip21 ip21 ip23 ip23"
    "ip20 ip20 ip20 ip21 ip21 ip23 ip23"
    "ip20 ip20 ip20 ip22 ip22 ip24 ip24"
    "ip20 ip20 ip20 ip22 ip22 ip24 ip24"
    "ip26 ip26 ip25 ip25 ip25 ip28 ip28"
    "ip26 ip26 ip25 ip25 ip25 ip28 ip28"
    "ip27 ip27 ip25 ip25 ip25 ip29 ip29"
    "ip27 ip27 ip25 ip25 ip25 ip29 ip29"
    "ip30 ip30 ip31 ip31 ip32 ip32 ip32"
    "ip30 ip30 ip31 ip31 ip32 ip32 ip32"
    "ip34 ip34 ip33 ip33 ip32 ip32 ip32"
    "ip34 ip34 ip33 ip33 ip32 ip32 ip32"
    "ip35 ip35 ip35 ip36 ip36 ip38 ip38"
    "ip35 ip35 ip35 ip36 ip36 ip38 ip38"
    "ip35 ip35 ip35 ip37 ip37 ip39 ip39"
    "ip35 ip35 ip35 ip37 ip37 ip39 ip39"
    "ip40 ip40 ip41 ip41 ip42 ip42 ip42"
    "ip40 ip40 ip41 ip41 ip42 ip42 ip42"
    "ip43 ip43 ip44 ip44 ip42 ip42 ip42"
    "ip43 ip43 ip44 ip44 ip42 ip42 ip42"
    "ip45 ip45 ip45 ip46 ip46 ip47 ip47"
    "ip45 ip45 ip45 ip46 ip46 ip47 ip47"
    "ip45 ip45 ip45 ip48 ip48 ip49 ..."
    "ip45 ip45 ip45 ip48 ip48 ip50 ...";
    }
    /* Hide the ad container on very small screens */
    .ad-container {
        display: block; /* Ad hidden on very small devices */
    }
}

    /* Responsive Design */
    @media (min-width: 992px){ /* Medium devices (Tablets in portrait) */
        .game-gallery {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-areas: 
                "ip0   ip1    ip2  ip2   ip3   ip4   ip5   ip6   ip6   ip7  ip8  ip8" 
                "ip9   ip9    ip2  ip2   ip10  ip11  ip12  ip6   ip6   ip13 ip8  ip8" 
                "ip9   ip9   ip16  ip17  ip17  ip18  ip19  ip21  ip20  ip20 ip22 ip23" 
                "ip37  ip38  ip25  ip17  ip17  ip26  ip26  ip27  ip20  ip20 ip28 ip29" 
                "ip24  ip24  ip30  ip31  ip32  ip26  ip26  ip33  ip34  ip35 ip35 ip36" 
                "ip24  ip24  ip39  ip39  ip40  ip41  ip42  ip43  ip43  ip35 ip35 ip49" 
                "ip44  ip45  ip39  ip39  ip46  ip47  ip48  ip43  ip43  ip14 ip15 ip50" ;
               
            gap: 12px;
            grid-auto-rows: auto !important;
        }
        /* Hide the ad container on very small screens */
        .ad-container {
            display: block; /* Ad hidden on very small devices */
        }
    }


@media (min-width: 1024px) {
    .ul_random_list {
        width: 500px !important; /* each item fixed */
    }

    .ul_random_list li a {
        display: block;
        width: 100%;
        height: 100%;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ul_random_list {
        width: 48% !important; /* 2 items per row */
    }

    .ul_random_list li a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.game-gallery img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container for the game grid  End */

/* Common style for each game item */
.game-item {
    position: relative;
    border-radius: 15px;
    text-align: center;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.4s ease, border 0.4s ease;
    border: 2px solid transparent; /* Default border */
}
    
.game-item:hover {
    border: 1px solid #affffa;
    box-shadow: 0 0 6px rgb(5 143 143 / 78%), 0 0 10px rgb(16 169 169 / 83%), 0 0 30px rgba(5, 75, 75, 0.438);
}
.game-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.game-item:hover img {
    transform: scale(1.1);
    filter: brightness(80%);
}

/* Black overlay for content */
.game-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Black overlay with transparency */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-item:hover .overlay {
    opacity: 1; /* Show overlay on hover */
}

/* Title Overlay with Zoom In Effect */
.game-item .game-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Start at scale 0 (invisible and small) */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.5s ease;
    text-align: center;
    text-transform: uppercase;
}

.game-item:hover .game-title {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2); /* Zoom out and grow the title */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4); /* Glowing effect */
}

/* Random Games Home Page Top CSS Grid End */

/* Styling for the Home Grid ad container Start */
.ad-container {
    /* margin-top: 20px; */
    grid-area: ad;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    text-align: center;
    padding: 0px;
    width: 65%;
    height: 95px;
}

/* Styling for the Home Grid ad container End */
/* Recently Played Container Top Start */
.top_container_txt{
    text-align:center;
}
.top_container_txt span i {
    font-size: 20px;
    color: #fefefe;
}
.top_container_txt span {
    font-size: 20px;
}
@media (max-width:768px){
    .top_container_txt span i {
        font-size: 16px;
    }
    .top_container_txt span {
        font-size: 14px;
    }   
}
/* Recently Played Container Top End */

/*Home Privacy Section Css Start*/
.footer_privacy{
    border-bottom: 1px solid #999797ea !important;
    border-top: 1px solid #999797ea !important;
    padding :10px 0 !important
}
.footer_privacy a{ 
    color: #9f9999 !important;
    padding: 6px 0px !important;
    margin: 4px !important;
}
.footer_social{
    margin: 10px !important;
    padding :10px 0 !important;
}
.footer_privacy, .footer_social{
        display: none;
    }
.footer_social h6{
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 3px;
}
.privacy_sec_logo img{
    width:50% !important;
}
.privacy_sec_logo{
    text-align: center;
    padding :8px 0 !important;
}
/* Categories Home Css Start */ 

#categories_home{
    padding :3px 5px !important; 
}
#categories_home {
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#categories_home.hidden {
    max-height: 0;
    opacity: 0;
}

.categories_home:hover .footer_privacy, .categories_home:hover .footer_social{
	display: block;
	text-align: justify;
}
.social-icons i{
        display: inline-flex;
        font-size: 20px;
        margin: 5px;
    }
.whole-page-padding {
    transition: width 0.8s ease; /* or try 0.5s, adjust as you like */
    padding-top: var(--header-height);
}
.fa-indent {
    transition: transform 0.3s ease;
    display: inline-block; /* Necessary for transform to work properly */
}

.fa-indent.flipped {
    transform: scaleX(-1); /* Horizontal flip */
}

/* Categories Home Css End */ 
/*Home Privacy Section CSS End*/
@media (min-width:768px){
.ul_random_list:nth-child(even) {
        width: 405px;
        text-align: center !important;
}
.ul_random_list:nth-child(odd) {
    width: 385px;
}
	

}
@media (max-width:768px){
.ul_random_list:nth-child(even) {
    width: 50%;
}
.ul_random_list:nth-child(odd) {
    width: 50%;
}

}


/*.new_games_list, .trend_games_list {
    width: 220px;
    height: 130px;
}*/
@media (max-width:768px){
    .new_games_list, .trend_games_list {
        width: 50%;
    }
    }
.hamburger{
    padding: 10px;
}
.fa-bars, .fa-xmark{
    font-size: 30px;
}
.img-thumbnail {
    background-color: transparent!important;
}

.categories_home ul{
    list-style: none;
}
.categories_home ul li img{
width: 20px;
height: 20px;
}

.ic_size {
    width: 25px !important;
    height: 25px !important;
}
.categories_home ul li{
    margin: 16px 0px;
}
.categories_home{
    width: var(--sidebar-collapsed-width);
    height: calc(100vh - var(--header-height));
    transition: visibility 0s, all .15s ease-in-out;
    /* background: #202231; */
    background: #0c0d14;
    content-visibility: auto;
    z-index: 99999999;
    position: fixed;
    /* top: var(--header-height); */
    top: 80px;
    left: 0;
    padding: 0px 4px;
    border-right: 1px solid #28293d; 
}

.categories_home:hover {
    width: var(--sidebar-width);
    overflow-y: scroll;
}

.category_title:hover{
   margin-left: 5px;
   color: #008fd7;
} 

.category_title{
    /*transition: visibility 0s, all 1s ease-in-out;*/
    display : none;
    color: #fff; /* Text color */
    font-weight: 600;
    transition: all 0.3s ease;
}
/* Style the scrollbar itself */
.categories_home::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

/* Style the track (the background area of the scrollbar) */
.categories_home::-webkit-scrollbar-track {
    background: transparent;
}

/* Style the thumb (the draggable part of the scrollbar) */
.categories_home::-webkit-scrollbar-thumb {
    background: #888888;
  border-radius: 5px;
}

/* Hover effect on the thumb */
.categories_home::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color of the thumb when hovered */
}

.instagram .fab {
    font-size:20px;
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.GameInfo {
    display: flex;
    flex-flow: row wrap;
    /* background-color: #1a1b28; */
    border-width: 0;
    border-radius: calc(var(--base-unit)*1);
    color: #fff;
    width: 100%;
    position: relative;
    margin: auto;
    line-height: 1.5;
}

.game-details{
   /* margin-top: 55px!important;*/
}

.adver_heading{
        text-align: center;
        /*color: #000!important;
        background: #fff;*/
    }

   @media (max-width:1200px){
            .left-column{
            display:none!important;
        }
   }


.google-add-rectangle {
    padding: 0 1% 1% 1%;
    margin-top: 1%;
    text-align: center;
    width: 970px;
}
.google-add-square{
    padding: 0 1% 1% 1%;
    margin-top: 1%;
    text-align: center;
    width: 80%;
    /* height: 250px; */
    height: auto !important;
}

@media(max-width:768px){
    .google-add-rectangle {
    display: none;
    }
}

.txt_style  a {
    color: #fff;
}

.google_login_btn{
    width: 100%!important;
}

.fa-user-friends , .fa-user-circle {
font-size: 30px!important;
color: #fff;
cursor: pointer;
}
.fa-user-friends{
font-size: 25px!important;
color: #fff;
cursor: pointer;
}
#notification_id {
    font-size: 25px !important;
    color: #fff;
    cursor: pointer;
}
.fa-heart-header {
    font-size: 20px!important;
    color: #fff;
    cursor: pointer;
    background: #484848;
    padding: 6px;
    border-radius: 20px;
}

.modal-content {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 75%;
    height: 70vh;
    color: var(--bs-modal-color);
    pointer-events: auto;
    /* background-color: #212125; */
    background-color: #0c0d14;
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
    border: 1px solid #28293d;
}
.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.6;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
}
.modal-dialog {
    position: fixed;
    right: 0;
    width: 50%;
    top: 50px;
}
@media (max-width:768px){
    .modal-dialog {
        width: 98%;
        top: 72px;
    }   
    .modal-content  {
        width: 98%;
        height: 80vh;
    }   
}

.modal-header {
    border-bottom: none;
}
.modal-footer {
    border-top: none;
}
.modal-header {
    border-bottom: none;
    display: flex;
    justify-content: space-between;
}

@media (min-width:768px){
    .new_games_list, .trend_games_list {
        /*height: 100%;*/
        height: 130px;
        width: 230px;
    }
	
}
.top_ten_games {
    height: 100%;
    width: 240px;
}
@media (max-width:768px){
    .top_ten_games {
        height: 100%;
        width: 128px;
    }
}

.small-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.small-card{
    border: 1px solid #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
}
.google-adds{
    display: flex;
    justify-content: center;
}

@media(max-width:768px){
    .small-card {
        border: 1px solid #fff;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px;
        font-size: 12px;
    }
}

.views-likes{
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 15px;
    }

    .progress-login p{
        font-size:12px;
        font-weight: 600;
    }
    .progress-login{
        background-color: #6842ffb3;
        margin: 0;
    }
    .progress-btn{
            background: rgb(249, 250, 255);
            color: rgb(104, 66, 255);
            font-weight: 600;
            border-radius: 30px;
            font-size: 12px;
            padding: 2px 12px;
            border: 0;
            outline: none;
        }
        .bg-dark span{
            font-size: 18px;
            font-weight: 600;
        }

        .small-card-container{
            display: flex;
            gap: 20px;
        }
        .small-card-container img{
            width: 180px;
        }

        @media(max-width:768px){
            .small-card-container img{
                width: 100px;
            }
            .small-card-container{
                gap: 20px;
            }
        }

        .game-category-list2{
                text-align: left;
            }

        .game-category-list2 a{
            color: #fff;
        }

        .seperator {
            border-right: 1px solid white;
            padding-right: 20px;
        }

        .custom-slug{
            font-size: 13px!important;
            font-weight: 400!important;
        }

		.MainTitle_css{
			text-transform: uppercase !important;
			font-size: 30px !important;
            font-weight: 500;
			font-family: 'Roboto', sans-serif !important;
			letter-spacing: 3px !important;
            -webkit-text-stroke: 1px white;
			text-decoration:none !important;
            color: #fff !important;
		}

		/* Remove table background and borders */
            #table_description {
                --bs-table-bg: transparent !important; /* Make table background transparent */
                --bs-table-color: white !important;   /* Ensure text color is white */
                --bs-table-border-color: transparent !important; /* Remove table borders */
                background-color: transparent !important;
                border: none !important;
            }
            #table_description tbody{
                background-color: transparent !important;
                border: none !important;
            }

            .GameInfo th, .GameInfo td {
                border: none !important; /* Remove borders */
                color: white; /* Set font color to white */
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            }

            .GameInfo th {
                font-weight: bold; /* Ensure headers stand out */
                color : #a3a8c1;
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                /* text-decoration: underline; */
            }

            .GameInfo a {
                color: white; /* Make links white */
            }

            .GameInfo a:hover {
                text-decoration: underline; /* Optional: underline on hover */
            }

            /* Optional: For mobile responsiveness and better spacing */
            .GameInfo {
                width: 100%;
            }

            /* .GameInfo td, .GameInfo th {
                padding: 10px;
            } */

        .bg-layer {
            height: 100%;
            width: 100%;
            position: fixed;
            background-color: #000;
            /* z-index: 11; */
        }

        .box_games_list {
           display: flex;
           flex-direction: column;
           gap: 20px;
           
        }
       
        @media (max-width:768px){
               .box_games_list a{
                   width: 96px;
                   height: auto;
               }
			.MainTitle_css {
					font-size: 20px;
					text-shadow: 
					  -1px -1px 0 #fff,  
					   1px -1px 0 #fff,
					  -1px  1px 0 #fff,
					   1px  1px 0 #fff;
					-webkit-text-stroke: 0; /* Disable stroke on mobile */
				}
           }
        @media (min-width:768px){
         .box_games_list {
                height: 100%;
                width: 100%px;
                /* margin-left: 30px; */
            }
            .box_games_list a{
                width: 190px;
                height: 80px;
            }
        }
        
                .box_games_list img {
                    width: 100%;
                    height: 100%;
                    border-radius: 6px;
                }
        
                .recent_gallery img {
                    border-radius: 6px;
                }
        
                .recently-btn {
                    background-color: transparent !important;
                    color: #fff;
                    border: 1px solid #fefefe;
                    border-radius: 5px;
                    padding: 8px 16px;
                    font-size: 13px;
                    font-weight: 800;
                    font-family: system-ui;
                    letter-spacing: 1px;
                }
        
                .recently-btn .right-angles-icon {
                    transition: transform 0.3s ease;
                    /* Smooth transition */
                }
        
.recently-btn:hover .right-angles-icon {
    transform: translateX(5px);
}
.delete-game-btn{
	color: #fafafa;
    font-size: 28px; 
}

.hover14 figure {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin: 0;
	width: 100%;
    height: 100%;
}

.hover14 img {
    display: block;
    width: 100%;
    border-radius: 6px;
    transition: transform 0.1s ease;
}

.hover14:hover img {
    transform: scale(1.1);
}

/* Overlay from center */
.hover14 figure::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 1;
    border-radius: 6px;
}

.hover14:hover figure::before {
    opacity: 1;
}

/* Title style */
.hover14 .game-title {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translate(-50%, 10px);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 0px;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
	text-transform : uppercase;
	width: 100%;
    text-align: center;
}

/* Rectangle outline for title */
.hover14 .game-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: -1;
}

.hover14:hover .game-title {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hover14:hover .game-title::after {
    width: 100%;
    height: 100%;
    opacity: 1;
}
.big-arrow{
    height: 95% !important;
    top: 160px;
}
.small-arrow{
    height: 130px !important;
    top: 67px;
}
.view-more-link {
    display: inline-flex;
    align-items: center;
    color: #008fd2;
    font-size: 14px;
}

.view-more-link i {
    transition: transform 0.3s ease;
    margin-left: 5px;
    font-size: 10px;
}

.view-more-link:hover i {
    transform: translateX(5px);
}

@media only screen and (min-width: 769px) {
    .game-img-title {
        display: flex;
        gap: 10px;
        margin-left: 12px;
    }
}

@media only screen and (max-width: 768px) {
    .game-img-title,
    .progress-login {
        display: none !important;
    }
}

.section-category {
    position: relative;
    z-index: 0;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 90vh;
}

.cp-top {
    padding-top: 50px;
}

.games-content {
    flex: 1;
}

.cat-heading {
    /* display: flex; */
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

img.custom_thumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 230 / 130;
    border-radius: 6px;
}

@media (max-width:1024px) {
    .top_container_txt span i {
        font-size: 14px;
    }

    .top_container_txt span {
        font-size: 14px;
        text-align: left;
        /* line-height: 80% !important; */
    }

    .top_container_txt {
        line-height: 80%;
        display: flex;
        align-items: self-end;
    }

    .header-icon {
        font-size: 24px;
    }
}

@media (min-width:1025px) and (max-width:1439px) {
    .top_container_txt span {
        font-size: 14px;
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}