/* Hide ALL submenus (desktop hover nav only) */
.main-nav .navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}

/* Show ONLY the submenu of the hovered item */
.main-nav .navbar-nav .dropdown:hover > .dropdown-menu,
.main-nav .navbar-nav .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Submenu positioning */
.main-nav .dropdown-submenu {
    position: relative;
}

.main-nav .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
}

/* Prevent cascading open */
.main-nav .dropdown-submenu .dropdown-menu .dropdown-menu {
    display: none !important;
}

.main-nav .dropdown-submenu:hover > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
}

/** #AI **/
.navbar-nav .dropdown-menu.show,
.navbar-nav .dropdown-submenu .dropdown-menu.show,
.navbar-nav .dropdown-menu.show .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/** #AI **/
#navbarSupportedContent .navbar-nav .dropdown-submenu > .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 0 !important;
    left: 100% !important;
}

.main-nav nav .navbar-nav .nav-item .dropdown-menu {
    background-color: #fff !important;
}

/* ===== MOBILE MENU (Mean Menu) FIXES ===== */
@media only screen and (max-width: 991px) {
    /* The reveal bar (hamburger) was 70% opaque, letting page content
       show through behind it. Make it solid. */
    .mean-container .mean-bar {
        background-color: #ffffff !important;
        opacity: 1 !important;
    }

    .mean-container .mean-nav {
        background-color: #ffffff !important;
    }

    /* Bootstrap's ".dropdown-menu" is position:absolute by default.
       That class is still present on every nested <ul> that meanmenu
       clones into the mobile panel, so from the 2nd level down each
       submenu was popping out to the right instead of expanding
       downward with meanmenu's slideDown/slideUp accordion. Force
       every level back into normal flow. */
    .mean-nav .dropdown-menu,
    .mean-nav .dropdown-submenu > .dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background-color: #ffffff !important;
    }
}

.about-right-play .play-right-btn {
    background-color: #ffffff0f !important;
    border-radius: 0px;
}

/* ===== NAVBAR BASE ===== */
/* .navbar-area (the outer wrapper) defaults to background-color:transparent
   in style.css and was only ever forced white in its .is-sticky state, so
   before scrolling the desktop nav could show whatever's behind it through
   its edges — same issue as the mobile mean-bar. Make it solid always. */
.navbar-area {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* The scroll listener in custom.js actually toggles the class
   ".sticky-nav" on .navbar-area (not ".is-sticky" — that rule below
   never matches). style.css's ".sticky-nav .main-nav" sets a dark
   #1f1f1f background with no white override, so once you scroll past
   150px the bar (and the dropdown menu hanging off it) turned dark
   instead of staying solid white. Force it white here too. */
.sticky-nav .main-nav,
.sticky-nav .navbar-area,
.sticky-nav .navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

.navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    padding-top: 12px;
    padding-bottom: 12px;
    transition: all 0.3s ease;
}

/* Sticky version */
.navbar-area.is-sticky {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ===== NAV LINKS ===== */
.navbar-light .navbar-nav .nav-link {
    color: #111 !important;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #0b3a7a !important; /* your blue */
}

/* Active link */
.navbar-light .navbar-nav .active > .nav-link {
    color: #0b3a7a !important;
}

/* ===== DROPDOWN MENU ===== */
/* Force solid white navbar background */
.navbar {
    background-color: #ffffff !important;
    background: #ffffff !important;
    opacity: 1 !important;
}

/* Remove any transparent background from parent containers */
.navbar-light {
    background-color: #ffffff !important;
}

/* Make dropdown menus solid white */
.dropdown-menu {
    background-color: #ffffff !important;
    opacity: 1 !important;
}

/* Remove any backdrop filter or blur if applied */
.navbar,
.dropdown-menu {
    backdrop-filter: none !important;
}

/** #AI **/
.navbar-nav .dropdown-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
    opacity: 1 !important;
}

/* theme-dark.css forces every dropdown level (incl. nested/inner
   submenus) to a dark gray background when dark mode is toggled on,
   via ".theme-dark .main-nav nav .navbar-nav .nav-item .dropdown-menu".
   That selector's specificity beats the rule above, so match it here
   to keep the whole desktop menu (all inner levels) solid white
   regardless of theme. */
.theme-dark .main-nav nav .navbar-nav .nav-item .dropdown-menu,
.theme-dark .mean-container .mean-nav ul li .dropdown-menu {
    background-color: #ffffff !important;
}

/** #AI **/
/*.navbar-nav .dropdown-menu .dropdown-item {
    color: #1f2937 !important;
    background: transparent !important;
}*/

.dropspool-blue {
    color: #5085ae !important;
}

.product-img {
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;       /* keeps full image visible */
}

.drops-text-middle {
    vertical-align: middle;
    text-align: center;
}

.product-hero {
    margin-top: 1.5rem !important;
}

.table-dp-center td, .table-dp-center th {
    text-align: center;
    vertical-align: middle;
}

.product-hero{
            background:linear-gradient(180deg,#f7fbff 0%,#ffffff 70%);
            padding:90px 0 50px;
        }
        .product-img{
            width:100%;
            border-radius:14px;
            border:1px solid #eef2f6;
            box-shadow:0 8px 30px rgba(0,0,0,.06);
        }
        .badge-mini{
            display:inline-block;
            padding:7px 10px;
            border-radius:999px;
            font-size:12px;
            background:#f2f6ff;
            color:#1c4fd7;
            margin:4px;
        }
        .product-card{
            background:#fff;
            border:1px solid #eef2f6;
            border-radius:16px;
            padding:22px;
            box-shadow:0 3px 16px rgba(0,0,0,.04);
            margin-bottom:24px;
        }
        .spec-table{
            width:100%;
            border-collapse:collapse;
            margin-top:12px;
        }
        .spec-table th,.spec-table td{
            border:1px solid #eef2f6;
            padding:10px;
            font-size:14px;
            vertical-align:top;
        }
        .spec-table th{
            background:#f8f9fb;
            width:35%;
        }
        .cta-wrap{
            background:linear-gradient(180deg,#ffffff,#f7fbff);
            border:1px solid #eef2f6;
            border-radius:18px;
            padding:30px;
            text-align:center;
        }
        .icon-list{
            margin:0;
            padding-left:18px;
        }
        .icon-list li{
            margin-bottom:8px;
            color:#4f5866;
        }
        @media(max-width:991px){
            .product-hero{padding:70px 0 30px;}
        }