/* Custom styles to complement Tailwind CSS */

/* Active state for desktop navigation tabs */
.main-tabs-desktop .main-tab-btn.active {
    background-color: #1e40af; /* A darker blue for active state */
}

/* Active state for mobile navigation tabs */
.main-tabs .main-tab-btn.active {
    background-color: #374151; /* A darker gray for active state in mobile nav */
}

/* Hamburger Menu Animation */
#hamburger.active .bar-1 {
    transform: translateY(7px) rotate(45deg);
}

#hamburger.active .bar-2 {
    opacity: 0;
}

#hamburger.active .bar-3 {
    transform: translateY(-7px) rotate(-45deg);
}

/* Your existing styles for content cards, etc. can remain here */
.main-tab-content {
    display: none;
}

.main-tab-content.active {
    display: block;
}