/* =========================
   Navbar Professional Hover
========================= */

nav a,
nav button,
.h-full.w-full.flex.space-s-8 > a,
.h-full.w-full.flex.space-s-8 > div > button {
    position: relative;
    transition: all .3s ease;
}

/* Hover Effect */
.h-full.w-full.flex.space-s-8 > a:hover,
.h-full.w-full.flex.space-s-8 > div > button:hover {
    background: none !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}

/* Active/Open Dropdown */
[data-headlessui-state="open"] > button {
    background: #111 !important;
    color: #fff !important;
}

/* Smooth underline animation */
.h-full.w-full.flex.space-s-8 > a::after,
.h-full.w-full.flex.space-s-8 > div > button::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0%;
    height: 2px;
    background: currentColor;
    transition: width .3s ease;
    border-radius: 20px;
}

.h-full.w-full.flex.space-s-8 > a:hover::after,
.h-full.w-full.flex.space-s-8 > div > button:hover::after,
[data-headlessui-state="open"] > button::after {
    width: 70%;
}

/* Dropdown Animation */
[id^="headlessui-popover-panel"] {
    animation: dropdownFade .25s ease;
    transform-origin: top center;
    border-radius: 18px;
    overflow: hidden;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Cards Hover */
.group.relative.text-base {
    transition: all .35s ease;
    border-radius: 16px;
    padding: 10px;
}

.group.relative.text-base:hover {
    background: #f8f8f8;
    transform: translateY(-5px);
}

.group.relative.text-base img {
    transition: transform .5s ease;
}

.group.relative.text-base:hover img {
    transform: scale(1.08);
}

/* Title Hover */
.group.relative.text-base a {
    transition: color .3s ease;
}

.group.relative.text-base:hover a {
    color: #111;
}

/* Soft shadow for dropdown */
.relative.bg-white {
    border-radius: 20px;
    box-shadow:
        0 10px 30px rgba(0,0,0,.08),
        0 2px 10px rgba(0,0,0,.04);
}