/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/


/* ==========================================================================
   Flatsome Native Header Builder & Dark Canvas Styling
   ========================================================================== */
#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(5, 7, 13, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

#header.stuck, #header.has-sticky.stuck {
    background: rgba(5, 7, 13, 0.95) !important;
    border-bottom-color: var(--color-brand, rgba(25, 217, 120, 0.15)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.header-main {
    background: transparent !important;
}

.header-inner {
    height: 86px !important;
    min-height: 86px !important;
}

#logo img {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
}

.header-nav-main {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
}

.header-nav-main > li > a.nav-top-link {
    font-family: var(--font-manrope, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #C2CDDB) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 6px 0 !important;
    position: relative !important;
    transition: color 0.25s ease !important;
}

.header-nav-main > li > a.nav-top-link:hover,
.header-nav-main > li.current-menu-item > a.nav-top-link {
    color: var(--text-white, #FFFFFF) !important;
}

.header-nav-main > li > a.nav-top-link:hover::after,
.header-nav-main > li.current-menu-item > a.nav-top-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--btn-bg, var(--color-brand, var(--color-green, #19D978))) !important;
    border-radius: 2px !important;
}

.header-button .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--btn-bg, var(--color-brand, var(--color-green, #19D978))) !important;
    color: var(--btn-text, #ffffff) !important;
    font-family: var(--font-manrope, 'Manrope', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 26px !important;
    border-radius: 99px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.header-button .button:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(37, 99, 235, 0.45) !important;
}

.mobile-nav .nav-icon a {
    color: #FFFFFF !important;
    font-size: 24px !important;
}

.mfp-content .sidebar-menu {
    background-color: #05070D !important;
}

.sidebar-menu ul.nav-sidebar > li > a {
    color: #C2CDDB !important;
    font-family: var(--font-manrope, 'Manrope', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 14px 20px !important;
}

.sidebar-menu ul.nav-sidebar > li > a:hover {
    color: var(--btn-bg, var(--color-brand, #19D978)) !important;
}

html, body {
    background-color: var(--bg-main, var(--page-bg, #05070D)) !important;
}

#wrapper, #main, #content, .content-area {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.content-area {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.absolute-footer {
    display: none !important;
}

/* ==========================================================================
   Flatsome Global Reset - Fix Overridden Classes (.badge, .section-title, .container)
   ========================================================================== */
.badge,
div.badge,
span.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 6px 16px !important;
    background: var(--bg-badge, rgba(255, 194, 0, 0.1)) !important;
    border: 1px solid var(--border-badge, rgba(255, 194, 0, 0.3)) !important;
    border-radius: 9999px !important;
    color: var(--color-gold, #FFC200) !important;
    font-family: var(--font-manrope, 'Manrope', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    pointer-events: auto !important;
    backface-visibility: visible !important;
    z-index: auto !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    white-space: nowrap !important;
}

.section-title,
h2.section-title,
h3.section-title {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    flex-flow: initial !important;
    position: static !important;
    width: auto !important;
    font-family: var(--font-manrope, 'Manrope', sans-serif) !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--text-white, #FFFFFF) !important;
    margin-bottom: 16px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.container {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}