/* ===== MOBILE SLIDER FIXES ===== */

.animated-letters-wrapper {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
}

.animated-letters-item {
    display: inline-block;
}

.custom-font-slider-1 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    text-rendering: optimizeLegibility;
}

@media (max-width: 767px) {
    .custom-font-slider-1 {
        font-size: 34px !important;
        line-height: 38px !important;
    }
    .custom-font-slider-2 {
        font-size: 11px !important;
        letter-spacing: 1px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
    }
    .owl-stage-outer,
    .owl-item {
        overflow: hidden;
    }
    .owl-item.position-relative {
        background-position: 70% center !important;
    }
}

@media (max-width: 480px) {
    .custom-font-slider-1 {
        font-size: 28px !important;
        line-height: 32px !important;
    }
    .custom-font-slider-2 {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
}


/* ===== MOBILE HEADER ===== */
@media (max-width: 991px) {
    /* Hide desktop-only elements */
    .header-extra-info {
        display: none !important;
    }
    #wrapper-helper {
        display: none !important;
    }

    /* Header body: row so hamburger sits beside the logo */
    #header .header-body {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        height: auto !important;
    }

    /* Logo container: takes remaining width */
    #header .header-body > .container {
        flex: 1 !important;
        padding: 0 15px !important;
    }

    /* Nav-bar: shrinks to hamburger width, right side */
    .header-nav-bar {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        padding: 0 !important;
        order: 2 !important;
        border-top: none !important;
    }

    .header-nav-bar > .container {
        width: auto !important;
        padding: 0 15px !important;
        max-width: none !important;
    }

    .header-nav-bar .header-row {
        height: auto !important;
        align-items: center !important;
        display: flex !important;
    }

    .header-nav-bar .header-column {
        height: auto !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* Collapse the desktop nav to zero height — do NOT use display:none
       as that would break JS cloneNode reading the nav items */
    .header-nav-bar .header-nav {
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
    }

    /* Hamburger button */
    .btn.header-btn-collapse-nav {
        width: 38px !important;
        height: 38px !important;
        background: #c69d66 !important;
        border: none !important;
        border-radius: 4px !important;
        color: #fff !important;
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
}

/* Desktop: hamburger hidden */
@media (min-width: 992px) {
    .btn.header-btn-collapse-nav {
        display: none !important;
    }
    #klo-mobile-menu {
        display: none !important;
    }
}


/* ===== MOBILE MENU OVERLAY ===== */
/* Direct child of body — no ancestor can clip or contain it */
#klo-mobile-menu {
    display: none;
    position: fixed;
    top: 90px;
    left: 0;
    right: 0;
    height: auto;
    background: #c69d66;
    z-index: 999999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

#klo-mobile-menu.open {
    display: block;
}

#klo-mobile-menu > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#klo-mobile-menu > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    margin: 0;
}

#klo-mobile-menu > ul > li > a {
    display: block !important;
    padding: 18px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
    background: transparent !important;
}

#klo-mobile-menu > ul > li > a:hover,
#klo-mobile-menu > ul > li > a.active,
#klo-mobile-menu > ul > li > a.current-page-active {
    background: rgba(0, 0, 0, 0.15) !important;
    color: #fff !important;
}

/* Hide Bootstrap arrow icons added by Porto JS */
#klo-mobile-menu .fa-chevron-down {
    display: none !important;
}

@media (max-width: 991px) {
    [data-image-src="img/background/_con.png"] {
        background-image: none !important;
        min-height: 0 !important;
        display: none !important;
    }
}

@media (max-width: 767px) {
    .header-logo img {
        height: 35px !important;
    }
}