@font-face {
  font-family: 'Montserrat';
  src: url('/App_Themes/ThemeEn/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: normal !important;
  font-style: normal !important;
}

@font-face {
  font-family: 'atbscript';
  src: url('/App_Themes/ThemeEn/fonts/DEMO-atbscript-rg.otf') format('truetype');
  font-weight: normal !important;
  font-style: normal !important;
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url('/App_Themes/ThemeEn/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: normal !important;
  font-style: normal !important;
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url('/App_Themes/ThemeEn/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal !important;
  font-style: normal !important;
}

@font-face {
  font-family: 'Roboto-Light';
  src: url('/App_Themes/ThemeEn/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: normal !important;
  font-style: normal !important;
}

h1 {
  font-family: 'Roboto-Medium';
}

h2 {
  font-family: 'Roboto-Regular';
}

h3 {
  font-family: 'Montserrat';
}

h4 {
  font-family: 'atbscript';
}

p {
    font-family: 'Roboto-Light';
    color: white;
}

span {
    color: white;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #F2F3FA;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Roboto-Medium';
}
.goldFont {
    color: #EEC179 !important;
}
.logoSize {
    height: 75px;
}
.copyrightColor {
    color: rgba(233, 227, 213, 0.85);
}
.CurrentPageClass, .NumericClass {
    height: 44px;
    min-width: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    user-select: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);
    box-shadow: 0 14px 26px rgba(0,0,0,0.45);
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.CurrentPageClass {
    background-color: #EEC179;
    border-color: rgba(216,176,106,0.70);
    color: #111;
    font-weight: 700;
}
.NumericClass:hover {
    color: #EEC179;
}
.pager-next-rev {
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: #223030;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    position: relative;
    top: 16px;
    transform: rotate(180deg);
}
.itemDirection {
    display: block ruby !important;
}
.nextPreviousButtonCSS {
    color: #e7bb75;
    text-decoration: none;
}
.nav-item a {
    color: #ffffff;
}

.main-nav-links li a:hover {
  color: #EEC179;
}

.nav-link:focus,
.nav-link:hover {
  color: #EEC179 !important;
}

.header-fixed {
  padding: 0px clamp(25px,3.5vw,60px);
  height: 145px;
  background: transparent;
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 10;
  transition: ease-in-out 0.5s;
  z-index: 999;
}

.header-fixed.scrolled {
  transition: ease-in-out 0.5s;
  background: black;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* optional: adds a subtle shadow when scrolling */
  height: 103px;
  z-index: 999;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-y);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: 0 0;
  border: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-link-active {
  color: #EEC179 !important;
}

/* Arrow image */
.dropdown-arrow {
  margin-left: 5px;
  width: 10px;
  transition: transform 0.3s ease;
}

/* Dropdown container */
.nav-item.dropdown {
  position: relative;
}

.btn-close {
  --bs-btn-close-color: #ffffff;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.6;
  --bs-btn-close-hover-opacity: 1;

  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em;
  background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
  border: 0;
  border-radius: .375rem;
  opacity: var(--bs-btn-close-opacity);
}

/* =========================================================
   FULL CSS – Works for BOTH:
   1) Header dropdowns (open DOWN)
   2) Sidebar / mobile bottom language dropdown (open UP)
   - SAME class names (nav-item dropdown / dropdown-menu / dropdown-item)
   - Uses a dark theme (change colors if your header is light)
   - Mobile-safe with :focus-within + .is-open
========================================================= */

/* Base wrapper */
.nav-item.dropdown {
  position: relative;
}

/* Link/button */
.nav-item.dropdown>.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
}

/* Remove bootstrap arrow */
.dropdown-toggle::after {
  display: none;
}

/* Arrow rotation */
.nav-item.dropdown .dropdown-arrow {
  transition: transform .25s ease;
  will-change: transform;
}

/* =========================
   DEFAULT: Header dropdowns
   ========================= */
.nav-item.dropdown>.dropdown-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100%);
  /* open down under header item */
  bottom: auto;
  background: #121112;
  /* dark */
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 8px;
  min-width: fit-content;
  width: max-content;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    opacity .20s ease,
    visibility .20s ease;
  max-height: 280px;
  overflow: auto;
}

/* Items */
.dropdown-menu .dropdown-item {
  font-family: 'Roboto-Medium';
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  color: rgba(255, 255, 255, .85);
  background: transparent;
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .25s ease;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #EEC179;
  color: #000000;
}

.dropdown-menu li {
  padding: 0;
  margin: 0;
}

/* Active language */
.language-active {
  background-color: rgba(238, 193, 121, .15) !important;
  color: #EEC179 !important;
}

/* Wrapper to position badge */
.basket-icon-wrap {
  position: relative;
  display: inline-block;
}

/* Badge */
.basket-count-badge {
  position: absolute;
  top: -6px;
  right: -14px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #EEC179;
  color: #0F0E0F;

  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-decoration {
    text-decoration: none !important;
}
    .no-decoration:hover, .no-decoration h5:hover {
        color: #ecbf78 !important;
    }
/* Show on hover (desktop header) */
@media (hover: hover) and (pointer: fine) {
    .nav-item.dropdown:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Show on focus (keyboard/mobile) */
.nav-item.dropdown:focus-within>.dropdown-menu,
.nav-item.dropdown.is-open>.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   BASKET DROPDOWN (Header) - Clean, Modern, Black
   - Uses your hover dropdown system (nav-item dropdown + .show)
   - Dropdown container class: .basket-dropdown-menu
   - Colors: name #EEC179, rest white
========================================================= */

/* Make parent positioned */
.nav-item.dropdown {
  position: relative;
}


/* Basket dropdown panel */
.basket-dropdown-menu {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100%);
  bottom: auto;
  width: 460px;
  max-width: calc(100vw - 28px);
  background: #0F0E0F;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 10px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
  z-index: 3000;

  /* hidden by default - your existing hover JS should add .show */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;

  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    opacity .20s ease,
    visibility .20s ease;

  max-height: 420px;
  overflow: auto;
}

/* Show state */
.basket-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Scrollbar (optional) */
.basket-dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.basket-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
}

/* List reset */
.basket-dropdown-menu,
.basket-dropdown-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Item spacing */
.basket-item {
  padding: 8px 0;
}

.basket-item+.basket-item {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* Row layout */
.basket-row {
  display: grid;
  grid-template-columns: 103px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 10px;
  border-radius: 16px;

  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}

.basket-row:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .10);
}

/* Product image */
.basket-img {
  width: 103px;
  height: 103px;
  border-radius: 350px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
}

/* Mid text */
.basket-mid {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.basket-title {
  font-family: 'Roboto-Regular';
  color: #EEC179;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  max-width: 150px;
}

.basket-sub {
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.basket-title-link{
  text-decoration: none;
  color: #EEC179 !important;
  display: inline-block;
}
.basket-title-link:hover{
  text-decoration: underline;
}
/* Controls */
.basket-controls {
  display: flex;
  align-items: center;
  justify-items: end;
  gap: 10px;
}

/* Qty pill */
.basket-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

/* +/- buttons */
.basket-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;

  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;

  transition: transform .15s ease, background-color .15s ease;
}

.basket-btn:hover {
  background: rgba(255, 255, 255, .10);
}

.basket-count {
  min-width: 18px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* Delete button */
.basket-delete {
  width: 30px;
  height: 30px;
  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .85);

  cursor: pointer;
  display: grid;
  place-items: center;

  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.basket-delete:hover {
  background: rgba(255, 60, 60, .12);
  border-color: rgba(255, 60, 60, .25);
}

.basket-delete-icon {
  width: 16px;
  height: 16px;
  display: block;
  opacity: .92;
}

/* Footer */
.basket-footer {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.basket-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: start;
  padding: 12px;
}

.basket-summary-label {
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
}

.basket-summary-value {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.basket-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #0F0E0F;
  background: #EEC179;

  padding: 12px 14px;
  border-radius: 350px;
  font-weight: 700;
  font-size: 14px;

  transition: transform .15s ease, filter .15s ease;
}

.basket-checkout-btn:hover {
  filter: brightness(1.05);
}

/* Mobile safety */
@media (max-width: 420px) {
  .basket-dropdown-menu {
    width: 100vw;
  }

  .basket-row {
    grid-template-columns:45px 1fr auto;
  }

  .basket-img {
    width: 45px;
    height: 45px;
  }
}




/* =========================
   SIDEBAR / MOBILE MODE
   (dropdown opens UP)
   =========================
   Add one of these to a parent element:
   - .navbar-mobile
   - .mnav
   - .lte-navbar-items.navbar-mobile
   (any one is enough)
*/
.navbar-mobile .nav-item.dropdown>.dropdown-menu,
.mnav .nav-item.dropdown>.dropdown-menu,
.lte-navbar-items.navbar-mobile .nav-item.dropdown>.dropdown-menu {
  left: auto;
  right: 0;
  top: auto;
  bottom: calc(100% + 0px);
}
/* Optional: if your header is LIGHT, uncomment below */
/*
.nav-item.dropdown > .dropdown-menu{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
}
.dropdown-menu .dropdown-item{
  color: #111;
}
.dropdown-menu .dropdown-item:hover{
  background: rgba(0,0,0,.04);
  color: #000;
}
*/

/* JS-controlled open state */
.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Small screens safety */
@media (max-width: 480px) {
  .nav-item.dropdown>.dropdown-menu {
    min-width: fit-content;
    max-width: calc(100vw - 40px);
  }

  .dropdown-menu .dropdown-item {
    font-size: 14px;
  }
}

/* sidebar style */
:root {
  --black: #0F0E0F;
  --white: #FFFFFF;
  --gold: #C9A46A;
  /* change to your accent */
}

/* Open button example */
.mnav-open {
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 26px;
  cursor: pointer;
}

/* Overlay (no dissolve) */
.mnav {
  position: fixed;
  inset: 0;
  background: transparent;
  /* no fade */
  pointer-events: none;
  z-index: 100000;
}

/* Open state */
.mnav.is-open {
  pointer-events: auto;
}

/* Panel reveal top -> bottom */
.mnav-panel {
  position: absolute;
  inset: 0;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;

  /* start hidden */
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s cubic-bezier(.2, .8, .2, 1);
  will-change: clip-path;
}

.mnav.is-open .mnav-panel {
  clip-path: inset(0 0 0 0);
  /* reveal full */
}

/* Optional: make the content slightly slide down like Apple */
.mnav-panel>* {
  opacity: 1;
  /* keep it visible, no fade */
}

/* Top */
.mnav-top {
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 10px 18px;
}

.mnav-logo img {
  height: 85px;
  width: auto;
  display: block;
}

.mnav-close {
  position: absolute;
  right: 18px;
  top: 20px;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

/* Links */
.mnav-links {
  padding: 10px 0 0;
  margin: 0;
  overflow: auto;
}

.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 22px;
  text-decoration: none;
  color: var(--white);
  font-size: 18px;
  /* big like screenshot */
  font-weight: 300;
  letter-spacing: .2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

.mnav-link {
  transform: translateY(-10px);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.mnav.is-open .mnav-link {
  transform: translateY(0);
}

/* small stagger */
.mnav-link:nth-child(1) {
  transition-delay: .04s;
}

.mnav-link:nth-child(2) {
  transition-delay: .08s;
}

.mnav-link:nth-child(3) {
  transition-delay: .12s;
}

.mnav-link:nth-child(4) {
  transition-delay: .16s;
}

.mnav-link:nth-child(5) {
  transition-delay: .20s;
}

.mnav-link:nth-child(6) {
  transition-delay: .24s;
}

.mnav-link:nth-child(7) {
  transition-delay: .28s;
}

.mnav-link.active {
  color: var(--gold);
}

.mnav-item {
  width: 100%;
}

.mnav-plus img {
  width: 10px;
  line-height: 1;
  transform: translateY(2px);
}

/* Submenu (collapsed by default) */
.mnav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding-left: 22px;
}

.mnav-item.is-open .mnav-sub {
  max-height: 400px;
  /* enough for items */
}

.mnav-sub a {
  display: block;
  padding: 10px 22px 10px 0;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 16px;
}

.mnav-sub a:hover {
  color: var(--white);
}

/* Bottom area (icons + search pill) */
.mnav-bottom {
  margin-top: auto;
  padding: 18px 18px 22px;
  display: grid;
  gap: 14px;
}
.sidebar-basket {
  position: relative;
}

/* Open inside viewport instead of off-screen */
.sidebar-basket .basket-dropdown-menu {
  left: 0 !important;
  right: auto !important;
  top: auto;
  bottom: calc(100% + 12px);

  transform-origin: bottom left;
}
.mnav-icons {
  display: flex;
  align-items: center;
  justify-content: end;
}

.mnav-icon {
  color: var(--gold);
  text-decoration: none;
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mnav-icon .basket-count-badge {
  top: -6px;
  right: -12px;
}
.mnav-badge {
  color: var(--white);
  font-size: 16px;
  transform: translateY(2px);
}
.basket-icon-wrap { position: relative; }
.basket-count-badge { /* badge styling */ }
.basket-dropdown-menu { /* dropdown panel */ }
.basket-row,
.basket-img,
.basket-controls,
.basket-qty,
.basket-btn,
.basket-delete { /* layout */ }


/* Search pill */
.mnav-search {
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mnav-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 16px;
}

.mnav-search button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

/* Language dropdown wrapper */
.mnav-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Button */
.mnav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 12px;
}

.mnav-lang-btn img {
  width: 18px;
  height: 18px;
  display: block;
}

.mnav-lang-arrow {
  width: 8px !important;
  height: 8px !important;
  transition: transform .25s ease;
}

/* Menu: open UP so it never goes outside the page */
.mnav-lang-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  /* opens upward */
  min-width: 160px;

  background: #121112;
  /* slightly lighter than --black */
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 10px;

  display: none;
  z-index: 20;

  /* prevent overflow */
  max-height: 220px;
  overflow: auto;
}

/* Items */
.mnav-lang-item {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  white-space: nowrap;
}

.mnav-lang-item:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--white);
}

.mnav-lang-item.is-active {
  color: var(--gold);
  background: rgba(201, 164, 106, .12);
}

/* Open state */
.mnav-lang.is-open .mnav-lang-menu {
  display: block;
}

.mnav-lang.is-open .mnav-lang-arrow {
  transform: rotate(180deg);
}
/* Mobile width safety */
@media (max-width: 480px) {
  .sidebar-basket .basket-dropdown-menu {
    max-width: calc(100vw - 24px);
  }
}




.list-unstyled button {
  margin-bottom: 10px;
  font-size: clamp(14px, 1.2vw, 16px);
  text-align: start;
  font-weight: 500;
  color: #1B384A;
  padding: 0;
}

.list-unstyled .lang-btn {
  text-align: center !important;
}

.search-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.search-popup.active {
  opacity: 1;
  pointer-events: auto;
}
/* Overlay */
.search-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  height: 100vh;
  width: 100vw;
}
/* Panel */
.search-popup-panel {
  position: absolute;
  left: 50%;
  top: 10vh;
  transform: translateX(-50%) translateY(-10px);
  width: min(760px, calc(100vw - 28px));
  border-radius: 22px;
  overflow: hidden;

  background: radial-gradient(900px 380px at 25% 5%, rgba(238,193,121,.2), rgba(15,14,15,1) 55%),
              linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);

  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.search-popup.active .search-popup-panel {
  transform: translateX(-50%) translateY(0);
}

/* Header */
.search-popup-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.search-popup-title {
  display:flex;
  align-items:center;
  gap: 10px;
  color: #fff;
  font-family: 'Roboto-Medium';
  font-size: 16px;
  letter-spacing: .2px;
}
.search-popup-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #EEC179;
  box-shadow: 0 0 18px rgba(238,193,121,.55);
}

.search-popup-close { opacity: .85; }
.search-popup-close:hover { opacity: 1; }
.search-popup-body {
  padding: 16px;
}

.search-popup-inputwrap {
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.search-popup-icon {
  width: 18px;
  height: 18px;
  opacity: .9;
}

.search-popup-input {
  flex: 1;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-family: 'Roboto-Regular';
}
.search-popup-input::placeholder {
  color: rgba(255,255,255,.60);
}

/* Chips */
.search-popup-chips {
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 12px 2px 2px;
}

.search-popup-chip {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.search-popup-chip:hover {
  transform: translateY(-1px);
  background: rgba(238,193,121,.12);
  border-color: rgba(238,193,121,.35);
}

/* Responsive */
@media (max-width: 640px) {
  .search-popup-panel { top: 8vh; }
  .search-popup-btn { padding: 0 12px; }
}


/* search bar style */
.search-bar-container {
  position: fixed;
  top: 0;
  left: 50%;
  background-color: #000000;
  padding: 20px;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-120%)translateX(-50%);
  transition: transform 0.4s ease;
  z-index: 11;
  border-radius: 18px;
}

.search-bar-container.active {
  transform: translateY(0) translateX(-50%);
}

.search-input {
  flex-grow: 1;
  border-radius: 30px;
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
}
#divSearchItems {
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding: clamp(14px, 1.8vw, 26px);
    padding-bottom: clamp(14px, 1.8vw, 18px);
    border-radius: 18px;
    background: radial-gradient(120% 140% at 10% 30%, rgba(238,193,121,0.10), rgba(0,0,0,0) 55%), rgba(255,255,255,0.03);
    border: 1px solid rgba(238,193,121,0.14);
    box-shadow: 0 18px 55px rgba(0,0,0,0.45);
    margin-bottom: clamp(18px, 2.6vw, 26px);
}
.form-control {
    height: 46px;
    border-radius: 350px;
    padding: 0 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    outline: none;
    flex: 1 1 auto;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
    /*.form-control:focus {
        background: radial-gradient(120% 140% at 10% 30%, rgba(238,193,121,0.10), rgba(0,0,0,0) 55%), rgba(255,255,255,0.03);
        color: white;
    }
    .form-control .option {
        color: black !important;
    }*/
/* hero section */
.hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

.hero-right-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  z-index: 99;
}

.hero-fixed-image-size {
  width: clamp(300px, 40vw, 670px) !important;
  height: auto !important;
}

.hero-right-text h1 {
  font-family: 'Roboto-Medium';
  color: #EEC179;
  text-align: center;
  font-size: 16px;
  padding: 0;
  margin: 0;
  width: clamp(300px, 40vw, 670px) !important;
  margin-top: 20px;
}

.hero-right-text p {
  font-family: 'Roboto-Medium';
  text-align: center;
  color: white;
  font-weight: 100;
  font-size: 16px;
  padding: 0;
  margin: 0;
  width: clamp(300px, 40vw, 670px) !important;
  margin-top: 5px;
}

.tabs input {
  visibility: hidden;
  display: none;
}

.buttons {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 99;
}

/* Prev/Next buttons */
.hero-nav {
  position: absolute;
  bottom: 0;
  transform: translateY(-50%);
  width: fit-content;
  height: 52px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  z-index: 2000;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  color: #EEC179;
  z-index: 99;
}

.hero-nav:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.hero-prev {
  left: clamp(5px,2.5vw,40px);
}

.hero-next {
  right: clamp(5px,2.5vw,40px);
}

.hero-nav:active {
  transform: translateY(-50%) scale(.98);
}

/* Make sure .tabs is positioned so absolute buttons work */
.tabs {
  position: relative;
}

/* Hide all slide texts by default */
.box .hero-right-text {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  transform: translateY(16px);
}

/* Show text ONLY for active slide */
/*#slider1:checked~.content .slider1 .hero-right-text,
#slider2:checked~.content .slider2 .hero-right-text,
#slider3:checked~.content .slider3 .hero-right-text,
#slider4:checked~.content .slider4 .hero-right-text {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}*/

input[type="radio"]:checked ~ .content .hero-right-text {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.responsive-display-none {
  display: none;
}

.sliders-buttons {
  z-index: 12;
  border-radius: 40px;
  padding: 5px 15px;
  background-color: transparent;
}

.buttons label {
  margin: 0px 1px;
  width: 45px;
  height: 8px;
  background: #EEC179;
  opacity: 0.5;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.5s;
}

.tabs input:nth-child(1):checked~.buttons label:nth-child(1),
.tabs input:nth-child(2):checked~.buttons label:nth-child(2),
.tabs input:nth-child(3):checked~.buttons label:nth-child(3),
.tabs input:nth-child(4):checked~.buttons label:nth-child(4) {
  opacity: 1;
  background-color: #EEC179;
}

.box {
  position: relative;
  overflow: hidden;
}

/* Gradient overlay ON TOP of media */
.box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  /* Gradient overlay */
  background: linear-gradient(0deg,
      rgb(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0) 100%);
}

.content {
  position: relative;
  width: 400vw;
  display: flex;
  transition: 0.5s;
}

.content .box {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  padding: 0px;
  overflow: hidden;
  /* Prevents video overflow */
}

.content .box img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  /* or use 'contain' depending on your desired effect */
}

.content .box:nth-child(1) {
  background: black;
}

.content .box:nth-child(2) {
  background: black;
}

.content .box:nth-child(3) {
  background: black;
}

.content .box:nth-child(4) {
  background: black;
}

.tabs input:nth-child(1):checked~.content {
  left: 0;
}

.tabs input:nth-child(2):checked~.content {
  left: -100vw;
}

.tabs input:nth-child(3):checked~.content {
  left: -200vw;
}

.tabs input:nth-child(4):checked~.content {
  left: -300vw;
}


.social-media-hero-links {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.divider1-socials {
  height: 140px;
  width: 1px;
  background-color: white;
}

.social-media-hero-links ul {

  list-style: none;
  padding: 10px 0px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.divider2-socials {
  height: 140px;
  width: 1px;
  background-color: white;
}

.Scrolldown-Position {
  position: absolute;
  bottom: 78px;
  right: 27px;
  z-index: 2;
  padding: 10px 5px;
  border: 2px solid white;
  border-radius: 23px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Scrolldown-Position img {
  width: 30px;
}

.fixed-help-icon1 {
  padding: 0px 20px;
  position: fixed;
  bottom: 10px;
  left: 0;
  z-index: 15;
}

.accessibility-box {
  position: fixed;
  bottom: 80px;
  left: 20px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.hidden {
  display: none;
}

.fixed-help-icon3 {
  padding: 0px 20px;
  position: fixed;
  bottom: 80px;
  right: 0;
  z-index: 15;
}

.fixed-help-icon2 {
  padding: 0px 20px;
  position: fixed;
  bottom: 10px;
  right: 0;
  z-index: 15;
}

.fixed-help-icon1 img {
  border-radius: 100%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.252);
}

.fixed-help-icon2 img {
  border-radius: 100%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.252);
}

.chatbot-box {
  position: fixed;
  bottom: 55px;
  right: 80px;
  width: 300px;
  height: 400px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  display: none;
  flex-direction: column;
  z-index: 1000;
}

.chatbot-header {
  padding: 10px;
  background: #4E738A;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.chatbot-body {
  padding: 15px;
  overflow-y: auto;
  flex-grow: 1;
}

.chatbot-body h3 {
  font-size: clamp(16px, 1.6vw, 20px);
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: clamp(16px, 1.6vw, 20px);
  cursor: pointer;
}

/* disablied people guide */
.disabilites-guide {
  z-index: 15;
  position: fixed;
  right: 0;
  top: 61%;
  transform: translateY(-38%);
  display: flex;
  align-items: center;
  transition: right 0.3s ease;
}

.rate-div1 {
  padding: 15px 5px;
  background-color: #FFFFFF;
  border-radius: 10px 0px 0px 10px;
  cursor: pointer;
  z-index: 2;
  user-select: none;
  border: 2px solid #3D434B;
  border-right: 0px;
}

.rate-div1 img {
  width: 23px;
  height: 23px;
}

.disabilites-guide .rate-info-box {
  background-color: #ffffff;
  color: #000;
  display: none;
  padding: 10px 15px;
  border-radius: 10px 0 0 10px;
  margin-right: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  border: 2px solid #3D434B;
}

.disabilites-guide.open .rate-info-box {
  opacity: 1;
  display: block;
  visibility: visible;
}

.rate-info-text1 {
  color: #3D434B;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

/* Keep your existing styles */
.rate-link-postion {
  z-index: 15;
  position: fixed;
  right: 0;
  top: 70%;
  transform: translateY(-30%);
  display: flex;
  align-items: center;
  transition: right 0.3s ease;
}

/* When active, shift it left to reveal the box */


.rate-div {
  padding: 15px 5px;
  background-color: #948664;
  border-radius: 10px 0px 0px 10px;
  cursor: pointer;
  z-index: 2;
  user-select: none;
}

/* Info box next to the button */
.rate-info-box {
  background-color: #948664;
  color: #000;
  display: none;
  padding: 10px 15px;
  border-radius: 10px 0 0 10px;
  margin-right: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.rate-link-postion.open .rate-info-box {
  opacity: 1;
  display: block;
  visibility: visible;
}

.rate-info-text {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}





/* Sliding Panel */
#realTimePanel {
  position: fixed;
  right: 0;
  top: 30%;
  height: 220px;
  width: 580px;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  z-index: 11;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border-radius: 0px 0px 0px 8px;
}

/* Open state */
#realTimePanel.open {
  transform: translateX(0);
}

/* Button — positioned relative to the panel’s right edge */
#realTimeToggleBtn {
  position: absolute;
  right: 100%;
  /* exactly left of panel */
  top: 43%;
  transform: translateY(-57%);
  color: white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-weight: 600;
  z-index: 12;
  cursor: pointer;
}

.airport-status {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9E0000;
  border-radius: 8px;
  padding: 5px 10px;
  gap: 10px;
}

.airport-status h2 {
  color: white;
  font-family: 'NeueRoman';
  font-size: clamp(12px, 1.1vw, 14px);
  margin: 0;
}

.panel-header {
  color: #85754E;
  font-size: clamp(16px, 1.6vw, 20px);
  font-family: 'Neueblack';
}

.panel-subheader {
  margin: 0;
  margin-top: 10px;
  color: black;
  font-size: clamp(12px, 1.1vw, 14px);
  font-family: 'Neuebold';
}

.btn-warning {
  font-size: clamp(12px, 1.1vw, 14px);
  color: white;
  background-color: #85754E;
  font-family: 'NeueRoman';
  border: 0px;
}

.btn-warning:hover {
  color: white;
  background-color: #948358;
}


/* Find Your Flight */
/* Button that toggles the panel */
.find-flight-btn {
  position: fixed;
  top: 20%;
  right: 5%;
  transform: translateY(-50%);
  z-index: 1040;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  display: flex;
  padding: 5px 10px;
  align-items: center;
  gap: 8px;
}

.find-flight-btn:hover {
  background-color: white;
}

.find-flight-btn h2 {
  font-size: clamp(14px, 1.2vw, 16px);
  color: #4E738A;
  font-family: 'NeueRoman';
  margin: 0;
}

/* Flight popup panel */
.flight-popup {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 386px;
  height: 425px;
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 18px;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
  z-index: 1050;
  display: none;
  animation: slideUp 0.3s ease;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.259);
}

/* Icons inside selection */
.flight-option-icon {
  background-color: #4E738A;
  padding: 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 18px;
  margin-bottom: 4px;
  display: inline-block;
}

.custom-btn {
  border-radius: 30px;
  background-color: #4E738A;
  width: 158px;
  height: 42px;
  color: white;
}

.custom-btn:hover {
  color: white;
  background-color: #4E738A;
}

/* Smooth animation on open */
@keyframes slideUp {
  from {
    transform: translate(-50%, 50%);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 50%);
    opacity: 1;
  }
}



/* homepage section 2 */
.homepage-section2-container {
  padding: 65px 20px;
  background-color: #000;
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 0px;
  justify-content: center;
  align-items: center;
}

.homepage-section2-container img {
  width: clamp(250px,30vw,436px);
  height: auto;
}

.section-title {
  display: flex;
  gap: 12px;
  justify-content: start;
  align-items: center;
}

.section2-content-conatiner {
  width: 560px;
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.section-title h1 {
  color: #EEC179;
  font-size: 16px;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Roboto-Medium';
}

.section2-content-conatiner h2 {
  color: #ffffff;
  font-size: clamp(20px,4.5vw,64px);
  margin: 0;
  text-align: start;
  line-height: clamp(20px,4.5vw,64px);
  text-transform: uppercase;
  font-family: 'Roboto-Medium';
}

.section2-content-conatiner p {
  color: #ffffff;
  font-size: 16px;
  margin: 0;
  text-align: start;
  line-height: 19px;
}

.golden-title-line {
  height: 1px !important;
  width: 45px !important;
}

.main-button {
  width: fit-content;
  border-radius: 50px;
  border: 1px solid #EEC179;
  color: #EEC179 !important;
  background-color: transparent;
  padding: 12px 35px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: 'Roboto-Medium';
  text-decoration: none !important;
}

.main-button img {
  width: 13px !important;
}

.mainAnchor{
    text-decoration:none !important;
}
/* homepage section 3 */
.homepage-section3-container {
    padding: clamp(25px, 4vw, 65px) 20px clamp(35px, 5vw, 85px) 20px;
    background-color: #000;
    display: flex;
    gap: 0px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.section3-content-conatiner {
  width: 95%;
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section3-content-conatiner h2 {
  color: #ffffff;
  font-size: clamp(20px,4.5vw,64px);
  margin: 0;
  text-align: center;
  line-height: clamp(20px,4.5vw,64px);
  text-transform: uppercase;
  font-family: 'Roboto-Medium';
}

.section3-content-conatiner p {
  color: #ffffff;
  font-size: 16px;
  margin: 0;
  text-align: center;
  max-width: 603px !important;
  line-height: 19px;
}

.products-strip {
  margin-top: 50px;
  width: 100vw;
  background: #000;
  padding: 0;
  overflow: hidden;
}

/* Owl container */
.productsOwl {
  width: 100%;
}

/* Make it GPU smooth */
.productsOwl .owl-stage {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.productsOwl .owl-item {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Center focus effect (like Elementor feel) */
.productsOwl .owl-item {
  opacity: 1 !important;
  transform: none !important;
}


/* Keep items centered */
.productsOwl .owl-item .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Your product card */
.product-card {
  width: 280px !important;
  height: 340px !important;
  display: flex;
  flex-direction: column;
  text-align: center !important;
  justify-content: center !important;
  color: #fff;
  padding: 10px 6px;
}

/* Smaller white image block */
.product-img {
    /*background: #ffffff;*/
    /*background-image: url(/App_Themes/ThemeAr/Images/LAZ-watermark.png);*/
    background-image: none;
    border-radius: 20px;
    padding: 10px;
    border: 3px solid #EEC179;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 145px;
    width: 100%;
    background-size: cover;
}

.product-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.product-title {
  font-size: 20px;
  line-height: 18px;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Roboto-Medium';
  margin: 0;
  margin-top: 20px;
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-sub {
  margin-top: -5px !important;
  font-size: 24px !important;
  color: #EEC179 !important;
  font-family: 'atbscript' !important;
  text-align: center;
  width: auto !important;
}

.product-btn {
  background: transparent;
  color: #d6b36b;
  border: 1px solid rgba(214, 179, 107, .55);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 10px;
  cursor: pointer;
  transition: .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Remove dots/nav if you don’t want them */
.productsOwl .owl-dots,
.productsOwl .owl-nav {
  display: none !important;
}



/* homepage section 4 (statistics) */

.statistics-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 20vw, 320px);
}

/* Video background */
.statistics-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay for readability */
.statistics-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
      rgba(20, 8, 5, 0.72) 0%,
      rgba(20, 8, 5, 0.40) 50%,
      rgba(20, 8, 5, 0.72) 100%);
}

/* Content container */
.statistics-container {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding: clamp(38px, 5vw, 80px) 0;
}

/* Grid layout: desktop = 4 items in one row */
.statistics-grid {
  display: grid;
  align-items: center;
  justify-items: center;

  /* 4 items + 3 separators */
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;

  /* Responsive spacing */
  column-gap: clamp(14px, 2vw, 28px);
}

/* Stat item */
.statistics-item {
  text-align: center;
  padding: 6px 0;
}

/* Number */
.statistics-number {
  font-size: clamp(24px, 2.8vw, 48px);
  letter-spacing: 0.4px;
  line-height: 1.1;
  color: #d8b07a;
  text-wrap: balance;
  font-family: 'Roboto-Medium';
}

/* Label */
.statistics-label {
  font-family: 'Roboto-Regular';
  margin-top: clamp(6px, 0.9vw, 12px);
  font-size: clamp(16px, 1.5vw, 24px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

/* Dotted vertical separator */
.statistics-separator {
  width: 12px;
  height: clamp(52px, 6vw, 90px);
  display: flex;
  justify-content: center;
}

.statistics-separator::before {
  content: "";
  width: 6px;
  height: 100%;
  border-radius: 999px;

  /* Dots */
  background: radial-gradient(circle, rgba(216, 176, 122, 0.95) 2px, transparent 2.7px);
  background-size: 6px 12px;
  background-repeat: repeat-y;
  background-position: center;
  opacity: 0.95;
}

/* =========================
   Breakpoint: tablets
   2 columns (2 stats per row)
   ========================= */
@media (max-width: 900px) {
  .statistics-grid {
    /* 2 items + separator + 2 items */
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  column-gap: clamp(14px, 2vw, 28px);
  }

  /* Make separators horizontal-ish spacing still nice */
  .statistics-separator {
    height: clamp(44px, 7vw, 70px);
  }


}

/* =========================
   Breakpoint: phones
   1 column (stacked)
   ========================= */
@media (max-width: 520px) {
  .statistics-container {
    width: min(520px, 92vw);
  }

  .statistics-grid {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }

  .statistics-separator {
    display: none;
  }

  .statistics-item {
    padding: 10px 0;
  }
}

/* =========================
   Optional: Respect reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .statistics-bg-video {
    display: none;
  }

  .statistics-section {
    background: #1a0b07;
  }
}




/* secton 5 homepage ( NEWS & EVNETS ) */
.news-slider-section {
  background: #0b0b0b;
  color: #fff;
  padding: clamp(48px, 6vw, 96px) 0;
  overflow: hidden;
}

.news-slider-container {
  width: min(100%, calc(100% - 85px));
  margin: 0 auto;
}

/* Head */
.news-slider-head {
  width: 100% !important;
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: center !important;
  text-align: center !important;
  margin-bottom: clamp(22px, 3vw, 40px);
}

.news-slider-kicker {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.news-slider-line {
  width: 56px;
  height: 2px;
  background: #caa35a;
  border-radius: 99px;
}

.news-slider-kicker-text {
    color: #EEC179;
    font-size: 16px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto-Medium';
}

.news-slider-title {
  color: #ffffff;
    font-size: clamp(20px,4.5vw,64px);
    margin: 0;
    text-align: center;
    line-height: clamp(20px,4.5vw,64px);
    text-transform: uppercase;
    font-family: 'Roboto-Medium';
}

.news-slider-subtitle {
    color: #ffffff;
    font-size: 16px;
    margin: 0;
    text-align: center;
    line-height: 19px;
    margin: 0px;
}

/* Owl */
.news-slider-wrap {
  position: relative;
}

.news-slider-owl .owl-stage-outer {
  overflow: visible;
}

/* allows “peek” */
.news-slider-item {
  padding: 0 10px;
}

/* Card */
.news-slider-card {
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  min-height: clamp(280px, 35vw, 470px);
  background:
    radial-gradient(120% 120% at 10% 50%, rgba(126, 60, 31, .55), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(22, 12, 8, .85), rgba(6, 6, 6, .85));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

/* Left */
.news-slider-card-left {
  padding: clamp(22px, 3.2vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  z-index: 2;
}
/* Card wrapper */
.news-slider-card--image{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: clamp(300px, 34vw, 470px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  background: #000;
}

/* Image fills the card */
.news-slider-bg-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Gradient overlay */
.news-slider-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(65, 27, 13, 1) 52%,
      rgba(65, 27, 13, 0) 83%
    );
}

/* Content above everything */
.news-slider-content{
  position: relative;
  z-index: 2;
  padding: clamp(22px, 3.2vw, 42px) clamp(22px, 3.2vw, 42px) clamp(35px, 5vw, 74px) clamp(22px, 3.2vw, 42px);
  max-width: 640px;
  height: 365px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
}
.news-slider-content-text{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 24px;
}
.news-slider-card-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 24px);
  color: #EEC179;
  letter-spacing: -0.45px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-slider-card-desc {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  line-height: 1.7;
  font-size: clamp(14px, 1.5vw, 16px);
  max-width: 550px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button */
.news-slider-btn {
  width: fit-content;
  border-radius: 50px;
  color: #000000 !important;
  background-color: #EEC179;
  padding: 12px 35px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: 'Roboto-Medium';
  text-decoration: none;
}
.news-slider-btn img {
  width: 13px !important;
}
    .news-slider-btn span {
        color: #3a2119;
    }
    /* Right image */
    .news-slider-card-right {
        position: relative;
    }

.news-slider-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.news-slider-media-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 20% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 70%),
    linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .25) 55%, rgba(10, 10, 10, .75) 100%);
  pointer-events: none;
}

/* Last slide: See More */
.news-slider-see-more-card {
  display: block;
  border-radius: 26px;
  overflow: hidden;
  min-height: clamp(280px, 30vw, 420px);
  background: linear-gradient(145deg, rgba(202, 163, 90, .22), rgba(0, 0, 0, .85));
  border: 1px solid rgba(202, 163, 90, .25);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  text-decoration: none;
  color: #fff;
}
.news-slider-see-more-card2 {
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 26px;
  overflow: hidden;
  min-height: clamp(280px, 30vw, 420px);
  background: transparent;
  border: 0px;
  text-decoration: none;
  color: #fff;
}

.news-slider-see-more-inner {
  height: 100%;
  padding: clamp(22px, 3.2vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.news-slider-see-more-title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 36px);
  color: #f3c679;
}

.news-slider-see-more-sub {
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}

.news-slider-see-more-arrow {
  margin-top: 10px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1c37b;
  color: #1b1209;
  font-weight: 900;
  font-size: 22px;
  transition: transform .2s ease;
}

.news-slider-see-more-card:hover .news-slider-see-more-arrow {
  transform: translateX(3px);
}

/* Controls */
.news-slider-controls {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}

.news-slider-prev,
.news-slider-next {
  border: 0;
  background: transparent;
  color: #caa35a;
  display: inline;
  width: fit-content;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 6px;

}
.owl-dot{
  border: 0px !important;
  border-radius: 9999px !important;
}
.news-slider-prev {
  justify-content: flex-start;
}

.news-slider-next {
  justify-content: flex-end;
}

.news-slider-arrow {
  font-size: 22px;
  line-height: 1;
}

.news-slider-navtext {
  font-size: 14px;
}

/* Dots as bars */
.news-slider-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.owl-dot{
    margin: 0px 1px !important;
    width: 45px !important;
    height: 8px !important;
    background: #caa35a !important;
    opacity: 0.5 !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: 0.5s !important;
}

.news-slider-dots .owl-dot {
  margin: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  padding: 0 !important;
}
/* Default dot */
.news-slider-dots .owl-dot span {
  display: block;
  width: 45px;
  height: 8px;
  background: #caa35a;
  opacity: 0.35;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.news-slider-dots .owl-dot:hover span {
  background: rgba(202, 163, 90, .45);
  transform: translateY(-1px);
  border-radius: 999px !important;
}
.news-slider-dots .owl-dot.active span {
  background: #EEC179; /* brighter gold */
  opacity: 1;
  width: 45px !important;
  border-radius: 999px !important;
  z-index: 99;
}

/* Responsive */
@media (max-width: 900px) {
  .news-slider-card {
    grid-template-columns: 1fr;
  }

  .news-slider-card-right {
    height: 220px;
  }

  .news-slider-media-overlay {
    background: linear-gradient(180deg, rgba(10, 10, 10, .25) 0%, rgba(10, 10, 10, .9) 85%);
  }



  .news-slider-prev,
  .news-slider-next {
    justify-content: center;
  }

  .news-slider-dots .owl-dot span {
    width: 44px;
  }
}

@media (max-width: 520px) {
  .news-slider-container {
    width: calc(100% - 26px);
  }
  .news-slider-dots .owl-dot span {
    width: 8px;
    height: 8px;
  }
  .news-slider-dots .owl-dot.active span {
   width: 8px !important;
  }
  .owl-dot{
    width: 8px !important;
    height: 8px !important;
}
}




/* Footer style */
/* =============== FOOTER (all classes start with footer-) =============== */
.footer-wrap {
  position: relative;
  overflow: hidden;
  color: #e9e3d5;
  background: #000; /* fallback */
}

/* Background image layer */
.footer-bg {
  position: absolute;
  inset: 0;
  background-image: url("/App_Themes/ThemeEn/images/footer-background-image.png"); /* <- replace */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Optional: add a soft dark overlay for readability */
.footer-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 420px at 50% 35%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.65));
  z-index: 0;
  pointer-events: none;
}

.footer-container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(120px, 14.6vw, 180px) 0 22px;
  padding-left: clamp(15px, 2vw, 25px);
  padding-right: clamp(15px, 2vw, 25px);
}
.footer-wrap,
.footer-container,
.footer-top,
.footer-col,
.footer-col--about,
.footer-col--contact,
.footer-col--sponsors{
  min-width: 0;
}
.footer-about-text,
.footer-contact-value,
.footer-bottom-left,
.footer-bottom-right{
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* 3 columns like the screenshot */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 3.2vw, 56px);
  align-items: start;
}

/* Titles */
.footer-title {
  margin: 0;
  margin-bottom: 20px;
  color: #EEC179;
  font-size: clamp(18px, 2.5vw, 32px);
  font-family: 'Roboto-Light';
}

/* ---------- About column ---------- */
.footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 18px;
}

.footer-brand-logo {
  width: clamp(120px, 14vw, 160px);  
  height: auto;
  display: block;
  object-fit: contain;
}

.footer-about-text {
  max-width: 425px;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0px;
  color: #FFFFFF;
  font-family: 'Roboto-Light';
  margin-bottom: 50px;
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  margin-top: 6px;
}

.footer-social-link {
  width: 22px;
  height: 14.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.95;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-social-link:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.footer-social-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Contact column ---------- */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}

.footer-contact-ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-contact-ico-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.footer-contact-label {
  font-size: 16px;
  font-family: 'Roboto-Regular';
  color: #EEC179;
  margin-bottom: 3px;
}

.footer-contact-value {
  font-size: 20px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: 'Roboto-Light';
}

a.footer-contact-value:hover {
  text-decoration: none;
  color:white;
}

/* ---------- Sponsors column ---------- */
.footer-sponsor-card {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;

  max-width: 100%;
  min-height: 100%;

  border-radius: 40px;
  background: linear-gradient(180deg, #d5b069, #c79f56);
  padding: 25px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.footer-sponsor-img {
  flex: 1 1 0;           /* each image takes equal space */
  max-width: 33.333%;   /* force 3 images per row */
  max-height: 70px;     /* adjust to your design */
  object-fit: contain;

  display: block;
}

/* ---------- Bottom row ---------- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: clamp(34px, 4vw, 58px);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: rgba(233, 227, 213, 0.85);
}

.footer-bottom-left,
.footer-bottom-right {
  white-space: nowrap;
}

.footer-powered-link {
  color: #caa35a;
  text-decoration: none;
}

.footer-powered-link:hover {
  text-decoration: underline;
}

/* ================= Responsive ================= */
@media (hover: none){
  .footer-social-link{ width: 34px; height: 24px; }
}

/* Contact font sizes scale smoothly */
.footer-contact-label{
  font-size: clamp(13px, 1.2vw, 16px);
}
.footer-contact-value{
  font-size: clamp(15px, 1.45vw, 20px);
}

/* Sponsor card stays centered and never breaks */



/* Bottom row responsive */
.footer-bottom{
  flex-wrap: wrap;
  row-gap: 10px;
}
.footer-bottom-left,
.footer-bottom-right{
  white-space: normal; /* allow wrap on small screens */
}
/* Large tablets / small laptops */
@media (max-width: 1200px){

  .footer-about-text{
    max-width: 100%;
  }
}

/* Tablets */
@media (max-width: 1024px){
  .footer-top{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer-col--sponsors{
    grid-column: 1 / -1;
  }
  .footer-sponsor-card{
    margin-top: 6px;
    padding: 15px !important;
  }


}

/* Small tablets / large phones */
@media (max-width: 820px){

  .footer-title{
    font-size: clamp(18px, 3.2vw, 28px);
    margin-bottom: 14px;
  }
  .footer-about-text{
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 28px;
  }
  .footer-contact-item{
    grid-template-columns: 28px 1fr;
    gap: 12px;
  }
  .footer-contact-ico{
    width: 28px;
    height: 28px;
  }
}

/* Phones */
@media (max-width: 640px){
  .footer-top{
    grid-template-columns: 1fr;
    gap: 46px;
  }



  .footer-social{
    gap: 16px;
  }

  .footer-sponsor-card{
    max-width: 100%;
  }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Small phones */
@media (max-width: 420px){
  .footer-title{
    font-size: 20px;
  }
  .footer-brand-logo{
    width: 130px;
  }
  .footer-contact-value{
    font-size: 15px;
  }
  .footer-social-link{
    width: 32px;
    height: 22px;
  }

}




/* inner pages styles  */
/* ###################### */
/* ###################### */
/* ###################### */
/* ###################### */
/* ###################### */
/* ###################### */



/* block list style */

/* hero section */
.innerpage-hero-container {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/App_Themes/ThemeAr/Images/innerpage-background.png");
    background-size: cover;
}

/* Background video */
.innerpage-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; 
  z-index: 0;
}

/* Overlay */
.innerpage-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.7)
  );
  z-index: 1;
}

/* Centered content */
.innerpage-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 20px;
  margin-top: 40px;
}

/* Breadcrumbs */
.innerpage-breadcrumbs {
  font-size: 16px;
  margin-bottom: 12px;
  opacity: 0.85;
  font-family: 'Roboto-Regular';
  color: white;
}

.innerpage-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}
.innerpage-breadcrumbs > *:not(:last-child) {
    display: inline-block; 
    margin-right: 5px; 
}

.innerpage-breadcrumbs > *:not(:last-child)::after {
    content: "/";
    margin-left: 5px; 
}
    .innerpage-breadcrumbs span {
        margin: 0 6px;
    }

/* Title */
.innerpage-title {
  font-size: clamp(45px, 5vw, 64px);
  font-family: 'atbscript';
  margin-top: 40px;
  color: #EEC179;
}
.contentbdody {
    background-color: #000000;
}
    .contentbdody h1, .contentbdody h2, .contentbdody h3, .contentbdody h4, .contentbdody h5, .contentbdody h6{
        color:white;
    }
    /* =========================
   INNER PAGE - BLOCK LIST
   ========================= */
    :root {
        --bl-bg-1: rgba(22, 12, 8, .92);
        --bl-bg-2: rgba(6, 6, 6, .92);
        --bl-gold: #EEC179;
        --bl-gold-2: #caa35a;
        --bl-text: rgba(255,255,255,.92);
        --bl-text-dim: rgba(255,255,255,.72);
        --bl-border: rgba(255,255,255,.12);
        --bl-soft: rgba(255,255,255,.06);
        --bl-soft-2: rgba(255,255,255,.04);
        --bl-shadow: 0 18px 60px rgba(0,0,0,.55);
    }

/* =========================================================
   BLOCK LIST – WRAPPER
   ========================================================= */
/* =========================================
   PRODUCT BLOCK LIST (INNER BLOCKS ONLY)
   ========================================= */

.block-list-innerBlocks{
  width: 100%;
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(126, 60, 31, .4), rgba(0,0,0,0) 60%),
    linear-gradient(360deg, rgba(0, 0, 0, 1), rgba(0, 0, 0,1));
  padding: clamp(28px, 4vw, 56px) 0;
}

.block-list-innerBlocks-container{
  width: min(1280px, 92%);
  margin: 0 auto;
}

.block-list-innerBlocks-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* =========================
   CARD
   ========================= */

.block-list-innerBlocks-card{
  text-decoration: none;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 6px;
  border-radius: 18px;
  transition: transform .25s ease, filter .25s ease;
  outline: none;
}

.block-list-innerBlocks-card:hover{
  transform: translateY(-3px);
  filter: brightness(1.03);
}

.block-list-innerBlocks-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(238, 193, 121, 0.35);
}

/* =========================
   CIRCLE IMAGE
   ========================= */

.block-list-innerBlocks-circle {
    width: clamp(168px, 18vw, 240px);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    background: #0e0e0e;
    box-shadow: 0 18px 35px rgba(0,0,0,.55);
    background-image: url(/App_Themes/ThemeAr/Images/LAZ-watermark.png);
    background-size: contain;
}

/* Soft highlight */
.block-list-innerBlocks-circle::after{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(
    240px 170px at 30% 22%,
    rgba(255, 255, 255, 0.10),
    rgba(0,0,0,0) 55%
  );
  pointer-events:none;
}

.block-list-innerBlocks-img{
  width: 100%;
  height: 100%;
  object-fit: none;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.block-list-innerBlocks-card:hover .block-list-innerBlocks-img{
  transform: scale(1.08);
}

/* =========================
   TITLES
   ========================= */

.block-list-innerBlocks-title{
  width: 100%;
  text-align: center;
  line-height: 1.05;
  padding: 6px 0 2px;
}

.block-list-innerBlocks-titleTop{
  font-size: 20px;
  line-height: 18px;
  text-transform: uppercase;
  font-family: 'Roboto-Medium';
  margin-top: 20px;
  color: #ffffff;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-list-innerBlocks-titleScript{
  margin-top: -5px;
  font-size: 24px;
  color: #EEC179;
  font-family: 'atbscript';
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1024px){
  .block-list-innerBlocks-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:1400px) {
    .innersearch {
        padding: 0px 30px !important;
    }
}
@media (max-width: 760px){
  .block-list-innerBlocks-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px){
  .block-list-innerBlocks-grid{
    grid-template-columns: 1fr;
  }

  .block-list-innerBlocks-card{
    padding: 10px 6px;
  }

  .block-list-innerBlocks-circle{
    /*width: min(260px, 86vw);*/
  }
}
/* =========================================================
   FILTER BAR (FOR block-list-innerBlocks SECTION)
   - Design only (no JS)
   - Same theme (black + gold)
   - Bootstrap dropdown themed
   ========================================================= */

.block-list-filterWrap{
  width: 100%;
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.block-list-filterRow{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: clamp(14px, 1.8vw, 18px);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 10% 30%, rgba(238,193,121,0.10), rgba(0,0,0,0) 55%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(238,193,121,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.block-list-filterField{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  flex: 1 1 260px;
}

.block-list-filterLabel{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
}

.block-list-filterInput{
  height: 46px;
  border-radius: 350px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.block-list-filterInput::placeholder{
  color: rgba(255,255,255,.45);
}

.block-list-filterInput:focus{
  border-color: rgba(238,193,121,.60);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(238,193,121,.24);
}

/* Actions */
.block-list-filterActions{
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.block-list-filterBtn{
  height: 46px;
  padding: 0 18px;
  border-radius: 350px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}

.block-list-filterBtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.block-list-filterBtn--primary{
  background:transparent;
  border: 1px solid #EEC179;
  color: #EEC179;
}

.block-list-filterBtn--ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.9);
}

/* =========================================================
   BOOTSTRAP DROPDOWN THEME (FILTER)
   ========================================================= */

.block-list-filterDropdown{
  width: 100%;
}

.block-list-filterDropdownBtn{
  width: 100%;
  height: 46px;
  border-radius: 350px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.block-list-filterDropdownBtn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(238,193,121,.28);
}

.block-list-filterDropdownBtn:focus{
  box-shadow: 0 0 0 3px rgba(238,193,121,.24);
  border-color: rgba(238,193,121,.60);
}

.block-list-filterDropdownMenu{
  background: rgba(10,10,10,.98);
  border: 1px solid rgba(238,193,121,.22);
  border-radius: 14px;
  padding: 8px;
  width: 100%;
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}

.block-list-filterDropdownItem{
  border-radius: 10px;
  padding: 10px 12px;
  color: rgba(255,255,255,.88);
  transition: background .2s ease, color .2s ease;
}

.block-list-filterDropdownItem:hover,
.block-list-filterDropdownItem:focus{
  background: rgba(238,193,121,.14);
  color: #EEC179;
}

/* make bootstrap caret gold */
.block-list-filterDropdown .dropdown-toggle::after{
  border-top-color: rgba(238,193,121,.9);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 520px){
  .block-list-filterField{
    min-width: 100%;
    flex-basis: 100%;
  }

  .block-list-filterActions{
    width: 100%;
  }

  .block-list-filterBtn{
    width: 100%;
  }
}





/* =========================
   PAGINATION - SAME THEME
   ========================= */

.innerPagination{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: clamp(20px, 2.5vw, 30px) 0 clamp(30px, 4.5vw, 80px);
  flex-wrap: wrap;
  background-color: #000;
}

.innerPagination-page,
.innerPagination-btn{
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  user-select: none;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);

  box-shadow: 0 14px 26px rgba(0,0,0,0.45);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.innerPagination-page:hover,
.innerPagination-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(216,176,106,0.35);
  color: #ffffff;
}

.innerPagination-page:focus-visible,
.innerPagination-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,176,106,0.35), 0 14px 26px rgba(0,0,0,0.45);
}

/* Active page */
.innerPagination-page.is-active{
  /* background: linear-gradient(135deg, rgba(216,176,106,0.95), rgba(216,176,106,0.55)); 
  border-color: rgba(216,176,106,0.70);*/
  background-color: #EEC179;
  border-color: rgba(216,176,106,0.70);
  color: #111;
  font-weight: 700;
}

/* Icon buttons */
.innerPagination-btn--icon{
  padding: 0;
  width: 44px;
}

.innerPagination-ic{
  width: 20px;
  height: 20px;
}

/* Ellipsis */
.innerPagination-ellipsis{
  color: rgba(255,255,255,0.55);
  padding: 0 4px;
  font-size: 18px;
  line-height: 1;
}

/* Small screens */
@media (max-width: 420px){
  .innerPagination{
    gap: 4px;
  }
  .innerPagination-page,
  .innerPagination-btn{
    height: 42px;
    min-width: 42px;
    padding: 0 12px;
  }
}










/* List View inner page style  */
/* ################# */
/* ################# */
/* ################# */
/* ################# */
/* ################# */



/* =========================
   LIST VIEW – PAGE
   ========================= */

.list-view-wrapper{
  width: 100%;
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(126, 60, 31, .4), rgba(0,0,0,0) 60%),
    linear-gradient(360deg, rgba(0, 0, 0, 1), rgba(0, 0, 0,1));
  padding: clamp(28px, 4vw, 60px) 0;
  color: #fff;
}

.list-view-container{
  width: min(1280px, calc(100% - 26px));
  margin: 0 auto;
}

/* Header */
.list-view-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.list-view-title{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  color: #EEC179;
}

.list-view-subtitle{
  margin-top: 6px;
  color: rgba(255,255,255,.7);
  max-width: 520px;
}

/* Filters (UI only) */
.list-view-filters{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.list-view-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}

.list-view-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
}

.list-view-input{
  height: 44px;
  padding: 0 14px;
  border-radius: 350px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}

.list-view-input:focus{
  outline: none;
  border-color: rgba(238,193,121,.6);
}

/* Buttons */
.list-view-btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 350px;
  cursor: pointer;
  transition: .25s ease;
}

.list-view-btn-search{
  background: transparent;
  border: 1px solid #EEC179;
  color: #EEC179;
}

.list-view-btn-reset{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
}

.list-view-btn:hover{
  transform: translateY(-1px);
}

/* Cards Grid */
.list-view-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}

/* Card */
.list-view-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  min-height: clamp(280px, 35vw, 470px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Background Image */
.list-view-bg-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay */
.list-view-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(65, 27, 13, 1) 52%,
    rgba(65, 27, 13, 0) 83%
  );
}

/* Content */
.list-view-content{
  position: relative;
  z-index: 2;
  padding: clamp(22px, 3.2vw, 42px)
           clamp(22px, 3.2vw, 42px)
           clamp(35px, 5vw, 74px);
  max-width: 640px;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.list-view-content-text{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.list-view-date{
  font-size: 13px;
  color: rgba(255,255,255,.7);
}

.list-view-card-title{
  font-size: clamp(18px, 2.2vw, 24px);
  color: #EEC179;
  letter-spacing: -0.45px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-view-card-desc{
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.7;
  color: rgba(255,255,255,.72);
  max-width: 550px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read More */
.list-view-readmore{
  width: fit-content;
  border-radius: 50px;
  background-color: #EEC179;
  color: #000 !important;
  padding: 12px 35px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: 'Roboto-Medium';
  text-decoration: none;
}

.list-view-readmore img{
  width: 13px;
}

/* Responsive */
@media (max-width: 900px){
  .list-view-overlay{
    background: linear-gradient(180deg, rgba(65,27,13,0.9) 0%, rgba(65,27,13,0.9) 92%);
  }

  .list-view-content{
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .list-view-field,
  .list-view-btn{
    width: 100%;
  }
}






/* =========================
   DOCUMENT LIST – THEME
   (No :root, all document-list-*)
   ========================= */

.document-list-wrapper{
  width: 100%;
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(126, 60, 31, .28), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgb(0, 0, 0), rgb(0, 0, 0));
  padding: clamp(28px, 4vw, 60px) 0;
  color: rgba(255,255,255,.92);
}

.document-list-container{
  width: min(1280px, calc(100% - 26px));
  margin: 0 auto;
}

/* Header */
.document-list-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  padding: clamp(14px, 1.8vw, 18px);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 10% 30%, rgba(238,193,121,0.10), rgba(0,0,0,0) 55%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(238,193,121,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  margin-bottom: clamp(18px, 2.6vw, 26px);
}

.document-list-header-text{
  max-width: 560px;
}

.document-list-title{
  margin: 0;
  font-size: clamp(22px, 2.6vw, 34px);
  color: #EEC179;
  letter-spacing: -0.4px;
}

.document-list-subtitle{
  margin: 8px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  font-size: clamp(14px, 1.5vw, 16px);
}

/* Search */
.document-list-search{
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 340px;
  flex: 1 1 360px;
}

.document-list-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
}

.document-list-searchbox{
  display: flex;
  gap: 10px;
  width: 100%;
}

.document-list-input{
  height: 46px;
  border-radius: 350px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  outline: none;
  flex: 1 1 auto;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.document-list-input::placeholder{
  color: rgba(255,255,255,.45);
}

.document-list-input:focus{
  border-color: rgba(238,193,121,.60);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(238,193,121,.24);
}

.document-list-btn{
  height: 46px;
  padding: 0 18px;
  border-radius: 350px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}

.document-list-btn-search{
  background: transparent;
  border: 1px solid #EEC179;
  color: #EEC179;
}

.document-list-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Card */
.document-list-card{
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(238,193,121,0.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

/* Table wrapper (enables horizontal scroll on mobile) */
.document-list-table-wrap{
  width: 100%;
  overflow-x: auto;
}

.document-list-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px; /* keeps columns readable */
}

/* Head */
.document-list-th{
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
  padding: 16px 18px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  white-space: nowrap;
}

.document-list-th--type,
.document-list-td--type{
  width: 140px;
}

.document-list-th--size,
.document-list-td--size{
  width: 140px;
  white-space: nowrap;
}

.document-list-th--actions,
.document-list-td--actions{
  width: 220px;
  white-space: nowrap;
}

/* Body */
.document-list-row{
  transition: background .2s ease;
}

.document-list-row:hover{
  background: rgba(238,193,121,0.06);
}

.document-list-td{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,.88);
  vertical-align: middle;
}

/* File cell */
.document-list-file{
  display: flex;
  align-items: center;
  gap: 12px;
}

.document-list-file-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(238,193,121,0.12);
  border: 1px solid rgba(238,193,121,0.18);
  flex: 0 0 auto;
}
.document-list-file-icon img{
  width: auto;
  height: auto;
}

.document-list-file-meta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.document-list-file-name{
  font-weight: 600;
  color: rgba(255,255,255,.92);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.document-list-file-sub{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* Type chip */
.document-list-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,.88);
}

.document-list-chip--pdf{
  border-color: rgba(238,193,121,0.30);
  background: rgba(238,193,121,0.12);
  color: #EEC179;
}

.document-list-chip--xlsx{
  border-color: rgba(120, 210, 150, 0.25);
  background: rgba(120, 210, 150, 0.10);
  color: rgba(170, 255, 205, 0.95);
}

.document-list-chip--zip{
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.90);
}

/* Actions */
.document-list-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.document-list-action{
  text-decoration: none;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}

.document-list-action:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.document-list-action--view{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,.92);
}

.document-list-action--download{
  background: transparent;
  border: 1px solid #EEC179;
  color: #EEC179;
}

/* Empty */
.document-list-empty{
  padding: 16px;
  color: rgba(255,255,255,.72);
  text-align: center;
}

/* Responsive */
@media (max-width: 520px){
  .document-list-search{
    min-width: 100%;
  }
  .document-list-searchbox{
    flex-direction: column;
  }
  .document-list-btn{
    width: 100%;
  }
}