/*==============================
LIQUID CONTAINER
==============================*/

.nav-liquid{

    position:absolute;

    top:5px;

    left:0px;

    width:0;

    height:calc(100% - 10px);

    border-radius:999px;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

    transform:translateX(0);
    background:rgba(255,255,255,.05);

    backdrop-filter:
    blur(18px)
    saturate(180%); will-change: transform, backdrop-filter;
    box-shadow:

    inset 0 1px rgba(255,255,255,.70),

    inset 0 -1px rgba(255,255,255,.08),

    0 12px 32px rgba(255,80,80,.12),

    0 22px 45px rgba(0,0,0,.10);
    animation:

    liquidGlow 4s ease-in-out infinite;

}
.nav-liquid::before{

    content:"";

    position:absolute;

    left:8%;

    top:5%;

    width:84%;

    height:42%;

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.95),

            rgba(255,255,255,0)

        );

    opacity:.9;

    filter:blur(7px);

}
.nav-liquid::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        radial-gradient(

            circle at 25% 30%,

            rgba(255,255,255,.40),

            transparent 35%

        ),

        radial-gradient(

            circle at 75% 75%,

            rgba(255,255,255,.18),

            transparent 55%

        );

    mix-blend-mode:screen;

}
.glass-layer{

    position:absolute;

    inset:0;

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.42),

            rgba(255,255,255,.10)

        );

    border:

        1px solid rgba(255,255,255,.28);

    box-shadow:

        inset 0 1px rgba(255,255,255,.65),

        inset 0 -1px rgba(255,255,255,.12),

        0 10px 28px rgba(255,100,100,.10);

}
.glass-highlight{

    position:absolute;

    left:8%;

    top:6%;

    width:84%;

    height:36%;

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.9),

            rgba(255,255,255,0)

        );

    filter:blur(6px);

    opacity:.95;

}
.glass-reflection{

    position:absolute;

    inset:0;

    border-radius:999px;

    background:

        radial-gradient(

            circle at 25% 28%,

            rgba(255,255,255,.45),

            transparent 40%

        ),

        radial-gradient(

            circle at 80% 80%,

            rgba(255,255,255,.18),

            transparent 60%

        );

    mix-blend-mode:screen;

}
.nav-link-d{
  padding:8px 14px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--muted);
  position:relative;
  z-index:2;
    transition:
        color .3s ease,
        transform .3s ease;

}

.nav-link-d:hover{

transform:

translateY(-1px);


}

.nav-link-d:hover::after{

opacity:1;

}

.nav-link-d.active{

    color:var(--red);

}

.nav-links-desktop{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    padding:6px;

    border-radius:999px;

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

    backdrop-filter:blur(14px); will-change: transform, backdrop-filter;

    -webkit-backdrop-filter:blur(14px); will-change: transform, backdrop-filter;

    border:1px solid rgba(255,255,255,.22);

    box-shadow:
        inset 0 1px rgba(255,255,255,.25);


}


/* ════════════════ TOP NAVBAR ════════════════ */
.top-nav{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.10)
        );

    backdrop-filter:
        blur(26px)
        saturate(180%); will-change: transform, backdrop-filter;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(180%); will-change: transform, backdrop-filter;

    border-bottom:

        1px solid rgba(255,255,255,.30);

    box-shadow:

        inset 0 1px rgba(255,255,255,.70),

        0 18px 45px rgba(0,0,0,.10);

}
.top-nav::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.05) 25%,
            rgba(255,255,255,.12) 50%,
            rgba(255,255,255,.05) 75%,
            transparent 100%
        );

    opacity:.8;

    animation:glassMove 12s ease-in-out infinite;

}
.top-nav::after{

    content:"";

    position:absolute;

    left:50%;

    top:-120px;

    transform:translateX(-50%);

    width:900px;

    height:320px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(255,70,70,.08),
            transparent 70%
        );

    filter:blur(70px);

    pointer-events:none;

}
.top-nav.scrolled{

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

    backdrop-filter:blur(32px); will-change: transform, backdrop-filter;

    -webkit-backdrop-filter:blur(32px); will-change: transform, backdrop-filter;

    border-bottom:1px solid rgba(255,255,255,.30);

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);

}
.top-nav.scrolled .nav-logo{

    transform:scale(1.03);

    filter:drop-shadow(
        0 3px 10px rgba(200,25,43,.18)
    );

}
.top-nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:8px;
  padding:0 20px;height:64px;
  position:relative;
  z-index:2;
  transition:.35s;
}
.nav-logo{

    display:flex;

    align-items:center;

    gap:10px;

    position:relative;

    z-index:20;

    transition:
        transform .35s ease,
        filter .35s ease;

}
.nav-logo-icon{

    width:44px;
    height:44px;
    object-fit:contain;
    transition:transform .25s ease;
    position:relative;
    left:4px;
    top:-4px;

}

.nav-logo:hover .nav-logo-icon{

    transform:rotate(-5deg) scale(1.08);

}

.logo-text{

    color:var(--red);

    font-weight:800;

    letter-spacing:.5px;

    transition:
        color .35s,
        text-shadow .35s;

}

/* PDF CAROUSEL */
.pdf-carousel-wrap{
  display:flex;overflow-x:auto;gap:14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:8px 2px 12px;
}
.pdf-carousel-wrap::-webkit-scrollbar{display:none;}
.pdf-slide{
  flex-shrink:0;scroll-snap-align:center;
  border-radius:12px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  background:#fff;
}
.pdf-slide canvas{display:block;}
.pdf-loading-msg{
  padding:40px 20px;color:var(--muted);
  font-size:14px;text-align:center;width:100%;
}
/* Course card hover lift */
.course-mini-link{
  flex-shrink:0;width:155px;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  display:block;
}
.course-mini-link:hover{transform:translateY(-8px);}
.course-mini-link:hover .course-mini-inner{
  box-shadow:0 14px 32px rgba(200,25,43,.22);
}
.course-mini-inner{
  border-radius:10px;overflow:hidden;
  border:1px solid #ececec;background:#fff;
  transition:box-shadow .22s;
}
.nav-cta-top{
  margin-left:auto;
  background:var(--red);color:#fff;
  padding:9px 20px;border-radius:50px;
  font-size:14px;font-weight:700;
  transition:all .2s;white-space:nowrap;
  border:none;
}
.nav-cta-top:hover{background:var(--red2);transform:translateY(-1px);}

/* hamburger for mobile */
.hamburger-btn{
  display:none;background:none;border:none;
  padding:6px;cursor:pointer;margin-left:auto;
    position:relative;
    z-index:10000;

}

.hamburger-btn svg{

    width:24px;

    height:24px;

    color:var(--red);

    transition:
        transform .25s,
        color .25s;

}

/* mobile drawer */
.mobile-drawer{

    display:none;

    position:fixed;

    top:64px;

    left:10px;

    right:10px;

    border-radius:0 0 22px 22px;

    overflow:hidden;

    z-index:9998;

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

    backdrop-filter:blur(24px) saturate(180%); will-change: transform, backdrop-filter;

    -webkit-backdrop-filter:blur(24px) saturate(180%); will-change: transform, backdrop-filter;

    border:1px solid rgba(255,255,255,.22);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10),
        inset 0 1px rgba(255,255,255,.35);

    padding:12px 0;

}
.mobile-drawer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.35),
            rgba(255,255,255,.05)
        );

    pointer-events:none;

}
.mobile-drawer::after{

    content:"";

    position:absolute;

    left:50%;

    top:-60px;

    width:260px;

    height:140px;

    transform:translateX(-50%);

    background:
        radial-gradient(

            rgba(255,90,90,.18),

            transparent 72%

        );

    filter:blur(30px);

    pointer-events:none;

}
.mobile-drawer.open{display:block;}
.drawer-link{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 24px;

    font-size:15px;

    font-weight:600;

    color:var(--text);

    border-bottom:1px solid rgba(255,255,255,.15);

    transition:
        background .25s,
        color .25s;

}
.drawer-link:last-child{border-bottom:none;}
.drawer-link:hover{

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

    color:var(--red);

}
.drawer-link svg{width:20px;height:20px;flex-shrink:0;color:var(--red);}

@keyframes liquidGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.08);

    }

    100%{

        filter:brightness(1);

    }

}

/*==============================
GLASS ANIMATION
==============================*/

@keyframes glassMove{

    0%{

        transform:translateX(-12%);

    }

    50%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(12%);

    }

}

@keyframes liquidShine{

0%{

left:-120%;

}

100%{

left:180%;

}

}

.bottom-liquid,
.nav-liquid{

    will-change:
        transform;

    transform-origin:center;

    touch-action:none;

    transition:

        filter .25s ease;

}

.bottom-liquid.dragging,
.nav-liquid.dragging{

    cursor:grabbing;

    filter:

        brightness(1.08)

        saturate(1.15);

}