/* =====================================================
   GLOBAL
===================================================== */

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

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        padding: 0;

        font-family: "Poppins", sans-serif;

        color: #1c3f94;

        background: #ffffff;
      }

   a,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

      /* =====================================================
   COLORS
===================================================== */

      :root {
        --blue: #1c3f94;
        --red: #ee1b22;
      }

      /* =====================================================
   TOP BAR
===================================================== */

      .sx-top-bar {
        width: 100%;
        height: 42px;

        display: flex;
        align-items: center;

        background: var(--blue);
        color: #fff;

        overflow: hidden;
      }

      /* LEFT NOTICE */
      .sx-top-notice {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
      }

      .sx-notice-scroll {
        display: inline-block;
        padding-left: 100%;

        font-size: 16px;
        font-weight: 500;

        animation: noticeMove 18s linear infinite;
      }

      @keyframes noticeMove {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-100%);
        }
      }

      /* RIGHT SIDE */
      .sx-top-right {
        flex-shrink: 0;

        height: 100%;

        display: flex;
        align-items: center;
        gap: 22px;

        padding: 0 25px;
        background: var(--blue);
      }

      /* CALL / WHATSAPP */
      .sx-top-item {
        display: flex;
        align-items: center;
        gap: 8px;

        color: #fff;
        text-decoration: none;

        font-size: 16px;
        font-weight: 500;

        white-space: nowrap;
      }

      .sx-top-item i {
        font-size: 16px;
      }

      .sx-top-item.sx-call i {
        color: #ee1b22;
      }

      .sx-top-item.sx-whatsapp i {
        color: #00c853;
      }

      /* SOCIAL ICONS */
      .sx-social-icon {
        color: #fff;
        text-decoration: none;

        font-size: 20px;

        display: flex;
        align-items: center;
        justify-content: center;

        transition: 0.3s ease;
      }

      .sx-social-icon:hover {
        transform: translateY(-2px);
      }

      .sx-facebook:hover {
        color: #1877f2;
      }

      .sx-instagram:hover {
        color: #e4405f;
      }

      .sx-youtube:hover {
        color: #ff0000;
      }

      /* =====================================================
   MAIN HEADER
===================================================== */

      .sx-nav-wrapper {
        min-height: 100px;

        background: #ffffff;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0 2%;

        position: relative;

        z-index: 2000;
      }

      /* =====================================================
   LOGO
===================================================== */

      .sx-logo-area {
        display: flex;

        align-items: center;

        gap: 12px;
      }

      .sx-logo-area img {
        width: 100%;

        height: 107px;

        object-fit: contain;
      }

      .sx-logo-text h2 {
        margin: 0;

        font-family: Georgia, serif;

        font-size: 24px;

        color: var(--blue);

        letter-spacing: 1px;
      }

      .sx-logo-text h1 {
        margin: 0;

        font-family: Georgia, serif;

        font-size: 30px;

        color: var(--red);

        letter-spacing: 2px;
      }

      /* =====================================================
   MAIN NAVIGATION
===================================================== */

      .sx-main-nav {
        display: flex;

        align-items: center;

        gap: 30px;
      }

      .sx-main-nav a {
        color: var(--blue);

        font-size: 16px;

        font-weight: 500;

        position: relative;

        transition: 0.3s ease;
      }

      .sx-main-nav a:hover {
        color: var(--red);
      }

      /* Active */

      .sx-main-nav .sx-active {
        color: var(--red);
      }

      .sx-main-nav .sx-active::after {
        content: "";

        position: absolute;

        left: 0;

        right: 0;

        bottom: -12px;

        height: 3px;

        background: var(--red);
      }

      /* =====================================================
   LOGIN BUTTON
===================================================== */

      .sx-login-btn {
        background: var(--blue) !important;

        color: #ffffff !important;

        padding: 13px 22px;

        border-radius: 5px;

        font-size: 13px !important;

        font-weight: 600 !important;

        transition: 0.3s ease;
      }

      .sx-login-btn:hover {
        background: var(--red) !important;

        color: #ffffff !important;
      }

      /* =====================================================
   SECONDARY NAVIGATION
===================================================== */

      .sx-secondary-nav {
        width: 100%;

        min-height: 55px;

        background: var(--blue);

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 0;

        position: relative;

        z-index: 3000;
      }

      /* =====================================================
   DROPDOWN
===================================================== */

      .sx-dropdown {
        position: relative;
      }

      /* Main sx-dropdown link */

      .sx-dropdown > a {
        height: 55px;

        padding: 0 22px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        background: var(--blue);

        color: #ffffff;

        font-size: 15px;

        font-weight: 500;

        transition: 0.3s ease;
        text-decoration: none;
      }

      /* Font Awesome arrow */

      .sx-dropdown > a i {
        font-size: 10px;

        color: #ffffff;

        transition:
          transform 0.3s ease,
          color 0.3s ease;
      }

      /* Main hover */

      .sx-dropdown:hover > a {
        background: var(--red);

        color: #ffffff;
      }

      .sx-dropdown:hover > a i {
        color: #ffffff;

        transform: rotate(180deg);
      }

      /* =====================================================
   FIRST DROPDOWN MENU
===================================================== */

      .sx-dropdown-menu {
        position: absolute;

        top: 55px;

        left: 0;

        width: 320px;

        background: var(--blue);

        border-radius: 0;

        overflow: visible;

        opacity: 0.8;

        visibility: hidden;

        transform: translateY(8px);

        transition:
          opacity 0.25s ease,
          transform 0.25s ease,
          visibility 0.25s ease;
      }

      /* Show sx-dropdown */

      .sx-dropdown:hover > .sx-dropdown-menu {
        opacity: 0.9;

        visibility: visible;

        transform: translateY(0);
      }

      /* Dropdown links */

      .sx-dropdown-menu > a,
      .sx-dropdown-item > a {
        width: 100%;

        min-height: 48px;

        padding: 12px 16px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        background: var(--blue);

        color: #ffffff;

        font-size: 14px;

        transition:
          background 0.25s ease,
          color 0.25s ease,
          padding-left 0.25s ease;
      }

      /* Hover */

      .sx-dropdown-menu > a:hover,
      .sx-dropdown-item:hover > a {
        background: var(--red);
        border-left: 4px solid #ffffff;
        color: #ffffff;
        padding-left: 22px;
      }

      /* =====================================================
   NESTED DROPDOWN
===================================================== */

      .sx-dropdown-item {
        position: relative;
      }

      /* Right arrow */

      .sx-dropdown-item > a i {
        color: #ffffff;

        font-size: 11px;

        transition: 0.25s ease;
      }

      .sx-dropdown-item:hover > a i {
        color: #ffffff;

        transform: translateX(3px);
      }

      /* =====================================================
   SUBMENU
===================================================== */

      .sx-submenu {
        position: absolute;

        top: -2px;

        left: 100%;

        width: 300px;

        background: var(--blue);

        opacity: 0;

        visibility: hidden;

        transform: translateX(8px);

        transition:
          opacity 0.25s ease,
          transform 0.25s ease,
          visibility 0.25s ease;
      }

      /* Show */

      .sx-has-submenu:hover > .sx-submenu {
        opacity: 1;

        visibility: visible;

        transform: translateX(0);
      }

      /* Submenu links */

      .sx-submenu a {
        display: flex;

        align-items: center;

        width: 100%;

        min-height: 47px;

        padding: 12px 16px;

        background: var(--blue);

        color: #ffffff;

        font-size: 14px;

        transition:
          background 0.25s ease,
          color 0.25s ease,
          padding-left 0.25s ease;
      }

      /* Hover */

      .sx-submenu a:hover {
        background: var(--red);

        color: #ffffff;

        padding-left: 22px;
        border-left: 4px solid #ffffff;
      }

      /* =====================================================
   HERO CAROUSEL
===================================================== */

      .sx-hero-carousel {
        width: 100%;

        height: 600px;

        position: relative;

        overflow: hidden;
      }

      /* =====================================================
   SLIDE
===================================================== */

      .sx-hero-slide {
        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        background-size: cover;

        background-position: center;

        opacity: 0;

        transform: scale(1.05);

        transition:
          opacity 0.8s ease,
          transform 5s ease;

        pointer-events: none;
      }

      /* Active */

      .sx-hero-slide.sx-active {
        opacity: 1;

        transform: scale(1);

        pointer-events: auto;
      }

      /* =====================================================
   HERO OVERLAY
===================================================== */

      .sx-hero-slide .sx-hero-overlay {
        position: absolute;

        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(39, 39, 39, 0.9) 0%,
          rgba(19, 21, 23, 0.7) 60%,
          rgba(69, 70, 72, 0.25) 100%
        );
      }

      /* =====================================================
   HERO CONTENT
===================================================== */

      .sx-hero-slide .sx-hero-content {
        position: relative;

        z-index: 2;

        width: 100%;

        max-width: 1200px;

        height: 100%;

        margin: auto;

        padding: 80px 2%;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;

        color: #ffffff;
      }

      /* =====================================================
   TEXT ANIMATION
===================================================== */

      .sx-hero-slide.sx-active .sx-hero-small {
        animation: heroTextUp 0.8s ease forwards;
      }

      .sx-hero-slide.sx-active h1 {
        animation: heroTextUp 1s ease forwards;
      }

      .sx-hero-slide.sx-active .sx-hero-subtitle {
        animation: heroTextUp 1.2s ease forwards;
      }

      .sx-hero-slide.sx-active .sx-apply-btn {
        animation: heroTextUp 1.4s ease forwards;
      }

      .sx-hero-slide.sx-active .sx-admission-info {
        animation: heroTextUp 1.6s ease forwards;
      }

      @keyframes heroTextUp {
        from {
          opacity: 0;

          transform: translateY(35px);
        }

        to {
          opacity: 1;

          transform: translateY(0);
        }
      }

      /* =====================================================
   HERO SMALL TEXT
===================================================== */

      .sx-hero-small {
        color: var(--red);

        font-size: 15px;

        font-weight: 600;

        letter-spacing: 3px;

        margin-bottom: 12px;
      }

      /* =====================================================
   HERO TITLE
===================================================== */

      .sx-hero-slide h1 {
        margin: 0;

        font-family: Merriweather;

        font-size: clamp(45px, 5vw, 72px);

        line-height: 1.05;

        max-width: 750px;

        color: #ffffff;
      }

      .sx-hero-slide h1 span {
        color: var(--red);
        font-family: Poppins;
      }

      /* =====================================================
   SUBTITLE
===================================================== */

      .sx-hero-slide .sx-hero-subtitle {
        margin-top: 20px;

        font-size: 22px;

        color: #ffffff;
      }

      /* =====================================================
   APPLY BUTTON
===================================================== */

      .sx-hero-slide .sx-apply-btn {
        display: inline-flex;

        align-items: center;

        gap: 15px;

        margin-top: 35px;

        padding: 16px 32px;

        background: var(--red);

        color: #ffffff;

        border-radius: 5px;

        font-weight: 600;

        transition: 0.3s ease;
      }

      .sx-hero-slide .sx-apply-btn:hover {
        background: var(--blue);

        color: #ffffff;

        transform: translateY(-3px);
      }

      /* =====================================================
   ADMISSION INFORMATION
===================================================== */

      .sx-hero-slide .sx-admission-info {
        margin-top: 35px;

        max-width: 700px;
      }

      .sx-hero-slide .sx-admission-info h3 {
        font-size: 25px;

        margin-bottom: 8px;

        color: #ffffff;
      }

      .sx-hero-slide .sx-admission-info p {
        font-size: 15px;

        color: #ffffff;
      }

      /* =====================================================
   PROSPECTUS BUTTON
===================================================== */

      .sx-hero-slide .sx-prospectus-btn {
        display: inline-block;

        margin-top: 15px;

        padding: 10px 20px;

        border: 2px solid var(--red);

        color: var(--red);

        border-radius: 5px;

        font-weight: 600;

        transition: 0.3s ease;
      }

      .sx-hero-slide .sx-prospectus-btn:hover {
        background: var(--red);

        color: #ffffff;
      }

      /* =====================================================
   CAROUSEL ARROWS
===================================================== */

      .sx-hero-prev,
      .sx-hero-next {
        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        z-index: 20;

        width: 48px;

        height: 48px;

        background: var(--blue);

        color: #ffffff;

        border-radius: 50%;

        cursor: pointer;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: 0.3s ease;
      }

      .sx-hero-prev {
        left: 25px;
      }

      .sx-hero-next {
        right: 25px;
      }

      .sx-hero-prev:hover,
      .sx-hero-next:hover {
        background: var(--red);

        color: var(--blue);

        transform: translateY(-50%) scale(1.1);
      }

      /* =====================================================
   CAROUSEL DOTS
===================================================== */

      .sx-hero-dots {
        position: absolute;

        bottom: 25px;

        left: 50%;

        transform: translateX(-50%);

        z-index: 20;

        display: flex;

        align-items: center;

        gap: 9px;
      }

      .sx-hero-dot {
        width: 10px;

        height: 10px;

        border-radius: 50%;

        background: var(--blue);

        /* border: 2px solid var(--red); */

        cursor: pointer;

        transition: 0.3s ease;
      }

      .sx-hero-dot.sx-active {
        width: 30px;

        border-radius: 10px;

        background: var(--red);
      }

      /* =====================================================
   NOTICE BAR
===================================================== */

      .sx-notice-bar {
        min-height: 45px;

        background: var(--blue);

        color: #ffffff;

        display: flex;

        align-items: center;

        overflow: hidden;

        font-size: 14px;

        font-weight: 500;
      }

      .sx-notice-label {
        background: var(--red);

        color: #ffffff;

        height: 45px;

        display: flex;

        align-items: center;

        padding: 0 25px;

        font-weight: 700;

        white-space: nowrap;
      }

      .sx-notice-text {
        padding-left: 25px;

        color: #ffffff;

        white-space: nowrap;
      }

      .sx-call-box {
        display: flex;
        align-items: center;
        gap: 2px;

        background: #1c3f94;
        padding: 5px 15px 6px 8px;
        border-radius: 7px;

        text-decoration: none;
        font-family: "Poppins", sans-serif;
      }
      .sx-call-box:hover {
        background: var(--red);
        color: #ffffff;
      }

      .sx-call-number:hover {
        color: #ffffff;
      }

      .sx-call-icon {
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .sx-call-icon i {
        color: #fff;
        font-size: 21px;
      }

      .sx-call-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.2;
      }

      .sx-call-title {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
      }

      .sx-call-number {
        color: #ffffff;
        font-size: 15px;
        font-weight: 500;
      }

      .main-nav-mobile-close {
        display: none;
      }

      /* mobile sx-call us  */

      /* =====================================================
   MOBILE ACTION ROW
===================================================== */

      .sx-mobile-action-row {
        display: none;
      }

      @media (max-width: 850px) {
        .sx-mobile-action-row {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 8px;

          padding: 12px 36px;

          background: #ffffff;
        }

        /* STUDENT LOGIN */

        .sx-mobile-login-btn {
          flex: 1;

          height: 40px;

          display: flex;
          align-items: center;
          justify-content: center;

          padding: 0 8px;

          background: var(--blue) !important;
          color: #ffffff !important;

          border-radius: 5px;

          font-size: 12px !important;
          font-weight: 600 !important;

          white-space: nowrap;
        }

        /* CALL US */

        .sx-mobile-call-box {
          flex: 1;

          height: 40px;

          display: flex;
          align-items: center;

          gap: 6px;

          padding: 4px 8px;

          background: var(--blue);

          border-radius: 5px;
        }

        .sx-mobile-call-box .sx-call-icon {
          width: 25px;
          flex-shrink: 0;
        }

        .sx-mobile-call-box .sx-call-icon i {
          font-size: 18px;
          color: #ffffff;
        }

        .sx-mobile-call-box .sx-call-content {
          display: flex;
          flex-direction: column;
          line-height: 1.1;
        }

        .sx-mobile-call-box .sx-call-title {
          font-size: 11px;
          color: #ffffff;
          font-weight: 600;
        }

        .sx-mobile-call-box .sx-call-number {
          font-size: 10px;
          color: var(--red);
          font-weight: 600;
          white-space: nowrap;
        }

        /* IMPORTANT:
       Hide the old LOGIN + CALL US
       from the mobile sidebar */

        .sx-main-nav > .sx-login-btn,
        .sx-main-nav > .sx-call-box {
          display: none !important;
        }
      }

      /* =====================================================
   TABLET
===================================================== */

      @media (max-width: 1100px) {
        .sx-main-nav {
          gap: 18px;
        }

        .sx-main-nav a {
          font-size: 14px;
        }

        .sx-dropdown > a {
          padding: 0 15px;

          font-size: 14px;
        }
      }

      /* =====================================================
   MOBILE NAVIGATION
===================================================== */

      @media (max-width: 850px) {
        .sx-top-bar {
          justify-content: center;

          flex-wrap: wrap;

          height: auto;

          min-height: 38px;

          padding: 8px 15px;
          gap: 9px;
        }

        .sx-nav-wrapper {
          flex-direction: column;

          gap: 20px;

          padding: 20px;
        }

        .sx-main-nav {
          width: 100%;

          flex-wrap: wrap;

          justify-content: center;

          gap: 15px;
        }

        .sx-secondary-nav {
          flex-direction: column;

          align-items: stretch;

          width: 100%;
        }

        .sx-dropdown {
          width: 100%;
        }

        .sx-dropdown > a {
          width: 100%;

          height: auto;

          min-height: 50px;

          justify-content: space-between;

          padding: 14px 20px;
        }

        .sx-dropdown-menu {
          position: static;

          width: 100%;

          display: none;

          opacity: 1;

          visibility: visible;

          transform: none;
        }

        .sx-dropdown:hover > .sx-dropdown-menu {
          display: block;
        }

        .sx-submenu {
          position: static;

          width: 100%;

          display: none;

          opacity: 1;

          visibility: visible;

          transform: none;
        }

        .sx-has-submenu:hover > .sx-submenu {
          display: block;
        }

        .sx-dropdown-menu > a,
        .sx-dropdown-item > a {
          padding-left: 30px;
        }

        .sx-submenu a {
          padding-left: 50px;
        }

        /* Hero */

        .sx-hero-carousel {
          height: 550px;
        }

        .sx-hero-slide .sx-hero-content {
          padding: 50px 25px;
        }
      }

      /* =====================================================
   SMALL MOBILE
===================================================== */

      @media (max-width: 600px) {
        .sx-logo-area img {
          width: 100%;
          height: 61px;
        }

        .sx-logo-text h2 {
          font-size: 18px;
        }

        .sx-logo-text h1 {
          font-size: 24px;
        }

        .sx-main-nav {
          gap: 10px;
        }

        .sx-main-nav a {
          font-size: 11px;
        }

        /* Hero */

        .sx-hero-carousel {
          height: 560px;
        }

        .sx-hero-slide .sx-hero-content {
          padding: 40px 25px;
        }

        .sx-hero-small {
          font-size: 10px;

          letter-spacing: 2px;
        }

        .sx-hero-slide h1 {
          font-size: 38px;

          max-width: 90%;
        }

        .sx-hero-slide .sx-hero-subtitle {
          font-size: 16px;
        }

        .sx-hero-slide .sx-apply-btn {
          padding: 13px 22px;

          font-size: 13px;
        }

        .sx-hero-slide .sx-admission-info {
          margin-top: 25px;
        }

        .sx-hero-slide .sx-admission-info h3 {
          font-size: 20px;
        }

        .sx-hero-slide .sx-admission-info p {
          font-size: 12px;
        }

        /* Arrows */

        .sx-hero-prev,
        .sx-hero-next {
          display: none;

          width: 38px;

          height: 38px;
        }

        .sx-hero-prev {
          left: 10px;
        }

        .sx-hero-next {
          right: 10px;
        }

        /* Notice */

        .sx-notice-bar {
          font-size: 11px;
        }

        .sx-notice-label {
          padding: 0 12px;
        }
      }

      /* =====================================================
   VERY SMALL MOBILE
===================================================== */

      @media (max-width: 420px) {
        .sx-logo-text h2 {
          font-size: 16px;
        }

        .sx-logo-text h1 {
          font-size: 21px;
        }

        .sx-hero-carousel {
          height: 520px;
        }

        .sx-hero-slide h1 {
          font-size: 34px;
        }

        .sx-hero-slide .sx-hero-subtitle {
          font-size: 14px;
        }

        .sx-hero-slide .sx-admission-info h3 {
          font-size: 18px;
        }

        .sx-hero-slide .sx-admission-info p {
          font-size: 11px;
        }

        .sx-hero-dot.sx-active {
          width: 25px;
        }
      }

      /* =====================================================
   MOBILE HEADER - LOGO + TWO MENU CONTROLS IN ONE ROW
   Desktop content/layout remains unchanged.
===================================================== */

      .sx-mobile-main-menu-btn,
      .sx-mobile-secondary-menu-btn {
        display: none;
      }

      @media (max-width: 850px) {
        /* Keep logo + two menu buttons in ONE ROW */
        .sx-nav-wrapper {
          min-height: 72px;
          height: 72px;

          display: flex;
          flex-direction: row;
          align-items: center;

          justify-content: space-between;
          gap: 0;

          padding: 6px 10px;
          background: #ffffff;
        }

        .sx-logo-area {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          min-width: 0;
        }

        .sx-logo-area img {
          width: auto;
          width: 100%;
          height: 61px;

          object-fit: contain;
        }

        /* Main navigation toggle - middle */
        .sx-mobile-main-menu-btn {
          display: flex;

          align-items: center;
          justify-content: center;

          width: 42px;
          height: 42px;

          margin-left: auto;
          margin-right: 8px;

          border: none;
          border-radius: 4px;

          background: var(--blue);
          color: #ffffff;

          font-size: 20px;
          cursor: pointer;

          flex-shrink: 0;
        }

        .sx-mobile-main-menu-btn:hover {
          background: var(--red);
        }

        /* Secondary navigation menu button - right */
        .sx-mobile-secondary-menu-btn {
          display: flex;

          align-items: center;
          justify-content: center;

          gap: 6px;

          height: 42px;
          padding: 0 12px;

          border: none;
          border-radius: 4px;

          background: var(--blue);
          color: #ffffff;

          font-family: "Poppins", sans-serif;
          font-size: 14px;
          font-weight: 600;

          cursor: pointer;

          flex-shrink: 0;
        }

        .sx-mobile-secondary-menu-btn:hover {
          background: var(--red);
        }

        .sx-mobile-secondary-menu-btn i {
          font-size: 16px;
        }

        /* Hide desktop sx-main-nav; it becomes the left sidebar */
        .sx-main-nav {
          position: fixed;

          top: 0;
          left: 0;

          width: 300px;
          max-width: 85vw;
          height: 100vh;

          display: flex;
          flex-direction: column;
          align-items: stretch;
          justify-content: flex-start;

          gap: 0;

          padding: 70px 0 20px;

          background: var(--blue);

          z-index: 10001;

          overflow-y: auto;

          transform: translateX(-100%);
          transition: transform 0.35s ease;

          box-shadow: 5px 0 20px rgba(0, 0, 0, 0.25);
        }

        .sx-main-nav.mobile-open {
          transform: translateX(0);
        }

        .sx-main-nav a {
          width: 100%;
          min-height: 50px;

          display: flex;
          align-items: center;

          padding: 14px 22px;

          color: #ffffff;

          font-size: 15px;
          font-weight: 500;
        }

        .sx-main-nav a:hover,
        .sx-main-nav .sx-active {
          background: var(--red);
          color: #ffffff;
        }

        .sx-main-nav .sx-active::after {
          display: none;
        }

        .sx-main-nav .sx-login-btn {
          margin: 10px 18px 0;
          width: calc(100% - 36px);

          justify-content: center;

          background: var(--red) !important;
          color: #ffffff !important;
        }

        .sx-main-nav .sx-call-box {
          margin: 10px 18px 0;
          width: calc(100% - 36px);

          justify-content: flex-start;
        }

        /* Main-nav close button is injected by JS */
        .main-nav-mobile-close {
          position: absolute;

          top: 0;
          right: 0;

          width: 100%;
          height: 55px;

          display: flex;
          align-items: center;
          justify-content: flex-end;

          padding: 0 18px;

          border: none;

          background: var(--red);
          color: #ffffff;

          font-size: 15px;
          font-weight: 600;

          cursor: pointer;
        }

        .main-nav-mobile-close i {
          margin-right: 7px;
        }

        /* Existing secondary sidebar */
        .sx-secondary-nav-wrapper {
          position: fixed;

          top: 0;
          left: 0;

          width: 300px;
          max-width: 85vw;
          height: 100vh;

          background: var(--blue);

          z-index: 10000;

          overflow-y: auto;

          transform: translateX(-100%);
          transition: transform 0.35s ease;

          box-shadow: 5px 0 20px rgba(0, 0, 0, 0.25);
        }

        .sx-secondary-nav-wrapper.sx-active {
          transform: translateX(0);
        }

        .sx-sidebar-close-btn {
          display: flex;

          align-items: center;
          justify-content: flex-end;

          gap: 8px;

          width: 100%;

          padding: 16px 20px;

          border: none;

          background: var(--red);
          color: #ffffff;

          font-size: 15px;
          font-weight: 600;

          cursor: pointer;
        }

        .sx-secondary-nav {
          display: block;
          width: 100%;
          min-height: 0;
        }

        .sx-secondary-nav > .sx-dropdown {
          width: 100%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        }

        .sx-secondary-nav > .sx-dropdown > a {
          display: flex;

          align-items: center;
          justify-content: space-between;

          width: 100%;

          padding: 17px 18px;

          color: #ffffff;
          background: var(--blue);

          text-decoration: none;

          font-size: 15px;
          font-weight: 600;
        }

        .sx-secondary-nav > .sx-dropdown > a:hover {
          background: var(--red);
        }

        .sx-secondary-nav .sx-dropdown-menu {
          display: none;

          position: static;

          width: 100%;

          background: var(--blue);

          box-shadow: none;
          border: none;
          padding: 0;

          opacity: 1;
          visibility: visible;
          transform: none;
        }

        .sx-secondary-nav .sx-dropdown.open > .sx-dropdown-menu {
          display: block;
        }

        .sx-secondary-nav .sx-dropdown-menu > a,
        .sx-secondary-nav .sx-dropdown-menu > .sx-dropdown-item > a {
          display: flex;

          align-items: center;
          justify-content: space-between;

          padding: 13px 25px;

          color: #ffffff;
          background: var(--blue);

          text-decoration: none;

          font-size: 14px;
        }

        .sx-secondary-nav .sx-dropdown-menu > a:hover,
        .sx-secondary-nav .sx-dropdown-menu > .sx-dropdown-item > a:hover {
          background: var(--red);
        }

        .sx-secondary-nav .sx-submenu {
          display: none;

          position: static;

          width: 100%;

          background: var(--blue);

          padding: 0;
          box-shadow: none;

          opacity: 1;
          visibility: visible;
          transform: none;
        }

        .sx-secondary-nav .sx-has-submenu.open > .sx-submenu {
          display: block;
        }

        .sx-secondary-nav .sx-submenu a {
          display: block;

          padding: 12px 40px;

          color: #ffffff;
          background: var(--blue);

          text-decoration: none;

          font-size: 13px;
        }

        .sx-secondary-nav .sx-submenu a:hover {
          background: var(--red);
        }

        /* One overlay shared by either sidebar */
        .sx-sidebar-overlay {
          position: fixed;

          inset: 0;

          display: none;

          background: transparent;

          z-index: 9999;
        }

        .sx-sidebar-overlay.sx-active {
          display: block;
        }

        body.menu-open {
          overflow: hidden;
        }
      }

      /* Small mobile */
      @media (max-width: 420px) {
        .sx-nav-wrapper {
          height: 68px;
          min-height: 68px;
          padding: 5px 8px;
        }

        .sx-logo-area img {
          width: 100%;
          height: 61px;
        }

        .sx-mobile-main-menu-btn {
          width: 40px;
          height: 40px;
          margin-right: 6px;
          font-size: 18px;
        }

        .sx-mobile-secondary-menu-btn {
          height: 40px;
          padding: 0 10px;
          font-size: 13px;
        }

        .sx-mobile-secondary-menu-btn i {
          font-size: 15px;
        }
      }

      /* ================================
   MOBILE MENU BUTTON
================================ */

      .sx-mobile-menu-btn {
        display: none;

        align-items: center;
        justify-content: center;
        gap: 8px;

        border: none;
        background: #1c3f94;
        color: #fff;

        padding: 12px 18px;

        font-size: 15px;
        font-weight: 600;

        cursor: pointer;
      }

      /* ================================
   SIDEBAR
================================ */

      .sx-secondary-nav-wrapper {
        position: relative;
      }

      /* CLOSE BUTTON */
      .sx-sidebar-close-btn {
        display: none;
      }

      /* OVERLAY */
      .sx-sidebar-overlay {
        display: none;
      }

      /* ================================
   MOBILE
================================ */

      @media (max-width: 768px) {
        /* Hamburger visible */
        .sx-mobile-menu-btn {
          display: flex;
          width: 100%;
          justify-content: end;
        }

        /* Sidebar */
        .sx-secondary-nav-wrapper {
          position: fixed;

          top: 0;
          left: 0;

          width: 300px;
          max-width: 85vw;
          height: 100vh;

          background: #1c3f94;

          z-index: 9999;

          overflow-y: auto;

          transform: translateX(-100%);
          transition: transform 0.35s ease;

          box-shadow: 5px 0 20px rgba(0, 0, 0, 0.25);
        }

        /* OPEN SIDEBAR */
        .sx-secondary-nav-wrapper.sx-active {
          transform: translateX(0);
        }

        /* CLOSE */
        .sx-sidebar-close-btn {
          display: flex;

          align-items: center;
          justify-content: flex-end;

          gap: 8px;

          width: 100%;

          padding: 16px 20px;

          border: none;

          background: #ee1b22;
          color: #fff;

          font-size: 15px;
          font-weight: 600;

          cursor: pointer;
        }

        /* SECONDARY NAV */
        .sx-secondary-nav {
          display: block;
          width: 100%;
        }

        /* MAIN MENU ITEM */
        .sx-secondary-nav > .sx-dropdown {
          width: 100%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        }

        .sx-secondary-nav > .sx-dropdown > a {
          display: flex;

          align-items: center;
          justify-content: space-between;

          width: 100%;

          padding: 17px 18px;

          color: #fff;

          text-decoration: none;

          font-size: 15px;
          font-weight: 600;
        }

        .sx-secondary-nav > .sx-dropdown > a:hover {
          background: #ee1b22;
        }

        /* MAIN DROPDOWN */
        .sx-secondary-nav .sx-dropdown-menu {
          display: none;

          position: static;

          width: 100%;

          background: #17367f;

          box-shadow: none;

          border: none;

          padding: 0;
        }

        /* OPEN DROPDOWN */
        .sx-secondary-nav .sx-dropdown.open > .sx-dropdown-menu {
          display: block;
        }

        /* DROPDOWN LINKS */
        .sx-secondary-nav .sx-dropdown-menu > a,
        .sx-secondary-nav .sx-dropdown-menu > .sx-dropdown-item > a {
          display: flex;

          align-items: center;
          justify-content: space-between;

          padding: 13px 25px;

          color: #fff;

          text-decoration: none;

          font-size: 14px;
        }

        .sx-secondary-nav .sx-dropdown-menu > a:hover,
        .sx-secondary-nav .sx-dropdown-menu > .sx-dropdown-item > a:hover {
          background: #ee1b22;
          border-left: 4px solid #ffffff;
        }

        /* SUBMENU */
        .sx-secondary-nav .sx-submenu {
          display: none;

          position: static;

          width: 100%;

          background: #12316f;

          padding: 0;

          box-shadow: none;
        }

        .sx-secondary-nav .sx-has-submenu.open > .sx-submenu {
          display: block;
        }

        .sx-secondary-nav .sx-submenu a {
          display: block;

          padding: 12px 40px;

          color: #fff;

          text-decoration: none;

          font-size: 13px;
        }

        .sx-secondary-nav .sx-submenu a:hover {
          background: #ee1b22;
          border-left: 4px solid #ffffff;
        }

        /* OVERLAY */
        .sx-sidebar-overlay {
          position: fixed;

          inset: 0;

          background: transparent;

          z-index: 9998;
        }

        .sx-sidebar-overlay.sx-active {
          display: block;
        }

        /* Prevent page scrolling when menu open */
        body.menu-open {
          overflow: hidden;
        }
      }

      /* =====================================================
   FINAL MOBILE OVERRIDES
   These override the older responsive rules above.
===================================================== */
      @media (max-width: 850px) {
        .sx-nav-wrapper {
          flex-direction: row !important;
          gap: 0 !important;
          padding: 6px 10px !important;
        }

        .sx-main-nav {
          width: 300px !important;
          max-width: 85vw !important;
          flex-wrap: nowrap !important;
          justify-content: flex-start !important;
          gap: 0 !important;
          padding: 70px 0 20px !important;
        }

        .sx-main-nav a {
          font-size: 15px !important;
        }

        .sx-secondary-nav {
          flex-direction: column !important;
          align-items: stretch !important;
          width: 100% !important;
        }

        .sx-secondary-nav-wrapper {
          display: block !important;
        }

        .sx-mobile-menu-btn {
          display: none !important;
        }
      }