/* Ensure all elements inherit the color from its parent */
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-nav-brand,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-slider-arrow-left,
.w-slider-arrow-right,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
	pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}
/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}
/* These classes are never overwritten */
.hide {
  display: none !important;
}
/* Remove default Webflow chevron from form select */
select{
  -webkit-appearance:none;
}
@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}
.margin-0 {
  margin: 0rem !important;
}
.padding-0 {
  padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}
.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
.truncate-width { 
		width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none; 
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
:root { --shadow: 10px 10px 0 0 #000; }

/* Color Schemes Controls*/
<meta name="relume-color-schemes" content="false"/>
  .color-scheme-1 {
/*All sections should point to Color Scheme 1*/
  }
  .color-scheme-2 {
    --color-scheme-1--text: var(--color-scheme-2--text);
    --color-scheme-1--background: var(--color-scheme-2--background);
    --color-scheme-1--foreground: var(--color-scheme-2--foreground);
    --color-scheme-1--border: var(--color-scheme-2--border);
    --color-scheme-1--accent: var(--color-scheme-2--accent);
  }
  .color-scheme-3 {
    --color-scheme-1--text: var(--color-scheme-3--text);
    --color-scheme-1--background: var(--color-scheme-3--background);
    --color-scheme-1--foreground: var(--color-scheme-3--foreground);
    --color-scheme-1--border: var(--color-scheme-3--border);
    --color-scheme-1--accent: var(--color-scheme-3--accent);
  }
  .color-scheme-4 {
    --color-scheme-1--text: var(--color-scheme-4--text);
    --color-scheme-1--background: var(--color-scheme-4--background);
    --color-scheme-1--foreground: var(--color-scheme-4--foreground);
    --color-scheme-1--border: var(--color-scheme-4--border);
    --color-scheme-1--accent: var(--color-scheme-4--accent);
  }
  .color-scheme-5 {
    --color-scheme-1--text: var(--color-scheme-5--text);
    --color-scheme-1--background: var(--color-scheme-5--background);
    --color-scheme-1--foreground: var(--color-scheme-5--foreground);
    --color-scheme-1--border: var(--color-scheme-5--border);
    --color-scheme-1--accent: var(--color-scheme-5--accent);
  }
  .color-scheme-6 {
    --color-scheme-1--text: var(--color-scheme-6--text);
    --color-scheme-1--background: var(--color-scheme-6--background);
    --color-scheme-1--foreground: var(--color-scheme-6--foreground);
    --color-scheme-1--border: var(--color-scheme-6--border);
    --color-scheme-1--accent: var(--color-scheme-6--accent);
  }
  .color-scheme-7 {
    --color-scheme-1--text: var(--color-scheme-7--text);
    --color-scheme-1--background: var(--color-scheme-7--background);
    --color-scheme-1--foreground: var(--color-scheme-7--foreground);
    --color-scheme-1--border: var(--color-scheme-7--border);
    --color-scheme-1--accent: var(--color-scheme-7--accent);
  }
  .color-scheme-8 {
    --color-scheme-1--text: var(--color-scheme-8--text);
    --color-scheme-1--background: var(--color-scheme-8--background);
    --color-scheme-1--foreground: var(--color-scheme-8--foreground);
    --color-scheme-1--border: var(--color-scheme-8--border);
    --color-scheme-1--accent: var(--color-scheme-8--accent);
  }
  .color-scheme-9 {
    --color-scheme-1--text: var(--color-scheme-9--text);
    --color-scheme-1--background: var(--color-scheme-9--background);
    --color-scheme-1--foreground: var(--color-scheme-9--foreground);
    --color-scheme-1--border: var(--color-scheme-9--border);
    --color-scheme-1--accent: var(--color-scheme-9--accent);
  }
  .color-scheme-10 {
    --color-scheme-1--text: var(--color-scheme-10--text);
    --color-scheme-1--background: var(--color-scheme-10--background);
    --color-scheme-1--foreground: var(--color-scheme-10--foreground);
    --color-scheme-1--border: var(--color-scheme-10--border);
    --color-scheme-1--accent: var(--color-scheme-10--accent);
  }
/* Inherit slider dot colors */
.w-slider-dot {
  background-color: var(--color-scheme-1--text);
  opacity: 0.20;
}
.w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text);
  opacity: 1;
}
/* Override .w-slider-nav-invert styles */
.w-slider-nav-invert .w-slider-dot {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 0.20 !important;
}
.w-slider-nav-invert .w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 1 !important;
}
.swiper-slide.gallery { height: 280px; }
.swiper-slide.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home_comparison-2_content-2 { overflow: hidden; border: 1.5px solid #000; border-radius: 1rem; box-shadow: 0 0 0 0.5px #000; }
.home_comparison-2_list-row-2 { border: none !important; border-radius: 0 !important; }
/* Hide shadow on Coming Soon buttons inside court-header-wrap */
.court-header-wrap .shadow { display: none; }
/* Mobile: make all pricing tables horizontally scrollable */
@media (max-width: 767px) {
  .court-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rc-pricing-table { min-width: 520px; }
}
/* Membership card price value note */
.price-value-note { display: block; font-size: 1.1rem; font-weight: 600; color: #fd8b49; margin-top: 0.1rem; margin-bottom: 0.5rem; opacity: 0.9; }
/* Founding Membership card background */
.layout401_card-founding { background: linear-gradient(145deg, #fffbee 0%, #fef4d0 100%) !important; border: 1.5px solid #e8c84a !important; }
/* Operating hours spacing: tighten within-block, loosen between blocks */
.court-agenda-wrap .court-working-days .margin-top.margin-medium { margin-top: 0.4rem !important; }
.court-agenda-wrap h3.peak-times-heading { margin-top: 2.25rem !important; }
/* ── Recharge Center Premium Pricing Table ── */
.rc-pricing-table {
  width: 100%;
  border-radius: 1rem;
  border: 1.5px solid #000;
  box-shadow: 8px 8px 0 0 rgba(0,0,0,0.10);
  overflow: hidden;
  background: #fff;
}
.rc-row-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
}
.rc-thead { background: #1b2b72; }
.rc-th {
  padding: 1rem 0.65rem;
  color: #fff;
  text-align: center;
  font-family: 'Bruno Ace', cursive, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.rc-th:first-child {
  text-align: left;
  padding-left: 1.1rem;
  font-size: 0.67rem;
  opacity: 0.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rc-th:last-child { border-right: none; }
.rc-th-gold { background: rgba(253,200,73,0.13); }
.rc-section-hdr {
  display: flex;
  align-items: center;
  padding: 0.42rem 1rem 0.42rem 0;
  background: #f0f9ff;
  border-top: 1.5px solid rgba(0,0,0,0.12);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.rc-section-hdr::before {
  content: '';
  display: block;
  width: 4px;
  min-height: 1.4em;
  background: #fd8b49;
  flex-shrink: 0;
  margin-right: 0.75rem;
  align-self: stretch;
}
.rc-section-hdr-text {
  font-family: 'Bruno Ace', cursive, sans-serif;
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1b2b72;
}
.rc-section-hdr-icon { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.rc-data-row { border-bottom: 1px solid rgba(0,0,0,0.065); }
.rc-data-row:last-child { border-bottom: none; }
.rc-data-row:hover .rc-td { background: #fafeff; }
.rc-data-row:hover .rc-td-gold { background: #fff8f0; }
.rc-td {
  padding: 0.82rem 0.55rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(0,0,0,0.065);
  transition: background 0.14s;
}
.rc-td:first-child { justify-content: flex-start; text-align: left; padding-left: 1.1rem; border-right: 1px solid rgba(0,0,0,0.10); }
.rc-td:last-child { border-right: none; }
.rc-service { font-size: 0.875rem; font-weight: 500; color: #1b2b72; line-height: 1.35; }
.rc-price { font-size: 1.05rem; font-weight: 800; color: #111; }
.rc-td-gold { background: #fffcf5; }
.rc-timebadge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Bruno Ace', cursive, sans-serif;
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1b2b72;
  font-weight: 700;
}
.rc-timebadge::before {
  content: '';
  display: block;
  width: 3px;
  height: 1.1em;
  background: #fd8b49;
  border-radius: 2px;
  flex-shrink: 0;
}
.rc-free {
  display: inline-flex;
  align-items: center;
  padding: 0.17rem 0.55rem;
  background: #fd8b49;
  color: #fff;
  border-radius: 2rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'Bruno Ace', cursive, sans-serif;
}
@media (max-width: 767px) {
  .recharge-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .recharge-table-wrap .rc-pricing-table { min-width: 520px; }
  .rc-row-grid { grid-template-columns: 1.35fr 1fr 1fr 1fr 1fr; }
  .rc-th { font-size: 0.67rem; padding: 0.8rem 0.3rem; }
  .rc-th:first-child { padding-left: 0.6rem; }
  .rc-td { padding: 0.68rem 0.25rem; }
  .rc-td:first-child { padding-left: 0.6rem; }
  .rc-service { font-size: 0.74rem; }
  .rc-price { font-size: 0.9rem; }
}

/* ── JOOLA Certified Facility Section ── */
@keyframes cert-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes cert-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(1.08); }
}
/* top accent bar on all navy sections */
.section_home_layout-3,
.section_home_comparison-2,
.section_home_contact-2 {
  position: relative;
}
.section_home_layout-3::before,
.section_home_comparison-2::before,
.section_home_contact-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #fd8b49 30%, #daf7ff 70%, transparent 100%);
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}

.joola-cert-section {
  background: #1b2b72;
  position: relative;
  overflow: hidden;
}
.joola-cert-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 18% 50%, rgba(253,139,73,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 82% 50%, rgba(218,247,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.joola-cert-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.joola-cert-top-bar {
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #fd8b49 30%, #daf7ff 70%, transparent 100%);
  opacity: 0.7;
}
.joola-cert-bottom-bar {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(218,247,255,0.2) 50%, transparent 100%);
}
.joola-cert-inner {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding: 5rem 0;
  position: relative;
  z-index: 1;
}
.joola-cert-logo-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.joola-cert-seal-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
}
.joola-cert-seal-glow {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,139,73,0.22) 0%, transparent 70%);
  animation: cert-pulse 3.5s ease-in-out infinite;
}
.joola-cert-seal {
  width: 220px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.joola-cert-seal:hover {
  transform: scale(1.04) rotate(2deg);
}
.joola-cert-text-col {
  flex: 1 1 0;
  min-width: 0;
}
.joola-cert-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.9rem;
  background: rgba(253,139,73,0.15);
  border: 1px solid rgba(253,139,73,0.4);
  color: #fd8b49;
  font-family: 'Manrope', sans-serif;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}
.joola-cert-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fd8b49;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(253,139,73,0.8);
}
.joola-cert-heading {
  font-family: 'Bruno Ace', cursive, sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.18;
  margin: 0 0 1.25rem 0;
  letter-spacing: 0.01em;
}
.joola-cert-body {
  font-family: 'Manrope', sans-serif;
  font-size: 0.97rem;
  line-height: 1.8;
  color: rgba(218,247,255,0.75);
  max-width: 620px;
  margin: 0;
}
.joola-cert-body strong {
  color: #daf7ff;
  font-weight: 700;
}
@media (max-width: 767px) {
  .joola-cert-inner {
    flex-direction: column;
    gap: 2.5rem;
    padding: 3.5rem 0;
    text-align: center;
    align-items: center;
  }
  .joola-cert-seal-wrap { padding: 18px; }
  .joola-cert-seal { width: 160px; }
  .joola-cert-body { max-width: 100%; }
  .joola-cert-tag { margin: 0 auto 1.25rem; }
}

/* ── JOOLA Partnership Badge ── */
@keyframes joola-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes joola-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.joola-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  animation: joola-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.15s;
}
.joola-badge-logo {
  height: 30px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  flex-shrink: 0;
}
.joola-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: rgba(10, 16, 40, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(253, 139, 73, 0.18);
  overflow: hidden;
  position: relative;
}
.joola-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: joola-shimmer 3.5s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
.joola-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fd8b49;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(253, 139, 73, 0.7);
}
.joola-badge-text {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* ── JOOLA logo in footer ── */
.footer1_joola-logo {
  width: 160px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.footer1_joola-logo:hover {
  opacity: 1;
}