/* ============================================================
   Custom overrides — header nav alignment, home sections, mobile
   Loaded AFTER the template CSS so these rules win.
   ============================================================ */

/* Prevent accidental horizontal scroll on any page */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------
   HEADER NAV ALIGNMENT
   - vertically center the CATEGORIES box and the menu row
   - tighten menu-item spacing so all items sit on one line
   - remove the extra empty green area
----------------------------------------------------------- */
.header-bottom-area .row {
    align-items: center;
}

/* Menu list: single row, right aligned, no awkward wrap */
.ltn__main-menu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

/* Tighter horizontal padding so 9 items fit comfortably */
.ltn__main-menu > ul > li > a {
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 15px;
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1300px) {
    .ltn__main-menu > ul > li > a {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 14px;
    }
}

/* CATEGORIES box: keep it aligned with the menu, no stray height */
.header-bottom-area .ltn__category-menu-wrap {
    margin-bottom: 0;
}
.header-bottom-area .ltn__category-menu-title h2 {
    margin-bottom: 0;
}

/* -----------------------------------------------------------
   BREADCRUMB AREA — kill the huge empty gap
   Template used margin-bottom:120px + 110px vertical padding,
   and when the banner image is missing it shows as a big white
   block. Tighten it and give a soft fallback background.
----------------------------------------------------------- */
.ltn__breadcrumb-area {
    margin-bottom: 0 !important;
    padding-top: 55px !important;
    padding-bottom: 55px !important;
    background-color: #f2f8f6;   /* soft fallback if banner image missing */
}
@media (max-width: 768px) {
    .ltn__breadcrumb-area {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* About intro: less top gap, and don't leave a tall empty image box */
.au-wrap .au-section:first-of-type {
    padding-top: 45px;
}
.au-intro-img img {
    height: auto;
    min-height: 260px;
    background: #eef5f2;   /* subtle placeholder if the image file is missing */
}

/* -----------------------------------------------------------
   HOME PAGE SECTIONS — consistent spacing & safe media
----------------------------------------------------------- */
.ltn__slider-area img {
    width: 100%;
    object-fit: cover;
}

/* Product / feature cards: equal height rows */
.ltn__product-item,
.ltn__feature-item {
    height: auto;
}

/* Section titles keep breathing room on small screens */
.section-title-area {
    margin-bottom: 25px;
}

/* -----------------------------------------------------------
   MOBILE / RESPONSIVE
----------------------------------------------------------- */
@media (max-width: 991px) {
    /* Comfortable section padding on phones/tablets */
    .ltn__slider-area .ltn__slide-item-inner { padding: 20px 0; }

    /* Wide tables scroll instead of breaking layout */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Keep container padding sane */
    .container, .container-fluid { padding-left: 15px; padding-right: 15px; }

    /* Center-align stacked columns content */
    .about-us-info-wrap,
    .ltn__section-title-2 { text-align: center; }
}

@media (max-width: 575px) {
    h1, .section-title { font-size: 26px !important; line-height: 1.3; }
    .btn { white-space: normal; }
}