@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root {
    --theme_color: #0A3D91;
    --theme_color_dark: #072A68;
    --theme_color_light: #123D76;
    --theme_color_hover: #1752A3;
    --gold_color: #C6921E;
    --gold_light: #FFD35C;
    --white_color: #ffffff;
    --black_color: #000000;
    --bg_gradient_top: #081B33;
    --bg_gradient_bottom: #0D2D52;
    --login_box_bg: #0E284A;
    --text_blue_light: #8EB8E5;
    --text_blue_lighter: #9BC9FF;
    --text_label: #5F7FA6;
    --whatsapp_green: #25D366;
}
body, html {background: linear-gradient(180deg, #081B33 0%, #0D2D52 100%);min-height: 100dvh;font-family: Poppins, Exo\ 2, sans-serif;}
.container-fluid {padding: 0;}
::placeholder {font-weight: 600;}
a {text-decoration: none;}
.route-system {padding: 20px;min-height: calc(100vh - 134px);}
.theme-color {color: var(--theme_color);}
.top_space {margin-top: 15px;}
.section_head {display: flex;align-items: center;padding: 8px 0;margin-bottom: 5px;}
.section_head h2 {font-size: 20px;text-transform: uppercase;color: var(--white_color);margin: 0;display: flex;align-items: center;gap: 10px;}
.section_head h2 img {width: 25px;}
.columns {display: grid;align-items: center;gap: 16px;}
.columns img {width: 100%;border-radius: 8px;}
.games_selecteds_top {grid-template-columns: repeat(4,1fr);}
.games_selecteds_bottom {grid-template-columns: repeat(10,1fr);}
.columns .game_default {position: relative;}
.star {position: absolute;top: 8px;right: 8px;cursor: pointer;}
.star::after {content: '';background: url(../images/star.svg) no-repeat center;background-size: 20px;background-color: var(--black_color);width: 30px;height: 30px;border-radius: 50%;display: block;}
.star.open::after {background-color: var(--gold_color);background: url(../images/favoritos.svg) no-repeat center, var(--gold_color);background-size: 20px;}
.mobile-item, .search-box {display: none;}
/* header css */
header {background-color: var(--theme_color);padding: 0 40px;}
header .navbar {padding: 0;}
header .navbar-brand {padding: 0;margin-right: 40px;}
header .navbar-brand img {width: 167px;}
header .nav-item a {padding: 0 16px;height: 64px;display: flex;align-items: center;    font-size: 14px;font-weight: bold;text-transform: uppercase;text-decoration: none;color: var(--white_color);}
header .nav-item a.active {border-bottom: 2px solid var(--gold_light);background: var(--theme_color_dark);}
header .right {gap: 10px;}
header .right button {font-size: 14px;line-height: 1.2;font-weight: 600;background: var(--theme_color_dark);padding: 2px 10px;border: 0;border-radius: 5px;color: var(--white_color);display: flex;align-items: center;gap: 5px;text-align: right;}
.right .dropdown-menu {padding: 5px 0;font-size: 14px;background: var(--login_box_bg);border: 1px solid var(--theme_color);transform: translate(-20px, 50px) !important;box-shadow: 0px 0px 12px rgba(0, 0, 0, .72);width: 100%;min-width: max-content;}
.right .dropdown-menu a {padding: 8px 24px;background: var(--login_box_bg);color: var(--white_color);text-align: center;line-height: 14px;}
header .logout {background: var(--theme_color_dark);border-radius: 50%;display: flex;align-items: center;justify-content: center;height: 40px;width: 40px;}
header .logout img {width: 16px;}
/* header css */

/* drawer css */
.hamburger {gap: 8px;}
.hamburger img {width: 20px;filter: brightness(0) invert(1);}
#overlay {width: 100%;height: 100vh;position: fixed;left: 0;top: 0;background: #00000080;backdrop-filter: blur(5px);z-index: 100;display: none;}
#drawer-menu {width: 400px;height: 100vh;background: #141414;position: fixed;left: 0;top: 0;z-index: 200;transform: translateX(-500px);transition: all 0.3s ease 0s;box-shadow: 0px 16px 48px 16px rgba(0,0,0,.72),0px 12px 32px #000,0px 8px 16px -8px #000;}
#drawer-menu.open {transform: translateX(0);}
#drawer-menu .drawer_head {padding: 16px;background-color: var(--theme_color);color: var(--white_color);display: flex;align-items: center;justify-content: space-between;}
#drawer-menu .drawer_head h3 {font-size: 24px;text-transform: uppercase;margin: 0;}
#drawer-menu #close {position: relative;width: 20px;height: 20px;display: flex;align-items: center;}
#drawer-menu #close span {width: 20px;height: 2px;background: #fff;position: absolute;left: 0;}
#drawer-menu #close span:first-child {transform: rotate(45deg);}
#drawer-menu #close span:nth-child(2) {transform: rotate(-45deg);}
.drawer_content {padding: 20px;height: calc(100vh - 139px);overflow: auto;}
.drawer_content .menu {display: flex;flex-wrap: wrap;gap: 8px;}
.drawer_content .menu a {background: #202020;border: 1px solid #464646;border-radius: 5px;color: #ddd;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 8px;flex: 1;padding: 16px;text-align: center;min-width: calc(50% - 10px);text-transform: uppercase;text-decoration: none;line-height: normal;}
.drawer_content .menu a.active, .drawer_content .menu a:hover {background: rgba(10, 61, 145, 0.1);border-color: rgba(10, 61, 145, 0.3);color: var(--theme_color);}
.drawer_content .menu a.active span, .drawer_content .menu a:hover span {background-color: var(--theme_color);}
.drawer_content .menu a span {width: 40px;height: 40px;background: rgba(10, 61, 145, 0.2);display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.drawer_content .menu a img {width: 20px;height: 20px;}
.drawer_content ul {margin: 16px 0 0;display: flex;flex-direction: column;gap: 8px;padding: 0;list-style-type: none;}
.drawer_content ul li a {display: flex;align-items: center;gap: 10px;opacity: .75;color: #fff;padding: 8px 10px;text-decoration: none;}
.drawer_footer {padding: 16px 0 20px;margin: 0 20px;border-top: 1px solid #464646;}
.drawer_footer a {padding: 12px;background-color: #dc3545;color: var(--white_color);display: flex;align-items: center;justify-content: center;gap: 16px;border-radius: 50px;font-weight: 600;text-decoration: none;text-transform: uppercase;font-size: 14px;line-height: 14px;}
.drawer_footer a:hover {background-color: #b02a37;}
.drawer_footer a img {transform: rotate(180deg);}
.drawer_content ul li img, .drawer_footer a img {width: 16px;}
 
/* drawer css */

/* banner css */
#home_banner .owl-nav button {background-color: var(--black_color);border-radius: 50%;box-shadow: 0 0 10px var(--black_color);color: var(--theme_color);line-height: 0;position: absolute;top: 50%;transform: translateY(-50%);z-index: 2;width: 40px;height: 40px;background: url(../images/left.svg), var(--black_color) no-repeat;background-size: 40px;}
#home_banner .owl-nav .owl-prev {left: 20px;}
#home_banner .owl-nav .owl-next {right: 20px;transform: rotate(180deg);}
/* banner css */

/* proveedores css */
.proveedores .proveedores_content {display: flex;gap: 10px;overflow-x: auto;padding-bottom: 7px;white-space: nowrap;}
.proveedores_content a {display: flex;justify-content: center;align-items: center;background: rgba(10, 61, 145, 0.15);border: 2px solid transparent;border-radius: 5px;height: 70px;padding: 10px;width: 150px;flex: 1;}
.proveedores_content .provider-item.active-tab {border-color: var(--gold_color);}
.proveedores_content a img {max-height: 35px;max-width: 100%;}
/* proveedores css */

/* footer css */
footer {background-color: var(--theme_color);color: var(--white_color);padding: 15px 50px;}
footer .footer_row {display: flex;}
footer .left {display: flex;align-items: center;gap: 8px;}
footer .f_logo {width: 100px;}
footer .whatsapp {background: var(--whatsapp_green);color: var(--white_color);border-radius: 30px;height: 40px;padding: 0 15px;font-size: 16px;gap: 8px;display: flex;align-items: center;text-decoration: none;margin-left: 90px;}
.whatsapp img {width: 22px;}
footer .right {display: flex;align-items: center;gap: 40px;}
footer .right .dropdown-menu {transform: translate(40px, -40px) !important;}
footer .right .dropdown-toggle {background: transparent;border: 0;outline: none;}
footer .right .country-flag {width: 15px;}
footer .right .dropdown-item {text-align: left;display: flex;align-items: center;gap: 10px;}
/* footer css */

.listing_modal {width: 100%;height: 100vh;position: fixed;left: 0;top: 0;background: #00000000;backdrop-filter: blur(5px);}
.listing_modal .modal-content, .listing_modal .modal-header {border-radius: 0px;}
.listing_modal .modal-header {display: flex;align-items: center;justify-content: space-between;padding: 5px 10px;background-color: var(--black_color);border: 0;}
.listing_modal .modal-header h5 {font-size: 18px;color: var(--white_color);margin: 0;}
.listing_modal .modal-header a {background-color: var(--theme_color);color: var(--white_color);padding: 8px 15px;border-radius: 4px;line-height: 16px;font-size: 14px;}
.listing_modal .modal-body {background-color: #1f1f1f;max-height: calc(100vh - 140px);overflow: auto;}
.search_wrapper {padding: 3px 15px;border-radius: 4px;box-shadow: 0 0 0 1px #4c4d4f inset;display: flex;align-items: center;margin-bottom: 16px;}
.search_wrapper img {width: 14px;margin-right: 8px;}
.search_wrapper input {height: 38px;width: 100%;background: transparent;border: 0;font-size: 14px;color: #cfd3dc;}
.search_wrapper input:active, .search_wrapper input:focus-visible {border: 0;outline: none;}
.listing_modal .listing {display: flex;flex-direction: column;gap: 5px;}
.listing_modal .listing a {display: flex;align-items: center;justify-content: space-between;padding: 5px;color: var(--white_color);border-radius: 50px;}
.listing_modal .listing a:hover {background-color: var(--theme_color);}
.listing_modal .listing a .icon {display: flex;margin-right: 10px;}
.listing_modal .listing .img_title img {width: 24px;}
.listing_modal .listing .icon img {width: 18px;}
.provider_data {display: flex;align-items: center;gap: 7px;font-size: 14px;}
.provider_data .provider_img {width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: var(--black_color);}
.provider_data .provider_img img {width: 22px;}

.games_filters {display: grid;align-items: center;grid-template-columns: 440px 1fr;gap: 10px;}
.games_filters .nav-tabs {flex-wrap: nowrap;gap: 10px;border: 0;font-size: 14px;}
.games_filters .nav-tabs .nav-link {flex: 1;text-align: center;border: 1px solid var(--theme_color);color: var(--white_color);border-radius: 30px;background-color: transparent;display: flex;align-items: center;justify-content: center;gap: 10px;margin: 0;padding: 5px 10px;}
.games_filters .nav-tabs .nav-link:hover, .games_filters .nav-tabs .nav-link.active {background-color: var(--theme_color);}
.games_filters .nav-link img {width: 25px;}
.games_filters .nav-link:first-child {max-width: 160px;}
.games_filters .nav-link:first-child img {filter: brightness(0) invert(1);}
.games_filters .search_filter {display: flex;background: rgba(10, 61, 145, 0.25);border: 1px solid var(--theme_color);border-radius: 30px;padding: 1px 1px 1px 12px;}
.games_filters .search_filter input {width: 100%;background: transparent;border: 0;outline: none;padding-left: 10px;color: var(--white_color);height: 34px;}
.games_filters .search_filter input::placeholder {color: var(--white_color);}
.games_filters .search_filter img {width: 16px;}

.login_section {height: 100vh;width: 100vw;display: flex;align-items: center;justify-content: center;padding: 10px;background: linear-gradient(180deg, var(--bg_gradient_top) 0%, var(--bg_gradient_bottom) 100%);}
.login_section .form_container {background: var(--login_box_bg);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 16px;display: flex;box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);justify-content: center;align-items: center;margin: auto;padding: 24px;width: 100%;max-width: 680px;}
.login_section .form_image img {max-width: 240px;padding: 16px;}
.login_section .form-item {border-radius: 0 16px 16px 0;color: #fff;display: flex;flex-direction: column;gap: 20px;margin: auto;max-width: calc(100dvw - 10px);padding: 25px 15px;width: 100%;width: 400px;}
.login_section .auth-header img {max-width: 250px;height: auto;}
.login_section .form-group .input__inner {background: transparent;border: 0;border-bottom: 1px solid rgba(255,255,255,0.2);border-radius: 0;box-shadow: none;color: var(--white_color);padding: 12px 0;height: 50px;line-height: 26px;width: 100%;font-size: 14px;}
.login_section .form-group .input__inner::placeholder {color: var(--text_label);font-weight: 500;}
.login_section .form-group .input__inner:focus-visible {outline: none;border-bottom: 1px solid var(--text_blue_light);}
.login_section .login {background: var(--theme_color_light);border: 1px solid var(--theme_color_light);color: var(--white_color);padding: 14px 19px;border-radius: 50px;line-height: 14px;font-size: 14px;text-transform: uppercase;width: 100%;font-weight: 700;box-shadow: 0 4px 8px rgba(0,0,0,0.3);transition: background 0.3s;}
.login_section .login:hover {background: var(--theme_color_hover);}
.login_section .whatsapp_support {display: flex;margin: 0 auto;width: max-content;min-width: 210px;font-weight: 600;background: #111C2C;border: 1px solid #111C2C;color: var(--white_color);border-radius: 12px;align-items: center;position: relative;padding: 7px 16px 7px 57px;}
.login_section .icon-support {background: var(--whatsapp_green);display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;border-radius: 50%;left: 0;position: absolute;}
.login_section .icon-support img {width: 20px;}
.login_section .whatsapp_support .text {align-items: start;display: flex;flex-direction: column;gap: 3px;line-height: 1;text-transform: none;}
.login_section .whatsapp_support .text .text-value {font-size: 17px;color: var(--white_color);}
.login_section .whatsapp_support .text .mini-text {font-size: 12px;color: var(--text_blue_lighter);}

@media screen and (max-width: 1200px) {
    .games_selecteds_bottom {grid-template-columns: repeat(5, 1fr);}
    .games_filters {grid-template-columns: 320px 1fr;}
}
@media screen and (max-width: 991px) {
    .desktop-item, .navbar-toggler, header .logout {display: none;}
    .mobile-item {display: block;}
    header {padding: 10px;position: sticky;top: 0;z-index: 9;}
    header .navbar-brand img {width: 125px;}
    header .right .dropdown-menu {transform: translate(0px, 50px) !important;}
    .mobile_modals {padding: 5px 8px;position: sticky;top: 58px;z-index: 2;background: var(--black_color);}
    .mobile_modals .modals {display: grid;grid-template-columns: 40px 1fr 1fr;gap: 10px;}
    .mobile_modals .modals .col a {align-items: center;background: rgba(10, 61, 145, 0.25);border: 1px solid var(--theme_color);border-radius: 30px;display: flex;font-size: 14px;gap: 1rem;height: 100%;justify-content: center;line-height: 1;height: 38px;color: #fff;}
    .mobile_modals .modals .search {width: 40px;}
    .mobile_modals .modals .col img {width: 14px;}
    .login_section .form_container {max-width: max-content;}
    .columns {gap: 8px;}
    .route-system {padding: 20px 8px;}
    .games_selecteds_top {grid-template-columns: repeat(2, 1fr);row-gap: 2px;}
    .games_selecteds_bottom {grid-template-columns: repeat(3, 1fr);}
    footer .footer_row, footer .left {flex-direction: column;gap: 15px;font-size: 14px;}
    footer .f_logo {width: 180px;}
    footer .right {gap: 10px;}
    footer .right .dropdown-menu {transform: translate(-50px, -40px) !important;}
    footer .whatsapp {margin-left: 0;}
    .search-box.active {width: 100%;position: absolute;top: 0;left: 0;right: 0;display: flex ;align-items: center;padding: 5px;background: var(--black_color);height: 48px;}
    .search-box.active input {width: 100%;height: 38px;background: rgba(10, 61, 145, 0.2);border: 1px solid var(--theme_color);text-align: center;border-radius: 30px;color: #fff;padding: 0 20px;outline: none;}
    .search-box.active input::placeholder {color: var(--text_label);}
    .search-box.active .close_search {position: absolute;right: 14px;width: 20px !important;background: #fff;border-radius: 50%;border: 1px solid var(--theme_color);}
    .nav-mobile.nav-up {bottom: -100%;}
    .nav-mobile {background: #101010;border-top: 1px solid #242424;bottom: 0;display: flex;left: 0;overflow: hidden;position: fixed;right: 0;z-index: 2;bottom: 0;    transition: bottom 0.3s ease-in-out;}
    .nav-mobile .nav-mobile-items {display: flex;flex-flow: row nowrap;width: 100%;}
    .nav-mobile .nav-mobile-items .nav-mobile-item {border: 0;flex: 1 1 0%;}
    .nav-mobile .nav-mobile-items .nav-mobile-item .nav-route {background: transparent;border-color: transparent;color: #c3c3c3;display: grid;place-items: center;gap: 7px;font-size: 9px;font-weight: 600;padding: 10px 4px;text-transform: uppercase;width: 100%;}
    .nav-mobile .nav-mobile-items .nav-mobile-item .nav-route img {width: 17px;}
    .nav-mobile .nav-mobile-items .nav-mobile-item .nav-route.active {color: var(--theme_color);}
    .nav-mobile .nav-mobile-items .nav-mobile-item .nav-route.active img {transform: scale(1.3) translateY(-2px);filter: invert(33%) sepia(77%) saturate(2047%) hue-rotate(195deg) brightness(93%) contrast(92%);}
    #drawer-menu {width: 100%;transform: translateX(-120%);}
    .drawer_content {padding: 10px;}
    .drawer_content .menu {flex-direction: column;}
    .drawer_content .menu a {flex-direction: row;justify-content: start;padding: 12px;}
    .drawer_content .menu a span {width: auto;height: auto;background-color: transparent !important;}
}
@media screen and (max-width: 767px) {
    #home_banner .owl-nav {display: none;}
}