/* Hide the dropdown menu by default */
.dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    transform: translate3d(-20px, 0, 0);
    opacity: 0;
    transform-origin: 50% 0;
    transition: transform .3s, opacity .2s, visibility .2s;
    position: absolute;
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, .05);
    z-index: 1033;
    min-width: 9rem;
    padding: 0.5rem;
    right: 0;
    left: auto;
    top: 100%;
    border: 0px solid #b5b4c3;
    border-radius: 0.5rem;

}

@media (max-width: 991.98px) {
    .dropdown .dropdown-menu {
        max-width: 100%;
        width: 100%;
        min-width: 100%;
    }
}


a.nav-link {
    height: auto;
    text-align: start;
    font-weight: 400;
    letter-spacing: 1.6px;
    text-decoration: none;
    color: rgba(8, 7, 19, 0.65);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

span.theme-icon-active {
    display: flex;
    align-items: center;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-menu {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
}

.dropdown-menu li {
    margin-bottom: 0.25rem;
}

/* Style the dropdown items */
.dropdown-menu .dropdown-item {
    color: black;
    background-color: transparent;
    /* adjust as needed */
    padding: 12px 16px;
    /* adjust as needed */
    width: 100%;
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    clear: both;
    transition: all 0.2s ease-in-out;
    border: none;
    line-height: 1.6;
    text-align: left;
    text-transform: capitalize;
    text-wrap: nowrap;
    white-space-collapse: collapse;
}

.dropdown-menu .dropdown-item span {
    display: flex;
    align-items: center;
}

.dropdown-menu .dropdown-item span i {
    margin-right: 0.5rem;
}

/* Style the dropdown items on hover */
.dropdown-menu .dropdown-item:hover {
    background-color: #FAFAFE;
    color: #16142f;
    /* adjust as needed */
}

.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu li {
    padding: 0;
    margin-bottom: 1px;
}

.theme-icon-active i {
    font-family: boxicons !important;
}

html[data-bs-theme=light] .theme-icon-active i::after {
    content: "\eebe";
}

html[data-bs-theme=dark] .theme-icon-active i::after {
    content: "\ee4e";
}

html[data-bs-theme=auto] .theme-icon-active i::after {
    content: "\ed56";
}

/* Begin adding your dark mode styles here, like so: */

html[data-bs-theme="dark"] body {
    background: #080713;
    color: white;
}

html[data-bs-theme="dark"] .loaderWrapper {
    background: #2e2e2e;
}

html[data-bs-theme="dark"] .loader .bar {
    background: #fff;
}

html[data-bs-theme="dark"] .dropdown-menu {
    background-color: #080713;
    color: #fff;
}

.dropdown-menu .dropdown-item {
    background-color: transparent;
    color: #16142f;
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item {
    color: #fff;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #fafafe;
    color: #16142f;
    text-decoration: none;
}

html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: #1d1b37;
    color: white;
    text-decoration: none;
}


.dropdown-menu .dropdown-item.active {
    background-color: #6257ff;
    color: white;
    text-decoration: none;
}

.dropdown-menu .dropdown-item.active:hover {
    background-color: #6257ff !important;
    color: white !important;
    text-decoration: none !important;
}

html[data-bs-theme="dark"] a.nav-link {
    color: rgba(255, 255, 255, 0.65);
}

html[data-bs-theme="dark"] .inline-flex>div>h1,
html[data-bs-theme="dark"] .inline-flex>div>h2,
html[data-bs-theme="dark"] .inline-flex>div>p {
    color: white;
}

html[data-bs-theme="dark"] #hero {
    background-image: linear-gradient(180deg, rgba(8, 7, 19, .01), #080713 85%), radial-gradient(ellipse at top left, rgba(98, 87, 255, .6), transparent 50%), radial-gradient(ellipse at top right, rgba(212, 25, 174, .5), transparent 50%), radial-gradient(ellipse at center right, rgba(125, 66, 193, .5), transparent 50%), radial-gradient(ellipse at center left, rgba(212, 25, 174, .5), transparent 50%) !important;
}

html[data-bs-theme="dark"] .footer-link {
    color: rgba(255, 255, 255, 1);
}

html[data-bs-theme="dark"] .footer-link:hover {
    color: rgba(145, 137, 255, 1);
}

html[data-bs-theme="dark"] .footer-social-link {
    color: rgba(255, 255, 255, 1);
}

html[data-bs-theme="dark"] .footer-social-link:hover {
    color: rgba(145, 137, 255, 1);
}

html[data-bs-theme="dark"] footer {
    background-color: rgba(8, 7, 19, 1);
}

html[data-bs-theme="dark"] .footer-copyright-text {
    color: rgba(255, 255, 255, 1);
}