/*=========================================
        LINX NETWORKS ENTERPRISE NAV
=========================================*/

:root{

--ln-primary:#1D838A;
--ln-dark:#08151f;
--ln-dark2:#0d2430;
--ln-accent:#00d2ff;
--ln-red:#D24D4D;
--ln-white:#ffffff;
--ln-shadow:0 18px 45px rgba(0,0,0,.25);

}

*{

box-sizing:border-box;

}

body{

margin:0;

padding-top:90px;

overflow-x:hidden;

}


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

.ln-header{

position:fixed;

top:0;

left:0;

width:100%;

height:90px;

display:flex;

align-items:center;

background:rgba(8,21,31,.92);

backdrop-filter:blur(18px);

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

z-index:999999;

transition:.35s;

}

.ln-header.scrolled{

height:74px;

background:#08151f;

box-shadow:0 8px 30px rgba(0,0,0,.25);

}


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

.ln-container{

max-width:1600px;

width:100%;

margin:auto;

padding:0 40px;

display:flex;

align-items:center;

justify-content:space-between;

}


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

.ln-logo{

flex-shrink:0;

}

.ln-logo img{

height:58px;

display:block;

transition:.3s;

}

.ln-header.scrolled .ln-logo img{

height:50px;

}


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

.ln-nav{

flex:1;

margin-left:60px;

}

.ln-menu{

margin:0;

padding:0;

list-style:none;

display:flex;

justify-content:center;

align-items:center;

gap:8px;

}

.ln-menu>li{

position:relative;

}

.ln-menu>li>a{

display:flex;

align-items:center;

gap:6px;

padding:32px 16px;

font-size:15px;

font-weight:600;

text-decoration:none;

color:#fff;

transition:.3s;

position:relative;

}


/* underline animation */

.ln-menu>li>a::after{

content:"";

position:absolute;

left:16px;

bottom:20px;

width:0;

height:2px;

background:var(--ln-accent);

transition:.35s;

}

.ln-menu>li:hover>a{

color:var(--ln-accent);

}

.ln-menu>li:hover>a::after{

width:calc(100% - 32px);

}


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

.ln-actions{

display:flex;

align-items:center;

gap:20px;

}

.ln-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:13px 26px;

border-radius:40px;

background:linear-gradient(90deg,#1D838A,#16b3bc);

color:#fff;

font-weight:700;

text-decoration:none;

transition:.35s;

box-shadow:0 10px 25px rgba(0,210,255,.25);

}

.ln-btn:hover{

transform:translateY(-2px);

box-shadow:0 16px 35px rgba(0,210,255,.45);

}


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

.ln-mega{

position:absolute;

left:0;

top:120%;

width:850px;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:var(--ln-shadow);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

}

.ln-dropdown:hover>.ln-mega{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.ln-column h4{

margin:0 0 15px;

font-size:16px;

color:#1D838A;

border-bottom:2px solid rgba(29,131,138,.2);

padding-bottom:10px;

}

.ln-column a{

display:block;

padding:10px 0;

text-decoration:none;

color:#333;

transition:.25s;

font-size:14px;

}

.ln-column a:hover{

padding-left:8px;

color:#1D838A;

}


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

.ln-toggle{

display:none;

width:52px;

height:52px;

border:none;

border-radius:10px;

background:#1D838A;

color:#fff;

font-size:24px;

cursor:pointer;

transition:.3s;

}

.ln-toggle:hover{

background:#16b3bc;

}


/*=========================
OVERLAY
==========================*/

.ln-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999997;

}

.ln-overlay.active{

opacity:1;

visibility:visible;

}
/*=====================================================
            RESPONSIVE BREAKPOINTS
======================================================*/

/* Large laptops */
@media (max-width:1400px){

.ln-container{

padding:0 25px;

}

.ln-nav{

margin-left:30px;

}

.ln-menu>li>a{

padding:32px 12px;

font-size:14px;

}

.ln-mega{

width:760px;

}

}


/* Tablets & Small Laptops */

@media (max-width:1200px){

body{

padding-top:78px;

}

.ln-header{

height:78px;

}

.ln-logo img{

height:50px;

}

.ln-nav{

display:none;

}

.ln-btn{

display:none;

}

.ln-toggle{

display:flex;

align-items:center;

justify-content:center;

}

}
/*=====================================================
                MOBILE DRAWER
======================================================*/

.ln-mobile{

position:fixed;

top:0;

right:-420px;

width:380px;

max-width:100%;

height:100vh;

background:#08151f;

overflow-y:auto;

transition:.45s ease;

z-index:999998;

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

padding-bottom:40px;

}

.ln-mobile.active{

right:0;

}

@media(max-width:768px){

.ln-mobile{

width:100%;

right:-100%;

}

}


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

.ln-mobile-header{

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:20px;

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

}

.ln-mobile-header img{

height:42px;

}

.ln-close{

background:none;

border:none;

color:#fff;

font-size:28px;

cursor:pointer;

}


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

.ln-mobile ul{

list-style:none;

margin:0;

padding:0;

}

.ln-mobile>ul{

padding:20px;

}

.ln-mobile li{

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

}

.ln-mobile a,

.ln-mobile span{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 5px;

font-size:15px;

font-weight:500;

color:#fff;

cursor:pointer;

text-decoration:none;

transition:.25s;

}

.ln-mobile a:hover,

.ln-mobile span:hover{

color:#00d2ff;

}


/*=========================
SUB MENUS
=========================*/

.ln-mobile-parent>span::after{

content:"+";

font-size:22px;

transition:.3s;

}

.ln-mobile-parent.active>span::after{

content:"−";

}

.ln-mobile-parent ul{

display:none;

padding-left:18px;

margin-bottom:10px;

}

.ln-mobile-parent.active ul{

display:block;

animation:lnFade .35s ease;

}

.ln-mobile-parent ul li{

border:none;

}

.ln-mobile-parent ul a{

padding:12px 5px;

font-size:14px;

color:#cfcfcf;

}


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

@keyframes lnFade{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:none;

}

}
/*=====================================================
            SMALL PHONES
======================================================*/

@media(max-width:576px){

.ln-container{

padding:0 15px;

}

.ln-logo img{

height:42px;

}

.ln-header{

height:72px;

}

body{

padding-top:72px;

}

.ln-mobile-header{

height:72px;

padding:15px;

}

}


/* Ultra Wide Screens */

@media(min-width:1800px){

.ln-container{

max-width:1750px;

}

.ln-menu{

gap:18px;

}

.ln-menu>li>a{

font-size:16px;

}

}