.nav__content-wrapper {
    padding: 2.4rem 0rem;
    position: relative;
    z-index: 999;
}

.logo__box a {
    color: var(--purple-900);
    font-size: 2.2rem;
    gap: .2rem;
    cursor: pointer;
    text-wrap: nowrap;
    font-weight: bold;
}

.logo__box a>img {
    height: 2.4rem;
    width: 2.4rem;
}

.nav__middle {
    display: none;
}

.nav__right {
    padding: 1.2rem;
    border-radius: .8rem;
    background-color: var(--brand-dark);
    opacity: 92%;
}

.nav__right>i {
    color: var(--primary-purple-50);
    font-size: 1.8rem;
}

.nav__right>.secondary__cta {
    display: none;
}

.dropdown {
    position: absolute;
    top: 80%;
    width: 16rem;
    right: 0rem;
    background-color: var(--purple-500);
    padding: 3.2rem;
    border-radius: 0.8rem;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown ul {
    gap: 3.2rem;
}

.dropdown ul li a {
    color: #E8DBF5;
    font-size: var(--size-16px);
    font-weight: 500;
}

/* Media Queries Starts */

/* Small screens (sm) */
/* @media (min-width: 640px) {} */

/* Medium screens (md) */
@media (min-width: 768px) {
    .nav__content-wrapper {
        background-color: transparent;
    }

    .nav__middle {
        display: block;
    }

    .nav__middle>ul {
        gap: 7.2rem;
        padding: var(--size-12px) var(--size-16px);
        border-radius: 10rem;
        border: 1px solid var(--neutral-11);
    }

    .nav__middle>ul li a {
        color: var(--purple-900);
        font-size: var(--size-16px);
        font-weight: 500;
        cursor: pointer;
        font-weight: 600;
    }

    .nav__right>i {
        display: none;
    }

    .nav__right>.secondary__cta {
        display: block;
    }
}

/* Large screens (lg) */
@media (min-width: 960px) {
    .logo__box {
        font-size: var(--size-24px);
    }

    .nav__right {
        padding: 0rem;
        border-radius: 0rem;
        background-color: transparent;
    }
}