.elementor-kit-10{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-848a394:#273C57;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 a{font-family:"Montserrat", Sans-serif;}.elementor-kit-10 h1{font-family:"Montserrat", Sans-serif;}.elementor-kit-10 h2{font-family:"Montserrat", Sans-serif;}.elementor-kit-10 h3{font-family:"Montserrat", Sans-serif;}.elementor-kit-10 h4{font-family:"Montserrat", Sans-serif;}.elementor-kit-10 h5{font-family:"Montserrat", Sans-serif;}.elementor-kit-10 h6{font-family:"Montserrat", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.page-header {
    display: none !important;
}
/* Mobile menu improvements — uses your existing menu item classes (safe) */
@media (max-width: 767px) {

  /* Center the mobile menu content and keep rows stacked */
  .elementor-nav-menu, 
  .elementor-mobile-menu, 
  .elementor-widget-nav-menu .elementor-nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 14px;
  }

  /* Underline / divider for each menu row */
  .elementor-nav-menu .menu-item > a,
  .elementor-widget-nav-menu .elementor-nav-menu .menu-item > a {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 14px 18px;
    color: #273C57;               /* SpinWin navy */
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(39,60,87,0.06);
    box-sizing: border-box;
  }

  /* Remove divider on the last visible row */
  .elementor-nav-menu .menu-item:last-child > a,
  .elementor-widget-nav-menu .elementor-nav-menu .menu-item:last-child > a {
    border-bottom: none;
  }

  /* Add breathing room before the action buttons */
  .elementor-nav-menu .menu-item.login-btn,
  .elementor-nav-menu .menu-item.register-btn {
    margin-top: 18px;
  }

  /* STYLE: Log in (white outlined pill) */
  .elementor-nav-menu .menu-item.login-btn > a,
  .elementor-widget-nav-menu .menu-item.login-btn > a {
    display: inline-block !important;
    max-width: 260px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #ffffff !important;
    color: #273C57 !important;
    border: 1px solid rgba(39,60,87,0.08) !important;
    font-weight: 800;
    text-align: center;
    box-shadow: none !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* STYLE: Register (orange gradient pill) */
  .elementor-nav-menu .menu-item.register-btn > a,
  .elementor-widget-nav-menu .menu-item.register-btn > a {
    display: inline-block !important;
    max-width: 260px;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg,#ff8a2a 0%, #f04b26 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(240,75,38,0.12) !important;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 6px 18px rgba(240,75,38,0.12) !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Ensure those anchor buttons don't get overwritten by other button rules */
  .elementor-nav-menu .menu-item.login-btn > a,
  .elementor-nav-menu .menu-item.register-btn > a {
    line-height: 1;
  }

  /* Keep the menu close button in top-right inside mobile overlay */
  .elementor-menu-toggle,
  .elementor-mobile-menu-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 9999 !important;
  }

  /* Slight spacing tweak for normal menu rows */
  .elementor-nav-menu .menu-item > a { padding-top: 16px; padding-bottom: 16px; }

}
/* Replace Accordion "+" icon with ">" */
.elementor-accordion .elementor-accordion-icon.elementor-accordion-icon-right i:before {
    content: "›" !important; /* the > symbol */
    font-size: 22px;
    font-weight: 700;
}

/* Rotate icon when tab is active */
.elementor-accordion .elementor-active .elementor-accordion-icon i:before {
    transform: rotate(90deg);
    display: inline-block;
}
/* ---------- Page root gradient (if not already added) ---------- */
html {
  background: linear-gradient(
    135deg,
    rgba(240, 248, 250, 0.98) 0%,
    rgba(232, 241, 243, 0.98) 30%,
    rgba(223, 240, 245, 0.85) 60%,
    rgba(212, 195, 92, 0.22) 100%
  ) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
body { background: transparent !important; }

/* ---------- Override the specific elementor .elementor-kit-10 (from your inspector) ---------- */
/* This targets the hero wrapper you highlighted and forces it transparent */
.elementor-11 .elementor-element.elementor-element-984ed95,
.elementor-11 .elementor-element.elementor-element-984ed95 .e-con-inner,
.elementor-11 #hero-top,
.elementor-11 #hero-top .e-con-inner {
  background-color: transparent !important;
  background-image: none !important;
}

/* ---------- Make all sections/columns on this page transparent so the root gradient shows ---------- */
/* Limits the rule to the page that uses .elementor-11 (your current page) to avoid site-wide surprises */
.elementor-11 .elementor-section,
.elementor-11 .elementor-column,
.elementor-11 .elementor-widget-wrap,
.elementor-11 .elementor-container {
  background: transparent !important;
  background-image: none !important;
}

/* ---------- If you prefer subtle white cards that still show the gradient slightly ---------- */
/* Replace the previous block for .elementor-11 .elementor-section if you prefer a card look */
/*
.elementor-11 .elementor-section {
  background: rgba(255,255,255,0.94) !important;
}
*/
/* --- YOUR OLD GRADIENT CSS HERE (KEEP IT) --- */


/* --- NEW FIX --- */
/* Remove forcing-white backgrounds across your entire page */
.elementor-11 .elementor-element,
.elementor-11 .elementor-element > .e-con-inner,
.elementor-11 .elementor-section,
.elementor-11 .elementor-container,
.elementor-11 .elementor-column,
.elementor-11 .elementor-widget-wrap {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Specifically override the white background from your inspector screenshot */
.elementor-element-984ed95 {
    background: transparent !important;
}
.footer-white-box {
  background: linear-gradient(180deg, #ffffff 0%, #f0f8fa 100%) !important;
  border: 1px solid rgba(39,60,87,0.08);
  box-shadow: 0 6px 18px rgba(39,60,87,0.08);
  border-radius: 12px;
}
/* Footer menu hover fix */
footer .menu a:hover,
.elementor-location-footer .menu a:hover,
.elementor-location-footer .wp-block-navigation-link:hover {
  background: rgba(39, 60, 87, 0.08) !important;
  color: #273C57 !important;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

/* Slight active state too */
footer .menu .current-menu-item > a,
.elementor-location-footer .menu .current-menu-item > a {
  background: rgba(39, 60, 87, 0.12) !important;
  border-radius: 8px;
}
/* Fix dark hover / active background in footer menu on MOBILE */
@media (max-width: 768px) {

  /* This targets the WordPress Menu widget inside Elementor */
  .elementor-widget-wp-widget-nav_menu .menu li,
  .elementor-widget-wp-widget-nav_menu .menu li a,
  .elementor-widget-wp-widget-nav_menu .menu li.current-menu-item > a,
  .elementor-widget-wp-widget-nav_menu .menu li a:hover,
  .elementor-widget-wp-widget-nav_menu .menu li a:focus,
  .elementor-widget-wp-widget-nav_menu .menu li a:active {
    background-color: transparent !important;  /* 🔥 removes the dark block */
    color: #273C57 !important;                 /* keep your navy text */
  }

  /* Optional: add a *very* soft hover so it doesn’t look dead */
  .elementor-widget-wp-widget-nav_menu .menu li a:hover {
    background-color: rgba(39, 60, 87, 0.04) !important;
    border-radius: 6px;
  }
}
/* ================================
   Scoped FAQ Styling
   ================================ */

/* Space below category tabs */
.spinwin-faq .elementor-tabs-wrapper {
  margin-bottom: 20px;
}

/* Individual FAQ rows (cards) */
.spinwin-faq .elementor-accordion-item,
.spinwin-faq .elementor-toggle-item {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  margin-bottom: 14px;
  overflow: hidden;
  border: none;
}

/* Question row */
.spinwin-faq .elementor-tab-title {
  padding: 18px 22px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Answer area */
.spinwin-faq .elementor-tab-content {
  background: rgba(255, 255, 255, 0.75);
  padding: 0 22px 18px;
}

/* Arrow animation (polish) */
.spinwin-faq 
.elementor-accordion-item.elementor-active 
.elementor-tab-title 
.elementor-accordion-icon i,
.spinwin-faq 
.elementor-toggle-item.elementor-active 
.elementor-tab-title 
.elementor-toggle-icon i {
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}
/* FAQ category nav – layout */
.spinwin-faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 26px;
}

/* Base style for category buttons */
.spinwin-faq-nav .faq-nav-btn .elementor-button {
  border-radius: 999px;
  padding: 10px 28px;
  font-weight: 700;
  font-size: 15px;
  background: #f4fbfd !important;           /* light pill */
  color: #273c57 !important;                /* dark blue text */
  border: none !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

/* Active category button */
.spinwin-faq-nav .faq-nav-btn.is-active .elementor-button {
  background: #f7931e !important;           /* SpinWin orange */
  color: #ffffff !important;
}

/* Hover state */
.spinwin-faq-nav .faq-nav-btn .elementor-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Mobile: full-width stacked */
@media (max-width: 768px) {
  .spinwin-faq-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .spinwin-faq-nav .faq-nav-btn {
    width: 100%;
  }

  .spinwin-faq-nav .faq-nav-btn .elementor-button {
    width: 100% !important;
    display: block !important;
    justify-content: center;
    text-align: center;
  }
}

/* Hide all FAQ sections by default; JS will show the active one */
.spinwin-faq .faq-section {
  display: none;
}

/* Active FAQ section */
.spinwin-faq .faq-section.is-active {
  display: block;
}
.brand-tab-playjag {
  border-radius: 12px;
  overflow: hidden;
  display: inline-block;
  background: transparent !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  line-height: 0;
}

.brand-tab-playjag img {
  display: block;
  border-radius: 12px;
}/* End custom CSS */