/* ==========================================================================
*
* Custom CSS Stylesheet. This is where you should add your own styles!
*
** ========================================================================== */

/* Simple style overrides or custom adds */

.some-css-selector {
    font-size: 13px;
}


/* ==========================================================================
** Firefox Compatibility Fixes for Header
* These rules fix display issues on Firefox browser
========================================================================== */

/* Firefox-specific CSS hack using @-moz-document */
@-moz-document url-prefix() {

    #header,
    .site-header {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .site-header-wrapper,
    .site-header-top-wrapper,
    .site-header-main-wrapper {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .site-header-top,
    .kl-header-toptext,
    .topnav,
    .topnav-item {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    .main-menu,
    .main-nav,
    .main-nav>ul,
    .main-nav>ul>li {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .main-nav>ul,
    .main-nav>ul>li {
        display: inline-block !important;
    }
}

/* Force header visibility and proper stacking - More specific selectors */
html #header.site-header,
html body #header.site-header,
html .site-header,
html body .site-header,
#page_wrapper #header.site-header {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: static !important;
    z-index: 999999 !important;
    height: auto !important;
    overflow: visible !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

/* Ensure header wrapper is visible */
html body .site-header-wrapper,
html body .site-header-top-wrapper,
html body .site-header-main-wrapper,
#header .site-header-wrapper,
#header .site-header-top-wrapper,
#header .site-header-main-wrapper {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    height: auto !important;
}

/* Fix header background */
html body .kl-header-bg,
#header .kl-header-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure top bar elements are visible */
html body .site-header-top,
html body .site-header-top-left,
html body .site-header-top-right,
html body .kl-header-toptext,
html body .topnav,
html body .topnav-item,
html body .topnav-item--text,
#header .site-header-top,
#header .kl-header-toptext,
#header .topnav {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    height: auto !important;
    -moz-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

/* Flexbox elements in header */
html body .site-header .d-flex,
#header .d-flex,
#header .site-header-top.d-flex,
#header .site-header-top-left.d-flex,
#header .site-header-top-right.d-flex {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix main navigation area */
html body .site-header-main,
html body .site-header-main-left,
html body .site-header-main-center,
html body .site-header-main-right,
#header .site-header-main,
#header .site-header-main-left,
#header .site-header-main-center {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    height: auto !important;
}

#header .site-header-main.d-flex,
#header .site-header-main-left.d-flex,
#header .site-header-main-center.d-flex {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

/* Logo visibility */
html body .logo-container,
html body .site-logo,
html body .logo-img,
#header .logo-container,
#header .site-logo,
#header .logo img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Menu visibility */
html body .main-menu-wrapper,
html body .main-nav,
html body .main-menu,
html body .main-nav>ul,
html body .main-nav>ul>li,
html body .main-nav>ul>li>a,
#header .main-menu-wrapper,
#header .main-nav,
#header .main-menu {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

html body .main-nav>ul>li {
    display: inline-block !important;
}

/* CTA Button visibility */
html body .kl-cta-ribbon,
html body .ctabutton,
#header .kl-cta-ribbon,
#header .ctabutton {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Ensure containers are visible */
html body .siteheader-container,
#header .siteheader-container,
#header .container,
#header .site-header-row {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Fix any potential z-index issues */
#page_wrapper {
    position: relative;
    z-index: 1;
}

#header {
    position: relative;
    z-index: 999999;
}





/* ==========================================================================
** Responsive styles custom rules
* These rules are ready to be used for either overrides
* or just your own custom rules.
========================================================================== */


/** Higher screens+ **/
@media only screen and (min-width : 1921px) {}


/** Desktop+ **/
@media (min-width: 1200px) {}


/** Laptop **/
@media (max-width: 1200px) {}


/** Laptop+ **/
@media (min-width: 991px) {}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {}


/** Large Tablets **/
@media (max-width: 992px) {}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {}


/** Tablets+  **/
@media (min-width: 768px) {}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {}


/** Smartphone portrait mode **/
@media (max-width: 480px) {}


/** Normal phone portrait mode+ **/
@media (min-width: 320px) {}