/* Mid South Sales responsive overrides — preserves desktop design, fixes mobile/tablet issues */

/* Top header: full-width logo with phone/social overlaid top-right (original layout) */
header.header2 > .container.mss-header-top {
    display: block;
    padding: 6px 12px 8px;
    position: relative;
    box-sizing: border-box;
}

header.header2 > .container.mss-header-top .logo {
    float: none !important;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    display: block;
}

header.header2 > .container.mss-header-top .logo > a {
    display: block;
    float: none !important;
    width: 100%;
    line-height: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

header.header2 > .container.mss-header-top .logo img {
    display: block;
    width: 100% !important;
    max-width: none;
    height: 214px !important;
    object-fit: fill;
    object-position: left center;
}

header.header2 > .container.mss-header-top .header-social-icons {
    position: absolute !important;
    top: auto;
    bottom: 60px;
    right: 15px;
    z-index: 2;
    margin: 0;
}

header.header2 > .container.mss-header-top .header-social-icons > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0 !important;
    padding: 0;
    float: none !important;
}

header.header2 > .container.mss-header-top .header-social-icons li {
    float: none;
    overflow: visible;
}

header.header2 > .container.mss-header-top .header-social-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 2px 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

header.header2 > .container.mss-header-top .header-social-icons li a .fa {
    color: #f66800 !important;
    font-size: clamp(14px, 1.35vw, 18px);
    line-height: 1;
    width: clamp(22px, 2.1vw, 28px);
    height: clamp(22px, 2.1vw, 28px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

header.header2 > .container.mss-header-top .header-social-icons li a:hover {
    background: rgba(246, 104, 0, 0.12);
}

header.header2 > .container.mss-header-top .header-social-icons li a:hover .fa {
    color: #d95a00 !important;
    transform: translateY(-1px);
}

header.header2 > .container.mss-header-top .mss-header-phone {
    display: flex;
    align-items: center;
    width: auto !important;
    min-width: 0;
    height: auto;
    margin: 0 6px 0 0;
    padding: 0 10px 0 0;
    border-right: 1px solid #e5e5e5;
    font-weight: bold;
    overflow: visible;
    transition: color 0.2s ease;
}

header.header2 > .container.mss-header-top .mss-header-phone a {
    float: none !important;
    margin: 0 !important;
    padding: 2px 0;
    color: #000;
    font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
    font-size: clamp(10px, 1.05vw, 14px);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

header.header2 > .container.mss-header-top .mss-header-phone:hover,
header.header2 > .container.mss-header-top .mss-header-phone a:hover {
    color: #f66800 !important;
}

.footer_container .menu-main-menu-container li.current-menu-item > a,
.footer_container .menu-locations-container li.current-menu-item > a,
.footer_container .menu-main-menu-container li.current-menu-ancestor > a,
.footer_container .menu-locations-container li.current-menu-ancestor > a {
    color: #e74c3c !important;
    font-weight: 700;
}

.footer_container .menu-main-menu-container li > a,
.footer_container .menu-locations-container li > a {
    transition: color 0.2s ease;
}

/* Orange hamburger toggle (mobile only). Hidden on desktop where the menu
   shows inline. */
.mss-menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: #f66800;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.mss-menu-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-strip.is-open .mss-menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-strip.is-open .mss-menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.menu-strip.is-open .mss-menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1199px) {
    .mss-menu-toggle {
        display: flex;
    }
}

/* Nav bar: dark strip inset 12px so it lines up under the logo banner */
.header2 .menu-strip {
    float: none !important;
    width: auto !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
}

/* Nav bar: single-line menu items with search pinned to the right */
@media (min-width: 1200px) {
    .menu-strip .container {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-height: 54px;
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .header2 .menu-strip .container #menu {
        float: none !important;
        flex: 1 1 auto;
        min-width: 0;
        display: block;
    }

    .header2 #menu > ul {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: stretch;
        float: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        width: auto !important;
        max-width: 100%;
    }

    .header2 #menu > ul > li {
        float: none !important;
        flex: 0 1 auto;
        min-width: 0;
        margin-top: 0 !important;
        position: relative;
        background: transparent !important;
    }

    /* Parent items wrap the link in .mss-menu-item-row for mobile toggles.
       On desktop hide the toggle and style the link like every other item. */
    .header2 #menu .mss-menu-item-row {
        display: block;
        height: 100%;
    }

    .header2 #menu .mss-submenu-toggle {
        display: none !important;
    }

    .header2 #menu > ul > li > a,
    .header2 #menu > ul > li > .mss-menu-item-row > a {
        display: block !important;
        float: none !important;
        white-space: nowrap;
        padding: 22px 12px !important;
        color: #fff !important;
        line-height: 10px !important;
        background: transparent !important;
        box-sizing: border-box;
    }

    .header2 #menu > ul > li:hover > a,
    .header2 #menu > ul > li:hover > .mss-menu-item-row > a {
        color: #fff !important;
        background-color: #222 !important;
    }

    .header2 #menu > ul > li.current-menu-item > a,
    .header2 #menu > ul > li.current-menu-item > .mss-menu-item-row > a {
        color: #fff !important;
        background-color: #e74c3c !important;
    }

    .header2 #menu > ul > li.current-menu-ancestor > a,
    .header2 #menu > ul > li.current-menu-ancestor > .mss-menu-item-row > a {
        color: #fff !important;
        background-color: #c0392b !important;
    }

    .header2 #menu ul.sub-menu li a,
    .header2 #menu ul.sub-menu li .mss-menu-item-row > a {
        padding: 12px 18px !important;
        color: #fff !important;
        background-color: #323232 !important;
        white-space: nowrap;
    }

    .header2 #menu ul.sub-menu li:hover > a,
    .header2 #menu ul.sub-menu li:hover > .mss-menu-item-row > a,
    .header2 #menu ul.sub-menu li.current-menu-item > a,
    .header2 #menu ul.sub-menu li.current-menu-item > .mss-menu-item-row > a {
        color: #fff !important;
        background-color: #222 !important;
    }

    .header2 #menu ul.sub-menu li.current-menu-ancestor > a,
    .header2 #menu ul.sub-menu li.current-menu-ancestor > .mss-menu-item-row > a {
        color: #fff !important;
        background-color: #e74c3c !important;
    }

    .header2 #menu > ul > li.menu-item-has-children > ul.sub-menu {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        width: auto !important;
        min-width: 100%;
        background: #323232 !important;
        border-top: 0 !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
    }

    .header2 #menu ul.sub-menu > li {
        float: none !important;
        display: block;
        width: 100% !important;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .header2 #menu ul.sub-menu li a,
    .header2 #menu ul.sub-menu li .mss-menu-item-row > a {
        display: block !important;
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Keep dropdown open while moving cursor from parent link to submenu */
    .header2 #menu > ul > li.menu-item-has-children > a::after,
    .header2 #menu > ul > li.menu-item-has-children > .mss-menu-item-row::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -20px;
        height: 20px;
        background: transparent;
    }

    .header2 #menu > ul > li.menu-item-has-children > ul.sub-menu {
        margin-top: 0;
        display: block;
        position: absolute !important;
        top: 100% !important;
        left: -9999px !important;
        float: none !important;
        z-index: 20;
    }

    .header2 #menu > ul > li.menu-item-has-children:hover > ul.sub-menu,
    .header2 #menu > ul > li.menu-item-has-children:focus-within > ul.sub-menu {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header2 .menu-strip .container .search12.mss-nav-search {
        float: none !important;
        flex: 0 0 auto;
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        left: auto !important;
        width: 200px !important;
        min-width: 160px;
        max-width: 220px;
        height: 36px;
        padding: 0;
        position: relative;
        overflow: visible;
    }

    .header2 .menu-strip .search12.mss-nav-search form {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 36px;
        margin: 0;
        background: #1a1a1a;
        border: 1px solid #3a3a3a;
        box-sizing: border-box;
    }

    .header2 .menu-strip .search12.mss-nav-search input {
        position: static !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        margin: 0 !important;
        padding: 0 10px;
        background: transparent;
        color: #fff;
        border: none;
        border-radius: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-style: normal;
        line-height: 34px;
        outline: none;
        -webkit-appearance: none;
        transition: none;
    }

    .header2 .menu-strip .search12.mss-nav-search input::placeholder {
        color: #999;
    }

    .header2 .menu-strip .search12.mss-nav-search input:focus {
        background: #000;
        color: #fff;
    }

    .header2 .menu-strip .search12.mss-nav-search .srch_btn {
        position: static !important;
        flex: 0 0 36px;
        width: 36px !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid #3a3a3a;
        background: #1a1a1a !important;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .header2 .menu-strip .search12.mss-nav-search .srch_btn .fa {
        font-size: 14px;
        line-height: 1;
    }
}

@media (min-width: 1200px) {
    .header2 #menu > ul > li > a,
    .header2 #menu > ul > li > .mss-menu-item-row > a {
        padding: 22px 14px !important;
    }
}

/* Desktop: constrain the header (logo banner + nav strip) to the same
   1170px centered box used by the page content (.extra-gap .row-fluid) and
   footer (.footer_container / .bottom-footer-inner) so all three align. */
@media (min-width: 1200px) {
    header.header2 > .container.mss-header-top {
        width: auto !important;
        max-width: 1170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 14px !important;
        box-sizing: border-box;
    }

    header.header2 > .container.mss-header-top .header-social-icons {
        bottom: 78px;
        padding-bottom: 4px;
    }

    header.header2 > .container.mss-header-top .header-social-icons > ul {
        padding-bottom: 2px;
    }

    header.header2 > .container.mss-header-top .mss-header-phone a {
        font-size: 14px !important;
    }

    header.header2 > .container.mss-header-top .header-social-icons li a .fa {
        font-size: 18px !important;
        width: 28px !important;
        height: 28px !important;
    }

    .header2 .menu-strip {
        width: auto !important;
        max-width: 1170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Inner CMS pages span full width by default; box their content to the
       same 1170px centered layout as the home content, header and footer. */
    #inner-page .container.containerinner {
        width: auto !important;
        max-width: 1170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    /* Authorized reps: undo theme fixed widths/heights and floated lists. */
    .mycustomtestimonial,
    .vc_col-sm-4.mycustomtestimonial,
    .span4.mycustomtestimonial {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding-left: 0 !important;
    }

    .mycustomtestimonial .wpb_content_element ul,
    .mycustomtestimonial ul {
        float: none !important;
        background: transparent !important;
        width: 100% !important;
    }

    .mycustomtestimonial li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mycustomtestimonial li img.alignleft {
        float: none !important;
        margin: 0 !important;
        flex: 0 0 14px;
        width: 14px !important;
    }
}

@media (max-width: 1199px) {
    header.header2 > .container.mss-header-top {
        display: block;
        position: relative;
        padding: 6px 12px 8px;
        gap: 0;
    }

    header.header2 > .container.mss-header-top .logo {
        max-width: 100%;
    }

    header.header2 > .container.mss-header-top .logo img {
        width: 100% !important;
        height: auto !important;
        max-width: 1045px;
        object-fit: contain;
    }

    /* The old <select> responsive nav is replaced by the hamburger menu. */
    .ipadMenu {
        display: none !important;
    }

    /* Mobile nav bar: search on the left, orange hamburger on the right, and
       the full menu (with submenus) drops down below when toggled. The theme
       hides .menu-strip on mobile, so force it back. */
    .header2 .menu-strip {
        display: block !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .header2 .menu-strip .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        width: auto !important;
        max-width: none !important;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    .header2 .menu-strip .container .mss-menu-toggle {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .header2 .menu-strip .container .search12.mss-nav-search {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        height: auto !important;
        left: auto !important;
        float: none !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: normal !important;
    }

    .header2 .menu-strip .container .search12.mss-nav-search form {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: 40px;
        margin: 0;
        background: #1a1a1a;
        border: 1px solid #3a3a3a;
        box-sizing: border-box;
        overflow: hidden;
    }

    .header2 .menu-strip .search12.mss-nav-search input {
        position: static !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        margin: 0 !important;
        margin-left: 0 !important;
        right: auto !important;
        float: none !important;
        padding: 0 12px;
        background: transparent !important;
        color: #fff;
        border: none;
        border-radius: 0;
        font-size: 14px;
        font-style: normal;
        line-height: 38px;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        transition: none !important;
    }

    .header2 .menu-strip .search12.mss-nav-search input::placeholder {
        color: #999;
    }

    .header2 .menu-strip .search12.mss-nav-search input:focus {
        background: #000 !important;
        color: #fff;
        width: auto !important;
    }

    .header2 .menu-strip .search12.mss-nav-search .srch_btn {
        position: static !important;
        flex: 0 0 42px;
        width: 42px !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        top: auto !important;
        right: auto !important;
        border: none;
        border-left: 1px solid #3a3a3a;
        background: #1a1a1a !important;
        background-image: none !important;
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header2 .menu-strip .search12.mss-nav-search .srch_btn .fa {
        font-size: 15px;
        line-height: 1;
    }

    /* Collapsible menu panel (hidden until the hamburger is tapped). */
    .header2 .menu-strip .container #menu {
        order: 3;
        flex: 0 0 100%;
        display: none;
        width: 100% !important;
    }

    .header2 .menu-strip.is-open .container #menu {
        display: block;
    }

    .header2 #menu > ul.menu,
    .header2 #menu ul.sub-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
        background: none;
        box-shadow: none;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header2 #menu ul.menu li {
        display: flow-root !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        /* Theme paints .current-menu-item solid red; keep it as a text tint. */
        background: transparent !important;
    }

    .header2 #menu ul.menu li.current-menu-item > a,
    .header2 #menu ul.menu li.current-menu-item > .mss-menu-item-row > a,
    .header2 #menu ul.menu li.current-menu-ancestor > a,
    .header2 #menu ul.menu li.current-menu-ancestor > .mss-menu-item-row > a {
        color: #f66800 !important;
        background: rgba(246, 104, 0, 0.12) !important;
    }

    .header2 #menu ul.menu li a {
        display: block !important;
        float: none !important;
        width: auto !important;
        padding: 12px 14px !important;
        color: #fff !important;
        font-size: 15px;
        text-transform: uppercase;
        white-space: normal;
    }

    .header2 #menu ul.menu li a:hover {
        background: rgba(246, 104, 0, 0.15);
        color: #f66800 !important;
    }

    /* Parent row: link on the left, submenu toggle on the right. */
    .header2 #menu .mss-menu-item-row {
        display: flex;
        align-items: stretch;
        width: 100%;
    }

    .header2 #menu .mss-menu-item-row > a {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header2 #menu .mss-submenu-toggle {
        flex: 0 0 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(246, 104, 0, 0.18);
        color: #f66800;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .header2 #menu .mss-submenu-toggle .fa {
        font-size: 14px;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .header2 #menu .mss-submenu-toggle:hover,
    .header2 #menu .mss-submenu-toggle:focus-visible {
        background: rgba(246, 104, 0, 0.32);
        color: #fff;
        outline: none;
    }

    .header2 #menu .menu-item-has-children.is-submenu-open > .mss-menu-item-row .mss-submenu-toggle .fa {
        transform: rotate(180deg);
    }

    /* Submenus stay collapsed until their toggle is tapped. */
    .header2 #menu .menu-item-has-children:not(.is-submenu-open) > .sub-menu {
        display: none !important;
    }

    .header2 #menu .menu-item-has-children.is-submenu-open > .sub-menu {
        display: block !important;
        float: none !important;
        left: auto !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        clear: both;
    }

    .header2 #menu ul.sub-menu > li {
        float: none !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
    }

    /* Submenu items: indented under their parent. */
    .header2 #menu ul.sub-menu {
        background: rgba(0, 0, 0, 0.25);
        border-top: none !important;
    }

    .header2 #menu ul.sub-menu li a {
        padding-left: 32px !important;
        font-size: 14px;
        color: #d8d8d8 !important;
        text-transform: none;
    }

    .header2 #menu ul.sub-menu .mss-menu-item-row > a {
        padding-left: 32px !important;
    }

    .top-service-box li {
        width: 50%;
        box-sizing: border-box;
    }

    .showcase-right .top-service-box {
        display: flex;
        flex-wrap: wrap;
    }

    .mycustomaffiliation,
    .vc_col-sm-12.mycustomaffiliation,
    .span12.mycustomaffiliation {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
    }

    .mycustomaffiliation > .wpb_text_column {
        float: none !important;
        width: 100% !important;
    }

    .partnerslogo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 14px 16px;
        width: 100%;
    }

    .partnerslogo a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 calc(25% - 12px);
        max-width: calc(25% - 12px);
        min-height: 68px;
        margin: 0 !important;
        padding: 8px 6px;
        box-sizing: border-box;
    }

    .partnerslogo img {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 56px !important;
        height: auto !important;
        margin: 0 !important;
        margin-left: 0 !important;
        object-fit: contain;
    }

    .partnerslogo a:hover img {
        transform: none;
    }

    .footer_container .widget {
        width: 50% !important;
        float: left;
        box-sizing: border-box;
        padding: 15px !important;
    }

    .containerinner,
    .containerinnerpage {
        padding-left: 15px;
        padding-right: 15px;
    }

    .span4,
    .span8 {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    .map_location iframe {
        width: 100% !important;
        min-height: 200px;
    }
}

/* iPad / tablet: phone + social sit in the white space above the logo tagline bar. */
@media (min-width: 768px) and (max-width: 1199px) {
    header.header2 > .container.mss-header-top .header-social-icons {
        top: auto !important;
        bottom: 60px !important;
        right: 15px !important;
        left: auto !important;
    }

    header.header2 > .container.mss-header-top .mss-header-phone a {
        font-size: 13px !important;
    }

    header.header2 > .container.mss-header-top .header-social-icons li a .fa {
        font-size: 16px !important;
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 767px) {
    /* Phone + social sit in the white space above the logo tagline bar. */
    header.header2 > .container.mss-header-top .header-social-icons {
        position: absolute !important;
        top: auto !important;
        bottom: 18px !important;
        right: 8px;
        left: auto !important;
        width: auto;
        z-index: 2;
    }

    header.header2 > .container.mss-header-top .header-social-icons > ul {
        justify-content: flex-end;
        gap: 4px;
        margin: 0 !important;
        margin-top: 0 !important;
    }

    header.header2 > .container.mss-header-top .header-social-icons li {
        float: none !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
    }

    header.header2 > .container.mss-header-top .header-social-icons li:not(.mss-header-phone) {
        width: auto !important;
        height: auto !important;
        min-width: 24px;
        min-height: 24px;
        padding: 2px;
        border-right: 1px solid #e5e5e5 !important;
    }

    header.header2 > .container.mss-header-top .mss-header-phone {
        padding-right: 8px !important;
        margin-right: 4px !important;
    }

    header.header2 > .container.mss-header-top .mss-header-phone a {
        font-size: 11px !important;
    }

    header.header2 > .container.mss-header-top .header-social-icons li a .fa {
        width: 22px !important;
        height: 22px !important;
        font-size: 14px !important;
    }

    .partnerslogo a {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
        min-height: 72px;
    }

    .partnerslogo img {
        max-height: 52px !important;
    }

    .top-service-box li {
        width: 100%;
    }

    .staff {
        margin-bottom: 20px;
    }

    #slider4 .overview li {
        display: block;
        width: 100%;
    }

    .footer_container .widget {
        width: 100% !important;
        float: none !important;
        padding-left: 15px !important;
    }

    .bottom-footer .container {
        text-align: center;
    }

    .footer-social-icons {
        float: none;
        margin-top: 10px;
    }

    .footer-social-icons ul {
        display: inline-block;
    }

    .main-title h1 {
        font-size: 24px;
        word-wrap: break-word;
    }

    .wpb_text_column img.alignright,
    .wpb_text_column img.alignleft {
        float: none !important;
        display: block;
        margin: 0 auto 15px;
        max-width: 100%;
        height: auto;
    }

    .clients img {
        max-width: 80px;
        height: auto;
    }

    .donate .container {
        flex-wrap: wrap;
    }

    .theme-layout {
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    header.header2 > .container.mss-header-top .mss-header-phone a {
        font-size: 10px !important;
    }

    header.header2 > .container.mss-header-top .header-social-icons li a .fa {
        font-size: 13px !important;
        width: 20px !important;
        height: 20px !important;
    }

    .th-read-more {
        display: inline-block;
        margin: 10px 0 !important;
    }

    .col-title h2,
    .sidebox-head h2 {
        font-size: 20px;
    }

    .vc_tta-tabs-list {
        display: flex;
        flex-wrap: wrap;
    }

    .vc_tta-tab {
        width: 100%;
    }
}

/* Ensure mobile menu select is hidden on desktop */
@media (min-width: 1200px) {
    .ipadMenu {
        display: none !important;
    }

    #menu {
        display: block;
    }
}

/* Link Map (sitemap) page */
.link-map {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 10px 0 20px;
}

.link-map .link-map-group {
    flex: 1 1 220px;
    min-width: 200px;
}

.link-map .link-map-group h3 {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f66800;
    color: #333;
    font-size: 18px;
}

.link-map .link-map-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-map .link-map-group li {
    margin: 0 0 8px;
}

.link-map .link-map-group li a {
    color: #444;
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-map .link-map-group li a:hover {
    color: #f66800;
}

@media (max-width: 1199px) {
    .link-map {
        flex-direction: column;
        gap: 20px;
        padding-top: 5px;
    }

    .link-map .link-map-group {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }
}

/* =====================================================================
   Mobile / tablet hardening.
   The bundled theme responsive.css uses fixed pixel widths (Bootstrap-2
   style) that overflow on real devices; these fluid overrides load last
   and win. Desktop (>= 1200px) layout is left untouched.
   ===================================================================== */

/* Media can never overflow its container. */
img,
iframe,
video,
embed,
object {
    max-width: 100%;
}

img {
    height: auto;
}

@media (max-width: 1199px) {
    /* Theme uses position:absolute + fixed padding-top on #inner-page for the
       transparent header. That padding is too small for the MSS header on
       phones/tablets (content tucks under the search bar). Match the home page:
       keep the header in normal document flow below ≤1199px. */
    header.header2.transparent {
        position: relative !important;
    }

    #inner-page {
        padding-top: 15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        float: none !important;
    }

    /* Consistent mobile side gutters across header, content, and footer. */
    section.extra-gap {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    .container.footer_container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .bottom-footer-inner,
    .bottom-footer > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    /* The theme sets html/body { height: 100% }. Forcing overflow-x here would
       flip overflow-y to auto and clip the whole page to one screen, so keep
       height auto and move horizontal-overflow clipping to the layout wrapper. */
    html,
    body {
        height: auto !important;
        min-height: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .theme-layout {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* The theme uses content-box with fixed widths; once we force fluid widths,
       padding would push block elements past the viewport. Border-box on the
       content and footer areas keeps padding inside the declared width. */
    .wpb_wrapper,
    .wpb_wrapper *:not(img):not(iframe),
    #inner-page,
    #inner-page *:not(img):not(iframe),
    footer,
    footer *:not(img):not(iframe),
    .bottom-footer,
    .bottom-footer *:not(img):not(iframe) {
        box-sizing: border-box;
    }

    /* Fluid containers everywhere (override the theme's fixed px widths). */
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container,
    header.header2 .container,
    .bottom-footer-inner,
    .bottom-footer .container,
    #inner-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* Inner page content padding. */
    .containerinner,
    .containerinnerpage {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    /* Stack every grid column. */
    [class*="span"],
    .row-fluid [class*="span"],
    .vc_col-sm-1,
    .vc_col-sm-2,
    .vc_col-sm-3,
    .vc_col-sm-4,
    .vc_col-sm-5,
    .vc_col-sm-6,
    .vc_col-sm-7,
    .vc_col-sm-8,
    .vc_col-sm-9,
    .vc_col-sm-10,
    .vc_col-sm-11,
    .vc_col-sm-12 {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* Footer: full width and stacked columns (theme forces flex + fixed px). */
    /* #inner-page is floated; the footer must clear it or it overlaps the
       content and header (the theme relied on .footer_container's overflow BFC
       which we override for stacking). */
    footer,
    .bottom-footer {
        clear: both !important;
    }

    footer {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }

    .container.footer_container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .footer_container > .widget {
        display: flow-root;
        width: 100% !important;
        float: none !important;
        margin: 24px 0 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    .footer_container > .widget:first-child {
        margin-top: 10px !important;
    }

    /* Nested widgets (menu / text) inside the column wrappers. */
    .footer_container > .widget .widget {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    .footer_container .textwidget,
    .footer_container .menu-main-menu-container,
    .footer_container .menu-locations-container {
        width: 100% !important;
    }

    /* Location map embed. */
    .footer_container .textwidget iframe {
        width: 100% !important;
        min-height: 200px;
    }

    /* Bottom copyright bar. */
    .bottom-footer .container > p {
        margin-left: 0 !important;
        word-wrap: break-word;
    }

    /* Logo scales with the viewport. */
    header.header2 .logo img,
    .logo img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Contact page: drop the large desktop left offset. */
    .span4.contactspan,
    .contactspan {
        margin-left: 0 !important;
    }

    /* Contact page: .containerinnerpage is a direct child of .containerinner
       (no section wrapper). Theme margin collapses and the card tucks under the
       in-flow header on phones/tablets. */
    #inner-page .container.containerinner > .container.containerinnerpage {
        margin-top: 135px !important;
        padding: 20px 15px 28px !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        background-color: #fff;
    }

    #inner-page .container.containerinner > .container.containerinnerpage > h4,
    #inner-page .container.containerinner > .container.containerinnerpage > p {
        padding: 0 !important;
    }

    #inner-page .container.containerinner > .container.containerinnerpage .contactspan,
    #inner-page .container.containerinner > .container.containerinnerpage .contactbullet {
        padding: 0 !important;
    }

    /* Contact page: outer gutters come from #inner-page; keep wrapper flush so
       the white card spans the content column. */
    #inner-page > .container.containerinner:has(> .container.containerinnerpage) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    /* Content images with legacy float alignment. */
    .wpb_text_column img.alignright,
    .wpb_text_column img.alignleft {
        float: none !important;
        display: block;
        margin: 0 auto 15px;
        max-width: 100%;
        height: auto;
    }

    /* Embedded videos scale to the content column. */
    #inner-page .wpb_wrapper iframe {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: auto;
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }

    /* Content images/tables never overflow. */
    .wpb_wrapper img,
    .textwidget img,
    .single-post-desc img {
        max-width: 100% !important;
        height: auto !important;
    }

    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Tablet: show footer columns two-up for better use of space. */
@media (min-width: 600px) and (max-width: 1199px) {
    .footer_container > .widget {
        display: inline-block;
        width: 48% !important;
        vertical-align: top;
        margin: 24px 1% 0 !important;
    }
}

/* Location / state / search pages: sidebar+content cards and staff grids.
   Theme locks .containerinnerpageleft to height:416px and the content card
   to min-height:416px. On tablets/phones those columns stack, so the fixed
   sidebar height leaves a dead white gap and the content card box stays 416px
   tall while staff lists spill thousands of px below it. */
@media (max-width: 1199px) {
    .containerinnerpageleft,
    .vc_col-sm-3.containerinnerpageleft,
    .span3.containerinnerpageleft {
        display: flow-root !important;
        width: 100% !important;
        float: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 16px !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    .containerinnerpageright,
    .vc_col-sm-9.containerinnerpageright,
    .span9.containerinnerpageright {
        display: flow-root !important;
        width: 100% !important;
        float: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    .containerinnerpageright > .wpb_text_column,
    .containerinnerpageright .wpb_wrapper {
        float: none !important;
        width: 100% !important;
        display: flow-root;
    }

    .containerinnerpageleft .menu-left-menu-container,
    .containerinnerpageleft .menu-left-menu-container ul,
    .containerinnerpageleft .menu_left {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    .containerinnerpageleft .menu-left-menu-container ul li,
    .containerinnerpageleft .menu_left li {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    .containerinnerpageleft .menu-left-menu-container ul li a {
        display: block;
        width: auto !important;
        padding-left: 0;
    }

    .containerinnerpageright .span4,
    .containerinnerpageright .span8 {
        width: 100% !important;
        float: none !important;
        margin: 0 0 12px !important;
    }

    .containerinnerpageright .location-map-column--empty {
        display: none !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .containerinnerpageright .map_location,
    .containerinnerpageright .map_location iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    .containerinnerpageright img,
    .containerinnerpageright .wp-image-1734,
    .containerinnerpageright .alignright {
        float: none !important;
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px 0 !important;
    }

    .locatoindet,
    .category-desc {
        max-width: 100%;
        overflow: visible;
        display: flow-root;
    }

    .locatoindet > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        background: transparent !important;
        float: none !important;
    }

    .locatoindet > li,
    .locatoindet li,
    .category-desc a,
    .category-desc span {
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .main-title.sec {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
}

@media (min-width: 600px) and (max-width: 1199px) {
    .locatoindet > li,
    .locatoindet li {
        float: none !important;
        flex: 0 0 50%;
        width: 50% !important;
        max-width: 50%;
        padding: 4px 8px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 599px) {
    .locatoindet > li,
    .locatoindet li {
        float: none !important;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100%;
        padding: 2px 5px !important;
    }
}

/* Home first section (welcome + services): the theme floats the inner
   .wpb_text_column left and gives .myserviceblock a fixed 459px min-height.
   When we stack the columns those floats are no longer contained, so the
   welcome image column collapses to 1px and overlaps the services block,
   leaving a large white gap. Establish a BFC on the columns, drop the fixed
   height, and un-float the inner text column so everything flows normally. */
@media (max-width: 1199px) {
    .myfirstrow,
    .myserviceblock {
        display: flow-root;
        width: 100% !important;
        min-height: 0 !important;
        float: none !important;
        margin: 0 0 20px !important;
    }

    .myfirstrow > .wpb_text_column,
    .myserviceblock > .wpb_text_column {
        float: none !important;
        width: 100% !important;
    }

    /* Welcome image: let it be a normal full-width block, not floated. */
    .myfirstrow .wpb_wrapper img {
        float: none !important;
        display: block;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 12px !important;
    }
}

/* Home "Our Services" carousel: the slider JS assigns fixed widths and the
   theme overlays .staff_cover with a large negative margin inside a clipped
   viewport. On small screens, disable the carousel layout and stack the cards. */
@media (max-width: 1199px) {
    #slider4 {
        float: none !important;
        width: 100% !important;
    }

    #slider4 .buttons {
        display: none !important;
    }

    #slider4,
    #slider4 .viewport,
    #slider4 .overview,
    #slider4 .overview > li {
        display: block;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        left: 0 !important;
        float: none !important;
        overflow: visible !important;
    }

    #slider4 .viewport {
        position: relative !important;
    }

    #slider4 .overview {
        position: static !important;
        top: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #slider4 .overview > li {
        white-space: normal;
        padding: 0 !important;
        margin: 0 !important;
    }

    #slider4 .staff {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
        box-sizing: border-box;
        clear: both;
    }

    #slider4 .staff .blog-list-img {
        width: 100% !important;
        margin: 0 !important;
        line-height: 0;
    }

    #slider4 .blog-list-img img,
    #slider4 .staff .blog-list-img img {
        display: block;
        width: 100% !important;
        height: 280px !important;
        max-height: none !important;
        object-fit: cover;
        object-position: center center;
    }

    /* Match desktop: white content panel overlaid on the lower part of the image. */
    #slider4 .staff_cover {
        position: absolute !important;
        left: 15px !important;
        right: 15px !important;
        bottom: 15px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 12px 10px !important;
        background: #fff !important;
        z-index: 2;
        box-sizing: border-box;
    }

    #slider4 .staff-intro {
        display: block;
        width: 100%;
        margin: 0 0 6px;
        padding: 0;
    }

    #slider4 .staff-intro > h3 {
        float: none;
        margin-top: 0;
        line-height: 1.2;
    }

    #slider4 .staff_cover > p {
        margin: 0;
        line-height: 1.35;
        font-size: 11.5px;
    }

    #slider4 .staff_cover .th-read-more.link1,
    #slider4 .staff_cover .th-read-more.link2,
    #slider4 .staff_cover .th-read-more.link3 {
        margin-top: 10px !important;
    }

}

/* Keep a clear gap between the inner-page content and the footer so they don't
   appear merged (especially on short pages where the content bottom would
   otherwise sit flush against the footer). */
#inner-page {
    padding-bottom: 45px;
}

/* Services page (and any page using the .containerinnerpage "paper" box):
   the box has a fixed 1151px width that overflows the 1170 content box, and
   the .span31 service columns are forced to 100% by the fluid grid. Make the
   paper box fluid and lay the categories out as responsive columns. */
#inner-page .containerinnerpage,
#inner-page .container.containerinnerpage {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    #inner-page .container.containerinner > .container.containerinnerpage {
        padding: 24px 28px 32px !important;
    }
}

#inner-page .mssserv {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px 20px;
}

#inner-page .containerinnerpage > img.alignright {
    float: right;
    margin: 0 0 16px 24px;
    max-width: 335px;
    width: 42%;
    height: auto;
}

#inner-page .mssserv .span31 {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    float: none !important;
}

/* The theme styles every content list as a floated full-width grey panel;
   inside the grid cells they should just fill the column. */
#inner-page .mssserv .span31 ul {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 0 !important;
    padding-left: 22px !important;
    box-sizing: border-box;
}

#inner-page .mssserv .span31 li {
    margin-left: 4px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#inner-page .mssserv .span31 h5 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#inner-page .containerinnerpage:has(.mssserv) {
    display: block !important;
}

#inner-page .containerinnerpage:has(.mssserv) > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

#inner-page .containerinnerpage:has(.mssserv) .span11 {
    width: 100% !important;
    float: none !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

#inner-page .containerinnerpage:has(.mssserv) .span11 img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

@media (max-width: 1199px) {
    #inner-page section:has(.mssserv) .row-fluid,
    #inner-page section:has(.mssserv) .vc_col-sm-12,
    #inner-page .wpb_text_column:has(.mssserv),
    #inner-page .wpb_wrapper:has(.mssserv) {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #inner-page .containerinnerpage:has(.mssserv) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Services: 1 column on phones, 2 on tablet/iPad, 4 on desktop. */
@media (max-width: 767px) {
    #inner-page .mssserv {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #inner-page .wpb_wrapper .containerinnerpage:has(.mssserv),
    #inner-page .containerinnerpage:has(.mssserv) {
        padding: 20px 18px 28px !important;
        box-sizing: border-box;
    }

    #inner-page .containerinnerpage:has(.mssserv) > h4,
    #inner-page .containerinnerpage:has(.mssserv) > p {
        padding: 0 !important;
    }

    #inner-page .containerinnerpage:has(.mssserv) > img.alignright {
        float: none !important;
        display: block;
        margin: 0 auto 16px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    #inner-page .mssserv .span31 ul {
        padding: 12px 14px 12px 28px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #inner-page .mssserv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
    }

    #inner-page .wpb_wrapper .containerinnerpage:has(.mssserv),
    #inner-page .containerinnerpage:has(.mssserv) {
        padding: 24px 20px 32px !important;
        box-sizing: border-box;
    }
}

@media (min-width: 1200px) {
    #inner-page .mssserv {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    #inner-page .mssserv {
        grid-template-columns: 1fr;
    }
}

/* Products page (and similar): each category is an <h5> followed by a
   full-width floated grey <ul>. The theme floats every content list
   (float:left) but never clears the headings, so the headings collapse to the
   top and the lists stack separately. Take the lists out of the float so each
   heading sits directly above its list, and flow the items into responsive
   columns to use the wide panel. */
#inner-page .wpb_wrapper > ul,
#inner-page .category-desc > ul {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 20px !important;
    padding: 12px 18px !important;
    columns: 230px;
    column-gap: 30px;
}

#inner-page .wpb_wrapper > ul > li,
#inner-page .category-desc > ul > li {
    break-inside: avoid;
    margin-left: 18px !important;
}

#inner-page .wpb_wrapper > h5,
#inner-page .category-desc > h5 {
    clear: both;
}

#inner-page .category-desc {
    margin-top: 24px;
    clear: both;
}

@media (min-width: 1200px) {
    .containerinnerpageright .location-map-column {
        min-height: 150px;
    }

    .containerinnerpageright .location-map-column--empty {
        background: transparent;
    }
}

#inner-page .wpb_wrapper .alignright,
#inner-page .wpb_wrapper img.alignright {
    float: right;
    margin: 0 0 16px 24px;
    max-width: 438px;
    width: 42%;
    height: auto;
}

#inner-page .wpb_wrapper img.aligncenter,
#inner-page .wpb_wrapper .aligncenter {
    display: block;
    clear: both;
    margin: 24px auto 0;
    max-width: 100%;
    width: auto;
    height: auto;
}

#inner-page .products-page-columns .wpb_wrapper > ul {
    columns: auto;
    column-gap: normal;
}

#inner-page .products-page-columns .wpb_wrapper > h5 {
    background: #ececec;
    margin: 0 0 0;
    padding: 8px 12px;
    clear: both;
}

#inner-page .products-page-columns .wpb_wrapper > ul {
    margin-top: 0 !important;
}

/* About / History page: two-column layout — year timeline on the left and the
   trailer photo on the right. Collapses to a single stacked column on tablets
   and phones. */
#inner-page .history-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
}

#inner-page .history-layout .history-years {
    flex: 1 1 320px;
    min-width: 0;
}

#inner-page .history-layout .history-media {
    flex: 0 0 300px;
    max-width: 300px;
}

#inner-page .history-layout .history-media img {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 4px;
}

@media (max-width: 767px) {
    #inner-page .history-layout {
        flex-direction: column;
    }

    #inner-page .history-layout .history-media {
        flex-basis: auto;
        max-width: 100%;
        align-self: center;
    }

    #inner-page .history-layout .history-media img {
        max-width: 300px;
        margin: 0 auto;
    }
}

/* =========================================================================
   Contact page
   The scraped markup lays the contact form and phone list out with the old
   theme .span grid (fixed widths + a 120px left offset), and the form fields
   inherit the theme's dark input styling. Rebuild it as a clean, modern,
   responsive two-column card.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
    #inner-page .container.containerinner > .container.containerinnerpage {
        margin-top: 210px !important;
        padding: 24px 20px 32px !important;
    }
}

/* Two columns on desktop: form (fluid) on the left, phone numbers on the
   right. Headings/intro span the full width. */
@media (min-width: 768px) {
    #inner-page .containerinnerpage:has(.contactspan) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 44px;
        align-items: start;
    }

    #inner-page .containerinnerpage:has(.contactspan) > h4,
    #inner-page .containerinnerpage:has(.contactspan) > p {
        grid-column: 1 / -1;
    }

    #inner-page .containerinnerpage:has(.contactspan) .contactspan {
        grid-column: 1;
    }

    #inner-page .containerinnerpage:has(.contactspan) .span2 {
        display: none;
    }

    #inner-page .containerinnerpage:has(.contactspan) .contactbullet {
        grid-column: 2;
    }
}

#inner-page .contactspan,
#inner-page .contactbullet {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
    box-sizing: border-box;
}

#inner-page .containerinnerpage > h4 {
    font-size: 26px;
    margin: 0 0 6px;
}

/* Column headings with an accent underline. */
#inner-page .contactspan > h5,
#inner-page .contactbullet > h5 {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f66800;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #333;
}

/* Field spacing (the Bootstrap grid CSS is not loaded on this theme, so the
   row/col classes carry no gaps of their own). */
#inner-page .contact-form .reserve-form-inner .row.g-3 {
    margin: 0;
}

#inner-page .contact-form .row.g-3 > .field {
    margin-bottom: 16px;
    padding: 0;
}

/* Modern inputs — override the theme's dark, thick-bordered controls. */
#inner-page .contact-form .reserve-input,
#inner-page .contact-form input.reserve-input,
#inner-page .contact-form textarea.reserve-input {
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
    background: #fff !important;
    color: #333 !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    height: auto !important;
    min-height: 46px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#inner-page .contact-form textarea.reserve-input {
    min-height: 140px;
    resize: vertical;
}

#inner-page .contact-form .reserve-input:focus {
    outline: none;
    border-color: #f66800 !important;
    box-shadow: 0 0 0 3px rgba(246, 104, 0, 0.15) !important;
}

#inner-page .contact-form .reserve-input::placeholder {
    color: #9a9a9a;
}

#inner-page .contact-form .invalid-feedback {
    margin: 4px 0 0;
    font-size: 13px;
    color: #d64541;
}

/* Actions row: submit button only. */
#inner-page .contact-form .contact-actions-row {
    display: block;
    clear: both;
    margin-top: 8px;
}

#inner-page .contact-form .contact-actions-row > .col-12 {
    padding: 0;
}

#inner-page .contact-form .contact-submit-wrap {
    text-align: left;
}

/* Submit button. */
#inner-page .contact-form .contact-submit-btn,
#inner-page .contact-form button.contact-submit-btn {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    background: #f66800 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 13px 30px !important;
    font-size: 15px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(246, 104, 0, 0.25);
    transition: background 0.15s ease, transform 0.05s ease;
}

#inner-page .contact-form .contact-submit-btn:hover {
    background: #d95a00 !important;
}

#inner-page .contact-form .contact-submit-btn:active {
    transform: translateY(1px);
}

/* Contact numbers list. */
#inner-page .contactbullet ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#inner-page .contactbullet li {
    margin: 0;
    padding: 11px 2px;
    border-bottom: 1px solid #ececec;
    font-size: 15px;
    color: #444;
}

#inner-page .contactbullet li:last-child {
    border-bottom: none;
}

@media (max-width: 767px) {
    #inner-page .contact-form .contact-actions-row > .col-md-5 {
        margin-left: 0;
        width: 100%;
    }

    #inner-page .contact-form .contact-submit-btn,
    #inner-page .contact-form button.contact-submit-btn {
        width: 100% !important;
        text-align: center;
    }
}

/* Site search results */
#inner-page .mss-site-search {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

#inner-page .mss-site-search > h4 {
    margin: 0 0 8px;
    line-height: 1.25;
}

#inner-page .mss-site-search > p {
    margin: 0 0 12px;
    color: #555;
    line-height: 1.45;
}

#inner-page .mss-search-results {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

#inner-page .mss-search-result {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e6e6e6;
}

#inner-page .mss-search-result:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#inner-page .mss-search-result-title {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.35;
}

#inner-page .mss-search-result-title a {
    color: #f66800;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
}

#inner-page .mss-search-result-title a:hover {
    text-decoration: underline;
}

#inner-page .mss-search-result-excerpt {
    margin: 0;
    color: #666;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 767px) {
    #inner-page .mss-site-search > h4 {
        font-size: 22px;
    }

    #inner-page .mss-search-result-title {
        font-size: 17px;
    }

    #inner-page .mss-search-result-excerpt {
        font-size: 14px;
    }
}

/* Contact detail pages (/contacts/{slug}) */
#inner-page.contact-detail-page {
    padding-bottom: 40px;
}

#inner-page.contact-detail-page .main-title.sec {
    display: inline-block;
    width: 100%;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px dotted #CECDCD;
    box-sizing: border-box;
}

#inner-page.contact-detail-page .main-title.sec h1 {
    float: none;
    color: #484848;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

#inner-page.contact-detail-page .contact-detail-meta-wrap {
    float: none;
    margin-bottom: 30px;
    width: 100%;
}

#inner-page.contact-detail-page .contact-detail-meta-wrap::after {
    clear: both;
    content: "";
    display: table;
}

#inner-page.contact-detail-page .slider-area {
    z-index: 1;
    margin-top: 0;
    margin-bottom: 20px;
    overflow: visible;
}

#inner-page.contact-detail-page .contact-detail-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e2e2e2;
    box-sizing: border-box;
}

#inner-page.contact-detail-page .contact-detail-meta {
    float: none;
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: none;
    width: 100%;
}

#inner-page.contact-detail-page .contact-detail-meta li {
    display: flex;
    flex-wrap: wrap;
    float: none;
    gap: 8px 16px;
    line-height: 1.4;
    margin-bottom: 18px;
    text-transform: none;
    width: 100%;
}

#inner-page.contact-detail-page .contact-detail-meta li > span {
    color: #656565;
    flex: 0 0 140px;
    float: none;
    font-weight: 600;
    text-transform: uppercase;
    width: auto;
}

#inner-page.contact-detail-page .contact-detail-meta li > i {
    color: #505050;
    flex: 1 1 180px;
    float: none;
    font-style: normal;
    font-weight: 400;
    min-width: 0;
    text-transform: none;
    width: auto;
    word-break: break-word;
}

#inner-page.contact-detail-page .contact-detail-meta li > i a,
#inner-page.contact-detail-page .contact-detail-meta li > i a:link,
#inner-page.contact-detail-page .contact-detail-meta li > i a:visited {
    background: transparent !important;
    border-radius: 0 !important;
    color: #f66800 !important;
    float: none !important;
    font-size: inherit !important;
    height: auto !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    width: auto !important;
    word-break: break-word;
    display: inline !important;
}

#inner-page.contact-detail-page .contact-detail-meta li > i a:hover,
#inner-page.contact-detail-page .contact-detail-meta li > i a:focus {
    color: #d45500 !important;
    text-decoration: underline;
}

#inner-page.contact-detail-page--no-photo .contact-detail-meta {
    max-width: 640px;
}

#inner-page.contact-detail-page .single-post-desc {
    clear: both;
    padding: 10px 0 20px;
}

#inner-page.contact-detail-page .single-post-desc p.contact-detail-back-link {
    margin-top: 20px;
    margin-bottom: 0;
    text-align: left;
}

#inner-page.contact-detail-page .single-post-desc p {
    color: #444;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 16px;
    text-align: justify;
}

#inner-page.contact-detail-page .single-post-desc a {
    color: #f66800;
}

#inner-page.contact-detail-page .single-post-desc .th-read-more.link3 {
    margin-top: 20px;
}

@media (min-width: 768px) {
    #inner-page.contact-detail-page .contact-detail-meta-wrap .row {
        display: block;
    }

    #inner-page.contact-detail-page .slider-area.span8 {
        width: 66.12%;
        float: left;
    }

    #inner-page.contact-detail-page .contact-detail-meta-wrap .span4 {
        width: 31.62%;
        float: right;
        margin-left: 2.26%;
    }
}

@media (max-width: 767px) {
    #inner-page.contact-detail-page .main-title.sec {
        padding-left: 0;
        padding-right: 0;
    }

    #inner-page.contact-detail-page .main-title.sec h1 {
        font-size: 22px;
    }

    #inner-page.contact-detail-page .contact-detail-meta-wrap .span4 {
        margin-top: 20px;
    }

    #inner-page.contact-detail-page .contact-detail-meta li {
        flex-direction: column;
        gap: 4px;
    }

    #inner-page.contact-detail-page .contact-detail-meta li > span,
    #inner-page.contact-detail-page .contact-detail-meta li > i {
        flex: none;
        width: 100%;
    }
}

/* Location pages: improved readability and expandable content images. */
#inner-page .mss-location-page .containerinnerpageright,
#inner-page .mss-location-page .mss-location-page-copy {
    letter-spacing: 0.02em;
}

#inner-page .mss-location-page .containerinnerpageright p,
#inner-page .mss-location-page .mss-location-page-copy p,
#inner-page .mss-location-page .containerinnerpageright span,
#inner-page .mss-location-page .mss-location-page-copy span,
#inner-page .mss-location-page .category-desc,
#inner-page .mss-location-page .locatoindet li {
    line-height: 1.75;
    letter-spacing: 0.02em;
}

#inner-page .mss-location-page .location-details-column p {
    line-height: 1.65;
    margin-bottom: 0.65rem;
}

#inner-page .mss-location-page .category-desc h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#inner-page img.mss-expandable-image-trigger,
.home .myfirstrow img.mss-expandable-image-trigger,
.home .mycustomtab .vc_tta-panel-body img.mss-expandable-image-trigger {
    cursor: zoom-in;
}

.mss-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(17, 17, 17, 0.88);
}

.mss-image-lightbox.is-open {
    display: flex;
}

.mss-image-lightbox-dialog {
    position: relative;
    max-width: min(1100px, 96vw);
    max-height: 92vh;
}

.mss-image-lightbox-dialog img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.mss-image-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* State pages: breathing room after the section heading. */
#inner-page .mss-state-page .mss-state-page-heading {
    margin: 0 0 1.35rem;
    padding-bottom: 0.35rem;
}

#inner-page .mss-state-page .mss-state-page-heading + p {
    margin-top: 0;
    line-height: 1.75;
    letter-spacing: 0.02em;
}

/* Inner pages: readability, heading spacing, expandable images. */
#inner-page .main-title.sec {
    margin-bottom: 1.25rem;
}

#inner-page .wpb_wrapper,
#inner-page .containerinnerpage,
#inner-page .containerinnerpageright,
#inner-page .link-map,
#inner-page .contact-detail-meta-wrap {
    letter-spacing: 0.02em;
}

#inner-page .wpb_wrapper p,
#inner-page .wpb_wrapper li,
#inner-page .wpb_wrapper span,
#inner-page .wpb_wrapper td,
#inner-page .containerinnerpage p,
#inner-page .containerinnerpage li,
#inner-page .containerinnerpageright p,
#inner-page .containerinnerpageright li,
#inner-page .contact-detail-meta-wrap p,
#inner-page .contact-detail-meta-wrap li,
#inner-page .msdsdiv li,
#inner-page .category-desc li {
    line-height: 1.75;
    letter-spacing: 0.02em;
}

#inner-page .wpb_wrapper h2,
#inner-page .wpb_wrapper h3,
#inner-page .wpb_wrapper h4,
#inner-page .wpb_wrapper h5,
#inner-page .containerinnerpage h4,
#inner-page .containerinnerpage h5,
#inner-page .link-map-group h3,
#inner-page .msdsdiv h5,
#inner-page .history-layout h4 {
    margin: 0 0 1.35rem;
    padding-bottom: 0.35rem;
}

#inner-page .wpb_wrapper h2 + p,
#inner-page .wpb_wrapper h3 + p,
#inner-page .wpb_wrapper h4 + p,
#inner-page .wpb_wrapper h5 + p,
#inner-page .link-map-group h3 + ul {
    margin-top: 0;
}

#inner-page .wpb_wrapper > p,
#inner-page .containerinnerpage > p,
#inner-page .containerinnerpageright > p {
    margin-bottom: 0.85em;
}

/* Footer location map iframe size. */
.footer_container #text-6 .footer-map-embed iframe {
    display: block;
    width: 267px !important;
    max-width: 267px !important;
    height: 150px !important;
    border: 0;
}