/* ==========================================================
   RTSC WEBSITE V14 ULTIMATE
   NAVIGATION
   Version : 14.0
========================================================== */


/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

#main-navigation{

    position:sticky;

    top:var(--header-height);

    z-index:998;

    background:rgba(8,20,36,.96);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border);

    transition:var(--transition);

}

#main-navigation .container{

    display:flex;

    justify-content:center;

    align-items:center;

}

#main-navigation ul{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:34px;

    padding:18px 0;

}

#main-navigation li{

    position:relative;

}

#main-navigation a{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 0;

    color:var(--text-secondary);

    font-weight:600;

    transition:var(--transition);

}


/* ==========================================================
   ACTIVE LINK
========================================================== */

#main-navigation a.active{

    color:var(--color-primary);

}

#main-navigation a.active::after{

    width:100%;

}


/* ==========================================================
   HOVER EFFECT
========================================================== */

#main-navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primary);

    border-radius:999px;

    transition:var(--transition);

}

#main-navigation a:hover{

    color:var(--color-primary);

}

#main-navigation a:hover::after{

    width:100%;

}


/* ==========================================================
   NAVIGATION ICON
========================================================== */

.nav-icon{

    font-size:1rem;

}


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

.dropdown{

    position:absolute;

    top:calc(100% + 18px);

    left:50%;

    transform:translateX(-50%) translateY(15px);

    min-width:240px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    transition:var(--transition);

}

.dropdown li{

    width:100%;

}

.dropdown a{

    padding:14px 20px;

    display:block;

    color:var(--text-secondary);

}

.dropdown a::after{

    display:none;

}

.dropdown a:hover{

    background:rgba(255,255,255,.05);

    color:var(--color-primary);

}

.has-dropdown:hover>.dropdown{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}


/* ==========================================================
   MEGA MENU
========================================================== */

.mega-menu{

    position:absolute;

    left:50%;

    top:calc(100% + 18px);

    transform:translateX(-50%);

    width:min(1100px,90vw);

    padding:40px;

    background:var(--surface);

    border-radius:var(--radius-lg);

    border:1px solid var(--border);

    box-shadow:var(--shadow-lg);

    display:none;

}

.has-mega:hover>.mega-menu{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}

.mega-menu h4{

    margin-bottom:18px;

    color:var(--color-primary);

}

.mega-menu a{

    display:block;

    margin-bottom:12px;

}

.mega-menu a::after{

    display:none;

}


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

.mobile-toggle{

    display:none;

    width:48px;

    height:48px;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--surface);

    color:var(--text-primary);

    cursor:pointer;

}

.mobile-toggle:hover{

    background:var(--color-primary);

    color:#000;

}


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

.mobile-navigation{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:90vw;

    height:100vh;

    background:var(--background-secondary);

    border-left:1px solid var(--border);

    z-index:9999;

    transition:.4s ease;

    overflow-y:auto;

    padding:40px 25px;

}

.mobile-navigation.open{

    right:0;

}

.mobile-navigation ul{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.mobile-navigation a{

    display:block;

    padding:16px;

    border-radius:var(--radius-md);

    color:var(--text-primary);

}

.mobile-navigation a:hover{

    background:rgba(255,255,255,.05);

    color:var(--color-primary);

}


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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:9998;

}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   STICKY NAV EFFECT
========================================================== */

.navigation-scrolled{

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    #main-navigation{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

}

@media(max-width:768px){

    .mobile-navigation{

        width:280px;

    }

}

@media(max-width:576px){

    .mobile-navigation{

        width:100%;

        max-width:100%;

    }

}
/* MASTER BUILD NAVIGATION */
.rtsc-site-header{position:sticky;z-index:1000;top:0;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(3,13,25,.88);backdrop-filter:blur(20px)}.rtsc-header-inner{display:flex;min-height:76px;align-items:center;justify-content:space-between;gap:20px}.rtsc-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}.rtsc-brand img{width:52px;height:52px;object-fit:contain}.rtsc-brand strong,.rtsc-brand small{display:block}.rtsc-brand strong{color:var(--color-gold,#ffc107);font-size:1.05rem}.rtsc-brand small{margin-top:2px;color:rgba(255,255,255,.66);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}.rtsc-header-tools{display:flex;align-items:center;gap:8px}.rtsc-version-chip{padding:8px 11px;border:1px solid rgba(255,193,7,.22);border-radius:999px;color:#ffe071;background:rgba(255,193,7,.06);font-size:.62rem;font-weight:850}.rtsc-icon-button{display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#fff;background:rgba(255,255,255,.05)}.rtsc-member-button{display:inline-flex;min-height:42px;align-items:center;padding:9px 15px;border-radius:999px;color:#101820;background:linear-gradient(135deg,#ffe071,#ffc107,#ff8c1a);font-size:.72rem;font-weight:900;text-decoration:none}.rtsc-mobile-menu{display:none}.rtsc-main-navigation{position:sticky;z-index:900;top:76px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(4,17,31,.95)}.rtsc-main-navigation ul{display:flex;align-items:center;gap:3px;margin:0;padding:9px 0;list-style:none}.rtsc-main-navigation a,.rtsc-main-navigation button{display:flex;min-height:39px;align-items:center;padding:8px 11px;border:0;border-radius:999px;color:rgba(255,255,255,.78);background:transparent;font-size:.7rem;font-weight:800;text-decoration:none;white-space:nowrap}.rtsc-main-navigation a:hover,.rtsc-main-navigation button:hover{color:#ffe071;background:rgba(255,193,7,.07)}.rtsc-nav-more{position:relative}.rtsc-nav-dropdown{position:absolute;top:calc(100% + 8px);right:0;display:none;width:220px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#07182b;box-shadow:0 22px 55px rgba(0,0,0,.36)}.rtsc-nav-more.open .rtsc-nav-dropdown{display:grid}.rtsc-site-footer{padding:65px 0 24px;border-top:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,#061321,#02080f);color:#fff}.rtsc-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}.rtsc-footer-grid section{display:flex;flex-direction:column;gap:9px}.rtsc-footer-logo{width:70px;height:70px;object-fit:contain}.rtsc-footer-grid h3,.rtsc-footer-grid h4{margin:0}.rtsc-footer-grid p,.rtsc-footer-grid a{color:rgba(255,255,255,.65);font-size:.78rem;line-height:1.65;text-decoration:none}.rtsc-footer-grid a:hover{color:#ffe071}.rtsc-footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:35px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.48);font-size:.66rem}.component-error{margin:20px;padding:18px;border:1px solid rgba(255,69,58,.25);border-radius:16px;color:#ffd1ce;background:rgba(255,69,58,.06)}
@media(max-width:1100px){.rtsc-version-chip{display:none}.rtsc-mobile-menu{display:grid}.rtsc-main-navigation{position:fixed;z-index:950;top:76px;right:12px;left:12px;display:none;max-height:calc(100vh - 92px);overflow:auto;border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 28px 70px rgba(0,0,0,.45)}.rtsc-main-navigation.open{display:block}.rtsc-main-navigation ul{align-items:stretch;flex-direction:column;padding:12px}.rtsc-main-navigation li,.rtsc-main-navigation a,.rtsc-main-navigation button{width:100%}.rtsc-nav-dropdown{position:static;width:100%;margin-top:5px;box-shadow:none}.rtsc-footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.rtsc-header-inner{min-height:68px}.rtsc-main-navigation{top:68px}.rtsc-brand img{width:45px;height:45px}.rtsc-brand small{display:none}.rtsc-member-button{display:none}.rtsc-footer-grid{grid-template-columns:1fr}.rtsc-footer-bottom{flex-direction:column}}
html[data-theme=light] .rtsc-site-header,html[data-theme=light] .rtsc-main-navigation{background:rgba(248,250,252,.94)}html[data-theme=light] .rtsc-brand,html[data-theme=light] .rtsc-icon-button{color:#102136}html[data-theme=light] .rtsc-brand small,html[data-theme=light] .rtsc-main-navigation a,html[data-theme=light] .rtsc-main-navigation button{color:rgba(16,33,54,.72)}
