/* ==========================================
   CAPITAL PAISA DIGITAL
   Premium Liquid Glass Header
========================================== */

.cp-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:var(--z-header);

    padding:18px 0;

    transition:all .35s ease;
}

.cp-header.scrolled{

    padding:12px 0;

    background:rgba(5,8,22,.45);

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

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

    box-shadow:0 12px 50px rgba(0,0,0,.25);
}

/* ========================= */

.cp-navbar{

    height:78px;

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

    padding:0 26px;

    border-radius:999px;

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

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

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

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

    position:relative;

    overflow:hidden;
}

.cp-navbar::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            transparent 50%
        );

    pointer-events:none;
}

/* ========================= */
/* Logo */
/* ========================= */

.cp-logo{

    display:flex;

    align-items:center;

    gap:14px;

    z-index:2;
}

.cp-logo-icon{

    width:54px;
    height:54px;

    border-radius:18px;

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

    background:var(--gradient-primary);

    color:#fff;

    font-weight:800;
    font-size:20px;

    box-shadow:

        0 10px 35px rgba(79,124,255,.45);
}

.cp-logo-text strong{

    display:block;

    font-size:20px;

    color:#fff;

    line-height:1;
}

.cp-logo-text small{

    display:block;

    margin-top:4px;

    color:var(--muted);

    font-size:13px;

    letter-spacing:.08em;

    text-transform:uppercase;
}

/* ========================= */
/* Navigation */
/* ========================= */

.cp-nav ul{

    display:flex;

    align-items:center;

    gap:36px;
}

.cp-nav a{

    position:relative;

    color:rgba(255,255,255,.82);

    font-weight:600;

    font-size:15px;

    transition:.30s;
}

.cp-nav a:hover{

    color:#fff;
}

.cp-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    border-radius:10px;

    background:linear-gradient(
        90deg,
        #4F7CFF,
        #7C4DFF
    );

    transition:.35s;
}

.cp-nav a:hover::after{

    width:100%;
}

/* ========================= */

.cp-header-right{

    display:flex;

    align-items:center;

    gap:14px;
}

/* ========================= */
/* Mobile Toggle */
/* ========================= */

.cp-menu-toggle{

    display:none;

    width:48px;
    height:48px;

    border-radius:16px;

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

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

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

    flex-direction:column;

    gap:5px;
}

.cp-menu-toggle span{

    width:22px;
    height:2px;

    border-radius:20px;

    background:#fff;

    transition:.35s;
}

/* ========================= */
/* Hover Effects */
/* ========================= */

.cp-navbar:hover{

    border-color:rgba(255,255,255,.18);

    box-shadow:

        0 20px 60px rgba(0,0,0,.35);
}

/* ========================= */
/* Responsive */
/* ========================= */

@media(max-width:1100px){

    .cp-nav{

        display:none;
    }

    .cp-menu-toggle{

        display:flex;
    }

}

@media(max-width:768px){

    .cp-navbar{

        height:70px;

        padding:0 18px;
    }

    .cp-logo-text{

        display:none;
    }

    .cp-header-right .btn{

        display:none;
    }

}