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

.navbar{
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 64px);
    max-width: none;
    z-index: 9999;
}

.navbar-container{

    position: relative;

    height: 70px;

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

    padding:0 24px;

    border-radius:999px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.02)
    ),
    rgba(8,8,8,.42);

    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);

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

    box-shadow:

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

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

    0 12px 40px rgba(0,0,0,.35);

    transition:

    width .45s,

    height .45s,

    background .45s,

    box-shadow .45s;
}

.navbar-container::before{

content:"";

position:absolute;

left:2px;
right:2px;
top:2px;

height:45%;

border-radius:999px;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.07),
transparent
);

pointer-events:none;

}
/*========================
Left + Right
=========================*/

.nav-left,
.nav-right{

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

}

.nav-links{

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

    list-style:none;
}

/*========================
Links
=========================*/

.nav-links a{

position:relative;

text-decoration:none;

color:#F5F5F5;

font-size:15px;

font-weight:500;

letter-spacing:.2px;

padding:6px 0;

transition:

color .35s,

transform .35s;

}
.nav-links a::before{

content:"";

position:absolute;

left:50%;

bottom:-6px;

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

width:18px;

height:2px;

border-radius:10px;

background:#D8FF37;

transition:.35s;

}
.nav-links a:hover::before{

transform:translateX(-50%) scaleX(1);

}

.nav-links a:hover{

    color:#D8FF37;

}

/* Active */

.nav-links a.active{

color:#D8FF37;

font-weight:600;

}

.nav-links a.active::after{

    content:"";

    position:absolute;

    left:50%;
    transform:translateX(-50%);

    bottom:-12px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#D8FF37;

    box-shadow:0 0 12px #D8FF37;

}

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

.nav-logo{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

}

.nav-logo img{

width: 180px;
    height: auto;
    display: block;
    object-fit: contain;

transition:.45s;

filter:

drop-shadow(0 0 0 rgba(216,255,55,0));

}
.nav-logo:hover img{

transform:scale(1.04);

}

/*========================
CTA
=========================*/

.cta-btn{
position: relative;
overflow: hidden;
display:flex;

align-items:center;

gap:10px;

padding:11px 19px;

border-radius:999px;

background:#D8FF37;

color:#050505;

font-weight:600;

text-decoration:none;

transition:

transform .35s,

box-shadow .35s,

background .35s;

box-shadow:

0 0 0 rgba(216,255,55,0);

}

.cta-btn:hover{

transform:translateY(-2px);

box-shadow:

0 0 24px rgba(216,255,55,.35);

}

.cta-btn svg{

transition:.35s;

}

.cta-btn:hover svg{

transform:translateX(6px);

}

/*========================
Dropdown
=========================*/

.arrow{

    font-size:12px;

    margin-left:4px;

}

/*========================
Hamburger
=========================*/

.menu-toggle{

    display:none;

    width:48px;
    height:48px;

    background:none;

    border:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:26px;
    height:2px;

    margin:6px auto;

    background:white;

    transition:.35s;

}

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

@media(max-width:1100px){

.nav-left,
.nav-right .nav-links,
.cta-btn{

display:none;

}

.menu-toggle{

display:block;

margin-left:auto;

}

.nav-logo{

left:28px;

transform:none;

}

}

/* =========================================
   NAVBAR V3 — SCROLL STATE
========================================= */

/* =====================================
   V3 SCROLL STATE
===================================== */

.navbar-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    transition:
        width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.45s ease,
        padding 0.45s ease,
        background 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.navbar-container.navbar-scrolled {
    width: calc(100% - 140px);
    height: 62px;

    margin-left: auto;
    margin-right: auto;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.03)
        ),
        rgba(5,5,8,0.75);

    box-shadow:
        0 15px 45px rgba(0,0,0,0.45);
}

/* =========================================
   CTA V3
========================================= */

.cta-btn {
    will-change: transform;
}

.cta-btn::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

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

    opacity: 0;

    transform: scale(0.85);

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

}


.cta-btn:hover::after {

    opacity: 1;

    transform: scale(1.05);

}

/* =========================================================
   AFFLEADHUB — MOBILE NAVBAR
   CLEAN VERSION
   ========================================================= */

@media (max-width: 768px) {

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

    .navbar {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);

        width: calc(100% - 32px);

        z-index: 9999;
    }


    /* =====================================================
       NAVBAR CONTAINER — CLOSED
       ===================================================== */

    .navbar-container {
        position: relative;

        width: 100%;
        height: 70px;

        padding: 0 20px;

        overflow: hidden;

        border-radius: 999px;

        transition:
            height 0.45s ease,
            border-radius 0.45s ease,
            background 0.45s ease;
    }


    /* =====================================================
       CLOSED STATE
       ===================================================== */

    .nav-left,
    .nav-right {
        display: none;
    }


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

    .nav-logo {
        position: absolute;

        left: 24px;
        top: 50%;

        transform: translateY(-50%);

        z-index: 10003;
    }

    .nav-logo img {
        display: block;

        width: 150px;
        height: auto;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .menu-toggle {
        display: flex;

        position: absolute;

        top: 50%;
        right: 12px;

        width: 48px;
        height: 48px;

        margin: 0;
        padding: 0;

        transform: translateY(-50%);

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

        background: transparent;
        border: none;

        cursor: pointer;

        z-index: 10010;
    }

    .menu-toggle span {
        position: absolute;

        display: block;

        width: 26px;
        height: 2px;

        margin: 0;

        background: #fff;

        border-radius: 10px;

        transition:
            transform 0.3s ease,
            opacity 0.2s ease;
    }

    .menu-toggle span:first-child {
        transform: translateY(-5px);
    }

    .menu-toggle span:last-child {
        transform: translateY(5px);
    }


    /* =====================================================
       OPEN MENU CONTAINER
       ===================================================== */

    .navbar.menu-open .navbar-container {

        width: 100%;

        height: calc(100vh - 40px);

        min-height: 560px;

        overflow: hidden;

        border-radius: 32px;
    }


    /* =====================================================
       LOGO — OPEN MENU
       ===================================================== */

    .navbar.menu-open .nav-logo {

        left: 28px;
        top: 30px;

        transform: none;
    }

    .navbar.menu-open .nav-logo img {
        width: 150px;
    }


    /* =====================================================
       CLOSE BUTTON
       ===================================================== */

    .navbar.menu-open .menu-toggle {
        top: 32px;
        right: 20px;

        transform: none;
    }

    .navbar.menu-open .menu-toggle span:first-child {
        transform: rotate(45deg);
    }

    .navbar.menu-open .menu-toggle span:last-child {
        transform: rotate(-45deg);
    }


    /* =====================================================
       LEFT MENU
       HOME
       ADVERTISERS
       PUBLISHERS
       ABOUT US
       ===================================================== */

    .navbar.menu-open .nav-left {

        display: block;

        position: absolute;

        top: 115px;
        left: 28px;

        width: calc(100% - 56px);

        margin: 0;
        padding: 0;

        z-index: 10001;
    }


    .navbar.menu-open .nav-left .nav-links {

        display: flex;

        flex-direction: column;
        align-items: flex-start;

        width: 100%;

        margin: 0;
        padding: 0;

        gap: 24px;

        list-style: none;
    }


    /* =====================================================
       RIGHT MENU
       OFFERS
       RESOURCES
       CONTACT
       ===================================================== */

    /* =========================================================
   FINAL MOBILE MENU — SEPARATE LEFT & RIGHT GROUPS
   ========================================================= */

@media (max-width: 768px) {

    /* LEFT GROUP */
    .navbar.menu-open .nav-left {
        position: absolute !important;

        top: 105px !important;
        left: 28px !important;

        width: calc(100% - 56px) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10001 !important;
    }


    /* LEFT LINKS */
    .navbar.menu-open .nav-left .nav-links {
        display: flex !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 24px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* RIGHT GROUP */
    .navbar.menu-open .nav-right {
        position: absolute !important;

        top: 275px !important;
        left: 28px !important;

        width: calc(100% - 56px) !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10001 !important;
    }


    /* RIGHT LINKS */
    .navbar.menu-open .nav-right .nav-links {
        display: flex !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 24px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* REMOVE ANY LINK MARGINS */
    .navbar.menu-open .nav-links li {
        margin: 0 !important;
        padding: 0 !important;
    }


    /* LINK HEIGHT */
    .navbar.menu-open .nav-links a {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 1.3 !important;
    }

}


    /* =====================================================
       REMOVE DESKTOP LINK DECORATIONS
       ===================================================== */

    .navbar.menu-open .nav-links a::before,
    .navbar.menu-open .nav-links a::after {

        display: none;
    }


    .navbar.menu-open .nav-links a:hover {

        color: #fff;

        transform: none;
    }


    /* =====================================================
       RESOURCES ARROW
       ===================================================== */

    .navbar.menu-open .arrow {

        display: inline-block;

        margin-left: 5px;

        font-size: 12px;
    }


    /* =====================================================
       GET STARTED BUTTON
       ===================================================== */

  .navbar.menu-open .nav-right .cta-btn {

        position: static;

        display: flex;

        width: 100%;
        height: 52px;

        margin-top: 28px;

        padding: 0;

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

        box-sizing: border-box;

        z-index: 10005;
    }



    /* =====================================================
       DISABLE DESKTOP SCROLL SHRINK ON MOBILE
       ===================================================== */

    .navbar-container.navbar-scrolled {

        width: 100%;

        height: 70px;

        margin-left: 0;
        margin-right: 0;
    }


    .navbar.menu-open .navbar-container.navbar-scrolled {

        width: 100%;

        height: calc(100vh - 40px);

        min-height: 560px;
    }
}


/* =========================================================
   LOCK PAGE WHEN MOBILE MENU IS OPEN
   ========================================================= */

@media (max-width: 768px) {

    body.menu-active {

        overflow: hidden !important;

        height: 100vh;

        touch-action: none;
    }
}


/* =========================================================
   HAMBURGER ONLY ON MOBILE
   ========================================================= */

@media (min-width: 769px) {

    .menu-toggle {
        display: none;
    }
}