/* =====================================================
   TOPBAR (GLASS / GLOSSY)
===================================================== */
    .su-header-menu.su-topbar {
        font-family: 'Montserrat', 'Poppins', sans-serif;
        font-size: 14px;
        padding: 0.4rem 0;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
        transition: transform 0.35s ease, opacity 0.35s ease;
    }

    /* hide on scroll */
    .su-topbar.su-hide {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* topbar links */
    .su-topbar-links a {
        color: #fff;
        margin-left: 1.1rem;
        text-decoration: none;
        position: relative;
        padding-bottom: 2px;
        white-space: nowrap;
    }

    /* gradient underline hover */
    .su-topbar-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #0d6efd, #0dcaf0);
        transition: width 0.3s ease;
    }

    .su-topbar-links a:hover::after {
        width: 100%;
    }

    /* =====================================================
   MAIN HEADER (STACKING CONTEXT FIX)
===================================================== */
    .su-header-menu.su-main-header {
        position: sticky;
        top: 0;
        z-index: 3000;
        /* important */
    }

    .su-main-header .navbar {
        padding: 0.9rem 0;
    }

    /* =====================================================
   LOGO
===================================================== */
    .su-logo {
        max-height: 52px;
        width: auto;
    }

    /* =====================================================
   PRIMARY MENU
===================================================== */
    .su-primary-menu {
        gap: 1.6rem;
    }

    .su-primary-menu .nav-link {
        font-family: 'Montserrat', 'Poppins', sans-serif;
        font-weight: 500;
        color: #0b2b4f;
        position: relative;
        padding: 0.45rem 0;
        transition: color 0.25s ease;
    }

    .su-primary-menu .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #0d6efd, #0dcaf0);
        transition: width 0.3s ease;
    }

    .su-primary-menu .nav-link:hover {
        color: #0d6efd;
    }

    .su-primary-menu .nav-link:hover::after {
        width: 100%;
    }

    /* =====================================================
   ICON BUTTONS
===================================================== */
    .su-icon-btn {
        background: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.45);
        font-size: 1.05rem;
        color: #0b2b4f;
        padding: 0.45rem 0.6rem;
        border-radius: 8px;
        margin-left: 0.15rem;
        backdrop-filter: blur(6px);
        transition: all 0.2s ease;
    }

    .su-icon-btn:hover {
        background: rgba(13, 110, 253, 0.15);
        color: #0d6efd;
        border-color: rgba(13, 110, 253, 0.35);
    }

    /* =====================================================
   CTA BUTTON
===================================================== */
    .su-cta-btn {
        background: linear-gradient(135deg, #0b5ed7, #0dcaf0);
        color: #fff;
        font-weight: 500;
        padding: 0.45rem 1.15rem;
        border-radius: 12px;
        border: none;
        box-shadow:
            0 8px 20px rgba(13, 110, 253, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .su-cta-btn:hover {
        transform: translateY(-1px);
        box-shadow:
            0 12px 28px rgba(13, 110, 253, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }

    /* =====================================================
   MEGA MENU — CENTERED & SAFE
===================================================== */

    /* IMPORTANT: disable li positioning */
    .su-mega-wrap {
        position: static;
    }

    /* mega panel */
    .su-mega-menu {
        position: absolute;
        left: 50%;
        top: calc(100% + 0px);
        transform: translateX(-50%) translateY(12px);

        width: min(1100px, 95vw);

        background: linear-gradient(to right,
                rgba(255, 255, 255, 0.75),
                rgba(240, 248, 255, 0.65));
        backdrop-filter: blur(18px) saturate(160%);
        border-radius: 6px;
        padding: 2rem 1.5rem;

        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);

        opacity: 0;
        visibility: hidden;
        z-index: 4000;
        transition: all 0.35s ease;
    }

    /* show */
    .su-mega-wrap:hover .su-mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
  .su-mega-menu .row .col-lg-4:not(:last-child) {
    border-right: 1px solid #CCA2B9;
  }
    /* =====================================================
   MEGA MENU CONTENT
===================================================== */
    .su-mega-menu .mega-title {
         font-family: 'Poppins', 'Montserrat', sans-serif;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: #111827;
        border-bottom: 1px solid #CCA2B9;
        padding: 10px;
    }

    .su-mega-menu a {
        font-family: 'Montserrat', 'Poppins', sans-serif;
        display: block;
        margin-bottom: 0.45rem;
        font-size: 14px;
        color: #2A2A45;
        position: relative;
        padding: 0px 15px;
               transition: width 0.3s ease;
    }

    .su-mega-menu a::hover {
        background: linear-gradient(90deg, #2D3380, #9E2274);
    }

        .su-mega-menu a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #0d6efd, #0dcaf0);
        transition: width 0.3s ease;
    }

    .su-mega-menu a:hover::after {
        width: 100%;
    }

.search__trigger{
    cursor: pointer;
}
    /* =====================================================
   MEGA MENU COLUMN ANIMATION
===================================================== */
    .su-mega-menu .col-lg-4 {
        opacity: 0;
        transform: translateY(14px);
        transition: all 0.4s ease;
    }

    .su-mega-wrap:hover .col-lg-4 {
        opacity: 1;
        transform: translateY(0);
    }

    .su-mega-wrap:hover .col-lg-4:nth-child(1) {
        transition-delay: 0.05s;
    }

    .su-mega-wrap:hover .col-lg-4:nth-child(2) {
        transition-delay: 0.12s;
    }

    .su-mega-wrap:hover .col-lg-4:nth-child(3) {
        transition-delay: 0.18s;
    }

    .bg-gray-200 {
        background-color: oklch(92.8% 0.006 264.531);
    }

    .su-header-menu svg {
        height: 20px;
        width: auto;
    }

    .menu-section {
              background: linear-gradient(0deg, #2D3380 0%, #9E2274 100%);
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: #135391 #f1f5f9;
    }

    .su-header-right ul {
        margin: 0;
    }

    .gradient-btn1 {
        font-family: 'Montserrat', 'Poppins', sans-serif;
        margin: 0 !important;
        background: linear-gradient(214.38deg, #353391 -2.24%, #585BA7 59.38%);
        color: white;
        border-radius: 5px;
        padding: 6px 10px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
        text-decoration: none;
        transition: background 0.3s ease;
    }

    .gradient-btn1:hover {
        background: linear-gradient(214.38deg, #2D3380 -2.24%, #9E2274 59.38%);
        color: white;
        border-radius: 5px;
        padding: 6px 10px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 5px;
        text-decoration: none;
    }

    /* =====================================================
   TOGGLE PANEL WRAPPER
===================================================== */
    .su-toggle-wrap {
        position: relative;
    }

    /* =====================================================
   TOGGLE PANEL
===================================================== */
    .su-toggle-panel {
        position: absolute;
        right: 0;
        top: calc(100% + 12px);

        width: 360px;
        padding: 1.25rem;

        background: linear-gradient(to right,
                rgba(255, 255, 255, 0.8),
                rgba(240, 248, 255, 0.7));
        backdrop-filter: blur(18px) saturate(160%);
        border-radius: 10px;

        box-shadow:
            0 25px 50px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);

        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: all 0.35s ease;
        z-index: 5000;
    }

    /* show on hover */
    .su-toggle-wrap:hover .su-toggle-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* =====================================================
   TOGGLE ITEMS
===================================================== */
    .su-toggle-item {
        font-family: 'Montserrat', 'Poppins', sans-serif;
        text-align: center;
        padding: 0.75rem 0.4rem;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.25s ease;
    }

    .su-toggle-item:hover {
        background: rgba(13, 110, 253, 0.1);
        transform: translateY(-2px);
    }

    .su-toggle-item svg {
        width: 22px;
        height: 22px;
        margin-bottom: 0.3rem;
        stroke: #0b2b4f;
    }

    .su-toggle-item span {
        display: block;
        font-size: 13px;
        color: #0b2b4f;
    }

    .su-toggle-trigger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .su-toggle-wrap {
        background-color: #fff;
        padding: 6px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .su-toggle-wrap:hover {
        background-color: #d1d5db;
    }

    /* default: topbar visible */
    .su-header-menu .navbar.fixed-top {
        top: 35px;
        transition: top 0.3s ease;
    }

    /* when topbar is hidden */
    .su-topbar.su-hide~.su-main-header .navbar.fixed-top {
        top: 0;
    }

    @media(max-width: 992px) {
        .su-mega-menu {
            display: none;
        }
    }

    /* Custom Offcanvas */
    .custom-offcanvas {
        position: fixed;
        top: 68px;
        left: -3000px;
        width: 300px;
        height: 100%;
        border-radius: 0px 5px 5px 0px;
        background-color: #fff;
        backdrop-filter: blur(10px);
        transition: left 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
    }

    .custom-offcanvas.show {
        left: 0;
    }

    .offcanvas-backdrop {
        position: fixed;
        top: 68px;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 1050;
    }

    .offcanvas-backdrop.show {
        display: block;
    }

    /* Your Provided SVG Button Animation CSS */
    .line {
        fill: none;
        stroke: #0b2a47;
        stroke-width: 6;
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
            stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .line1 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }

    .line2 {
        stroke-dasharray: 60 60;
        stroke-width: 6;
    }

    .line3 {
        stroke-dasharray: 60 207;
        stroke-width: 6;
    }

    .opened .line1 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }

    .opened .line2 {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
        stroke-width: 6;
    }

    .opened .line3 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
        stroke-width: 6;
    }

    .mobile-menu-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .mobile-menu .main-menu-list {
        list-style: none;
        padding: 10px;
        margin: 0;
    }

    .mobile-menu .main-menu-list li {
        display: block;
        font-size: 15px;
        color: #0b2a47;
        text-decoration: none;
        font-family: 'Montserrat', 'Poppins', sans-serif;
        margin-bottom: 5px;
    }
    .mobile-menu .row a {
        display: block;
        font-size: 14px;
        color: #0b2a47;
        text-decoration: none;
        font-family: 'Montserrat', 'Poppins', sans-serif;
    }

    .mobile-menu .row .mega-title {
        font-size: 15px;
        color: #F8BD23;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
        font-family: 'Montserrat', 'Poppins', sans-serif;
        margin-bottom: 5px;
    }

    .mobile-menu .main-menu-list li:first-child {
        border-top: none;
    }

    .mobile-menu .main-menu-list li:last-child {
        border-bottom: none;
    }

    .mobile-menu .main-menu-list li button {
        border: none;
        color: #0b2a47;
        transition: all 0.3s ease;
        padding: 8px;
    }

    .mobile-menu .quick-links a {
        font-family: 'Montserrat', 'Poppins', sans-serif;
        color: #0b2a47;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    @media(max-width: 992px) {
        .mobile-menu-action-div {
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .su-header-menu svg {
            height: 30px;
        }

        .mobile-menu .chevron-icon {
            transition: transform 0.3s ease;
        }


        .mobile-menu button[aria-expanded="true"] .chevron-icon {
            transform: rotate(180deg);
        }

        .mobile-menu .gradient-btn1 {
            color: white;
            display: flex;
            justify-content: center;
        }

        .quick-links ul {
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .quick-links ul li {
            margin: 0px 10px;
        }
    }

    @media(max-width: 576px) {
        .su-logo {
            max-width: 200px;
        }

        .su-header-menu .navbar.fixed-top {
            top: 0px !important;
            transition: top 0.3s ease;
        }
    }