.header-nav {
}

.main-nav {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    gap: 15px;
}

.link {
    cursor: pointer;
    transition: opacity 250ms ease-in-out;
    color: white;
}

.dropdown-menu {
    display: flex;
    flex-direction: row;
    position: relative;
}

.link:hover {
    opacity: 0.5;
}

.site-nav {
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: 0.9rem;
}


.additional-nav {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-end;
}

.additional-nav a {
    font-size: 0.9rem;
}


.dropdown-content {
  position: absolute;
  top: 25px;
  z-index: 50;
  display: none;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 0; 
  background-color: var(--bg-main);
  padding: 10px 0px;
  font-size: 1rem;
}

.dropdown-content a {
    padding: 5px;
    font-size: 0.9rem;
}

.vip-menu:hover .dropdown-vip {
  display: flex;
  width: 152.38px;
}

.operations-menu:hover .dropdown-operations {
  display: flex;
  width: 223px;
}

.growth-menu:hover .dropdown-growth {
  display: flex;
  width: 146px;
}


.site-header {
    margin-bottom: 40px;

    .container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
    }

    .site-logo {
        width: 160px;
    }

    .site-logo a {
        color: var(--text-main);
        letter-spacing: -0.02em;
    } 

    nav ul {
        display: flex;
        gap: 28px;
        list-style: none;

        a {
            color: var(--text-main);

            font-size: 1rem;
        }

        a:hover::after {
            width: 100%;
        }

        a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;          
            width: 0%;           
            height: 1px;      
            background-color: var(--primary, #ffffff);
            transition: width 500ms ease-in-out;
        }
    
    }
}

#mobile-nav-cont {
    display: none;
}



.main-nav li {
    margin-bottom: 7.5px;
}

.header-nav {
    display: flex;
}

.social-icons-head {
    display: flex;
    justify-content: center;
    margin-right: 10px;
}

.social-icons-head a {
    display: flex;
    justify-content: center;
    color: white;
    margin: 0px 10px;
}


@media (max-width: 990px) {

    .site-header {
        
        .container {
            padding: 10px 20px;
        }

        nav {
            ul {
                gap: 15px;
            }
        }

        .site-logo-mobile {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 20px 20px 50px 20px;
        }

        .site-logo-mobile-margin {
            margin-bottom: 50px;
        }
    }

    .header-nav {
        display: none;
    }

    #mobile-nav-cont {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    #main-mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background-color: rgb(16, 16, 16);
        padding: 20px;
    }

    #close-button-cont {
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }

    #close-button {
        background-color: rgb(16, 16, 16);
        border-style: none;
        cursor: pointer;
        transition: opacity 250ms ease-in-out;
    }


    #mobile-button {
        background-color: transparent;
        border-style: none;
        cursor: pointer;
        transition: opacity 250ms ease-in-out;
    }

    .menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mobile-menu {
        margin-top: 50px;
    }

    .mobile-submenu {
        display: flex;
        flex-direction: column;
        margin-left: 25px;
        margin-top: 5px;
        gap: 15px;
    }

    .mobile-gorup {
        margin-bottom: 15px;
    }

    .mobile-gorup {
        font-size: 0.9rem;
    }
    
}


@media (max-width: 500px) { 


    .social-icons-head {
        display: none;
    }


}