/* ========================= */
/* GOOGLE FONT */
/* ========================= */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

/* ========================= */
/* ROOT */
/* ========================= */

:root{

    --bg-main:#081a3a;
    --nav-bg:rgba(16, 28, 58, 0.72);
    --border:rgba(255,255,255,0.08);

    --white:#ffffff;
    --soft-white:#d8dff2;

    --purple:#6f6f9d;
    --dark-purple:#424769;

    --peach:#f9b17a;

    --shadow:
    0 10px 40px rgba(0,0,0,0.25);

}

/* ========================= */
/* RESET */
/* ========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Outfit', sans-serif;
    background:var(--bg-main);
    overflow-x:hidden;

}

/* ========================= */
/* NAVBAR */
/* ========================= */

.cs-navbar{

    overflow: visible;
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);

    width:calc(100% - 60px);
    max-width:1450px;

    height:72px;

    padding:0 18px;

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

    background:var(--nav-bg);

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

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

    border-radius:26px;

    z-index:99999;

    box-shadow:var(--shadow);


}


/* ========================= */
/* LEFT */
/* ========================= */

.cs-left{

    display:flex;
    align-items:center;
    gap:18px;

    z-index:2;

}

/* ========================= */
/* IMAGE LOGO */
/* ========================= */

.cs-logo-image-wrap{

    position:relative;

    width:48px;
    height:48px;
    box-shadow: 0 0 18px rgba(249,177,122,0.12);

    border-radius:20px;

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

    background:linear-gradient(135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02));

    border:1px solid rgba(255,255,255,0.08);

    overflow:hidden;

    transition:0.5s ease;

}

.cs-logo-image-wrap:hover{

    transform:translateY(-4px) rotate(-2deg);

}

/* GLOW */

.logo-glow{

    position:absolute;

    width:100%;
    height:100%;

    background:radial-gradient(circle,
    rgba(249,177,122,0.45),
    transparent 70%);

    animation:pulseGlow 3s ease-in-out infinite;

}

/* IMG */

.cs-logo-img{

    width:85%;
    height:85%;

    object-fit:cover;

    border-radius:16px;

    position:relative;
    z-index:2;

}

/* ========================= */
/* TEXT LOGO */
/* ========================= */

.cs-logo-text{

    display:flex;
    flex-direction:column;

    text-decoration:none;

    line-height:1;

    position:relative;

}

.text-line{

    
    font-weight:800;
    font-size:0.82rem;
    letter-spacing:3px;
    color:var(--white);

    position:relative;

    overflow:hidden;

}

.text-line::before{

    content:'';

    position:absolute;
    left:-120%;
    top:0;

    width:100%;
    height:100%;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.7),
    transparent);

    animation:textShine 5s linear infinite;

}

.text-line.shades{

    color:var(--peach);

    margin-top:4px;

}

/* ========================= */
/* NAV LINKS */
/* ========================= */

.cs-nav-links{

    display:flex;
    align-items:center;
    gap:10px;

   z-index: 9999;
}

.nav-link{

    position:relative;

    text-decoration:none;

    color:var(--soft-white);

    font-weight:600;

    padding:10px 14px;
    font-size:0.88rem;

    border-radius:16px;

    transition:0.4s ease;

    overflow:hidden;

}

.nav-link span{

    position:relative;
    z-index:2;

}

.nav-link::before{

    content:'';

    position:absolute;
    inset:0;

    background:linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.02));

    opacity:0;

    transition:0.4s ease;

}

.nav-link:hover::before,
.nav-link.active::before{

    opacity:1;

}

.nav-link:hover{

    color:var(--white);

    transform:translateY(-2px);

}

.nav-link::after{

    content:'';

    position:absolute;
    left:50%;
    bottom:6px;

    width:0%;
    height:1px;

    background:var(--peach);

    border-radius:10px;

    transition:0.4s ease;

    transform:translateX(-50%);

}

.nav-link:hover::after,
.nav-link.active::after{

    width:50%;

}

/* ========================= */
/* CONNECT BUTTON */
/* ========================= */

.connect-btn{

    position:relative;

    height:44px;

    padding:
    0 18px
    0 10px;

    border-radius:999px;

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #f9b17a,
    #ffc89e);

    border:
    1px solid
    rgba(255,255,255,0.18);

    box-shadow:
    0 10px 35px rgba(249,177,122,0.18);

    transition:
    0.35s ease;

}

/* HOVER */

.connect-btn:hover{

    transform:
    translateY(-2px)
    scale(1.03);

    box-shadow:
    0 14px 45px rgba(249,177,122,0.28);

}

/* AVATAR */

.connect-avatar{

    position:relative;

    width:28px;
    height:28px;

    border-radius:50%;

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

    background:
    rgba(255,255,255,0.22);

    backdrop-filter:
    blur(8px);

    overflow:hidden;

}

/* RING */

.avatar-ring{

    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    border:
    1px solid
    rgba(255,255,255,0.5);

    animation:
    avatarPulse 2s ease-in-out infinite;

}

/* ICON */

.connect-avatar i{

    position:relative;

    z-index:2;

    font-size:12px;

    color:#1e223f;

    animation:
    iconFloat 2.5s ease-in-out infinite;

}

/* TEXT */

.btn-text{

    position:relative;

    z-index:2;

    color:#1e223f;

    font-size:0.82rem;
    font-weight:800;

    letter-spacing:0.8px;

}

/* SHINE */

.btn-shine{

    position:absolute;

    top:-30px;
    left:-60px;

    width:40px;
    height:120px;

    background:
    rgba(255,255,255,0.28);

    transform:
    rotate(25deg);

    filter:
    blur(10px);

    animation:
    shineMove 4s linear infinite;

}

@keyframes shineMove{

    0%{
        left:-80px;
    }

    100%{
        left:220%;
    }

}

@keyframes avatarPulse{

    0%,100%{

        transform:scale(1);
        opacity:0.7;

    }

    50%{

        transform:scale(1.3);
        opacity:0;

    }

}

@keyframes iconFloat{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-2px);

    }

}

/* ========================= */
/* MENU TOGGLE */
/* ========================= */

.menu-toggle{

    display:none;

    width:54px;
    height:54px;

    border:none;
    outline:none;

    background:rgba(255,255,255,0.06);

    border-radius:16px;

    cursor:pointer;

    position:relative;

    transition:0.4s ease;
    z-index: 999999;

}

.menu-toggle span{

    position:absolute;
    left:50%;

    width:24px;
    height:2px;

    background:var(--white);

    border-radius:20px;

    transition:0.4s ease;

}

.menu-toggle span:nth-child(1){

    transform:translate(-50%, -8px);

}

.menu-toggle span:nth-child(2){

    transform:translate(-50%, 0);

}

.menu-toggle span:nth-child(3){

    transform:translate(-50%, 8px);

}

/* ACTIVE */

.menu-toggle.active span:nth-child(1){

    transform:translate(-50%, 0) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translate(-50%, 0) rotate(-45deg);

}

/* ========================= */
/* MOBILE CONNECT */
/* ========================= */

.mobile-connect-btn{

    display:none;

}

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

@media(max-width:1100px){

    .cs-nav-links{

        position:fixed;

        top:110px;
        left:50%;

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

        width:calc(100% - 40px);

        padding:24px;

        border-radius:28px;

        background:rgba(10,20,45,0.96);

        backdrop-filter:blur(18px);

        border:1px solid rgba(255,255,255,0.08);

        flex-direction:column;

        gap:14px;

        opacity:0;
        visibility:hidden;

        transition:0.45s ease;
        display:flex !important;
        z-index:99999;

    }

    .cs-nav-links.active{

        opacity:1;
        visibility:visible;

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

    }

    .nav-link{

        width:100%;
        text-align:center;

        padding:18px;

        border-radius:18px;

    }

    .connect-btn{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

    .mobile-connect-btn{

        display:flex;

        width:100%;
        height:58px;

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

        text-decoration:none;

        background:linear-gradient(
        135deg,
        var(--peach),
        #ffd1ab);

        border-radius:18px;

        color:#1e223f;

        font-weight:800;

        margin-top:8px;

    }

}

@media(max-width:700px){

    .cs-navbar{

        width:calc(100% - 20px);

        padding:0 16px;

        height:80px;

        top:10px;

    }

    .cs-logo-image-wrap{

        width:54px;
        height:54px;

    }

    .text-line{

        font-size:0.85rem;
        letter-spacing:2px;

    }

}

/* ========================= */
/* ANIMATIONS */
/* ========================= */


@keyframes pulseGlow{

    0%,100%{
        opacity:0.4;
        transform:scale(1);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }

}

@keyframes btnShine{

    0%{
        left:-120px;
    }

    100%{
        left:200%;
    }

}

@keyframes textShine{

    0%{
        left:-120%;
    }

    100%{
        left:120%;
    }

}
.nav-link.active{
    background: linear-gradient(
        135deg,
        rgba(249,177,122,0.10),
        rgba(255,255,255,0.04)
    );

    border: 1px solid rgba(249,177,122,0.16);

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

    color: #fff;

    box-shadow:
        0 6px 24px rgba(249,177,122,0.10),
        inset 0 1px 0 rgba(255,255,255,0.05);

    transform: translateY(-1px);
}