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


/* Desktop Navigation */

.main-nav {

    display:
    flex;

    align-items:
    center;

    gap:
    38px;

}



.main-nav ul {

    display:
    flex;

    align-items:
    center;

    gap:
    32px;

}



.main-nav li {

    position:
    relative;

}



.main-nav a {

    position:
    relative;

    color:
    var(--text-secondary);

    font-size:
    15px;

    font-weight:
    600;

    transition:
    var(--transition);

}



.main-nav a:hover {

    color:
    var(--primary);

}



/* Active Link */

.main-nav a.active {

    color:
    var(--primary);

}



/* Hover Line */

.main-nav a::after {

    content:"";

    position:
    absolute;

    left:
    0;

    bottom:
    -8px;

    width:
    0;

    height:
    2px;

    background:
    var(--primary);

    transition:
    var(--transition);

}



.main-nav a:hover::after,
.main-nav a.active::after {

    width:
    100%;

}



/* Dropdown */

.dropdown {

    position:
    relative;

}



.dropdown-menu {

    position:
    absolute;

    top:
    calc(100% + 25px);

    left:
    0;

    min-width:
    240px;

    padding:
    20px;

    background:
    var(--bg-white);

    border-radius:
    var(--radius-md);

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

    opacity:
    0;

    visibility:
    hidden;

    transform:
    translateY(15px);

    transition:
    var(--transition);

}



.dropdown:hover .dropdown-menu {

    opacity:
    1;

    visibility:
    visible;

    transform:
    translateY(0);

}



.dropdown-menu a {

    display:
    block;

    padding:
    10px 12px;

    border-radius:
    var(--radius-sm);

}



.dropdown-menu a:hover {

    background:
    var(--bg-light);

}



/* Mobile Navigation */

.mobile-nav {

    position:
    fixed;

    top:
    0;

    right:
    -100%;

    width:
    320px;

    height:
    100vh;

    background:
    var(--bg-white);

    padding:
    100px 30px 40px;

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

    transition:
    var(--transition);

    z-index:
    1100;

}



.mobile-nav.active {

    right:
    0;

}



.mobile-nav ul {

    display:
    flex;

    flex-direction:
    column;

    gap:
    20px;

}



.mobile-nav a {

    font-size:
    18px;

    font-weight:
    600;

    color:
    var(--text-primary);

}



/* Overlay */

.nav-overlay {

    position:
    fixed;

    inset:
    0;

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

    opacity:
    0;

    visibility:
    hidden;

    transition:
    var(--transition);

    z-index:
    1050;

}



.nav-overlay.active {

    opacity:
    1;

    visibility:
    visible;

}



/* Responsive */

@media(max-width:992px){


    .main-nav {

        display:
        none;

    }

}