@layer components {
    /* Nav link base */
    .nav-link {
        /* Tailwind utilities via apply for text + spacing */
        @apply text-white font-semibold px-4 py-2 rounded-md transition-transform duration-200;
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: #f1f5f9 !important;
    }

    /* Hover/active states */
    .nav-link:hover {
        @apply text-yellow-400 transform scale-105;
    }

    /* Active underline implemented with a standard pseudo-element (Tailwind @apply doesn't reliably handle pseudo utilities) */
    .nav-link.active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 3px;
        width: 100%;
        background-color: #facc15; /* yellow-400 */
        border-radius: 2px;
        transform-origin: left center;
        transform: scaleX(1);
    }

    /* Dropdown container (relative parent must have .group in HTML which you already have) */
    .dropdown-menu {
        position: absolute;
        top: calc(100% );
        right: 0;
        min-width: 14rem; /* 48 in tailwind */
        background-color: rgba(17,24,39,0.95); /* bg-gray-900/95 */
        backdrop-filter: blur(6px);
        color: #ffffff;
        border-radius: 0.5rem;
        padding: 0.5rem;
        box-shadow: 0 10px 30px rgba(2,6,23,0.6);
        border: 1px solid rgba(75,85,99,0.25);
        transform: translateY(-6px) scale(0.98);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 220ms ease, opacity 220ms ease, visibility 220ms;
        z-index: 60;
    }

    /* Show on group hover/focus */
    .relative.group:hover .dropdown-menu,
    .relative.group:focus-within .dropdown-menu {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Dropdown links */
    .dropdown-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-weight: 600;
        color: #f8fafc; /* gray-50/white-ish */
        transition: background-color 160ms, color 160ms, transform 160ms;
    }

    .dropdown-link:hover {
        background-color: #facc15; /* yellow-400 */
        color: #0f172a; /* gray-900 text on yellow */
        transform: translateX(4px);
    }

    /* Mobile link adjustments (keep existing look but ensure contrast) */
    .nav-link-mobile {
        @apply text-white text-lg font-semibold p-3 rounded-lg text-center transition-all duration-200;
    }
    .nav-link-mobile.active {
        @apply bg-yellow-500 text-gray-900;
    }

    /* Header / z-index tweaks: ensure left & right panels sit below the logo but above page content */
    header#header { z-index: 70; }          /* header above most content */
    header#header .logo-container { z-index: 80; position: relative; } /* logo above the two halves */
    .relative.z-10 { z-index: 50; } /* ensure right/left containers have lower z than logo */

    /* Optional: slightly brighter nav text to improve contrast with dark bg */
    nav .nav-link, nav .nav-link-mobile { color: #f1f5f9; } /* text-gray-100 */
}


/* Scroll shadow (unchanged) */
#header.scrolled nav > div > div {
    @apply shadow-xl border border-gray-700;
}
#header.scrolled nav .relative a {
    @apply shadow-2xl;
}

/* Swiper (unchanged) */
.swiper-pagination-bullet-active {
    background-color: #facc15 !important;
}
.swiper-button-next, .swiper-button-prev {
    color: #facc15 !important;
}

/* Logo (unchanged) */
.logo-container {
    @apply p-2 block bg-gray-900/95 rounded-full shadow-md border border-yellow-400 transition-all duration-300;
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.786);

}

.logo-container:hover {
    @apply shadow-2xl scale-140;
}

section {
    @apply py-20;
    min-height: 100vh;
}   

h2.section-title {
    /* @apply text-3xl font-bold text-gray-800 md:text-4xl ; */
    font-size: 1.875rem; /* 30px */
    font-weight: 700;   /* bold */
    color: #0f172a; /* gray-900 */
}

p.section-subtitle {
    @apply mt-4 text-lg text-gray-600 max-w-2xl mx-auto;
    font-size: 1.125rem; /* 18px */
    color: #475569; /* gray-600 */
    max-width: 42rem; /* 672px */
    margin-left: auto;
    margin-right: auto;
}
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 transition duration-200;
    font-size: 1rem; /* 16px */
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.5rem 1rem; /* py-2 px-4 */
    transition: border-color 200ms, box-shadow 200ms;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    color: #0f172a; /* gray-900 */
    background-color: #ffffff; /* white */
    margin-top: 0.5rem;
}
.form-input:focus {
    border-color: #facc15; /* yellow-500 */
    box-shadow: 0 0 0 4px rgba(250,204,21,0.3); /* yellow-500 with opacity */
    outline: none;
    transition: border-color 200ms, box-shadow 200ms;
}