﻿/**/

header {
    height: 6rem;
    z-index: 1000;
    color: var(--white);
    animation: fixedNav linear forwards;
    .navbar

{
    width: 100%;
    z-index: 9999;
}

.navbar .navbar-toggler {
    color: inherit;
    font-size: 2rem;
    border-color: black;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.nav-link {
    color: inherit;
    padding: 1rem 0 !important;
    margin: 0 0.5rem 0 1.5rem;
}

    .nav-link:hover {
        color: var(--light-primary);
    }

    .nav-link.active {
        border-bottom: 3px solid var(--white);
    }

    .nav-link.list {
        padding-right: 0.3rem !important;
    }

.dropdown-toggle:hover, .dropdown-toggle:focus {
    color: var(--light-primary);
}

.dropdown .dropdown-menu {
    float: left;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    border: none;
    padding: 0;
    border-radius: unset;
    left: 10%;
}

.dropdown .dropdown-item:hover {
    color: var(--primary);
    background-color: #024F821A;
    text-indent: 0.5rem;
    border-left: 3px solid var(--primary);
}

.dropdown .dropdown-item {
    color: var(--gary);
    padding: 0.6rem;
    font-weight: var(--title-font);
    width: 100%;
}

.globe, .search {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer
}

.logo {
    width: 11rem;
    height: 5rem;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}

    .logo:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
}

header.scrolled {
    color: var(--primary);
    background-color: var(--white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.103);
    box-shadow: 0 0 0.75rem hsl(0 0% 0% /0.3);
}

@media (max-width: 992px) {
    .navbar-collapse {
        background: var(--white);
        border-radius: 1rem;
        color: black;
    }

    .nav-item:hover {
        padding-left: 0.5rem;
        transition: 0.9s;
    }
}

@media (max-width: 768px) {
    .dropdown .dropdown-menu {
        position: absolute;
        left: 30% !important;
        top: 75%;
    }
}
