body {
    margin: 0;
    font-family: "Quicksand", sans-serif !important;
    background: black;
    font-weight: bold !important;
    background: linear-gradient(to bottom, #090B2A, #111444, #161A53);
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


main {
    min-height: 70vh;
}

header {
    background: linear-gradient(to left, #100D42, #1A1D5E, #181A44);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #3B4A69 #2A324C;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #2A324C;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: #3B4A69;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4A5B7D;
}


.w-33 {
    width: 33%;
}

.plr-18px {
    padding-left: 18px;
    padding-right: 18px;
}


.row-content-top {
    display: flex;
    justify-content: center;
}

#getcoin {
    position: relative;
    display: inline-block;
    padding: 10px 14px;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #FFD13E, #E59800);
    border-radius: 40px !important;
    min-width: 78px;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    border: none !important;
}

#getcoin a {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    align-items: center;
    color: #0B0E30 !important;
    font-size: 15px;
}

#getcoin a img {
    width: 24px;
    margin-right: 5px;
}

#getcoin:hover {
    box-shadow: 0px 0px 15px rgba(72, 63, 201, 0.8),
    0px 0px 30px rgba(41, 37, 133, 0.6);
    color: #361A73 !important;
    background: linear-gradient(to left, #FF4B9F, #FFB661)
}

.iconshover:hover {
    filter: contrast(2);
}

.btn-gradient {
    position: relative;
    display: inline-block;
    padding: 10px 24px;
    font-weight: bold;
    color: white;
    background: linear-gradient(to left, #1E2052, #313372);
    border-radius: 40px !important;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    border: none;
}

.btn-gradient::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 40px;
    padding: 2px;
    background: linear-gradient(to right, #FF4B9F, #FFA927);
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.btn-gradient:hover {
    box-shadow: 0px 0px 15px rgba(72, 63, 201, 0.8),
    0px 0px 30px rgba(41, 37, 133, 0.6);
    color: #361A73 !important;
    background: linear-gradient(to right, #FF4B9F, #FFB661)
}

.toggle-password {
    transition: all 0.3s ease-in-out;
}

.toggle-password:hover {
    opacity: 0.7;
}

.btn-gradient a {
    color: white !important;
}

.top-controls a {
    color: white;
}

.top-controls a:hover {
    color: #361A73;
}

a {
    font-size: 16px;
    color: #FFB462;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}


a:hover {
    font-size: 16px;
    color: #FF6392;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
}

.gradientext {
    font-weight: bold;
    background: linear-gradient(to right, #FF6392, #FFB462);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    display: inline-block;
    text-shadow: none !important;
}

.gradienlink {
    background: linear-gradient(to right, #FF6392, #FFB462);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    display: inline-block;
    text-shadow: none !important;
    transition: all 0.3s ease-in-out;
}

.gradienlink:hover {
    background: linear-gradient(to right, #FFB462, #FF6392);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    display: inline-block;
    text-shadow: none !important;
    filter: brightness(1.2);
}

.btn-gradient:hover a {
    color: #361A73 !important;
}

.btn-gradient-link {
    color: #fff;
    text-decoration: none;
}

.text-underline {
    text-decoration: underline;
}

.w-full {
    width: 100%;
}

.bold-text {
    font-size: 48px;
    line-height: 48px;
}

.small-text {
    font-size: 1.5rem;
    line-height: 2rem;
}

.head-text {
    font-size: 1.5rem;
    line-height: 25px;
}

.desc-text {
    font-size: 18px;
}

.overflow {
    overflow-x: auto;
}


.header {
    background-color: #000;
}

.header-main {
    padding: 5px;
}

.footer-section img {
    width: 40px;
}

.star-logo img {
    width: 150px;
}


.nav-link {
    font-size: 16px;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.nav-link:hover {
    font-size: 17px;
    color: #EAB33D !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
}

.nav-link.active {
    font-size: 16px;
    color: #EAB33D !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
}

.header-loggedon .icon-img {
    filter: invert(100%);
}

.active-svg {
    fill: #EAB33D !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6)) !important;
}

.create-button {
    width: 90%;
    bottom: 0;
    margin: 1em;
}

.btn-login a {
    font-size: 14px;
    color: white !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    box-shadow: none;
    border: none;
    background-size: 40px;
}

.navbar-toggler {
    box-shadow: none;
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.offcanvas-header {
    padding: 4px !important;
}

.offcanvas-header .btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M6 6L24 24M24 6L6 24'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    opacity: 1;
}


.nav-hoverarea {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nav-hoverarea img {
    width: 55px;
    margin-bottom: 10px;
}

.header-loggedon .desktop-logo {
    width: 150px;
}


.header-loggedon {
    padding-bottom: 0px !important;
}

.header-loggedon .navbar-toggler-icon,
.header-loggedon .close,
.header-loggedon .hamburger,
.notification-icon img {
    width: 40px;
    height: 40px;
}

.header-loggedon .link .nav-hoverarea p,
.header-loggedon .link .nav-hoverarea p svg,
.header-loggedon .link .nav-hoverarea > svg {
    transition: all 0.3s ease;
}

.header-loggedon .link .nav-hoverarea p {
    color: #ffffff;
    transition: all 0.3s ease;
}

.nav-item .nav-link {
    font-size: 16px;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.nav-item .nav-link:hover {
    font-size: 16px;
    color: #361A73 !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
    background: rgba(235, 217, 162, 0.1);
    box-shadow: 0 0 10px rgba(235, 217, 162, 0.3);
    border-radius: 5px;
}

.nav-item .nav-link {
    font-size: 16px;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.nav-item .nav-link:hover {
    font-size: 16px;
    color: #361A73 !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
    background: rgba(235, 217, 162, 0.1);
    box-shadow: 0 0 10px rgba(235, 217, 162, 0.3);
    border-radius: 5px;
}

body[style*="overflow: hidden; padding-right: 0px;"] .navbar-toggler svg {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6)) !important;
}

.navbar-toggler svg {
    fill: #ffffff !important;
    transition: fill 0.3s ease-in-out, filter 0.3s ease-in-out;
}


.nav-item svg {
    fill: #fff;
    transition: all 0.3s ease-in-out;
}

.nav-item:hover svg,
.nav-item .nav-link:hover svg {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6)) !important;
}

.nav-item .menu-item:hover svg {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6)) !important;
}

.nav-item .menu-item.active svg {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6)) !important;
}


.header-loggedon .link:hover .nav-hoverarea p svg path,
.header-loggedon .link.active .nav-hoverarea p svg path {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6));
}


.header-loggedon .link:hover .nav-hoverarea p svg path,
.header-loggedon .link.active .nav-hoverarea p svg path {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6));
}


.header-loggedon .link:hover .nav-hoverarea p,
.header-loggedon .link.active .nav-hoverarea p {
    color: #361A73 !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
}

.header-loggedon .link:hover .nav-hoverarea p svg path,
.header-loggedon .link.active .nav-hoverarea p svg path {
    fill: #361A73 !important;
    filter: drop-shadow(1px 1px 1px rgba(41, 37, 133, 0.6));
}


.header-loggedon .link:hover .nav-hoverarea > svg,
.header-loggedon .link.active .nav-hoverarea > svg {
    filter: brightness(1.2) drop-shadow(2px 2px 4px rgba(41, 37, 133, 0.6));
}

.header-loggedon .link:hover .nav-hoverarea > svg {
    transform: translateY(-5px);
}

p svg {
    margin-right: 8px;
}

.overflow {
    scrollbar-width: thin;
    scrollbar-color: #3B4A69 #2A324C;
}

.overflow::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.overflow::-webkit-scrollbar-track {
    background: #2A324C;
    border-radius: 8px;
}

.overflow::-webkit-scrollbar-thumb {
    background: #3B4A69;
    border-radius: 8px;
}


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

.link-items div {
    padding-top: 16px;
    padding-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
}

.link-items-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.link-items-bar div {
    padding-top: 16px;
    padding-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
}

.link-items .link {
    color: white;
    opacity: 0.9;
    text-wrap: nowrap;
}

.link-items .link:hover {
    color: #EAB33D;
    filter: brightness(1.2), contrast(1.1);
    opacity: 1;
    transform: scale(1.1);
}

.link-items .link.active {
    color: #EAB33D;
    filter: brightness(1.2), contrast(1.1);
    opacity: 1;
    transform: scale(1.1);
}

.link-items-bar .link {
    color: white;
    opacity: 0.9;
    text-wrap: nowrap;
}

.link-items-bar .link:hover {
    color: #EAB33D;
    filter: brightness(1.2), contrast(1.1);
    opacity: 1;
    transform: scale(1.1);
}

.link-items-bar .link.active {
    color: #EAB33D;
    filter: brightness(1.2), contrast(1.1);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0);
    }
}

.header-loggedon .link.active .nav-hoverarea > svg {
    animation: float 2s ease-in-out infinite;
}

.header-loggedon .link-items img {
    width: 28px;
}

.header-loggedon .link-items p {
    margin-bottom: 0;
    text-wrap: nowrap;
    white-space: nowrap;
    font-size: 16px;
}


.header-loggedon .btn-plain {
    font-size: 1.25rem;
    padding: 8px 30px;
    position: relative;
    box-sizing: content-box;
    text-decoration: none;
}

.header-loggedon .accordion {
    margin-left: -20px;
    margin-right: -20px;
}

.header-loggedon .accordion-button::after {
    filter: brightness(0) invert(1);
}

.header-loggedon .accordion-item .accordion-button {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

.header-loggedon .balance {
    color: #fff;
    font-size: 12px;
    margin: 0 10px;
}

.w-30 {
    width: 30%;
}

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

.hero-section {
    width: 100%;
}

.hero-section-rightimg {
    background-image: url("../images/banner-game-mobile.webp");
    background-size: cover;
    min-height: 400px;;
    background-repeat: no-repeat;
}

.hero-section-rightimg .gummy3 {
    bottom: 0;
    right: 0;
}


.footer-section {
    background-color: #1B0E41;
}

.footer-inner {
    padding: 160px 0 80px 0;
}

.footer-section li a,
.f-center-text p,
.f-bottom-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
}


.banner-center {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

.banner,
.banner-allgames {
    background-size: cover;
    min-height: 400px;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    max-width: 1400px;
    border-radius: 20px;
}

.all-games {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}

.banner-allgames {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.1)), url("../images/all-games.png");
}

.text-wrapper {
    min-height: 400px;;
}

.text-big {
    font-size: 40px;
    line-height: 40px;
    text-align: left;
}

.banner-small-text p {
    font-size: 1.2rem;
    line-height: 2rem;
    text-align: left;
    margin: 0;
}

.btn-sign-up a {
    font-size: 20px;
}

.banner-right-image {
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: end;
    width: 50%;
}

.text-white {
    z-index: 99;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 20px;
    min-height: 200px;
}

.star-section {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35%;
    min-height: 180px;
}

section p, section span, section h1, section h2 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}


h5, h6, h2 {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.about div {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.text-big p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.bg-blue .container div {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.bg-blue .container p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.banner-small-text p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.overlay {
    background: linear-gradient(45deg, rgb(179 71 169 / 48%), rgb(191 137 68 / 60%));
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    border-radius: 9px;
    margin: auto;
}

.a-games:hover .overlay {
    opacity: 1;
}


.purchase-title {
    font-size: 28px;
    line-height: 26px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.purchase-desc {
    font-size: 20px;
    line-height: 26px;
}

.account-btn {
    font-size: 20px;
}

.purchase {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.hero-section {
    background-size: cover;
    min-height: 400px;
    background-repeat: no-repeat;
    background-position: bottom;
    max-width: 1330px;
    border-radius: 20px;
}

.ndhomebanner-img {
    bottom: 0;
    right: 0;
}

.hero-section-rightimg .purchase-desc {
    margin-left: 0;
}


.text-wrap {
    margin: 60px 0;
}

.highlight {
    font-size: 24px;
}

.slot-text {
    font-size: 48px;
}

.slot-desc {
    font-size: 24px;
}


.about-p {
    color: white;
    font-size: 1.25rem;
    text-align: justify;
}


.custom-width {
    width: 60%;
}

.banner-allgames .banner-right-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.banner-signup-btn {
    width: max-content;
}

.GummyPlay {
    padding-top: 15px;
}

.common-modal-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #040a12b0;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.popup-modal-dialog {
    background: linear-gradient(to bottom, #090B2A, #111444, #161A53);
    overflow-y: auto;
    max-width: 800px;
    max-height: 800px;
    position: relative;
    margin: auto;
    border-radius: 18px;
}

.common-modal-popup ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.common-modal-popup ::-webkit-scrollbar-track {
    background: transparent;
}

.common-modal-popup ::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 10px;
}


.popup-modal-content {
    background: transparent;
    border: none;
    height: 100%;
}

.popup-modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    border: none;
}

.modal-close {
    background-color: transparent;
    border: none;
}

.modal-close .icon-close {
    width: 30px;
    height: 30px;
}

#dt-length-0 {
    color: gray !Important;
}

.vipbutton {
    background: linear-gradient(to left, #F80CA9, #FAC241) !important;
    color: black !important;
    -webkit-mask: unset !important;
    transition: all 0.3s ease-in-out;
    -webkit-mask-composite: unset !important;
}

.vipbutton a {
    color: black !important;
}

.vipbutton:hover a {
    color: black !important;
}

.vipbutton:hover {
    filter: brightness(1.2);
    background: linear-gradient(to right, #F80CA9, #FAC241) !important;
}

.vipbutton::before {
    background: transparent;
    color: black !important;
    -webkit-mask: unset !important;
    -webkit-mask-composite: unset !important;
}

.progress {
    width: 100%;
    height: 30px;
    margin-left: 10px;
    border-radius: 20px;
    background: linear-gradient(to bottom, #1C1F55, #21246C)
}

.progress-bar {
    background: linear-gradient(to right, #AF1E54, #FF5997, #FFC94B);
    width: 100%;
    height: 12px;
    border-radius: 20px;
    margin-top: 9px;
    margin-right: 10px;
}

.promotions .card {
    overflow: hidden;
    border-radius: 10px;
}

.promotions .card-img-overlay {
    padding: 0;
}

.overlay-inner-wrap {
    padding-right: 20%;
    padding-left: 14px;
    padding-bottom: 4px;
    padding-top: 7px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .overlay-inner-wrap a,
    .overlay-inner-wrap .btn-plain {
        padding: 10px;
    }
}

.promotions > p {
    font-size: 1.5rem;
    line-height: 2rem;
}

.overlay-inner-wrap .title {
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
}


@media screen

(
min-width:

1200
px

)
{
.overlay-inner-wrap .title {
    font-size: 3rem;
}

}

@media screen

(
max-width:

430
px

)
{
#sendCode {
    font-size: 12px;
}

}

.promotions .overlay-inner-wrap .subtitle,
.promotions .overlay-inner-wrap .get-coin {
    font-size: 14px;
    line-height: 1.7;
    text-wrap: nowrap;
}

.promotions .overlay-inner-wrap .coin span {
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.promotions .overlay-inner-wrap a,
.promotions .overlay-inner-wrap .btn-plain {
    padding: 14px;
}

.promotions .popup-modal-body img {
    width: 500px;
    height: 350px;
    object-fit: cover;
    object-position: top center;
}


.common-modal-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 10, 18, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(20px);
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.promotion-banner-img, .promotion-banner-img-m {
  width: 760px !important;
  height: 180px !important;
  border-radius: 20px;
  margin-top: 40px;
  margin-bottom: 24px;
  object-fit: unset!important;
}

.promotion-banner-img-m {
  display: none;
  width: 318px !important;
  height: 180px !important;
}

.promotion-banner-button {
  width: 480px;
  height: 76px;
  border-radius: 30px;
  border: none;
  position: relative;
  background: linear-gradient(90deg, #FF6A6A, #FF1F87, #FF2885, #FFB661);
  box-shadow:
      0 4px 4px rgba(253, 83, 77, 0.08),
      0 8px 12px rgba(253, 83, 77, 0.12),
      0 15px 25px rgba(253, 83, 77, 0.18),
      0 30px 40px rgba(253, 83, 77, 0.24),
      0 80px 100px rgba(253, 83, 77, 0.19);
  overflow: hidden;
  inset: unset;

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 100%;
  color: #fff;

  transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      color 0.3s ease;
}

.promotion-banner-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 7.1px 7.1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 1;
}

.promotion-banner-button:hover {
  box-shadow:
      0 4px 4px rgba(253, 83, 77, 0.12),
      0 8px 12px rgba(253, 83, 77, 0.18),
      0 15px 25px rgba(253, 83, 77, 0.22),
      0 30px 50px rgba(253, 83, 77, 0.3),
      0 100px 120px rgba(253, 83, 77, 0.25),
      0 0 30px rgba(255, 255, 255, 0.4);
  color: #361A73;
}

.popup-modal-body {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.popup-modal-dialog {
    background: #0B0E2D33;
    border: 1px solid #FFB125;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 4px 24px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow-y: auto;

    padding: 30px 20px;
    padding-bottom: 0px !important;
    position: relative;
    text-align: center;
    max-height: 90%;
    margin: 8px;
}

.LockedModal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.popup-modal-content {
    background: transparent;
    border: none;
    height: auto;
}

.popup-modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    border: none;
}

.modal-close {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.modal-close .icon-close {
    width: 24px;
    height: 24px;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.modal-close .icon-close:hover {
    opacity: 1;
}

.common-modal-popup::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.common-modal-popup::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
}

.common-modal-popup::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #FF82B2, #FFC178) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) !important;
}

.not-found {
    min-height: 100vh;
}


.text-main-blue {
    color: white;
}

.text-main-purple {
    color: rgb(140 52 252);
}

input#form-field-email {
    background: transparent;
    border: none !important;
    border-bottom: 2px solid white !important;
    border-radius: 0px;
}

input#form-field-email::placeholder {
    color: #ffffffb8 !important;
}

input#form-field-email:focus {
    color: white;
    box-shadow: none;
}

textarea#form-field-message {
    border: white;
}

textarea#form-field-message:focus {
    color: white;
    box-shadow: none;
    outline: auto;
}

.contacts {
    min-height: 100vh;
}

.contacts h1 {
    font-size: 3rem;
}

.form-control:focus {
    color: white !important;
}

select option {
    color: darkgray !important;
}

.form-select {
    color: black !important;
    border-color: black !important;
    filter: invert(1);
}

.border-purple {
    border-bottom: 2px solid white;
}

.border-purple::-webkit-input-placeholder {
    color: white;
    opacity: 0.8;
}

.border-purple:-moz-placeholder {
    color: white;
    opacity: 0.8;
}

.border-purple::-moz-placeholder {
    color: white;
    opacity: 0.8;
}

.border-purple:-ms-input-placeholder {
    color: white;
    opacity: 0.8;
}

.border-purple::placeholder {
    color: white;
    opacity: 0.8;
}

.text-main-blue {
    color: white;
    opacity: 0.8;
}

.bg-purple {
    background-color: white;
}


.login {
    min-height: auto;
}

.login h1 {
    font-size: 3rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}


.login input {
    background-color: transparent;
}

.login input[type="checkbox"] {
    width: 16px;
    height: 16px;
}


.login .side-lines {
    height: 2px;
    width: 100%;
}

.login .social-media img {
    height: 40px;
    width: 40px;
}

.login a.forgot-text {
    color: #8c34fc;
}


.form-common label {
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 0px;
}

.form-common input, .form-common select {
    background-color: transparent !important;
    box-shadow: none;
    font-size: 1.5rem;
    line-height: 2rem;
    border-radius: 0 !important;
    color: white;
    border: none !important;
    border-bottom: 2px solid !important;
}

.form-common input::-webkit-input-placeholder,
.form-common select::-webkit-input-placeholder {
    color: white;
}

.form-common input::-moz-placeholder,
.form-common select::-moz-placeholder {
    color: white;
}

.form-common input:-moz-placeholder,
.form-common select:-moz-placeholder {
    color: white;
}

.form-common input:-ms-input-placeholder,
.form-common select:-ms-input-placeholder {
    color: white;
}

.form-common input::placeholder,
.form-common select::placeholder {
    color: white;
}


.form-common .form-control:disabled {
}


label.checkbox-text,
button.checkbox-text {
    font-size: 0.875rem;
    line-height: 1.2;
}

.form-common input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.form-common .text-main-purple {
    color: rgb(140 52 252);
}

.form-common .side-lines {
    height: 2px;
    width: 100%;
}

.form-common .social-media img {
    height: 40px;
    width: 40px;
}

.form-common .social-media button {
    background-color: #3d2856;
}

.account-recovery-password .items {
    width: 50%;
    margin: auto;
}


.slot-top-banner .container {
    margin-top: 80px !important;
}

.slot-top-banner .right-section {
    position: absolute;
    right: 0;
    top: -90px;
}

.slot-top-banner .right-section img {
    width: 420px;
    height: auto;
}

.slot-banner {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 260px;
    top: 50px;
}

.slot-banner .left-section {
    width: 70%;
    z-index: 999;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.game-list {
    padding-bottom: 120px;
}

.game-image img {
    margin: auto;
    display: block;
}

.mobile-menu {
    display: none;
}


.search {
    min-height: 100vh;
}

.search form {
    width: 75%;
}

.search .items {
    width: 65%;
}

.search .item {
    position: relative;
}

.search .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 4px;
    background: linear-gradient(141.83deg, #181270 22.68%, #1A1D5E 56.94%, #343783 88.75%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
    pointer-events: none;
}

.search select {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background-color: transparent;
    color: white;
    border: none;
    appearance: none;
    outline: none;
    padding-right: 46px;
    z-index: 1;
}

.search .providers-select-list::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 22px;
    width: 18px;
    height: 18px;
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    transform: rotate(45deg) translateY(-50%);
    border-radius: 2px;
    pointer-events: none;
}

.search select option {
    background-color: #fff;
    color: #000;
}

.providers option {
    color: black !important;
}

.search .search-box img {
    width: 24px;
}

.search .search-box input {
    border: none;
    background-color: transparent;
    color: white;
    border-radius: 10px;
    box-shadow: none;
}

.search .search-box input::placeholder {
    color: white;
}


.logged-in.support {
    min-height: 100vh;
}


.get-coins-wrap {
    width: 100%;
    margin: auto;
}

.row {
    margin: 0 auto;
}

.get-coins-wrap .row-content-top img {
    width: 40px;
}

.get-coins-wrap .row-content-top .item-left {
    background: #090B23;
    padding: 10px;
}

.get-coins-wrap .row-content-top .item-right {
    background-image: linear-gradient(to left, #100D42, #1A1D5E, #181A44);
    padding: 10px;
}

.get-coins-wrap .row-content-top .item-right a {
    width: 140px;
    color: #fff;
    border: 2px solid white;
    transition: all 0.3s ease-in-out;
}

.get-coins-wrap .row-content-top .item-right p {
    color: white;
}

.coins-shop-wrap .item-right a {
    width: 18%;
}

.coins-shop-wrap .item-right p a {
    color: rgb(140 52 252);
}

.data-table {
    width: 55%;
    margin: auto;
}

.data-table table {
    border-collapse: unset;
}

.data-table select {
    filter: brightness(0) invert(1);
    padding: 0.5rem 5rem 0.5rem 6px !important
}

.data-table input {
    outline: none;
}

.dt-container {
    color: white;
}

.data-table nav .first, .data-table nav .last {
    background-color: none;
    border: none !important;
    color: white !important;
}

.data-table nav .first:hover, .data-table nav .last:hover {
    background-image: linear-gradient(128.03deg, #100D42 7.19%, #1A1D5E 97.03%) !important;
}

.data-table nav .current {
    background-image: linear-gradient(180deg, #100D42 0%, #1A1D5E 50%, #361A73 100%);
!important;
    border: none !important;
}

.data-table nav .current:hover {
    background-image: linear-gradient(128.03deg, #100D42 7.19%, #1A1D5E 97.03%) !important;
    border: none !important;
}

.data-table nav .first:hover, .data-table nav .last:hover {
    background-image: linear-gradient(128.03deg, #100D42 7.19%, #1A1D5E 97.03%) !important;
}


.redeemprize .items {
    width: 75%;
    margin: auto;
}

.redeemContainer {
    border: 1px solid white;
    padding: 1.5rem;
    margin-top: 0.5rem;
}

.redeemHeader {
    color: white;
}

.redeemHeader h3 {
    margin-bottom: 2.5rem;
    font-family: "Quicksand", sans-serif;
}

.redeemContainer h4 {
    font-family: "Quicksand", sans-serif;
}

.redeemContainer .redeemBody {
    color: white;
    padding: 2rem 2rem 0 2rem;
}

.redeemContainer .redeemBody .bodyContent {
    display: flex;
    justify-content: space-between;
}

.redeemContainer .redeemBody .bodyContent .title {
    padding-bottom: 1rem;
    font-family: "Quicksand", sans-serif;
}

.redeemContainer .redeemBody .bodyContent .starsCoins .content div {
    border-radius: 30px;
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(225, 245, 255, 0.8), 0px 0px 30px rgba(208, 232, 255, 0.6);
    text-align: right;
    padding: 0.5rem 1rem;
    min-width: 200px;
    background: linear-gradient(90deg, #171B2F 0%, #242A45 100%);
    box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.8);
}

.redeemContainer .redeemBody .bodyContent .starsCoins .content {
    position: relative;
}

.redeemContainer .redeemBody .bodyContent .starsCoins .content .sCoin {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(0, -50%);
}

.redeemContainer .historyTable {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
}

.redeemContainer .historyTable th,
.redeemContainer .historyTable td {
    border: 1px solid white !important;
    text-align: left !important;
}

.redeemContainer .historyTableContainer option {
    color: black !important;
}

.redeemContainer .nav-link:hover .icon-img svg {
    fill: #f12d83;
}

.redeemContainer .redeemInputContainer {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redeemContainer .redeemInputContainer .currencyBox {
    width: 80px;
    height: 100%;
    background-image: linear-gradient(180deg, #100D42 0%, #1A1D5E 50%, #361A73 100%);;
}

.redeemContainer .redeemInputContainer .availableBox {
    width: 130px;
    height: 68px;
    background-image: linear-gradient(180deg, #100D42 0%, #1A1D5E 50%, #361A73 100%);;
}

.redeemContainer .redeemInputContainer input {
    height: 100%;
}

.redeemContainer .bar {
    width: 100%;
    height: 1px;
    background: silver;
}

.redeemContainer .accordion-button {
    background: transparent;
}

.redeemContainer .accordion-button:focus {
    box-shadow: none;
    background: transparent;
}

.redeemContainer .accordion-item {
    border: 0;
    border-radius: 0 !important;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background: transparent !important;
}

.redeemContainer .accordion-button::after {
    background-image: url("/assets/images/chevron.webp");
    background-position: center;
    filter: brightness(1.8);
}

.redeemContainer .accordion-button:not(.collapsed)::after {
    background-image: url("/assets/images/chevron.webp");
    transform: var(--bs-accordion-btn-icon-transform);
}


.providers:hover {
    opacity: 0.8;
    cursor: pointer;
}

.search-box:hover {
    opacity: 0.8;
    cursor: pointer;
}


@media (max-width: 768px) {
    .header-loggedon .nav-link {
        background-image: none !important;
        background-clip: text;
        display: inline-block;
    }

    .hideinmobile {
        display: none;
    }

    .mobile-logo {
    }

    .box-moneta {
        margin-left: 5% !important;
    }

    .btn-logout {
        margin-bottom: 100px !important;
    }

    .mobile-menu {
        position: fixed;
        bottom: -2px;
        width: 100%;
        background: linear-gradient(to left, #100D42, #1A1D5E, #181A44);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0;
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .mobile-menu .navbar-toggler {
        display: block;
    }

    .mobile-menu a {
        color: white;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
    }

    .mobile-menu a .icon {
        display: block;
        font-size: 24px;
        margin-bottom: 5px;
    }

    .mobile-menu a:hover {
        color: rgb(213, 156, 21);
    }

    .container-mobile-menu {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        color: white;
        width: fit-content !important;
    }

    .container-mobile-menu span,
    .container-mobile-menu a {
        margin-top: 5px !important;
        font-size: 12px !important;
    }

    .btn-buy-mobile span,
    .btn-buy-mobile a {
        margin-top: 3px !important;
        font-size: 16px !important;
    }

    .container-mobile-menu img {
        width: 35px;
        height: 35px;
    }

    .btn-buy-mobile {
        position: absolute;
        background-color: #f8cb36;
        padding: 15px;
        top: -30px;
        border-radius: 150px;
    }

    .navbar > .container {
        padding: 0 !important;
    }

    .notification-icon {
        display: none;
    }

    .header-loggedon {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .header-loggedon .offcanvas.offcanvas-end {
        width: 100%;
    }

    .header-loggedon .accordion {
        margin-left: unset;
        margin-right: unset;
    }

    .star-logo img {
        width: 140px;
    }


    .footer-inner {
        padding: 60px 0 70px 0;
    }

    .text-big {
        font-size: 32px;
        line-height: 32px;
        text-align: center;
    }

    .banner-small-text p {
        font-size: 1rem;
        line-height: 1.5rem;
        text-align: center;
    }

    .bold-text {
        font-size: 28px;
        line-height: 34px;
    }

    .desc-text,
    .slot-desc,
    .dive-in .small-text {
        font-size: 16px;
        line-height: 25px;
    }

    .contacts h1 {
        font-size: 1.5rem;
    }

    .form-common label, .form-common input, .form-common select {
        font-size: 1.2rem;
    }

    .form-common input[type="checkbox"] {
        width: 22px;
        height: 20px;
    }

    .game-list {
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }

    .star-section {
        min-height: 180px;
    }

    .footerUlMobile {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .game-image .overlay {
        width: 88%;
    }

    .game-image .overlay .btn-gradient {
        font-size: 10px;
    }

    .banner-signup-btn {
        width: 80%;
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        justify-content: center;
    }

    .logged-in.support {
        min-height: 115vh;
    }


    .search .items {
        width: 100%;
    }

    .search .providers-select-list::after {
        top: 15px;
        width: 14px;
        height: 14px;
    }

    .search .search-box img {
        width: 21px;
    }

    .account-recovery-password .items {
        width: 100%;
    }

    .get-coins-wrap .modal-content {
        padding: 1em;
    }


    .redeemContainer {
        border: unset;
        padding: unset;
    }

    .redeemContainer .redeemBody {
        padding: 2rem 0 0 0;
    }

  .promotion-banner-img {
    display: none;
  }

  .promotion-banner-img-m {
    display: unset;
  }
  
  .promotion-banner-button {
      width: 100%;
  }
  
  .card-blur-wrapper {
      width: 100%;
  }
}

@media (max-width: 1024px) {
    .desktop-login {
        margin-left: auto !important;
    }

    .nav-link {
        font-size: 1rem;
    }

    .purchase-wrapper {
        padding-top: 3rem;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-section-rightimg .purchase-wrapper {
        order: 2;
        padding-bottom: 2em;
    }

    .purchase-desc {
        margin: 0 30px;
        font-size: 16px;
        line-height: 18px;
    }

    .slot-banner .bold-text {
        font-size: 32px;
        line-height: 32px;
    }

    .slot-banner .small-text {
        font-size: 16px;
        line-height: 18px;
    }

    .slot-top-banner .right-section img {
        width: 360px;
    }

    .slot-top-banner .right-section {
        top: -105px;
    }


    .data-table {
        width: 100%;
    }

    .redeemprize .items {
        width: 100%;
    }

    .get-coins-wrap {
        width: 100%;
    }

}


@media (max-width: 1040px) {
    .indexbanner {
        min-height: 300px;
    }
}

@media (max-width: 992px) {
    .about-subtitle {
        font-size: 24px;
    }

    .offcanvas {
        background: #090B23 !important;
    }

    .alt-column {
        display: flex;
        flex-direction: column;
        align-items: start !important;
    }

    .indexbanner {
        min-height: 300px;
    }

    .about-title {
        font-size: 32px !important;
    }

    .about-p {
        font-size: 16px !important;
    }

    .custom-width {
        width: 50%;
    }

    .banner-allgames .banner-right-image {
        right: 30%;
    }

}

.header-loggedon {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #000;
    padding-top: 0px !important;
}

.navbar {
    padding: 0.3rem 0;
}

.offcanvas {
    top: 100px;
}

.header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #343434;
}

.header-loggedon .navbar {
    padding: 1rem 0.5rem;
    padding-bottom: 11px;
}

.offcanvas {
    top: 80px;
}

.navbar .bg-black {
    padding-top: 0px;
}

.minilogo-sidebar {
    position: absolute;
    left: -45px;
    top: -6px;
}

.btn-logout {
    width: 100%;
}

.btn-logout a {
    font-size: 18px !important;
    color: #fff;
    font-style: normal;
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
    padding: 12px 18px;
    border-radius: 12px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #731A1A;
    width: 100%;
}

.btn-logout a:hover {
    color: white !important;
    background: rgba(115, 26, 26, 0.8);
    box-shadow: rgba(115, 26, 26, 0.4) 0px 0px 15px,
    rgba(115, 26, 26, 0.2) 0px 0px 20px;
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.btn-logout a:hover::before,
.btn-logout a.active::before {
    width: 180px;
    height: 180px;
    opacity: 1;
}

.btn-logout a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
    background: radial-gradient(circle, rgba(150, 30, 30, 0.6) 0%, rgba(150, 30, 30, 0) 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
}


.box-moneta {
    display: flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    background: linear-gradient(90deg, #171B2F 0%, #242A45 100%);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    position: relative;
    width: 270px;
    justify-content: end;
    box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.8);
}

.box-moneta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress);
    background: linear-gradient(90deg, #4B79F4, #8448F5, #BD16F5);
    transition: width 0.3s ease-in-out, background 0.3s ease-in-out;
    box-shadow: inset 0 6px 8px rgba(0, 0, 0, 0.8);
    z-index: 0;
    border-radius: var(--border-radius, 0px);
}

.box-moneta.active::before {
    background: linear-gradient(90deg, #AF1E54, #FF5997, #FFB264);
}

.box-moneta.inactive::before {
    background: linear-gradient(90deg, #4B79F4, #8448F5, #BD16F5);
}


@media only screen and (max-width: 600px) {
    .box-moneta {
        width: 215px;
    }
}

.icona-moneta {
    position: absolute;
    left: 0;
    width: 40px;
    height: 40px;
    transition: transform 0.3s !important;
    transform: translateX(-20px);
    z-index: 1;
}


.dropdown-menu {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.valore-moneta {
    font-size: 16px;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    color: white !important;
}

.header-games-play .valore-moneta {
    filter: blur(3px);
}

.header-games-play .box-moneta {
    pointer-events: none;
}

#coin-box.active {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(234, 179, 61, 0.4);
}

#coin-box.inactive {
    color: white !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.4);
}


#coin-box.menu-s {
    color: #EAB33D !important;
    text-shadow: 2px 2px 4px rgba(234, 179, 61, 0.6);
}

.offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: #3B4A69 #2A324C;
}

.offcanvas-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: #2A324C;
    border-radius: 8px;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background: #3B4A69;
    border-radius: 8px;
}

#coin-box.active .icona-moneta {
    transform: translateX(25px);
}


#coin-box.menu-g {
    color: #EAB33D !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
}

#coin-box.inactive .icona-moneta {
    transform: translateX(-5px);
}

.binario {
    position: absolute;
    bottom: 40%;
    left: 20px;
    right: 10px;
    height: 7px;
    background-color: #555;
    border-radius: 20px;
    width: 35px;
    z-index: 0;
}


.menu-item {
    display: flex !important;
    gap: 10px;
}

@media (max-width: 1200px) {
    .package-row:hover, .package-row:focus
    .game-image img {
        min-height: 145px;
    }
}

@media (max-width: 300px) {
    .font-semibold {
        font-size: 12px !important;
    }

    .minilogo-sidebar {
        width: 55px;
        left: -28px;
    }
}

@media (max-width: 400px) {
    .font-semibold {
        font-size: 12px !important;
    }
}

#redeemModal .modal-content {
    background: linear-gradient(to left, #100D42, #1A1D5E, #181A44);
    border-radius: 8px;
    padding: 20px;
}

#redeemModal .modal-header,
#redeemModal .modal-body,
#redeemModal .modal-footer {
    padding: 15px;
}

.redeemAmountSection label,
.paymentMethodContainer label,
.accordion-header button {
    font-size: 1.2rem;
    color: #ffffff;
}

#redeemModal input[type="text"],
#redeemModal input[type="number"],
#redeemModal select {
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
    width: 100%;
}

#redeemModal input[type="text"]::placeholder,
#redeemModal input[type="number"]::placeholder {
    color: #ffffff;
}

#redeemModal .redeemInputContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

#redeemModal .currencyBox,
#redeemModal .availableBox {
    background-color: #090B23;
    color: white !important;
    padding: 10px;
    border-radius: 4px;
}

#errorRedeemAmount {
    color: #ff4747;
    font-size: 0.9rem;
    margin-top: 5px;
}

.displayRedeem {
    background-color: #090B23;
    color: #ffffff;
    padding: 15px;
    border-radius: 4px;
    font-size: 1rem;
    margin-top: 15px;
}

.displayRedeem strong {
    font-size: 1.2rem;
}

.paymentMethodContainer {
    margin-top: 20px;
}

.paymentMethodContainer select {
    background-color: #28a745;
    color: #ffffff;
}

#submitRedeemModal {
    background: linear-gradient(180deg, #100D42 0%, #1A1D5E 50%, #361A73 100%);;
    border: none;
    color: #ffffff;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 4px;
    transition: background 0.3s ease;
}

#submitRedeemModal:hover {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.text-warning {
    color: #ffc107;
}

.text-success {
    color: #28a745;
}

.accordion .accordion-header button {
    background-color: transparent;
    color: #ffffff;
    padding: 10px 0;
    border: none;
}

.accordion .accordion-body {
    color: #ffffff;
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    #redeemModal .modal-dialog {
        max-width: 90vw;
        margin: 10px auto;
    }

    #redeemModal .modal-dialog .modal-content {
        width: 90vw;
        height: 95dvh;
        overflow-y: scroll;
    }

    #submitRedeemModal {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .auth-buttons .login-button {
        display: none !important;
    }

    .auth-buttons .iconshover {
        display: none !important;
    }

    .account-register {
        width: 100% !important;
    }

    .text-custom {
        text-align: center !important;
        font-size: 4rem;
    }

    .indexbanner {
        min-height: 480px;
    }

    .alt-column {
        display: flex;
        flex-direction: column;
        align-items: center !important;
    }

    .custom-width, .custom-width div p {
        width: 100%;
        text-align: center !important;
    }

    .allgames-mobile {
        justify-content: space-around;
        flex-direction: column !important;
    }

    .mobiletiger {
        width: 100%;
        position: absolute;
        align-self: center;
        filter: brightness(1);
    }
}

@media (max-width: 360px) {
    .mobiletiger {
        width: 100%;
        position: absolute;
        align-self: center;
        filter: brightness(0.6);
    }
}

.collapse {
    visibility: initial !important;
}

.cards {
    opacity: 1;
}

.unselected {
    opacity: 0.5;
}

#redeemAmount {
    color: white !important;
}


#getcoinsresponsive {
    display: none;
}

@media (max-width: 770px) {
    #getcoinsresponsive {
        display: block;
    }
}

.overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
    padding: 8px !important;
    font-size: 16px !important;
}

@media (max-width: 360px) {
    .coin {
        font-size: 14px !important;
    }

    .overlay-inner-wrap {
        padding: 10px !important;
    }
}

@media (max-width: 300px) {
    .star-logo img {
        width: 125px;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 6px !important;
        font-size: 14px !important;
    }

    .box-moneta {
        width: 180px !important;
    }

    .valore-moneta {
        font-size: 12px !important;
    }
}

@media (max-width: 400px) {
    .mobile-logo {
        padding-bottom: 0px !important;
    }
}

@media (max-width: 370px) {
    .box-moneta {
        width: 200px !important;
    }

    .valore-moneta {
        font-size: 14px !important;
    }

}

@media (max-height: 800px) {
    .promotions-more-modal {
        overflow-y: scroll;
    }
}

@media (max-width: 800px) {
    .dt-layout-table {
        overflow-x: scroll;
    }
}

@media (max-width: 420px) {
    .dt-layout-cell {
        overflow-x: scroll !important;
    }

    .container strong {
        text-align: center !important;
    }
}


@media (max-width: 500px) {
    #walletTransactionsTable {
        min-width: 400px !important;
        overflow-x: scroll !important;
    }

    .purchase-title {
        font-size: 28px !important;
    }

    .purchase-wrapper {
        padding-top: 0px;
    }

    .gummy2 {
        width: 90%;
    }
}

.account__container {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.account__title {
    font-size: 40px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 30px;
}

.account {
    display: flex;
    justify-content: center;
}

.input__wrapper {
    width: 47%;
}

.input__label {
    font-size: 20px;
    color: white;
}

.input {
    width: 100%;
    outline: none;
    background-color: transparent;
    color: #FFFFFF;
    font-family: Poppins;
    font-size: 16px;
    line-height: 24px;
    border: none;
    border-bottom: 2px solid #FFFFFF;
    padding-top: 5px;
    padding-bottom: 5px;
}

.input:disabled {
    color: rgba(128, 128, 128, 0.65);
    cursor: not-allowed;
    pointer-events: all !important;
}

.input::placeholder {
    color: rgba(255, 255, 255, 0.61);
}

.otp__wrapper {
    width: 100%;
}

.otp_row {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 20px;
    margin-bottom: 55px;
}

.account__otp_action_btn__wrapper {
    display: flex;
    align-items: flex-end;
}

.account__otp_action_btn__wrapper .account__action_btn {
    height: 70%;
    padding: 8px 40px;
}

.account__action_btn {
    padding: 4px 50px;
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: auto;
    border-radius: 10px;
    font-size: 14px;
    text-transform: uppercase;
}

.account__action_btn:hover {
    transition: 0.3s;
    cursor: pointer;
}

@media (max-width: 480px) {
    .otp_row {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .otp_row .input__wrapper {
        width: 70%;
    }

    .account__otp_action_btn__wrapper .account__action_btn {
        padding: 8px 30px;
    }

    .account__action_btn {
        line-height: 20px;
    }
}

@media (max-width: 300px) {
    .box-moneta {
        width: 185px !important;
    }
}

.star-logo {
    padding-left: 5px;
}

@media (max-width: 768px) {
    .privacypolicytable-overflow {
        text-wrap: nowrap;
        overflow-x: scroll;
    }

    .form-common .items {
        width: 100%;
    }
}

#idCurrencyCrypto option {
    color: black;
}

.modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (max-height: 530px) {
    .indexbanner {
        min-height: 95vh;
    }

}

@media (max-width: 992px) {
    #leaderboard-table-header {
        min-width: 95% !important;
    }

    #leaderboard-table-body {
        min-width: 94% !important;
    }
}

@media (max-width: 530px) {
    #leaderboard-table-header {
        min-width: 530px !important;
    }

    #leaderboard-table-body {
        min-width: 520px !important;
    }
}


@media (max-width: 500px) {
    .responsivecolumn {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

.modal-content .card {
    background-color: transparent;
    border-radius: 10px;
}

.showIcon img {
    display: flex !important;
}

#redeemModal select {
    padding: 0;
}

.payment-ways {
    gap: 20px;
    border-bottom: 1px solid white;
    padding-bottom: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.add-payment-ways-options {
    display: flex;
    padding-top: 20px;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.radio-input-block {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.radio-input-block input {
    height: 30px;
    width: 30px;
}

.radio-input-block input:hover, .radio-input-block label:hover {
    cursor: pointer;
}

.add-payment-ways-options .radio-input-block input {
    height: 27px;
    width: 27px;
}

.add-payment-ways-options div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.payment-details {
    margin-top: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    border: 1px solid white;
    border-radius: 20px;
    display: inline-block;
    padding-right: 20px;
    width: 100%;

}

.payment-details p {
    margin-bottom: 0;
}

#deletePaymentWay {
    margin-top: 15px;
}

#redeemModalForm {
    display: flex;
}

.selectPaymentWaySection {
    padding-left: 0;
}

.selectPaymentWaySection select {
    padding: 0 10px;
    height: 40px;
    color: white;
    width: 40%;
}

.selectPaymentWaySection select option {
    color: black;
}

.selectPaymentWaySection select:hover {
    cursor: pointer;
}

.selectPaymentWaySection {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.selectPaymentWaySection select {
    padding: 0 10px;
    height: 40px;
    background-color: #FFFFFF;
    color: #000000;
    width: 40%;
    border-radius: 8px;
}

.selectPaymentWaySection select option {
    color: black;
}

.selectPaymentWaySection select:hover {
    cursor: pointer;
}


.custom-select {
    position: relative;
    font-family: Arial;
    padding: 0;
    display: block;
    height: auto;
    background: transparent;
    border: none;
}

.custom-select select {
    display: none;
}

.select-selected {
    background-color: white;
    color: black;
    position: relative;
    z-index: 1000000;
}

.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

.select-items div, .select-selected {
    color: black;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}

.select-items {
    position: absolute;
    background-color: white;
    left: 0;
    right: 0;
    z-index: 100000;
    color: black;
    top: 0;
    transition: 0.5s;
}

.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
    color: black;
    transition: 0.5s;
}

.select-items div:nth-child(2) {
    background-color: white !important;
    color: black !important;
    border-bottom: 2px solid black;
    transition: 1s;
}

.select-items div:nth-child(2):hover {
    background-color: #a29f9f !important;
    border-bottom: 2px solid black;
}

.shopcoin.model-box {
    z-index: 1060;
}

@media (max-width: 768px) {
    .payment-ways {
        width: 100%;
        gap: 8px;
    }

    .radio-input-block input, .add-payment-ways-options .radio-input-block input {
        width: 25px;
        height: 25px;
    }

    .add-payment-ways-options {
        gap: 6px;
    }

    .selectPaymentWaySection select {
        width: 100%;
    }

    .payment-details {
        width: 100%;
    }

    .payment-ways label, .add-payment-ways-options label, .paymentMethodContainer label {
        font-size: 0.9rem;
    }

    #redeemModal input[type="text"],
    #redeemModal input[type="number"],
    #redeemModal select {
        padding: 5px;
    }
}


@media (max-width: 992px) {
    .game-image img {
        min-height: 100px;
    }
}

@media (max-width: 768px) {
    .game-image img {
        min-height: 110px;
    }
}

.box-moneta {
    transition: all 0.3s ease-in-out;
}

.box-moneta.active:hover {
    filter: brightness(1.2);
}

.box-moneta.inactive:hover {
    filter: brightness(1.2);
}

@media (max-width: 650px) {
    .indexbanner {
        min-height: 440px;
    }
}

.a-games {
    transition: all 0.3s ease-in-out;
}

.overlay a {
    text-shadow: none !important;
}

.fa-star {
    transition: all 0.3s ease-in-out;
}

.fa-star:hover {
    opacity: 1 !important;
}

.a-games {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.a-games.loaded {
    opacity: 1;
    transform: translateY(0);
}


.a-games:hover {
    filter: brightness(1.2);
}

.promohover {
    position: relative;
    color: #fff !important;
    border: none !important;
    transition: all 0.3s ease-in-out;
    border-radius: 30px !important;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(240, 38, 133, 0.6);
    padding: 10px 20px;
    z-index: 0;
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(234, 179, 61, 0.4), 0 0 0 2px rgba(240, 38, 133, 0.4);

}

.promohover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 20%), 0 0 0 2px rgb(255 255 255 / 40%);
    background: linear-gradient(to right, #c488a47a, #FFB661);
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    z-index: -1;
}

.promohover:hover {
    background: linear-gradient(to right, rgba(240, 38, 133, 1), rgba(234, 179, 61, 1));
    box-shadow: 0 0 0 2px rgba(240, 38, 133, 0.4), 0 0 0 2px rgba(234, 179, 61, 0.4);
}

.promohover:hover::before {
    box-shadow: 0 0 0 2px rgb(154 122 52 / 40%), 0 0 0 2px rgb(229 153 189 / 40%),;
    opacity: 0;
}

.textfix {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: start;
    font-size: 1.5rem;
}

@media (max-width: 360px) {
    .indexbanner {
        min-height: 250px;
    }
}

@media (max-width: 355px) {

    .logo-minimobile {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

}

*:focus {
    outline: none;
}

.game-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


.game-image .games-data-container {
    width: calc(100% / 5 - 20px);
    max-width: 208px;
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
}


.game-image .games-data-container img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 8px;
}


@media (max-width: 1200px) {
    .game-image .games-data-container {
        width: calc(100% / 4 - 0px);
    }
}

@media (max-width: 576px) {
    .game-image .games-data-container {
        width: calc(100% / 3 - 0px);
        padding: 0;
        padding-right: 4px;
        padding-left: 4px;
    }
}

@media (max-width: 355px) {
    .game-image .games-data-container {
        width: calc(100% / 2 - 0px);
    }
}


[data-guid] {
    height: 100%;
}

@media (max-width: 1400px) {
    .overlay-inner-wrap .coin span {
        font-size: 1.2rem !important;
    }

    .mobilegap {
        gap: 8px !important;
    }
}

.responsivescroll {
    display: flex;
    flex-direction: column;
}

@media (max-height: 520px) {
    .responsivescroll {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .common-modal-popup {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #gameIframe {
        min-height: 65vh !important;
    }

    .modal {
        z-index: 9999;
    }
}


button a {
    text-decoration: none;
}


.bottom-navbar {
    display: none;
    justify-content: space-between;
    align-items: center;
    bottom: -2px;
    position: fixed;
    z-index: 999;
    width: 100%;
}

.register {
    display: flex;
    width: 100%;
    align-items: start;
    justify-content: start;
    font-family: "Quicksand", sans-serif;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}


.account-register {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.account-register-area {
    display: flex;
    width: 100%;
    max-width: 1300px;
    justify-content: start;
    padding-right: 10px;
    align-items: end;
}

.register-form {
    width: 100%;
}

.login {
    display: flex;
    width: 100%;
    align-items: center;
    font-family: "Quicksand", sans-serif;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 100vh;
}


.account-login {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.account-login-area {
    display: flex;
    width: 100%;
    max-width: 1300px;
    justify-content: start;
    padding-left: 10px;
}

.login-form {
    width: 50%;
}

.login-logo {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
}

.login-logo img {
    width: 100%;
}

.register-logo {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
    padding-bottom: 90px;
}

.register-logo img {
    width: 100%;
}

#loginform div {
    width: 100% !important;
}

@media (max-width: 450px) {
    .desktop-login {
        display: none;
    }

    .overlay-inner-wrap {
        padding-right: 20%;
    }

    .desktop-register {
        display: none;
    }

    .bottom-navbar {
        display: flex;
    }

    .alt-space {
        height: 100vh;
        position: fixed;
        width: 100%;
        z-index: 120;
    }
}


#register {
    border: 1px solid white !important;
    color: white !important;
    transition: all 0.1s ease-in-out !important;
}

#register:hover a {
    color: #361A73 !important;
}

.cosmic-cardsarea {
    display: flex;
    align-items: center;
    justify-content: center;
}

.externalborder {
    border: 2px solid #ffdca4;
    padding: 10px;
    margin: 5px;
    border-radius: 20px;
    width: 270px;
    height: 360px;
    background: linear-gradient(to left, #2D3D5C, #100D42);
}

.cosmic-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    border-image-source: url('/assets/images/border.svg');
    border-image-slice: 20 fill;
    border-image-width: 20px;
    border-image-repeat: stretch;
}

.externalborder-promotions {
    background: transparent;
}

.cardborder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.card {
    background-color: transparent !important;
}

.card p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.cosmic-title {
    width: 99%;
    border-bottom: 1px solid #ffdca4;
    padding-top: 12px;
    padding-bottom: 12px;
}

.cosmic-desc {
    font-size: 16px;
    padding-left: 6px;
    padding-right: 6px;
}

.together-img, .support-img {
    width: 150px;
}

.destiny-img {
    width: 70px;
}

.cosmic-card img {
    margin-top: 12px;
}

@media (max-width: 1600px) {
    .login {
        min-height: 100vh;
    }
}

@media (max-width: 1400px) {
    .overlay-inner-wrap .title {
        font-size: 1.6rem !important;
        width: 140px;
    }

    .login {
        min-height: 100vh;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 6px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 1200px) {
    .overlay-inner-wrap .title {
        font-size: 1.6rem !important;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 7px !important;
    }
}

@media (max-width: 992px) {
    .overlay-inner-wrap .title {
        font-size: 1.6rem !important;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 8px !important;
        font-size: 14px !important;
    }

    .coin span {
        font-size: 16px !important;
    }

    .textfix {
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: start;
        text-wrap: nowrap;
    }
}

@media (max-width: 768px) {
    .overlay-inner-wrap .title {
        font-size: 1.6rem !important;
    }

    .gradientext {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .login-logo {
        display: none;
    }

    .register-logo {
        display: none;
    }

    .login-form {
        width: 100%;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 5px !important;
        font-size: 16px !important;
    }

    .coin span {
        font-size: 18px !important;
    }
}

@media (max-width: 430px) {
    .overlay-inner-wrap .title {
        font-size: 1.2rem !important;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 5px !important;
        font-size: 16px !important;
    }

    .coin span {
        font-size: 16px !important;
    }

    .overlay-inner-wrap div .title {
        font-size: 24px !important;
    }

    .overlay-inner-wrap div .coin span {
        font-size: 16px !important;
    }
}


@media (max-width: 390px) {
    .overlay-inner-wrap .title {
        font-size: 1.8rem !important;

    }

    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 6px !important;
        font-size: 16px !important;
    }

    .coin span {
        font-size: 14px !important;
    }
}

@media (max-width: 340px) {
    .overlay-inner-wrap-slider div {
        height: 80px !important;
    }
}

@media (max-width: 450px) {
    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 0px !important;
        font-size: 12px !important;
        height: 30px !important;
        width: 95px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 8px;
    }
}

@media (max-width: 320px) {
    .overlay-inner-wrap a, .overlay-inner-wrap .btn-plain {
        padding: 0px !important;
        font-size: 14px !important;
    }

    .overlay-inner-wrap a, .overlay-inner-wrap .popuppromohover {
        padding: 6px !important;
        font-size: 16px !important;
    }

    .overlay-inner-wrap .title {
        font-size: 1.2rem !important;
        width: 100%;
    }

    .overlay-inner-wrap-slider div {
        height: 0px !important;
    }

    .promohover {
        margin-left: 0px !important;
    }
}


.footer-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-section a {
    text-decoration: none;
}

.footer-top {
    padding-bottom: 10px;
    padding-left: 4px;
    padding-right: 4px;
    width: 99% !important;
}

.footerUlMobile {
    gap: 1rem;
}

.bottom-footer {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
}

.swal2-html-container a {
    color: #9e9488 !important;
}


@keyframes subtleGlow {
    0% {
        box-shadow: rgba(235, 217, 162, 0.15) 0px 0px 10px,
        rgba(235, 217, 162, 0.1) 0px 0px 15px;
    }
    50% {
        box-shadow: rgba(235, 217, 162, 0.25) 0px 0px 12px,
        rgba(235, 217, 162, 0.15) 0px 0px 18px;
    }
    100% {
        box-shadow: rgba(235, 217, 162, 0.15) 0px 0px 10px,
        rgba(235, 217, 162, 0.1) 0px 0px 15px;
    }


}

#redeem {
    margin-bottom: 2px;
}

.link-items li {
    margin-bottom: 8px;
    width: 100%;
}

.link-items {
    margin-top: 20px !important;
    margin: 0px;
    margin-left: 7px !important;
    display: flex !important;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

ul li a:not(.btn-logout a):not(.nav-link):not(.footerUlMobile li a):not(ul li i a):not(.is-static-page) {
    font-size: 18px !important;
    color: #fff;
    font-style: normal;
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
    padding: 12px 18px;
    border-radius: 12px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #1B1D50;
}

ul li a:not(.btn-logout a):not(.nav-link):not(.footerUlMobile li a):not(ul li i a):hover, ul li a:not(.btn-logout a):not(ul li i a):not(.nav-link):not(.footerUlMobile li a).active {
    color: white;
    background: rgb(46 49 135 / 25%);
    box-shadow: rgba(27, 29, 80, 0.4) 0px 0px 15px,
    rgba(27, 29, 80, 0.2) 0px 0px 20px;
    transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.ul-li-a-except {
    font-size: initial !important;
    color: inherit !important;
    font-style: normal !important;
    text-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
    cursor: auto !important;
    transition: none !important;
    position: static !important;
    overflow: visible !important;
    align-items: normal !important;
    background: none !important;
}


.footerUlMobile li a {
    font-size: 16px;
    color: #fff !important;
    transition: all 0.3s ease-in-out;
    font-style: normal;
}

.footerUlMobile li a:hover {
    font-size: 17px;
    color: #EAB33D !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);

}

.footerUlMobile li .active {
    font-size: 16px;
    color: #EAB33D !important;
    text-shadow: 2px 2px 4px rgba(41, 37, 133, 0.6);
}

.swal2-title {
    color: black !important;
    text-shadow: none !important;
}

ul li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
    background: radial-gradient(circle, rgba(54, 26, 115, 0.8) 0%, rgba(54, 26, 115, 0) 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
}

ul li a:not(.btn-logout a):not(.nav-link):not(.footerUlMobile li a):not(ul li i a):hover::before, ul li a:not(.nav-link):not(.footerUlMobile li a):not(ul li i a).active::before {
    width: 180px;
    height: 180px;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .footerUlMobile {
        gap: 0.5rem !important;
    }

    .star-logo img {
        width: 170px;
    }
}

.footer-inner {
    max-width: 1320px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 930px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
    }

    .footerUlMobile {
        flex-direction: row;
        align-items: center;
    }

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

    .w-custom {
        width: 100% !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 12px;
    }
}

.footerUlMobile li.active a {
    font-weight: bold;
}

@media (max-width: 500px) {
    .footerUlMobile {
        flex-direction: column;
        align-items: center;
    }

    .alt-width {
        width: 50px !important;
        padding: 2px;
    }

    .hide-mobile {
        visibility: hidden;
    }

    .alt-align {
        justify-content: start !important;
    }

    .mobiletiger {
        visibility: visible !important;
    }
}

.star-logo,
.desktop-logo,
.mobile-logo {
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.star-logo:hover,
.desktop-logo:hover,
.mobile-logo:hover {
    filter: brightness(1.2) contrast(1.1);
    transform: scale(1.05);
}

.star-logo.active,
.desktop-logo.active,
.mobile-logo.active {
    filter: brightness(1.3) contrast(1.2);
    transform: scale(1.05);
}


@media (max-width: 450px) {
    .footer-inner {
        padding: 70px 0 !important;
    }
}


.center-cardsarea {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    margin: 15px;
    margin-top: 60px;
}


.cardstitles {
    text-align: center;
}

.cardstitle {
    color: white;
    font-size: 2em;
    font-weight: bold;
}

.cardstitle span {
    color: #FFB661;
}

.cardstext {
    color: white;
    font-size: 1.2em;
}

.gummy-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-direction: row;
    max-width: 1590px;
}

.gummy-card {
    width: 320px;
    padding: 20px;
    max-height: 530px;
    min-height: 130px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    background: linear-gradient(85deg, #232737a3, #121523bf);
    border: 1px solid #ffffff4d;
    margin: 6px !important;
}

@media (max-width: 1040px) {
    .gummy-cards {
        flex-wrap: wrap;
    }
}

@media (max-width: 994px) {
    .gummy-card {
        width: 280px;
    }
}


@media (max-width: 768px) {
    .gummy-card {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .gummy-card img {
        width: 60%;
        margin-top: 30px;
        border-radius: 20px;
    }
}

@media (max-width: 760px) {
    .gummy-card {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .gummy-card img {
        width: 75%;
        margin-top: 15px;
        border-radius: 20px;
    }
}

.gummy-card img {
    border-radius: 20px;
}

.gummy-card h1 {
    font-size: 26px;
    text-shadow: unset !important;
    background: white;
    font-weight: 600;
    -webkit-background-clip: text;
    margin-bottom: 15px;
    padding-top: 15px;
}

.gummy-card p {
    font-size: 16px;
    text-shadow: 4px 4px 6px black;
}

/* .gummy-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 2px;
  background: linear-gradient(
    to bottom right,
    #3D51D0 0%,
    #3D51D0 30%,
    #5B3CC6 31%,
    #5B3CC6 65%,
    #851FB9 66%,
    #851FB9 100%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter:blur(0.6);
} */


@media (max-width: 700px) {
    .gummy-cards {
        flex-direction: column;
        align-items: center;
    }

    .gummy-card {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .cardsarea {
        padding: 20px;
    }

    .nav-hoverarea img {
        width: 38px;
    }

    .link-items-bar div {
        min-width: 60px;
    }
}


.indexbannerlogo {
    width: 50%;
}

@media (max-width: 322px) {
    .mobile-logo img {
        width: 25px !important;
    }
}


.purchase-wrapper {
    padding-left: 70px;
}

.promotionMargin {
    width: 100%;
}

@media (max-width: 992px) {
    .purchase-wrapper {
        padding-left: 0px;
    }

}


@media (max-width: 1200px) {
    .indexbannerlogo {
        width: 60%;
    }
}

.dt-input {
    margin-right: 10px;
}

.phone-input {
    padding-bottom: 10px;
}

#google-login-btn,
#facebook-login-btn {
    transition: all 0.3s ease;
}

#google-login-btn:hover,
#facebook-login-btn:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.line-through {
    text-wrap: nowrap;
}

.animate-gradient-limited, .animate-gradient-best, .animate-gradient-popular, .animate-gradient-special {
    text-wrap: nowrap;
}

@media (max-width: 768px) {
    #chat-widget-container {
        bottom: 50px !important;
    }

    #chat-widget {
        padding-top: 60px !important;
    }

    .mobiletiger {
        display: flex !important;
    }
}

@media (max-width: 290px) {
    .overlay-inner-wrap .coin span {
        font-size: 1rem !important;
    }

    .overlay-inner-wrap {
        align-items: start;
        justify-content: center;
    }
}

.promohover {
    height: 38px !important;
    width: 120px !important;
    margin-left: 8px;
    margin-bottom: 2px;
}

.overlay-inner-wrap .title {
    visibility: hidden;
}

.promotions .overlay-inner-wrap .coin span {
    visibility: hidden;
}

.overlay-inner-wrap .coin span {
    visibility: hidden;
}


@media (max-width: 390px) {
    .popuppromohover {
        font-size: 16px !important;
        padding: 6px !important;
        margin-bottom: -8px;
    }

}

@media (max-width: 320px) {
    .popuppromohover {
        font-size: 16px !important;
        padding: 6px !important;
        margin-top: -9px;
    }

}

@media (max-width: 291px) {
    .popuppromohover {
        font-size: 16px !important;
        padding: 6px !important;
        margin-bottom: -32px;
    }

}

#load-more-btn {
    width: 170px !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0px !important;
}

.sweeprulesmore {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
}


.vippage {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.vippage:hover {
    filter: brightness(1.1);
}

#vip-cards-container .card:has(img[alt="Normal"]) {
    display: none !important;
}

#vip-cards-container .card:has(img[alt="New VIP"]) {
    display: none !important;
}

.custom-modal {
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.custom-modal.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background: linear-gradient(to bottom, #090B2A, #111444, #161A53);
    margin: 10% auto;
    padding: 20px;
    border-radius: 12px;
    padding-top: 12px;
    width: 90%;
    max-width: 500px;
    transform: translateY(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    color: white;
}

.modal-content-readmore {
    background: #0b0e2dd4;
    border: 1px solid #FFB125;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 255, 255, 0.1);
    margin: 10% auto;
    padding: 20px;
    border-radius: 12px;
    padding-top: 12px;
    width: 90%;
    max-width: 500px;
    transform: translateY(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    color: white;
    font-size: 18px;
}

.custom-modal.visible .modal-content {
    opacity: 1;
    transform: translateY(0);
}

.close-button {
    font-size: 2em;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: end;
    cursor: pointer;
}


.button-secondary {
    position: relative;
    display: inline-block;
    padding: 10px 24px;
    font-weight: bold;
    color: #361A73 !important;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    border-radius: 24px !important;
    min-width: 78px;
    transition: background 0.3s ease-in-out, box-shadow 0.26s ease-in-out;
    z-index: 1;
    border: none;
}

.one-button-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.button-secondary a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

.button-secondary::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 3px;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    /* -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white); */
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
    transition: background 0.3s ease-in-out;
}

.button-secondary:hover a {
    color: #361A73 !important;
}

.button-secondary:hover {
    background: linear-gradient(to right, #FF66B2, #FFC178);
    box-shadow: 0px 6px 12px rgba(255, 102, 178, 0.6),
    0px 8px 18px rgba(255, 193, 120, 0.4);
    color: #361A73 !important;
}

#register a {
    font-size: 14px;
}

.banner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.banner-link {
    transition: all 0.3s ease-in-out;
}

.banner-link:hover {
    filter: brightness(1.1);
}

.banner-link {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-image {
    width: 100%;
    border-radius: 14px;
}


.locked-card {
    filter: blur(3px);
    position: relative;
}

.locked-card .card {
    pointer-events: none;
}

.card-blur-wrapper.blurred {
    filter: blur(3px);
    pointer-events: none;
}

.locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.LockedModal h4 {
    font-family: 'Luckiest Guy', cursive;
    background: linear-gradient(90deg, #FF4B9F, #FFB661);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.LockedModal p {
    font-family: 'Luckiest Guy', cursive;
    color: white !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

.promotionsarea-title {
    background: linear-gradient(90deg, #FF4B9F, #FFB661);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    font-weight: 700;
    font-size: 48px;
}

.promotionsarea-subtitle {
    color: white !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.custom-terms-btn {
    color: #FF9F6E;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
}

.custom-terms-btn:hover {
    color: #FFB48A;
}


.locked-icon {
    width: 55px;
    opacity: 0.95;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

.locked-icon:hover {
    transform: scale(1.15);
    opacity: 1;
}

.terms-content {
    background: #FFFFFF1A;
    border-radius: 20px;
    padding: 14px;
}

.terms-content p {
    display: flex;
    justify-content: center;
    font-size: 28px;
}

.terms-content p:nth-of-type(2) {
    justify-content: flex-end;
    font-size: 16px;
    font-weight: 500;
}

.terms-content ol {
    list-style-type: decimal;
    padding-left: 1rem;
}

.terms-content ol li {
    margin-bottom: 0.5rem;
    font-weight: 500;
}


.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.popup-overlay.fade-out {
    animation: fadeOut 0.3s forwards;
}

.level-popup {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    text-align: center;
    border-radius: 15px;
    max-width: 305px;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.level-popup h2 {
    color: white;
    font-size: 24px;
}

.level-popup p {
    color: white;
    font-size: 16px;
}

.level-popup.fade-out {
    animation: fadeOut 0.3s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.level-popup .popup-content img {
    max-width: 100px;
    margin: 10px 0;
}

.level-popup .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

.register-form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.register-form .row {
    width: 100%;
    margin: 0px 0px !important;
}

.stepper-area {

}

.register-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 2rem;
    position: relative;
}

.register-stepper .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #6a1b9a;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    position: relative;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(to left, #1E2052, #313372);
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    z-index: 2;
}

.step-circle::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 40px;
    padding: 2px;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1;
}

.next-button, .GummyPlay-register {
    width: 96%;
    font-size: 20px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    margin-top: 30px !important;
    margin-bottom: 20px;
}

.next-button {
    width: 96%;
    font-size: 20px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    margin-top: 60px !important;
    margin-bottom: 20px;
}

.step-circle:not(.active) {
    background-color: #888;
}

.step-circle.active {
    color: #361A73;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
}

.register-stepper .step-line {
    height: 2px;
    background-color: #ccc;
    flex-grow: 1;
    margin: 0 -30px;
    margin-top: 21px;
    z-index: 1;
}

.register-stepper .text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-line {
    flex-grow: 1;
    height: 2px;
    background-color: #888;
    margin: 0 10px;
}

.step-content {
    width: 50%;
}


.register-logo {
    padding-left: 65px;
}

@media (max-width: 768px) {
    .step-content {
        width: 100%;
    }

    .account-register-area {
        padding-right: 0px !important;
    }

    .promotionsarea-title {
        font-size: 30px;
    }

    .promotionsarea-subtitle {
        font-size: 18px !important;
        text-align: center;
    }
}

@media (max-width: 320px) {
    .promotionsarea-title {
        font-size: 24px;
    }

    .promotionsarea-subtitle {
        font-size: 16px !important;
        text-align: center;
    }
}

@media (max-width: 1460px) {
    #promo-wrapper {
        padding-left: 65px;
        padding-right: 65px;
    }
}

@media (max-width: 1340px) {
    #promo-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.package-slide .special-bg div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.package-slide .font-semibold {
    width: 50%;
}

.package-slide .relative {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.package-slide .relative .text-xs {
    width: 100%;
}

@media (max-width: 1200px) {
    .textxs-alt {
        font-size: 13px;
    }
}

@media (max-width: 990px) {
    .textxs-alt {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .textxs-alt {
        font-size: 13px;
    }
}

@media (max-width: 580px) {
    .textxs-alt {
        font-size: 16px;
    }
}

@media (max-width: 330px) {
    .get-coins-wrap .container {
        padding: 0px !important;
    }
}

.special-slider-container {
    position: relative;
    overflow: hidden;
}

.special-slider {
    transition: transform 0.4s ease-in-out;
}

.dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.special-slider-track {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.special-slider {
    display: flex !important;
    transition: transform 0.4s ease-in-out;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: 1185px;
}

.special-slider > .package-slide {
    height: 252px;
    min-height: 252px;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    url("../images/twisted-slide-background.webp"),
    radial-gradient(
            circle at top left,
            #CF11F0 0%,
            #7B1CCC 33%,
            #4008A7 71%,
            #3A0993 95%
    );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

.slide-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px;
}

.details-buy > .buy-button {
    gap: 8px;
    padding: 12px 32px;
    border-radius: 30px;
    background: linear-gradient(98.71deg, #FF6A6A 1.04%, #FF1F87 33.64%, #FF2885 47.74%, #FFB661 84.89%), linear-gradient(0deg, rgba(237, 24, 109, 0.44), rgba(237, 24, 109, 0.44));
    box-shadow: 0 4px 4px rgba(253, 83, 77, 0.08),
    0 8px 12px rgba(253, 83, 77, 0.12),
    0 15px 25px rgba(253, 83, 77, 0.18),
    0 30px 40px rgba(253, 83, 77, 0.24),
    0 80px 100px rgba(253, 83, 77, 0.19);

    font-family: 'Luckiest Guy', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 100% !important;
    letter-spacing: 0;
    vertical-align: bottom;
    text-transform: uppercase;
}

.details-coins {
    display: flex;
    flex-direction: column;
}

.details-coins-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #fff;
}

.details-coins-amount {
    display: flex;
    gap: 7.55px;
}

.details-coins-amount > img {
    width: 30px;
    height: 30px;
}

.gc-coins-amount {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 800;
    font-size: 47px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #fff;
    text-shadow: -1px -1px 0 #B4118E,
    1px -1px 0 #B4118E,
    -1px 1px 0 #B4118E,
    1px 1px 0 #B4118E,
    0 2px 0 #A0007A;
    margin-bottom: -10px;
    text-align: center;
    z-index: 1;
}

.fc-coins-amount {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 22.65px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #FFB125;
}

.package-slide > .slide-badge {
    font-size: 20px;
    line-height: 120%;
    font-family: 'Nunito Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-shadow: none !important;
    background: #4B79F4;
    padding: 6px 10px;
    border-radius: 0 20px 0 20px;
    box-shadow: 0px 4px 4px 0px #FFFFFF40 inset;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.slide-center {
    position: relative;
    min-width: 134px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.slide-center > img {
    position: absolute;
    width: 134px;
    height: 135px;
    top: 19.5px;
    left: 50%;
    transform: translate(-50%);
}

.coins-shop-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /*width: 50%;*/
    width: fit-content;
    background-color: #181B59;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-sizing: border-box;
    overflow: hidden;
    padding: 13px 16px;
    height: 72px;
    border-radius: 16px;
    border: 1px solid;
    margin-bottom: 40px;
}

.coins-shop-notification::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

.coins-shop-notification > .message-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.coins-shop-notification > .message-box > span {
    max-width: 360px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0;
    color: #fff;
}

.coins-shop-notification .read-more {
    font-family: 'Dongle', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0;
    text-align: center;

    padding: 10px 16px!important;
    white-space: nowrap;
    white-space: pre;


    gap: 10px;
    border-radius: 999px!important;
    border-width: 2px;
}


@media (min-width: 1200px) {
    .special-slider > .package-slide {
        flex: 0 0 32.2%;
        max-width: 32.2%;
    }
}

@media (max-width: 1400px) {
    .special-slider > .package-slide {
        flex: 0 0 33.3333%;
        max-width: 32%;
    }
}

@media (max-width: 1200px) {
    .special-slider > .package-slide {
        flex: 0 0 33.3333%;
        max-width: 31.50%;
    }

    .banner, .banner-allgames {
        background-position: left;
    }

    .banner-allgames {
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.1)), url("../images/all-games.png");
    }
}

@media (max-width: 992px) {
    .special-slider > .package-slide {
        flex: 0 0 50.3333%;
        max-width: 48.45%;
    }
}

@media (max-width: 768px) {
    .special-slider-container {
        gap: 20px!important;
    }

    .dots-container {
        display: none!important;
    }

    .special-slider {
        padding: 16px;
        background-color: #232646;
        max-height: calc(252px * 2 + 16px * 3);
        justify-content: space-between;
        gap: 16px;
        border-radius: 24px;
        flex-direction: column;
        overflow-y: auto;
    }

    .special-slider > .package-slide {
        flex: 0 0 50%;
        width: 100%;
        max-width: 100%;
        max-height: 252px;
    }

    .normal-packages {
        width: 330px!important;
        flex-direction: column!important;
        flex-wrap: nowrap!important;
        gap: 40px!important;
    }

    .normal-packages > .package-row {
        max-width: 100%;
        height: 200px;
        min-height: 200px;
        width: 100%;
    }

    .package-row > .image-container {
        top: 46px;
        left: 100px;
        width: 320px;
        height: 200px;
    }

    .coins-shop-notification {
        flex-direction: column;
        height: unset;
    }

    .coins-shop-notification .justify-content-end {
        justify-content: center!important;
        width: 100%;
    }

    .coins-shop-notification .sweeprulesmore {
        width: 100%;
    }

    .banner, .banner-allgames {
        background-position: center;
    }

    .banner-allgames {
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.1)), url(../images/all-games-mobile.png);
        padding: 20px;
    }
}

@media (max-width: 400px) {
    .special-slider > .package-slide {
        flex: 0 0 50%;
        max-width: 100%;
    }

    .buy-btn {
        min-width: 80px !important;
    }
}

.special-slider-track {
}

.package-row {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.package-row .row-bg {
    position: absolute;
    top: 45px;
    left: 106px;
    width: 100%;
    height: 100%;
    background-size: 292px 292px;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0.9) blur(0px);
    z-index: 0;
    pointer-events: none;
    border-radius: 12px;
}

.package-row > *:not(.row-bg) {
    position: relative;
    z-index: 1;
}

.row.getcoins {
    justify-content: center;
}

.special-slider-container {
    overflow-x: auto;
    margin-bottom: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 52px;
    max-width: 1352px;
}

.normal-packages {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1185px;
}

@media (max-width: 992px) {
    .normal-packages {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .normal-packages {
        align-items: center;
    }
    .normal-packages > .package-row {
        max-width: 90%;
    }
}

.package-slide,
.package-row {
    border-radius: 20px;
    color: white;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    position: relative;
}

.package-row {
    position: relative;
    display: flex;
    flex: 1 1 calc((100% - 3 * 20px) / 4);
    max-width: calc((100% - 3 * 20px) / 4);
    flex-direction: column;
    justify-content: space-between;
    width: 281.5px;
    height: 232px;
    border-radius: 20px;
    padding: 16px;
    background: linear-gradient(180deg, #232737 0%, #121523 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-sizing: border-box;
    overflow: hidden;
}

.package-row::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

.image-container {
    position: absolute!important;
    top: 65px;
    left: 60px;
    width: 280px;
    height: 280px;
    background-repeat: no-repeat;
    background-size: 280px;
}

.info-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-container > .coins-container {
    display: flex;
    gap: 8px;
}

.info-coin {
    display: flex;
    flex-direction: column;
    font-family: 'Nunito Sans', sans-serif;
}

.info-coin > .coins-label {
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
}

.info-coin > .coins-amount {
    font-weight: 800;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #FFB125;
}

.buy-btn {
    font-family: 'Luckiest Guy', sans-serif;
    font-weight: 400 !important;
    font-size: 24px;
    line-height: 100%;
    border-radius: 30px !important;
    padding: 12px 32px 6px 32px;
    text-align: center;
    cursor: pointer;
    color: white !important;
    min-width: 95px;
    box-shadow: inset 0 7.1px 7.1px rgba(255, 255, 255, 0.25),
    0 4px 4px rgba(253, 83, 77, 0.08),
    0 8px 12px rgba(253, 83, 77, 0.12),
    0 15px 25px rgba(253, 83, 77, 0.18),
    0 30px 40px rgba(253, 83, 77, 0.24),
    0 80px 100px rgba(253, 83, 77, 0.19);

}

.button-secondary.buy-btn:before {
    background: linear-gradient(98.71deg, #FF6A6A 1.04%, #FF1F87 33.64%, #FF2885 47.74%, #FFB661 84.89%), linear-gradient(0deg, rgba(237, 24, 109, 0.44), rgba(237, 24, 109, 0.44));
    border-radius: 30px;
    inset: 0;
}

.package-slide img.absolute {
    z-index: 0;
}

.paymentBtnProceed.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #FFB125;
}


.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #555872;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background-color: #FFB125;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    width: 30px;
    border-radius: 10px;
}

/*.segmentation-modal {*/
/*  position: fixed;*/
/*  inset: 0;*/
/*  z-index: 9999;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  backdrop-filter: blur(8px);*/
/*  background-color: rgba(0, 0, 0, 0.4);*/
/*}*/

/*.segmentation-modal-content {*/
/*  background: #222;*/
/*  border-radius: 12px;*/
/*  padding: 24px;*/
/*  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);*/
/*  max-width: 400px;*/
/*  width: 100%;*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  flex-direction: column;*/
/*}*/
/*.segmentation-modal-title {*/
/*  font-size: 20px;*/
/*  color: #fff;*/
/*  margin-bottom: 16px;*/
/*}*/
/*.segmentation-modal-button {*/
/*    position: relative;*/
/*    color: #fff !important;*/
/*    border: none !important;*/
/*    transition: all 0.3s ease-in-out;*/
/*    border-radius: 30px !important;*/
/*    background: linear-gradient(to right, #FF4B9F, #FFB661);*/
/*    font-weight: 600;*/
/*    text-shadow: 2px 2px 4px rgba(240, 38, 133, 0.6);*/
/*    padding: 10px 20px;*/
/*    z-index: 0;*/
/*    overflow: visible;*/
/*    box-shadow: 0 0 0 2px rgba(234, 179, 61, 0.4), 0 0 0 2px rgba(240, 38, 133, 0.4);*/
/*    max-width: 200px;*/
/*  }*/

/*.segmentation-modal-button::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  border-radius: 30px;*/
/*  box-shadow: 0 0 0 2px rgb(255 255 255 / 20%), 0 0 0 2px rgb(255 255 255 / 40%);*/
/*  background: linear-gradient(to right, #c488a47a, #FFB661);*/
/*  transition: opacity 0.3s ease-in-out;*/
/*  opacity: 1;*/
/*  z-index: -1;*/
/*}*/

/*.segmentation-modal-button:hover {*/
/*  background: linear-gradient(to right, rgba(240, 38, 133, 1), rgba(234, 179, 61, 1));*/
/*  box-shadow: 0 0 0 2px rgba(240, 38, 133, 0.4), 0 0 0 2px rgba(234, 179, 61, 0.4);*/
/*}*/

/*.segmentation-modal-button:hover::before {*/
/*  box-shadow: 0 0 0 2px rgb(154 122 52 / 40%), 0 0 0 2px rgb(229 153 189 / 40%),;*/
/*  opacity: 0;*/
/*}*/

.segmentation-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.4);
}

.segmentation-modal-content {
    position: relative;
    background: linear-gradient(to left, #100D42, #1A1D5E, #181A44);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.segmentation-modal-button-wrapper {
    max-width: 300px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.segmentation-modal-title {
    font-size: 20px;
    color: #fff;
    margin-bottom: 16px;
}

.segmentation-modal-button {
    position: relative;
    color: #fff !important;
    border: none !important;
    transition: all 0.3s ease-in-out;
    border-radius: 30px !important;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(240, 38, 133, 0.6);
    padding: 10px 20px;
    z-index: 0;
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(234, 179, 61, 0.4), 0 0 0 2px rgba(240, 38, 133, 0.4);
    max-width: 200px;
}

.segmentation-modal-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 20%), 0 0 0 2px rgb(255 255 255 / 40%);
    background: linear-gradient(to right, #c488a47a, #FFB661);
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    z-index: -1;
}

.segmentation-modal-button:hover {
    background: linear-gradient(to right, rgba(240, 38, 133, 1), rgba(234, 179, 61, 1));
    box-shadow: 0 0 0 2px rgba(240, 38, 133, 0.4), 0 0 0 2px rgba(234, 179, 61, 0.4);
}

.segmentation-modal-button:hover::before {
    opacity: 0;
}

.segmentation-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 1;
}

.segmentation-offer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.segmentation-offer-image {
    width: 100%;
    max-width: 300px;
    margin-bottom: 12px;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.segmentation-offer-image:hover {
    transform: scale(1.03);
}

.payment-modal {
    z-index: 999999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-modal-content {
    background: #0C0F34;
    position: relative;
    transform: none;
    border-radius: 30px;
    padding: 70px 20px 35px 20px;
    border: 2px solid #EA3AC2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    animation: fadeInScale 0.3s ease forwards;
}

.payment-modal-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1d5e;
    margin-bottom: 1rem;
    text-align: center;
}

.payment-modal-close {
    position: absolute;
    top: 23px;
    right: 23px;
    background-color: transparent;
    border: none;
    transition: all 0.3s ease-in-out;
}

.payment-modal-description {
    font-size: 20px;
    font-weight: 400;
    color: white;
    text-align: center;
}

.payment-modal-button {
    padding: 12px 30px;
    background: #F31A72FF;
    color: white;
    text-transform: uppercase;
    margin-top: 30px;
    text-align: center;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;
    height: 48px;
    width: 200px;
    position: relative;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

.payment-modal-button:hover {
    background: #ff0069;
    color: white;
    cursor: pointer;
}

.payment-modal-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;

}

.paymentModalContainer .spinner {
    margin-top: 24px;
    margin-left: 24px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.affiliates-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.4);
}

.affiliates-modal-content {
    position: relative;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.affiliates-modal-img-container {
    width: 700px;
}

.affiliates-modal-img {
    width: 100%;
}

.affiliates-modal-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.affiliates-modal-button {
    position: relative;
    color: #fff !important;
    border: none !important;
    transition: all 0.3s ease-in-out;
    border-radius: 30px !important;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(240, 38, 133, 0.6);
    padding: 20px 40px;
    z-index: 0;
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(234, 179, 61, 0.4), 0 0 0 2px rgba(240, 38, 133, 0.4);
    max-width: 200px;
}

.affiliates-modal-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 20%), 0 0 0 2px rgb(255 255 255 / 40%);
    background: linear-gradient(to right, #c488a47a, #FFB661);
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    z-index: -1;
}

.affiliates-modal-button:hover {
    background: linear-gradient(to right, rgba(240, 38, 133, 1), rgba(234, 179, 61, 1));
    box-shadow: 0 0 0 2px rgba(240, 38, 133, 0.4), 0 0 0 2px rgba(234, 179, 61, 0.4);
}

@media (max-width: 768px) {
    .affiliates-modal-img-container {
        width: 400px;
    }
}

@media (max-width: 410px) {
    .affiliates-modal-img-container {
        width: 330px;
    }
}

.affiliate-bought-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.4);
    animation: fadeInScale 0.3s ease forwards;
}

.affiliate-bought-message {
    background: linear-gradient(to right, #1a1d5e, #0C0F34);
    border: 2px solid #EA3AC2;
    padding: 24px 36px;
    border-radius: 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 30px rgba(234, 58, 194, 0.3);
    animation: fadeInScale 0.3s ease forwards;
}

.affiliate-bought-text {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.affiliate-bought-close {
    position: absolute;
    top: 0;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 1;
    transition: color 0.2s ease;
}

.affiliate-bought-close:hover {
    color: #EA3AC2;
}

.affiliate-bought-message {
    position: relative;
    background: linear-gradient(to right, #1a1d5e, #0C0F34);
    border: 2px solid #EA3AC2;
    padding: 24px 36px;
    border-radius: 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 30px rgba(234, 58, 194, 0.3);
    animation: fadeInScale 0.3s ease forwards;
}
button.loading .btn-text {
  color: transparent;
}

button.loading .btn-loader {
  display: block !important;
}

.spinner-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px;
}
.GummyPlay-register .spinner-overlay {
  top: 63%;
}

.auth-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-right: 2px solid white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.promotions-popup-action-btn {
    position: relative;
    color: #fff !important;
    border: none !important;
    transition: all 0.3s ease-in-out;
    border-radius: 30px !important;
    background: linear-gradient(to right, #FF4B9F, #FFB661);
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(240, 38, 133, 0.6);
    padding: 10px 20px;
    z-index: 0;
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(234, 179, 61, 0.4), 0 0 0 2px rgba(240, 38, 133, 0.4);
    width: 120px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    line-height: 1.5;
}

.promotions-popup-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 20%), 0 0 0 2px rgb(255 255 255 / 40%);
    background: linear-gradient(to right, #c488a47a, #FFB661);
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    z-index: -1;
}

.promotions-popup-action-btn:hover {
    background: linear-gradient(to right, rgba(240, 38, 133, 1), rgba(234, 179, 61, 1));
    box-shadow: 0 0 0 2px rgba(240, 38, 133, 0.4), 0 0 0 2px rgba(234, 179, 61, 0.4);
    color: #fff !important;
    text-decoration: none;
}

.promotions-popup-action-btn:hover::before {
    box-shadow: 0 0 0 2px rgb(154 122 52 / 40%), 0 0 0 2px rgb(229 153 189 / 40%);
    opacity: 0;
}