/* =========================================
TOP HEADER
========================================= */

.top-header{

    background:#ffffff;

    padding:14px 0;

    position:relative;

    z-index:1000;
}

.top-header-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}


/* =========================================
LOGOS
========================================= */

.main-logo img{

    height:78px;

    width:auto;

    object-fit:contain;
}

.sdg-main-logo img{

    height:72px;

    width:auto;

    object-fit:contain;
}


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

.main-navbar{

    position:sticky;

    top:0;

    width:100%;

    z-index:999;

    background:
    rgba(2,6,23,0.92);

    backdrop-filter:blur(18px);

    border-top:
    1px solid rgba(255,255,255,0.05);

    border-bottom:
    1px solid rgba(255,255,255,0.05);
}


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

.nav-links{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    min-height:72px;
}

.nav-links li{

    position:relative;
}

.nav-links a{

    position:relative;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    letter-spacing:0.3px;

    transition:0.35s ease;
}


/* =========================================
NAV HOVER
========================================= */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:
    linear-gradient(
    90deg,
    #2563eb,
    #7c3aed);

    transition:0.35s ease;
}

.nav-links a:hover{

    color:#8b5cf6;
}

.nav-links a:hover::after{

    width:100%;
}


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

.nav-links a.active{

    color:#8b5cf6;
}

.nav-links a.active::after{

    width:100%;
}


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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    border:none;

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

    color:#ffffff;

    font-size:20px;

    cursor:pointer;
}


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

@media(max-width:991px){

    .main-logo img{

        height:62px;
    }

    .sdg-main-logo img{

        height:58px;
    }

    .nav-links{

        gap:24px;
    }
}


@media(max-width:768px){

    .top-header{

        padding:12px 0;
    }

    .top-header-row{

        flex-direction:row;
    }

    .main-logo img{

        height:54px;
    }

    .sdg-main-logo img{

        height:50px;
    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;
    }

    .nav-links{

        flex-wrap:wrap;

        gap:18px;

        padding:18px 0;

        min-height:auto;
    }

    .nav-links a{

        font-size:14px;
    }
}


@media(max-width:576px){

    .top-header-row{

        gap:14px;
    }

    .main-logo img{

        height:46px;
    }

    .sdg-main-logo img{

        height:42px;
    }

    .nav-links{

        gap:14px;
    }

    .nav-links a{

        font-size:13px;
    }
}