:root {
  /* primary theme shades and tints */
  --primary: #FE00FE;
  --primary-50: #fff2ff;
  --primary-100: #ffccff;
  --primary-200: #ff99ff;
  --primary-300: #fe66fe;
  --primary-400: #fe33fe;
  --primary-500: #fe00fe;
  --primary-600: #cb00cb;
  --primary-700: #980098;
  --primary-800: #660066;
  --primary-900: #330033;
  --primary-950: #0d000d;
  --secondary: #FFDF0C;
  --secondary_900: #363001;
  --secondary_950: #1C1701;
  --secondary_800: #4C4502;
  --secondary_700: #635A01;
  /* tertiary theme shades and tints */
  --tertiary: #2BDFEC;
  --tertiary_950: #050305;
  --tertiary_900: #020B0C;
  --tertiary_800: #082D2F;
  --tertiary_700: #11595e;
  --tertiary_600: #177b82;
  --tertiary_500: #2BDFEC;
  --tertiary_400: #55e5f0;
  --tertiary_300: #7fecf4;
  --tertiary_200: #aaf2f7;
  --tertiary_100: #d4f9fb;
  --tertiary_50: #f4fdfe;

  --hue: 0;
	--primary100: hsl(var(--hue) 0% 0%);
	--primary300: hsl(var(--hue) 10% 10%);
	--primary500: hsl(var(--hue) 20% 25%);
	--primary900: hsl(var(--hue) 30% 35%);
  --trans-dur: 0.3s;

  color-scheme: light dark;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background-color:#050305;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: #FFDF0C;
  text-decoration: none;
}

ul li,
ol li {
  font-size: 0.85rem;
}


h2 {
  font-size: 2rem;
  margin: 20px 0 10px;
  padding-bottom: 10px;
}

.modal-header {
    background: transparent;
    border-bottom: none;
}

/* Navbar start */
.navbar-brand.abs img {
  max-width: 150px;
  width: 100%;
}

.navbar-brand.mobile {
  max-width: 100px;
}

.navbar-expand-lg .navbar-collapse{
  flex-basis: auto;
  flex-grow: 0;
}

#header {
  background: #131a1a;
  border-bottom: 1px solid var(--tertiary_800);
}
/* Navbar end */

/* Buttons */

.btn-main {
  font-size: 2em;
  padding: 10px 16px;
  font-weight: bold;
  background: var(--primary);
  color: #fff;
  border:none;
  line-height: normal;
}

.btn-main:hover {
  background: var(--primary); 
  color: #fff; 
}

.btn-main:active {
  background: var(--primary);
  color: #fff;
}

.btn-tertiary {
  background: var(--tertiary_800);
  color: var(--tertiary_500);
  border: 1px solid var(--tertiary_700);
  font-weight: normal;
}

.btn-tertiary:hover {
  color: var(--secondary);
  border: 1px solid var(--secondary);
  background: var(--tertiary_800);
}

#dGamesSilderContainer {
  background-color: #0c0e0e;
}
/* buttons end */

/* Ribbon styles */
.ribbon {
  position: absolute;
  top: 15px;
  z-index: 99;
  left: 10px;
  background-color: #FFDF0C;
  color: #000;
  padding: 5px 40px;
  font-weight: bold;
  font-size: 1rem;
  /* transform: rotate(-45deg); */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  white-space: nowrap;
}

.page-header {
  background: url('/img/page-header-bg.jpg') no-repeat;
  background-size: cover;
  height: 185px;
  align-content: center;
}

.page-header h2 {
  text-transform: uppercase;
  font-size: 46px;
  text-shadow: 0 0 10px #000;
}


/* login modal start */

.grecaptcha-badge { visibility: hidden !important; }

.login {
  background: var(--primary);
  color: #fff;
  border:none;
  padding: 4px 10px;
}

.login:hover {
   background: #af00af; 
  color: #fff; 
}

.casino-modal {
  /* background: linear-gradient(160deg, #1C242F 0%, #10161E 100%);
  border: 1px solid #2ADFEC;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(42, 223, 236, 0.2); */
}

.casino-input {
    background-color: var(--tertiary_900);
    border: 1px solid var(--tertiary_700);
    color: #fff;
    border-radius: 6px;
    width: 100%;
    z-index: 1;
}

.casino-input:focus {
  border-color: #FFD700;
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
  background-color: #131B24;
  color: #fff;
}

.casino-input::value  {
  color: #7F8EA3;
}

.casino-input::placeholder  {
  color: var(--tertiary_600);
}

/* select.casino-input:invalid {
  color: #41444F;
} */

.btn-gold {
  background: linear-gradient(90deg, #FFD700, #C49B0B);
  color: #000;
  border: none;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.btn-gold:hover {
  background: linear-gradient(90deg, #FFE55C, #E8B300);
  transform: translateY(-2px);
  color:#000;
}

.loginmodal .modal-header {
  align-items: flex-start;
}

.loginmodal .modal-title {
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.loginmodal .modal-title span {
  font-size: 16px;
}

.btn-close-white {
  filter: invert(1);
}

.smtext a {
  color:#00B7FF;
  text-decoration: none;
}
.smtext a:hover {
  color:#00B7FF;
  text-decoration: underline;
}
    

/* general form styling */

input.form-control:focus {
  background-color: var(--tertiary_950);
  border: 1px solid var(--tertiary_500);
}

.form-control,
.casino-input-addon,
.casino-input-addon:hover,
.casino-input-addon:active  {
  background-color: var(--tertiary_950);
  border: 1px solid var(--tertiary_700);
}

.casino-input-addon i {
  color: var(--tertiary_500);
}

input.form-control::placeholder, 
select.casino-input::placeholder {
  color: var(--tertiary_700);
}

select.casino-input option {
  background: var(--tertiary_900);
  color: var(--tertiary_600);
  border: 1px solid var(--tertiary_700);
}

/* Overrides bootstrap css for select fields */
.form-select {
  /* background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none'%20stroke='%23177b82'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20d='m2%205%206%206%206-6'/></svg>"); */
  background-color: var(--tertiary_900);
  color: var(--tertiary_600);
  border: 1px solid var(--tertiary_700);
}

.form-select:focus {
  border-color: #FFD700;
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.6);
}

.form-select option:hover {
  background: #0E141B;
}

/* Login modal end */

/* Registration Progress Indicator */
.registration-progress {
    position: relative;
    padding: 10px 0 20px 0;
}

.steps-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.step-line {
    position: absolute;
    top: 25px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(42, 223, 236, 0.2);
    z-index: 1;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    transition: all 0.3s ease;
}

.step-item.active {
    opacity: 1;
}

.step-item.completed {
    opacity: 1;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0E141B;
    border: 2px solid #2ADFEC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #2ADFEC;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.step-item.active .step-circle {
    background: #FFD700;
    border-color: #FFD700;
    color: #10161E;
    box-shadow: 0 0 10px rgba(255, 230, 0, 0.774);
}

.step-item.completed .step-circle {
    background: #2ADFEC;
    color: #10161E;
}

.step-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.registration-footer-text {
    font-size: 0.75rem;
    color: var(--tertiary_700);
    line-height: 1.4;
}

.registration-footer-text b {
    color: #ccc;
}

.registration-footer-text a {
    color: #2ADFEC;
    text-decoration: underline;
}

.form-success {
    color: #28a745;
    font-size: 0.9rem;
    margin-top: 10px;
}

/* Logout start */
.logout-icon {
  color: #FFD700;
  text-align: center;
  display: block;
}

.logoutmodal .modal-header {
background: linear-gradient(160deg, #1C242F 0%, #10161E 100%);
color: #FFDF0C !important;

}

.textdim {
  color:#6c757d;
}

.cancelbtn {
  border: 1px solid #2ADFEC;
}


.btn-outline-blue {
  border:1px solid #2ADFEC;
  color:#fff;
}

  .btn-outline-blue:hover {
  border:1px solid #2ADFEC;
  background-color:#2ADFEC ;
  color:#000;
}



/* Logout end */


/* My Account */

.casino-nav-pills .nav-link {
    color: var(--tertiary_500);
    border-radius: 50px;
    padding: 8px 20px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: var(--tertiary_800);
    margin: 0 5px;
    font-weight: 500;
}
.casino-nav-pills .nav-link.active {
    background-color: var(--tertiary_500); /* Gold */
    color: #000 !important;
    border-color: var(--tertiary_700);
}
.casino-nav-pills .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(233, 177, 4, 0.5);
    color: #fff;
}
.casino-input-addon:hover {
    color: #e9b104 !important;
}
.tab-pane {
    padding-top: 10px;
}
/* Glassmorphism effect for modal if needed */
.casino-modal {
    /* background: rgba(20, 20, 25, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important; */
}

#dAccountUpdateResponse {
    padding: 0px 10px;
}

.player-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
}

.avatar-edit-button {
    width: 35px;
    height: 35px;
}

.avatar-option {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avatar-option.focused-avatar {
    border-color: #FE00FE !important;
    box-shadow: 0 0 15px rgba(233, 177, 4, 0.4);
}

/* Top Bar */
.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* padding: 10px 20px; */
  gap: 10px;
}

/* Buttons */
.topbar button {
  width:auto;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px 4px 0;
}

.topbar .btn-primary { 
  background: var(--primary); 
  color: #fff;
  padding: 10px;
}

.topbar .btn-primary:hover { 
  background: #af00af; 
  color: #fff;
}
.topbar .btn-secondary { 
  background: var(--tertiary_800);
  color: var(--tertiary_300);
  border: 1px solid var(--tertiary_700);
  padding: 10px;
}

.topbar .btn-secondary:hover { 
  background: var(--tertiary_500);
  color: #000; 
}

/* Topbar icons */
.topbar i {
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
}

.search-btn, .notification-wrapper {
  border: 1px solid #005960;
  border-radius: 6px;
  background: var(--tertiary_800);
  color: var(--tertiary_400);
}

.search-btn {
  position: relative;
  cursor: pointer;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#btnTopDeposit {
  background: var(--primary-600);
  border: 1px solid var(--primary-500);
  padding: 4px 6px;
  margin-left: 5px;
  color: #fff;
}

.balance-symbol {
  padding: 4px 6px;
  background: var(--tertiary_800);
  border-radius: 50%;
}

.profile-btn {
  border: none;
}

.login {
  width:100px;
}

.join {
  width:100px;
}



/* Balance Block */
.balance-block {
  color: #2ADFEC;
  border: 2px solid #2ADFEC;
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.balance-label { margin-right: 6px; color: #fff; opacity: 0.8; }
.balance-amount { color: #2ADFEC; }

/* Profile Block */

.balance-btn {
    color: #fff;
    background-color: var(--tertiary_900);
    border: 1px solid var(--tertiary_800);
    text-align: center;
    padding: 2px 2px 2px 4px;
    border-radius: 6px;
}

.profile-btn {
  background: transparent;
  /* border: 2px solid #2ADFEC; */
  border-radius: 50px;
  color: #2ADFEC;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  cursor: pointer;
}

.profile-btn:hover {
  /* background-color: #2ADFEC; */
  color: var(--primary);
}

.profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
}

.profile-name {
  font-weight: 500;
  color: #2ADFEC;
}

/* Dropdown Menu */
.dropdown-menu {
  background-color: var(--tertiary_900);
  border: 1px solid var(--tertiary_700);
}

.dropdown-menu.show {
margin-top: 10px;
}


.dropdown-item {
  color: var(--tertiary-400);
  background: var(--tertiary-900);
  font-size: 14px;
}

.dropdown-item.logout {
  color: var(--primary);
}

.dropdown-item:hover {
  background-color: #2ADFEC;
  color: #1C242F;
}
    /* Layout */
    .main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }
    /* Sidebar */
    :root {
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 80px;
}

#btnTopDeposit i {
  padding: 5px;
}

body {
    overflow-x: hidden;
}

    .sidebar {
      width: var(--sidebar-width);
      height: 100vh;
      background: #121616;
      transition: all 0.3s ease;
      /* border-right: 1px solid var(--tertiary_800); */
      position: fixed;
      /* top: 0; */
      left: 0;
      overflow-y: auto;
      z-index: 100;
    }

    .sidebar .fas {
      color: #2ADFEC;
    }

    #blue {
      color: var(--tertiary_600);
    }

    .sidebar.collapsed {
      width: var(--sidebar-width-collapsed);
    }


.sidebar.collapsed .sidebar-link.active {
  background: none;
  position: relative;
}

.sidebar.collapsed .sidebar-link.active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: #2ADFEC;
  border-radius: 2px;
}

    .sidebar-link {
      color: var(--tertiary_500);
      transition: all 0.2s ease;
      border-radius: 8px;
      margin: 4px 16px;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 12px;
      text-decoration: none;
    }
/* --- Hover effects for consistency --- */
.sidebar-link:hover {
  color: #ffffff;
  background: #141821;
  transform: translateX(5px);
}

/* --- Active main link --- */
.sidebar-link.active {
  background: #2ADFEC;        
  color: #000;                 
  font-weight: 600;
  transform: none;             
}

/* --- Icon color override when active --- */
.sidebar-link.active .fas {
  color: #000; 
}

    .sidebar.collapsed .submenu-arrow {
  display: none;
}

    .submenu {
      display: none;
      flex-direction: column;
      margin-left: 60px;
    }

    .submenu-link {
      color: var(--tertiary_600);
      font-size: 14px;
      padding: 6px 0;
      text-decoration: none;
    }

.sidebar.collapsed ~ #content .main-content {
  margin-left: var(--sidebar-width-collapsed);
}

    /* --- Active submenu link --- */
.submenu-link.active {
  color: #2ADFEC;
  font-weight: 600;
  position: relative;
}

/* --- Optional glowing bar beside active submenu link --- */
.submenu-link.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 4px;
  width: 3px;
  height: 70%;
  background: #2ADFEC;
  border-radius: 4px;
}

   .submenu-link:hover {
  color: #2ADFEC;
}

.submenu-arrow {
  transition: transform 0.3s ease, color 0.3s ease;
  font-size: 0.75rem;
  color: #a0a3bd;
  margin-left: auto;
  transform: rotate(0deg); 
}

.has-submenu.open .submenu-arrow {
  transform: rotate(180deg); 
  color: #2ADFEC;
}

  .sidebar.collapsed .hide-on-collapse {
    display: none;
  }

  .main-content {
    background-color: #0d1212;
    padding: 0 0 20px 0;
    transition: all 0.3s ease;
    margin-left: var(--sidebar-width);
  }

    .collapsed ~ .main-content {
      margin-left: var(--sidebar-width-collapsed);
    }

    .toggle-btn {
      position: absolute;
      top: 20px;
      left: 22px;
      background: #161B24;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      border: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      z-index: 110;
      cursor: pointer;
      transition: transform 0.3s ease;
      color: #2ADFEC;
    }

    .toggle-btn:hover {
      background: #1f2532;
    }

    .toggle-btn i {
  transition: transform 0.3s ease;
}

    .collapsed .toggle-btn {
      transform: rotate(180deg);
    }

.offcanvas {
  background: #000;
  color: #ccc;
}

.offcanvas-header .btn-close {
  color: #ccc;
}

.form-error {
  color: #e73837;
}

/* Icons */

.platform-icons {
  /* display: flex; */
  align-items: center;
  gap: 8px;
}

/* Shared style for all icons */
.platform-icons i,
.platform-icons .over21 {
  color: #2ADFEC;
  background: #141821;
  border-radius: 50%;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
  font-size: 16px;
}

/* Over 21 custom text style */
.platform-icons .over21 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

/* Hover effect */
.platform-icons i:hover,
.platform-icons .over21:hover {
  background-color: #2ADFEC;
  color: #1C242F;
  box-shadow: 0 0 10px rgba(42, 223, 236, 0.5);
  transform: translateY(-2px);
}

.offernav .navSwiper {
  border: none;
  padding: 1rem 15px;
}

.offer-container {
  display: flex;
  background: var(--tertiary_900);
  border: 1px solid var(--tertiary_700); /* Set a transparent border to create space for the image */
  border-radius: 6px;
  padding: 0 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  min-height: 195px;
}

.offer-container .promo-col-action {
  padding-top: 10px;
}

.offer-container .promo-col-action button {
  font-size: 0.85rem;
}
.offer-container .promo-col-action .unclaim-btn {
  background: rgba(255, 251, 1, 0.3);
  border: 1px solid rgb(255, 166, 0);
}

.offer-container .promo-col-action .badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.offer-container .promo-info-wrapper .bonus-info-toggle {
  margin-left: 10px;
  cursor: pointer;
  color: #2ADFEC;
}

.rewards-hub .card {
  flex-direction: row;
}

#sCompPointBalance {
  color: var(--secondary);
}

#offerInfo .modal-dialog {
  max-width: 720px;
  background: var(--tertiary_900);
  border: 1px solid var(--tertiary_700); /* Set a transparent border to create space for the image */
  border-radius: 10px;
}

@-webkit-keyframes colorShift {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes colorShift {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes colorShift {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.offer-container:hover {
  -webkit-animation: colorShift 2s ease infinite;
  -moz-animation: colorShift 2s ease infinite;
  animation: colorShift 2s ease infinite;
}

.offer-img {
  display: flex;
  align-items: center;
  max-width: 145px;
  margin: -20px 10px -20px -12px;
  /* Moves text closer to the viewer for a parallax effect */
}

.offer-img img {
  width: 100%;
}

.offer {
  font-size: 16px;
}

.wager, .wagering-remaining {
  color: #FDF51D;
}

.offer-content {
  min-height: 185px;
}

.offer-content button {
  border: 1px solid var(--tertiary_700);
  background: var(--tertiary_800);
  color: var(--tertiary_100);
  padding: 8px 12px;
  border-radius: 6px;
}

.offer-content p {
  margin-bottom: 10px;
}

.more-info i {
  font-size: 20px;
  padding-left: 10px;
}

/* Filter */
.casino-filter {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap; 
 /* margin-bottom: 50px; */
  padding: 12px 0;
  border-radius: 8px;
  overflow-x: auto; 
  white-space: nowrap;
  scrollbar-color: #070A0D #10161E; /* For Firefox (thumb track) */
}

/* Search input: widest */
.casino-filter .filter-search {
  flex: 2 1 0; 
  min-width: 200px;
}

/* Dropdowns: equal smaller width */
.casino-filter .filter-type,
.casino-filter .filter-sort {
  flex: 1 1 0; 
  min-width: 120px;
}

/* Inputs & Selects */
.casino-filter input,
.casino-filter select {
  padding: 8px 12px;
  border: 1px solid #1D283A;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background-color: #202733;
  color: #FFFFFF;
  transition: border 0.2s, box-shadow 0.2s;
}

/* Focus effect */
.casino-filter input:focus,
.casino-filter select:focus {
    border-color: #FFD700;
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.2);
}

/* Dropdown arrow */
.casino-filter select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23FFFFFF' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.casino-filter::-webkit-scrollbar {
  height: 12px; /* height of horizontal scrollbar */
}

.casino-filter::-webkit-scrollbar-track {
  background: #10161E; /* Track color */
  border-radius: 10px;
}

.casino-filter::-webkit-scrollbar-thumb {
  background: #070A0D; /* Thumb color */
  border-radius: 10px;
}

.cancel-search {
  font-size: 16px;
}
.offer-content {
  min-height: 185px;
}

/* Responsive: stack vertically on mobile */
@media (max-width: 768px) {
  .casino-filter {
    flex-direction: column; /* stack items */
    gap: 10px;
    white-space: normal;
    overflow-x: visible;
  }

  .casino-filter .filter-search,
  .casino-filter .filter-type,
  .casino-filter .filter-sort {
    flex: 1 1 100%;
    min-width: auto;
    width: 100%;
  }
  .offer-container {
    min-height: 110px;
    padding: 10px;
  }
  .offernav .navSwiper {
    padding: 0;
  }
  .offer-img {
    max-width: 80px;
    margin: -5px 5px 0px -5px;
  }
  .bonus-name {
    font-size: 0.8rem;
  }
  .promo-col-name {
    padding-top: 0;
  }
  .topbar {
    gap: 5px;
  }
}

/* filter end */


/* Main banner */

.banner {
  height: auto;
  min-height: 450px;
}


.banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.banner-text {
  z-index: 2; 
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hero {
  position: relative;
  background: url(../img/banner-ladies-1400-sg-1.jpg);
  background-size: contain; 
  /* background-position: center; */
  background-repeat: no-repeat;
  aspect-ratio: 23 / 10;
  margin-bottom: 1rem;
  color: #fff; 
  border-radius: 8px;;

}

.hero-overlay {

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.3); */
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  padding-left: 5%; 


}

.hero-overlay h1 {
   font-size: 9.5rem;
    font-weight: bold;
    margin-bottom: -1rem;
}

.hero-overlay h2 {
    font-size: 2.6rem;
    margin-bottom: 0rem;
}

.hero-content {
  max-width: 500px; 
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

  .banner-slider-section {
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 2rem;
      position: relative;
  }
  .bannerSwiper {
      width: 100%;
      height: auto;
      padding: 0;
  }
  .banner-prev, .banner-next {
      background: rgba(0,0,0,0.2) !important;
      backdrop-filter: blur(4px);
      width: 45px !important;
      height: 45px !important;
      border-radius: 50%;
      color: #fff !important;
      transition: all 0.3s ease;
  }
  .banner-prev:hover, .banner-next:hover {
      background: rgba(0,0,0,0.5) !important;
  }
  .banner-prev::after, .banner-next::after {
      font-size: 20px !important;
  }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -5px;
  }
  .bannerSwiper .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      background: var(--secondary);
      opacity: 0.4;
  }
  .bannerSwiper .swiper-pagination-bullet-active {
      width: 25px;
      border-radius: 5px;
      background: var(--secondary);
      opacity: 1;
  }

  .navSwiper .swiper-pagination {
      position: absolute;
      bottom: 5px !important;
      left: 0;
      width: 100%;
      z-index: 10;
  }

  .navSwiper .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      background: #2ADFEC;
      opacity: 0.3;
  }

  .navSwiper .swiper-pagination-bullet-active {
      background: #2ADFEC;
      opacity: 1;
      width: 20px;
      border-radius: 4px;
  }

/* Main banner end */

.title-highlight {
  color: var(--tertiary);
}

/* multi item carousel start */

#hotslots .item {
    text-align: center;
    margin-right: 15px;
    margin-left: 15px;
    /* margin-bottom: 80px; */
}

.services .owl-nav, #hotslots .owl-dots {
    margin-top: 5px;
    text-align: center;
}


#hotslots .owl-prev {
    position: absolute;
    left: -40px;
    color: #fff;
    /* padding: 20px; */
    top: 40%;
    /* background: #eb1716; */
    border: 2px solid #01b0c2;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
#hotslots .owl-next {
    position: absolute;
    right: -57px;
    /* padding: 20px; */
    color: #fff;
    top: 40%;
    border: 2px solid #01b0c2;
    /* background: #eb1716; */
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

#hotslots .item-details {
    color: #fff;
    display: flex;
    font-size: 14px;
    text-align: left;
    padding-top: 18px;
}


#main {
    transition: margin-left .5s;
    padding: 0px;
    font-family: 'Helvetica-mdcondensed', sans-serif;
}

#dHotSlotsContainer {
    display: none;
}

.main {
    padding: 0 20px;
}

/* multi item carousel end */



/* promotion highlights homepage start */


.promo-card {
  position: relative;
  height: 298px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background-size: contain; 
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  color: #fff;
}

/* Background images */
.promo-card1 {
  background-image: url('/img/winners.png');
}
.promo-card2 {
  background-image: url('/img/add2cart.png');
}


.promo-card .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.3); 
}

/* Card content */
.promo-card .card-content {
  position: relative;
  z-index: 2;
}

.promotions-section {
  margin-top:40px;
  /* padding: 0 0 30px 0; */
  /* border-bottom: 1px solid #262833; */
}

/* Button pinned bottom center */
.promo-card .btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-weight: bold;
  background: var(--primary);
  padding: 5px;
  border: none;
  min-width: 150px;
}

/* Hover effects */
.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}


/* Promotions slider start */


.promotions-section { width: 100%; }

.promotionsSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}

.swiper-horizontal {
  padding: 15px;
}


.promo-card {
  border: 0;
  overflow: hidden;
  background: transparent;
  width: 100%;
  max-width: 100%;
  height: 100%;
  box-shadow: none;
}


.promo-image-wrap {
  position: relative;
  width: 100%;

  max-height: 260px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f1720; 
}


.promo-image-wrap .promo-img {
  width: 100%;
  /* height: 100%; */
  object-fit: contain;  
  object-position: center;
  display: block;
}


.promo-cta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.875rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  z-index: 2;
}


.promo-cta:hover,
.promo-cta:focus {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Navigation buttons style */
.promotions-prev,
.promotions-next {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  /* background: #111827; */
  color: #fff;
  border: 0;
  font-size: 14px;
}

.promotions-prev:hover,
.promotions-next:hover {
  background: var(--primary);
  color: #fff;
}


.promotions-swiper .swiper-slide {
  display: flex;          
  gap: 20px;
}


@media (max-width: 767px) {
  .promotions-swiper .swiper-slide {
    flex-direction: column;
  }

  .hero {
    aspect-ratio: 24 / 6;
  }
}

@media (min-width: 768px) {
  .promo-image-wrap {         
    max-height: none;
        height: auto; }
  .main-content {
    min-height: 450px;
  }
}
@media (min-width: 1200px) {
  /* .promo-image-wrap { max-height: 380px; } */
  .sidebar.collapsed ~ .content .promotionsSwiper .promo-image-wrap { max-height: 420px; }
}

/* Promotions slider end */
@media (max-width: 991px) {
  .main-content, .sidebar.collapsed ~ #content .main-content {
    margin-left: 0;
  }

  .offernav .navSwiper {
    padding: 0;
  }
}

@media (max-width: 992px) {
  .promo-card {
    /* height: 250px; */
    padding: 15px;
    background-size: contain;
  }
}

@media (max-width: 576px) {
  .navbar-brand {
    margin-right: 5px;
  }
  .navbar-brand.abs  {
    max-width: 80px;
  }
  .promo-card {
    /* height: 200px; */
    padding: 12px;
    background-size: contain;
    background-position: center top;
  }
  .promo-card .btn {
    font-size: 0.75rem;
    padding: 4px 10px;
    bottom: 6px;
  }

  .promo-image-wrap {
   
    max-height: none;
    display: inline-table;
  
  }
  .topbar {
    
      padding: 0;
  }

  .topbar i {
    padding: 8px;
  }

  .topbar button {
      margin-left: 10px;
  }

  .topbar .profile-btn {
    margin-left: 0;
  }
}


/* promotion highlights home end */

.promotions-tabs {
  display: flex;             
  /* justify-content: space-between;  */
  flex-wrap: wrap;            
  border-bottom: none;        
  width: 100%;
  margin-bottom: 20px;
  gap: 10px;
}

.promotions-tabs .nav-item {
     /* flex: 1 1 auto;            */
  text-align: center;
    position: relative;
}

.promotions-tabs .nav-link  {
  display: block;
  font-size: 16px;
  background: linear-gradient(90deg, #1C242F, #193640);
  background: #2C3748;
  color: #fff;
  /* border: 1px solid #2ADFEC; */
  border: none;
  border-radius: 8px;
  transition: 0.3s ease;
}

.promotions-tabs .nav-link.active {
  background-color: #2ADFEC;  
  color: #000;
}

.promotions-tabs .nav-link:hover {
  background-color: #2ADFEC;  
  color: #000;
}

/* Mobile: stack tabs vertically */
@media (max-width: 576px) {
  .promotions-tabs {
    flex-direction: column;
  }
  .promotions-tabs .nav-item {
    margin: 0px;
  }
}

/* progressive jackpot start */

.progressives {
  background: 
    linear-gradient(
    120deg, var(--tertiary_700), var(--tertiary_900), var(--primary-800)
    );
  border-radius: 8px;
}

.pro {
  max-width: 550px;
}

.prog-game-amt {
    color: #ffea00;
    font-size: 40px;
    font-weight: bold;
    /* width: fit-content; */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 576px) {
  .prog-game-amt {
    font-size: 32px;
  }
}

/* progressive jackpot end */


.content {
  color: #a9adb1;
    font-size: 1rem;
}

.responsiblegaming h4 {
  color: #2ADFEC;
}

.responsiblegaming a:hover {
  color:var(--primary);
      text-decoration: underline;
}


.contactus h4 {
    color: #2ADFEC;
}

.contactus a:hover {
  color:var(--primary);
      text-decoration: underline;
}


/* banking page :start */

.banking p {
  color: #a9adb1;
  font-size: 0.85rem;
}

.banking h4 {
    color: #fff;
  
}


.banking a:hover {
  color:var(--primary);
      text-decoration: underline;
}

.banking table {
  border: 1px solid #1c1c1c;
}

.banking table th {
  padding: 10px;
}

.banking table td {
  padding: 10px;
  border-bottom: 1px solid #1c1c1c;
}

.banking .invert {
  filter: invert();
}

.bankbot {
  color: #a9adb1;
    font-size: 1rem;
}

/*table start*/
table {
    width: 100%;
    margin: 20px 0;
}

td {
  border-bottom: 2px solid #050F19;
  padding: 5px 10px;
  vertical-align: top;
  text-align: left;
  width: 25%;
  color: #9EA3A6;
}

#high-rollers td {
  width: 20%;
}

.contentcontainer.banking th {
    text-align: left;
}

th {
    font-size: 16px;
    font-weight: normal;
    background: #01b0c2;
    /* border-bottom: 1px solid #007bff; */
    color: #000;
    padding: 5px;
    font-weight: bold;
    text-align: left;
    /* width: 25%; */
}

/*table end*/


/* banking page end */

/* faqs accordion :start */

.faqs h4 {
  color: #2ADFEC;
}

.accordion {
color: #a9adb1;
    font-size: 1rem;  
}

.accordion-button {
    background-color: #202733;
}

.accordion-button:active {
    background-color: #2C3748;
}

.accordion-body {
  background: #2C3748;
  color:#fff;
}


.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background-color: #008c93;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: #FFDF0C;
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: #2C3748;
}

.accordion-button.collapsed::active {
  background-color: #2C3748;
}


.accordion-flush>.accordion-item>.accordion-header .accordion-button, .accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed {
  color:#fff;

}

.accordion-item {
  background-color: #131a1a;
}

/* faqs accordion end */

/* Winners Feed Section */
/* Tabs */
.winners-feed-section {
  color: #fff;
  margin-top: 60px;
  font-family: sans-serif;
  padding: 0 0 30px 0;
    border-bottom: 1px solid #262833;
}

.winners-feed-tabs {
  display: flex;
  gap: 10px;
}

.winners-feed-tab {
  background: var(--tertiary_800);
  border: 1px solid var(--tertiary_700);
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
}

.winners-feed-tab.active {
  background: #2adfec;
  color: #111;
}

.winners-feed-tables {
  margin-top: 15px;
}

  .winners-feed-table-container {
  max-height: 350px; 
  overflow-y: auto;
  overflow-x: hidden; 
}

.winners-feed-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.winners-feed-table th {
  background: #00000080;
  color: #fff;
  padding: 10px;
}

.winners-feed-table td {
  padding: 10px;
  vertical-align: middle;
}

.winners-feed-table tbody tr:nth-child(even) {
  background: rgba(42, 223, 236, 0.1);
}

.winners-feed-table tbody tr:nth-child(odd) {
  background: rgba(42, 223, 236, 0.05);
}

.winners-feed-table tbody tr:hover {
  background: rgba(42, 223, 236, 0.3);
  cursor: pointer;
}

  .payout, .game, td.payout, td.game {
    font-weight: 600;
  }

  .payout, td.payout {
    color: greenyellow;
  }


@media (max-width: 768px) {
  .winners-feed-table th, .winners-feed-table td {
    font-size: 0.85rem;
    padding: 6px;
  }
  .winners-feed-tab {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

    .winners-feed-table th,
  .winners-feed-table td {
    font-size: 0.85rem;
    padding: 6px;
  }

  .navbar-brand {
    width: 100px;
  }
  .hero {
    background-size: contain;
    background-repeat: none;
    aspect-ratio: 21 / 9;
  }

  .primary-table-row, .details-row {
    padding: 2px 5px;
  }

  .payout, .game, td.payout, td.game {
    font-size: 16px;
  }

  .payout, td.payout {
    text-align: right;
    padding: 3px 0;
  }

  .game, td.game {
    color: white;
  }

  .offer-content {
    min-height: 110px;
  }
  .details-row {
    font-size: 14px;
    color: #00e5ff;
  }

  .details-row .player {
    padding-left: 36px;
  }

  .details-row .player .date {
    margin-left: 10px;
    color: #6591a5;
  }

  .details-row .wager {
    font-size: 14px;
    color: #6591a5;
    text-align: right;
  }
  .swiper-horizontal {
    padding: 0;
  }
}

/* @media (orientation: portrait) {
  .winners-feed-section {
    display: none; 
  }
} */

/* Winners Feed Section end */



/* Table icons */
/* ⚡ Bet Amount Icon */
.icon-bet {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2adfec;
    color: black;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}



/* 💰 Payout Icon */
.icon-payout {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at top, #ffca28 0%, #ff9800 85%);
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.8), inset 0 0 4px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* 👤 User Avatar Frame */
.icon-user {
 width: 27px;
    height: 27px;
    border: 2px solid #00e5ff;
    border-radius: 50%;
    padding: 2px;
    /* background: conic-gradient(from 180deg, #00e5ff, #00c4ff, #00e5ff); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Base icon container */
.icon-game {
  width: 30px;
  height: 30px;
  border: 2px solid #2ADFEC; 
  border-radius: 50%;
   padding: 2px;
 
  display: inline-flex;
  align-items: center;
  justify-content: center;
 
  overflow: hidden;
}

.text-tertiary {
  color: #6C6F7B;
}

/* Table icons end */

/* Rewards */

.comp-points {
  height: 100%;
}

.tertiary-card {
  background-color: var(--tertiary_900);
  border: 1px solid var(--tertiary_700);
  padding: 1rem;
}

.comp-points, .cash-value-container {
  background-color: var(--tertiary_900);
  border: 1px solid var(--tertiary_700);
  border-radius: 20px;
}

.rewards-hub .card {
  background:none;
  border: none;
  gap: 15px;
}

.rewards-hub .card h4 {
  font-weight: 400;
}

.rewards-hub .card button {
  font-size: 1rem;
}

.cash-value-container {
  border: 1px solid var(--tertiary_700);
}

/* loyalty :start */

.item-details {
  background-color: transparent;
  color: #fff;
  padding: 15px;
  border-radius: 0 0 12px 12px;
}

.tier-card {
  text-align: center;
  background: none;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

.tier-card img {
  width: 100%;
  height: 220px;
  object-fit: contain;
}

.tier-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.btn-primary {
  background-color: var(--primary);
  border: none;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #C704C2;
}

.btn-secondary {
  background-color: #C8B702;
  border: none;
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: #C8B702;
  color:#132332;
}

.close-bottom-btn {
  background-color: #ff7b00;
  border: none;
  color: #fff;
  padding: 10px 30px;
  border-radius: 30px;
  font-weight: 600;
  transition: background 0.3s ease;
}


.close-bottom-btn:hover {
  background-color: #ffb800;
}

.loyaltySwiper {
  padding: 25px 0;
}

.loyaltySwiper .swiper-slide {
  display: flex;
  justify-content: center;
}

@media (max-width: 991px ) {
  /* .rewards-hub .card {
    margin-bottom: 15px;
  }

  .rewards-hub .promo-flex-row {
    flex-direction: column;
  }

  .promo-flex-row .promo-col-action {
    align-self: flex-end;
    margin-right: 0;
  } */
}

@media (max-width: 768px) {
  .tier-card img {
    height: 180px;
  }
  .rewards-hub .card {
    flex-direction: column;
    gap: 10px;
  }
}

/* 
       CASHIER SECTION ONLY
       =========================== */ 
    .cashier-section {
      /* background-color: #10161E; */
      color: #fff;
      font-family: 'Poppins', sans-serif;
    }

    .cashier-section .cashier-container {
      max-width: 1200px;
      margin: 0 auto;
      background: linear-gradient(160deg, #1C242F 0%, #10161E 100%);
      /* border: 1px solid #2ADFEC; */
      border-radius: 12px;
      padding: 30px;
    }

    #promotionsList {
      max-height: 450px;
      /* overflow-y: auto; */
      padding-right: 5px;
    }

    #promotionsList::-webkit-scrollbar {
      width: 6px;
    }

    #promotionsList::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
    }

    #promotionsList::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 10px;
    }

    .promocodesec .login {
      padding: 8px;
      background: var(--secondary);
      color: var(--tertiary_900);
      font-weight: 400;
    }

    /* Tabs (top buttons) */
    .cashier-section .nav-tabs {
      border-bottom: none;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size:16px;
    }

    .cashier-section .nav-item {
      flex: 1 1 24%;
      text-align: center;
      position: relative;
    }

    .cashier-section .nav-link {
      /* background: linear-gradient(90deg, #1C242F, #193640); */
      background:#2C3748;
      color: #fff;
      /* border: 1px solid #2ADFEC; */
      border:none;
      border-radius: 8px;
      margin: 5px;
      transition: 0.3s ease;
    }

    .cashier-section .nav-link:hover,
    .cashier-section .nav-link.active {
      background: #2ADFEC;
      color: #000;
      border:none;
    }

    /* Dropdown menu style */
    .cashier-section .dropdown-menu {
      background: #1C242F;
      border: 1px solid #2ADFEC;
      border-radius: 8px;
      margin-top: 5px;
      width: 100%;
    }

    .cashier-section .dropdown-item.active {
      background:#2ADFEC;
      color: #000;
    }


    .cashier-section .dropdown-item

    .cashier-section .dropdown-item:hover {
      background: #2ADFEC;
      color: #000;
    }

    /* Content area */
    .cashier-section .tab-content {
      margin-top: 30px;
    }

    .cashier-section .section-header {
      font-size: 1.5rem;
      color: var(--tertiary_100);
      margin-bottom: 20px;
    }

    .cashier-section .casino-input {
      background-color: #0E141B;
      border: 1px solid #2ADFEC;
      color: #fff;
      border-radius: 6px;
      width: 100%;
    }

    .cashier-section .casino-input:focus {
      border-color: #FFD700;
      box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.2);
    }

    .cashier-section .btn-gold {
     background:var(--primary);
      color: #fff;
      border: none;
      border-radius: 6px;
      transition: all 0.3s ease;
      width: 100%;
    }

    .cashier-section .btn-gold:hover {
      background:#af00af;
      transform: translateY(-2px);
    }

    /* Two-column layout */
    .cashier-section .cashier-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .cashier-section .cashier-col {
      flex: 1 1 48%;
      background-color: rgba(16, 22, 30, 0.7);
      /* border: 1px solid #2ADFEC; */
            border: 1px solid #262833;
      border-radius: 10px;
      padding: 20px;
    }

    .form-check-input:checked {
          background-color: var(--primary);
    border-color: var(--primary);
    }

    @media (max-width: 768px) {
      .cashier-section .cashier-col {
        flex: 1 1 100%;
      }
    }

/* cashier section end */


/* BackOffice Promotions / Bonuses :start */
.promo-col-name {
  flex: 1 1 auto;
  padding: 10px;
  display: flex;
  align-items: center;
}

.promo-info-wrapper {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
}

.bonus-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.wagering-remaining {
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 2px;
}

.promo-col-action {
  flex: 0 0 auto;
  padding: 0 5px;
}

.promo-col-info {
  display: none;
  flex: 0 0 auto;
  padding: 0 10px;
}

.claim-btn,
.unclaim-btn {
  border: 1px solid var(--tertiary_700);
  background: var(--tertiary_800);
  color: var(--tertiary_100);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 90px;
  transition: all 0.2s;
}

.claim-btn:hover,
.unclaim-btn:hover {
  border: none;
  background: var(--tertiary_500);
  color: var(--tertiary_900);
}

.claim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
}

.active-promo {
  border: 1px solid #FFD700;
  border-radius: 6px;
  /* border-bottom: none; */
  box-shadow: 0 -5px 15px rgba(255, 215, 0, 0.2), 5px 0 15px rgba(255, 215, 0, 0.2), -5px 0 15px rgba(255, 215, 0, 0.2);
  background: linear-gradient(90deg, #181D26, #2C2410);
  position: relative;
  overflow: hidden;
  max-width: 462px;
}

.active-promo .promo-col-action button {
  background: var(--secondary);
  border: none;
}

.active-promo .promo-col-info i {
  color: var(--secondary);
}


.promo-details-content {
  max-height: 250px;
  overflow-y: auto;
}

.promo-details-content::-webkit-scrollbar {
  width: 4px;
}

.promo-details-content::-webkit-scrollbar-track {
  background: transparent;
}

.promo-details-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.active-promo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  animation: promo-shine 3s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes promo-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.bonus-info {
  color: #2ADFEC;
  cursor: pointer;
  font-size: 16px;
}

.bonus-info:hover {
  color: #FFD700;
}

/* .cashier-section .btn-gold {
  background: linear-gradient(90deg, #FFD700, #C49B0B);
  color: #000;
  border: none;
  border-radius: 6px;
}

.cashier-section .btn-gold:hover {
  background: linear-gradient(90deg, #FFE55C, #E8B300);
} */

.btn-secondary {
background: transparent;
    border: 1px solid #2ADFEC;
    color: #fff;
}

.btn-secondary:hover {
  background: #2ADFEC;
  color: #000;
}

.promo-input-group {
  max-width: 400px;
  position: relative;
}

.promo-clear {
  position: absolute;
  left: 12px;
      top: 10px;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}
.promo-clear:hover {
  color: #FFD700;
}

.promo-input {
  background-color: #0E141B;
  border: 1px solid #2ADFEC;
  color: #FFD700;
  border-radius: 6px;
}
.promo-input:focus {
  box-shadow: none;
  border-color: #FFD700;
}

#promotionsList .promo-info-wrapper {
  max-width: 275px;
}

/* BackOffice Promotions / Bonuses */


/* ============ PROFILE SECTION ONLY ============ */

h1.profile-title {
  font-size: 1.75rem;
  padding-bottom: 5px;
  color: var(--tertiary_400);
}

p.profile-subtitle {
  font-size: 0.85rem;
  padding-bottom: 30px;
}

.profile-section .profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid #2ADFEC;
  border-radius: 50px;
  padding: 5px 12px;
  background: transparent;
  color: #2ADFEC;
  transition: all 0.3s ease;
}

.profile-section .profile-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.profile-section .profile-pic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #2ADFEC;
  object-fit: cover;
}

.profile-section .profile-pic-lg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #2ADFEC;
  object-fit: cover;
}

.profile-section .dropdown-menu {
  background-color: #1C242F;
  border: 1px solid #2ADFEC;
  min-width: 220px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(42, 223, 236, 0.3);
  animation: fadeIn 0.2s ease-in-out;
}

.profile-section .dropdown-item {
  color: #fff;
  transition: background 0.3s;
}

.profile-section .dropdown-item:hover {
  background-color: rgba(42, 223, 236, 0.2);
}

.profile-section .dropdown-header {
  color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ============ PROFILE SECTION ONLY END ============ */

/* testimonials start */

.testimonials-section {
  /* background: #121420; */
  color: #fff;
  padding: 0 0 30px 0;
  border-bottom: 1px solid #262833;
}

.testimonial-card {
  background: var(--tertiary_900);
  border: 1px solid var(--tertiary_800);
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  color: #fff;
  text-align: left;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.6;
}

.testimonial-author {
  font-weight: 600;
  color:#2ADFEC;
}

.testimonial-role {
  color: #565965;
}

/* Hover/active card focus effect */
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

/* Center slide enlarged */
.testimonialSwiper .swiper-slide {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: scale(0.9);
  opacity: 0.7;
}

.testimonialSwiper .swiper-slide-active {
  transform: scale(1.01);
  opacity: 1;
  z-index: 2;
}

/* Swiper navigation buttons */
.testimonial-prev,
.testimonial-next {
  /* border-radius: 50%; */
    width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.testimonial-prev:hover,
.testimonial-next:hover {
  background-color: var(--primary);
  color: #fff;
}

.circle {
   background-color:#28303de6;
   color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
  .testimonial-card {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .testimonial-card {
    padding: 1.25rem;
  }
  .bonus-name {
    font-size: 0.9rem;
    line-height: 1.1rem;
  }
  .promo-col-name {
    padding: 0
  }
}

/* testimonials end */




/* promotions page start */

    /* Tabs */
      .promotions .tab-buttons {
      display: flex;
      flex-wrap: wrap;
    }

      .promotions .tab-buttons .nav-link {
      flex: 1;
      text-align: center;
      background: #1a1c27;
      border: 1px solid #2ADFEC;
      color: #fff;
      border-radius: 0;
      font-weight: 500;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }

      .promotions .tab-buttons .nav-link.active,
     .promotions .tab-buttons .nav-link:hover {
      background: #2ADFEC;
      color: #000;
    }

    @media (max-width: 767px) {
        .promotions .tab-buttons .nav-link {
        flex: 100%;
      }
      .winners-feed-table td {
        width: 25%;
      }

      .winners-feed-table td:first-child {
        width: 50%;
      }
    }

    /* Content Area */
      .promotions .tab-content-area {
      background: #121420;
      border: 1px solid #2ADFEC;
      border-top: none;
      padding: 30px;
      border-radius: 0 0 10px 10px;
      position: relative;
    }

    /* Swiper layout */
    .promotions-swiper {
      position: relative;
      padding-top: 40px;
    }

    .promotions-swiper .swiper-slide {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .promotion-block {
      display: flex;
      background: var(--tertiary_900);
      border: 1px solid var(--tertiary_700);
      border-radius: 15px;
      overflow: hidden;
      width: 50%;
      box-shadow: 0 0 10px rgba(0,0,0,0.4);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .promotion-block img {
      width: 30%;
      object-fit: cover;
      object-position: top;
    }

    .promotion-content {
      width: 70%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .promotion-content h4 {
      font-weight: 600;
      color: #2ADFEC;
    }

    .promotion-content p {
      color: #ccc;
      font-size: 0.95rem;
    }

    .promo-text-highlight {
      color: var(--primary-400);
    }

    .promotion-buttons .btn {
      border-radius: 6px;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 0.9rem;
      padding: 6px 18px;
    }

    .promotion-buttons .btn-primary, .mail-sub .btn-primary {
      background: var(--primary);
    color: #fff;
      border: none;
    }

   .promotion-buttons .btn-primary:hover, .mail-sub .btn-primary:hover {
      background: #af00af;
    color: #fff;
      border: none;
    }


    .promotion-buttons .btn-outline-secondary, .mail-sub .btn-outline-secondary, .pn-sub .btn-outline-secondary {
      border: 1px solid var(--tertiary);
      color: #2ADFEC;
      background: transparent;
    }

    .promotion-buttons .btn-outline-secondary:hover, .mail-sub .btn-outline-secondary:hover, .pn-sub .btn-outline-secondary:hover {
      background: #2ADFEC;
      color: #000;
    }

    .mail-sub .btn-outline-secondary, .pn-sub .btn-outline-secondary {
      height: 34px;
      min-width: 234px;
    }

        /* Swiper top controls */
      .promotion .swiper-controls {
      position: absolute;
      top: 10px;
      right: 20px;
      z-index: 10;
      display: flex;
      gap: 10px;
    }

      .promotion .swiper-controls button {
      background: #1a1c27;
      border: 1px solid #2ADFEC;
      color: #2ADFEC;
      border-radius: 10px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

      .promotion .swiper-controls button:hover {
      background: #2ADFEC;
      color: #000;
    }

    /* deals */
    .deal-tabs .nav-link {
      background: var(--tertiary_900);
      border: 1px solid var(--tertiary_700);
      color: var(--tertiary_600);
    }

    /* Responsive adjustments */


  @media (max-width: 992px) {
      .promotion-block {
        width: 100%;
        /* flex-direction: column; */
      }
  }


    @media (max-width: 767px) {

    }

/* promotions page end */

/* promotions modals :start */

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--tertiary_900);
    background-clip: padding-box;
    border: 1px solid var(--tertiary_700);
    border-radius: 0.3rem;
    outline: 0;
}

.modal-body h5 {
    color: #01b0c2; 
}

.modal-body {
  color:#bec2c5;
  background: transparent
}


.modal-body ul {
    color: #bec2c5;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.modal-footer {
  border-top:none;
}

.modal-footer button {
  background: var(--tertiary_800);
  color: var(--tertiary_400);
}

.modal-title {
  color:#2ADFEC;
}

.text-pink {
  color: var(--primary);
}
.text-pink:hover {
  color: #af00af;
}

/* .custom-close-bg {
  background-color: #ff69b4; 
  border-radius: 50%;
  opacity: 1; 
  padding: 6px;
}
.custom-close-bg:hover {
  background-color: #ff85c1;
} */

/* promotions modal end */

/* Bank block */
.bank-block {
/* background: rgba(40, 48, 61, 0.3); */
  border-radius: 15px;
  height: 60px;
  max-width: 150px;
  width:100%;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: grab;
  flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
}

.bank-block:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.bank-img {
    max-height: 30px;
    max-width: 110px;
    width: 100%;
    object-fit: contain;
}

.bank-img.invert {
  filter: invert(1);
}

/* Bank block end */





/* promotions page blocks start */


.promotions .nav-link:hover, .promotions .nav-link.active {
    background: #2ADFEC;
    color: #000;
    border: none;
}

.promotions .nav-item {
    flex: 1 1 24%;
    text-align: center;
    position: relative;
}

.promotions .nav-tabs {
    border-bottom: none;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 16px;
}

.promotions .nav-link {
    background: linear-gradient(90deg, #1C242F, #193640);
    background: #2C3748;
    color: #fff;
    /* border: 1px solid #2ADFEC; */
    border: none;
    border-radius: 8px;
    margin: 5px;
    transition: 0.3s 
ease;
}

.promosection2 {
  padding-top: 40px;
}


.promosection2 p {
    color: #a9adb1;
    font-size: 0.95rem;
}

.promosection2-content {
color: #a9adb1;
    font-size: 1rem;
}

.Providers {
  margin-right: 8px;
}

/* promotions page block end */


/* game provider swiper slider start */

/* Logo block */
.logo-block {
  background: var(--tertiary_900);
  border: 1px solid var(--tertiary_700);
  border-radius: 15px;
  height: 60px;
  max-width: 200px;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: grab;
  flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
}

.logo-block:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}




.logo-img {
  max-height: 50px;
  max-width: 130px;
  object-fit: contain;
}

/* Swiper navigation buttons */
.logo-prev,
.logo-next {
  /* border-radius: 50%; */
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.logo-prev:hover,
.logo-next:hover {
  background-color: var(--primary);
  color: #fff;
}

.circle {
   background-color:#28303de6;
   color: #fff;
}

/* game provider swiper slider end */

.footer {
  background: rgba(0, 0, 0, 0.5);
}

footer a:hover {
  color: var(--primary);
  text-decoration: underline;
}

footer img {
  max-height: 70px;
  width: auto;
}

.footer {
 color: #6c757d;
background: rgba(0, 0, 0, 0.5);
}

.footermenu li a {
  text-decoration: none;
  color:#6c757d;
  font-size: 16px;
}

.footermenu li a:hover {
  text-decoration: none;
  color:#2ADFEC;
}

.bottom-menu {
  border-radius: 10px;
  border: 1px solid var(--tertiary_700);
  background-color: var(--tertiary_900);
}

.bottom-menu i {
  font-size: 24px;
}

.bottom-menu .nav-item {
  padding: 5px 10px 5px;
}

.bottom-menu .nav-link {
  text-align: center;
  color: var(--tertiary_600);
  position: relative;
  font-size: 12px;
}

.bottom-menu .nav-link svg {
  max-width: 30px;
  fill: var(--tertiary_600);
}


/* .bottom-menu .nav-item:before {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -2px;
  left: 50%;
  border-radius: 50%;
  background-color: var(--tertiary_500);
  text-shadow: 0px 0px 5px var(--tertiary_500), 0px 0px 6px var(--tertiary_700), 0px 0px 10px var(--tertiary_800);
} */

.bottom-menu .deposit {
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--primary-500), var(--primary-950));
  border: 1px solid var(--primary-700);
  border-radius: 50%;
  margin: -4px;
  color: white;
}

.bottom-menu .nav-link.active {
  color: var(--tertiary_300);
  text-shadow: 0px 0px 5px var(--tertiary_500), 0px 0px 6px var(--tertiary_700), 0px 0px 10px var(--tertiary_800);
}

.bottom-menu .nav-link.active svg {
  fill: var(--tertiary_300);
}

    /* Footer */
    /* footer {
      padding: 2rem 1rem;
      text-align: center;
      font-size: 0.9rem;
      color: #888;
    } */

    /* LOADERS */
    .fade-spinnner-loader {
        width: 50px;
        padding: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #2adfec;
        --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
        -webkit-mask: var(--_m);
        mask: var(--_m);
        -webkit-mask-composite: source-out;
        mask-composite: subtract;
        animation: l3 1s infinite linear;
    }
    @keyframes l3 {to{transform: rotate(1turn)}}


    /* cards animation */

.stack {
  --stack-dur: 1.8s;
  --stack-delay: 0.03;
  --stack-spacing: 20%;
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
}
.stack__card {
  aspect-ratio: 1;
  position: absolute;
  inset: 0;
  top: var(--stack-spacing);
  margin: auto;
  width: 70%;
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}
.stack__card::before {
  animation: card var(--stack-dur) infinite;
  background-color: var(--primary100);
  border-radius: 7.5%;
  border: 1px solid #2ADFEC;
  box-shadow: -0.5em 0.5em 1.5em hsl(var(--hue), 90%, 15%, 0.1);
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}
.stack__card:nth-child(2) {
  top: 0;
}
.stack__card:nth-child(2)::before {
  animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay)));
  background-color: var(--primary100);
}
.stack__card:nth-child(3) {
  top: calc(var(--stack-spacing) * -1);
}
.stack__card:nth-child(3)::before {
  animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay) * 2));
  background-color: linear-gradient(nulldeg,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0L1.03553 6.96447C0.372492 7.62751 0 8.52678 0 9.46447V9.54584C0 11.4535 1.54648 13 3.45416 13C4.1361 13 4.80278 12.7981 5.37019 12.4199L7.125 11.25L6 15V16H10V15L8.875 11.25L10.6298 12.4199C11.1972 12.7981 11.8639 13 12.5458 13C14.4535 13 16 11.4535 16 9.54584V9.46447C16 8.52678 15.6275 7.62751 14.9645 6.96447L8 0Z' fill='hsl(304, 100%, 55%)' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45% 45%;
}

/* Animations */
@keyframes card {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(0);
  }
  11% {
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    opacity: 1;
    transform: translateZ(0.125em);
  }
  34% {
    animation-timing-function: steps(1);
    opacity: 0;
    transform: translateZ(-8em);
  }
  48% {
    animation-timing-function: linear;
    opacity: 0;
    transform: translateZ(8em);
  }
  57% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 1;
    transform: translateZ(0);
  }
  61% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(-1.8em);
  }
  74% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(0.6em);
  }
  87% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(-0.2em);
  }
}

        /* Animations */
        @keyframes hamster {
        from, to {
            transform: rotate(4deg) translate(-0.8em,1.85em);
        }

        50% {
            transform: rotate(0) translate(-0.8em,1.85em);
        }
        }

        @keyframes hamsterHead {
        from, 25%, 50%, 75%, to {
            transform: rotate(0);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(8deg);
        }
        }

        @keyframes hamsterEye {
        from, 90%, to {
            transform: scaleY(1);
        }

        95% {
            transform: scaleY(0);
        }
        }

        @keyframes hamsterEar {
        from, 25%, 50%, 75%, to {
            transform: rotate(0);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(12deg);
        }
        }

        @keyframes hamsterBody {
        from, 25%, 50%, 75%, to {
            transform: rotate(0);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(-2deg);
        }
        }

        @keyframes hamsterFRLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(50deg) translateZ(-1px);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(-30deg) translateZ(-1px);
        }
        }

        @keyframes hamsterFLLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(-30deg);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(50deg);
        }
        }

        @keyframes hamsterBRLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(-60deg) translateZ(-1px);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(20deg) translateZ(-1px);
        }
        }

        @keyframes hamsterBLLimb {
        from, 25%, 50%, 75%, to {
            transform: rotate(20deg);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(-60deg);
        }
        }

        @keyframes hamsterTail {
        from, 25%, 50%, 75%, to {
            transform: rotate(30deg) translateZ(-1px);
        }

        12.5%, 37.5%, 62.5%, 87.5% {
            transform: rotate(10deg) translateZ(-1px);
        }
        }

        @keyframes spoke {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(-1turn);
        }
        }
    /* LOADER */

@media (max-width: 992px) {
  .main-content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
    background-position: center right;
  }
  .hero-overlay h1 {
    font-size: 5rem;
  }

  .hero-overlay h2 {
    font-size: 2rem;
    margin-bottom: 0rem;
  }
  .main-content {
    padding: 10px;   
  }

  .btn-main {
    font-size: 2.4em;
    padding: 0 20px 5px;
  }
  .promosection2 {
    padding-top: 20px;
  }
  .promo-info-wrapper {
    width: 210px;
    min-height: 77px;
  }
}

  .banking img {
    max-width:35px;
    padding-right: 5px;
  }

  @media (max-width: 576px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  th {
      font-size:14px;
    
  }

    .td {
      padding: 5px;
    
  }

  .banking td {
    padding: 5px;
    font-size: 12px;
  }

  .my-account .modal-body {
    padding: 0;
  }
}

/* Slide-up Cashier Panel */
.cashier-slide-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    background: rgba(16, 22, 30, 0.98);
    backdrop-filter: blur(15px);
    z-index: 2000;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(42, 223, 236, 0.3);
    display: flex;
    flex-direction: column;
}

.cashier-slide-panel.open {
    transform: translateY(0);
}

.cashier-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: linear-gradient(90deg, #1C242F, #10161E);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cashier-panel-header h5 {
    color: #2ADFEC;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cashier-panel-body {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

#cashier-iframe {
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#cashier-iframe.loaded {
    opacity: 1;
}

.cashier-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

body.cashier-open {
    overflow: hidden !important;
}

/* Slide-up Game Panel */
.game-slide-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 2001;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.game-slide-panel.open {
    transform: translateY(0);
}

.game-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #111;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.game-panel-header h5 {
    color: #2ADFEC;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.game-panel-body {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

#game-iframe {
    width: 100%;
    /* height: 100%; */
    height: 95vh;
    border: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#game-iframe.loaded {
    opacity: 1;
}

.game-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

body.game-open {
    overflow: hidden !important;
}


/* --- Deposit Screen Redesign --- */
.deposit-ui-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.payment-methods-header {
    background: linear-gradient(160deg, #1C242F 0%, #10161E 100%);
    border: 1px solid rgba(42, 223, 236, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.payment-methods-header:hover {
    border-color: #2ADFEC;
    background: linear-gradient(160deg, #232d3a 0%, #151d27 100%);
}

.payment-selection-menu {
    background: #141821;
    border: 1px solid rgba(254, 0, 254, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 100;
}

.deposit-category-pills .nav-link {
    color: #888;
    background: transparent;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 8px 25px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.deposit-category-pills .nav-link.active {
    color: #FE00FE !important;
    background: transparent !important;
    border-bottom: 3px solid #FE00FE;
    box-shadow: none !important;
}


.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.payment-method-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.85rem;
}

.payment-method-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #2ADFEC;
}

.payment-method-item.active {
    background: #fff;
    color: #000;
    border-color: #FE00FE;
    box-shadow: 0 0 15px rgba(254, 0, 254, 0.3);
}

.payment-method-item img {
    height: 24px;
    object-fit: contain;
}

.card-mockup {
    background: linear-gradient(135deg, #1C242F 0%, #0A0F14 100%);
    border: 1px solid rgba(254, 0, 254, 0.2);
}

.deposit-line-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #2ADFEC !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 5px 0 !important;
    font-size: 1.1rem;
}

.deposit-line-input:focus {
    border-bottom-color: #FE00FE !important;
    box-shadow: none !important;
}

.btn-amount {
    background: transparent;
    border: 1px solid #2ADFEC;
    color: #fff;
    border-radius: 50px;
    padding: 8px 18px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.btn-amount:hover {
    border-color: #FE00FE;
    color: #FE00FE;
}

.btn-amount.active {
    background: #2ADFEC;
    border-color: #2ADFEC;
    color: #000;
    box-shadow: 0 0 10px rgba(42, 223, 236, 0.4);
}

.amount-entry-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.display-amount {
    font-size: 3.5rem;
    color: #2ADFEC !important;
}

.divider-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
}

.crypto-info-card {
    background: linear-gradient(135deg, #1C242F 0%, #0A0F14 100%);
    border: 1px solid rgba(254, 0, 254, 0.2);
}

.x-small {
    font-size: 0.7rem;
}

#cryptoAddress {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    word-break: break-all;
}

.qr-toggle .fas {
    transition: transform 0.3s ease;
}

.qr-toggle.open .fas {
    transform: rotate(180deg);
}

/* --- End Deposit Screen Redesign --- */

/* --- Integrated Password Strength Indicator --- */
.password-field-wrapper {
    position: relative;
}

.password-strength-bar-container {
    position: absolute;
    bottom: 1px;
    left: 2px;
    right: 2px;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.password-strength-label {
    font-size: 0.7rem;
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.bg-strength-none { background-color: transparent; }
.bg-strength-weak { background-color: #ff4d4d; }
.bg-strength-fair { background-color: #ffcc00; }
.bg-strength-good { background-color: #1cc88a; }
.bg-strength-strong { background-color: #2ADFEC; }

.text-strength-none { color: #888; }
.text-strength-weak { color: #ff4d4d; }
.text-strength-fair { color: #ffcc00; }
.text-strength-good { color: #1cc88a; }
.text-strength-strong { color: #2ADFEC; }

/* Search Overlay Styles */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background-color: transparent;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

.search-overlay.show {
    background-color: var(--tertiary_900);
    backdrop-filter: blur(20px);
    pointer-events: auto;
    visibility: visible;
}

.search-overlay-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
}

.search-overlay-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 1200px;
    width: 100%;
    padding-top: 40px;
}

.search-overlay.show .search-overlay-content {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .search-overlay-content {
        padding-top: 20px;
    }
}

.btn-close-search {
    position: absolute;
    top: 10px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #8A8A9B;
    cursor: pointer;
    z-index: 1060;
    padding: 0;
}

.btn-close-search:hover {
    color: var(--tertiary);
}

.close-text {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-close-search:hover .close-text {
    opacity: 1;
}

.close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #333;
    background-color: rgba(18, 18, 20, 0.5);
    transition: border-color 0.3s ease;
}

.btn-close-search:hover .close-icon {
    border-color: var(--tertiary);
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(to right, rgba(0, 183, 255, 0.3), rgba(37, 99, 235, 0.3));
    border-radius: 12px;
    filter: blur(8px);
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.search-input-wrapper:hover .search-input-glow {
    opacity: 1;
}

.search-input-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 72px;
    background-color: var(--tertiary_950);
    border: 1px solid var(--tertiary_700);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

@media (max-width: 768px) {
    .search-input-inner {
        height: 56px;
    }
}

.search-input-inner:focus-within {
    border-color: var(--tertiary);
    box-shadow: 0 0 30px rgba(0, 183, 255, 0.15);
}

.search-icon {
    padding-left: 24px;
    padding-right: 16px;
    color: var(--tertiary_600);
    font-size: 24px;
}

.overlay-search-input {
    flex-grow: 1;
    height: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    caret-color: var(--tertiary);
    padding: 0;
    outline: none;
}

.search-input-inner input::placeholder {
  color: var(--tertiary_600);
}

@media (max-width: 768px) {
    .overlay-search-input {
        font-size: 14px;
    }
}

.overlay-search-input:focus {
    box-shadow: none;
    outline: none;
    background: transparent;
}

.overlay-search-input::placeholder {
    color: #555;
}

.btn-close-search-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 16px 0 16px;
    z-index: 1060;
}

.btn-close-search-inner .close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--tertiary_700);
    background-color: rgba(18, 18, 20, 0.5);
    color: var(--tertiary_700);
    transition: all 0.3s ease;
    font-size: 12px;
}

.btn-close-search-inner:hover .close-icon {
    border-color: var(--tertiary);
    color: var(--tertiary);
    box-shadow: 0 0 10px rgba(0, 183, 255, 0.15);
}

.search-results-container {
    background-color: var(--tertiary_900);
    border: 1px solid var(--tertiary_700);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    margin-top: -10px;
    padding-top: 10px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    min-height: 0;
    max-height: calc(100vh - 250px);
}

@media (max-width: 768px) {
    .search-results-container {
        margin-top: 0;
        border-radius: 12px;
        max-height: calc(100vh - 200px);
    }
}

.results-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--tertiary_700);
    background-color: rgba(18, 18, 20, 0.8);
}

.results-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--tertiary_500);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.results-scroll {
    padding: 24px;
}

@media (max-width: 768px) {
    .results-scroll {
        padding: 12px;
    }
}

/* Quick Filters in Overlay */
.quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (max-width: 576px) {
    .quick-filters {
        gap: 6px;
    }
    
    .quick-filter-label {
        width: 100%;
        margin-bottom: 4px;
    }
    h4 {
      font-size: 20px;
      margin-bottom: 0 !important;
    }
}

.quick-filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--tertiary_500);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: 8px;
}

.quick-filter-label i {
  font-size: 12px;
  margin-right: 5px;
} 

.quick-filter-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid var(--tertiary_700);
  background-color: var(--tertiary_900);
  color: var(--tertiary_600);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.quick-filter-btn i {
  font-size: 14px;
  color: var(--tertiary_600);
  transition: color 0.2s ease;
}

.quick-filter-btn:hover,
.quick-filter-btn.has-filters {
  border-color: var(--tertiary_600);
  color: var(--tertiary_400);
  background-color: var(--tertiary_800);
  box-shadow: 0 0 10px rgba(0, 183, 255, 0.15);
}

.quick-filter-btn.has-filters {
  padding: 0 8px 0 16px;
}

.quick-filter-btn:hover i,
.quick-filter-btn.has-filters i {
    color: var(--tertiary_500);
}

.qf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--tertiary);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* Filter Matrix UI */
.filter-matrix-container {
    background-color: var(--tertiary_900);
    border: 1px solid var(--tertiary_700);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 250px);
}

@media (max-width: 768px) {
    .filter-matrix-container {
        margin-top: 0;
        border-radius: 12px;
        max-height: calc(100vh - 200px);
    }
}

.filter-matrix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--tertiary_700);
}

.filter-matrix-icon {
    font-size: 20px;
    color: var(--tertiary);
}

.filter-matrix-title {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
}

.filter-matrix-badge {
    background-color: var(--tertiary_500);
    color: var(--tertiary_950);
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 20px;
    font-family: monospace;
    border: none;
    margin-right: 5px;
}

.btn-reset-filter {
    background: none;
    border: 1px solid var(--tertiary_700);
    border-radius: 30px;
    padding: 6px;
    color: var(--tertiary);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-reset-filter:hover {
    color: #fff;
}

.filter-matrix-body {
    padding: 24px;
    overflow-y: auto;
    min-height: 0;
    flex-grow: 1;
}

.pn-sub .mailSubsForm {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mailSubsForm input {
  min-height: 40px;
  flex: 2;
}

@media (max-width: 1200px) {
  .promotion-block {
    width: 100%;
    height: 236px;
  }
  .promotion-block img {
    width: 100%;
    height: 236px;
  }
  .promotion-content {
    width: 100%;
  }
  .rewards-hub .container > .row {
    flex-direction: column;
  }
  .rewards-hub .card {
    margin-bottom: 15px;
  }

  .rewards-hub .promo-flex-row {
    flex-direction: column;
  }

  .promo-flex-row .promo-col-name {
    align-self: flex-start;
  }

  .promo-flex-row .promo-col-action {
    align-self: flex-end;
    margin-right: 0;
  }
  .vidwrap video {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
    .filter-matrix-body {
        padding: 16px;
    }
    .chatButtonContainer {
      display: none;
    }

    .page-header {
      max-height: 120px;
      background-position: center;
    }

    .page-header h2 {
      font-size: 1.4rem;
    }

    h2 {
      font-size: 1.75rem;
    }

    .mailSubsForm {
      flex-direction: column;
    }
    .promotion-block {
      width: 100%;
      flex-direction: column;
      height: auto;
    }
    .promotion-block img {
      width: 100%;
      height: 250px;
    }

    .promotion-content {
      width: 100%;
    }    
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
}

@media (min-width: 576px) {
    .filter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--tertiary_700);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-item:hover {
    border-color: var(--tertiary);
    background-color: rgba(0, 183, 255, 0.1);
}

.filter-item.selected {
    border-color: var(--tertiary);
    background-color: rgba(0, 183, 255, 0.1);
}

.filter-checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--tertiary_700);
    background-color: transparent;
    cursor: pointer;
    position: relative;
    outline: none;
}

.filter-item.selected .filter-checkbox {
    border-color: var(--tertiary);
    background-color: var(--tertiary);
}

.filter-item.selected .filter-checkbox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
}

.filter-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--tertiary_800);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

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

.filter-item.selected .filter-item-icon {
    background-color: rgba(255, 255, 255, 0.1);
}

.filter-item-abbr {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    color: var(--tertiary_600);
}

.filter-item.selected .filter-item-abbr {
    color: #fff;
}

.filter-item-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--tertiary-600);
    transition: color 0.2s ease;
}

.filter-item:hover .filter-item-text {
    color: #fff;
}

.filter-item.selected .filter-item-text {
    color: #fff;
}

.filter-matrix-footer {
    padding: 24px;
    border-top: 1px solid var(--tertiary_700);
    background-color: var(--tertiary_900);
    border-radius: 0 0 16px 16px;
}

.btn-apply-filters {
    height: 56px;
    border-radius: 12px;
    background-color: var(--tertiary);
    color: #000;
    border: none;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 183, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-apply-filters:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 183, 255, 0.4);
}

.btn-apply-filters i {
    transition: transform 0.3s ease;
}

.btn-apply-filters:hover i {
    transform: translateX(4px);
}


.filtered-games-grid {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 40px;
    padding-right: 10px;
}

/* Custom Scrollbar for Filtered Grid */
.filtered-games-grid::-webkit-scrollbar {
    width: 6px;
}

.filtered-games-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.filtered-games-grid::-webkit-scrollbar-thumb {
    background: var(--tertiary);
    border-radius: 10px;
}

.filtered-games-grid::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  /* ... define 10% to 90% transformations ... */
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.messages-offcanvas {
  height: calc(100vh - 30px);
  margin-top: 15px;
  border: 1px solid var(--tertiary_700);
  border-radius: 10px;
  background: var(--tertiary_800);
}

/* .swipe-indicator {
  font-size: 2rem;
  animation: swipe-horizontal 2s infinite ease-in-out;
}

@keyframes swipe-horizontal {
  0% { transform: translateX(0); opacity: 0; }
  50% { transform: translateX(-30px); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
} */

.swiper-scrollbar {
  background-color: #193640;
}

/* static pages */
.terms p,
.privacypolicy p,
.copyright p,
.mail-sub p,
.responsiblegaming p,
.pn-sub p {
  font-size: 0.85rem;
}

.pn-sub .mailSubsForm {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.grey-override {
  border: 1px solid #1b2d2f;
}

.grey-override::placeholder {
  color: #3d4f55;
}
/* Banner Info Icon Styles */
.bonus-info-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
    color: #FFDF0C;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 223, 12, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 223, 12, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 223, 12, 0);
    }
}

/* Prevent Layout Shift for Banners */
.bannerSwiper {
    width: 100%;
    aspect-ratio: 1400 / 600;
    background: #121616;
    background-image: linear-gradient(
        90deg, 
        rgba(18, 22, 22, 0) 0, 
        rgba(28, 34, 34, 0.8) 50%, 
        rgba(18, 22, 22, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: placeholder-shimmer 1.5s infinite linear;
    border-radius: 8px;
    overflow: hidden;
}

@keyframes placeholder-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Smooth fade-in for banners once they are loaded/initialized */
.bannerSwiper .swiper-slide img {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.bannerSwiper.swiper-initialized {
    animation: none;
    background: transparent;
}

.bannerSwiper.swiper-initialized .swiper-slide img {
    opacity: 1;
}

@media (max-width: 767px) {
    .bannerSwiper {
        aspect-ratio: 400 / 170;
        min-height: 170px;
    }
}