:root{

    --primary:#18E4FF;
    --secondary:#7666FF;

    --bg:#050A14;
    --surface:#0B1424;
    --surface-light:#101C31;

    --border:rgba(255,255,255,.07);

    --text:#FFFFFF;
    --text-light:#AEB9D6;

    --shadow:
        0 25px 70px rgba(0,0,0,.45);

    --transition:.35s cubic-bezier(.4,.2,.2,1);

}



/*==============================
BODY
===============================*/

body{

    padding-top:92px;

}



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

.tech-navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    background:rgba(5,10,20,.94);

    backdrop-filter:blur(24px);

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

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

    transition:.35s ease;

}



/*==============================
TOP GLOW
===============================*/

.tech-navbar::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-1px;

    height:1px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(24,228,255,.65),

    rgba(118,102,255,.65),

    transparent);

}



/*==============================
SCROLLED
===============================*/

.tech-navbar.scrolled{

    background:rgba(4,8,16,.98);

    box-shadow:var(--shadow);

}



/*==============================
CONTAINER
===============================*/

.tech-navbar .container{

    max-width:1800px;

}



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

.navbar-brand{

    display:flex;

    align-items:center;

    padding:0;

}



.navbar-brand img{

    height:72px;

    transition:.35s;

}



.tech-navbar.scrolled .navbar-brand img{

    height:60px;

}



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

.navbar-nav{

    gap:10px;

    align-items:center;

}



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

.nav-link{

    position:relative;

    color:var(--text-light)!important;

    font-size:15px;

    font-weight:600;

    letter-spacing:.2px;

    padding:14px 18px!important;

    border-radius:12px;

    transition:var(--transition);

}



/* Hover */

.nav-link:hover{

    color:#fff!important;

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

}



/* Active */

.nav-link.active{

    color:#fff!important;

    background:

    linear-gradient(

    135deg,

    rgba(24,228,255,.10),

    rgba(118,102,255,.12));

}



/* Animated Dot */

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:6px;

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--primary);

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

    transition:.3s;

}



.nav-link:hover::after{

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

}



.nav-link.active::after{

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

}



/*==============================
RIGHT SIDE
===============================*/

.navbar-actions{

    display:flex;

    align-items:center;

    gap:14px;

    margin-left:35px;

}



/*==============================
LOGIN
===============================*/

.btn-login{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:14px;

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

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

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}



.btn-login:hover{

    background:rgba(24,228,255,.10);

    border-color:rgba(24,228,255,.25);

    color:#fff;

}



/*==============================
TOGGLER
===============================*/

.navbar-toggler{

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

    border-radius:12px;

    padding:10px;

    box-shadow:none;

}



.navbar-toggler:focus{

    box-shadow:none;

}



/*==============================
DROPDOWN
===============================*/

.dropdown-toggle::after{

    margin-left:.6rem;

    transition:.3s;

}



.dropdown:hover .dropdown-toggle::after{

    transform:rotate(180deg);

}



/*==============================
DROPDOWN ANIMATION
===============================*/

.dropdown-menu{

    animation:dropdownFade .25s ease;

}



@keyframes dropdownFade{

    from{

        opacity:0;

        transform:translateY(14px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*======================================================
                    MEGA MENU
=======================================================*/

.mega-dropdown{
    position:static;
}

.mega-menu{

    width:100%;

    left:0 !important;
    right:0 !important;

    margin-top:0;

    padding:40px;

    border:none;

    border-radius:0;

    background:
        linear-gradient(
        180deg,
        #09111F,
        #07101D);

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

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

    box-shadow:
        0 35px 70px rgba(0,0,0,.45);

    animation:megaFade .35s ease;

}


/* Limit Content Width */

.mega-menu .row{

    max-width:1350px;

    margin:auto;

}


/* Section Titles */

.mega-menu h6{

    color:#fff;

    font-size:15px;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:.5px;

    text-transform:uppercase;

    position:relative;

}


.mega-menu h6::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:42px;

    height:3px;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    var(--primary),

    var(--secondary));

}


/*======================================================
                    MENU ITEMS
=======================================================*/

.mega-menu a{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:16px;

    margin-bottom:8px;

    text-decoration:none;

    color:var(--text-light);

    border-radius:18px;

    transition:all .35s ease;

}


/* Hover */

.mega-menu a:hover{

    background:rgba(253, 244, 244, 0.04);

    transform:translateX(8px);

    color:white;

}


/*======================================================
                    ICON BOX
=======================================================*/

.mega-menu i{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    background:

    linear-gradient(

    135deg,

    rgba(24,228,255,.12),

    rgba(118,102,255,.12));

    color:var(--primary);

    flex-shrink:0;

}


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

.menu-text{

    display:flex;

    flex-direction:column;

}


.menu-title{

    font-size:15px;

    font-weight:600;

    color:white;

    margin-bottom:4px;

}


.menu-desc{

    font-size:13px;

    line-height:1.6;

    color:var(--text-light);

}



/*======================================================
                    ANIMATION
=======================================================*/

@keyframes megaFade{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*======================================================
                HOVER SHADOW
=======================================================*/

.mega-menu a:hover i{

    box-shadow:

    0 10px 25px rgba(24,228,255,.18);

}

/*MOBILE NAVIGATION */

@media (max-width:1199px){
.tech-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#07111f;
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    z-index:9999
}

.tech-navbar .container{
    padding:0 16px
}

.navbar-brand img{
    height:56px
}

.navbar-collapse{
    margin-top:14px;
    padding:16px;
    border-radius:18px;
    background:#0d1728;
    border:1px solid rgba(255,255,255,.08);
    max-height:80vh;
    overflow:auto}


.navbar-nav,.navbar-nav .nav-item{
    width:100%
}

.nav-link{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 16px!important;
    border-radius:12px;color:#d9e3ff!important;
    background:transparent;
    transition:.25s
}

.nav-link:hover,.nav-link:focus{
    background:rgba(255,255,255,.05)
}

.dropdown>.dropdown-toggle::after{
    margin-left:auto;
    transition:.3s
}

.dropdown>.dropdown-toggle.show::after{
    transform:rotate(180deg)
}

/* IMPORTANT: hidden until clicked */
.dropdown-menu,.mega-menu{
display:none;
position:static!important;
transform:none!important;
float:none;
width:100%;
margin:8px 0 0;
padding:12px;
background:#111d31;
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
box-shadow:none;
animation:fade .25s ease;
}

.dropdown-menu.show,.mega-menu.show{
    display:block
}

.mega-menu .row{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;margin:0
}

.mega-menu .col-lg-4,.mega-menu .col-lg-6,.mega-menu .col-md-6{
    width:100%;
    max-width:100%;
    flex:0 0 100%;
    padding:0
}

.mega-menu h6{
    margin:8px 0 10px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px;
    text-transform:uppercase;
    color:#fff
}

.mega-menu a{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:13px;
    border-radius:12px;
    color:#d9e3ff;
    text-decoration:none
}

.mega-menu a:hover{
    background:rgba(24,228,255,.08)
}

.mega-menu i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(24,228,255,.12);border-radius:12px;flex-shrink:0
}

.menu-feature{
    display:none
}

.navbar-actions{
    margin:18px 0 0
}

.btn-login{
    display:flex;
    justify-content:center;
    width:100%
}

@keyframes fade{
    from {opacity:0;
    transform:translateY(-8px)}to{opacity:1;transform:none}
}

}

.hamburger
{width:24px;
    height:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}

.hamburger span{
    height:2px;
    background:#fff;
    border-radius:999px;
    transition:.3s
}

.navbar-toggler[aria-expanded='true'] .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navbar-toggler[aria-expanded='true'] .hamburger span:nth-child(2){opacity:0}
.navbar-toggler[aria-expanded='true'] .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}