/* ZDAC site styles — restored stylesheet.
   Targets the ideahub/eltdf-* class names used in home.html.
   Color palette based on existing inline hints (#003960 corporate blue). */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: "Nunito", "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #003960; text-decoration: none; transition: color .2s; }
a:hover { color: #e3a414; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: "Poppins", "Nunito", sans-serif; font-weight: 600; line-height: 1.25; color: #1b1b1b; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }

/* ---------- Layout ---------- */
/* Kill paspartu frame — inline page-level styles add 15px padding + border-radius
   on 4 of 7 pages, creating visual inconsistency. Reference design is edge-to-edge.
   Target ONLY the outer page-level wrapper via direct child selector — must not
   affect nested .eltdf-wrapper-inner usages elsewhere in the DOM. */
body > .eltdf-wrapper { padding: 0 !important; margin: 0 !important; background: #fff !important; }
body > .eltdf-wrapper > .eltdf-wrapper-inner { border-radius: 0 !important; }
.eltdf-paspartu-enabled .eltdf-page-header .eltdf-fixed-wrapper.fixed,
.eltdf-paspartu-enabled .eltdf-sticky-header,
.eltdf-paspartu-enabled .eltdf-mobile-header.mobile-header-appear .eltdf-mobile-header-inner { left: 0 !important; width: 100% !important; }
.eltdf-paspartu-enabled.eltdf-fixed-paspartu-enabled .eltdf-page-header .eltdf-fixed-wrapper.fixed,
.eltdf-paspartu-enabled.eltdf-fixed-paspartu-enabled .eltdf-sticky-header.header-appear,
.eltdf-paspartu-enabled.eltdf-fixed-paspartu-enabled .eltdf-mobile-header.mobile-header-appear .eltdf-mobile-header-inner { margin-top: 0 !important; }
.eltdf-grid { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.clearfix::after { content: ""; display: table; clear: both; }

.eltdf-vertical-align-containers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}
.eltdf-position-left, .eltdf-position-right { display: flex; align-items: center; }
.eltdf-position-left-inner, .eltdf-position-right-inner { display: flex; align-items: center; flex-wrap: wrap; }

/* ---------- Top bar ---------- */
.eltdf-top-bar {
    background: #003960;
    color: #fff;
    font-size: 12px;
    height: 40px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
.eltdf-top-bar .eltdf-vertical-align-containers {
    max-width: 1380px;
    padding: 0 24px;
    height: 100%;
}
.eltdf-top-bar a { color: #fff; }
.eltdf-top-bar a:hover { color: #f5c242; }
.eltdf-top-bar .textwidget p { margin: 0; display: inline; }
.eltdf-top-bar .textwidget a { font-size: 12px; }
.eltdf-top-bar .widget { margin: 0; display: inline-flex; align-items: center; }
.eltdf-top-bar-widget { display: inline-flex; align-items: center; }
.eltdf-social-icon-widget-holder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    line-height: 22px;
    text-align: center;
    background: transparent !important;
    margin: 0 6px 0 0 !important;
}
.eltdf-social-icon-widget {
    font-size: 14px;
    background: transparent !important;
    color: #fff !important;
    width: auto !important;
    height: auto !important;
    display: inline-block;
}
.eltdf-separator-widget { padding: 0 10px !important; margin: 0 !important; }
.eltdf-separator-widget .eltdf-separator-holder { display: inline-block; }
.eltdf-top-bar .eltdf-separator {
    display: inline-block;
    height: 14px !important;
    width: 1px !important;
    border: none !important;
    background: rgba(255,255,255,.35) !important;
    margin: 0 !important;
}
.eltdf-icon-widget-holder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    margin: 0 !important;
}
.eltdf-icon-widget-holder .material-icons { font-size: 14px !important; vertical-align: middle; line-height: 1; }
.eltdf-icon-text { font-size: 12px; }

/* Tablet: shrink address a bit */
@media (max-width: 1200px) {
    .eltdf-top-bar { font-size: 11px; }
    .eltdf-icon-widget-holder, .eltdf-icon-text, .eltdf-top-bar .textwidget a { font-size: 11px; }
    .eltdf-separator-widget { padding: 0 8px !important; }
}

/* Mobile: collapse top bar to essentials */
@media (max-width: 992px) {
    .eltdf-top-bar { font-size: 12px; padding: 6px 10px; }
    .eltdf-top-bar .eltdf-vertical-align-containers { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .eltdf-top-bar .eltdf-icon-text { display: none; }
    .eltdf-top-bar .eltdf-icon-widget-holder .material-icons { font-size: 18px !important; }
}

/* ---------- Header / Main menu ---------- */
.eltdf-page-header { background: #fff; border-bottom: 1px solid #eee; position: relative; z-index: 100; }
.eltdf-menu-area { padding: 0; height: 100px; }
.eltdf-menu-area .eltdf-vertical-align-containers { height: 100%; max-width: 1380px; padding: 0 24px; }
.eltdf-menu-area .eltdf-position-left,
.eltdf-menu-area .eltdf-position-right { height: 100%; }
.eltdf-menu-area .eltdf-position-left-inner,
.eltdf-menu-area .eltdf-position-right-inner { height: 100%; align-items: center; }
.eltdf-logo-wrapper { display: flex; align-items: center; height: 100%; }
.eltdf-logo-wrapper a { display: inline-flex; align-items: center; height: 60px !important; }
.eltdf-logo-wrapper img { height: 60px !important; max-height: 60px !important; width: auto !important; display: block; }

.eltdf-main-menu { display: block; }
.eltdf-main-menu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.eltdf-main-menu > ul > li {
    list-style: none;
    position: relative;
    margin: 0;
}
.eltdf-main-menu > ul > li > a {
    display: block;
    position: relative;
    padding: 28px 22px;
    color: #1b1b1b;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color .2s;
    white-space: nowrap;
}
.eltdf-main-menu > ul > li > a:hover,
.eltdf-main-menu > ul > li.current-menu-ancestor > a,
.eltdf-main-menu > ul > li.eltdf-active-item > a,
.eltdf-main-menu > ul > li > a.current { color: #003960; }

/* Active menu item: downward-pointing triangle caret below (matches reference).
   Only trigger on .eltdf-active-item to avoid duplicate triangles from stale
   `class="current"` on HOME in non-home templates. */
.eltdf-main-menu > ul > li.eltdf-active-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid #1b1b1b;
    background: transparent;
}
.eltdf-main-menu .item_outer { display: inline-flex; align-items: center; gap: 6px; }
/* Hide top-level dropdown chevrons and "plus" glyph — reference has pure text labels */
.eltdf-main-menu > ul > li > a .eltdf-menu-arrow,
.eltdf-main-menu > ul > li > a .plus { display: none !important; }

/* Dropdown */
.eltdf-main-menu .second {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-top: 3px solid #003960;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, visibility .2s, transform .2s;
    z-index: 200;
}
.eltdf-main-menu > ul > li:hover > .second,
.eltdf-main-menu > ul > li:focus-within > .second {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.eltdf-main-menu .second .inner { padding: 10px 0; }
.eltdf-main-menu .second ul { list-style: none; margin: 0; padding: 0; }
.eltdf-main-menu .second li { list-style: none; margin: 0; }
.eltdf-main-menu .second li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.eltdf-main-menu .second li a:hover { background: #f7f7f7; color: #003960; }

/* Right-align the last menu item's dropdown so it doesn't overflow */
.eltdf-main-menu > ul > li:last-child .second { left: auto; right: 0; }

/* Sticky header — hidden by default; JS toggles .is-visible on scroll */
.eltdf-sticky-header {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transform: translateY(-100%);
    transition: transform .25s;
    z-index: 500;
}
.eltdf-sticky-header.is-visible { display: block; transform: translateY(0); }
.eltdf-sticky-holder { padding: 10px 0; }
.eltdf-sticky-header .eltdf-logo-wrapper img { max-height: 48px; }
/* Sticky header uses the same active triangle indicator */
.eltdf-sticky-nav > ul > li > a { padding: 18px 22px !important; }

/* Mobile header */
.eltdf-mobile-header { display: none; background: #fff; border-bottom: 1px solid #eee; padding: 0; }
.eltdf-mobile-header-inner { display: flex; flex-direction: column; align-items: stretch; }
.eltdf-mobile-header-holder { padding: 10px 16px; }
.eltdf-mobile-menu-opener {
    border: none;
    background: transparent;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.eltdf-mobile-menu-icon { width: 24px; height: 18px; position: relative; display: inline-block; }
.eltdf-mobile-menu-icon::before,
.eltdf-mobile-menu-icon::after,
.eltdf-mobile-menu-icon span {
    content: ""; position: absolute; left: 0; right: 0;
    height: 2px; background: #003960; transition: transform .25s, opacity .2s;
}
.eltdf-mobile-menu-icon::before { top: 0; }
.eltdf-mobile-menu-icon span { top: 8px; display: block; }
.eltdf-mobile-menu-icon::after { top: 16px; }
.eltdf-mobile-header.is-open .eltdf-mobile-menu-icon::before { transform: translateY(8px) rotate(45deg); }
.eltdf-mobile-header.is-open .eltdf-mobile-menu-icon::after { transform: translateY(-8px) rotate(-45deg); }
.eltdf-mobile-header.is-open .eltdf-mobile-menu-icon span { opacity: 0; }
.eltdf-mobile-header.is-open { border-bottom: none; }

.eltdf-mobile-nav {
    display: none;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.eltdf-mobile-nav.is-open { display: block; }
.eltdf-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.eltdf-mobile-nav li { border-top: 1px solid #f0f0f0; }
.eltdf-mobile-nav li:first-child { border-top: none; }
.eltdf-mobile-nav a {
    display: block;
    padding: 14px 20px;
    color: #1b1b1b;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.eltdf-mobile-nav ul ul a {
    padding-left: 40px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: #444;
}

@media (max-width: 992px) {
    .eltdf-page-header { display: none; }
    .eltdf-mobile-header { display: block; }
    .eltdf-mobile-header .eltdf-logo-wrapper img { max-height: 44px; }
}

/* ---------- Page title ---------- */
.eltdf-page-title, .eltdf-title-holder {
    background: linear-gradient(135deg, #003960 0%, #0a5a8a 100%);
    color: #fff;
    padding: 80px 20px 70px;
    text-align: center;
}
.eltdf-page-title h1, .eltdf-title-holder h1 { color: #fff; font-size: 42px; margin: 0; }

/* ---------- Generic containers ---------- */
.eltdf-container, .eltdf-full-width { width: 100%; }
.eltdf-container-inner { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.eltdf-row-grid-section-wrapper { width: 100%; }
.eltdf-row-grid-section { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* Override any inline padding: 0px 25% / padding: 0 20% that crushes text blocks.
   Keep text-align inheriting from the parent so left-aligned layouts (e.g. contact
   page "Get In Touch") don't get forced centered. */
.eltdf-section-title-holder { padding: 50px 20px !important; }
.eltdf-st-inner { max-width: 900px; margin: 0 auto; }
.eltdf-st-title { font-size: 32px; color: #003960; margin-bottom: 14px; }
.eltdf-st-text { font-size: 16px !important; line-height: 1.6 !important; color: #555; }
.eltdf-st-subtitle { color: #395685; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }

/* Centered variant — applied when the inline style already says text-align: center.
   Otherwise text flows naturally. */
.eltdf-section-title-holder[style*="text-align: center"] .eltdf-st-inner,
.eltdf-section-title-holder[style*="text-align:center"] .eltdf-st-inner { margin: 0 auto; }

/* Legacy Visual Composer "empty space" shim */
.vc_empty_space { display: block; height: 24px; }

/* "Learn More About ZDA" button (class="button2") */
.button2, button.button2, a.button2 {
    display: inline-block;
    background: #003960;
    color: #fff;
    border: 2px solid #003960;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    cursor: pointer;
    border-radius: 2px;
    transition: background .2s, color .2s;
}
.button2:hover { background: #f5c242; border-color: #f5c242; color: #003960; }
.button2 a { color: inherit !important; text-decoration: none; }
.button2 a:hover { color: inherit !important; }

/* Iframe / embedded widgets — cap the Juicer social feed height so it
   doesn't leave a 1000px hole when blocked by tracking prevention. */
iframe {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
iframe[src*="juicer.io"] {
    max-height: 700px;
    width: 100% !important;
    max-width: 1000px;
    border: 1px solid #eee;
    background: #f8fafc;
}

.eltdf-content, .eltdf-content-inner { width: 100%; }

/* ---------- Bootstrap / VC compatibility shims ---------- */
.vc_row, .wpb_row { display: flex; flex-wrap: wrap; margin: 0 -12px; width: 100%; }
.wpb_column { padding: 0 12px; margin-bottom: 24px; flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-1  { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-2  { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-3  { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-4  { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-6  { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-8  { flex: 0 0 100%; max-width: 100%; }
.vc_col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.vc_col-md-3  { flex: 0 0 100%; max-width: 100%; }
.vc_col-md-4  { flex: 0 0 100%; max-width: 100%; }
.vc_col-md-6  { flex: 0 0 100%; max-width: 100%; }
.vc_col-md-8  { flex: 0 0 100%; max-width: 100%; }
.vc_col-md-12 { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-2  { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-3  { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-4  { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-6  { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-8  { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-9  { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-10 { flex: 0 0 100%; max-width: 100%; }
.vc_col-lg-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
    .vc_col-md-3  { flex: 0 0 25%;        max-width: 25%; }
    .vc_col-md-4  { flex: 0 0 33.3333%;   max-width: 33.3333%; }
    .vc_col-md-6  { flex: 0 0 50%;        max-width: 50%; }
    .vc_col-md-8  { flex: 0 0 66.6667%;   max-width: 66.6667%; }
}
@media (min-width: 992px) {
    .vc_col-lg-2  { flex: 0 0 16.6667%;   max-width: 16.6667%; }
    .vc_col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
    .vc_col-lg-4  { flex: 0 0 33.3333%;   max-width: 33.3333%; }
    .vc_col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
    .vc_col-lg-8  { flex: 0 0 66.6667%;   max-width: 66.6667%; }
    .vc_col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
    .vc_col-lg-10 { flex: 0 0 83.3333%;   max-width: 83.3333%; }
    .vc_col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}
.vc_column-inner, .wpb_wrapper { width: 100%; }

/* Content container holders — must fill their row */
.eltdf-page-content-holder, .eltdf-full-width, .eltdf-full-width-inner,
.eltdf-content, .eltdf-content-inner, .eltdf-wrapper, .eltdf-wrapper-inner { width: 100%; }

/* Contact-page map iframe sizing */
iframe.map {
    width: 100% !important;
    height: 500px !important;
    border: 0;
    border-radius: 6px;
}

/* Contact-page left column — reduce huge inline padding (80px top 30px left etc.) */
.eltdf-eh-item-content[class*="eltdf-eh-custom"] {
    padding: 30px 20px !important;
}

/* Circled social icons on contact page */
.eltdf-icon-in-circle-yes {
    border-radius: 50%;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
}
.eltdf-social-icon-widget-holder .fab,
.eltdf-social-icon-widget-holder .fa,
.eltdf-social-icon-widget-holder .fas { font-size: 15px !important; line-height: inherit; }

/* Generic icon widgets (fa-home, fa-envelope, fa-phone used on contact) */
.eltdf-icon-widget-holder .fa,
.eltdf-icon-widget-holder .fab,
.eltdf-icon-widget-holder .fas {
    margin-right: 8px;
    color: inherit;
    font-size: 16px;
}
/* eltdf-light-skin literally means "light-colored element for dark bg".
   Inherit from parent so it works on both light (contact page) and
   dark (footer) backgrounds. */
.eltdf-icon-widget-holder.eltdf-light-skin {
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
/* On contact page (light background) we want icons/text dark */
.eltdf-content .eltdf-icon-widget-holder.eltdf-light-skin { color: #333; }
.eltdf-content .eltdf-icon-widget-holder.eltdf-light-skin:hover { color: #003960; }
/* In footer (dark background) keep them light */
.eltdf-page-footer .eltdf-icon-widget-holder,
.eltdf-page-footer .eltdf-icon-widget-holder.eltdf-light-skin { color: #d5dde4 !important; }
.eltdf-page-footer .eltdf-icon-widget-holder .fa,
.eltdf-page-footer .eltdf-icon-widget-holder .fab,
.eltdf-page-footer .eltdf-icon-widget-holder .fas { color: #d5dde4 !important; }

/* Section titles that use <h1 class="eltdf-page-title"> for page heroes */
.eltdf-title-holder { position: relative; background: linear-gradient(135deg, #003960 0%, #0a5a8a 100%); padding: 60px 20px 50px; }
.eltdf-title-wrapper { position: relative; z-index: 1; }
.eltdf-title-inner .eltdf-grid { text-align: center; }
h1.eltdf-page-title { font-size: 48px !important; color: #fff !important; margin: 0; }
.eltdf-page-subtitle { color: #fff; opacity: .9; margin-top: 10px; }
.eltdf-title-image { position: absolute; inset: 0; opacity: .15; overflow: hidden; }
.eltdf-title-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Business segment cards (.container2) — matches reference design.
   Image-full-bleed cards, title at bottom with green accent line, dark
   hover overlay reveals description and VIEW MORE button. No flip. */

/* The row holding these 4 cards goes edge-to-edge (override .vc_row margins). */
#accordion > .vc_row:first-child,
#accordion > .vc_row.wpb_row:first-of-type {
    margin: 0 !important;
    width: 100%;
}
#accordion > .vc_row:first-child > .wpb_column,
#accordion > .vc_row.wpb_row:first-of-type > .wpb_column {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.container2 {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #002f4f;
    cursor: pointer;
}
@supports not (aspect-ratio: 3/4) {
    .container2 { min-height: 480px; }
}

/* Front side — image fills card, title at bottom, green accent line */
.container2 .front {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #002f4f;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    transition: transform .5s;
}
.container2 .front::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,20,40,.85) 0%, rgba(0,20,40,.35) 50%, rgba(0,20,40,0) 100%);
    pointer-events: none;
}
.container2 .front .content-front {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    padding: 0 20px 40px;
}
.container2 .front .content-front h2 {
    color: #fff !important;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
/* Green accent line under each card title */
.container2 .front .content-front h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: #5C8374;
    margin: 14px auto 0;
}

/* Back side — overlay that fades in on hover, shows description + button */
.container2 .back {
    position: absolute;
    inset: 0;
    background: rgba(0, 45, 75, 0.92);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.container2 .back h2 {
    color: #fff !important;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.25;
}
.container2 .back h2::after {
    content: "";
    display: block;
    width: 50px; height: 2px;
    background: #5C8374;
    margin: 12px auto 16px;
}
.container2 .back p {
    color: #f2f2f2;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
    max-width: 320px;
}

.container2:hover .back,
.container2:focus-within .back { opacity: 1; visibility: visible; }
.container2:hover .front { transform: scale(1.05); }

/* ---------- Buttons ---------- */
/* VIEW MORE / card button — white outline ghost, pill-shaped (matches reference) */
.button3, button.button3, a .button3 {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 28px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    border-radius: 999px;
    transition: background .2s, color .2s;
}
.button3:hover, button.button3:hover {
    background: #fff;
    color: #003960;
    border-color: #fff;
}
.button3 span { display: inline-block; }

/* ---------- Footer ---------- */
.eltdf-page-footer {
    background: #0a1d2a;
    color: #d5dde4;
    padding: 40px 20px 20px;
    margin-top: 60px;
}
.eltdf-page-footer a { color: #d5dde4; }
.eltdf-page-footer a:hover { color: #f5c242; }
.eltdf-page-footer h1, .eltdf-page-footer h2, .eltdf-page-footer h3,
.eltdf-page-footer h4, .eltdf-page-footer h5, .eltdf-page-footer h6 { color: #fff; }
.eltdf-footer-top-inner, .eltdf-footer-bottom-inner {
    max-width: 1300px; margin: 0 auto; padding: 0 10px;
}
/* Scope flex grid to the footer only so the main content's .eltdf-grid-row
   doesn't shrink to intrinsic width. */
.eltdf-page-footer .eltdf-grid-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}
.eltdf-page-footer .eltdf-grid-col-3 { flex: 0 0 100%; max-width: 100%; padding: 0 12px; }
@media (min-width: 768px) { .eltdf-page-footer .eltdf-grid-col-3 { flex: 0 0 50%; max-width: 50%; } }
@media (min-width: 992px) { .eltdf-page-footer .eltdf-grid-col-3 { flex: 0 0 25%; max-width: 25%; } }
.eltdf-footer-bottom-holder {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 30px;
    padding-top: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,.65);
}

/* ---------- Footer columns ---------- */
.eltdf-column-content { padding: 14px; color: #d5dde4; }
.eltdf-column-content a { color: #d5dde4; }
.eltdf-column-content a:hover { color: #f5c242; }
.eltdf-widget-title { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .5px; }
.eltdf-blog-list-holder ul { list-style: none; padding: 0; margin: 0; }
.eltdf-blog-list-holder li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.eltdf-blog-list-holder li:last-child { border-bottom: none; }
.eltdf-blog-list-holder p { margin: 0; }

/* ---------- Misc / widgets ---------- */
.widget { margin-bottom: 16px; }
.textwidget p { margin: 0; }
.eltdf-elements-holder-custom { width: calc(100% + 1px); }

/* Accordion content panels used by flip-card buttons */
.collapse { display: none; }
.collapse.show { display: block; }

/* Revolution slider placeholder */
#rev_slider, .rev_slider, .forcefullwidth_wrapper_tp_banner { display: block; min-height: 300px; background: #eef3f8; }

/* Fallback utility classes */
.eltdf-paspartu-enabled .eltdf-wrapper { padding: 0; }
.eltdf-grid-1300 { max-width: 1300px; margin: 0 auto; }

/* Ensure raw lists aren't shown with default bullets for all menus */
nav ul, nav li { list-style: none; }

/* Hide the raw (unstyled fallback) view by default */
.eltdf-mobile-header[hidden] { display: none !important; }

/* Print */
@media print {
    .eltdf-top-bar, .eltdf-mobile-header, .eltdf-sticky-header { display: none !important; }
}

/* ====================================================================
   Interior page widgets — profile, vision-mission, core, engineered
   ==================================================================== */

/* Element holders with multi-column layouts (used on profile, contact, etc.) */
.eltdf-elements-holder { width: 100%; max-width: 1300px; margin: 0 auto; padding: 20px; }
.eltdf-elements-holder.eltdf-one-column { display: block; }
.eltdf-elements-holder.eltdf-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.eltdf-elements-holder.eltdf-three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
@media (max-width: 1024px) {
    .eltdf-elements-holder.eltdf-two-columns,
    .eltdf-elements-holder.eltdf-three-columns { grid-template-columns: 1fr; }
}

.eltdf-eh-item { width: 100%; }
.eltdf-eh-item-inner { height: 100%; }
/* Override Visual Composer's insane inline paddings (5% 10% 5% 5%, 20%, etc) */
.eltdf-eh-item-content,
.eltdf-elements-holder .eltdf-eh-item-content[class*="eltdf-eh-custom"] {
    padding: 20px !important;
}
@media (min-width: 992px) {
    .eltdf-eh-item-content,
    .eltdf-elements-holder .eltdf-eh-item-content[class*="eltdf-eh-custom"] {
        padding: 40px 30px !important;
    }
}

/* Icon-list (check-mark bullet items on profile page) */
.eltdf-icon-list-holder {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px !important;
}
.eltdf-il-icon-holder { display: inline-flex; align-items: center; flex-shrink: 0; margin-top: 2px; }
.eltdf-il-text {
    margin: 0 !important;
    padding-left: 0 !important;
    font-size: 15px;
    color: #444;
}

/* Drop caps (first letter styled as square) */
.eltdf-dropcaps {
    float: left;
    font-size: 42px;
    line-height: 48px;
    padding: 4px 12px;
    margin: 6px 14px 2px 0;
    color: #fff !important;
    font-weight: 600;
    background-color: #395685;
}
.eltdf-dropcaps.eltdf-square { border-radius: 3px; }
.wpb_text_column { clear: none; }
.wpb_text_column p { font-size: 16px; line-height: 1.7; color: #444; }

/* Image gallery / slider — simple fallback. Never grid when only 1 image. */
.eltdf-image-gallery { width: 100%; display: flex; flex-wrap: wrap; gap: 12px; }
.eltdf-image-gallery .eltdf-ig-image { flex: 1 1 100%; }
.eltdf-image-gallery.eltdf-three-columns .eltdf-ig-image { flex: 1 1 calc(33.333% - 12px); }
.eltdf-image-gallery .eltdf-ig-image:only-child { flex: 1 1 100%; }
.eltdf-ig-image img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* Clients carousel (profile page) — hide the extra hover-duplicate image and
   lay items out in a responsive grid instead of a non-working Owl slider. */
.eltdf-clients-carousel-holder { width: 100%; padding: 10px 0; }
.eltdf-cc-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
}
@media (max-width: 1024px) { .eltdf-cc-inner { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .eltdf-cc-inner { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .eltdf-cc-inner { grid-template-columns: repeat(2, 1fr); } }
.eltdf-cc-item { text-align: center; padding: 10px; }
.eltdf-cc-item a { display: inline-block; }
.eltdf-cc-image { max-width: 130px; max-height: 70px; width: auto; height: auto; object-fit: contain; }
.eltdf-cc-hover-image { display: none !important; } /* hide duplicate */

/* Page title hero (interior pages) */
.eltdf-title-holder {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #003960 0%, #0a5a8a 100%);
    margin-bottom: 30px;
    overflow: hidden;
}
.eltdf-title-image { position: absolute; inset: 0; opacity: .18; z-index: 0; }
.eltdf-title-image img { width: 100%; height: 100%; object-fit: cover; }
.eltdf-title-wrapper { position: relative; z-index: 1; width: 100%; }
.eltdf-title-inner .eltdf-grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}
h1.eltdf-page-title,
h3.eltdf-page-title {
    font-size: 48px !important;
    color: #fff !important;
    margin: 0;
    font-weight: 500;
}
.eltdf-page-subtitle { color: rgba(255,255,255,.9); margin-top: 6px; }

/* Widget titles (sidebar / footer column heading) */
.eltdf-widget-title-holder { margin-bottom: 18px; }
.eltdf-widget-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.eltdf-content .eltdf-widget-title { color: #003960; }

/* Blog-list widget (sidebar "About Us" list links) */
.eltdf-blog-list { list-style: none; padding: 0; margin: 0; }
.eltdf-bl-item { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.eltdf-page-footer .eltdf-bl-item { border-bottom-color: rgba(255,255,255,.08); }
.eltdf-bl-item:last-child { border-bottom: none; }
.eltdf-bli-content a { display: block; }

/* Custom font heading widget */
.eltdf-custom-font-holder { font-size: 16px; font-weight: 600; margin: 18px 0 10px; }

/* Separator widget */
.eltdf-separator-widget { margin: 10px 0; }
.eltdf-separator-holder { display: block; }
.eltdf-separator {
    display: block;
    height: 1px;
    background: rgba(0,0,0,.08);
    border: 0;
    width: 60px;
}
.eltdf-page-footer .eltdf-separator { background: rgba(255,255,255,.12); }

/* Client logo grid (profile page / home page sometimes) */
.eltdf-image-gallery.eltdf-ig-slider-type,
.vc_row .wpb_column .wpb_single_image { text-align: center; }
.wpb_single_image img { max-width: 140px; height: auto; margin: 10px auto; }

/* Subtitle + text inside section title holders, inheriting text-align */
.eltdf-st-reverse-order .eltdf-st-subtitle { display: block; margin-bottom: 6px; font-weight: 500; }
.eltdf-st-reverse-order .eltdf-st-title { margin-top: 0; }

/* Back-to-top button */
#eltdf-back-to-top {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 44px; height: 44px;
    display: none;
    align-items: center; justify-content: center;
    background: #003960;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    z-index: 600;
}
#eltdf-back-to-top.is-visible { display: inline-flex; }
#eltdf-back-to-top .material-icons { color: #fff; font-size: 22px; }

/* Ensure headings aren't too huge on small screens */
@media (max-width: 720px) {
    .eltdf-st-title { font-size: 26px; }
    h1.eltdf-page-title, h3.eltdf-page-title { font-size: 34px !important; }
}

/* ---------- Sticky header: show only one logo ---------- */
/* Template ships 3 copies: .eltdf-normal-logo, .eltdf-dark-logo, .eltdf-light-logo.
   The theme normally hides two based on variant class; our CSS wasn't doing that. */
.eltdf-sticky-header .eltdf-logo-wrapper .eltdf-dark-logo,
.eltdf-sticky-header .eltdf-logo-wrapper .eltdf-light-logo { display: none !important; }
.eltdf-sticky-header .eltdf-logo-wrapper .eltdf-normal-logo {
    display: block !important;
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
}
.eltdf-sticky-header .eltdf-logo-wrapper a { height: 40px !important; display: inline-flex; align-items: center; }
.eltdf-sticky-header .eltdf-sticky-holder { height: 70px; }
.eltdf-sticky-header .eltdf-sticky-holder .eltdf-vertical-align-containers { height: 100%; }

/* ---------- Core Value diagram: scale to useful size ---------- */
/* Image is 1893x465 natural. WPBakery wraps it in .wpb_single_image but
   leaves it unstyled — it renders at intrinsic width / caps at container,
   which gave a tiny centered thumbnail. Force max readable width. */
.wpb_single_image { text-align: center; }
.wpb_single_image .vc_single_image-wrapper { display: inline-block; max-width: 100%; }
.wpb_single_image .vc_single_image-img {
    max-width: 900px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* ---------- Home accordion collapse panels ---------- */
/* #rotating1, #ztna1, #instrumentation1, #fabrication1 — Bootstrap collapse
   panels that expand under the 4 service cards on home.html.
   Each panel has title + description + CTA button(s) + .button4 Close link. */
#accordion > .collapse .eltdf-row-grid-section-wrapper {
    padding: 50px 40px;
    border-radius: 8px;
    margin-top: 20px;
}
#accordion > .collapse .eltdf-section-title-holder {
    padding: 0 !important;
    max-width: 960px;
    margin: 0 auto;
}
#accordion > .collapse .eltdf-st-title {
    font-size: 32px;
    color: #003960;
    margin-bottom: 16px;
}
#accordion > .collapse .eltdf-st-text { color: #4a5560; font-size: 16px; line-height: 1.7; }
#accordion > .collapse .button2 { margin-right: 10px; margin-top: 24px; }

/* ---------- All single-column text panels: Rotating / Instrumentation / Fabrication ---------- */
/* White bg + left navy accent. VISIT + CLOSE sit on the same row. */
#rotating1 .eltdf-row-grid-section-wrapper,
#instrumentation1 .eltdf-row-grid-section-wrapper,
#fabrication1 .eltdf-row-grid-section-wrapper {
    background: #fff !important;
    border-left: 4px solid #003960;
    padding: 28px 40px 28px 36px !important;
    margin: 4px 0 !important;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
/* Reduce 43px spacer (between text and CTA row) to 16px */
#rotating1 .vc_empty_space,
#instrumentation1 .eltdf-st-inner + .vc_empty_space,
#fabrication1 .eltdf-st-inner + .vc_empty_space {
    height: 16px !important;
    min-height: 0 !important;
}
/* Hide the 23px spacer BETWEEN button2 and button4 → both flow inline on same row */
#instrumentation1 .button2 ~ .vc_empty_space,
#fabrication1 .button2 ~ .vc_empty_space {
    display: none;
}
/* CLOSE button: match button2 top-margin so they sit on the same baseline */
#accordion > .collapse .button4 {
    margin-top: 24px !important;
    margin-left: 8px !important;
}

/* .button4 = "Close" link. Originally rendered as a text-only button in
   top-left; align it with the title column and give it button styling. */
.button4 {
    background: transparent;
    border: 1px solid #003960;
    color: #003960 !important;
    padding: 8px 22px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
    margin-top: 28px !important;
    margin-left: 0 !important;
    display: inline-block;
    transition: background .2s, color .2s;
}
.button4:hover { background: #003960; color: #fff !important; }
.button4 a, .button4 a:hover { color: inherit !important; text-decoration: none; }

/* ---------- Home #ztna1 nested engineered-solutions cards ---------- */
/* Four cards inside ztna1 using .container3 > .card2 > .face.face1/.face2.
   Originally used a flip animation that wasn't styled — both faces showed
   stacked. Render as simple image-top / content-bottom cards with no flip. */
#ztna1 .eltdf-page-content-holder > .vc_row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px 0; }
@media (max-width: 1200px) { #ztna1 .eltdf-page-content-holder > .vc_row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #ztna1 .eltdf-page-content-holder > .vc_row { grid-template-columns: 1fr; } }
#ztna1 .eltdf-page-content-holder > .vc_row > .wpb_column { width: 100%; padding: 0; max-width: none; flex: unset; float: none; }
#ztna1 .container3 { height: 100%; }
#ztna1 .card2 {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}
#ztna1 .card2 .face.face2 {
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 16px;
}
#ztna1 .card2 .face.face2::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,57,96,0) 40%, rgba(0,57,96,.85) 100%);
}
#ztna1 .card2 .face.face2 h6 {
    position: relative;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}
#ztna1 .card2 .face.face1 {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
#ztna1 .card2 .face.face1 .content { display: flex; flex-direction: column; flex: 1; }
#ztna1 .card2 .face.face1 .stars { display: none; }
#ztna1 .card2 h2.java {
    font-size: 17px;
    color: #003960;
    margin: 0 0 10px;
    line-height: 1.3;
}
#ztna1 .card2 p.java {
    font-size: 13px;
    color: #55636c;
    line-height: 1.55;
    margin: 0 0 14px;
    flex: 1;
}
#ztna1 .card2 .button2 {
    margin: 6px 0 !important;
    padding: 8px 14px;
    font-size: 12px;
    width: 100%;
    display: block;
    text-align: center;
}

/* ---------- Professional Clients: tighten spacing ---------- */
/* Two rows of 5 logos. Inline padding on the holder items adds 78px bottom
   on row 2 and 15px top on row 1 — collapse them to something tighter. */
.eltdf-clients-carousel-holder + .eltdf-clients-carousel-holder { margin-top: 10px; }
.eltdf-eh-item-content[class*="eltdf-eh-custom-4989"],
.eltdf-eh-item-content[class*="eltdf-eh-custom-2789"],
.eltdf-eh-item-content[class*="eltdf-eh-custom-5675"] {
    padding: 10px 0 !important;
}
.eltdf-cc-item { padding: 6px !important; }
.eltdf-cc-image { max-height: 64px !important; }

/* ---------- Coming-soon hero heading: clamp to viewport ---------- */
/* Inline font-size:100px overflowed at 375/768/1024. Scale fluidly between
   48px (mobile) and 100px (large desktop). */
.eltdf-st-title-coming-soon {
    color: #5C8374;
    font-size: clamp(48px, 10vw, 100px);
    line-height: 1.05;
    word-break: break-word;
}

.eltdf-mobile-menu-opener a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #003960;
}


/* ================================================================
   MOBILE RESPONSIVE FIXES — all pages
   ================================================================ */

/* Fix: instrumentation/fabrication spacer selector after buttons
   were moved inside eltdf-st-inner (sibling selector no longer hits) */
#instrumentation1 .vc_empty_space,
#fabrication1 .vc_empty_space {
    height: 16px !important;
    min-height: 0 !important;
}

/* --- Vision & Mission: define layout via classes so media queries work --- */
.vm-cards-row { display: flex; gap: 28px; align-items: stretch; }

@media (max-width: 768px) {
    /* V&M outer section */
    .vm-section-outer { padding: 40px 0 50px !important; }
    /* V&M heading */
    .vm-section-header h2 { font-size: 28px !important; }
    /* V&M cards: stack vertically */
    .vm-cards-row { flex-direction: column; gap: 20px; }
    .vm-cards-row > div { padding: 36px 24px !important; }
}
@media (max-width: 480px) {
    .vm-section-outer { padding: 28px 0 36px !important; }
    .vm-section-header h2 { font-size: 22px !important; }
    .vm-cards-row > div { padding: 28px 16px !important; }
}

/* --- Accordion collapse panels: tighten padding on mobile --- */
@media (max-width: 768px) {
    #accordion > .collapse .eltdf-row-grid-section-wrapper {
        padding: 20px 16px !important;
    }
    #rotating1 .eltdf-row-grid-section-wrapper,
    #instrumentation1 .eltdf-row-grid-section-wrapper,
    #fabrication1 .eltdf-row-grid-section-wrapper {
        padding: 20px 16px 20px 12px !important;
    }
    #accordion > .collapse .eltdf-st-title { font-size: 22px !important; }
    #ztna1 .eltdf-st-title { padding-left: 0 !important; }
    /* Engineered Solutions inner cards: 1 column */
    #ztna1 .eltdf-page-content-holder > .vc_row {
        grid-template-columns: 1fr !important;
    }
    /* Buttons stack on mobile */
    #accordion > .collapse .button2,
    #accordion > .collapse .button4 {
        display: inline-block;
        margin-top: 12px !important;
        margin-left: 0 !important;
    }
}

/* --- Section title holder: override fixed percentage padding on mobile --- */
/* Fixes core.html "padding: 0 22%" and similar pages */
@media (max-width: 768px) {
    .eltdf-section-title-holder {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* --- Contact form: collapse two-column to single column on mobile --- */
@media (max-width: 768px) {
    .eltdf-two-columns { grid-template-columns: 1fr !important; }
}

/* --- General heading sizes: shrink further on small phones --- */
@media (max-width: 480px) {
    .eltdf-st-title { font-size: 22px !important; }
    h1.eltdf-page-title { font-size: 28px !important; }
}

/* ---------- Mobile nav: sub-menu accordion ---------- */
.eltdf-mobile-nav .sub_menu { display: none; background: #f8f9fa; }
.eltdf-mobile-nav .sub_menu.is-open { display: block; }
.eltdf-mobile-nav .mobile_arrow {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #003960;
}
.eltdf-mobile-nav .mobile_arrow .fa-angle-down {
    font-size: 18px; transition: transform .25s ease;
}
.eltdf-mobile-nav li.is-open > .mobile_arrow .fa-angle-down { transform: rotate(180deg); }
.eltdf-mobile-nav li.has_sub { position: relative; }
.eltdf-mobile-nav li.has_sub > a { padding-right: 52px; }
/* hide ion icon — FontAwesome only */
.eltdf-mobile-nav .mobile_arrow .eltdf-icon-ion-icon { display: none; }
.eltdf-mobile-nav .sub_menu li { border-top: 1px solid #e8e8e8; }
.eltdf-mobile-nav .sub_menu a {
    padding: 12px 20px 12px 36px;
    font-size: 13px; font-weight: 500;
    color: #444; text-transform: none; letter-spacing: 0;
}
.eltdf-mobile-nav .sub_menu a:hover { color: #003960; background: #f0f4f8; }