/* Custom Navbar Styles */

.tg-header__area {
    background: #ffffff; /* Whitish background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    border-bottom: 2px solid #f0f0f0;
}

.tgmenu__nav .navigation > li > a {
    color: #333333;
    font-weight: 600;
    font-size: 15px;
    padding: 8px 12px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.tgmenu__nav .navigation > li:hover > a,
.tgmenu__nav .navigation > li.active > a {
    color: #0066cc; /* Subtle blue highlight */
    background-color: #f9f9f9;
    border-radius: 5px;
}

/* Remove the "Learn for Free" button */
.header-btn {
    display: none;
}

/* Add subtle icon effects */
.tgmenu__action .header-user img,
.tgmenu__action .mini-cart-icon img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.tgmenu__action .header-user img:hover,
.tgmenu__action .mini-cart-icon img:hover {
    filter: grayscale(0%);
}

/* Mobile View Styling */
@media (max-width: 767px) {
    .tg-header__area {
        background: #ffffff;
        padding: 12px 0;
    }

    .tgmenu__nav .navigation > li > a {
        color: #333333;
        padding: 10px;
    }

    .tgmenu__nav .navigation > li:hover > a {
        color: #0066cc;
        background-color: #eaeaea;
    }
}