.rul-header {
  --rul-break: 1200px;
  background-color: var(--primary-black);
}
@media screen and (max-width: 991px) {
  .rul-header {
    max-height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .rul-header::-webkit-scrollbar {
    width: 0px;
    height: 0;
  }

  /* Instant open/close — Bootstrap height animation causes page flash */
  .rul-header .navbar-collapse.collapsing {
    transition: none !important;
    height: auto !important;
  }

  /* Full-viewport overlay while menu is open — hides page content behind */
  body.rul-header-open .rul-header.rul-header--mobile-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: none !important;
    transition: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background-color: var(--rul-header-bg, var(--primary-black)) !important;
    z-index: 99999 !important;
  }
}

body.rul-header-open {
  overflow: hidden;
  overscroll-behavior: none;
}

html.rul-scroll-locked,
body.rul-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.rul-header-open .rul-header {
  overscroll-behavior: contain;
}

/* Prevent body scroll when search overlay is open (iOS-safe — JS handles position:fixed) */
body.search-active {
  overflow: hidden;
}

.rul-header.stickyTop {
  /* kept for nav padding overrides below — positioning handled by fixed rule */
  width: 100%;
  z-index: 99997;
}
/* -------------------------------------------------------
 * Scroll-hide header: always fixed + translateY approach
 * JS slides the header up (navonly) or back (full) via transform.
 * #rul-header-spacer (injected by JS) keeps page content from
 * going under the fixed header.
 * ------------------------------------------------------- */
.rul-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99997;
  transition: transform 0.3s ease;
  will-change: transform;
}
/* Spacer injected by JS — matches the header's rendered height */
#rul-header-spacer {
  display: block;
  background-color: transparent;
  height: 107px;
}
.rul-header.stickyTop nav .navbar-brand {
  padding-bottom: 8px;
}
.rul-header.stickyTop nav .navbar-brand .nav-logo {
  height: 40px;
}
.rul-header.stickyTop nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu {
  top: 53px;
}
.rul-header.stickyTop nav .navbar-nav .nav-item .dropdown-menu {
  top: 49px;
}
.rul-header.stickyTop nav .navbar-nav .nav-item .nav-link {
  padding-top: 15px;
  padding-bottom: 15px;
}
.rul-header.stickyTop nav .navbar-nav .nav-item .nav-link.nav-button {
  padding: 8px 20px;
}
.rul-header.stickyTop nav .navbar-nav .nav-item .nav-link.metaverse-icon,
.rul-header.stickyTop nav .navbar-nav .nav-item .nav-link.search-button {
  width: 37px;
  height: 37px;
}
.rul-header .megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  padding: 15px;
}
.rul-header .megamenu-li {
  position: static;
}
.rul-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rul-header a {
  text-decoration: none !important;
}
@media screen and (max-width: 991px) {
  .rul-header nav.navbar {
    justify-content: flex-start;
  }
  #rul-header-spacer {
    height: 104px;
  }
}
.rul-header nav .navbar-brand {
  /* padding-top: 8px; */
  padding-top: 0;
  flex-shrink: 0;
}
.rul-header nav .navbar-brand .nav-logo {
  max-height: 55px;
  transition: all 0.3s linear;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-brand .nav-logo {
    height: 45px;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-toggler {
    background: none;
    border: none;
    padding: 0;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    margin-left: 13px;
  }
  .rul-header nav .navbar-toggler:active,
  .rul-header nav .navbar-toggler:focus,
  .rul-header nav .navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  .rul-header nav .navbar-toggler .icon-bar {
    width: 27px;
    height: 2px;
    border-radius: 10px;
    transition: all 0.4s linear;
    opacity: 1;
    background-color: var(--primary-white);
  }
  .rul-header nav .navbar-toggler .icon-bar:nth-of-type(1) {
    transform: rotate(45deg) translate(6px, 7px);
    transition-delay: 0.1s;
  }
  .rul-header nav .navbar-toggler .icon-bar:nth-of-type(2) {
    transform: translateX(60px);
    opacity: 0;
  }
  .rul-header nav .navbar-toggler .icon-bar:nth-of-type(3) {
    transform: rotate(315deg) translate(6px, -7px);
    transition-delay: 0.2s;
  }
  .rul-header nav .navbar-toggler.collapsed .icon-bar {
    transform: initial;
    opacity: 1;
  }
}
.rul-header nav .mobile-search-btn {
  display: flex;
  margin-left: auto;
  align-items: center;
}
.rul-header nav .mobile-search-btn .metaverse-icon,
.rul-header nav .mobile-search-btn .search-button {
  /* background-color: var(--primary-white);
  border: 1px solid var(--primary-color); */
  /* border-radius: 50%; */
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: #F5F5F5;
  padding: 0;
  
}
.rul-header nav .mobile-search-btn .nav-button {
  background-color: var(--primary-color);
  padding: 3px 12px;
  color: var(--primary-white);
  margin-right: 13px;
}
/* =====================================================================
   TOPBAR — restored from live branch
   ===================================================================== */
.rul-topbar-container {
      overflow: hidden;
      max-height: 60px;
      transition: .4s;
      opacity: 1;
    }
    .rul-topbar-container.topbar-hidden {
      max-height: 0;
      opacity: 0;
      transition: .4s;
      pointer-events: none;
    }
.rul-header .container {
  max-width: 1488px;
  width: 100%;
}
.container .rl-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
  flex-direction: row;
  font-size: 16px;
  padding: 10px 8px;
}
@media screen and (max-width: 991px) {
  .container .rl-topbar-inner {
    gap: 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  .search-button.desktop-search-btn {
    display: none;
  }
}

.rl-topbar-right {
  font-size: 16px;
  color: #F5F5F5;
  font-weight: 500;
}
.rl-topbar-right .dynamic-phone-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 0;
  letter-spacing: -0.018em;
  color: #F5F5F5;
  line-height: 1.25;
}
.rl-topbar-right .dynamic-phone-number:hover {
  color: #F5F5F5;
}
.rl-topbar-right .dynamic-phone-number .phone-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.desktop-search-btn {
  color: #F5F5F5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
  cursor: pointer;
}
.desktop-search-btn:hover {
  color: var(--rul-primary-color, var(--primary-color));
}

/* Mobile topbar CTA */
.rul-topbar-mobile-cta {
  display: none;
}
.rul-topbar-mobile-cta .menu-button {
  background-color: var(--primary-color);
  padding: 3px 12px;
  color: var(--primary-white);
  border-radius: 30px;
  font-size: 14px;
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  .rl-topbar-right .rl-country-flag,
  .rl-topbar-right .dynamic-phone-number .phone-icon {
    display: none;
  }
  .rul-header.rul-header--dark .rul-topbar-container {
    border-bottom: 1px solid #322b2b9c;
  }
  .rul-header {
    box-shadow: 0px 1px 7px #5c585891;
  }
  /* body.rul-header-open .rul-header {
      padding-bottom: 250px;
  } */
  /* Extra bottom padding when a mega-menu dropdown is open on mobile/tablet.
     Compensates for the browser's URL/toolbar eating into the viewport,
     which would hide the bottom of the menu and push the CTA off-screen. */
  body.rul-header-open .rul-header.rul-dropdown-open {
      padding-bottom: 100px;
  }
}

/* =====================================================================
   NAV STRIP  ·  Figma #398:13677  ·  height: 80px
   ===================================================================== */

/* Nav wrapper max-width matches header container */
.rul-nav-wrap, .rul-header-topbar-wrap {
  max-width: 1488px !important;
  margin: 0 auto;
}

/* Navbar reset */
.rul-navbar {
  padding: 0;
  position: relative;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 991px) {
  .rul-navbar {
    min-height: 60px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .rul-navbar .navbar-toggler {
    margin-left: auto;
  }
}

/* Collapse area: 3-column grid centering — desktop only */
/* Logo | [centered pill] | Right controls */
@media screen and (min-width: 992px) {
  .rul-navbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0;
  }
  /* Col 1: logo */
  .rul-navbar .rul-logo-link {
    grid-column: 1;
  }
  /* Col 2: collapse (nav pill) — centered in middle column */
  .rul-navbar .navbar-collapse {
    grid-column: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
  }
  /* Col 3: right controls — pushed to end */
  .rul-navbar .rul-nav-right {
    grid-column: 3;
    display: flex !important;
    align-items: center;
    position: static !important;
    right: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
  }
  /* Toggler not needed on desktop */
  .rul-navbar .navbar-toggler {
    display: none !important;
  }
}
@media screen and (max-width: 991px) {
  .rul-navbar .navbar-collapse {
    position: static !important;
    transform: none !important;
    width: 100%;
  }
  .rul-navbar .rul-nav-right .rul-nav-search {
    display: none !important;
  }
}

/* Logo — Figma: 210×80 */
.rul-logo-link {
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.rul-logo-link .nav-logo {
  max-height: 55px;
  transition: height 0.3s linear;
}

/* ── Nav pill — DESKTOP ONLY ── */
/* Figma: rgba(255,255,255,0.07) bg | radius:50px */
@media screen and (min-width: 992px) {
  .rul-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    gap: 0;
  }
}
/* Mobile base reset */
@media screen and (max-width: 991px) {
  .rul-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    background: transparent;
    border-radius: 0;
  }
}

/* Nav items inside pill — DESKTOP */
/* Figma: padding 22px 18px | Open Sans Medium 500 | 16px | lh:20px | ls:0.01em */
@media screen and (min-width: 992px) {
  .rul-nav-list .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 22px 18px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #fff !important;
    white-space: nowrap;
    text-decoration: none !important;
    transition: color 0.2s ease;
    border-bottom: none !important;
    transform: translateY(-3px);
  }
  .rul-nav-list .nav-item .nav-link:hover {
    color: rgba(255,255,255,0.8) !important;
  }
}

/* Active indicator — DESKTOP only */
/* Active indicator — DESKTOP only */
/* Figma: orange underline under the nav text, no border box */
@media screen and (min-width: 992px) {

  /* Kill Bootstrap dropdown-toggle ::after caret completely on desktop */
  .rul-header .nav-item .nav-link.dropdown-toggle::after {
    display: none !important;
    content: none !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Nav-link base: position relative for underline */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item > .nav-link {
    position: relative;
    padding-bottom: 32px !important;
    margin-bottom: -15px !important;
  }

  /* UNDERLINE via ::before — free from Bootstrap interference */
  /* Active page item */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.rul-nav-item--active > .nav-link::before {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    top: 0px;
    left: 11px !important;
    right: 0 !important;
    bottom: 25px !important;
    z-index: -1;
    border: 0px solid transparent;
    border-bottom-width: 2px;
    border-bottom-color: var(--primary-color);
    border-radius: 7px;
    width: 80%; 
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.mm-s1-trigger.rul-nav-item--active > .nav-link::before {
    width: 63% !important;    
  }

  /* Open dropdown state — .show class (Bootstrap click) */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.show > .nav-link::before {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    top: 0px;
    left: 11px !important;
    right: 0 !important;
    bottom: 25px !important;
    z-index: -1;
    border: 0px solid transparent;
    border-bottom-width: 2px;
    border-bottom-color: var(--primary-color);
    border-radius: 7px;
    width: 80%; 
  }

  /* Hover on non-active, non-open items */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item:not(.rul-nav-item--active):not(.show) > .nav-link:hover::before {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    top: 0px;
    left: 11px !important;
    right: 0 !important;
    bottom: 25px !important;
    z-index: -1;
    border: 0px solid transparent;
    border-bottom-width: 2px;
    border-bottom-color: var(--primary-color);
    border-radius: 7px;
    width: 80%;   
  }

  /* .rul-header nav .navbar-nav.rul-nav-list .nav-item.mm-s1-trigger:not(.rul-nav-item--active):not(.show) > .nav-link:hover::before,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.mm-s1-trigger:has(> .dropdown-menu.show) > .nav-link::before,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.mm-s1-trigger.mm-open > .nav-link::before {
    width: 63% !important;
  } */

  /* Keep underline while dropdown menu is open/hovered (CSS :has — desktop hover menus) */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item:has(> .dropdown-menu.show) > .nav-link::before,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.mm-open > .nav-link::before {
    content: '' !important;
    position: absolute !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    
    top: 0px;
    left: 11px !important;
    right: 0 !important;
    bottom: 25px !important;
    z-index: -1;
    border: 0px solid transparent;
    border-bottom-width: 2px;
    border-bottom-color: var(--primary-color);
    border-radius: 7px;
    width: 80%; 
  }

  /* Kill ::after on active/show/hover nav-links — never use it for underline */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.rul-nav-item--active > .nav-link::after,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.show > .nav-link::after,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item:not(.rul-nav-item--active):not(.show):hover > .nav-link::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Chevron icon inside nav link — DESKTOP only */
@media screen and (min-width: 992px) {
  .rul-chevron {
    display: flex;
    align-items: center;
    color: #fff;
    opacity: 0.7;
    margin-left: 2px;
    margin-top: 3px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    height: 12px;
  }
  .rul-nav-list .nav-item.show > .nav-link .rul-chevron,
  .rul-nav-list .nav-item:hover > .nav-link .rul-chevron {
    transform: rotate(-180deg);
  }
}
@media screen and (max-width: 991px) {
  .rul-chevron {
    display: none !important;
  }
}

/* ── Right controls: search + CTA ── */
.rul-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  /* margin-left: auto handled by collapse flex layout */
}

/* Search icon — Figma: 37×37 | radius:18.5px */
.rul-nav-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 18.5px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none !important;
}
.rul-nav-search:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* Let's Talk CTA — Figma: var(--primary-color) | radius:50px | padding:12px 20px | SemiBold 600 16px | arrow icon 12×12 */
.rul-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  background-color: var(--rul-primary-color, var(--primary-clr, #1c92d1));
  border-radius: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: background-color 0.2s ease;
}
.rul-nav-cta:hover {
  background-color: var(--rul-button-hover-color, var(--secondary-clr, #0048a1));
  color: #fff !important;
}
.rul-nav-cta-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.rul-nav-cta:hover .rul-nav-cta-icon {
  transform: translateX(2px);
}

/* Sticky state — shrink logo + reduce padding */
.rul-header.stickyTop .rul-logo-link .nav-logo {
  height: 40px;
}
.rul-header.stickyTop .rul-nav-list .nav-item .nav-link {
  padding-top: 15px;
  padding-bottom: 15px;
}
.rul-header.stickyTop .rul-navbar {
  min-height: 53px;
}

/* Mobile overrides */
@media screen and (max-width: 991px) {
  .rul-logo-link .nav-logo { height: 45px; }
  .rul-logo-link { padding: 7px 0; }
  .rul-nav-right { display: none !important; }

  /* Full-width stacked nav list */
  .rul-nav-list,
  .rul-header nav .navbar-nav.rul-nav-list {
    background: transparent !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    display: block !important;
    width: 100% !important;
    padding: 0 0 28px !important;
    border-top: 1px solid var(--rul-mobile-nav-divider, rgba(255, 255, 255, 0.12)) !important;
    margin-top: 5px !important;
  }

  /* Full-width items */
  .rul-nav-list .nav-item,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item {
    width: 100% !important;
    display: block !important;
  }

  /* Full-width links with bottom border */
  .rul-nav-list .nav-item .nav-link,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item .nav-link {
    display: flex !important;
    width: 100% !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--rul-mobile-nav-item-border, rgba(255, 255, 255, 0.35)) !important;
    margin-right: 0 !important;
    white-space: normal !important;
    justify-content: space-between !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--rul-mobile-nav-link, #fff) !important;
  }

  /* Hide active indicator on mobile, but keep the dropdown caret visible */
  .rul-nav-item--active > .nav-link::before,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.rul-nav-item--active > .nav-link::before {
    display: none !important;
  }

  /* Restore Bootstrap mobile dropdown arrow */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item .dropdown-toggle::after {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 25px !important;
    right: 0 !important;
  }
}

/* Mobile search icon (direct child of navbar on mobile) */
.rul-mobile-search {
  width: 33px;
  height: 33px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  cursor: pointer;
  margin-left: auto;
  margin-right: 8px;
}
@media screen and (max-width: 991px) {
  .rul-mobile-search {
    display: flex;
  }
}

/* Remove old rul-mobile-controls wrapper styles */
.rul-mobile-controls {
  display: none;
}

/* Keep existing navbar-nav for mobile accordion (needed by scripts.js) */
.rul-header nav .navbar-nav {
  align-items: center;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav {
    align-items: flex-start;
  }
  .rul-header nav .navbar-brand {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* ── Override old navbar-nav specificity for new rul-nav-list ── */
/* Desktop only: pill layout, row direction, no borders */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav.rul-nav-list {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50px;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    border-top: none;
    margin-top: 0;
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item {
    width: auto;
  }
  /* . {
    padding: 12px 23px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #fff !important;
    border-bottom: none !important;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  } */
  /* Active/open nav item — clean slate, underline handled by the block above */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.rul-nav-item--active > .nav-link,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.show > .nav-link {
    border: none !important;
    border-radius: 0 !important;
    position: relative;
  }
  /* Kill ::after only — ::before is used for the orange underline */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.rul-nav-item--active > .nav-link::after,
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.show > .nav-link::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  /* Hide Bootstrap dropdown caret on desktop — we use rul-chevron instead */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item .dropdown-toggle::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav.rul-nav-list {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 0 28px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    border-top: 1px solid var(--rul-mobile-nav-divider, rgba(216, 211, 223, 0.1)) !important;
    margin-top: 5px !important;
    gap: 0 !important;
    padding-top: 20px !important;
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item {
    width: 100% !important;
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item .nav-link {
    display: flex !important;
    width: 100% !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--rul-mobile-nav-item-border, rgba(216, 211, 223, 0.1)) !important;
    color: var(--rul-mobile-nav-link, #fff) !important;
    white-space: normal !important;
    justify-content: space-between;
    align-items: center;
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item:last-of-type .nav-link {
      border-bottom: none !important;
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item.rul-nav-item--active > .nav-link::before {
    display: none !important;
  }
  .rul-chevron {
    display: none !important;
  }
  /* Restore mobile dropdown-toggle arrow */
  .rul-header nav .navbar-nav.rul-nav-list .nav-item .dropdown-toggle {
    position: relative;
    padding-right: 30px;
  }
  .rul-header nav .navbar-nav.rul-nav-list .nav-item .dropdown-toggle::after {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: var(--icon-size);
    height: var(--icon-size);
    background-position: center center;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item {
    width: 100%;
  }
}
.rul-header nav .navbar-nav .nav-item.mobile-last-item .nav-link {
  border-bottom-color: transparent;
  transition: border 0s;
}
.rul-header nav .navbar-nav .nav-item.mobile-last-item .nav-link.active {
  border-bottom-color: var(--rul-mobile-nav-item-border, rgba(255, 255, 255, 0.35));
}

/* ── Mobile nav footer CTA — Figma #497:5209 ── */
/* Figma: padding:24px 16px | full-width btn | height:44px | var(--primary-color) | radius:50px */
.rul-mobile-nav-footer {
  padding: 24px 16px;
  padding-top: 0;
  padding-bottom: 200px;
}
@media screen and (min-width: 992px) {
  .rul-mobile-nav-footer {
    display: none !important;
  }
}

/* Full-width "Let's Talk" button */
/* Figma #497:5275 | Open Sans SemiBold 600 | 16px | white | row centered */
.rul-mobile-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  background-color: var(--rul-primary-color, var(--primary-clr, #1c92d1));
  border-radius: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: background-color 0.2s ease;
}
.rul-mobile-nav-cta:hover {
  background-color: var(--rul-button-hover-color, var(--secondary-clr, #0048a1));
  color: #fff !important;
  text-decoration: none !important;
}
.rul-mobile-nav-cta svg {
  flex-shrink: 0;
}
.rul-header nav .navbar-nav .nav-item.mobile-last-item .dropdown-menu .dropdown-item:last-child {
  border: none;
}
.rul-header nav .navbar-nav .nav-item .nav-link {
  font-size: var(--default-font-size);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.01em;
  color: var(--primary-white) !important;
  white-space: nowrap;
  padding: 22px 24px;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .nav-link {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--rul-mobile-nav-item-border, rgba(255, 255, 255, 0.35));
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 5px !important;
  }
}
.rul-header nav .navbar-nav .nav-item .nav-link.metaverse-icon,
.rul-header nav .navbar-nav .nav-item .nav-link.search-button {
  background-color: var(--primary-white);
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  margin-right: 26px;
  padding: 0;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .nav-link.metaverse-icon,
  .rul-header nav .navbar-nav .nav-item .nav-link.search-button {
    display: none;
  }
}
.rul-header nav .navbar-nav .nav-item .nav-link.nav-button {
  background-color: var(--primary-color);
  padding: 10px 24px;
  border-radius: 30px;
}
@media screen and (max-width: 991px) {
  /* .rul-header nav .navbar-nav .nav-item .nav-link.nav-button {
    display: none;
  } */
  .mobile-search-btn .nav-button.menu-button {
    border-radius: 30px;
  }
  .rul-header nav .navbar-nav .nav-item .nav-link.nav-button {
    margin-top: 10px;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-toggle {
    --icon-size: 20px;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-toggle > * {
  flex-shrink: 0;
}
.rul-header nav .navbar-nav .nav-item .dropdown-toggle .btn-expand {
  background-color: transparent;
  margin-left: 5px;
  margin-top: 1px;
  width: 25px;
  height: 25px;
  aspect-ratio: 1;
}
@media (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-toggle .btn-expand {
    display: none !important;
    pointer-events: none !important;
  }
}
@media (min-width: 1200px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-toggle .btn-expand {
    pointer-events: none !important;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-toggle {
    padding-left: 0;
    padding-right: 0;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-toggle::after {
  position: absolute;
  top: 52%;
  right: 23px;
  transform: translate(0%, -50%);
  border: none;
  width: var(--icon-size);
  height: var(--icon-size);
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='44' height='44' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E");
  transition: transform 0.25s linear;
  opacity: 0 !important;
  visibility: hidden !important;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-toggle::after {
    top: 25px;
    right: 0;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-toggle.active::after {
  transform: translate(0%, -50%) rotate(-180deg);
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  left: 14px;
  background-color: var(--primary-white);
  border: none;
  border-radius: 0px;
  margin: 0;
  top: 97%;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.1215686275);
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-menu {
    display: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
    background-color: #181818;
    color: var(--primary-white);
    padding: 0;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu::before {
  display: none !important;
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item {
  color: var(--primary-black);
  font-size: calc(var(--default-font-size) + 0px);
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.01em;
  transition: all 0.3s linear;
  padding: 4px 20px;
  padding-right: 30px !important;
  position: relative;
  --icon-size: 20px;
  display: inline-flex;
  align-items: center;
  background-color: transparent !important;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    color: var(--primary-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 10px;
    padding-bottom: 10px;
    filter: brightness(70%);
    font-weight: 400;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item:not(:last-child) {
  margin-bottom: 8px;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item:not(:last-child) {
    margin-bottom: 0;
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-arrow-narrow-right' width='44' height='44' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23ea5400' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M15 16l4 -4' /%3E%3Cpath d='M15 8l4 4' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: var(--icon-size);
  height: var(--icon-size);
  background-size: var(--icon-size);
  display: inline-flex;
  transition: all 0.25s linear;
  margin-left: 5px;
  margin-top: 1px;
  opacity: 0;
  visibility: hidden;
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
  background-color: transparent;
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    background-color: initial;
    color: var(--primary-color);
    filter: brightness(100%);
  }
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover::after {
  opacity: 1;
  visibility: visible;
}
.rul-header nav .navbar-nav .nav-item .dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rul-header nav .navbar-nav .nav-item:hover:not(.is-tablet) .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rul-header nav .navbar-nav .nav-item:hover:not(.is-tablet) .dropdown-toggle::before {
  opacity: 1;
  visibility: visible;
}
/* mm-s5 ghost hover fix: override so dropdown area below nav doesn't
   re-trigger :hover when cursor moves within the open menu */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.mm-s5-trigger .dropdown-menu.mm-s5 {
    pointer-events: none;
  }
  .rul-header nav .navbar-nav .nav-item.mm-s5-trigger:hover .dropdown-menu.mm-s5,
  .rul-header nav .navbar-nav .nav-item.mm-s5-trigger .dropdown-menu.mm-s5.show {
    pointer-events: auto;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu {
  position: initial;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-toggle {
  display: flex;
  position: relative;
  z-index: 10;
}
/* Triangle arrow removed — replaced by border shape on nav-link */
.rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-toggle::before {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
@media (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-toggle::before {
    display: none !important;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-toggle {
    justify-content: space-between;
    padding-right: 0;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-toggle::after {
  /* Default: keep in-flow for desktop unless overridden */
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  transition: transform 0.25s linear, opacity 0.2s linear;
  opacity: 1;
  visibility: visible;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-toggle.active::after {
  transform: translateY(-50%) rotate(-180deg);
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.is-tablet .dropdown-toggle::before {
  display: none !important;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.is-tablet:has(.dropdown-menu.show) .dropdown-toggle::before {
  display: none !important;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu {
  padding: 38px 24px 50px;
  top: 80px;
  transform: translateX(-50%);
  width: 85%;
  left: 50%;
}
@media screen and (max-width: 1410px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu {
    width: 90%;
  }
}
@media screen and (max-width: 1366px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu {
    width: 95%;
  }
}
@media screen and (max-width: 1250px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu {
    width: 100%;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu {
    transform: none;
    padding: 0;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .dropdown-menu::before {
  display: none !important;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row {
  gap: 40px;
  display: flex;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row {
    flex-direction: column;
    gap: 0px;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col {
  flex: 1;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title {
  font-weight: 700;
  padding-bottom: 16px;
  font-size: calc(var(--default-font-size) - 0px);
  font-family: "Open Sans", sans-serif;
  margin: 0;
  display: block;
  color: var(--primary-black);
}
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    --icon-size: 20px;
  }
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-arrow-narrow-right' width='44' height='44' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23ea5400' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M15 16l4 -4' /%3E%3Cpath d='M15 8l4 4' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: var(--icon-size);
    height: var(--icon-size);
    background-size: var(--icon-size);
    display: inline-block;
    flex-shrink: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s linear;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title:hover {
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title:hover {
    color: var(--primary-white);
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title:hover::after {
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    color: var(--primary-white);
    filter: brightness(70%);
    font-weight: 400;
    --icon-size: 20px;
  }
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title::after {
    position: absolute;
    right: 15px;
    transform: translateY(2px);
    content: "";
    width: var(--icon-size);
    height: var(--icon-size);
    background-size: var(--icon-size);
    background-repeat: no-repeat;
    transition: transform 0.25s linear;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='44' height='44' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E");
  }
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title.active::after {
    transform: rotate(-180deg);
  }
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .title.link-active {
    filter: brightness(100%);
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li {
    padding: 10px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li:not(:last-child) {
  margin-bottom: 18px;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li:not(:last-child) {
    margin-bottom: 0;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a {
  font-size: var(--default-font-size);
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.01em;
  color: #595959;
  transition: all 0.25s linear;
  --icon-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a {
    color: var(--primary-white);
    filter: brightness(60%);
    font-weight: 300;
    width: 100%;
  }
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a.link-active {
    filter: brightness(100%);
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-arrow-narrow-right' width='44' height='44' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23ea5400' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M15 16l4 -4' /%3E%3Cpath d='M15 8l4 4' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: var(--icon-size);
  height: var(--icon-size);
  background-size: var(--icon-size);
  display: inline-block;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s linear;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a:hover {
  color: var(--primary-color);
  filter: brightness(100%);
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a:hover::after {
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu .grid-row .grid-col .links-parent li a:hover::after {
    opacity: 0;
  }
}
.rul-header nav .navbar-nav .nav-item .link-active {
  color: var(--primary-color) !important;
  font-weight: 700;
}
.rul-header nav .navbar-nav .nav-item .link-active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' stroke-width='2.8' stroke='%23ea5400' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E");
}

/* =====================================================================
   MEGA MENU — STYLE 1
   Figma: #398:17479  "_Full-width header navigation sub menu"
   Outer container: 1280px wide | bg #fff | radius 10px | Shadow/lg
   Layout: 3 content columns (flex) + right gradient sidebar (284px)
   ===================================================================== */

/* ---- Trigger nav item: position:static so dropdown spans full nav ---- */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s1-trigger {
  position: static;
}

/* Gap bridge for mm-s1 (top: 65px) */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s1-trigger > .nav-link {
    padding-bottom: 32px !important;
    margin-bottom: -15px !important;
  }
}

/* ---- Dropdown shell ---- */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s1-trigger .dropdown-menu.mm-s1 {
  padding: 0;
  border-radius: 10px;
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
              0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  background-color: #fff;
  top: 80px;
  width: 1280px;
  max-width: calc(100vw - 32px);
  left: 0;
  transform: none;
  overflow: hidden;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s1-trigger .dropdown-menu.mm-s1::before {
  /* Gap bridge: transparent block covering the space between nav link and menu */
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
  display: block;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s1-trigger .dropdown-menu.mm-s1 {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
    top: 0;
    overflow: visible;
    background-color: transparent;
  }
}

/* ---- Outer wrap: body + sidebar side by side ---- */
.mm-s1-wrap {
  display: flex;
  align-items: stretch;
}
@media screen and (max-width: 991px) {
  .mm-s1-wrap {
    flex-direction: column;
  }
}

/* ---- Body: 3 columns ---- */
/* Figma: "Content" #398:17482 | padding:32px | gap:24px | row */
.mm-s1-body {
  display: flex;
  flex: 1;
  padding: 32px;
  gap: 18px;
}
@media screen and (max-width: 991px) {
  .mm-s1-body {
    flex-direction: column;
    padding: 0 0 8px;
    gap: 0;
  }
}
/* Figma: "Section" EL-5ac9eff6 | column | gap:12px | fill */
.mm-s1-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .mm-s1-col {
    gap: 0;
  }
  /* No separator between column groups — they flow as a flat list */
  .mm-s1-col + .mm-s1-col {
    border-top: none;
    margin-top: 0;
  }
}

/* ---- Column section title ---- */
.mm-s1-col-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--primary-color);
  margin: 0 0 4px;
  padding: 0;
  display: block;
  text-decoration: none !important;
  /* pointer-events allowed — link inside should be clickable */
}
/* When col-title contains a link, style it identically */
.mm-s1-col-title a {
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  display: block;
  transition: opacity 0.15s ease;
}
.mm-s1-col-title a:hover {
  opacity: 0.75;
  text-decoration: none !important;
  color: var(--primary-color) !important;
}
/* Col 2 desktop: transparent title for spacing */
.mm-s1-col-title--hidden {
  color: transparent;
  user-select: none;
  pointer-events: none;
}
/* Ensure any link inside a hidden title is also transparent */
.mm-s1-col-title--hidden a,
.mm-s1-col-title--hidden a:hover {
  color: transparent !important;
  pointer-events: none;
}

/* Mobile: section titles — only show on col 1 and col 3 (col 2 hidden spacer stays hidden) */
@media screen and (max-width: 991px) {
  /* Hide col 2 spacer title — col 1 & col 2 items flow as one group */
  .mm-s1-col-title--hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  /* Figma #497:5742 | Open Sans SemiBold 600 | 14px | lh:20px | var(--primary-color) | padding: 0 16px */
  .mm-s1-col-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--primary-color);
    margin: 0;
    padding: 20px 16px 8px;
  }
  .mm-s1-col-title a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
  }
  .mm-s1-col {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Second section gets top padding to create 24px visual gap between sections */
  .mm-s1-col + .mm-s1-col .mm-s1-col-title,
  .mm-s1-col + .mm-s1-col .mm-s1-col-title--hidden + * {
    padding-top: 8px;
  }
  .mm-s1-col:first-child .mm-s1-list {
    margin-top: 0;
  }
}

/* ---- Nav items list ---- */
.mm-s1-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Mobile: always visible — flat list, no borders, no accordion */
@media screen and (max-width: 991px) {
  .mm-s1-list {
    display: block !important; /* override any JS hide() */
    gap: 0;
    padding: 0;
  }
  .mm-s1-list li {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: none;
  }
  .mm-s1-col:last-child .mm-s1-list li:last-child {
    border-bottom: none;
  }
}

/* ---- Single nav item card ---- */
/* Figma: "_Nav menu item" EL-3be81e18 | row | padding:12px | gap:16px | radius:8px */
.mm-s1-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background-color: transparent;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.mm-s1-item:hover,
.mm-s1-item:focus {
  background-color: #F5F3F2;
  text-decoration: none !important;
}
/* Active state (Figma shows #F5F3F2 fill on hover state component) */
.mm-s1-item--active {
  background-color: #F5F3F2;
}
@media screen and (max-width: 991px) {
  .mm-s1-item {
    /* Figma EL-f2d22a8b | padding:12px 16px | gap:16px */
    padding: 12px 16px;
    border-radius: 0;
    background-color: transparent !important;
    /* border-bottom: 1px solid rgba(216, 211, 223, 0.1); */
  }
  .mm-s1-item--active {
    background-color: transparent !important;
  }
}

/* ---- Icon ---- */
/* Figma: 24×24 fixed */
.mm-s1-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-s1-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 991px) {
  .mm-s1-icon {
    display: flex;
  }
  .mm-s1-item {
    /* Figma: gap:16px, align center */
    gap: 16px;
    align-items: center;
  }
  .mm-s1-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
}

/* ---- Item text body ---- */
.mm-s1-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* ---- Item title ---- */
/* Figma: Open Sans SemiBold 600 | 16px | lh:24px | #000000 */
/* Active: color var(--primary-color) */
.mm-s1-item-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000000;
  display: block;
  transition: color 0.15s ease;
}
.mm-s1-item:hover .mm-s1-item-title {
  color: var(--primary-color);
}
.mm-s1-item--active .mm-s1-item-title {
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .mm-s1-item-title {
    /* Figma #497:7885 | Open Sans SemiBold 600 | 16px | lh:24px | rgba(255,255,255,0.9) */
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--rul-mobile-nav-link, rgba(255, 255, 255, 0.9));
  }
  .mm-s1-item:hover .mm-s1-item-title,
  .mm-s1-item--active .mm-s1-item-title {
    color: var(--primary-color);
  }
}

/* ---- Supporting text ---- */
/* Figma: Open Sans Regular 400 | 14px | lh:20px | rgba(0,0,0,0.7) */
.mm-s1-item-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7);
  display: block;
}
@media screen and (max-width: 991px) {
  .mm-s1-item-desc {
    display: none !important;
  }
}

/* ---- Right sidebar panel ---- */
/* Figma: "Content" #398:17501 | column | padding: 20px 32px 20px 20px | gap:16px | gradient bg */
.mm-s1-sidebar {
  flex-shrink: 0;
  width: 284px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 32px 20px 20px;
  background: linear-gradient(180deg, #EBEDF7 0%, #F7ECF4 100%);
}
@media screen and (max-width: 991px) {
  .mm-s1-sidebar {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    /* Figma #497:5761 | padding: 20px 0 | no gradient bg on mobile */
    padding: 20px 0 0;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12px;
  }
}

/* ---- Sidebar image ---- */
/* Figma: "Image wrap" #398:18066 | 240×269 | radius:6px | bg:#F4EBFF */
.mm-s1-sidebar-img {
  width: 240px;
  height: 269px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #F4EBFF;
  flex-shrink: 0;
}
.mm-s1-sidebar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
@media screen and (max-width: 991px) {
  .mm-s1-sidebar-img {
    width: 100%;
    height: initial;
    aspect-ratio: unset;
    background-color: #F4EBFF;
    border-radius: 6px;
  }
  .mm-s1-sidebar-img img {
    width: 100%;
    height: 100%;
  }
}

/* ---- Sidebar content block ---- */
/* Figma: "Content" #404:2612 | column | gap:24px */
.mm-s1-sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Sidebar text group ---- */
/* Figma: gap:8px */
.mm-s1-sidebar-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Sidebar title ---- */
/* Figma: Open Sans SemiBold 600 | 16px | lh:24px | #101828 */
.mm-s1-sidebar-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #101828;
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mm-s1-sidebar-title {
    color: var(--rul-mobile-nav-link, var(--rul-header-text, #ffffff));
  }
}

/* ---- Sidebar description ---- */
/* Figma: Open Sans Regular 400 | 14px | lh:20px | rgba(0,0,0,0.7) */
.mm-s1-sidebar-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mm-s1-sidebar-desc {
    color: var(--rul-mobile-nav-muted, var(--rul-header-muted, rgba(255, 255, 255, 0.6)));
  }
}

/* ---- Learn More button ---- */
/* ---- Learn More button ---- */
/* Figma: "Button" #404:2616 | Inter SemiBold 600 | 16px | var(--primary-color) | row gap:8px */
.mm-s1-sidebar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--primary-color) !important;
  text-decoration: none !important;
  transition: gap 0.2s ease;
}
a.mm-s1-sidebar:hover .mm-s1-sidebar-link {
  gap: 12px;
}
a.mm-s1-sidebar:hover .mm-s1-sidebar-link svg {
  transform: translateX(3px);
}
.mm-s1-sidebar-link:hover {
  gap: 12px;
  text-decoration: none !important;
  color: var(--primary-color) !important;
}
.mm-s1-sidebar-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mm-s1-sidebar-link:hover svg {
  transform: translateX(3px);
}
/* /MEGA MENU STYLE 1 */

/* =====================================================================
   MEGA MENU STYLE 2 — Services
   Figma #404:2780
   Left sidebar tabs (180px) + Right 3-col service grid
   ===================================================================== */

/* Trigger: position static so dropdown spans full nav width */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger {
  position: static;
}

/* Gap bridge: extend nav-link hover area 15px downward to cover the gap
   between the navbar bottom and the dropdown top (top: 80px gap).
   Negative margin-bottom compensates so pill height stays unchanged. */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger > .nav-link {
    padding-bottom: 32px !important; /* 17px original + 15px gap bridge */
    margin-bottom: -15px !important;
  }
}

/* Dropdown shell */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger .dropdown-menu.mm-s2 {
  padding: 0;
  border-radius: 10px;
  box-shadow: 0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08);
  background-color: #fff;
  top: 80px;
  width: 1280px;
  max-width: calc(100vw - 32px);
  left: 0;
  transform: none;
  overflow: visible; /* must be visible so ::before bridge renders above the menu */
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger .dropdown-menu.mm-s2::before {
  /* Gap bridge */
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
  display: block;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger .dropdown-menu.mm-s2 {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
    top: 0;
    overflow: visible;
    background-color: transparent;
  }
}

/* Outer wrap: sidebar + panels */
.mm-s2-wrap {
  display: flex;
  align-items: stretch;
  min-height: 380px;
  overflow: hidden;  /* clip content to border-radius (moved from dropdown shell) */
  border-radius: 10px;
}
@media screen and (max-width: 991px) {
  .mm-s2-wrap {
    flex-direction: column;
    min-height: 0;
  }
}

/* ---- Left sidebar ---- */
/* Figma #404:2803 | width:245px | bg:gradient | padding:32px 20px 20px | gap:16px */
.mm-s2-sidebar {
  flex-shrink: 0;
  width: 285px;
  background: linear-gradient(180deg, #EBEDF7 0%, #F7ECF4 100%);
  padding: 32px 0 20px;
  border-right: none;
}
@media screen and (max-width: 991px) {
  .mm-s2-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: none;
    padding: 0;
    background: transparent;
  }
}

/* Sidebar heading */
/* Figma #404:4040 | Inter SemiBold 600 | 14px | lh:20px | #000 */
.mm-s2-sidebar-heading {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
  margin: 0 0 4px;
  padding: 0 20px;
  margin-bottom: 12px;
}
@media screen and (max-width: 991px) {
  .mm-s2-sidebar-heading {
    font-size: 12px;
    color: var(--primary-color);
    padding: 14px 16px 6px;
    margin: 0;
  }
}

/* Tab list */
.mm-s2-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Single tab */
.mm-s2-tab {
  margin: 0;
  padding: 0 8px;
  padding-left: 20px;
  padding-right: 20px;
}
/* Figma EL-0758ea4c | Inter SemiBold 600 | 16px | lh:24px | padding:12px | radius:8px */
.mm-s2-tab-link {
  display: block;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000 !important;
  text-decoration: none !important;
  padding: 12px;
  border-left: none;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.mm-s2-tab-link:hover {
  background-color: rgba(249,250,251,0.8);
  color: #000 !important;
  text-decoration: none !important;
}
/* Active tab — Figma #404:4043 | bg:Gray/50 #F9FAFB | text:var(--primary-color) */
.mm-s2-tab--active .mm-s2-tab-link {
  background-color: #F9FAFB;
  color: var(--primary-color) !important;
  border-left: none;
  font-weight: 600;
}
@media screen and (max-width: 991px) {
  .mm-s2-tab-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--rul-mobile-nav-link, #fff) !important;
    border-left: none;
    padding: 14px 16px;
    background-color: transparent;
    font-size: 15px;
    font-weight: 500;
  }
  .mm-s2-tab-link:hover {
    background-color: transparent;
    color: var(--rul-mobile-nav-link, #fff) !important;
  }
  .mm-s2-tab--active > .mm-s2-tab-link {
    color: var(--primary-color) !important;
    background-color: transparent;
    border-left: none;
  }
  /* Chevron inside tab link */
  .mm-s2-tab-chevron {
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease;
    color: rgba(255, 255, 255, 0.5);
  }
  .mm-s2-tab--active > .mm-s2-tab-link .mm-s2-tab-chevron {
    transform: rotate(180deg);
    color: var(--primary-color);
  }
  /* Last tab: remove bottom border when drawer is closed */
  .mm-s2-tab:last-child > .mm-s2-tab-link {
    border-bottom: 1px solid var(--rul-mobile-nav-item-border, rgba(255, 255, 255, 0.1));
  }
}

/* ── Mobile drawer (slides open under each tab row) ── */
.mm-s2-mobile-drawer {
  display: none; /* JS slideDown controls this */
  background-color: transparent;
}
@media screen and (min-width: 992px) {
  .mm-s2-mobile-drawer {
    display: none !important;
  }
}

/* Bullet list inside drawer */
.mm-s2-mobile-list {
  list-style: none;
  margin: 0;
  padding: 4px 0 6px;
}
.mm-s2-mobile-list li {
  margin: 0;
  padding: 0;
}
.mm-s2-mobile-item {
  display: block;
  padding: 9px 16px 9px 32px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--rul-mobile-nav-muted, rgba(255, 255, 255, 0.8)) !important;
  text-decoration: none !important;
  position: relative;
}
.mm-s2-mobile-item::before {
  content: '•';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  line-height: 1;
}
.mm-s2-mobile-item:hover {
  color: var(--primary-color) !important;
  text-decoration: none !important;
}
.mm-s2-mobile-list li:last-child .mm-s2-mobile-item {
  border-bottom: none;
}

/* "More about this services" inside drawer */
.mm-s2-mobile-more {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: none;
}

/* Desktop: hide chevron inside tab links */
@media screen and (min-width: 992px) {
  .mm-s2-tab-chevron {
    display: none !important;
  }
}

/* ---- Right panels area ---- */
.mm-s2-panels {
  flex: 1;
  min-width: 0;
  display: flex;     /* so active panel can flex: 1 and stretch */
  position: relative;
}
/* On mobile, panels are hidden — drawers built by JS inside .mm-s2-sidebar */
@media screen and (max-width: 991px) {
  .mm-s2-panels {
    display: none !important;
  }
}

/* Single panel — hidden by default */
/* Figma #404:2782 | padding:32px | gap:24px between sections */
.mm-s2-panel {
  display: none;
  flex-direction: column;
  padding: 32px 32px 40px;
  flex: 1;
}
.mm-s2-panel--active {
  display: flex;
}
/* Grid inside panel must fill remaining height so CTA can pin to bottom */
.mm-s2-panel--active .mm-s2-grid--cols-3v {
  flex: 1;
}
@media screen and (max-width: 991px) {
  .mm-s2-panel {
    padding: 16px 16px 12px;
  }
  .mm-s2-panel--active {
    display: flex;
  }
}

/* Panel title */
/* Figma #404:2798 | Open Sans Bold 700 | 14px | lh:20px | rgba(0,0,0,0.6) */
.mm-s2-panel-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 12px;
  padding: 0;
}
@media screen and (max-width: 991px) {
  .mm-s2-panel-title {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
  }
}

/* ---- Service item grid: 3-column vertical layout ---- */
/* cols-3v: 3 explicit flex columns, items fill top-to-bottom per column */
/* cols-1: used inside cta-card layout only */
.mm-s2-grid {
  display: flex;
  gap: 0 8px;
  flex: 1;
  min-width: 0;
  align-items: stretch;
}
.mm-s2-grid--cols-1 {
  display: flex;
  flex-direction: column;
}
/* Each explicit column inside cols-3v */
.mm-s2-grid--cols-3v .mm-s2-col {
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
/* CTA cell sits at slot 15 — pushed to bottom of col 3 */
@media screen and (max-width: 991px) {
  .mm-s2-grid,
  .mm-s2-grid--cols-3v,
  .mm-s2-grid--cols-1 {
    flex-direction: column;
    gap: 0;
  }
  .mm-s2-grid--cols-3v .mm-s2-col {
    flex: none;
  }
}

/* ---- CTA cell: "More about this services" — pinned to bottom of its column ---- */
/* Figma #404:4629 | Footer frame | padding: 28px 12px 28px 16px */
.mm-s2-cta-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 12px 20px 16px;
  min-height: 94px;
  margin-top: auto; /* pins to bottom of its column regardless of item count */
}
@media screen and (max-width: 991px) {
  .mm-s2-cta-cell {
    padding: 14px 0 6px;
    min-height: auto;
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    justify-content: flex-start;
  }
}

/* ---- Layout with CTA card: items col + card col ---- */
/* Used when count <= 5 */
.mm-s2-layout-with-cta {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
}
@media screen and (max-width: 991px) {
  .mm-s2-layout-with-cta {
    flex-direction: column;
    gap: 0;
  }
}
.mm-s2-layout-with-cta .mm-s2-grid {
  flex: 1;
}

/* ---- CTA card (styled like mm-s1-sidebar) — sits in col 3, pinned to bottom ---- */
/* Figma: gradient bg, radius 8px, padding 20px, ~240px wide */
.mm-s2-cta-card {
  flex-shrink: 0;
  width: 100%; /* fills the col width — col 3 is flex: 1 like the other cols */
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #EBEDF7 0%, #F7ECF4 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 16px;
  margin-top: auto; /* pins card to bottom of col 3 when items above are few */
  text-decoration: none !important;
}
a.mm-s2-cta-card--linked {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.mm-s2-cta-card--linked:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  text-decoration: none !important;
}
a.mm-s2-cta-card--linked:hover .mm-s2-cta-card-title {
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .mm-s2-cta-card {
    width: 100%;
    background: transparent;
    border-radius: 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    gap: 8px;
  }
}
.mm-s2-cta-card-img {
  width: 100%;
  overflow: hidden;
  background-color: #F4EBFF;
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
}
.mm-s2-cta-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 991px) {
  .mm-s2-cta-card-img {
    display: none;
  }
}
.mm-s2-cta-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.mm-s2-cta-card-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #101828;
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mm-s2-cta-card-title {
    color: #fff;
  }
}
.mm-s2-cta-card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mm-s2-cta-card-desc {
    color: rgba(255, 255, 255, 0.55);
  }
}

/* CTA card — button label: matches mm-s1-sidebar-link style */
.mm-s2-cta-card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--primary-color);
  text-decoration: none !important;
  transition: gap 0.2s ease;
  pointer-events: none; /* card wrapper is the clickable element */
}
.mm-s2-cta-card-label svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
a.mm-s2-cta-card--linked:hover .mm-s2-cta-card-label {
  gap: 12px;
  color: var(--primary-color);
}
a.mm-s2-cta-card--linked:hover .mm-s2-cta-card-label svg {
  transform: translateX(3px);
}

/* Inner spans that were formerly <a> tags — no pointer events since wrapper is clickable */
.mm-s1-sidebar a .mm-s1-sidebar-link,
a.mm-s3-card .mm-s3-card-btn,
a.mm-s4-card .mm-s4-card-btn,
a.mm-s5-card .mm-s5-card-cta {
  pointer-events: none;
}

/* Clickable card wrappers — cursor + no underline */
a.mm-s1-sidebar,
a.mm-s3-card,
a.mm-s4-card,
a.mm-s5-card {
  cursor: pointer;
  text-decoration: none !important;
}
a.mm-s1-sidebar:hover,
a.mm-s3-card:hover,
a.mm-s4-card:hover,
a.mm-s5-card:hover {
  text-decoration: none !important;
}

/* ---- Single service item ---- */
.mm-s2-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 6px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.mm-s2-item:hover {
  background-color: #F5F3F2;
  text-decoration: none !important;
}
@media screen and (max-width: 991px) {
  .mm-s2-item {
    padding: 10px 0;
    border-radius: 0;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .mm-s2-item:hover {
    background-color: transparent;
  }
  /* Remove border from the last item or cta cell */
  .mm-s2-grid > a:last-child,
  .mm-s2-grid > .mm-s2-cta-cell:last-child,
  .mm-s2-layout-with-cta .mm-s2-grid > a:last-child,
  .mm-s2-col > a:last-child,
  .mm-s2-col > .mm-s2-cta-cell:last-child {
    border-bottom: none;
  }
}

/* Icon */
.mm-s2-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48px;
}
.mm-s2-icon svg {
  display: block;
  max-width: 24px;
  max-height: 24px;
}

/* Item text body */
.mm-s2-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* Item title */
/* Figma style_05e29eb8 | Open Sans SemiBold 600 | 16px | lh:24px | #000 */
.mm-s2-item-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  display: block;
  transition: color 0.15s ease;
}
.mm-s2-item:hover .mm-s2-item-title {
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .mm-s2-item-title {
    font-size: 15px;
    color: var(--primary-color);
  }
}

/* Item description */
/* Figma EL-6159189f | Plus Jakarta Sans Regular 400 | 14px | lh:20px | rgba(0,0,0,0.7) */
.mm-s2-item-desc {
  font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7);
  display: block;
}
@media screen and (max-width: 991px) {
  .mm-s2-item-desc {
    display: none !important;
  }
}

/* mm-s2-panel-footer removed — CTA is now inline as .mm-s2-cta-cell or .mm-s2-cta-card */

/* "More about this services" link */
/* Figma #404:4630 | Inter SemiBold 600 | 16px | lh:24px | var(--primary-color) */
.mm-s2-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--primary-color) !important;
  text-decoration: none !important;
  transition: gap 0.2s ease;
}
.mm-s2-more-link:hover {
  gap: 10px;
  text-decoration: none !important;
  color: var(--primary-color) !important;
}
.mm-s2-more-link svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.mm-s2-more-link:hover svg {
  transform: translateX(3px);
}

/* ---- Sticky state ---- */
.rul-header.stickyTop nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger .dropdown-menu.mm-s2 {
  top: 53px;
}
/* /MEGA MENU STYLE 2 */

/* =====================================================================
   MEGA MENU STYLE 3 — Industries
   Figma #413:7590
   3 nav-item columns + right orange card (268×268) + footer gradient bar
   ===================================================================== */

/* Trigger: position static so dropdown spans full nav width */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s3-trigger {
  position: static;
}

/* Gap bridge for mm-s3 (top: 65px) */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s3-trigger > .nav-link {
    padding-bottom: 32px !important;
    margin-bottom: -15px !important;
  }
}

/* Dropdown shell */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s3-trigger .dropdown-menu.mm-s3 {
  padding: 0;
  border-radius: 12px;
  border: 1px solid #EAECF0;
  box-shadow: 0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08);
  background-color: #fff;
  top: 80px;
  width: 1036px;
  max-width: calc(100vw - 32px);
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s3-trigger .dropdown-menu.mm-s3::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
  display: block;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s3-trigger .dropdown-menu.mm-s3 {
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
    top: 0;
    overflow: visible;
    background-color: transparent;
  }
}

/* Sticky state */
.rul-header.stickyTop nav .navbar-nav .nav-item.custom-megamenu.mm-s3-trigger .dropdown-menu.mm-s3 {
  top: 53px;
}

/* Inner wrapper */
.mm-s3-inner {
  display: flex;
  flex-direction: column;
}

/* ---- Top section: columns + orange card ---- */
/* Figma #413:7591 — row, stretch */
.mm-s3-top {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 991px) {
  .mm-s3-top {
    display: block;
  }
}

/* ---- Left content: 3 columns ---- */
/* Figma #413:7592 | padding: 24px 0 20px 32px | gap:32px */
.mm-s3-content {
  flex: 1;
  display: flex;
  gap: 24px;
  padding: 20px 24px 20px 32px;
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .mm-s3-content {
    flex-direction: column;
    padding: 16px 16px 8px;
    gap: 0;
  }
}

/* ---- Single column ---- */
/* Figma #413:7595 | column | gap:8px | fill */
.mm-s3-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .mm-s3-col {
    gap: 0;
  }
}

/* ---- Single nav item ---- */
/* Figma EL-5e856beb | row | padding:12px | gap:16px | radius:8px */
.mm-s3-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.mm-s3-item:hover {
  background-color: #F5F3F2;
  text-decoration: none !important;
}
@media screen and (max-width: 991px) {
  .mm-s3-item {
    padding: 10px 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    gap: 12px;
  }
  .mm-s3-item:hover {
    background-color: transparent;
  }
  .mm-s3-col:last-child .mm-s3-item:last-child {
    border-bottom: none;
  }
}

/* Icon — 24×24 */
.mm-s3-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-s3-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Item title */
/* Figma: Open Sans SemiBold 600 | 16px | lh:24px | #000 */
.mm-s3-item-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  transition: color 0.15s ease;
}
.mm-s3-item:hover .mm-s3-item-title {
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .mm-s3-item-title {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
  }
  .mm-s3-item:hover .mm-s3-item-title {
    color: var(--primary-color);
  }
}

/* ---- Right orange card ---- */
/* Figma #413:7612 | 268×268 | bg:var(--primary-color) | radius:6px | padding: 24px 20px 20px | gap:16px */
.mm-s3-card {
  flex-shrink: 0;
  width: 268px;
  height: 268px;
  background-color: var(--primary-color);
  border-radius: 0; /* outer dropdown clips it */
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  margin-right: 20px;
  border-radius: 6px;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .mm-s3-card {
    padding: 20px 16px;
    gap: 12px;
    height: initial;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Featured icon — 48×48, white 10% circle */
.mm-s3-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card text block */
.mm-s3-card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.mm-s3-card-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
  margin: 0;
}
.mm-s3-card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

/* Card CTA button */
/* Figma #413:7763 | SemiBold 600 16px | white | row gap:8px */
.mm-s3-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff !important;
  text-decoration: none !important;
  transition: gap 0.2s ease;
  margin-top: auto;
  pointer-events: none;
}
.mm-s3-card-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* Hover triggered by clickable wrapper <a> */
a.mm-s3-card:hover .mm-s3-card-btn {
  gap: 12px;
}
a.mm-s3-card:hover .mm-s3-card-btn svg {
  transform: translateX(3px);
}

/* ---- Footer CTA bar ---- */
/* Figma #413:7614 | gradient bg | row centered | padding: 28px 32px */
.mm-s3-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 32px;
  background: linear-gradient(180deg, #EBEDF7 0%, #F7ECF4 100%);
}
@media screen and (max-width: 991px) {
  .mm-s3-footer {
    padding: 16px;
    justify-content: flex-start;
    background: rgba(255,255,255,0.04);
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}

/* "Ready to get started?" text */
/* Figma: Inter Medium 500 | 16px | #475467 */
.mm-s3-footer-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #475467;
}
@media screen and (max-width: 991px) {
  .mm-s3-footer-text {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
  }
}

/* "Let's Talk" button */
/* Figma: Inter SemiBold 600 | 16px | var(--primary-color) | link color style */
.mm-s3-footer-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--primary-color) !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease;
}
.mm-s3-footer-btn:hover {
  opacity: 0.8;
  text-decoration: underline !important;
  color: var(--primary-color) !important;
}
@media screen and (max-width: 991px) {
  .mm-s3-footer-btn {
    font-size: 14px;
  }
}
/* /MEGA MENU STYLE 3 */

/* =====================================================================
   MEGA MENU STYLE 4 — Company
   3 plain text-link columns + right photo card with dark overlay
   No footer bar
   ===================================================================== */

/* Trigger */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s4-trigger {
  position: static;
}

/* Gap bridge for mm-s4 (top: 65px) */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s4-trigger > .nav-link {
    padding-bottom: 32px !important;
    margin-bottom: -15px !important;
  }
}

/* Dropdown shell — same proportions as mm-s3 */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s4-trigger .dropdown-menu.mm-s4 {
  padding: 0;
  border-radius: 12px;
  border: 1px solid #EAECF0;
  box-shadow: 0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08);
  background-color: #fff;
  top: 80px;
  width: 957px;
  max-width: calc(100vw - 32px);
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s4-trigger .dropdown-menu.mm-s4::before {
  display: none !important;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s4-trigger .dropdown-menu.mm-s4 {
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
    top: 0;
    overflow: visible;
    /* background-color: #181818; */
    background-color: transparent;
  }
}

/* Sticky state */
.rul-header.stickyTop nav .navbar-nav .nav-item.custom-megamenu.mm-s4-trigger .dropdown-menu.mm-s4 {
  top: 53px;
}

/* Inner / top row */
.mm-s4-inner {
  display: flex;
  flex-direction: column;
}
.mm-s4-top {
  display: flex;
  align-items: center;
  background-color: #f9fafb;
}
@media screen and (max-width: 991px) {
  .mm-s4-top {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: none;
  }
}

/* ---- Left content: 3 text-link columns ---- */
/* Same padding/gap approach as mm-s3 */
.mm-s4-content {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 24px 24px 24px 32px;
  min-width: 0;
  background-color: #ffffff;
  min-height: 258px;
}
@media screen and (max-width: 991px) {
  .mm-s4-content {
    flex-direction: column;
    padding: 16px 16px 8px;
    gap: 0;
    background: none;
    min-height: initial;
  }
}

/* Single column */
.mm-s4-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .mm-s4-col {
    gap: 0;
  }
}

/* ---- Plain text nav item ---- */
/* No icon — just text, padding:12px, hover bg #FFF0E8 */
.mm-s4-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.mm-s4-item:hover {
  background-color: #F5F3F2;
  color: var(--primary-color) !important;
  text-decoration: none !important;
}
@media screen and (max-width: 991px) {
  .mm-s4-item {
    padding: 11px 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    white-space: normal;
  }
  .mm-s4-item:hover {
    background-color: transparent;
    color: var(--primary-color) !important;
  }
  .mm-s4-col:last-child .mm-s4-item:last-child {
    border-bottom: none;
  }
}

/* ---- "We're hiring!" badge on Jobs item ---- */
.mm-s4-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  background-color: #ECFDF3;
  color: #027A48;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  flex-shrink: 0;
}
@media screen and (max-width: 991px) {
  .mm-s4-badge {
    font-size: 11px;
    padding: 1px 6px;
  }
}

/* ---- Right photo card ---- */
/* ~268px wide | real photo | dark gradient overlay | title + CTA at bottom */
.mm-s4-card {
  flex-shrink: 0;
  width: 264px;
  position: relative;
  overflow: hidden;
  /* Fallback gradient when image is missing */
  height: 220px;
  margin-right: 20px;
  border-radius: 8px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
  .mm-s4-card {
    width: initial;
    min-height: initial;
    height: initial;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Photo */
.mm-s4-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 268px;
}
@media screen and (max-width: 991px) {
  .mm-s4-card-img {
    min-height: initial;
    max-height: initial;
  }
}

/* Dark gradient overlay — covers bottom half */
.mm-s4-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 56px 20px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Card title */
.mm-s4-card-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
  margin: 0;
}

/* "Join Now" CTA */
.mm-s4-card-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: #fff !important;
  text-decoration: none !important;
  transition: gap 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.mm-s4-card-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* Hover triggered by clickable wrapper <a> */
a.mm-s4-card:hover .mm-s4-card-btn {
  gap: 8px;
}
a.mm-s4-card:hover .mm-s4-card-btn svg {
  transform: translateX(3px);
}
/* /MEGA MENU STYLE 4 */

/* =====================================================================
   MEGA MENU STYLE 5 — Resources
   Figma #413:8220 | 640px | bg:#fff | border:#EAECF0 | radius:12px
   Left: 3 nav items (icon+title+desc) | Right: card on #F9FAFB bg
   ===================================================================== */

/* Trigger — position:relative so left:50% centers under the li */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger {
  position: relative;
}

/* Gap bridge for mm-s5 (top: 65px) */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger > .nav-link {
    padding-bottom: 32px !important;
    margin-bottom: -15px !important;
  }
}

/* Dropdown shell — pure CSS centered under Resources label */
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger .dropdown-menu.mm-s5 {
  padding: 0;
  border-radius: 12px;
  border: 1px solid #EAECF0;
  box-shadow: 0px 4px 6px -2px rgba(16,24,40,0.03), 0px 12px 16px -4px rgba(16,24,40,0.08);
  background-color: #fff;
  top: 69px;
  width: 640px;
  max-width: calc(100vw - 32px);
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  overflow: hidden;
  visibility: visible;
}
/* Ghost hover fix (desktop only): menu area below nav can't re-trigger li:hover.
   Must stay desktop-scoped — mobile accordion has no :hover/.show, and
   pointer-events:none would block .mm-s5-item / .mm-s5-card taps. */
@media screen and (min-width: 992px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger .dropdown-menu.mm-s5 {
    pointer-events: none;
  }
  .rul-header nav .navbar-nav .nav-item.mm-s5-trigger:hover .dropdown-menu.mm-s5,
  .rul-header nav .navbar-nav .nav-item.mm-s5-trigger .dropdown-menu.mm-s5.show {
    pointer-events: auto;
  }
}
.rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger .dropdown-menu.mm-s5::before {
  display: none !important;
}
@media screen and (max-width: 991px) {
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger .dropdown-menu.mm-s5 {
    border-radius: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
    right: auto;
    top: 0;
    overflow: visible;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    pointer-events: auto;
  }
}

/* Sticky state */
.rul-header.stickyTop nav .navbar-nav .nav-item.custom-megamenu.mm-s5-trigger .dropdown-menu.mm-s5 {
  top: 53px;
}

/* Outer wrap: left items + right card */
/* Figma: row, stretch */
.mm-s5-wrap {
  display: flex;
  align-items: stretch;
}
@media screen and (max-width: 991px) {
  .mm-s5-wrap {
    flex-direction: column;
  }
}

/* ---- Left: nav items ---- */
/* Figma #413:8221 | padding:24px 20px | gap:8px | column */
.mm-s5-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  min-width: 0;
}
@media screen and (max-width: 991px) {
  .mm-s5-items {
    padding: 16px 16px 8px;
    gap: 0;
  }
}

/* ---- Single nav item ---- */
/* Figma EL-3be81e18 | padding:12px | gap:16px | radius:8px */
.mm-s5-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.mm-s5-item:hover {
  /* background-color: #F9FAFB; */
  background-color: #F5F3F2;
  text-decoration: none !important;
}
@media screen and (max-width: 991px) {
  .mm-s5-item {
    padding: 11px 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    align-items: center;
    gap: 12px;
  }
  .mm-s5-item:hover {
    background-color: transparent;
  }
  .mm-s5-items > .mm-s5-item:last-child {
    border-bottom: none;
  }
}

/* Icon — 24×24 */
/* Figma: fill empty (transparent bg), icon stroke var(--primary-color) */
.mm-s5-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 4px;
  box-sizing: content-box;
}
.mm-s5-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Item body */
.mm-s5-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Item title */
/* Figma style_05e29eb8 | Open Sans SemiBold 600 | 16px | lh:24px | #000 */
.mm-s5-item-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  display: block;
  transition: color 0.15s ease;
}
.mm-s5-item:hover .mm-s5-item-title {
  color: var(--primary-color);
}
@media screen and (max-width: 991px) {
  .mm-s5-item-title {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
  }
}

/* Item description */
/* Figma style_4b43ef20 | Open Sans Regular 400 | 14px | lh:20px | rgba(0,0,0,0.7) */
.mm-s5-item-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.7);
  display: block;
}
@media screen and (max-width: 991px) {
  .mm-s5-item-desc {
    display: none !important;
  }
}

/* ---- Right: card sidebar ---- */
/* Figma #413:8225 | bg:#F9FAFB | padding:20px | gap:16px | hug width */
.mm-s5-card-wrap {
  flex-shrink: 0;
  width: 280px;
  background-color: #F9FAFB;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 991px) {
  .mm-s5-card-wrap {
    width: 100%;
    background-color: transparent;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
}

/* Card — Figma #413:8303 | bg:#fff | radius:8px | padding:12px | gap:24px */
.mm-s5-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (max-width: 991px) {
  .mm-s5-card {
    background-color: transparent;
    padding: 0;
    gap: 12px;
  }
}

/* Card image — Figma #413:8304 | 240×152 | bg:#F4EBFF | radius:6px */
.mm-s5-card-img {
  width: 100%;
  height: 152px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #F4EBFF;
  flex-shrink: 0;
}
.mm-s5-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
@media screen and (max-width: 991px) {
  .mm-s5-card-img {
    width: 100%;
    height: initial;
  }
}

/* Card content */
.mm-s5-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card text group */
.mm-s5-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Card title — Inter SemiBold 600 | 16px | lh:24px | #101828 */
.mm-s5-card-title {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #101828;
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mm-s5-card-title {
    color: #fff;
    font-size: 15px;
  }
}

/* Card description — Plus Jakarta Sans Regular 400 | 14px | lh:20px | #475467 */
.mm-s5-card-desc {
  font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #475467;
  margin: 0;
}
@media screen and (max-width: 991px) {
  .mm-s5-card-desc {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
  }
}

/* Card CTA — Inter SemiBold 600 | 14px | var(--primary-color) */
.mm-s5-card-cta {
  font-family: 'Inter', 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--primary-color) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
  pointer-events: none;
}
.mm-s5-card-cta svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* Hover triggered by clickable wrapper <a> */
a.mm-s5-card:hover .mm-s5-card-cta {
  gap: 10px;
}
a.mm-s5-card:hover .mm-s5-card-cta svg {
  transform: translateX(3px);
}
/* /MEGA MENU STYLE 5 */


/*=================================
It's for large divice
==================================*/
@media screen and (min-width: 1520px) {
  .rul-nav-wrap,
  .rul-header-topbar-wrap,
  .rul-header .rul-topbar-container.rl-top-header > .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/*=================================
Page Header
==================================*/
.page-header {
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.dark-header.page-header {
    color: #fff;
    -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, .20);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .20);
}

.page-header .overlay {
    padding: 100px 0 0;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.rul-breadcrumb {
    overflow: hidden;
}

.dark-header .rul-breadcrumb {
    margin-top: 33px;
}

section.black-header-fix.breadcrumb-section {
    padding-top: 130px;
    background-color: #fff;
    color: #000;
    padding-bottom: 33px;
}

section.black-header-fix.breadcrumb-section .rul-breadcrumb ul li a {
    color: #000;
}

.rul-breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rul-breadcrumb ul li {
    display: inline;
    font-size: 24px;
}

.rul-breadcrumb ul li a {
    display: inline-block;
    color: #fff;
    position: relative;
    margin-right: 30px;
    -webkit-transition: .25s;
    -o-transition: .25s;
    transition: .25s
}

.rul-breadcrumb ul li a:after {
    position: absolute;
    content: ">";
    right: -26px;
    top: 1px;
}

.rul-breadcrumb ul li a:hover {
    text-decoration: none;
    color: #E94914;
}

.page-title {
    margin-top: 27px;
    overflow: hidden;
}

.page-title h1 {
    font-weight: 800;
    font-size: 85px;
    color: #fff;
}

.page-title p {
    font-size: 18px;
}

/*=================================
Inner page - Category inline style
==================================*/
.cat-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-list ul li {
    display: inline;
}

.cat-list ul li a {
   display: inline-block;
    font-size: .75rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-decoration: none;
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

.cat-list ul li a:hover,
.cat-list ul li a.active {
    border-color: rgb(246, 152, 57, .1);
    background: rgb(255, 52, 0);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 52, 0, 1)), to(rgba(248, 121, 39, 1)));
    background: -o-linear-gradient(left, rgba(255, 52, 0, 1) 0%, rgba(248, 121, 39, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 52, 0, 1) 0%, rgba(248, 121, 39, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3400", endColorstr="#f87927", GradientType=1);
    /* border-left-color: #fe4007;
    border-right-color: #f69839; */
}

/* Unyson */
body>p {
    display: none;
}

/* Button Css :: Gloabl Button */
a.fasc-button {
    display: inline-block;
    text-decoration: none;
    margin: 3px 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a.fasc-button:hover,
a.fasc-button:focus,
a.fasc-button:visited,
a.fasc-button:active {
    text-decoration: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* styles for global button */
.fasc-button {
    font-size: 16px;
    color: #fff;
    line-height: 28px;
    padding: 3px 29px;
    border-radius: 30px;
    background: rgb(255, 52, 0);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 52, 0, 1)), to(rgba(248, 121, 39, 1)));
    background: -o-linear-gradient(left, rgba(255, 52, 0, 1) 0%, rgba(248, 121, 39, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 52, 0, 1) 0%, rgba(248, 121, 39, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3400", endColorstr="#f87927", GradientType=1);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    text-decoration: none;
}

.fasc-button:hover {
    background: rgb(248, 121, 39);
    background: -webkit-gradient(linear, left top, right top, from(rgba(248, 121, 39, 1)), to(rgba(255, 52, 0, 1)));
    background: -o-linear-gradient(left, rgba(248, 121, 39, 1) 0%, rgba(255, 52, 0, 1) 100%);
    background: linear-gradient(90deg, rgba(248, 121, 39, 1) 0%, rgba(255, 52, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f87927", endColorstr="#ff3400", GradientType=1);
    text-decoration: none;
    color: #fff;
}

.fasc-type-popout.fasc-rounded-medium {
    color: #e94914;
    background: #fff;
}

.fasc-type-popout.fasc-rounded-medium:hover {
    color: #fff;
    background: rgb(248, 121, 39);
    background: -webkit-gradient(linear, left top, right top, from(rgba(248, 121, 39, 1)), to(rgba(255, 52, 0, 1)));
    background: -o-linear-gradient(left, rgba(248, 121, 39, 1) 0%, rgba(255, 52, 0, 1) 100%);
    background: linear-gradient(90deg, rgba(248, 121, 39, 1) 0%, rgba(255, 52, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f87927", endColorstr="#ff3400", GradientType=1);
}

/* sizes */
.fasc-size-xsmall {
    font-size: 10px;
    padding: 0px 10px;
    border: 0;
}

.fasc-size-small {
    font-size: 12px;
    padding: 7px 13px;
    border: 0;
    line-height: 17px;
}

.fasc-size-medium {
    font-size: 14px;
    padding: 7px 18px;
    font-size: 14px;
    line-height: 19px;
    border: 0;
}

.fasc-size-large {
    font-size: 18px;
    padding: 8px 22px;
    border: 0;
    line-height: 24px;
}

.fasc-size-xlarge {
    border: 0;
    line-height: 38px;
}



a.fasc-style-bold {
    font-weight: bold;
}

a.fasc-style-italic {
    font-style: italic;
}

a.fasc-style-strikethrough {
    text-decoration: line-through;
}

.fasc-button.fasc-style-strikethrough:hover {
    text-decoration: line-through;
}

/*
Search Section 
*/
.search-section {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .90);
    z-index: 99999;
    cursor: crosshair;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    top: 0;
}

.search-active .search-section {
    visibility: visible;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;

}

.search-box {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    min-width: 55%;
}

.search-active .search-box {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.search-box input {
    display: block;
    font-size: 18px;
    color: #fff;
    height: 50px;
    width: 100%;
    background-color: transparent;
    font-weight: 500;
    border: 1px solid #CBCBCB;
    border-radius: 5px;
    outline: 0;
    padding-left: 61px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 40px;
    border-radius: 24px;
}

.search-icon-input.fa {
    position: absolute;
    color: #CBCBCB;
    left: 4px;
    top: 3px;
    font-size: 21px;
    margin: 0;
    cursor: pointer;
    padding: 11px 17px;
}

.close-search {
    position: absolute;
    top: 25px;
    width: 27px;
    color: #fff;
    right: 40px;
    cursor: pointer;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

.close-search:hover {
    color: #E94914;
}

.search-result {
    position: absolute;
    width: 100%;
    display: none;
    padding-bottom: 50px;
}

.search-result-inner {
    background: #fff;
    padding: 10px 26px;
}

.stop-search .search-result {
    display: none !important;
}

.stop-search .clear-search-field {
    display: none !important;
}

.search-result a {
    display: block;
    color: #333;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    font-weight: 600;
    text-decoration: none;
}

.search-result a:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.search-result a:hover {
    color: #E94914;
}


.search-loading-spin.fa-spinner {
    position: absolute;
    color: #CBCBCB;
    right: 5px;
    top: 12px;
    font-size: 25px;
    margin: 0;
    display: none;
}

.clear-search-field {
    position: absolute;
    color: #CBCBCB;
    right: 9px;
    top: 1px;
    font-size: 26px;
    margin: 0;
    font-style: normal;
    font-weight: 600;
    display: none;
    cursor: pointer;
    padding: 5px 7px;
}

.no-found-text {
    display: block;
    margin-bottom: 23px;
    font-weight: 600;
    color: #222;
}


/* =====================================================================
   MEGA MENU — Tablet landscape scroll fix
   iPad mini (5th gen) landscape: 1024×768 viewport. The desktop mega
   menu renders (≥992px) but the panel content can exceed the available
   height below the fixed header.
   Fix: cap the dropdown height to the remaining viewport height and
   allow vertical scrolling on the inner wrap / panels column.
   Targets tablets in landscape only (max-width:1366px avoids touching
   real desktops; 992px lower bound keeps mobile unchanged).
   ===================================================================== */
@media screen and (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {

  /* Cap the dropdown itself */
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s1-trigger .dropdown-menu.mm-s1,
  .rul-header nav .navbar-nav .nav-item.custom-megamenu.mm-s2-trigger .dropdown-menu.mm-s2 {
    /* JS will set --mm-max-h via inline style; fall back to a safe static value */
    max-height: var(--mm-max-h, calc(100vh - 100px));
    overflow: hidden;
  }

  /* mm-s1: let the whole inner wrap scroll vertically */
  .dropdown-menu.mm-s1 .mm-s1-wrap {
    max-height: var(--mm-max-h, calc(100vh - 240px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }
  .dropdown-menu.mm-s1 .mm-s1-wrap::-webkit-scrollbar {
    width: 4px;
  }
  .dropdown-menu.mm-s1 .mm-s1-wrap::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
  }

  /* mm-s2: sidebar stays fixed, only the panels column scrolls */
  .dropdown-menu.mm-s2 .mm-s2-wrap {
    overflow: hidden;
    align-items: stretch;
  }
  .dropdown-menu.mm-s2 .mm-s2-sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .dropdown-menu.mm-s2 .mm-s2-panels {
    max-height: var(--mm-max-h, calc(100vh - 300px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
  }
  .dropdown-menu.mm-s2 .mm-s2-panels::-webkit-scrollbar {
    width: 4px;
  }
  .dropdown-menu.mm-s2 .mm-s2-panels::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
  }
}
/* END — Tablet landscape scroll fix */