/* Mega Menu Styles */

.has-dropdown {

    position: static;

    height: 100%;

    display: flex;

    align-items: center;

    transition: border-color 0.3s ease;

}



.has-dropdown > a {

    height: 100%;

    display: flex;

    align-items: center;

}



.mega-menu {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background-color: #ffffff;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.1s ease;

    z-index: 1000;

    border-top: 1px solid #eee;

}







.has-dropdown:hover .mega-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }



.has-dropdown.active-click .mega-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.mega-menu-wrapper {

    display: flex;

    width: 100%;

    max-width: 1340px;

    margin: 0 auto;

    padding: 0 20px;

    background: #fff;

    min-height: 250px; /* Reduced from 300px */

}



/* Sidebar */

.mega-sidebar {

    width: 260px; /* Reduced width */

    flex-shrink: 0;

    padding: 15px 0; /* Reduced padding */

    background: #ffffff;

    border-right: none;

}



.mega-tab {

    padding: 25px 20px 25px 20px; /* Reduced padding */

    font-size: 15px; /* Reduced font size */

    font-weight: 400;

    color: #666;

    cursor: pointer;

    transition: all 0.2s ease;

    border-radius: 0;

    margin-right: 0px;

}



.mega-tab:hover {

        color: #000000;

        background-color: #f5f5f5;

    }



.mega-tab.active {

    background-color: #f5f5f5;

    color: #000000;

}



/* Content Area */

.mega-content {

    flex-grow: 1;

    padding: 20px 0 20px 20px; /* Reduced padding */

    background: #ffffff;

}



.mega-grid {

    display: none;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    justify-content: start;

    align-content: start;

    animation: fadeIn 0.3s ease;

    height: 100%;

}



.mega-grid.active {

    display: grid;

}



.mega-item {

    padding: 20px 25px; /* Slightly increased for better spacing */

    border-right: none;

    margin-bottom: 0;

    transition: all 0.3s ease;

    cursor: pointer;

    position: relative;

    height: auto;



    display: flex;

    flex-direction: column;

    justify-content: flex-start; /* Top aligned */

    align-items: flex-start !important; /* Overrides .main-nav a centering */

    text-decoration: none !important;

}



/* Override .main-nav a hover line for mega-items that are links */

a.mega-item::after {

    display: none !important;

}





.mega-item:hover {

        background-color: #f8f8f8;

        z-index: 1;

    }



.mega-item h4 {

    font-size: 15px; /* Reduced from 14px */

    font-weight: 400;

    color: #000;

    margin-bottom: 6px; /* Reduced margin */

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    transition: color 0.3s ease;

    width: auto; /* Ensures arrow is near the text */

}



/* Arrow Icon */

.mega-item h4::after {

    content: '';

    display: inline-block;

    width: 14px;

    height: 14px;

    background-color: #000000;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    -webkit-mask-size: contain;

    mask-size: contain;

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: center;

    mask-position: center;

    opacity: 0;

    transform: translateX(-4px);

    transition: all 0.25s ease;

}



.mega-item:hover h4 {

    color: #00A4EB; /* Theme color on hover */

}



.mega-item:hover h4::after {

    opacity: 1;

    background-color: #00A4EB; /* Make the arrow blue upon hover */

    transform: translateX(0);

}



.mega-item p {

    font-size: 12px; /* Reduced font size */

    color: #777;

    line-height: 1.5;

    margin: 0;

    transition: color 0.3s ease;

    text-align: left; /* Ensure left alignment */

}



.mega-item:hover p {

        color: #666; 

    }



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(5px); }

    to { opacity: 1; transform: translateY(0); }

}





/* Render a reliable left-arrow before all mobile submenu back buttons. */

.mobile-back-btn span,

.mobile-back-btn-sub span {

    display: none;

}



.mobile-back-btn::before,

.mobile-back-btn-sub::before {

    content: "\2190"; /* left arrow */

    color: currentColor;

    margin-right: 10px;

    font-size: 16px;

    line-height: 1;

    display: inline-block;

    vertical-align: middle;

}