/* ============================================================
       TOP BAR — desktop
    ============================================================ */
    #rise-topbar {
        background: #08386E;
        height: 36px;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 10000;
        transition: height 0.2s;
    }
    #rise-topbar .tb-inner {
        max-width: 1200px; margin: 0 auto; padding: 0 20px;
        display: flex; align-items: center;
        justify-content: space-between; width: 100%;
    }
    #rise-topbar .tb-links {
        display: flex; align-items: center;
        list-style: none; margin: 0; padding: 0;
    }
    #rise-topbar .tb-links li a {
        color: rgba(255,255,255,0.82); font-size: 12px; font-weight: 500;
        padding: 0 14px; height: 36px;
        display: flex; align-items: center; gap: 6px;
        text-decoration: none;
        border-right: 1px solid rgba(255,255,255,0.12);
        transition: color 0.2s, background 0.2s;
        white-space: nowrap;
    }
    #rise-topbar .tb-links li:first-child a { border-left: 1px solid rgba(255,255,255,0.12); }
    #rise-topbar .tb-links li a:hover { color: #fff; background: rgba(255,255,255,0.09); text-decoration: none; }
    #rise-topbar .tb-links li a i { font-size: 11px; opacity: 0.8; }
    #rise-topbar .tb-social { display: flex; align-items: center; gap: 6px; }
    #rise-topbar .tb-social a {
        color: rgba(255,255,255,0.78); font-size: 13px;
        width: 28px; height: 28px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 5px; text-decoration: none;
        transition: background 0.2s, color 0.2s;
    }
    #rise-topbar .tb-social a:hover { background: rgba(255,255,255,0.15); color: #fff; }

    /* ============================================================
       HEADER — desktop (≥ 992px)
    ============================================================ */
    .header-area {
        background: #fff !important;
        box-shadow: 0 2px 16px rgba(8,56,110,0.10) !important;
        border-bottom: 3px solid #08386E !important;
        padding: 0 !important;
        height: auto !important;
    }
    .header-area.header-sticky { top: 36px !important; }
    .header-area::after { display: none !important; }

    /* Main nav wrapper */
    .header-area .main-nav {
        background: #fff !important;
        padding: 0 !important;
        min-height: 72px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Logo */
    .header-area .logo {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #08386E !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        padding: 10px 0 !important;
        float: none !important;
        line-height: 1 !important;
    }
    .header-area .logo img:first-child { height: 46px !important; width: 29px !important; filter: none !important; }
    .header-area .logo b {
        font-family: 'MontereyFLF-Bold', sans-serif !important;
        font-size: 23px !important; color: #08386E !important;
        white-space: nowrap !important; line-height: 1 !important;
    }
    .header-area .logo img:last-child { height: 50px !important; width: 50px !important; }

    /* ── Desktop nav (≥ 992px) ── */
    @media (min-width: 992px) {
        .header-area .main-nav .nav {
            display: flex !important;
            align-items: center !important;
            flex-wrap: nowrap !important;
            gap: 0 !important;
            margin: 0 !important; padding: 0 !important;
            float: none !important; list-style: none !important;
            height: 72px !important;
        }
        .header-area .main-nav .nav > li {
            float: none !important;
            display: flex !important; align-items: center !important;
            height: 72px !important; position: relative !important;
        }
        .header-area .main-nav .nav > li > a {
            color: #2c2c2c !important; font-size: 13px !important;
            font-weight: 600 !important; padding: 0 10px !important;
            height: 72px !important;
            display: flex !important; align-items: center !important;
            white-space: nowrap !important;
            border-bottom: 3px solid transparent !important;
            margin-bottom: -3px !important;
            transition: color 0.2s, border-color 0.2s !important;
            text-decoration: none !important;
        }
        .header-area .main-nav .nav > li > a:hover,
        .header-area .main-nav .nav > li > a.active {
            color: #08386E !important;
            border-bottom-color: #08386E !important;
            text-decoration: none !important;
        }
        /* Contact pill (last item) */
        .header-area .main-nav .nav > li:last-child > a {
            background: #08386E !important; color: #fff !important;
            border-radius: 6px !important; padding: 8px 16px !important;
            height: auto !important; border-bottom: none !important;
            margin-bottom: 0 !important; margin-left: 6px !important;
        }
        .header-area .main-nav .nav > li:last-child > a:hover { background: #0a4e9a !important; }
        /* Dropdown */
        .header-area .main-nav .nav li.submenu ul {
            background: #fff !important;
            border: 1px solid #dce5f3 !important;
            border-radius: 10px !important;
            box-shadow: 0 8px 32px rgba(8,56,110,0.15) !important;
            padding: 6px 0 !important; min-width: 210px !important;
            top: 72px !important; overflow: hidden !important;
        }
        .header-area .main-nav .nav li.submenu ul li a {
            color: #333 !important; font-size: 13px !important;
            font-weight: 500 !important; padding: 9px 20px !important;
            display: block !important; white-space: nowrap !important;
            transition: background 0.15s, color 0.15s, padding-left 0.15s !important;
        }
        .header-area .main-nav .nav li.submenu ul li a:hover {
            background: #f0f4fb !important; color: #08386E !important;
            padding-left: 26px !important; text-decoration: none !important;
        }
        /* Hide hamburger on desktop */
        .header-area .menu-trigger { display: none !important; }
    }

    /* ============================================================
       TABLET + MOBILE SHARED — hamburger menu (< 992px)
       KEY FIX: nav uses static flow (not absolute) so header
       expands and overflow:hidden from template doesn't clip it.
    ============================================================ */
    @media (max-width: 991px) {
        /* Override template overflow:hidden */
        .header-area .main-nav { overflow: visible !important; }

        /* Show hamburger, position it */
        .header-area .menu-trigger {
            display: block !important;
            position: absolute !important;
            right: 16px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 100 !important;
        }
        /* Nav: hidden by default, expands via jQuery slideToggle */
        .header-area .main-nav .nav {
            display: none;
            float: none !important;
            width: 100% !important;
            background: #fff !important;
            border-top: 2px solid #08386E !important;
            box-shadow: 0 6px 20px rgba(8,56,110,0.12) !important;
            height: auto !important;
            max-height: none !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            padding: 0 !important;
            margin: 0 !important;
            position: static !important;
        }
        /* li items */
        .header-area .main-nav .nav > li {
            width: 100% !important;
            height: auto !important;
            display: block !important;
            float: none !important;
            border-bottom: 1px solid #f0f4fb !important;
        }
        .header-area .main-nav .nav > li > a {
            display: block !important;
            height: auto !important;
            padding: 13px 20px !important;
            color: #1a1a2e !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            border-bottom: none !important;
            margin-bottom: 0 !important;
            white-space: normal !important;
            line-height: 1.4 !important;
        }
        .header-area .main-nav .nav > li > a:hover,
        .header-area .main-nav .nav > li > a:active {
            background: #f0f4fb !important;
            color: #08386E !important;
        }
        /* Contact pill – last item */
        .header-area .main-nav .nav > li:last-child {
            border-bottom: none !important;
            padding: 10px 16px !important;
        }
        .header-area .main-nav .nav > li:last-child > a {
            background: #08386E !important;
            color: #fff !important;
            border-radius: 8px !important;
            padding: 11px 20px !important;
            margin: 0 !important;
            border-bottom: none !important;
            display: block !important;
        }
        /* Submenu dropdown */
        .header-area .main-nav .nav li.submenu ul {
            position: static !important;
            visibility: visible !important;
            opacity: 1 !important;
            transform: none !important;
            display: none !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            background: #f8fafd !important;
            border-left: 3px solid #016E6E !important;
            margin: 0 0 0 20px !important;
            padding: 4px 0 !important;
            min-width: auto !important;
            width: auto !important;
            height: auto !important;
        }
        .header-area .main-nav .nav li.submenu ul.active {
            display: block !important;
            height: auto !important;
        }
        .header-area .main-nav .nav li.submenu ul li {
            width: 100% !important;
            background: transparent !important;
            border-bottom: 1px solid #edf0f7 !important;
        }
        .header-area .main-nav .nav li.submenu ul li:last-child { border-bottom: none !important; }
        .header-area .main-nav .nav li.submenu ul li a {
            display: block !important;
            padding: 10px 16px !important;
            color: #444 !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            white-space: normal !important;
            height: auto !important;
            line-height: 1.4 !important;
            background: transparent !important;
        }
        .header-area .main-nav .nav li.submenu ul li a:hover {
            color: #08386E !important;
            background: #eef2fb !important;
            padding-left: 22px !important;
        }
        /* Nested "Committee" submenu — mobile accordion (second level) */
        .header-area .main-nav .nav li.submenu ul li.has-flyout > ul {
            background: #eef3fb !important;
            border-left: 3px solid #016E6E !important;
            margin: 0 0 0 14px !important;
        }
    }

    /* ============================================================
       NESTED "Committee" FLYOUT — desktop (≥ 992px)
    ============================================================ */
    @media (min-width: 992px) {
        /* IMPORTANT: let the side flyout escape the parent dropdown's clipping */
        .header-area .main-nav .nav > li.submenu > ul {
            overflow: visible !important;
        }
        .header-area .main-nav .nav li.submenu ul li.has-flyout {
            position: relative !important;
        }
        /* use a single RIGHT-pointing caret (override the template's down-caret) */
        .header-area .main-nav .nav li.submenu ul li.has-flyout:after {
            content: '\f105' !important;
            right: 14px !important;
        }
        /* nested panel: hidden by default even when parent dropdown is open */
        .header-area .main-nav .nav li.submenu ul li.has-flyout > ul {
            position: absolute !important;
            top: -7px !important;
            left: 100% !important;
            margin: 0 !important;
            min-width: 230px !important;
            background: #fff !important;
            border: 1px solid #dce5f3 !important;
            border-radius: 10px !important;
            box-shadow: 0 8px 32px rgba(8,56,110,.15) !important;
            padding: 6px 0 !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transform: translateX(8px) !important;
            transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s !important;
            z-index: 5 !important;
        }
        /* invisible bridge so the cursor can travel into the flyout without losing hover */
        .header-area .main-nav .nav li.submenu ul li.has-flyout > ul::before {
            content: ''; position: absolute;
            top: 0; left: -10px; width: 10px; height: 100%;
        }
        /* reveal only when hovering the nested parent */
        .header-area .main-nav .nav li.submenu ul li.has-flyout:hover > ul {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateX(0) !important;
            transition-delay: 0s !important;
        }
        /* flip flyout to the LEFT side if it would overflow the screen edge */
        .header-area .main-nav .nav li.submenu ul li.has-flyout.flip-left > ul {
            left: auto !important; right: 100% !important;
        }
        .header-area .main-nav .nav li.submenu ul li.has-flyout.flip-left > ul::before {
            left: auto !important; right: -10px !important;
        }
    }

    /* ── TABLET specific (768–991px) ── */
    @media (min-width: 768px) and (max-width: 991px) {
        #rise-topbar .tb-links li a { padding: 0 10px; font-size: 11px; }
        .header-area.header-sticky { top: 36px !important; }
        .header-area .main-nav { min-height: 68px !important; position: relative !important; }
        .header-area .logo b { font-size: 20px !important; }
        .header-area .logo img:first-child { height: 40px !important; width: 25px !important; }
        .header-area .logo img:last-child  { height: 44px !important; width: 44px !important; }
        div[ng-view] { padding-top: 104px !important; }
    }

    /* ── MOBILE specific (< 768px) ── */
    @media (max-width: 767px) {
        #rise-topbar { height: 40px !important; }
        #rise-topbar .tb-links { display: none !important; }
        #rise-topbar .tb-inner { justify-content: space-between !important; }
        #rise-topbar .tb-social a { width: 32px; height: 32px; font-size: 15px; }
        #tb-mobile-toggle { display: inline-flex !important; }
        #tb-mobile-links.open { display: block !important; }

        .header-area.header-sticky { top: 40px !important; }
        .header-area .main-nav { min-height: 56px !important; position: relative !important; }
        .header-area .menu-trigger { right: 12px !important; }
        /* compact logo on phones: RISE icon + short text only, hide the 2nd (BUET) logo */
        .header-area .logo { gap: 5px !important; padding: 8px 0 !important; max-width: calc(100% - 60px); }
        .header-area .logo b    { font-size: 16px !important; }
        .header-area .logo img:first-child { height: 30px !important; width: 19px !important; }
        .header-area .logo img:last-child  { display: none !important; }
        /* when the mobile menu is open, hide the logo so the menu is the focus */
        .header-area.menu-open .logo { opacity: 0 !important; visibility: hidden !important; }
        div[ng-view] { padding-top: 100px !important; }
    }

    /* Bigger, clearer hamburger tap target on phones/tablets */
    @media (max-width: 991px) {
        .header-area .menu-trigger {
            width: 42px !important; height: 42px !important;
            display: flex !important; align-items: center; justify-content: center;
            border-radius: 10px; background: #f0f4fb;
        }
        .header-area .menu-trigger span,
        .header-area .menu-trigger span::before,
        .header-area .menu-trigger span::after { background-color: #08386E !important; }
        .header-area.menu-open .menu-trigger { background: #08386E; }
        .header-area.menu-open .menu-trigger span,
        .header-area.menu-open .menu-trigger span::before,
        .header-area.menu-open .menu-trigger span::after { background-color: #fff !important; }
        /* roomier, tappable menu rows */
        .header-area .main-nav .nav > li > a { padding: 15px 20px !important; font-size: 15px !important; }
    }

/* ---- PHP main content wrapper (replaces Angular ng-view paddings) ---- */
.rise-main { min-height: 750px; padding-top: 108px; }
@media (min-width: 768px) and (max-width: 991px) { .rise-main { padding-top: 104px !important; } }
@media (max-width: 767px) { .rise-main { padding-top: 100px !important; } }

/* ============================================================
   PAGE LOADER
============================================================ */
#rise-loader{
  position:fixed; inset:0; z-index:100001;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#040e22 0%,#08386E 60%,#0a4a8a 100%);
  transition:opacity .5s ease, visibility .5s ease;
}
#rise-loader.rl-hide{ opacity:0; visibility:hidden; }
.rl-box{ text-align:center; }
.rl-logo{
  width:96px; height:96px; margin:0 auto 18px; border-radius:26px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  animation:rlPulse 1.6s ease-in-out infinite;
}
.rl-logo img{ display:block; height:56px; width:auto; animation:rlFloat 2.4s ease-in-out infinite; }
@keyframes rlPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(91,224,224,.4); } 60%{ box-shadow:0 0 0 20px rgba(91,224,224,0); } }
@keyframes rlFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.rl-name{
  color:#fff; font-weight:800; letter-spacing:3px; font-size:15px; text-transform:uppercase;
  margin-bottom:16px; opacity:.9;
}
.rl-bar{ width:170px; height:4px; margin:0 auto; border-radius:4px; background:rgba(255,255,255,.16); overflow:hidden; }
.rl-bar span{
  display:block; height:100%; width:40%; border-radius:4px;
  background:linear-gradient(90deg,#5be0e0,#ffffff);
  animation:rlSlide 1.1s ease-in-out infinite;
}
@keyframes rlSlide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
@media(prefers-reduced-motion:reduce){
  .rl-logo,.rl-logo img,.rl-bar span{ animation:none; }
}