:root {
    --eo-navy: #0b2540;
    --eo-body: #5b6b7d;
    --eo-blue: #2f6feb;
    --eo-blue-dark: #194a9e;
    --eo-paper: #f4f7fc;
    --eo-line: #e6ebf3;
    --eo-radius: 16px;

    /* rotating pastel badge palette used across icon grids */
    --eo-c1-bg: #e9f0ff; --eo-c1-fg: #2f6feb;
    --eo-c2-bg: #e8f9f0; --eo-c2-fg: #1fa971;
    --eo-c3-bg: #f1eafb; --eo-c3-fg: #8b5cf6;
    --eo-c4-bg: #fdeee6; --eo-c4-fg: #f2653c;
    --eo-c5-bg: #fdeaf3; --eo-c5-fg: #ec4899;
    --eo-c6-bg: #fef6e0; --eo-c6-fg: #e0a800;
}

/* ============================== ICONS / ARROWS ============================== */
.eo-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.eo-icon-svg { width: 22px; height: 23px;  overflow: visible; }
.eo-arrow { font-size: 1em; line-height: 1; font-weight: 700; }
/* .eo-icon-img { width: 60%; height: 60%; object-fit: contain; display: block; } */
.eo-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================== EYEBROW LABEL ============================== */
.eo-eyebrow {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--eo-blue);
    margin-bottom: 10px;
}
.eo-hub-eyebrow {
    display: block;
    text-align: center;
    color: var(--eo-blue);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.eo-hub-subtext {
    text-align: center;
    color: var(--base-bodyfont-color, var(--eo-body));
    font-size: 16px;
    margin: 0 auto 35px;
    max-width: 680px;
}

/* ============================== HERO ============================== */
.eo-hero-ctas { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; }
.page-title-desc p { color: var(--base-white, #fff);     font-size: 24px;
    line-height: 37px;}

/* ============================== TAB SYSTEM (shared by eo-tabs.js) ==========
   Two visual variants exist across the pages:
     .eo-eco-tabs  -> legacy outlined pill (IT Infrastructure page)
     .eo-hub-tabs  -> filled/blue pill (IT Support, Odoo, Port pages)
   Both drive the same .eo-eco-panel show/hide behaviour.
   ============================================================================ */
.eo-eco-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.eo-eco-tabs .eo-eco-tab-btn {
    padding: 11px 24px;
    border-radius: var(--base-border-radius-30, 30px);
    border: 2px solid var(--base-dark, var(--eo-navy));
    background: transparent;
    color: var(--base-dark, var(--eo-navy));
    font-family: var(--base-headingfont, inherit);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease;
}
.eo-eco-tabs .eo-eco-tab-btn.active,
.eo-eco-tabs .eo-eco-tab-btn:hover {
    background: var(--eo-blue);
    border-color: var(--eo-blue);
    color: var(--base-white, #fff);
}

.eo-hub-tabs { display: flex; gap: 14px; justify-content: center; margin-bottom: 45px; flex-wrap: wrap; }
.eo-hub-tabs .eo-eco-tab-btn {
    padding: 14px 28px;
    border-radius: 40px;
    border: 1.5px solid var(--eo-blue);
    background: #fff;
    color: var(--eo-navy);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all .25s ease;
}
.eo-hub-tabs .eo-eco-tab-btn.active { background: var(--eo-blue); border-color: var(--eo-blue); color: #fff; }
.eo-hub-tabs .eo-eco-tab-btn:hover:not(.active) { border-color: var(--eo-blue-dark); }

.eo-eco-panel { display: none; }
.eo-eco-panel.active { display: block; animation: eoFadeIn .4s ease;padding:10px; }
@keyframes eoFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.eo-eco-explore {
    display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700;
    color: var(--eo-blue); text-decoration: none;
}
.eo-eco-explore .eo-icon { transition: transform .25s ease; }
.eo-eco-explore:hover .eo-icon { transform: translateX(4px); }
.eo-eco-explore-wrap { text-align: center; margin-top: 30px; }

/* ============================== APP / FEATURE GRID CARD ==================== */
.eo-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px;padding: 10px; }
.eo-app-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--eo-line);
    border-radius: var(--eo-radius);
    padding: 26px 24px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.eo-app-card:hover { box-shadow: 0 16px 34px rgba(11, 37, 64, .09); transform: translateY(-4px); }
.eo-app-card .eo-app-icon {
    height: 52px; width: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--eo-c1-bg); color: var(--eo-c1-fg);
    margin-bottom: 18px; overflow: hidden;
}
.eo-app-card h4 { font-size: 17px; line-height: 24px; margin-bottom: 6px; color: var(--eo-navy); }
.eo-app-card p { font-size: 14px; line-height: 22px; color: var(--eo-body); margin-bottom: 12px; }
.eo-app-card .eo-learn-more,
.eo-app-card .btn-inline {
    font-size: 14px; font-weight: 600; color: var(--eo-blue); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}

/* rotate the 6 pastel badge colors across a card grid */
.eo-app-grid .eo-app-card:nth-child(6n+1) .eo-app-icon,
.eo-hub-grid > [class*="col-"]:nth-child(5n+1) .eo-hub-icon { background: var(--eo-c1-bg); color: var(--eo-c1-fg); }
.eo-app-grid .eo-app-card:nth-child(6n+2) .eo-app-icon,
.eo-hub-grid > [class*="col-"]:nth-child(5n+2) .eo-hub-icon { background: var(--eo-c5-bg); color: var(--eo-c5-fg); }
.eo-app-grid .eo-app-card:nth-child(6n+3) .eo-app-icon,
.eo-hub-grid > [class*="col-"]:nth-child(5n+3) .eo-hub-icon { background: var(--eo-c3-bg); color: var(--eo-c3-fg); }
.eo-app-grid .eo-app-card:nth-child(6n+4) .eo-app-icon,
.eo-hub-grid > [class*="col-"]:nth-child(5n+4) .eo-hub-icon { background: var(--eo-c2-bg); color: var(--eo-c2-fg); }
.eo-app-grid .eo-app-card:nth-child(6n+5) .eo-app-icon,
.eo-hub-grid > [class*="col-"]:nth-child(5n+0) .eo-hub-icon { background: var(--eo-c4-bg); color: var(--eo-c4-fg); }
.eo-app-grid .eo-app-card:nth-child(6n+0) .eo-app-icon { background: var(--eo-c6-bg); color: var(--eo-c6-fg); }

.eo-hub-icon.eo-badge-blue   { background: var(--eo-c1-bg); color: var(--eo-c1-fg); }
.eo-hub-icon.eo-badge-pink   { background: var(--eo-c5-bg); color: var(--eo-c5-fg); }
.eo-hub-icon.eo-badge-purple { background: var(--eo-c3-bg); color: var(--eo-c3-fg); }
.eo-hub-icon.eo-badge-green  { background: var(--eo-c2-bg); color: var(--eo-c2-fg); }
.eo-hub-icon.eo-badge-orange { background: var(--eo-c4-bg); color: var(--eo-c4-fg); }

/* ============================== HUB CARD (rounded-square badge) ============ */
.eo-hub-card {
    background: #fff; border: 1px solid var(--eo-line); border-radius: 16px;
    padding: 30px 26px; height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}
.eo-hub-card:hover { box-shadow: 0 16px 34px rgba(11, 37, 64, .09); transform: translateY(-4px); }
.eo-hub-card .eo-hub-icon {
    height: 56px; width: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.eo-hub-card .eo-hub-icon .eo-icon-svg { width: 26px; height: 27px; }
.eo-hub-card h4 { font-size: 19px; line-height: 26px; margin-bottom: 10px; color: var(--eo-navy); }
.eo-hub-card p { font-size: 14.5px; line-height: 23px; color: var(--eo-body); margin-bottom: 16px; }
.eo-hub-card .eo-learn-more { font-size: 14px; font-weight: 700; color: var(--eo-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* ============================== WHY / FEATURE CARD (light) ================= */
.eo-why-card {
    text-align: left; padding: 30px 26px; border-radius: var(--eo-radius);
    background: #fff; border: 1px solid var(--eo-line); height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}
.eo-why-card:hover { box-shadow: 0 16px 34px rgba(11, 37, 64, .09); transform: translateY(-4px); }
.eo-why-card .eo-why-icon { flex-shrink: 0; height: 48px; width: 48px; border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.eo-why-card .eo-why-icon img { width: 48px; height: 48px; object-fit: contain; display: block; }
.eo-why-card h4 { color: var(--eo-navy); font-size: 18px; margin-bottom: 8px; }
.eo-why-card .eo-why-subtitle { color: var(--eo-navy); font-size: 13px; font-weight: 600; opacity: .7; margin-bottom: 10px; }
.eo-why-card p { color: var(--eo-body); margin-bottom: 0; font-size: 14px; line-height: 22px; }

/* rotate pastel backgrounds behind why-card icons */
/* .row > [class*="col-"]:nth-child(6n+1) .eo-why-icon { background: var(--eo-c1-bg); }
.row > [class*="col-"]:nth-child(6n+2) .eo-why-icon { background: var(--eo-c4-bg); }
.row > [class*="col-"]:nth-child(6n+3) .eo-why-icon { background: var(--eo-c2-bg); }
.row > [class*="col-"]:nth-child(6n+4) .eo-why-icon { background: var(--eo-c3-bg); }
.row > [class*="col-"]:nth-child(6n+5) .eo-why-icon { background: var(--eo-c5-bg); }
.row > [class*="col-"]:nth-child(6n+0) .eo-why-icon { background: var(--eo-c6-bg); } */

/* Legacy "dark hover-fill" why-card variant (IT Infrastructure page).
   Opt in with class="eo-why-card eo-why-card--fill" */
.eo-why-card--fill {
    text-align: center;
    padding: 40px 25px;
    background: rgb(14 14 14 / 5%);
    border: 1px solid rgb(56 137 195 / 38%);
}
.eo-why-card--fill:hover { background: var(--eo-blue); }
.eo-why-card--fill .eo-why-icon {
    height: 60px; width: 60px; border-radius: 16px; margin: 0 auto 20px;
    background: var(--eo-blue); color: #fff; font-size: 24px; overflow: hidden;
}
.eo-why-card--fill .eo-why-icon.eo-badge-red  { background: #ef5b6f; }
.eo-why-card--fill .eo-why-icon.eo-badge-blue { background: #3b82f6; }
.eo-why-card--fill .eo-why-icon.eo-badge-teal { background: #14b8a6; }
.eo-why-card--fill h4,
.eo-why-card--fill p,
.eo-why-card--fill .eo-why-subtitle { color: var(--base-black, #111); }
.eo-why-card--fill:hover h4,
.eo-why-card--fill:hover p,
.eo-why-card--fill:hover .eo-why-subtitle,
.eo-why-card--fill:hover .prt-btn-color-skincolor { color: var(--base-white, #fff); }

/* ============================== FAQ ============================== */
.eo-faq-wrap .accordion.style2 .toggle.prt-toggle_style_classic {
    border: 1px solid var(--base-border-color1, var(--eo-line));
    box-shadow: 0 4px 15px rgba(0, 43, 92, .04);
}
.eo-faq-wrap .toggle-title a { cursor: pointer; }
.eo-faq-wrap .toggle-content { display: none; }
.eo-faq-wrap .toggle-content.show { display: block; }

/* ============================== FINAL CTA ============================== */
.eo-final-cta { border-radius: var(--base-border-radius-20, var(--eo-radius)); padding: 60px 50px; text-align: center; }
.eo-final-cta h2 { color: var(--base-white, #fff); margin-bottom: 15px; }
.eo-final-cta p { color: rgba(255, 255, 255, .75); max-width: 620px; margin: 0 auto 30px; }

@media (max-width: 767px) {
    .eo-final-cta { padding: 40px 20px; }
}
.eo-app-card .eo-app-icon .eo-icon-svg {
    color: var(--eo-app-icon-color, #0069F6);
}

.eo-app-card:nth-child(1) { --eo-app-icon-color: #0069F6; } /* blue */
.eo-app-card:nth-child(3) { --eo-app-icon-color: #7C3AED; } /* violet */
.eo-app-card:nth-child(5) { --eo-app-icon-color: #F97316; } /* orange */
.eo-app-card:nth-child(2) { --eo-app-icon-color: #EC4899; } /* pink */
.eo-app-card:nth-child(4) { --eo-app-icon-color: #059669; } /* teal/green */
.eo-app-card:nth-child(7) { --eo-app-icon-color: #2563EB; } /* blue */
.eo-app-card:nth-child(8) { --eo-app-icon-color: #D946EF; } /* magenta */
.eo-app-card:nth-child(9) { --eo-app-icon-color: #6D4CC2; } /* purple */
.eo-app-card:nth-child(6) { --eo-app-icon-color: #EAB308; } /* yellow */

/* Keep the fingerprint itself filled by currentColor; no fixed SVG colour. */
.eo-app-icon .eo-icon-svg path {
    fill: currentColor;
}