/* Reset and base styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #000000;
    color: white;
}

.container {
    position: relative;
    margin-top: 60px;
    /* Push content below fixed header */
    width: 100%;
}







/* Splash screen styles */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: opacity 0.5s ease;
}

.splash-logo {
    width: 200px;
    height: auto;
}







/* Header styles */
.header-up {
    position: fixed;
    /* 👈 Keeps it fixed at the top */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    /* Adjust height as needed */
    background-color: #000000;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 1000;
    /* Ensures it stays above other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    /* Optional shadow */
}


.menu-icon,
.download-icon {
    font-size: 24px;
    cursor: pointer;
}

.download-icon {
    padding-right: 40px;
}

.logo img {
    height: 40px;
}







/* Sidebar styles */
/* Sidebar styles */
.logo-name {
  display: flex;
  gap: 10px;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100vh;
  background-color: #333; /* Updated background */
  color: white;
  transition: left 0.3s ease;
  z-index: 999;
  overflow-y: auto;
  padding: 20px 0;

  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #555555 transparent;
}

/* WebKit scrollbar */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #F1F1F1;
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Sidebar item list */
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0 15px;
}


.sidebar ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  position: relative;
}
.sidebar ul p{
    padding-left: 14px;
}
.sidebar ul li a {
  color: white;
  text-decoration: none;
  flex-grow: 1;
  display: block;
}

.sidebar ul li img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Optional headings */
.sidebar ul p {
  margin: 16px 0 8px;
  font-weight: bold;
  font-size: 0.95rem;
  color: #ccc;
}
#english{
    width: 68px;
}









/* Submenu box beside Sports */
.submenu-box {
    position: absolute;
    top: -30px;
    left: 100%;
    width: 180px;
    background-color: #000000;
    padding: 10px;
    border-left: 2px solid #555;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    z-index: 1000;
}

#sportsSubmenu ,#casinoSubmenu,#slotSubmenu,#tableSubmenu,#fishingSubmenu,#arcadeSubmenu,#lotterySubmenu{
    width: 70px;
    background-color: rgb(20, 19, 19);
}


.submenu-item {
    text-align: center;
    color: white;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.submenu-item .icon {
    font-size: 24px;
    margin-bottom: 5px;
}

.submenu-item .label {
    font-size: 14px;
}


.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background-color: #000000;
    color: white;
    transition: left 0.3s ease;
    padding-top: 60px;
    z-index: 999;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    padding: 15px 20px;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: block;
}
.sidebarMenu li{
    display: flex;
}
.sidebarMenu li a{
    /* margin-top: 7px; */
    padding: 7px;

}
.sidebarMenu li img{
    margin-left: -11px;
}

/* Submenu panel */
.submenu-panel {
    position: fixed;
    top: 60px;
    left: -250px;
    width: 200px;
    background-color: #444;
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 998;
}
.submenu-panel .submenu-item img{
    width: 40px;
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    cursor: pointer;
}

.submenu-item:hover {
    color: #fff700;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 997;
}












/* Overlay styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 998;
}



/* This Code is Banner.  */
/* Banner container */


.div-down {
    overflow: hidden;
    background-color: #111;
    padding: 10px;
}

.image-strip {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollShowcase 8s ease-in-out infinite;
}

.image-strip img {
    width: 200px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    flex-shrink: 0;
}

/* Keyframes to slide by one image every second */
@keyframes scrollShowcase {
    0% {
        transform: translateX(-160px);
    }

    /* Show 20% of image 1 */
    12.5% {
        transform: translateX(-160px);
    }

    /* Pause */
    25% {
        transform: translateX(-380px);
    }

    /* Show image 2 */
    37.5% {
        transform: translateX(-380px);
    }

    50% {
        transform: translateX(-600px);
    }

    /* Show image 3 */
    62.5% {
        transform: translateX(-600px);
    }

    75% {
        transform: translateX(-820px);
    }

    /* Optional next scroll */
    87.5% {
        transform: translateX(-820px);
    }

    100% {
        transform: translateX(-160px);
    }

    /* Reset to 20% of image 1 */
}












/* NavBar Style Starts.  */

/* this file is for Nav.  */


.announcement {
    position: relative;
    font-size: 30px;
    padding-top: -57px;
    padding-left: 10px;
    /* border: 1px solid rgb(96, 94, 94); */
    border: flex;
    background-color: #262626;
}


/* Navigation menu container */

.nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.announcement {
    background-color: #111;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.announcement {
    background-color: #111;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    margin-bottom: 10px;
}

body {
    margin: 0;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
}


.nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

 

.nav-wrapper {
    position: relative;
}

.nav-menu {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #444 #000;
    /* thumb and track */
}

/* Chrome, Safari, Edge */
.nav-menu::-webkit-scrollbar {
    height: 6px;
}

.nav-menu::-webkit-scrollbar-track {
    background: #000;
}

.nav-menu::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 3px;
}

.menu-item {
    flex: 0 0 auto;
    text-align: center;
    padding: 10px;
    /* margin-right: 12px; */
    background-color: #222;
    /* Light dark for inactive */
    /* border-radius: 12px; */
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #fff;
    width: 80px;
    text-decoration: none;
}

.menu-item i {
    font-size: 24px;
    margin-bottom: 6px;
    display: block;
}

.menu-item span {
    font-size: 14px;
    display: block;
}

.menu-item:hover {
    background-color: #333;
}

.menu-item.active {
    background-color: #000;
    /* Darker for active */
    border: 1px solid #444;
}

.scrollbar-box {
    height: 10px;
    background-color: #111;
    border-radius: 5px;
    margin-top: 6px;
}







/* Style For navmenu click  option */
.tab-content {
    margin-top: 20px;
    display: flex;
    flex-direction: c;
    flex-wrap: wrap;
    gap: 12px;
}

.option {
    background-color: #333333;
    padding: 7px ;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.option:hover {
    background-color: #222;
}

.option img {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    object-fit: contain;
}

#optionImg{
    width: 55px;
    height: 55px;
}




/* Css for Favourite Part.  */




.favourite-game label b {
    color: #ffeb3b;
    font-size: 20px;
    padding-left: 6px;
}

.favourite-game label {
    color: #ffffff;
    font-size: 16px;
    font-size: bold;
    
}

.favourite-game .fav-img {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px 20px;
    background-color: #000000;
    scrollbar-width: thin;
    scrollbar-color: rgb(162, 162, 162) transparent;
}

.favourite-game .fav-img::-webkit-scrollbar {
    height: 6px;
}

.favourite-game .fav-img::-webkit-scrollbar-thumb {
    background: rgb(82, 82, 79);
    border-radius: 3px;
}

.favourite-game .fav-img::-webkit-scrollbar-track {
    background: transparent;
}

.favourite-game .fav-img img {
    width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 5px rgb(158, 158, 158);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.favourite-game .fav-img img:hover {
    transform: scale(1.05);
}

.fav-img {
    margin-top: 10px;
}





/* This Part is For Featured Games */
.featured-game label b {
    color: #ffeb3b;
    font-size: 20px;
    padding-left: 6px;
}

.featured-game .fav-img {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 10px 20px;
    background-color: #111;
    scrollbar-width: thin;
    scrollbar-color: rgb(235, 235, 235) scrollbar-base-color: white;
}

.featured-game .fav-img::-webkit-scrollbar {
    height: 6px;
}

.featured-game .fav-img::-webkit-scrollbar-thumb {
    background: yellow;
    border-radius: 3px;
}

.fav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.fav-card img {
    width: 200px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 10px yellow;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.fav-card:hover img {
    transform: scale(1.05);
}

.caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    margin-top: 8px;
    color: yellow;
    font-size: 0.9rem;
}

.caption i {
    color: yellow;
    transition: color 0.3s ease;
    cursor: pointer;
}

.caption i:hover {
    color: #ffeb3b;
}

.fav-img {
    margin-top: 6px;
}




/* this Part is For Payment ;  */
.payment {
    margin-top: 14px;
    margin-bottom: 5px;
}

.payment .label {
    margin-bottom: 7px;
}

.payment .label b {
    color: yellow;
}

.payment-box {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 20px;
    background-color: #111;
    background-image: linear-gradient(rgb(54, 51, 51), rgb(0, 0, 0));

    /* scrollbar-width: thin; */
    /* scrollbar-color: rgb(142, 142, 142) ; */
}

/* .payment-box::-webkit-scrollbar {
    height: 6px;
}

.payment-box::-webkit-scrollbar-thumb {
    background: yellow;
    border-radius: 3px;
}

.payment-box::-webkit-scrollbar-track {
    background: transparent;
} */

.payment-box img {
    margin-top: 5px;
    width: 60px;
    height: auto;
    border-radius: 8px;
    /* box-shadow: 0 0 8px yellow; */
    transition: transform 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.payment-box img:hover {
    transform: scale(1.1);
}







/* For Social Network  */
.social-network .label b {
    color: yellow;
}

.link {
    display: flex;
    gap: 20px;
    justify-content: left;
    /* background-color: #292727; */
    background-image: linear-gradient(rgb(54, 51, 51), rgb(0, 0, 0));

    padding: 10px;
    border-radius: 15px;
    margin-top: 7px;
    margin-bottom: 30px;
}

.social-icon {
    font-size: 24px;
    /* color: #0000ff; */
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icon:hover {
    /* color: #0077ff; */
}








/* this Part is For Gaming */
.licence .label b {
    color: yellow;
}
.gamingLicence{
    background-color: red;
}

.gamingLicence {
    display: flex;
    gap: 20px;
    justify-content: left;
    /* background-color: #292727; */
    background-image: linear-gradient(rgb(54, 51, 51), rgb(0, 0, 0));
    width: 222px;
    padding: 10px;
    border-radius: 15px;
    margin-top: 7px;
    margin-bottom: 30px;
}
.gamingLicence img{
    width: 65%;
}







/* This Code is For Footer  */
.container .footer {
    background-color: #000000;
    padding: 20px 0;
}


.footer-links {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    margin: 0;
}

.footer-links li {
    margin: 0;
}

.footer-links a {
    text-decoration: none;
    color: yellow;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #007bff;
}

/* Animation for Affiliate link */
.footer-links li:nth-child(2) a {
    animation: colorCycle 2s infinite;
}

@keyframes colorCycle {
    0% {
        color: yellow;
    }

    33% {
        color: white;
    }

    66% {
        color: red;
    }

    100% {
        color: yellow;
    }
}

/* This is for Footer Ander Area that is in footer class */
.container .footer .textPart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #000000;
    flex-wrap: wrap;
}

.textPart {
    
    margin-top: 20px;
    background-color: red;
    margin-bottom: 39px;
    
    
}

.textPart .left {
    display: flex;
    align-items: center;
}

.textPart .left a img {
    width: 90px;
}

.social-icon {
    font-size: 24px;
    color: #4267B2;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: #29487d;
}

.textPart .right {
    text-align: left;
    /* aligns text inside to the left */
}

.right .title {
    font-weight: bold;
    font-size: 7px;
    margin: 0;
}


.textPart .right p {
    margin: 2px 0;
    font-size: 11px;
    color: #ffeb3b;

}

#copyright {
    color: #b0afaf;
}

#symbool {
    color: yellow;
    font-size: 21px;
    font-size: bold;

}


/* Code For Under Fixed Part.  */
.container .fixed-under {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    /* stack icons vertically */
    gap: 15px;
    z-index: 1000;
}

.fixed-under {
    margin-bottom: 70px;
    margin-right: 40px;
}

.fixed-under .icon {
    font-size: 28px;
    color: white;
    background-color: #25D366;
    /* WhatsApp green */
    padding: 10px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease;
    text-align: center;
}

.fixed-under .icon.telegram {
    background-color: #0088cc;
    /* Telegram blue */
}

.fixed-under .icon:hover {
    transform: scale(1.1);
}

/* this code is For last Part BDT, SignUp , Login */
.container .last .fixed-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: space-between;
    z-index: 999;

}

.last {
    margin-top: 20px;
}
.last .fixed-box .part{
    display: flex;
}

.fixed-box .part {
    flex: 1;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #000;
    border-right: 1px solid #ccc;
}
#bangladesh{
    width: 30px;
    height: 30px;
}

/* Specific styles for each box */
.fixed-box .bdt {
    background-color: white;
}
#BDT{
    margin-top: -5px;
    padding-left: 8px;

}
.fixed-box .signup {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.fixed-box .login {
    background-color: black;
    color: white;
    /* override default text color */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Optional: remove border from last box */
.fixed-box .part:last-child {
    border-right: none;
}













/* Animation: scroll right to left
@keyframes scrollBanner {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}
 */





/* Responsive tweaks (optional) */
@media (max-width: 480px) {
    .submenu-box {
        width: 180px;
        grid-template-columns: 1fr 1fr;
        font-size: 13px;
    }

    .submenu-item .icon {
        font-size: 20px;
    }
}