/* HLR Custom Styles for emyui-mola Theme */

/* ============================================
   BANNER COLORS - #00022E
   ============================================ */

/* Override banner gradient to #00022E */
.gradient-animated-bg,
.gradient-blue-bg {
    background: #00022E !important;
    background-image: linear-gradient(135deg, #00022E 0%, #000419 50%, #00022E 100%) !important;
    animation: none !important;
}

/* Hero area background */
.hero-area-coodiv {
    background: #00022E !important;
}

/* Homepage: keep hero tall so animated background stays prominent (no domain section) */
.hero-area-coodiv:not(.text-page-hero) {
    min-height: 65vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.hero-area-coodiv:not(.text-page-hero) .wave-shape-bottom {
    margin-top: auto !important;
}

/* Homepage: particles-only hero - navy background, white particles (no skyline/earth/hills) */
.hero-area-coodiv .header-hero-backgrounds-particles-only {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Ensure particles container has dimensions so canvas gets non-zero size */
.hero-area-coodiv .header-hero-backgrounds-particles-only #particles-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

.hero-area-coodiv:not(.text-page-hero) #particles-bg canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Secondary header banner */
.bg-gradient-info,
.banner-widget-sidebar.bg-gradient-info {
    background: #00022E !important;
    background-image: linear-gradient(135deg, #00022E 0%, #000419 100%) !important;
}

/* Client area banner */
.container-clientarea.gradient-animated-bg,
.container-clientarea.gradient-blue-bg {
    background: #00022E !important;
    background-image: linear-gradient(135deg, #00022E 0%, #000419 100%) !important;
}

.banner-widget-sidebar {
    background: #00022E !important;
}

/* Ensure client area text is white on dark background */
.container-clientarea h5,
.container-clientarea p,
.container-clientarea span {
    color: #FFFFFF !important;
}

/* ============================================
   REPLACE GREEN ACCENTS WITH NAVY BLUE #00022E
   ============================================ */

/* Text colors - replace green with navy */
.text-green,
.pre-title.text-green,
.strike-bottom.green,
.coodiv-color-green-opacity-visible,
.green,
li.green {
    color: #00022E !important;
}

/* Background colors - replace green with navy */
.coodiv-bg-green-opacity-visible,
.coodiv-bg-green-opacity-1,
.coodiv-bg-green-opacity-2,
.coodiv-bg-green-opacity-3,
.coodiv-bg-green-opacity-4,
.coodiv-bg-green-opacity-5,
.coodiv-bg-green-shamrock-opacity-visible,
.features-box-icon.coodiv-bg-green-opacity-1 {
    background-color: rgba(0, 2, 46, 0.1) !important;
}

/* Green underlines/borders */
.strike-bottom.green::after {
    background: #00022E !important;
}

/* ============================================
   MENU GREEN -> NAVY (header nav + dropdowns)
   ============================================ */

/* Main menu nav link underline (Store, Home, etc.) - green -> navy */
.site-header .main-menu .nav-item .nav-link::before {
    background: #00022E !important;
    background-image: none !important;
}

/* Dropdown menu items - green text/hover -> navy */
.coodiv-menu-dropdown > .drop-menu-item > a,
.mega-menu-dropdown-ul > .drop-menu-item > a {
    color: #13151c !important;
}

.coodiv-menu-dropdown > .drop-menu-item:hover > a,
.coodiv-menu-dropdown > .drop-menu-item > a:hover,
.mega-menu-dropdown-ul > .drop-menu-item:hover > a {
    color: #00022E !important;
}

/* Replace green buttons/badges with navy */
.btn-success,
.badge-success,
.notifications-bell.green {
    background-color: #00022E !important;
    border-color: #00022E !important;
    color: #FFFFFF !important;
}

.btn-success:hover {
    background-color: #000419 !important;
    border-color: #000419 !important;
    color: #FFFFFF !important;
}

/* Green icon backgrounds */
.features-box .features-box-icon.coodiv-bg-green-opacity-1 i {
    color: #00022E !important;
}

/* List items with green class */
ul.full-plan-disc li.green span {
    background: #00022E !important;
}

/* Green-themed domain features */
.our-domains-features-box .our-domains-features-head.element-page.green-element {
    background: rgba(0, 2, 46, 0.1) !important;
}

/* ============================================
   REPLACE RED ACCENTS WITH NAVY BLUE #00022E
   ============================================ */

/* Red buttons/badges -> navy */
.btn-red,
.btn-primary,
.signup-btn-header.btn-red {
    background-color: #00022E !important;
    border-color: #00022E !important;
    color: #FFFFFF !important;
}

.btn-red:hover,
.btn-primary:hover,
.signup-btn-header.btn-red:hover {
    background-color: #000419 !important;
    border-color: #000419 !important;
    color: #FFFFFF !important;
}

/* Danger/red badges and cart count -> navy */
.badge-danger,
.shoping-cart-btn-header .shoping-cart-number {
    background-color: #00022E !important;
    border-color: #00022E !important;
    color: #FFFFFF !important;
}

/* Red underline/strike -> navy */
.strike-bottom.red::after {
    background: #00022E !important;
}

/* Domain sale/hot badges (if shown elsewhere) -> navy */
.domain-box-sale-header h5 span {
    background-color: #00022E !important;
    color: #FFFFFF !important;
}

/* Background danger (red badges/boxes) -> navy; keep .text-danger for error messages */
.bg-danger {
    background-color: #00022E !important;
    color: #FFFFFF !important;
}

/* ============================================
   ADDITIONAL NAVY BLUE STYLING
   ============================================ */

/* Ensure white text on dark backgrounds */
.hero-area-coodiv h1,
.hero-area-coodiv h2,
.hero-area-coodiv h3,
.hero-area-coodiv h4,
.hero-area-coodiv p,
.hero-area-coodiv span:not(.badge) {
    color: #FFFFFF !important;
}

.banner-widget-sidebar h3,
.banner-widget-sidebar p,
.banner-widget-sidebar span {
    color: #FFFFFF !important;
}

/* ============================================
   FOOTER BACKGROUND - NAVY #00022E
   ============================================ */

.footer-gradient-default,
.dark-mode-texts.footer-gradient-default {
    background: #00022E !important;
    background-image: linear-gradient(135deg, #00022E 0%, #000419 50%, #00022E 100%) !important;
}