/* =========================================
   1. Mega Menu - General Styles
========================================= */

/* Main menu link */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
    color: #000;
    font-size: 15px !important;
}

/* Active/current menu item */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
    background: transparent;
    color: #000;
    font-weight: normal;
    text-decoration: none;
    border-color: #fff;
}

/* Mega menu container background */
#mega-menu-wrap-main-menu {
    background: transparent;
}

/* Hover/focus effect for desktop */
@media only screen and (min-width: 769px) {
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link:focus,
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
    #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
        background: #f5e7e7;
        color: #cc2262;
        border-radius: 8px;
    }
}

/* =========================================
   2. Mega Menu - Sub Menu Styling
========================================= */

/* Main mega menu dropdown */
#mega-menu-main-menu > li.mega-menu-item > .mega-sub-menu {
    right: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px !important;
    border: 1px solid rgb(226 232 240 / 1) !important;
    border-radius: 9px !important;
    background: #fff !important;
    z-index: 999;
}

/* Flyout submenu container */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu {
    background: #fff;
    border-radius: 9px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px !important;
    border: 1px solid rgb(226 232 240 / 1) !important;
    padding: 10px;
}

/* Flyout submenu links */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    background: transparent;
    color: #333;
    padding: 6px 16px;
    line-height: 25px;
    margin-bottom: 2px;
}

/* Inner mega menu layout fix */
.mega-sub-menu ul.mega-sub-menu {
    max-width: 1200px;
    margin: 0 auto;
}

/* Mega menu column links */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard > a.mega-menu-link,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: #000 !important;
    text-transform: capitalize !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

/* Column item padding */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard ul.mega-sub-menu > li {
    padding: 15px;
}

/* Hover effect for column items */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard ul.mega-sub-menu > li:hover {
    background-color: #ffe2ed !important;
    border-radius: 13px;
}

/* Hover text color */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard ul.mega-sub-menu > li:hover a,
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard ul.mega-sub-menu > li a:hover {
    color: #963459;
}

/* =========================================
   3. Mobile Menu Styles
========================================= */
@media only screen and (max-width: 768px) {
    #mega-menu-wrap-main-menu .mega-menu-toggle + #mega-menu-main-menu {
        background: #fff !important;
    }
    #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
    #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu {
        box-shadow: none !important;
        border: none !important;
    }
    #mega-menu-wrap-main-menu .mega-menu-toggle {
        background: transparent !important;
        border: 1px solid #bbbbbb;
        border-radius: 8px;
    }

    /* Chat widget adjustments */
    .rounded-lg.text-card-foreground.w-\[480px\].h-\[700px\].flex.flex-col.shadow-2xl.bg-white.border-0.overflow-hidden.animate-in.slide-in-from-bottom-4.duration-300 {
        width: 100% !important;
        height: calc(100vh - 120px) !important;
    }
    .fixed.bottom-4.right-4.z-50 {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    button.inline-flex.items-center.justify-center.gap-2.whitespace-nowrap.text-sm.font-medium.ring-offset-background.focus-visible\:outline-none.focus-visible\:ring-2.focus-visible\:ring-ring.focus-visible\:ring-offset-2.disabled\:pointer-events-none.disabled\:opacity-50.\[\&_svg\]\:pointer-events-none.\[\&_svg\]\:size-4.\[\&_svg\]\:shrink-0.bg-primary.text-primary-foreground.hover\:bg-primary\/90.px-4.py-2.h-14.w-14.rounded-full.shadow-lg.bg-gradient-to-r.from-purple-600.to-blue-600.hover\:from-purple-700.hover\:to-blue-700.transition-all.duration-300.transform.hover\:scale-110 {
        right: 5px;
        position: fixed;
        bottom: 5px;
    }
}

/* =========================================
   4. Mega Menu Toggle (Hamburger) Styling
========================================= */
#mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner,
#mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::before,
#mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-inner::after {
    background-color: #4b4b4b !important;
}

/* =========================================
   5. Footer Styles
========================================= */
.footer-schedule-section a {
    color: #333;
    white-space: nowrap;
    display: flex;
    gap: 10px;
}
.footer-schedule-section .btn-outline {
    color: #fff;
}
.footer-schedule-section .btn-outline:hover {
    color: #333;
}
.schedule-btn-footer {
    display: none !important;
}

/* =========================================
   6. Section & Typography Styles
========================================= */
.mt-6 {
    margin-top: calc(var(--spacing) * 6) !important;
}
.diagnostic-section {
    background-color: #fbf8f8;
}
h3 {
    font-size: 1.4rem !important;
}
.sub-hero-content h3 {
    font-size: 54px !important;
}
.viz-bot h3 {
    color: #000;
}
h3.font-semibold.text-sm {
    color: #fff !important;
}
section.subpage-extra2.section {
    padding: 100px 0;
}

/* =========================================
   7. Subpage Hero Styles
========================================= */
.subpage-hero .form-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: auto !important;
}
.subpage-hero .file-fields-wrap {
    flex-direction: column;
}
.whatis-content-section .sub-hero-img-wrapper {
    margin: 0 auto 50px auto;
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.subpage-hero .custom-submit-btn {
    width: 100%;
    justify-content: center;
}
.subpage-hero .post-done .custom-submit-btn svg {
    transform: translateX(300px);
}

/* =========================================
   8. Custom Gradient Section
========================================= */
.flex.items-center.justify-between.p-4.bg-gradient-to-r.from-purple-600.to-blue-600.text-white {
    background-color: #cc2262;
}