.main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav > li {
    position: relative;
}

.main-nav > li > a,
.main-nav > li > span {
    display: block;
    white-space: pre;
    cursor: pointer;
}

.main-nav li ul {
    position: absolute;
    top: 100%;
    left: 20px;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 15px 0;
    z-index: 1025;
    background: var(--bs-body-bg);
    border-radius: 20px;
    display: block;
    filter: drop-shadow(0 4px 50px rgba(0, 0, 0, 0.25));
    /* animation base */
    opacity: 0;
    visibility: hidden;
    transform: translateY(32px);
    transition: opacity 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease,
        visibility 0.5s ease;
}
.main-nav li ul li {
    padding: 0;
}
.main-nav li ul li a {
    display: block;
    text-decoration: none;
}

.main-nav li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav li ul li ul {
    top: 0;
    left: 100%;
}
.main-nav li:has(> ul) > span::after {
    content: "\f107";
    display: inline-block;
    padding: 0 0.3rem;
    font-family: "FontAwesome";
    /* color: transparent;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='blue'><path d='M498.837 65.628c-7.957-3.328-17.152-1.472-23.253 4.629L256 289.841 36.416 70.257c-6.101-6.101-15.275-7.936-23.253-4.629C5.184 68.913 0 76.721 0 85.34v106.667c0 5.675 2.24 11.093 6.251 15.083l234.667 234.667c4.16 4.16 9.621 6.251 15.083 6.251 5.462 0 10.923-2.091 15.083-6.251L505.751 207.09c4.011-3.989 6.251-9.408 6.251-15.083V85.34c0-8.619-5.184-16.427-13.165-19.712z'/></svg>")
        no-repeat center; */
    transition: transform 0.3s ease;
}
.main-nav li ul > li:hover:has(> ul) > span::after {
    transform: rotate(-90deg);
}
.main-nav li:hover:has(> ul) > span::after {
    transform: rotate(180deg);
}

.main-nav .notifyNav span::after {
    content: "";
    background: none;
    width: 0;
    height: 0;
}

/* --- Desktop Defaults --- */
.desk ul > li,
.auth {
    padding: 40.5px 0;
}
.desk ul > li > span,
.desk ul > li > a,
.auth a {
    padding-top: 0;
    padding-bottom: 0;
}
.desk ul > li > ul > li > span,
.desk ul > li > ul > li > a {
    padding-top: var(--bs-navbar-toggler-padding-y);
    padding-bottom: var(--bs-navbar-toggler-padding-y);
}
@media screen and (min-width: 992px) and (max-width: 1400px) {
    header .navbar .navbar-nav .nav-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
/* --- Mobile Defaults --- */
@media (max-width: 992px) {
    .auth {
        padding: var(--bs-nav-link-padding-y) 0;
    }
}