/* ============================================================
   SHARED SITE NAVIGATION
   ============================================================ */

.cpp-navbar {

    position:
        absolute;

    z-index:
        1000;

    top:
        0;

    left:
        0;

    width:
        100%;

    padding:
        16px 0;

    background:
        linear-gradient(
            180deg,
            rgba(1,15,31,.82),
            rgba(1,15,31,.20),
            transparent
        );

    transition:
        padding .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}

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

.cpp-logo {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    line-height:
        1;

}


.cpp-logo-image {

    display:
        block;

    width:
        auto;

    height:
        68px;

    max-width:
        260px;

    object-fit:
        contain;

    transition:
        transform .2s ease,
        opacity .2s ease;

}


.cpp-logo:hover
.cpp-logo-image {

    opacity:
        .92;

    transform:
        translateY(-1px);

}

.desktop-nav-links {

    margin-left:
        auto;

}


.cpp-nav-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        10px 11px;

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

    font-size:
        1em;

    font-weight:
        500;

    transition:
        color .2s ease;

}


.cpp-nav-link::after {

    content:
        "";

    position:
        absolute;

    left:
        11px;

    right:
        11px;

    bottom:
        3px;

    height:
        1px;

    background:
        var(--cpp-cyan);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform .2s ease;

}


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

    color:
        #fff;

}


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

    transform:
        scaleX(1);

}


.cpp-nav-cta {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 22px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--cpp-blue),
            var(--cpp-cyan)
        );

    border:
        0;

    border-radius:
        4px;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.cpp-nav-cta:hover {

    color:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(25,201,230,.22);

}



/* ============================================================
   MOBILE TOGGLE
   ============================================================ */

.cpp-mobile-toggle {

    width:
        44px;

    height:
        44px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        #fff;

    background:
        rgba(2,23,47,.38);

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

    border-radius:
        4px;

    font-size:
        18px;

}



/* ============================================================
   MOBILE OFFCANVAS
   ============================================================ */

.cpp-mobile-nav {

    width:
        min(
            90vw,
            390px
        ) !important;

    color:
        #fff;

    background:
        linear-gradient(
            180deg,
            #04284d,
            #02182f
        );

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

}


.cpp-mobile-nav
.offcanvas-header {

    min-height:
        86px;

    padding:
        20px 22px;

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

}


.cpp-mobile-nav
.offcanvas-body {

    display:
        flex;

    flex-direction:
        column;

    padding:
        18px 22px 24px;

}


.cpp-mobile-menu {

    display:
        flex;

    flex-direction:
        column;

}


.cpp-mobile-nav-link {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

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

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

    font-size:
        15px;

    font-weight:
        600;

    transition:
        color .2s ease,
        padding-left .2s ease;

}


.cpp-mobile-nav-link i {

    color:
        var(--cpp-cyan);

    font-size:
        11px;

}


.cpp-mobile-nav-link:hover,
.cpp-mobile-nav-link.active {

    color:
        #fff;

    padding-left:
        5px;

}


.cpp-mobile-nav-link.active {

    color:
        var(--cpp-cyan);

}


.cpp-mobile-cta-wrap {

    margin-top:
        auto;

    padding-top:
        30px;

}



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

@media
(max-width: 1199px) {

    .desktop-nav-links {

        display:
            none !important;

    }


    .cpp-mobile-toggle {

        display:
            inline-flex;

    }

}

@media
(max-width: 575px) {

    .cpp-navbar {

        padding:
            12px 0;

    }


    .cpp-logo-image {

        height:
            54px;

        max-width:
            205px;

    }

}

button.cpp-mobile-toggle.ms-2 {
    position: fixed !important;
    right: 20px !important;
}