/* Hide some pagination links on small screens */
@media (max-width: 600px) {
    .pagination .page-item:nth-child(n + 4):nth-last-child(n + 3) {
        display: none;
    }
}

#add-alert {
    z-index: 9999 !important;
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
}
.contact-card-text {
    line-height: 1 !important;
    font-size: 14px !important;
}

.product-card {
    transition: all 0.3s ease;
    border-radius: 15px !important;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.product-image-wrapper {
    overflow: hidden;
    height: 100%;
    border-radius: 15px 15px 0 0;
}

.product-image {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-image-placeholder {
    height: 220px;
    border-radius: 15px 15px 0 0;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-overlay {
    background: linear-gradient(
        135deg,
        rgba(67, 56, 202, 0.8),
        rgba(79, 70, 229, 0.8)
    );
    transition: opacity 0.3s ease;
    border-radius: 15px 15px 0 0;
}

.product-card:hover .product-overlay {
    opacity: 1 !important;
}

.card-title {
    font-size: 1rem;
    line-height: 1.4;
    color: #2d3748;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8rem;
}

.product-card .card-body {
    padding: 1.25rem 1rem;
}

@media (max-width: 768px) {
    .product-image-wrapper {
        height: 180px;
    }

    .product-image-placeholder {
        height: 180px;
    }

    .card-title {
        font-size: 0.9rem;
    }
}
.btn-danger,
.bg-danger {
    background-color: #d0020c !important;
    border-color: #d0025f !important;
    color: #fff !important;
}
.btn-danger:hover {
    background-color: #a8000a !important;
    border-color: #a8000a !important;
    color: #fff !important;
}

/* ============================================================
   HOME PAGE — Header + Hero: First-Pass Improvements
   Scope: .hero-section and related utility classes only.
   All other sections are untouched.
   ============================================================ */

/* --- Hero Section Container --- */
.hero-section {
    position: relative;
    padding-top: 130px;
    padding-bottom: 70px;
    background: linear-gradient(140deg, #f0f4ff 0%, #e3ebfc 55%, #d5e0fa 100%);
    overflow: hidden;
}

/* Decorative radial glow — top-right */
.hero-section::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 480px;
    height: 480px;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.08) 0%,
        transparent 68%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Decorative radial glow — bottom-left */
.hero-section::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 360px;
    height: 360px;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.05) 0%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Keep all direct children above the decorative pseudo-elements */
.hero-section .container {
    position: relative;
    z-index: 1;
}

/* --- Hero Image --- */
.hero-section .hero-image-wrapper {
    position: relative;
}

.hero-section .hero-image-wrapper img {
    border-radius: 14px;
    filter: drop-shadow(0 24px 48px rgba(57, 108, 240, 0.13));
    transition: transform 0.4s ease;
}

.hero-section .hero-image-wrapper img:hover {
    transform: translateY(-5px);
}

/* --- Hero Description Text --- */
.text-hero-desc {
    color: #4a5568 !important;
    font-size: 1.02rem;
    line-height: 1.75;
    font-weight: 400 !important;
}

/* --- Hero CTA Button Group --- */
.hero-cta-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Left-align CTA group on desktop (two-column layout) */
@media (min-width: 992px) {
    .hero-cta-group {
        justify-content: flex-start;
    }
}

/* --- Hero CTA Button Size --- */
.btn-hero {
    padding: 0.65rem 2rem;
    font-size: 1rem;
    letter-spacing: 0.02em;
    font-weight: 600;
    border-radius: 6px;
}

/* --- Mobile Adjustments --- */
@media (max-width: 991.98px) {
    .hero-section {
        padding-top: 105px;
        padding-bottom: 55px;
        text-align: center;
    }

    .hero-section .hero-image-wrapper {
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .hero-section {
        padding-top: 90px;
        padding-bottom: 45px;
    }

    .text-hero-desc {
        font-size: 0.95rem;
    }

    .btn-hero {
        padding: 0.55rem 1.5rem;
        font-size: 0.93rem;
        width: 100%;
        text-align: center;
    }
}

/* --- RTL Support --- */
[dir="rtl"] .hero-section::before {
    right: auto;
    left: -100px;
}

[dir="rtl"] .hero-section::after {
    left: auto;
    right: -80px;
}

[dir="rtl"] .hero-cta-group {
    justify-content: center;
}

@media (min-width: 992px) {
    [dir="rtl"] .hero-cta-group {
        justify-content: flex-end;
    }
}

/* --- End: Home Page Hero Section (Pass 1 — superseded by ek-hero below) --- */

/* ================================================================
   HOME PAGE — PREMIUM REDESIGN (Full Pass)
   Date: 2026-06-24
   Strategy: All new styles use ek-* prefix.
             Existing Bootstrap/template classes are preserved.
             No style.css edits required.
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   [01] GLOBAL SECTION UTILITIES
────────────────────────────────────────────────────────────── */

.ek-section-badge {
    display: inline-block;
    background: rgba(57, 108, 240, 0.07);
    color: #396cf0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    border-radius: 30px;
    border: 1px solid rgba(57, 108, 240, 0.2);
}

.ek-section-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #1a2744 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}

.ek-title-rule {
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, #396cf0, #6690f5);
    border-radius: 3px;
    display: block;
    margin: 0.8rem auto 0;
}

/* Left-aligned rule variant */
.ek-title-rule.ek-title-rule--left {
    margin-left: 0;
    margin-right: auto;
}

/* ──────────────────────────────────────────────────────────────
   [02] HERO SECTION — ek-hero (animated, network layer, supersedes hero-section)
────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════ */

/* Layer A: background gradient breathes */
@keyframes ek-bg-breathe {
    0%,
    100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

/* Text entrance — rise from below */
@keyframes ek-fade-up {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image entrance — slide from right (LTR) */
@keyframes ek-fade-right {
    from {
        opacity: 0;
        transform: translateX(36px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Image entrance — slide from left (RTL) */
@keyframes ek-fade-left {
    from {
        opacity: 0;
        transform: translateX(-36px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Float loop — primary (image, some chips) */
@keyframes ek-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-13px);
    }
}

/* Float loop — secondary (different rhythm to avoid sync) */
@keyframes ek-float-b {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-18px);
    }
}

/* Large ring — slow rotation */
@keyframes ek-spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Glow behind image */
@keyframes ek-glow-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}

/* Network node — opacity + slight scale breathe */
@keyframes ek-node-pulse {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.55);
    }
}

/* Hub node sonar ring — expands outward and fades */
@keyframes ek-node-ring {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/*
 * Data-pulse travel along a connection line.
 * Uses --travel CSS custom property (set per .ek-conn-N, inherited by child .ek-pulse)
 * so the dot crosses exactly the line's width without animating expensive layout props.
 */
@keyframes ek-travel {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    8% {
        opacity: 0.9;
    }
    88% {
        opacity: 0.9;
        transform: translateX(var(--travel, 180px));
    }
    96% {
        opacity: 0;
        transform: translateX(var(--travel, 180px));
    }
    100% {
        opacity: 0;
        transform: translateX(var(--travel, 180px));
    }
}

/* ════════════════════════════════════════════════════════════
   SECTION SHELL
   ════════════════════════════════════════════════════════════ */

.ek-hero {
    position: relative;
    padding-top: 135px;
    padding-bottom: 85px;
    background: linear-gradient(145deg, #eef3ff 0%, #e2ecfd 50%, #d4e3fb 100%);
    overflow: hidden;
    isolation: isolate; /* keeps z-index stacking local to this section */
}

/* Static radial accent — top right */
.ek-hero::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -130px;
    width: 580px;
    height: 580px;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.1) 0%,
        transparent 65%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Static radial accent — bottom left */
.ek-hero::after {
    content: "";
    position: absolute;
    bottom: -110px;
    left: -90px;
    width: 420px;
    height: 420px;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.06) 0%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Content stack above all background layers */
.ek-hero .container {
    position: relative;
    z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   LAYER A — animated gradient overlay (breathe)
   ════════════════════════════════════════════════════════════ */

.ek-hero__bg-anim {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 60% at 70% 30%,
        rgba(57, 108, 240, 0.09) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: ek-bg-breathe 12s ease-in-out infinite;
    will-change: opacity;
}

/* ════════════════════════════════════════════════════════════
   LAYER B — CSS dot-grid pattern (static texture)
   ════════════════════════════════════════════════════════════ */

.ek-hero__dot-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.13) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
    opacity: 0.5;
    mask-image: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        black 30%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        black 30%,
        transparent 100%
    );
}

/* ════════════════════════════════════════════════════════════
   LAYER C — decorative floating shapes (ring + blobs)
   ════════════════════════════════════════════════════════════ */

.ek-hero__shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Large slow-spinning ring */
.ek-hero__shape--ring {
    top: -80px;
    right: 8%;
    width: 420px;
    height: 420px;
    border: 1.5px solid rgba(57, 108, 240, 0.13);
    border-radius: 50%;
    animation: ek-spin-slow 55s linear infinite;
    will-change: transform;
}

/* Soft blob — upper left */
.ek-hero__shape--blob-1 {
    top: 10%;
    left: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.07) 0%,
        transparent 70%
    );
    border-radius: 50%;
    animation: ek-float 11s ease-in-out infinite;
    will-change: transform;
}

/* Soft blob — lower right */
.ek-hero__shape--blob-2 {
    bottom: 5%;
    right: 5%;
    width: 160px;
    height: 160px;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.09) 0%,
        transparent 70%
    );
    border-radius: 50%;
    animation: ek-float-b 9s ease-in-out infinite;
    animation-delay: 1.8s;
    will-change: transform;
}

/* ════════════════════════════════════════════════════════════
   LAYER D — NETWORK TECHNOLOGY LAYER
   Represents IT infrastructure, data communication, network topology.
   Visual metaphor: nodes connected by traces with live data-flow pulses.
   All elements are purely decorative (parent has aria-hidden="true").
   ════════════════════════════════════════════════════════════ */

/* Wrapper spans the full hero, sits between bg layers and content */
.ek-net {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* above layers A/B/C (z-index:0), below .container (z-index:2) */
    overflow: hidden;
}

/* ── Network nodes — junction/connection points ───────────── */

.ek-node {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(57, 108, 240, 0.55);
    box-shadow: 0 0 10px rgba(57, 108, 240, 0.28);
    animation: ek-node-pulse 4.5s ease-in-out infinite;
    will-change: opacity, transform;
}

/* Hub nodes emit a sonar ring via ::after */
.ek-node--hub::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1.5px solid rgba(57, 108, 240, 0.45);
    border-radius: 50%;
    animation: ek-node-ring 3s ease-out infinite;
    will-change: transform, opacity;
}

/*
 * Node positions across the full hero width.
 * Nodes 1–3 lean toward the text column (left side).
 * Nodes 4–6 lean toward the image column (right side).
 * Opacity kept low on text-side nodes so they never compete with copy.
 */
.ek-node-1 {
    top: 20%;
    left: 5%;
    width: 7px;
    height: 7px;
    opacity: 0.38;
    animation-delay: 0s;
}
.ek-node-2 {
    top: 56%;
    left: 18%;
    width: 9px;
    height: 9px;
    animation-delay: 1.1s;
} /* hub */
.ek-node-3 {
    top: 80%;
    left: 40%;
    width: 5px;
    height: 5px;
    animation-delay: 2.3s;
}
.ek-node-4 {
    top: 14%;
    left: 75%;
    width: 10px;
    height: 10px;
    animation-delay: 0.6s;
} /* hub */
.ek-node-5 {
    top: 50%;
    left: 88%;
    width: 7px;
    height: 7px;
    animation-delay: 1.8s;
}
.ek-node-6 {
    top: 75%;
    left: 74%;
    width: 5px;
    height: 5px;
    animation-delay: 3.2s;
}

/* Hub ring delays match their node animation-delay so ring fires in sync */
.ek-node-2.ek-node--hub::after {
    animation-delay: 1.1s;
}
.ek-node-4.ek-node--hub::after {
    animation-delay: 0.6s;
}

/* ── Connection traces — topology edges ───────────────────── */
/*
 * Each .ek-conn is a thin gradient bar rotated to connect node areas.
 * Its child .ek-pulse (a bright dot) travels translateX across the line.
 * --travel is inherited from the parent connection to size the animation.
 */

.ek-conn {
    position: absolute;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(57, 108, 240, 0.2) 20%,
        rgba(57, 108, 240, 0.2) 80%,
        transparent 100%
    );
    transform-origin: left center;
}

/* Data-pulse dot: sits at start of each line, travels to the end */
.ek-conn .ek-pulse {
    position: absolute;
    top: -2px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(57, 108, 240, 0.95);
    box-shadow:
        0 0 8px rgba(57, 108, 240, 0.7),
        0 0 18px rgba(57, 108, 240, 0.28);
    animation: ek-travel 7s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Conn 1: Node 1 → Node 2 direction — left side, angled downward */
.ek-conn-1 {
    top: calc(20% + 3px); /* center on node-1 vertically */
    left: calc(5% + 4px); /* start at node-1 right edge */
    width: 215px;
    transform: rotate(23deg);
    --travel: 215px;
}
.ek-conn-1 .ek-pulse {
    animation-delay: 0.3s;
}

/* Conn 2: Node 2 → Node 3 direction — lower left, shallow angle */
.ek-conn-2 {
    top: calc(56% + 5px);
    left: calc(18% + 5px);
    width: 250px;
    transform: rotate(13deg);
    --travel: 250px;
}
.ek-conn-2 .ek-pulse {
    animation-delay: 2.8s;
}

/* Conn 3: Node 4 → Node 5 direction — right side, steep angle */
.ek-conn-3 {
    top: calc(14% + 5px);
    left: calc(75% + 5px);
    width: 115px;
    transform: rotate(38deg);
    --travel: 115px;
}
.ek-conn-3 .ek-pulse {
    animation-delay: 1.5s;
}

/* Conn 4: Long cross-hero trace — links left and right network regions */
.ek-conn-4 {
    top: 32%;
    left: 32%;
    width: 340px;
    transform: rotate(-5deg);
    --travel: 340px;
}
.ek-conn-4 .ek-pulse {
    animation-delay: 4.2s;
}

/* ── Floating infrastructure status chips ─────────────────── */
/*
 * Minimal pill-shaped cards suggesting network/system status panels.
 * ::before = glowing indicator dot (like a live status LED).
 * ::after  = placeholder bar suggesting a label or metric value.
 */

.ek-chip {
    position: absolute;
    display: block;
    border: 1px solid rgba(57, 108, 240, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        0 2px 14px rgba(57, 108, 240, 0.09),
        0 1px 4px rgba(0, 0, 0, 0.04);
    animation: ek-float 10s ease-in-out infinite;
    will-change: transform;
}

/* Status indicator dot */
.ek-chip::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(57, 108, 240, 0.6);
    animation: ek-node-pulse 3.5s ease-in-out infinite;
    will-change: opacity, transform;
}

/* Label-bar placeholder */
.ek-chip::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    border-radius: 3px;
    background: rgba(57, 108, 240, 0.18);
}

/* Chip 1: lower-left, below text column — subtle, safe from copy overlap */
.ek-chip-1 {
    width: 74px;
    height: 28px;
    bottom: 18%;
    left: 2%;
    animation-delay: 0.5s;
}
.ek-chip-1::after {
    width: 34px;
}

/* Chip 2: right edge — behind image column, floats on alternate rhythm */
.ek-chip-2 {
    width: 62px;
    height: 25px;
    top: 26%;
    right: 3%;
    animation-name: ek-float-b;
    animation-delay: 2.4s;
}
.ek-chip-2::before {
    animation-delay: 1.2s;
}
.ek-chip-2::after {
    width: 26px;
}

/* Chip 3: lower-right — overlaps image area edge */
.ek-chip-3 {
    width: 68px;
    height: 26px;
    bottom: 14%;
    right: 20%;
    animation-delay: 1.2s;
}
.ek-chip-3::after {
    width: 30px;
}

/* ════════════════════════════════════════════════════════════
   TEXT ENTRANCE ANIMATIONS
   ════════════════════════════════════════════════════════════ */

.ek-anim-fadeup {
    animation: ek-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ek-anim-delay-2 {
    animation-delay: 0.2s;
}
.ek-anim-delay-3 {
    animation-delay: 0.38s;
}

/* ════════════════════════════════════════════════════════════
   HEADLINE
   ════════════════════════════════════════════════════════════ */

.ek-hero__headline {
    font-size: 3rem !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    color: #1a2744 !important;
    letter-spacing: -0.025em;
}

.ek-hero__headline-accent {
    color: #396cf0 !important;
    display: block;
    margin-top: 0.1em;
}

/* ════════════════════════════════════════════════════════════
   DESCRIPTION
   ════════════════════════════════════════════════════════════ */

.ek-hero__desc {
    font-size: 1.02rem;
    line-height: 1.78;
    color: #4a5568 !important;
    font-weight: 400 !important;
    max-width: 520px;
}

/* ════════════════════════════════════════════════════════════
   CTA GROUP
   ════════════════════════════════════════════════════════════ */

.ek-hero__cta {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Primary CTA — lift + shadow deepen */
.ek-hero__cta .btn-primary {
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}
.ek-hero__cta .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(57, 108, 240, 0.35) !important;
}

/* Outline CTA — lift only */
.ek-hero__cta .btn-outline-primary {
    transition:
        transform 0.24s ease,
        background-color 0.24s ease,
        color 0.24s ease;
}
.ek-hero__cta .btn-outline-primary:hover {
    transform: translateY(-3px);
}

/* ════════════════════════════════════════════════════════════
   IMAGE COLUMN
   ════════════════════════════════════════════════════════════ */

/* Outer wrapper: entrance animation from right */
.ek-hero__img-wrap {
    position: relative;
    display: inline-block;
    animation: ek-fade-right 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

/* Pulsing glow behind image */
.ek-hero__img-glow {
    position: absolute;
    inset: 8% 8%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(57, 108, 240, 0.18) 0%,
        transparent 70%
    );
    filter: blur(28px);
    z-index: 0;
    animation: ek-glow-pulse 6s ease-in-out infinite;
    will-change: opacity, transform;
}

/*
 * Inner wrapper: continuous float loop.
 * Separated from outer wrapper so the entrance transform
 * and the float transform never fight each other.
 */
.ek-hero__img-float {
    position: relative;
    z-index: 1;
    animation: ek-float 7s ease-in-out infinite;
    animation-delay: 1.2s;
    will-change: transform;
}

.ek-hero__img-float img {
    border-radius: 18px;
    filter: drop-shadow(0 28px 56px rgba(57, 108, 240, 0.18));
    display: block;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* ── Tablet and below (≤991.98px) ──────────────────────────── */
@media (max-width: 991.98px) {
    .ek-hero {
        padding-top: 105px;
        padding-bottom: 60px;
        text-align: center;
    }
    .ek-hero__headline {
        font-size: 2.3rem !important;
    }
    .ek-hero__desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .ek-hero__img-wrap {
        margin-top: 2.5rem;
    }

    /* Disable float on tablet — reduces motion on touch layout */
    .ek-hero__img-float {
        animation: none;
    }

    /* Shape layer: hide large blob to reduce clutter */
    .ek-hero__shape--blob-1 {
        display: none;
    }

    /* Network layer: strip down to nodes only, hide chips and cross-hero line */
    .ek-net .ek-chip {
        display: none;
    }
    .ek-conn-4 {
        display: none;
    }
    /* Keep 4 of 6 nodes — hide least visible ones */
    .ek-node-3,
    .ek-node-5 {
        display: none;
    }
}

/* ── Mobile (≤575.98px) ─────────────────────────────────────── */
@media (max-width: 575.98px) {
    .ek-hero {
        padding-top: 90px;
        padding-bottom: 50px;
    }
    .ek-hero__headline {
        font-size: 1.9rem !important;
    }
    .ek-hero__cta .btn-hero {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Hide large spinning ring — too wide for narrow viewport */
    .ek-hero__shape--ring {
        display: none;
    }

    /* Network layer: keep only 2 nodes + 1 simple connection on mobile */
    .ek-node-2,
    .ek-node-4,
    .ek-node-6 {
        display: none;
    }
    .ek-conn-2,
    .ek-conn-3 {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   RTL OVERRIDES
   ════════════════════════════════════════════════════════════ */

/* Image entrance from left in RTL layout */
[dir="rtl"] .ek-hero__img-wrap {
    animation-name: ek-fade-left;
}

/* Radial accent positions flip */
[dir="rtl"] .ek-hero::before {
    right: auto;
    left: -130px;
}
[dir="rtl"] .ek-hero::after {
    left: auto;
    right: -90px;
}

/* Text alignment and CTA justification */
[dir="rtl"] .ek-hero__cta {
    justify-content: center;
}
[dir="rtl"] .ek-hero__desc {
    text-align: right;
}
@media (min-width: 992px) {
    [dir="rtl"] .ek-hero__cta {
        justify-content: flex-end;
    }
}

/* Shape positions mirror */
[dir="rtl"] .ek-hero__shape--ring {
    right: auto;
    left: 8%;
}
[dir="rtl"] .ek-hero__shape--blob-1 {
    left: auto;
    right: -60px;
}

/*
 * Network layer RTL — mirror node horizontal positions (left ↔ right).
 * Connection line geometry is decorative; left-based positioning is retained
 * for lines to avoid complex rotated-origin calculations. Nodes and chips mirror.
 */
[dir="rtl"] .ek-node-1 {
    left: auto;
    right: 5%;
}
[dir="rtl"] .ek-node-2 {
    left: auto;
    right: 18%;
}
[dir="rtl"] .ek-node-3 {
    left: auto;
    right: 40%;
}
[dir="rtl"] .ek-node-4 {
    left: auto;
    right: 75%;
}
[dir="rtl"] .ek-node-5 {
    left: auto;
    right: 88%;
}
[dir="rtl"] .ek-node-6 {
    left: auto;
    right: 74%;
}

[dir="rtl"] .ek-chip-1 {
    left: auto;
    right: 2%;
}
[dir="rtl"] .ek-chip-2 {
    right: auto;
    left: 3%;
}
[dir="rtl"] .ek-chip-3 {
    right: auto;
    left: 20%;
}

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion
   All decorative animations stopped. Content visible immediately.
   ════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    /* Background layers — stop ambient motion */
    .ek-hero__bg-anim,
    .ek-hero__shape--ring,
    .ek-hero__shape--blob-1,
    .ek-hero__shape--blob-2 {
        animation: none;
    }

    /* Content entrance — show immediately at full opacity */
    .ek-anim-fadeup,
    .ek-hero__img-wrap,
    .ek-hero__img-float {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Image glow — static, no pulse */
    .ek-hero__img-glow {
        animation: none;
        opacity: 0.5;
        transform: none;
    }

    /* Network layer — all motion stopped */
    .ek-node,
    .ek-node--hub::after {
        animation: none;
        opacity: 0.4;
        transform: none;
    }

    /* Hide traveling data-pulse dots — they are purely motion */
    .ek-conn .ek-pulse {
        display: none;
    }

    /* Chips — static, no float */
    .ek-chip,
    .ek-chip::before {
        animation: none;
        transform: none;
    }
    .ek-chip::before {
        opacity: 0.55;
    }
}

/* ──────────────────────────────────────────────────────────────
   [03] BTN-HERO — updated size (applies globally to all CTAs)
────────────────────────────────────────────────────────────── */

.btn-hero {
    padding: 0.7rem 2.1rem !important;
    font-size: 0.97rem !important;
    letter-spacing: 0.02em;
    border-radius: 7px !important;
    font-weight: 600 !important;
}

@media (max-width: 575.98px) {
    .btn-hero {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.93rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   [04] MISSION / BENEFITS SECTION
────────────────────────────────────────────────────────────── */

.ek-mission {
    background: #ffffff;
}

/* Benefit Cards */
.ek-benefit-card {
    background: #ffffff;
    border: 1px solid rgba(57, 108, 240, 0.09) !important;
    border-radius: 18px !important;
    padding: 2.5rem 1.75rem 2.25rem;
    box-shadow: 0 2px 16px rgba(57, 108, 240, 0.05);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Top-border reveal on hover */
.ek-benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #396cf0, #6690f5);
    border-radius: 18px 18px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.38s ease;
}

.ek-benefit-card:hover::before {
    transform: scaleX(1);
}

.ek-benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 52px rgba(57, 108, 240, 0.12) !important;
    border-color: rgba(57, 108, 240, 0.15) !important;
}

/* Icon box */
.ek-benefit-card__icon {
    width: 68px;
    height: 68px;
    background: rgba(57, 108, 240, 0.08);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease;
}

.ek-benefit-card__icon .fea {
    width: 26px;
    height: 26px;
    stroke: #396cf0;
    transition: stroke 0.35s ease;
}

.ek-benefit-card:hover .ek-benefit-card__icon {
    background: #396cf0;
}

.ek-benefit-card:hover .ek-benefit-card__icon .fea {
    stroke: #ffffff;
}

.ek-benefit-card__title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    letter-spacing: 0.01em;
    margin-bottom: 0;
}

/* RTL benefit card */
[dir="rtl"] .ek-benefit-card::before {
    transform-origin: right;
}

/* ──────────────────────────────────────────────────────────────
   [05] VIDEO PRESENTATION
────────────────────────────────────────────────────────────── */

.ek-video-block {
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 28px 72px rgba(57, 108, 240, 0.2) !important;
}

/* Override bg-overlay dark color with branded gradient */
.ek-video-overlay {
    background: linear-gradient(
        135deg,
        rgba(12, 26, 78, 0.88) 0%,
        rgba(57, 108, 240, 0.68) 100%
    ) !important;
    z-index: 1;
}

/* Content row sits above the overlay */
.ek-video-block .ek-video-content {
    position: relative;
    z-index: 2;
}

/* Play button */
.ek-play-btn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

/* Pulse ring 1 */
.ek-play-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.28);
    animation: ek-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

/* Pulse ring 2 */
.ek-play-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.13);
    animation: ek-pulse 2.4s ease-out 0.7s infinite;
    pointer-events: none;
}

@keyframes ek-pulse {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

.ek-play-btn:hover {
    background: rgba(57, 108, 240, 0.7);
    border-color: #ffffff !important;
    transform: scale(1.1);
}

.ek-play-btn .fea {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    margin-left: 4px; /* optical center for play icon */
    position: relative;
    z-index: 1;
}

[dir="rtl"] .ek-play-btn .fea {
    margin-left: 0;
    margin-right: 4px;
}

/* ──────────────────────────────────────────────────────────────
   [06] SOLUTIONS + PARTNERS + SERVICES SECTION
────────────────────────────────────────────────────────────── */

/* Solutions image */
.ek-solutions-img {
    border-radius: 20px !important;
    box-shadow: 0 28px 72px rgba(57, 108, 240, 0.15) !important;
    transition: transform 0.45s ease;
    display: block;
    width: 100%;
    object-fit: cover;
}

.ek-solutions-img:hover {
    transform: translateY(-6px);
}

/* Partners strip */
.ek-partners-strip {
    border-top: 1px solid rgba(57, 108, 240, 0.1);
    border-bottom: 1px solid rgba(57, 108, 240, 0.1);
    padding: 2.25rem 0;
    background: rgba(255, 255, 255, 0.65);
}

.ek-partner-item img {
    filter: grayscale(100%);
    opacity: 0.48;
    transition: all 0.38s ease;
    max-height: 54px;
    object-fit: contain;
}

.ek-partner-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.07);
}

/* Service Cards */
.ek-service-card {
    background: #ffffff;
    border: 1px solid rgba(57, 108, 240, 0.08);
    border-radius: 18px;
    padding: 2.5rem 1.75rem 2.25rem;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(57, 108, 240, 0.05);
}

/* Left-border reveal on hover */
.ek-service-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #396cf0, #6690f5);
    border-radius: 18px 0 0 18px;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.38s ease;
}

.ek-service-card:hover::after {
    transform: scaleY(1);
}

.ek-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 52px rgba(57, 108, 240, 0.11);
    border-color: rgba(57, 108, 240, 0.18);
}

/* Service icon box */
.ek-service-card__icon {
    width: 66px;
    height: 66px;
    background: rgba(57, 108, 240, 0.08);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    transition: background 0.35s ease;
}

.ek-service-card__icon i {
    font-size: 1.65rem;
    color: #396cf0;
    transition: color 0.35s ease;
}

.ek-service-card:hover .ek-service-card__icon {
    background: #396cf0;
}

.ek-service-card:hover .ek-service-card__icon i {
    color: #ffffff;
}

.ek-service-card__title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1a2744 !important;
    letter-spacing: 0.01em;
}

/* RTL service card */
[dir="rtl"] .ek-service-card::after {
    left: auto;
    right: 0;
    border-radius: 0 18px 18px 0;
    transform-origin: top;
}

/* ──────────────────────────────────────────────────────────────
   [07] TESTIMONIALS SECTION
────────────────────────────────────────────────────────────── */

.ek-testi-section {
    background: linear-gradient(155deg, #f6f9ff 0%, #edf1fc 100%);
}

/* Suppress the original speech-bubble triangle */
.ek-testi-item .content::before {
    display: none !important;
}

/* Testimonial card (also has .content class for JS height equalization) */
.ek-testi-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(57, 108, 240, 0.07) !important;
    border-top: 3px solid #396cf0 !important;
    padding: 1.75rem 1.6rem 1.5rem;
    box-shadow: 0 4px 22px rgba(57, 108, 240, 0.06);
    transition:
        box-shadow 0.32s ease,
        transform 0.32s ease;
}

.ek-testi-card:hover {
    box-shadow: 0 14px 44px rgba(57, 108, 240, 0.13);
    transform: translateY(-4px);
}

/* Decorative opening quote */
.ek-testi-quote {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(57, 108, 240, 0.14);
    display: block;
    margin-bottom: -0.65rem;
    user-select: none;
}

[dir="rtl"] .ek-testi-quote {
    text-align: right;
}

/* ──────────────────────────────────────────────────────────────
   [08] BLOG / LATEST NEWS SECTION
────────────────────────────────────────────────────────────── */

.ek-blog-section {
    background: #f4f6fb !important;
}

/* Blog card */
.ek-blog-card {
    background: #ffffff;
    border-radius: 18px !important;
    border: 1px solid rgba(57, 108, 240, 0.07) !important;
    overflow: hidden;
    transition: all 0.38s ease;
    box-shadow: 0 2px 14px rgba(57, 108, 240, 0.05) !important;
}

.ek-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 58px rgba(57, 108, 240, 0.13) !important;
}

/* Blog image */
.ek-blog-img {
    overflow: hidden;
    line-height: 0;
}

.ek-blog-img img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.ek-blog-card:hover .ek-blog-img img {
    transform: scale(1.05);
}

/* Blog tag — override bg-light with primary */
.ek-blog-img .blog-tag {
    position: absolute;
    bottom: -32px;
    left: 14px;
    transition: all 0.4s ease;
    opacity: 0;
}

.ek-blog-card:hover .ek-blog-img .blog-tag {
    bottom: 14px;
    opacity: 1;
}

.ek-blog-img .blog-tag .badge {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.28rem 0.7rem;
}

/* Read more link */
.ek-readmore {
    color: #396cf0 !important;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition:
        gap 0.2s ease,
        color 0.2s ease;
}

.ek-readmore:hover {
    color: #215aee !important;
    gap: 0.5rem;
}

[dir="rtl"] .ek-readmore i {
    transform: scaleX(-1);
}

/* ──────────────────────────────────────────────────────────────
   [09] FOOTER POLISH (subtle, non-destructive)
────────────────────────────────────────────────────────────── */

#topnav.nav-sticky {
    box-shadow: 0 2px 24px rgba(57, 108, 240, 0.09) !important;
    border-bottom: 1px solid rgba(57, 108, 240, 0.07) !important;
}

.foot-social-icon li a {
    transition: all 0.3s ease !important;
}

.foot-social-icon li a:hover {
    background: #396cf0 !important;
    border-color: #396cf0 !important;
    color: #fff !important;
}

/* ──────────────────────────────────────────────────────────────
   [10] RESPONSIVE
────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .ek-section-title {
        font-size: 1.7rem !important;
    }
    .ek-benefit-card {
        padding: 2rem 1.25rem 1.75rem;
    }
    .ek-service-card {
        padding: 2rem 1.25rem 1.75rem;
    }
    .ek-video-block {
        border-radius: 16px !important;
    }
}

@media (max-width: 575.98px) {
    .ek-section-title {
        font-size: 1.5rem !important;
    }
    .ek-partners-strip {
        padding: 1.5rem 0;
    }
    .ek-testi-section .tns-nav {
        margin-top: 1.25rem;
    }
}

/* ──────────────────────────────────────────────────────────────
   [11] RTL — Additional overrides
────────────────────────────────────────────────────────────── */

[dir="rtl"] .ek-title-rule {
    margin-left: auto;
    margin-right: auto;
}

[dir="rtl"] .ek-title-rule.ek-title-rule--left {
    margin-right: 0;
}

/* ──────────────────────────────────────────────────────────────
   End: Home Page Premium Redesign
────────────────────────────────────────────────────────────── */

/* [PHASE 1 — Global Design System Foundation] */

/* ================================================================
   PHASE 1 — GLOBAL DESIGN SYSTEM FOUNDATION
   Scope  : Interior pages — CSS additions only.
   Files  : custom.css only. No Blade/JS/PHP files touched.
   Rollback: Delete everything between the PHASE 1 open/close tags.
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   P1-01  DESIGN TOKENS
   All --ek-* custom properties. Home page ek-* classes still use
   hardcoded hex values — these tokens are additive for Phase 1+.
────────────────────────────────────────────────────────────── */

:root {
    /* Brand colors */
    --ek-primary: #396cf0;
    --ek-primary-dark: #2a52c4;
    --ek-primary-light: rgba(57, 108, 240, 0.07);

    /* Text colors */
    --ek-navy: #1a2744;
    --ek-body: #4a5568;
    --ek-muted: #6c757d;

    /* Surface / border */
    --ek-border: #e2e8f0;
    --ek-surface: #ffffff;
    --ek-bg-soft: #f8faff;

    /* Shadows */
    --ek-shadow-sm: 0 2px 8px rgba(57, 108, 240, 0.06);
    --ek-shadow-md: 0 4px 20px rgba(57, 108, 240, 0.1);
    --ek-shadow-lg: 0 8px 32px rgba(57, 108, 240, 0.14);

    /* Border radii */
    --ek-radius-sm: 8px;
    --ek-radius-md: 12px;
    --ek-radius-lg: 16px;

    /* Transition */
    --ek-transition: 0.25s ease;
}

/* ──────────────────────────────────────────────────────────────
   P1-02  HERO BACKGROUND FIX
   Forces cover sizing on interior page heroes (section.bg-half).
   The Home Page hero uses section.ek-hero — not affected.
────────────────────────────────────────────────────────────── */

section.bg-half {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ──────────────────────────────────────────────────────────────
   P1-03  TYPOGRAPHY BASELINE
   Scoped to .section containers so existing theme and ek-hero
   styles are not disrupted.
────────────────────────────────────────────────────────────── */

/* Body / muted text inside content sections */
.section .text-muted {
    color: var(--ek-body) !important;
}

/* Section heading color — interior pages */
.section-title .title,
.title-heading .title {
    color: var(--ek-navy);
}

/* Readable max line width on section description paragraphs */
.section-title .para-desc,
.section .para-desc {
    max-width: 640px;
}

/* ──────────────────────────────────────────────────────────────
   P1-04  BREADCRUMB CONSISTENCY
   Unified padding and brand color for all page breadcrumbs.
   No Blade changes — overrides existing .breadcrumb classes.
────────────────────────────────────────────────────────────── */

.breadcrumb {
    padding-inline: 1.25rem;
    padding-block: 0.5rem;
    margin-bottom: 0;
}

.breadcrumb-item a {
    color: var(--ek-primary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color var(--ek-transition);
}

.breadcrumb-item a:hover {
    color: var(--ek-primary-dark);
}

.breadcrumb-item.active {
    color: var(--ek-muted);
    font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--ek-border);
}

/* ──────────────────────────────────────────────────────────────
   P1-05  FORM FOCUS STATES
   Brand-blue focus ring on all text inputs, textareas, selects,
   and Choices.js custom selects.
────────────────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
    border-color: var(--ek-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(57, 108, 240, 0.15) !important;
    outline: none;
}

/* Choices.js wrapper focus — does not break its internal styling */
.choices__inner:focus-within {
    border-color: var(--ek-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(57, 108, 240, 0.15) !important;
}

/* ──────────────────────────────────────────────────────────────
   P1-06  FORM LABELS
   Consistent label weight and color across all forms.
────────────────────────────────────────────────────────────── */

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ek-navy);
    margin-bottom: 0.375rem;
}

/* ──────────────────────────────────────────────────────────────
   P1-07  NEWSLETTER BUTTON COLOR FIX
   Overrides the off-brand green (btn-success) on the About page
   newsletter subscribe button. No Blade file changes.
   Note: selector matches the "subcribe" typo in the Blade template.
────────────────────────────────────────────────────────────── */

.subcribe-form .btn-success {
    background-color: var(--ek-primary) !important;
    border-color: var(--ek-primary) !important;
}

.subcribe-form .btn-success:hover,
.subcribe-form .btn-success:focus {
    background-color: var(--ek-primary-dark) !important;
    border-color: var(--ek-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(57, 108, 240, 0.3) !important;
}

/* ──────────────────────────────────────────────────────────────
   P1-08  REDUCED MOTION
   Disables Phase 1 transitions for users who prefer reduced motion.
────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .breadcrumb-item a,
    .subcribe-form .btn-success {
        transition: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   P1-09  RTL BASELINE
   Directional overrides for Phase 1 additions.
   Logical properties used throughout (padding-inline, etc.)
   so most rules already auto-flip in RTL. Only explicit
   overrides listed below.
────────────────────────────────────────────────────────────── */

/* Breadcrumb separator direction in RTL */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-inline-end: 0.5rem;
    padding-inline-start: 0;
}

/* Para-desc centering — auto in both directions */
[dir="rtl"] .section-title .para-desc,
[dir="rtl"] .section .para-desc {
    max-width: 640px;
}

/* [/PHASE 1 — Global Design System Foundation] */

/* [PHASE 2 — Navigation & Footer Polish] */

/* ================================================================
   PHASE 2 — NAVIGATION & FOOTER POLISH (Enhanced)
   Previous version: text-decoration underline — too subtle at
   12px uppercase text, opacity too low on hover/social.
   This version: pill backgrounds on nav, frosted sticky nav,
   polished dropdown, strong footer hover with movement + glow.
   Scope  : Shared nav and footer — CSS additions only.
   Files  : custom.css only. No Blade/JS/PHP files touched.
   Rollback: Delete everything between the PHASE 2 open/close tags.
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   P2-01  NAV LINK BASE — pill shape setup (desktop only)
   Adds border-radius and vertical padding for the pill shape.
   Logo line-height: 68px locks nav height — nav links at 34px
   (24px line-height + 5px×2) stay well within that ceiling.
   Transitions tightened from 0.5s to 0.2s for snappy pill feel.
────────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
    /* ──────────────────────────────────────────────────────────────
   P2-01  NAV LINK BASE — layout-safe setup
   HOTFIX: removed padding-top/bottom (caused nav height increase
   in the flex nav layout). Border-radius kept — it only affects
   the background shape, not element dimensions.
────────────────────────────────────────────────────────────── */

    #topnav .navigation-menu > li > a.sub-menu-item {
        border-radius: 4px;
        transition:
            background-color 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease !important;
    }

    /* ──────────────────────────────────────────────────────────────
   P2-02  ACTIVE NAV — tint + inset bottom bar
   inset box-shadow draws a 3px bottom line INSIDE the element's
   own box — zero layout impact regardless of element height.
   background tint + bold weight make the state clearly visible.
   Active class sits on <a> for simple links (Home/About/etc.)
   and on both <li> + <a> for submenu parents (Resources/Products).
────────────────────────────────────────────────────────────── */

    #topnav .navigation-menu > li > a.sub-menu-item.active,
    #topnav .navigation-menu > li.active > a.sub-menu-item {
        background-color: rgba(57, 108, 240, 0.09) !important;
        color: var(--ek-primary) !important;
        font-weight: 700;
        box-shadow: inset 0 -3px 0 var(--ek-primary);
    }

    /* ──────────────────────────────────────────────────────────────
   P2-03  HOVER NAV — softer tint, no bottom bar
────────────────────────────────────────────────────────────── */

    #topnav .navigation-menu > li > a.sub-menu-item:hover {
        background-color: rgba(57, 108, 240, 0.06) !important;
        color: var(--ek-primary) !important;
        box-shadow: none;
    }

    /* ──────────────────────────────────────────────────────────────
   P2-04  NAV-LIGHT — white tint + white bar (hero pages, before scroll)
   Pages with @section('nav-logo-light','') use .nav-light class.
   White semi-transparent tint + white inset bar readable against
   the dark bg-overlay on hero sections.
────────────────────────────────────────────────────────────── */

    #topnav .navigation-menu.nav-light > li > a.sub-menu-item.active,
    #topnav .navigation-menu.nav-light > li.active > a.sub-menu-item {
        background-color: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        font-weight: 700;
        box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.85);
    }

    #topnav .navigation-menu.nav-light > li > a.sub-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        box-shadow: none;
    }

    /* ──────────────────────────────────────────────────────────────
   P2-05  NAV-STICKY + NAV-LIGHT — switch to blue after scroll
   nav-sticky is added by app.js when the user scrolls; at that
   point the nav background becomes white so the white bar would
   be invisible. Override back to brand blue.
────────────────────────────────────────────────────────────── */

    #topnav.nav-sticky .navigation-menu.nav-light > li > a.sub-menu-item.active,
    #topnav.nav-sticky
        .navigation-menu.nav-light
        > li.active
        > a.sub-menu-item {
        background-color: rgba(57, 108, 240, 0.09) !important;
        color: var(--ek-primary) !important;
        font-weight: 700;
        box-shadow: inset 0 -3px 0 var(--ek-primary);
    }

    #topnav.nav-sticky .navigation-menu.nav-light > li > a.sub-menu-item:hover {
        background-color: rgba(57, 108, 240, 0.06) !important;
        color: var(--ek-primary) !important;
        box-shadow: none;
    }

    /* ──────────────────────────────────────────────────────────────
   P2-06  DROPDOWN POLISH (desktop)
   Softer border, branded shadow, radius. Item hover gets a
   light blue fill. Does not change positioning or structure.
────────────────────────────────────────────────────────────── */

    #topnav .navigation-menu > li .submenu {
        border-radius: var(--ek-radius-sm) !important;
        border-color: var(--ek-border) !important;
        box-shadow: var(--ek-shadow-md) !important;
    }

    #topnav .navigation-menu > li .submenu li a {
        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }

    #topnav .navigation-menu > li .submenu li a:hover {
        background-color: var(--ek-primary-light) !important;
        color: var(--ek-primary) !important;
    }

    /* ──────────────────────────────────────────────────────────────
   P2-06b  DROPDOWN ARROW MICRO-FIX
   .menu-arrow is position:absolute; right:-5px in style.css,
   placing it 5 px OUTSIDE the li/a right edge. Phase 2's
   background tint on <a> made the arrow visually disconnected
   from the pill area.
   Fix: pull the arrow inside the li (right: 6px) and widen
   <a> padding-right so text never overlaps the arrow.
   top: 32px is unchanged — it already centres in the 62px+ flex li.
────────────────────────────────────────────────────────────── */

    /* Pull arrow inside the li/a background area */
    #topnav .navigation-menu > li.has-submenu .menu-arrow {
        right: 6px; /* was -5px (outside li) in style.css */
    }

    /* Widen right padding to keep text clear of the repositioned arrow */
    #topnav .navigation-menu > li.has-submenu > a.sub-menu-item {
        padding-right: 18px !important;
    }

    /* Colour arrow on active (hover is already covered by style.css) */
    #topnav .navigation-menu > li.has-submenu.active > .menu-arrow {
        border-color: var(--ek-primary) !important;
    }
} /* end @media (min-width: 992px) */

/* ──────────────────────────────────────────────────────────────
   P2-07  STICKY NAV — frosted-glass elevation
   Overrides and strengthens the existing [09] block shadow.
   backdrop-filter: blur gives a premium frosted-glass effect
   on all modern browsers. Falls back gracefully without it.
────────────────────────────────────────────────────────────── */

#topnav.nav-sticky {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 32px rgba(57, 108, 240, 0.13) !important;
    border-bottom: 1px solid rgba(57, 108, 240, 0.09) !important;
}

/* ──────────────────────────────────────────────────────────────
   P2-08  FOOTER SOCIAL ICONS — glow lift hover
   The [09] block already sets blue background/color on hover.
   This adds a branded glow shadow and a stronger vertical lift.
────────────────────────────────────────────────────────────── */

.foot-social-icon li a {
    transition: all 0.25s ease !important;
}

.foot-social-icon li a:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 18px rgba(57, 108, 240, 0.4) !important;
}

/* ──────────────────────────────────────────────────────────────
   P2-09  FOOTER TEXT LINKS — light-blue nudge hover
   Brand blue #396cf0 yields only ~2.1:1 contrast on footer
   bg #35404E — below WCAG AA. Using #d4e4ff (light brand blue,
   7.0:1 contrast) for strong legibility with a brand feel.
   translateX nudge creates the "inline movement" effect.
────────────────────────────────────────────────────────────── */

footer .footer-list li a {
    display: inline-block;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

footer .footer-list li a:hover,
footer .footer-list li a:focus {
    color: #d4e4ff !important;
    transform: translateX(5px);
}

/* ──────────────────────────────────────────────────────────────
   P2-10  FOOTER HEADING ACCENT LINE
   Adds a short brand-blue rule under each footer column heading.
   Positioned with ::after — no Blade changes needed.
────────────────────────────────────────────────────────────── */

footer .footer-head {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 4px;
}

footer .footer-head::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 28px;
    height: 2px;
    background: var(--ek-primary);
    border-radius: 2px;
}

/* ──────────────────────────────────────────────────────────────
   P2-11  RTL OVERRIDES
   translateX direction flips for footer link nudge.
   nav pill and social lift are direction-agnostic.
   footer-head ::after uses inset-inline-start — auto RTL-safe.
────────────────────────────────────────────────────────────── */

/* Arrow micro-fix RTL — mirror padding and arrow side */
[dir="rtl"] #topnav .navigation-menu > li.has-submenu .menu-arrow {
    right: auto;
    left: 6px;
}

[dir="rtl"] #topnav .navigation-menu > li.has-submenu > a.sub-menu-item {
    padding-right: 10px !important; /* restore LTR override */
    padding-left: 18px !important; /* widen left side for arrow */
}

[dir="rtl"] footer .footer-list li a:hover,
[dir="rtl"] footer .footer-list li a:focus {
    transform: translateX(-5px);
}

/* ──────────────────────────────────────────────────────────────
   P2-12  REDUCED MOTION
────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    #topnav .navigation-menu > li > a.sub-menu-item {
        transition:
            background-color 0s,
            color 0s !important;
    }

    .foot-social-icon li a {
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease !important;
    }

    .foot-social-icon li a:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    footer .footer-list li a {
        transition: color 0.2s ease !important;
    }

    footer .footer-list li a:hover,
    footer .footer-list li a:focus {
        transform: none !important;
    }
}

/* [/PHASE 2 — Navigation & Footer Polish] */

/* [PHASE 3A — Shared Card + Button System Baseline] */

/* ─────────────────────────────────────────────────────────────────
   3A-01  BLOG / PROJECT / PRODUCT CARDS — base visual treatment
   Targets .card.blog (blog index, projects index, shop index).
   Blade markup already has border-0, shadow, rounded, overflow-hidden.
   We replace the theme shadow with our token-based shadow and add a
   subtle border + smooth transition. Home page uses .ek-blog-card —
   no overlap with .card.blog.
───────────────────────────────────────────────────────────────── */

.card.blog {
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-md) !important;
    box-shadow: var(--ek-shadow-sm) !important;
    transition:
        transform var(--ek-transition),
        box-shadow var(--ek-transition),
        border-color var(--ek-transition) !important;
}

.card.blog:hover {
    transform: translateY(-4px);
    box-shadow: var(--ek-shadow-md) !important;
    border-color: rgba(57, 108, 240, 0.25) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3A-02  SOLUTIONS CARDS — base visual treatment
   Targets .card.blog-post (solutions index only).
   Blade markup already has border-0, shadow-md, rounded.
───────────────────────────────────────────────────────────────── */

.card.blog-post {
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-md) !important;
    box-shadow: var(--ek-shadow-sm) !important;
    transition:
        transform var(--ek-transition),
        box-shadow var(--ek-transition),
        border-color var(--ek-transition) !important;
}

.card.blog-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--ek-shadow-md) !important;
    border-color: rgba(57, 108, 240, 0.25) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3A-03  CARD IMAGE ASPECT RATIO — consistent image heights
   Targets the .image wrapper inside .card.blog and .card.blog-post.
   Uses aspect-ratio so height is always proportional — no blank
   space on short images, no crop loss on tall images.
   Does NOT target partner logos, nav logo, footer logo, team photos,
   or certification images (.card.work-container is separate).
───────────────────────────────────────────────────────────────── */

.card.blog .image,
.card.blog-post .image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card.blog .image img,
.card.blog-post .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

/* 3A-04  IMAGE ZOOM ON HOVER */
.card.blog:hover .image img,
.card.blog-post:hover .image img {
    transform: scale(1.06);
}

/* ─────────────────────────────────────────────────────────────────
   3A-05  CARD TAG BADGES — blog and product category labels
   Targets .blog-tag badges inside .card.blog.
   Keeps existing bg-light / text-dark — just polishes the shape.
───────────────────────────────────────────────────────────────── */

.card.blog .blog-tag .badge {
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    border-radius: 4px;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
   3A-06  SERVICES / FEATURE CARDS
   Targets .card.feature.bg-transparent (services page only).
   Blade markup has border-0, bg-transparent, p-4, text-center.
   We add visual enclosure on hover — keeping transparent default
   so the grid looks light and open until interaction.
   Icon uses span.text-primary — we add a gentle scale on hover.
───────────────────────────────────────────────────────────────── */

.card.feature.bg-transparent {
    border: 1px solid transparent !important;
    border-radius: var(--ek-radius-md) !important;
    transition:
        background-color var(--ek-transition),
        border-color var(--ek-transition),
        box-shadow var(--ek-transition) !important;
}

.card.feature.bg-transparent:hover {
    background-color: var(--ek-bg-soft) !important;
    border-color: rgba(57, 108, 240, 0.15) !important;
    box-shadow: var(--ek-shadow-sm) !important;
}

/* Icon lift on hover */
.card.feature.bg-transparent .text-primary {
    display: inline-block;
    transition: transform 0.2s ease;
}

.card.feature.bg-transparent:hover .text-primary {
    transform: scale(1.15);
}

/* ─────────────────────────────────────────────────────────────────
   3A-07  CERTIFICATION WORK CONTAINERS
   Targets .card.work-container (About certifications).
   The theme's overlay-work hover effect is kept — we only add a
   shadow lift on hover. No image zoom to protect lightbox overlay.
   .lightbox class and its JS behavior are untouched.
───────────────────────────────────────────────────────────────── */

.card.work-container {
    transition: box-shadow var(--ek-transition) !important;
}

.card.work-container:hover {
    box-shadow: var(--ek-shadow-md) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3A-08  TEAM ITEMS
   Targets .section .team (About team section, no card class).
   Very light enclosure — adds hover shadow only to avoid clashing
   with the existing rounded shadow on team photos.
───────────────────────────────────────────────────────────────── */

.section .team {
    border-radius: var(--ek-radius-md);
    padding: 1rem;
    transition: box-shadow var(--ek-transition);
}

.section .team:hover {
    box-shadow: var(--ek-shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────
   3A-09  PRODUCT CARD ACTION BUTTONS
   Targets btn-sm btn-primary inside .card.blog (shop page).
   Increases minimum touch target to 36px without breaking layout.
   JS addToCart() and route-based view buttons are untouched.
───────────────────────────────────────────────────────────────── */

.card.blog .card-body .btn.btn-sm.btn-primary {
    min-height: 36px;
    padding-block: 0.375rem;
    padding-inline: 0.625rem;
    display: inline-flex;
    align-items: center;
    border-radius: var(--ek-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────
   3A-10  CTA / READ MORE LINKS
   Blog & projects: a.link.text-dark — override to brand blue.
   Solutions: a.text-primary inside ul.list-unstyled — already blue,
   just add weight and motion.
   Feather icons (data-feather) and Unicons (uil) are untouched.
───────────────────────────────────────────────────────────────── */

/* Blog / Projects "Read More" — was text-dark, now brand blue */
.card.blog .card-body a.link {
    color: var(--ek-primary) !important;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition:
        color var(--ek-transition),
        transform var(--ek-transition);
}

.card.blog .card-body a.link:hover {
    color: var(--ek-primary-dark) !important;
    transform: translateX(3px);
}

/* Solutions "Read More" — already text-primary, add weight + motion */
.card.blog-post .card-body ul.list-unstyled a.text-primary {
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition:
        color var(--ek-transition),
        transform var(--ek-transition);
}

.card.blog-post .card-body ul.list-unstyled a.text-primary:hover {
    color: var(--ek-primary-dark) !important;
    transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────
   3A-11  RTL OVERRIDES
   translateX nudge on CTA links must flip direction in RTL.
   Everything else (border, radius, shadow, aspect-ratio, object-fit,
   scale transforms) is direction-agnostic.
───────────────────────────────────────────────────────────────── */

[dir="rtl"] .card.blog .card-body a.link:hover,
[dir="rtl"] .card.blog-post .card-body ul.list-unstyled a.text-primary:hover {
    transform: translateX(-3px);
}

/* ─────────────────────────────────────────────────────────────────
   3A-12  REDUCED MOTION
   All transforms and non-color transitions are removed or zeroed.
   Color transitions (border-color, background-color) are kept —
   they carry no vestibular motion risk.
───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .card.blog,
    .card.blog-post {
        transition:
            border-color var(--ek-transition),
            box-shadow var(--ek-transition) !important;
    }

    .card.blog:hover,
    .card.blog-post:hover {
        transform: none !important;
    }

    .card.blog .image img,
    .card.blog-post .image img {
        transition: none !important;
    }

    .card.blog:hover .image img,
    .card.blog-post:hover .image img {
        transform: none !important;
    }

    .card.feature.bg-transparent {
        transition:
            background-color var(--ek-transition),
            border-color var(--ek-transition),
            box-shadow var(--ek-transition) !important;
    }

    .card.feature.bg-transparent .text-primary {
        transition: none !important;
    }

    .card.feature.bg-transparent:hover .text-primary {
        transform: none !important;
    }

    .section .team {
        transition: none !important;
    }

    .card.blog .card-body a.link,
    .card.blog-post .card-body ul.list-unstyled a.text-primary {
        transition: color var(--ek-transition) !important;
    }

    .card.blog .card-body a.link:hover,
    .card.blog-post .card-body ul.list-unstyled a.text-primary:hover {
        transform: none !important;
    }
}

/* [/PHASE 3A — Shared Card + Button System Baseline] */

/* [PHASE 4A — About Page Retouch Including Hero, Excluding Partners] */

/* ─────────────────────────────────────────────────────────────────
   4A-01  FOUNDATION INTRO SECTION
   Hero styles moved to dedicated /* [PHASE 4A — About Header Restore] */
block
    below.
    See
    that
    block
    for
    hero/breadcrumb
    CSS.
    Scoped
    to
    .about-foundation-retouch
    (container, col-lg-5 image
   + col-lg-7 text).
    •
    Strengthens
    image
    shadow
    and
    radius
    beyond
    the
    Blade
    defaults.
    •
    Adds
    a
    brand-blue
    inline-start
    accent
    on
    the
    section-title
    text
    block
    for
    visual
    hierarchy.
    •
    Uses
    logical
    properties
    (border-inline-start, padding-inline-start)
    so
    the
    accent
    flips
    to
    the
    end
    side
    automatically
    in
    RTL.
    ─────────────────────────────────────────────────────────────────
    */
    .about-foundation-retouch
    img.img-fluid {
    border-radius: var(--ek-radius-lg) !important;
    box-shadow: var(--ek-shadow-md) !important;
}

.about-foundation-retouch .section-title {
    border-inline-start: 3px solid var(--ek-primary);
    padding-inline-start: 1.25rem;
}

/* ─────────────────────────────────────────────────────────────────
   4A-02  FOUNDATION TABS SECTION
   Scoped to .about-tabs-retouch (the container holding both the
   sticky pill sidebar and the tab-content column).
   • Pill sidebar: token border + shadow (overrides Bootstrap .shadow
     and .rounded which are !important — needs own !important).
   • Nav-link: brand blue active state, soft hover tint.
   • Tab panes: token border + shadow instead of Bootstrap .shadow.
   • Tab images: uniform 16/9 ratio with object-fit cover.
   sticky-sidebar JS behavior is unaffected — only visual CSS touched.
───────────────────────────────────────────────────────────────── */

/* Pill sidebar panel */
.about-tabs-retouch .sticky-sidebar.nav-pills {
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-md) !important;
    box-shadow: var(--ek-shadow-sm) !important;
}

/* Tab link base */
.about-tabs-retouch .nav-pills .nav-link {
    color: var(--ek-navy);
    font-weight: 500;
    border-radius: var(--ek-radius-sm) !important;
    transition:
        background-color var(--ek-transition),
        color var(--ek-transition),
        box-shadow var(--ek-transition);
}

/* Tab link hover (non-active) */
.about-tabs-retouch .nav-pills .nav-link:hover:not(.active) {
    background-color: var(--ek-primary-light);
    color: var(--ek-primary);
}

/* Tab link active state — brand blue pill */
.about-tabs-retouch .nav-pills .nav-link.active {
    background-color: var(--ek-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(57, 108, 240, 0.28);
}

/* Active tab h6 (the link title text) */
.about-tabs-retouch .nav-pills .nav-link.active h6 {
    color: #ffffff;
}

/* Tab content panes — replace Bootstrap .shadow with token */
.about-tabs-retouch .tab-content .tab-pane {
    border: 1px solid var(--ek-border) !important;
    border-radius: var(--ek-radius-md) !important;
    box-shadow: var(--ek-shadow-sm) !important;
}

/* Tab pane images — 16:9 ratio, no double-shadow */
.about-tabs-retouch .tab-pane img.img-fluid {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ek-radius-sm) !important;
    box-shadow: none !important; /* pane already carries the shadow */
}

/* ─────────────────────────────────────────────────────────────────
   4A-03  CERTIFICATIONS SECTION
   Scoped to .about-certifications-retouch (the card grid container).
   • Adds border-radius to .card.work-container (Blade has rounded-0
     which forces 0 — needs !important to override).
   • Adds hover shadow lift. No image zoom — overlay-work and
     .lightbox JS must not be disturbed.
───────────────────────────────────────────────────────────────── */

.about-certifications-retouch .card.work-container {
    border-radius: var(--ek-radius-sm) !important; /* overrides rounded-0 */
    overflow: hidden;
    box-shadow: var(--ek-shadow-sm) !important;
    margin-bottom: 1.5rem;
    transition:
        box-shadow var(--ek-transition),
        transform var(--ek-transition) !important;
}

.about-certifications-retouch .card.work-container:hover {
    box-shadow: var(--ek-shadow-md) !important;
    transform: translateY(-4px);
}

/* ─────────────────────────────────────────────────────────────────
   4A-04  TEAM SECTION
   Scoped to .about-team-retouch (the container; .team items have
   h-100 added in Blade so equal-height in each grid row).
   • Card enclosure: white surface, border, radius, shadow.
   • Profile photos: circular crop (120×120), brand-tint border ring.
   • Hover: subtle lift.
   • Name/role typography: brand navy + muted.
   • The .about-team-retouch .team img selector is tightly scoped —
     it does NOT affect partner logos or any other page.
───────────────────────────────────────────────────────────────── */

.about-team-retouch .team {
    background: var(--ek-surface);
    border: 1px solid var(--ek-border);
    border-radius: var(--ek-radius-md);
    padding: 2rem 1.25rem 1.5rem;
    box-shadow: var(--ek-shadow-sm);
    text-align: center;
    transition:
        transform var(--ek-transition),
        box-shadow var(--ek-transition);
}

.about-team-retouch .team:hover {
    transform: translateY(-4px);
    box-shadow: var(--ek-shadow-md);
}

/* Circular profile photo — overrides Bootstrap img-fluid + rounded + shadow */
.about-team-retouch .team img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
    border-radius: 50% !important; /* overrides .rounded */
    border: 3px solid rgba(57, 108, 240, 0.18);
    box-shadow: var(--ek-shadow-sm) !important; /* replaces Bootstrap .shadow */
    margin: 0 auto 0.5rem;
    display: block;
}

.about-team-retouch .team .content {
    margin-top: 0.75rem !important;
}

.about-team-retouch .team h5 {
    color: var(--ek-navy);
    font-weight: 700;
    font-size: 1rem;
}

.about-team-retouch .team small.text-muted {
    font-size: 0.8rem;
    color: var(--ek-muted) !important;
    letter-spacing: 0.3px;
}

/* ─────────────────────────────────────────────────────────────────
   4A-05  CTA / TECHNOLOGICAL ADVANCE SECTION
   Scoped to .about-cta-retouch.
   • Image: stronger radius + shadow for consistency with foundation.
   • CTA link (.text-primary with mdi-chevron-right): bolder weight,
     inline-flex for icon alignment, translateX hover nudge.
   • {!! !!} raw-HTML title rendering is untouched — only the <a>
     element below it is styled.
───────────────────────────────────────────────────────────────── */

.about-cta-retouch img.img-fluid {
    border-radius: var(--ek-radius-lg) !important;
    box-shadow: var(--ek-shadow-md) !important;
}

.about-cta-retouch .section-title a.text-primary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition:
        color var(--ek-transition),
        transform var(--ek-transition);
}

.about-cta-retouch .section-title a.text-primary:hover {
    color: var(--ek-primary-dark) !important;
    transform: translateX(5px);
}

/* ─────────────────────────────────────────────────────────────────
   4A-06  NEWSLETTER CTA SECTION
   Scoped to .about-newsletter-retouch.
   Phase 1 (P1: .subcribe-form .btn-success) already handles the
   button colour — no override needed here.
   Only mobile layout polish added: ensure input + button stack
   cleanly on small screens without breaking the rounded-pill form.
───────────────────────────────────────────────────────────────── */

@media (max-width: 576px) {
    .about-newsletter-retouch .subcribe-form input.rounded-pill {
        border-radius: 50rem !important;
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .about-newsletter-retouch .subcribe-form .btn-pills {
        width: 100%;
        border-radius: 50rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   4A-07  RTL OVERRIDES
   • foundation accent border flips via logical properties (inline-start
     → inline-end in RTL) — no explicit RTL rule needed for the border.
   • CTA link translateX nudge must flip direction.
───────────────────────────────────────────────────────────────── */

[dir="rtl"] .about-cta-retouch .section-title a.text-primary:hover {
    transform: translateX(-5px);
}

/* ─────────────────────────────────────────────────────────────────
   4A-08  REDUCED MOTION
   Neutralise all transform transitions; keep color and shadow
   transitions (no vestibular risk).
───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .about-tabs-retouch .nav-pills .nav-link {
        transition: none !important;
    }

    .about-certifications-retouch .card.work-container,
    .about-team-retouch .team {
        transition: box-shadow var(--ek-transition) !important;
    }

    .about-certifications-retouch .card.work-container:hover,
    .about-team-retouch .team:hover {
        transform: none !important;
    }

    .about-cta-retouch .section-title a.text-primary {
        transition: color var(--ek-transition) !important;
    }

    .about-cta-retouch .section-title a.text-primary:hover {
        transform: none !important;
    }
}

/* [/PHASE 4A — About Page Retouch Including Hero, Excluding Partners] */

/* [PHASE 4A — About Header Restore] */

/* ─────────────────────────────────────────────────────────────────
   SCOPE: section.bg-half.about-hero-retouch
   Blade: class "about-hero-retouch" added to the hero <section>;
          heading is <h1 class="text-white about-hero-title">.
   Phase 1 already sets section.bg-half { background-size: cover }
   so the hero image fills the section without tiling.

   Design goal: soft corporate blue-grey gradient, premium B2B feel,
   dark-navy→brand-blue veil over the hero image, clear title
   hierarchy, frosted-glass breadcrumb, consistent with Home Page.
───────────────────────────────────────────────────────────────── */

/* ── AH-01  HERO HEIGHT + DISPLAY FIX ──────────────────────────
   The theme's d-table + w-100 pattern makes the section a CSS
   table row. Ensure it fills at least a comfortable viewport
   slice and centres content vertically on all screens.          */

.about-hero-retouch {
    min-height: 300px;
}

/* ── AH-02  GRADIENT OVERLAY ────────────────────────────────────
   .bg-overlay has inline style="background-image: url('/images/bg.png')"
   (the dot/grid-pattern texture used across interior heroes).
   We override it with a two-stop brand gradient via !important.
   The gradient goes from deep navy (top-left) → brand blue
   (bottom-right), giving a tech-infrastructure corporate feel
   without erasing the hero image underneath.                     */

.about-hero-retouch .bg-overlay {
    background-image: linear-gradient(
        135deg,
        rgba(10, 22, 50, 0.87) 0%,
        rgba(57, 108, 240, 0.5) 100%
    ) !important;
    background-color: transparent !important;
}

/* ── AH-03  HERO CONTENT VERTICAL RHYTHM ───────────────────────
   .title-heading is the innermost wrapper for title + breadcrumb.
   Extra padding ensures the content clears the fixed navbar
   (approx 68 px) and has breathing room below.                   */

.about-hero-retouch .title-heading {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ── AH-04  PAGE TITLE (h1.about-hero-title) ───────────────────
   Responsive size with clamp() — large on desktop, comfortable
   on mobile. Heavy weight + tight tracking reads as a confident
   B2B enterprise headline. text-shadow adds soft depth against
   the gradient without looking gimmicky.                         */

.about-hero-retouch .about-hero-title {
    font-size: clamp(1.85rem, 3.8vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 1.375rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── AH-05  BREADCRUMB — FROSTED GLASS PILL ────────────────────
   Phase 1 sets the base breadcrumb token styles (padding, item
   colours, separator colour). Here we only override the
   ul.breadcrumb container appearance for the About hero context:
   near-opaque white background + brand-tinted box-shadow + blur.
   backdrop-filter falls back gracefully on browsers that do not
   support it (Firefox pre-103, older Safari).                    */

.about-hero-retouch .breadcrumb {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 18px rgba(57, 108, 240, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-inline: 1.125rem !important;
    padding-block: 0.45rem !important;
}

/* Keep breadcrumb link colour readable on near-white background */
.about-hero-retouch .breadcrumb-item a {
    color: var(--ek-primary);
    font-weight: 500;
}

.about-hero-retouch .breadcrumb-item a:hover {
    color: var(--ek-primary-dark);
}

.about-hero-retouch .breadcrumb-item.active {
    color: var(--ek-body);
}

/* ── AH-06  RTL ADJUSTMENT ──────────────────────────────────────
   The gradient and layout are symmetric so no directional flip
   is needed for the overlay. Logical properties on breadcrumb
   (padding-inline, border-inline) auto-flip in RTL.             */

/* ── AH-07  REDUCED MOTION ──────────────────────────────────────
   No motion was introduced in this block (gradient + shadow are
   static, no transitions/animations). No reduced-motion rules
   needed.                                                        */

/* [/PHASE 4A — About Header Restore] */

/* [PHASE 4A — About Hero Visual Refinement] */

/* ─────────────────────────────────────────────────────────────────
   SCOPE: section.bg-half.about-hero (class added to about.blade.php)
   This block comes after /* [PHASE 4A — About Header Restore] */
in the
   cascade. For any property declared in both blocks with equal
   specificity, this block wins — it is the authoritative hero style.

   Blade changes in this phase:
     • Added class "about-hero" to the hero <section>
     • Moved .breadcrumb-position div above <h1> inside .title-heading
       (breadcrumb appears above the page title — premium B2B pattern)
     • h1.about-hero-title was already present from the previous turn

   Design: deep-navy → mid-blue → brand-blue 3-stop gradient, richer
   and more saturated than the previous 2-stop. Breadcrumb becomes a
   blue-tinted glass pill — no plain white, subtle blur + border.
───────────────────────────────────────────────────────────────── */

/* ── AV-01  HERO MIN-HEIGHT ─────────────────────────────────────
   Comfortable height on all viewports. The d-table sizing from
   style.css handles the rest.                                    */

.about-hero {
    min-height: 340px;
}

/* ── AV-02  RICHER GRADIENT OVERLAY ────────────────────────────
   .bg-overlay has inline style="background-image: url('/images/bg.png')".
   We replace the dot-pattern with a 3-stop gradient via !important.
   Stop 1: deep navy (90% opacity)  — strong anchoring at top-left
   Stop 2: mid-blue (78% opacity)   — rich blue-corporate midpoint
   Stop 3: brand blue (52% opacity) — opens up toward bottom-right,
            letting the hero image breathe through gently.         */

.about-hero .bg-overlay {
    background-image: linear-gradient(
        140deg,
        rgba(6, 16, 50, 0.92) 0%,
        rgba(22, 58, 156, 0.78) 55%,
        rgba(57, 108, 240, 0.5) 100%
    ) !important;
    background-color: transparent !important;
}

/* ── AV-03  TITLE HEADING CONTAINER ────────────────────────────
   Extra vertical padding gives the content room above and below.
   Breadcrumb is first in the DOM (.breadcrumb-position moved above
   <h1>), so it renders at the top of this block.                 */

.about-hero .title-heading {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* ── AV-04  PAGE TITLE ──────────────────────────────────────────
   Larger, heavier, tighter tracking than the Restore block.
   margin-top creates the gap between breadcrumb and title once
   the breadcrumb moves above it in the DOM.
   clamp() keeps it readable on any screen width.                 */

.about-hero .about-hero-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* ── AV-05  BREADCRUMB CONTAINER — BLUE GLASS PILL ─────────────
   Replaces plain-white pill with a brand-blue tinted glass element.
   • background: semi-transparent brand blue tint
   • border: soft white/translucent outline
   • box-shadow: depth shadow + inner highlight line
   • backdrop-filter: frosted blur over the gradient behind it
   • border-radius: 50rem = fully pill-shaped
   !important overrides Bootstrap bg-white, rounded, shadow-md.    */

.about-hero .breadcrumb {
    background: rgba(57, 108, 240, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50rem !important;
    padding-inline: 1.25rem !important;
    padding-block: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* ── AV-06  BREADCRUMB TEXT — light colours for dark-glass pill ─
   Override Phase 1's brand-blue link colour (unreadable on the
   dark-glass pill). All three states — link, hover, active —
   use white-range tones for legibility.                           */

.about-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.about-hero .breadcrumb-item a:hover {
    color: #ffffff !important;
}

.about-hero .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.875rem;
}

.about-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* ── AV-07  RTL ADJUSTMENTS ─────────────────────────────────────
   The gradient is symmetric and needs no flip.
   Logical properties (padding-inline, border-radius) are already
   direction-agnostic. Only the breadcrumb separator direction
   needs explicit RTL handling.                                    */

[dir="rtl"] .about-hero .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-inline-end: 0.5rem;
    padding-inline-start: 0;
}

/* ── AV-08  RESPONSIVE REFINEMENT ──────────────────────────────
   Slightly smaller title and less padding on small screens to
   prevent the hero from consuming too much viewport height.       */

@media (max-width: 575.98px) {
    .about-hero .about-hero-title {
        font-size: 1.85rem;
    }

    .about-hero .title-heading {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .about-hero .breadcrumb {
        padding-inline: 0.875rem !important;
        font-size: 0.8125rem;
    }
}

/* ── AV-09  REDUCED MOTION ──────────────────────────────────────
   Only a color transition on breadcrumb links — inherently safe.
   No transforms or layout animations introduced here.             */

@media (prefers-reduced-motion: reduce) {
    .about-hero .breadcrumb-item a {
        transition: none !important;
    }
}

/* [/PHASE 4A — About Hero Visual Refinement] */

/* [PHASE 4B — About Tabs and Certifications Retouch] */

/* ─────────────────────────────────────────────────────────────────
   Hero vertical refinement only
   Override of AV-03 padding-top (2.5rem → 1.25rem). Position only.
───────────────────────────────────────────────────────────────── */

.about-hero .title-heading {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

@media (max-width: 575.98px) {
    .about-hero .title-heading {
        padding-top: 0.875rem;
        padding-bottom: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CERTIFICATIONS — EDITORIAL CREDENTIAL SHOWCASE
   (Foundation Tabs CSS moved to Phase 4C block below)
═══════════════════════════════════════════════════════════════════ */

/* 4B-C1  CERT CARD ──────────────────────────────────────────── */

.about-certifications-retouch .about-cert-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: var(--ek-radius-md);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.about-certifications-retouch .about-cert-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(57, 108, 240, 0.1);
    border-color: rgba(57, 108, 240, 0.22);
}

/* 4B-C2  IMAGE AREA — contain so full cert is always visible ── */

.about-certifications-retouch .about-cert-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f8f9fc;
}

.about-certifications-retouch .about-cert-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 0.75rem;
    transition: transform 0.35s ease;
}

.about-certifications-retouch .about-cert-card:hover .about-cert-image img {
    transform: scale(1.03);
}

/* 4B-C3  LIGHTBOX ZOOM — always-visible corner icon ─────────── */

.about-certifications-retouch .about-cert-zoom {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(57, 108, 240, 0.1);
    border: 1px solid rgba(57, 108, 240, 0.2);
    color: var(--ek-primary) !important;
    font-size: 0.875rem;
    text-decoration: none;
    opacity: 0.65;
    z-index: 2;
    transition:
        opacity 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.about-certifications-retouch .about-cert-card:hover .about-cert-zoom {
    opacity: 1;
    background: rgba(57, 108, 240, 0.18);
    transform: scale(1.1);
}

/* 4B-C4  TITLE LABEL STRIP ──────────────────────────────────── */

.about-certifications-retouch .about-cert-label {
    padding: 0.6875rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.about-certifications-retouch .about-cert-label span {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ek-navy);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────
   4B  RESPONSIVE (certifications only)
───────────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .about-certifications-retouch .about-cert-label {
        padding: 0.5625rem 0.875rem;
    }
}

/* ─────────────────────────────────────────────────────────────────
   4B  REDUCED MOTION (certifications only)
───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .about-certifications-retouch .about-cert-card,
    .about-certifications-retouch .about-cert-image img,
    .about-certifications-retouch .about-cert-zoom {
        transition: none !important;
    }

    .about-certifications-retouch .about-cert-card:hover .about-cert-image img,
    .about-certifications-retouch .about-cert-card:hover .about-cert-zoom {
        transform: none !important;
    }

    .about-certifications-retouch .about-cert-card:hover {
        transform: none !important;
    }
}

/* [/PHASE 4B — About Tabs and Certifications Retouch] */

/* [PHASE 4C — About Foundation Auto Tabs] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: .about-foundation-auto  (container added in Blade)
   Layout: horizontal pill nav → progress bar → full-width content card
   Auto-rotation: Bootstrap Tab API via @push('page_script') script
═══════════════════════════════════════════════════════════════════ */

/* 4C-01  HORIZONTAL TAB NAV ─────────────────────────────────── */

.about-foundation-auto .about-foundation-tabs-nav {
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.07);
    margin-bottom: 0 !important;
}

.about-foundation-auto .about-foundation-tabs-nav .nav-link {
    border-radius: 50rem !important;
    padding: 0.5625rem 1.375rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ek-body);
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
    transition:
        color var(--ek-transition),
        background var(--ek-transition),
        border-color var(--ek-transition),
        box-shadow var(--ek-transition);
}

.about-foundation-auto .about-foundation-tabs-nav .nav-link:hover {
    color: var(--ek-primary);
    background: rgba(57, 108, 240, 0.05) !important;
    border-color: rgba(57, 108, 240, 0.2);
}

.about-foundation-auto .about-foundation-tabs-nav .nav-link.active {
    color: #ffffff !important;
    background: var(--ek-primary) !important;
    border-color: var(--ek-primary) !important;
    box-shadow: 0 2px 10px rgba(57, 108, 240, 0.28) !important;
    font-weight: 600;
}

/* 4C-02  PROGRESS BAR (auto-rotation indicator) ─────────────── */

.about-foundation-progress {
    height: 2px;
    background: rgba(57, 108, 240, 0.1);
    border-radius: 0 0 2px 2px;
    overflow: hidden;
    margin-bottom: 1.625rem;
}

.about-foundation-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--ek-primary);
}

/* 4C-03  FULL-WIDTH CONTENT CARD ───────────────────────────── */

.about-foundation-auto .about-foundation-content-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ek-radius-md);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* 4C-04  IMAGE AREA ─────────────────────────────────────────── */

.about-foundation-auto .about-foundation-media {
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    background: var(--ek-bg-soft);
}

.about-foundation-auto .about-foundation-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.about-foundation-auto
    .about-foundation-content-card:hover
    .about-foundation-media
    img {
    transform: scale(1.03);
}

/* 4C-05  COPY AREA ──────────────────────────────────────────── */

.about-foundation-auto .about-foundation-copy {
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.about-foundation-auto .about-foundation-copy .text-muted {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--ek-body) !important;
    margin: 0;
}

/* 4C-06  RTL ────────────────────────────────────────────────── */

[dir="rtl"] .about-foundation-auto .about-foundation-tabs-nav {
    flex-direction: row-reverse;
}

/* 4C-07  RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .about-foundation-auto .about-foundation-media {
        min-height: 220px;
    }

    .about-foundation-auto .about-foundation-copy {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .about-foundation-auto .about-foundation-tabs-nav {
        gap: 0.3125rem;
        padding-bottom: 0.625rem;
    }

    .about-foundation-auto .about-foundation-tabs-nav .nav-link {
        padding: 0.4375rem 0.875rem !important;
        font-size: 0.8125rem;
    }

    .about-foundation-auto .about-foundation-media {
        min-height: 190px;
    }

    .about-foundation-auto .about-foundation-copy {
        padding: 1.25rem 1rem;
    }
}

/* 4C-08  REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .about-foundation-auto .about-foundation-tabs-nav .nav-link,
    .about-foundation-auto .about-foundation-media img {
        transition: none !important;
    }

    .about-foundation-auto
        .about-foundation-content-card:hover
        .about-foundation-media
        img {
        transform: none !important;
    }

    .about-foundation-progress-bar {
        transition: none !important;
    }
}

/* [/PHASE 4C — About Foundation Auto Tabs] */

/* [PHASE 4D — About CTA Section Retouch] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: .about-cta-retouch  (existing container class)
   Design: Premium split panel — soft gradient card, image fills
   panel height with cover crop, content side with left accent bar,
   heavier title, controlled paragraph width, solid pill CTA button.
   Overrides Phase 4A .about-cta-retouch rules where they conflict.
═══════════════════════════════════════════════════════════════════ */

/* 4D-01  OUTER PANEL ────────────────────────────────────────── */

.about-cta-retouch .about-cta-panel {
    background: linear-gradient(145deg, #f4f7ff 0%, #eaeff9 100%);
    border: 1px solid rgba(57, 108, 240, 0.12);
    border-radius: var(--ek-radius-lg);
    box-shadow:
        0 6px 32px rgba(57, 108, 240, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* 4D-02  IMAGE WRAP — fills column height, cover-crops image ── */

.about-cta-retouch .about-cta-image-wrap {
    height: 100%;
    min-height: 340px;
    overflow: hidden;
    position: relative;
    background: #dde4f5;
}

/* Neutralise Phase 4A img.img-fluid rules (radius + shadow no
   longer appropriate — panel clip handles rounding, no img shadow) */
.about-cta-retouch .about-cta-image-wrap img.img-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.45s ease;
}

.about-cta-retouch .about-cta-panel:hover .about-cta-image-wrap img.img-fluid {
    transform: scale(1.04);
}

/* 4D-03  CONTENT AREA ───────────────────────────────────────── */

.about-cta-retouch .about-cta-content {
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border-inline-start: 4px solid var(--ek-primary);
}

/* 4D-04  EYEBROW ACCENT LINE (decorative, aria-hidden) ──────── */

.about-cta-retouch .about-cta-eyebrow {
    display: block;
    width: 2.5rem;
    height: 3px;
    background: var(--ek-primary);
    border-radius: 2px;
    margin-bottom: 1.125rem;
    opacity: 0.7;
}

/* 4D-05  TITLE ──────────────────────────────────────────────── */

.about-cta-retouch .about-cta-title {
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 700;
    color: var(--ek-navy);
    line-height: 1.3;
    margin-bottom: 1.125rem;
}

/* 4D-06  PARAGRAPH ──────────────────────────────────────────── */

.about-cta-retouch .about-cta-text {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--ek-body);
    max-width: 460px;
    margin-bottom: 1.875rem;
}

/* 4D-07  CTA BUTTON LINK ────────────────────────────────────── */

.about-cta-retouch .about-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ek-primary);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    padding: 0.6875rem 1.625rem;
    border-radius: 50rem;
    border: 2px solid var(--ek-primary);
    box-shadow: 0 3px 14px rgba(57, 108, 240, 0.28);
    align-self: flex-start;
    transition:
        background var(--ek-transition),
        border-color var(--ek-transition),
        box-shadow var(--ek-transition),
        transform var(--ek-transition);
}

.about-cta-retouch .about-cta-link:hover {
    background: var(--ek-primary-dark);
    border-color: var(--ek-primary-dark);
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(57, 108, 240, 0.36);
    transform: translateY(-2px);
}

.about-cta-retouch .about-cta-link .mdi {
    font-size: 1.125rem;
    transition: transform var(--ek-transition);
}

.about-cta-retouch .about-cta-link:hover .mdi {
    transform: translateX(3px);
}

/* Neutralise Phase 4A .section-title a.text-primary rule —
   the link now uses .about-cta-link, not .text-primary, so this
   override is a safety net only.                                 */
.about-cta-retouch .section-title a.text-primary {
    transition: none;
}

/* 4D-08  RTL ────────────────────────────────────────────────── */

[dir="rtl"] .about-cta-retouch .about-cta-link:hover .mdi {
    transform: translateX(-3px);
}

/* border-inline-start on .about-cta-content auto-flips to
   border-inline-end in RTL — no extra rule needed.              */

/* 4D-09  RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .about-cta-retouch .about-cta-image-wrap {
        min-height: 240px;
    }

    .about-cta-retouch .about-cta-content {
        padding: 2rem 1.625rem;
        border-inline-start: none;
        border-top: 4px solid var(--ek-primary);
    }

    .about-cta-retouch .about-cta-text {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .about-cta-retouch .about-cta-image-wrap {
        min-height: 200px;
    }

    .about-cta-retouch .about-cta-content {
        padding: 1.625rem 1.25rem;
    }

    .about-cta-retouch .about-cta-link {
        font-size: 0.875rem;
        padding: 0.5625rem 1.25rem;
    }
}

/* 4D-10  REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .about-cta-retouch .about-cta-image-wrap img.img-fluid,
    .about-cta-retouch .about-cta-link,
    .about-cta-retouch .about-cta-link .mdi {
        transition: none !important;
    }

    .about-cta-retouch
        .about-cta-panel:hover
        .about-cta-image-wrap
        img.img-fluid,
    .about-cta-retouch .about-cta-link:hover {
        transform: none !important;
    }
}

/* [/PHASE 4D — About CTA Section Retouch] */

/* [PHASE 4E — About Partners Logo Wall] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: .about-partners-retouch  (container added in Blade)
   Design: Premium static logo wall — subtle inner panel, CSS-grid
   tiled layout, white logo tiles with thin border + shadow, natural
   logo colour, object-fit contain, hover lift.
   No grayscale. No fading. No JS. No slider.
═══════════════════════════════════════════════════════════════════ */

/* 4E-01  SECTION SPACING ────────────────────────────────────── */

.about-partners-retouch {
    padding-bottom: 0.5rem;
}

/* 4E-02  INNER PANEL — soft background, contained border-radius */

.about-partners-retouch .about-partners-panel {
    background: #f4f7ff;
    border: 1px solid rgba(57, 108, 240, 0.09);
    border-radius: var(--ek-radius-lg);
    padding: 2rem 1.75rem;
    box-shadow: 0 2px 12px rgba(57, 108, 240, 0.05);
}

/* 4E-03  CSS GRID — fluid columns, consistent tile height ─────
   auto-fill with min 140px means:
   ~6 cols @ 1200px+, ~5 @ 900px, ~4 @ 700px, ~3 @ 500px, 2 @ 320px */

.about-partners-retouch .about-partners-grid {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1rem;
    align-items:     stretch;
}

/* Each tile: fixed 1/6-row basis so 6 fill a row exactly,
   and a short last row stays centered.                    */
.about-partners-retouch .about-partner-item {
    flex: 0 0 calc((100% - 5 * 1rem) / 6);
}

/* 4E-04  LOGO TILE ──────────────────────────────────────────── */

.about-partners-retouch .about-partner-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ek-radius-sm);
    padding: 1rem 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.about-partners-retouch .about-partner-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(57, 108, 240, 0.1);
    border-color: rgba(57, 108, 240, 0.22);
}

/* 4E-05  LOGO IMAGE — natural colour, contain, no distortion ── */

.about-partners-retouch .about-partner-logo {
    display: block;
    width: 100%;
    max-width: 120px;
    max-height: 48px;
    object-fit: contain;
    margin: 0 auto;
}

/* 4E-06  RTL — grid and flex are direction-agnostic; no extra
   rules needed. Logical gap handles everything.                 */

/* 4E-07  RESPONSIVE TWEAKS ─────────────────────────────────── */

@media (max-width: 767.98px) {
    .about-partners-retouch .about-partners-panel {
        padding: 1.5rem 1.25rem;
    }

    .about-partners-retouch .about-partners-grid {
        gap: 0.75rem;
    }

    /* 4 per row on tablet */
    .about-partners-retouch .about-partner-item {
        flex: 0 0 calc((100% - 3 * 0.75rem) / 4);
    }

    .about-partners-retouch .about-partner-item {
        min-height: 68px;
        padding: 0.75rem 0.625rem;
    }
}

@media (max-width: 479.98px) {
    .about-partners-retouch .about-partners-grid {
        gap: 0.625rem;
    }

    /* 2 per row on small mobile */
    .about-partners-retouch .about-partner-item {
        flex: 0 0 calc((100% - 0.625rem) / 2);
    }

    .about-partners-retouch .about-partner-logo {
        max-width: 100px;
        max-height: 40px;
    }
}

/* 4E-08  REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .about-partners-retouch .about-partner-item {
        transition: none !important;
    }

    .about-partners-retouch .about-partner-item:hover {
        transform: none !important;
    }
}

/* [/PHASE 4E — About Partners Logo Wall] */

/* [PHASE 5A — Shared Interior Page Header] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: .ek-page-header  (class added to section.bg-half on all
   interior pages — services, blog, solutions, projects, shop).
   About hero uses its own Phase 4A blocks (.about-hero-retouch /
   .about-hero) which are the reference; this block provides the
   same visual treatment for every other interior page.
   Does NOT affect: Home Page, nav, footer, content sections,
   any element outside .ek-page-header.
═══════════════════════════════════════════════════════════════════ */

/* 5A-01  HEIGHT + MIN-HEIGHT ────────────────────────────────────
   bg-half sets a fixed height in style.css; override to auto so
   the hero grows when breadcrumbs wrap or titles are long.
   min-height keeps the section from collapsing on short pages. */

.ek-page-header {
    height: auto !important;
    min-height: 300px;
}

/* 5A-02  GRADIENT OVERLAY
   Replaces the dot-pattern inline bg-image on .bg-overlay with the
   same 3-stop gradient used on the approved About hero.
   !important is required to override the inline style attribute.   */

.ek-page-header .bg-overlay {
    background-image: linear-gradient(
        140deg,
        rgba(6, 16, 50, 0.92) 0%,
        rgba(22, 58, 156, 0.78) 55%,
        rgba(57, 108, 240, 0.5) 100%
    ) !important;
    background-color: transparent !important;
}

/* 5A-03  TITLE HEADING CONTAINER ────────────────────────────── */

.ek-page-header .title-heading {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}

/* 5A-04  PAGE TITLE
   .ek-page-title is added to each page's heading element.
   Breadcrumb is above the title in the DOM (moved in Blade), so
   margin-top creates the gap between breadcrumb and title.        */

.ek-page-header .ek-page-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    color: #ffffff;
}

/* 5A-05  BREADCRUMB — BLUE GLASS PILL
   Overrides Bootstrap .bg-white, .rounded, .shadow-md via !important.
   Matches the About hero breadcrumb exactly.                       */

.ek-page-header .breadcrumb {
    background: rgba(57, 108, 240, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50rem !important;
    padding-inline: 1.25rem !important;
    padding-block: 0.5rem !important;
    margin-bottom: 0 !important;
}

.ek-page-header .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ek-page-header .breadcrumb-item a:hover {
    color: #ffffff !important;
}

.ek-page-header .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.875rem;
}

.ek-page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.38) !important;
}

/* 5A-06  RTL ────────────────────────────────────────────────── */

[dir="rtl"] .ek-page-header .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-inline-end: 0.5rem;
    padding-inline-start: 0;
}

/* 5A-07  RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .ek-page-header .ek-page-title {
        font-size: 1.625rem;
    }

    .ek-page-header .title-heading {
        padding-top: 0.875rem;
        padding-bottom: 1.5rem;
    }

    .ek-page-header .breadcrumb {
        padding-inline: 0.875rem !important;
        font-size: 0.8125rem;
    }
}

/* 5A-08  REDUCED MOTION ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ek-page-header .breadcrumb-item a {
        transition: none !important;
    }
}

/* [/PHASE 5A — Shared Interior Page Header] */

/* [PHASE 5B — Services Page Retouch] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: Services page content sections only.
   Classes: .services-feature-section, .services-feature-panel,
            .services-feature-media, .services-feature-content,
            .services-feature-eyebrow, .services-feature-title,
            .services-feature-text,
            .services-feature-section--alt (tinted section bg),
            .services-grid-retouch, .services-card-retouch,
            .services-card-icon, .services-card-title, .services-card-text,
            .services-cta-retouch, .services-cta-panel,
            .services-cta-media, .services-cta-content,
            .services-cta-eyebrow, .services-cta-subtitle,
            .services-cta-title, .services-cta-text, .services-cta-btn
   Does NOT affect: hero/header, home page, about page, nav, footer,
   any other page, or any Phase 1–5A CSS blocks.
═══════════════════════════════════════════════════════════════════ */

/* ── 5B-01  FEATURE SECTION WRAPPER ─────────────────────────────
   Replaces the old single section.section + mt-100 containers.
   Provides standard vertical breathing room.
   --alt variant: soft blue-grey tint to visually separate the
   two feature blocks without heavy borders or color shifts.     */

.services-feature-section {
    padding-block: 5rem;
}

.services-feature-section--alt {
    background: #f4f7ff;
}

/* ── 5B-02  FEATURE PANEL — split card container ────────────────
   g-0 row inside a card wrapper: image fills one column,
   content fills the other. overflow:hidden clips the image to
   the panel's rounded corners.                                   */

.services-feature-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--ek-radius-lg);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.services-feature-section--alt .services-feature-panel {
    border-color: rgba(57, 108, 240, 0.1);
    box-shadow: 0 4px 28px rgba(57, 108, 240, 0.08);
}

/* ── 5B-03  FEATURE MEDIA — full-height image column ────────────
   height:100% fills the flex stretch of the row.
   min-height prevents collapse when image loads slowly.
   object-fit cover ensures no letterboxing.                      */

.services-feature-media {
    height: 100%;
    min-height: 380px;
    overflow: hidden;
    background: #dde4f5;
}

.services-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.services-feature-panel:hover .services-feature-media img {
    transform: scale(1.03);
}

/* ── 5B-04  FEATURE CONTENT — text column ───────────────────────
   flex column layout with vertical centring matches the image
   height regardless of content length.
   padding-inline uses logical property for RTL safety.          */

.services-feature-content {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* ── 5B-05  EYEBROW BAR — brand-blue accent rule ────────────────
   Direction-agnostic: a short horizontal bar above the title
   acts as a visual anchor without relying on border-inline-*
   (which would require opposite values for left/right layouts). */

.services-feature-eyebrow {
    display: block;
    width: 2.5rem;
    height: 3px;
    background: var(--ek-primary);
    border-radius: 2px;
    margin-bottom: 1.25rem;
    opacity: 0.75;
}

/* ── 5B-06  FEATURE TITLE ────────────────────────────────────── */

.services-feature-title {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 700;
    color: var(--ek-navy);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1.125rem;
}

/* ── 5B-07  FEATURE TEXT — raw HTML body ({!! !!}) ──────────────
   Resets for any <p>, <ul>, <li> that the translation value
   may contain (raw HTML is rendered via {!! !!} in Blade).      */

.services-feature-text {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--ek-body);
}

.services-feature-text p {
    margin-bottom: 0.75rem;
    color: var(--ek-body);
}
.services-feature-text p:last-child {
    margin-bottom: 0;
}
.services-feature-text ul {
    padding-inline-start: 1.25rem;
    margin-bottom: 0;
}
.services-feature-text li {
    margin-bottom: 0.375rem;
    color: var(--ek-body);
}

/* ── 5B-08  SERVICES GRID SECTION ───────────────────────────────
   Soft off-white background differentiates the grid from the
   feature sections above and CTA below.                          */

.services-grid-retouch {
    background: var(--ek-bg-soft);
}

/* ── 5B-09  SERVICE CARD ─────────────────────────────────────── */

.services-card-retouch {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--ek-radius-md);
    padding: 2rem 1.625rem;
    text-align: center;
    height: 100%;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.services-card-retouch:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(57, 108, 240, 0.11);
    border-color: rgba(57, 108, 240, 0.22);
}

/* ── 5B-10  SERVICE CARD ICON BADGE ─────────────────────────────
   Circular brand-tinted badge replaces the bare h2 span.
   The icon class `uil uil-{icon}` is preserved from the loop;
   the badge wrapper provides the visual shape.                   */

.services-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(57, 108, 240, 0.08);
    color: var(--ek-primary);
    font-size: 1.5rem;
    margin-bottom: 1.125rem;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.services-card-retouch:hover .services-card-icon {
    background: rgba(57, 108, 240, 0.15);
    transform: scale(1.08);
}

/* ── 5B-11  SERVICE CARD TYPOGRAPHY ─────────────────────────────*/

.services-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ek-navy);
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.services-card-text {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--ek-body);
    margin-bottom: 0;
}

/* ── 5B-12  CTA SECTION ──────────────────────────────────────── */

.services-cta-retouch .services-cta-panel {
    border-radius: var(--ek-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

/* ── 5B-13  CTA MEDIA — image column ────────────────────────────*/

.services-cta-media {
    height: 100%;
    min-height: 380px;
    overflow: hidden;
    background: #1a2744;
}

.services-cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.services-cta-retouch .services-cta-panel:hover .services-cta-media img {
    transform: scale(1.04);
}

/* ── 5B-14  CTA CONTENT — dark navy panel ────────────────────── */

.services-cta-content {
    background: linear-gradient(145deg, #1a2744 0%, #243566 100%);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* ── 5B-15  CTA EYEBROW BAR ──────────────────────────────────── */

.services-cta-eyebrow {
    display: block;
    width: 2.5rem;
    height: 3px;
    background: var(--ek-primary);
    border-radius: 2px;
    margin-bottom: 1.25rem;
    opacity: 0.9;
}

/* ── 5B-16  CTA TEXT HIERARCHY ───────────────────────────────── */

.services-cta-subtitle {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.625rem;
}

.services-cta-title {
    font-size: clamp(1.375rem, 2.8vw, 1.875rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 1rem;
}

.services-cta-text {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.68);
    max-width: 480px;
    margin-bottom: 2rem;
}

/* ── 5B-17  CTA BUTTON — pill, brand blue ────────────────────── */

.services-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ek-primary);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    padding: 0.75rem 1.75rem;
    border-radius: 50rem;
    border: 2px solid var(--ek-primary);
    box-shadow: 0 4px 18px rgba(57, 108, 240, 0.35);
    align-self: flex-start;
    transition:
        background var(--ek-transition),
        border-color var(--ek-transition),
        box-shadow var(--ek-transition),
        transform var(--ek-transition);
}

.services-cta-btn:hover {
    background: var(--ek-primary-dark);
    border-color: var(--ek-primary-dark);
    color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(57, 108, 240, 0.45);
    transform: translateY(-2px);
}

/* ── 5B-18  RTL ADJUSTMENTS ──────────────────────────────────── */

/* Eyebrow bars are symmetric — no flip needed.
   The translateX on CTA button hover must reverse in RTL.       */

[dir="rtl"] .services-cta-btn:hover {
    transform: translateY(-2px); /* vertical lift is direction-agnostic */
}

/* ── 5B-19  RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 991.98px) {
    .services-feature-section {
        padding-block: 3.5rem;
    }
}

@media (max-width: 767.98px) {
    .services-feature-section {
        padding-block: 3rem;
    }

    /* Image stacks on top; give it a fixed height */
    .services-feature-media {
        min-height: 260px;
    }

    /* Remove vertical centring — let content flow naturally */
    .services-feature-content {
        padding: 2rem 1.625rem;
        height: auto;
    }

    /* CTA: stack image on top, content below */
    .services-cta-media {
        min-height: 240px;
    }

    .services-cta-content {
        padding: 2.25rem 1.75rem;
        height: auto;
    }

    .services-cta-text {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .services-feature-section {
        padding-block: 2.5rem;
    }

    .services-feature-content {
        padding: 1.75rem 1.25rem;
    }

    .services-feature-title {
        font-size: 1.25rem;
    }

    .services-cta-media {
        min-height: 200px;
    }

    .services-cta-content {
        padding: 1.75rem 1.25rem;
    }

    .services-cta-btn {
        font-size: 0.875rem;
        padding: 0.625rem 1.375rem;
    }
}

/* ── 5B-20  REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .services-feature-media img,
    .services-cta-media img,
    .services-card-retouch,
    .services-card-icon,
    .services-cta-btn {
        transition: none !important;
    }

    .services-feature-panel:hover .services-feature-media img,
    .services-cta-retouch .services-cta-panel:hover .services-cta-media img {
        transform: none !important;
    }

    .services-card-retouch:hover {
        transform: none !important;
    }

    .services-card-retouch:hover .services-card-icon {
        transform: none !important;
    }

    .services-cta-btn:hover {
        transform: none !important;
    }
}

/* [/PHASE 5B — Services Page Retouch] */

/* [PHASE 5C — Services Page Motion Retouch] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: Services page motion only. All selectors begin with
   .srv-reveal, .services-feature-panel, .services-card-retouch,
   .services-cta-*, or .services-card-icon.
   Does NOT modify Phase 1–5B blocks, home page, or any other page.
   IntersectionObserver script lives in services.blade.php
   @push('page_script') — not here.
═══════════════════════════════════════════════════════════════════ */

/* ── 5C-01  SCROLL-REVEAL BASE STATE ────────────────────────────
   Elements start invisible and slightly below their final position.
   IntersectionObserver adds .is-visible; CSS transitions do the rest.
   Only opacity + transform are animated — no layout reflow.        */

.srv-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.srv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Grid card columns — slightly snappier than panels */
.services-grid-retouch .srv-reveal {
    transition-duration: 0.55s;
}

/* ── 5C-02  FEATURE PANEL — CHILD STAGGER ──────────────────────
   When the panel (.services-feature-panel) gains .is-visible, its
   inner elements cascade in sequence:
   1. Panel itself fades up (srv-reveal, 0.70s)
   2. Image column scales from 1.05 → 1  (starts 0.12s in)
   3. Content column slides up           (starts 0.28s in)
   4. Eyebrow bar expands via scaleX     (starts 0.44s in)
   No separate opacity is set on children — the parent panel's
   opacity handles visibility; children animate only transform.     */

/* Image: subtle zoom-in reveal */
.services-feature-panel .services-feature-media {
    transform: scale(1.05);
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.services-feature-panel.is-visible .services-feature-media {
    transform: scale(1);
}

/* Content: slide up */
.services-feature-panel .services-feature-content {
    transform: translateY(20px);
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}

.services-feature-panel.is-visible .services-feature-content {
    transform: translateY(0);
}

/* Eyebrow bar: draw from left (LTR) via scaleX */
.services-feature-panel .services-feature-eyebrow {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.44s;
}

.services-feature-panel.is-visible .services-feature-eyebrow {
    transform: scaleX(1);
}

/* ── 5C-03  SERVICE CARD — ICON SPRING ON HOVER ─────────────────
   Overrides Phase 5B's linear ease with a spring cubic-bezier that
   slightly overshoots before settling. Gives a tactile, premium
   "click" feel without any @keyframes.                            */

.services-card-icon {
    transition:
        background 0.25s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.services-card-retouch:hover .services-card-icon {
    transform: scale(1.15);
}

/* ── 5C-04  SERVICE CARD — INSET TOP GLOW ON HOVER ─────────────
   Adds a 2px brand-blue inset shadow at the top of each card on
   hover, giving a subtle lit-from-above effect. Extends Phase 5B's
   single box-shadow value (same property → 5C wins via cascade).  */

.services-card-retouch:hover {
    box-shadow:
        0 10px 30px rgba(57, 108, 240, 0.11),
        inset 0 2px 0 rgba(57, 108, 240, 0.36);
}

/* ── 5C-05  CTA PANEL — CHILD STAGGER ───────────────────────────
   Mirror of 5C-02 but for the CTA panel. The image scales in first,
   then the text elements cascade one-by-one.
   Text children have their own opacity: 0 so they remain invisible
   even after the panel's opacity becomes 1 (parent × child opacity
   = 1 × 0 = 0), then each transitions to opacity:1 individually.  */

/* CTA image: same zoom-in as feature panels */
.services-cta-retouch .services-cta-media {
    transform: scale(1.05);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.14s;
}

.services-cta-panel.is-visible .services-cta-media {
    transform: scale(1);
}

/* CTA text elements base state — hidden and offset */
.services-cta-content .services-cta-subtitle,
.services-cta-content .services-cta-title,
.services-cta-content .services-cta-text,
.services-cta-content .services-cta-btn {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

/* CTA eyebrow: scaleX draw (no opacity fade — parent panel handles it) */
.services-cta-content .services-cta-eyebrow {
    transform-origin: left center;
    opacity: 1; /* only scaleX; opacity from panel parent */
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stagger each CTA text element with 60ms increments */
.services-cta-panel.is-visible .services-cta-eyebrow {
    transform: scaleX(1);
    transition-delay: 0.4s;
}

.services-cta-panel.is-visible .services-cta-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.46s;
}

.services-cta-panel.is-visible .services-cta-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.52s;
}

.services-cta-panel.is-visible .services-cta-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.58s;
}

.services-cta-panel.is-visible .services-cta-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.64s;
}

/* ── 5C-06  CTA BUTTON — SHINE SWEEP ────────────────────────────
   A translucent highlight sweeps L→R across the button on hover.
   The ::after pseudo-element uses transform (not left/width) so
   the animation stays on the GPU compositor layer.
   position:relative + overflow:hidden are added here (Phase 5B
   did not include them on .services-cta-btn).                    */

.services-cta-btn {
    position: relative;
    overflow: hidden;
}

.services-cta-btn::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 55%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    transform: translateX(-160%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.services-cta-btn:hover::after {
    transform: translateX(280%);
}

/* ── 5C-07  RTL ADJUSTMENTS ──────────────────────────────────── */

/* Eyebrow bars originate from the "start" edge.
   In RTL, inline-start = right, so the bar draws from right.     */

[dir="rtl"] .services-feature-panel .services-feature-eyebrow,
[dir="rtl"] .services-cta-content .services-cta-eyebrow {
    transform-origin: right center;
}

/* Shine sweep reverses direction in RTL */
[dir="rtl"] .services-cta-btn::after {
    left: auto;
    right: 0;
    transform: translateX(160%);
}

[dir="rtl"] .services-cta-btn:hover::after {
    transform: translateX(-280%);
}

/* ── 5C-08  REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* Show all reveal elements immediately — JS also fires these */
    .srv-reveal,
    .services-feature-panel .services-feature-media,
    .services-feature-panel .services-feature-content,
    .services-feature-panel .services-feature-eyebrow,
    .services-cta-retouch .services-cta-media,
    .services-cta-content .services-cta-eyebrow,
    .services-cta-content .services-cta-subtitle,
    .services-cta-content .services-cta-title,
    .services-cta-content .services-cta-text,
    .services-cta-content .services-cta-btn {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Icon: revert to instant background-only change, no spring */
    .services-card-icon {
        transition: background 0.2s ease !important;
    }

    .services-card-retouch:hover .services-card-icon {
        transform: none !important;
    }

    /* Shine sweep: disable entirely */
    .services-cta-btn::after {
        display: none !important;
    }
}

/* [/PHASE 5C — Services Page Motion Retouch] */

/* [PHASE 6A — Products Index Retouch] */

/* ═══════════════════════════════════════════════════════════════════
   SCOPE: Products Index page only (shop/index.blade.php).
   Classes: .products-filter-section, .prd-filter-panel,
            .prd-filter-field, .prd-submit-btn, .products-grid-section,
            .prd-col, .prd-card, .prd-img-wrap, .prd-price-badge,
            .prd-tag, .prd-body, .prd-title, .prd-serial,
            .prd-footer, .prd-actions, .prd-btn-view, .prd-btn-cart,
            .prd-pagination, .prd-empty
   Does NOT affect: Product Detail page, any other page, Phase 1–5C.
   Choices.js data-trigger: untouched. addToCart(): untouched.
═══════════════════════════════════════════════════════════════════ */

/* ── 6A-01  FILTER PANEL ─────────────────────────────────────────
   Upgrades the existing .card.feature-top to a premium catalog
   filter bar. !important overrides Bootstrap .shadow and .rounded
   on the card. Padding override keeps the tighter 1.75rem spacing.  */

.prd-filter-panel {
    background: #ffffff;
    border: 1px solid rgba(57, 108, 240, 0.1) !important;
    border-radius: var(--ek-radius-lg) !important;
    box-shadow: 0 4px 24px rgba(57, 108, 240, 0.08) !important;
    padding: 1.75rem !important;
}

/* ── 6A-02  FILTER FIELD ICONS ───────────────────────────────────
   The theme's .icons class positions the icon absolutely inside
   .filter-search-form. We only tint it with brand blue.            */

.prd-filter-panel .prd-filter-field .icons {
    color: var(--ek-primary) !important;
    opacity: 0.65;
}

/* ── 6A-03  SUBMIT BUTTON ────────────────────────────────────────
   Enhances the existing .btn.btn-primary.submit-btn visually.
   The inline style="height: 60px" on the input keeps the height —
   we only override radius, weight, and transitions here.           */

.prd-submit-btn {
    border-radius: var(--ek-radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.01em;
    transition:
        box-shadow 0.25s ease,
        transform 0.22s ease;
}

.prd-submit-btn:hover {
    box-shadow: 0 4px 16px rgba(57, 108, 240, 0.32) !important;
    transform: translateY(-1px);
}

/* ── 6A-04  PRODUCT CARD ─────────────────────────────────────────
   Replaces the generic .card.blog border/shadow with brand-tinted
   values. .shadow on .card.blog has !important in some themes, so
   both shadow and border use !important here.                      */

.prd-card {
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: var(--ek-radius-md) !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.prd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(57, 108, 240, 0.12) !important;
    border-color: rgba(57, 108, 240, 0.24) !important;
}

/* ── 6A-05  PRODUCT IMAGE — CONSISTENT RATIO + CONTAIN ──────────
   aspect-ratio: 4/3 gives every card the same image height.
   object-fit: contain is critical for product catalog — no
   aggressive cropping of product details or branding.
   Light blue-grey bg shows through contain letterboxing cleanly.
   !important overrides .img-fluid and theme .card.blog .image img. */

.prd-img-wrap {
    aspect-ratio: 4 / 3;
    background: #f0f4fc;
}

.prd-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 0.875rem !important;
    transition: transform 0.4s ease;
}

.prd-card:hover .prd-img-wrap img {
    transform: scale(1.05);
}

/* ── 6A-06  PRICE BADGE ──────────────────────────────────────────
   Moved inside .prd-img-wrap (position:relative + overflow:hidden).
   Brand blue pill replaces bootstrap bg-danger.
   inset-inline-start = RTL-safe left/right positioning.           */

.prd-price-badge {
    position: absolute;
    top: 0.625rem;
    inset-inline-start: 0.625rem;
    z-index: 2;
    background: var(--ek-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6875rem;
    border-radius: 50rem;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(57, 108, 240, 0.3);
    white-space: nowrap;
}

/* ── 6A-07  MANUFACTURER / CATEGORY TAG PILLS ───────────────────
   Override .badge.bg-light.text-dark with a brand-tinted pill.
   Hover inverts to solid brand blue — indicates these are links. */

.prd-tag {
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    padding: 0.25rem 0.5625rem !important;
    border-radius: 50rem !important;
    background: rgba(57, 108, 240, 0.1) !important;
    color: var(--ek-primary) !important;
    border: 1px solid rgba(57, 108, 240, 0.18);
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.prd-tag:hover {
    background: var(--ek-primary) !important;
    color: #ffffff !important;
    border-color: var(--ek-primary) !important;
}

/* ── 6A-08  CARD BODY LAYOUT ────────────────────────────────────
   d-flex flex-column prd-body: title at top, serial below,
   prd-footer uses margin-top:auto to push actions to the bottom
   regardless of title length. gap provides consistent spacing.   */

.prd-body {
    padding: 1.125rem 1.25rem 1rem !important;
    gap: 0.375rem;
}

/* ── 6A-09  PRODUCT TITLE ───────────────────────────────────────*/

.prd-title {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--ek-navy) !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    margin-bottom: 0 !important;
    transition: color 0.2s ease;
}

.prd-title:hover {
    color: var(--ek-primary) !important;
}

/* ── 6A-10  SERIAL NUMBER — INLINE CODE BADGE ───────────────────
   Styled as a monospace code chip so it reads as a technical ID
   rather than generic muted text. Subtle tinted background.      */

.prd-serial {
    display: inline-block;
    font-size: 0.725rem !important;
    font-family: "Courier New", Courier, monospace;
    color: var(--ek-muted) !important;
    background: rgba(57, 108, 240, 0.05);
    border: 1px solid rgba(57, 108, 240, 0.12);
    border-radius: var(--ek-radius-sm);
    padding: 0.1875rem 0.5rem;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.02em;
}

/* ── 6A-11  FOOTER / ACTION BUTTON ROW ──────────────────────────
   margin-top: auto pushes the footer to the bottom of the flex
   column card body regardless of title/serial height.            */

.prd-footer {
    margin-top: auto;
    padding-top: 0.875rem;
}

.prd-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── 6A-12  VIEW DETAILS BUTTON ──────────────────────────────── */

.prd-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.375rem 0.875rem !important;
    border-radius: var(--ek-radius-sm) !important;
    min-height: 36px;
    white-space: nowrap;
    transition:
        background 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.prd-btn-view:hover {
    background: var(--ek-primary) !important;
    border-color: var(--ek-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(57, 108, 240, 0.3) !important;
    transform: translateY(-1px);
}

/* ── 6A-13  ADD TO CART BUTTON ───────────────────────────────── */

.prd-btn-cart {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.375rem 0.875rem !important;
    border-radius: var(--ek-radius-sm) !important;
    min-height: 36px;
    white-space: nowrap;
    transition:
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.prd-btn-cart:hover {
    box-shadow: 0 3px 10px rgba(57, 108, 240, 0.3) !important;
    transform: translateY(-1px);
}

/* ── 6A-14  PAGINATION ───────────────────────────────────────── */

.prd-pagination .page-link {
    border-color: rgba(57, 108, 240, 0.18) !important;
    color: var(--ek-navy) !important;
    border-radius: var(--ek-radius-sm) !important;
    margin: 0 2px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.prd-pagination .page-item.active .page-link {
    background: var(--ek-primary) !important;
    border-color: var(--ek-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(57, 108, 240, 0.3);
}

.prd-pagination .page-link:hover {
    background: rgba(57, 108, 240, 0.08) !important;
    color: var(--ek-primary) !important;
    border-color: rgba(57, 108, 240, 0.28) !important;
}

/* ── 6A-15  EMPTY STATE ──────────────────────────────────────── */

.prd-empty p {
    font-size: 1rem;
    color: var(--ek-muted) !important;
}

/* ── 6A-16  RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 767.98px) {
    .prd-filter-panel {
        padding: 1.25rem !important;
    }

    /* Stack action buttons vertically on small screens */
    .prd-actions {
        flex-direction: column;
    }

    .prd-btn-view,
    .prd-btn-cart {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .prd-body {
        padding: 1rem !important;
    }
}

/* ── 6A-17  RTL ──────────────────────────────────────────────── */

/* prd-price-badge uses inset-inline-start — already RTL-safe.
   Blog-tag positioning is handled by the theme; no override needed. */

/* ── 6A-18  REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .prd-card,
    .prd-img-wrap img,
    .prd-submit-btn,
    .prd-btn-view,
    .prd-btn-cart,
    .prd-tag {
        transition: none !important;
    }

    .prd-card:hover {
        transform: none !important;
    }

    .prd-card:hover .prd-img-wrap img {
        transform: none !important;
    }

    .prd-btn-view:hover,
    .prd-btn-cart:hover,
    .prd-submit-btn:hover {
        transform: none !important;
    }
}

/* [/PHASE 6A — Products Index Retouch] */

/* [PHASE 6A.1 — Products Index Simple Card Correction] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: Products Index page only — correction layer over 6A.
   Reverts over-designed card structure back to simple style.
   Blade changes: shadow restored on card; blog-tag div returned
   to image overlay; card body uses h5.title + d-flex column +
   mt-auto action row (old pattern); prd-tags-row / prd-footer /
   prd-actions / prd-body / prd-title removed from blade.
   Only improvements kept: prd-filter-lite (lighter filter),
   prd-img-wrap (consistent aspect-ratio + contain), prd-btn-view
   (eye icon alignment), prd-price-badge (from Phase 6A).
══════════════════════════════════════════════════════════════ */

/* ── 6A.1-01  FILTER STRIP — LIGHTER ────────────────────────────
   Kept from previous version — lighter border/shadow than 6A.   */

.prd-filter-lite {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: var(--ek-radius-md) !important;
}

/* ── 6A.1-02  IMAGE AREA — SIMPLE CONTAIN ───────────────────────
   Overrides Phase 6A .prd-img-wrap: removes border-bottom,
   restores simple overflow:hidden, keeps neutral bg.
   padding on img reduced back to 0.875rem (less boxed feel).    */

.prd-img-wrap {
    border-bottom: none;
    overflow: hidden;
    background: #f8f9fb;
}

.prd-img-wrap img {
    padding: 0.875rem !important;
}

/* ── 6A.1-03  VIEW BUTTON — ICON ALIGNMENT ──────────────────────
   SVG icon added in blade — needs inline-flex to align with text.
   No other sizing overrides; Bootstrap btn-sm controls the rest. */

.prd-btn-view {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

/* ── 6A.1-04  RESPONSIVE ─────────────────────────────────────────*/

@media (max-width: 767.98px) {
    .prd-filter-lite {
        padding: 0.75rem 1rem !important;
    }
}

/* ── 6A.1-05  REDUCED MOTION ─────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .prd-img-wrap img {
        transition: none !important;
    }
    .prd-card:hover .prd-img-wrap img {
        transform: none !important;
    }
}

/* [/PHASE 6A.1 — Products Index Simple Card Correction] */

/* [PHASE 6A.3 — Product Card Image Size Fix] */

/* ══════════════════════════════════════════════════════
   SCOPE: Products Index page only.
   Fix: Phase 6A/6A.1 set padding: 0.875rem on .prd-img-wrap img,
   leaving too much empty space around product images.
   Reduction to 0.25rem lets the image fill the 4:3 container.
   object-fit: contain is kept — no distortion, no cropping.
══════════════════════════════════════════════════════ */

.prd-img-wrap img {
    padding: 0.25rem !important;
}

/* [/PHASE 6A.3 — Product Card Image Size Fix] */

/* [PHASE 6B — Final Product Card Redesign] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: Products Index page only — shop/index.blade.php.
   Direction: Concept 3 (Premium B2B) + Concept 1 (Clean catalog).
   Uses entirely new pkd-* class namespace.
   Old prd-* card rules in 6A/6A.1/6A.3 are now dead code —
   no blade elements carry those classes anymore. No conflict.
   Filter classes (prd-filter-panel, prd-filter-lite, 6A/6A.1)
   are untouched. Pagination/empty state from 6A untouched.
══════════════════════════════════════════════════════════════ */

/* ── 6B-01  CARD WRAPPER ──────────────────────────────────────────
   overflow:hidden clips the image area's rounded top corners.
   Controlled shadow — not Bootstrap's heavy .shadow default.
   Hover: 3px lift + brand-blue border glow.                      */

.pkd-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.pkd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(57, 108, 240, 0.12);
    border-color: rgba(57, 108, 240, 0.3);
}

/* ── 6B-02  IMAGE AREA ────────────────────────────────────────────
   Background: #f0f5ff — very light brand-blue tint that reads as
   El Kayan blue without any text, unifying all cards in the grid.
   object-fit: contain — product detail and branding never cropped.
   0.5rem padding gives products room without feeling empty.
   display:flex centers the image in the container.               */

.pkd-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f0f5ff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkd-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    display: block;
    transition: transform 0.35s ease;
}

.pkd-card:hover .pkd-img-wrap img {
    transform: scale(1.03);
}

/* ── 6B-03  PRICE BADGE ───────────────────────────────────────────
   Top-end of image area (top-right in LTR, top-left in RTL).
   inset-inline-end = RTL-safe.                                    */

.pkd-price {
    position: absolute;
    top: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    background: var(--ek-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.625rem;
    border-radius: 50rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── 6B-04  TAGS — IMAGE OVERLAY AT BOTTOM-START ─────────────────
   Semi-transparent white pill on image bg.
   inset-inline-start = RTL-safe (bottom-right in RTL).
   backdrop-filter adds a gentle blur in modern browsers.         */

.pkd-tags {
    position: absolute;
    bottom: 0.5rem;
    inset-inline-start: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    z-index: 2;
}

.pkd-tag {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.2rem 0.5625rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ek-primary);
    border: 1px solid rgba(57, 108, 240, 0.22);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    backdrop-filter: blur(3px);
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.pkd-tag:hover {
    background: var(--ek-primary);
    color: #ffffff;
}

/* ── 6B-05  CARD BODY ─────────────────────────────────────────────
   Flex column so pkd-actions can use margin-top:auto.
   gap:0.3125rem for consistent spacing between title/sku.        */

.pkd-body {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.125rem 1.125rem;
    gap: 0.3125rem;
}

/* ── 6B-06  PRODUCT TITLE ─────────────────────────────────────────
   2-line clamp keeps all cards equal height in the grid row.
   Navy color, bold, readable at 0.9375rem.                       */

.pkd-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ek-navy);
    line-height: 1.45;
    text-decoration: none;
    margin-bottom: 0;
    transition: color 0.18s ease;
}

.pkd-title:hover {
    color: var(--ek-primary);
}

/* ── 6B-07  SKU / SERIAL NUMBER ──────────────────────────────────
   Monospace treatment signals this is a technical identifier.
   No pill/badge wrapper — stays clean.                           */

.pkd-sku {
    font-size: 0.75rem;
    font-family: ui-monospace, "Courier New", Courier, monospace;
    color: var(--ek-muted);
    letter-spacing: 0.025em;
    margin-bottom: 0;
}

/* ── 6B-08  ACTION ROW ────────────────────────────────────────────
   margin-top:auto pushes actions to card bottom regardless of
   title/sku line count. Hairline border-top anchors the zone.
   align-items:stretch makes both buttons the same height.        */

.pkd-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    align-items: stretch;
}

/* ── 6B-09  VIEW DETAILS ─────────────────────────────────────────
   flex:1 makes this button fill remaining width.
   Outline style (brand-blue border, transparent bg).
   Hover: fills to solid brand-blue.                              */

.pkd-btn-view {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4375rem 0.75rem;
    border-radius: 8px;
    border: 1.5px solid var(--ek-primary);
    color: var(--ek-primary);
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.pkd-btn-view:hover {
    background: var(--ek-primary);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(57, 108, 240, 0.25);
}

/* ── 6B-10  ADD TO CART ──────────────────────────────────────────
   Solid brand-blue — primary conversion action.
   flex-shrink:0 keeps it at natural width beside .pkd-btn-view.
   color:#fff !important overrides any theme link color rule.     */

.pkd-btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4375rem 0.875rem;
    border-radius: 8px;
    border: 1.5px solid var(--ek-primary);
    background: var(--ek-primary);
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.pkd-btn-cart:hover {
    background: var(--ek-primary-dark);
    border-color: var(--ek-primary-dark);
    box-shadow: 0 3px 10px rgba(57, 108, 240, 0.28);
    color: #ffffff !important;
}

/* ── 6B-11  RESPONSIVE ───────────────────────────────────────────*/

@media (max-width: 575.98px) {
    /* Mobile: stack buttons full-width for easier tapping */
    .pkd-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pkd-btn-view,
    .pkd-btn-cart {
        flex: none;
        width: 100%;
        justify-content: center;
    }

    .pkd-body {
        padding: 0.875rem 1rem 1rem;
    }
}

/* ── 6B-12  RTL ──────────────────────────────────────────────────
   pkd-price: inset-inline-end → flips to left edge in RTL.
   pkd-tags: inset-inline-start → flips to right edge in RTL.
   Both use logical CSS — RTL is handled automatically.
   pkd-actions: flex row mirrors naturally in RTL.                */

/* ── 6B-13  REDUCED MOTION ──────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .pkd-card,
    .pkd-img-wrap img,
    .pkd-btn-view,
    .pkd-btn-cart,
    .pkd-tag {
        transition: none;
    }

    .pkd-card:hover {
        transform: none;
    }

    .pkd-card:hover .pkd-img-wrap img {
        transform: none;
    }
}

/* [/PHASE 6B — Final Product Card Redesign] */

/* [PHASE 6B.1 — Product Card Media Full-Bleed Fix] */

/* ══════════════════════════════════════════════════════
   SCOPE: Products Index pkd-img-wrap img only.
   Phase 6B used object-fit:contain + padding:0.5rem,
   leaving visible pale background around product images.
   Fix: padding removed, switched to object-fit:cover
   (slight center-crop accepted by user to eliminate the
   empty pale space). Background stays on pkd-img-wrap
   as a fallback for image load failures only.
══════════════════════════════════════════════════════ */

.pkd-img-wrap img {
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* [/PHASE 6B.1 — Product Card Media Full-Bleed Fix] */

/* [PHASE 7 — Blog, Solutions, Projects & Contact Quick Polish] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: blog/index, projects/index, solutions/index, contact.
   Approach: CSS-only — no Blade edits.
   Selectors target existing theme classes from the blade files.
   RTL-safe where logical positioning is used.
══════════════════════════════════════════════════════════════ */

/* ── 7-01  BLOG & PROJECT CARDS  (.card.blog) ──────────────────
   Shared by blog/index and projects/index.
   Adds: consistent 16:9 image ratio with cover fit,
   hover lift + brand-blue border glow, title colour hover.    */

.card.blog {
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.card.blog:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(57, 108, 240, 0.1) !important;
    border-color: rgba(57, 108, 240, 0.25) !important;
}

.card.blog .image {
    aspect-ratio: 16 / 9;
    background: #f0f5ff;
}

.card.blog .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.card.blog:hover .image img {
    transform: scale(1.04);
}

.card.blog .card-body.content a.title,
.card.blog .card-body.content a.h5.title {
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease;
}

.card.blog .card-body.content a.title:hover,
.card.blog .card-body.content a.h5.title:hover {
    color: var(--ek-primary) !important;
}

.card.blog .card-body.content a.link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ek-primary) !important;
    text-decoration: none;
    transition: gap 0.18s ease;
}

.card.blog .card-body.content a.link:hover {
    gap: 0.45rem;
}

/* ── 7-02  BLOG TAG PILLS ────────────────────────────────────────
   .blog-tag sits inside .image — absolute-positioned overlay.
   Replaces Bootstrap badge defaults with the brand pill look
   already used for pkd-tag on product cards (Phase 6B).       */

.blog-tag {
    position: absolute;
    bottom: 0.5rem;
    inset-inline-start: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    z-index: 2;
}

.blog-tag .badge {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.2rem 0.5625rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--ek-primary) !important;
    border: 1px solid rgba(57, 108, 240, 0.22);
    backdrop-filter: blur(3px);
    line-height: 1.4;
    white-space: nowrap;
}

/* ── 7-03  SOLUTIONS CARDS  (.card.blog-post) ───────────────────
   Used on solutions/index only. Same hover-lift pattern.
   Image area: 16:9 ratio with cover fit.                      */

.card.blog-post {
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.card.blog-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(57, 108, 240, 0.1) !important;
    border-color: rgba(57, 108, 240, 0.25) !important;
}

.card.blog-post .image {
    aspect-ratio: 16 / 9;
    background: #f0f5ff;
}

.card.blog-post .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.card.blog-post:hover .image img {
    transform: scale(1.04);
}

.card.blog-post .content a.title {
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease;
}

.card.blog-post .content a.title:hover {
    color: var(--ek-primary) !important;
}

/* ── 7-04  CONTACT MAP ───────────────────────────────────────────
   Rounded card with shadow. Taller iframe for better usability. */

.card.map {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card.map iframe {
    display: block;
    width: 100%;
    height: 420px;
}

/* ── 7-05  CONTACT INFO FEATURE BLOCKS ──────────────────────────
   .d-flex.feature — each contact-info item (phone, email, etc).
   Adds a light card frame and hover glow.
   Icon circle: replaces raw text-center px-3 with a proper shape. */

.d-flex.feature {
    height: 100%;            /* fill the column → all cards in a row equal height */
    padding: 1.125rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition:
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.d-flex.feature:hover {
    box-shadow: 0 6px 20px rgba(57, 108, 240, 0.1);
    border-color: rgba(57, 108, 240, 0.22);
}

.d-flex.feature .icons {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(57, 108, 240, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    line-height: 1;
    padding: 0;
}

/* ── 7-06  CONTACT FORM ─────────────────────────────────────────
   Softer card radius + brand-blue focus ring on all inputs.   */

.card.custom-form {
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
}

.card.custom-form .form-control:focus {
    border-color: var(--ek-primary);
    box-shadow: 0 0 0 0.2rem rgba(57, 108, 240, 0.15);
}

/* ── 7-07  REDUCED MOTION ────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .card.blog,
    .card.blog-post,
    .card.blog .image img,
    .card.blog-post .image img,
    .d-flex.feature {
        transition: none;
    }

    .card.blog:hover,
    .card.blog-post:hover {
        transform: none;
    }

    .card.blog:hover .image img,
    .card.blog-post:hover .image img {
        transform: none;
    }
}

/* [/PHASE 7 — Blog, Solutions, Projects & Contact Quick Polish] */

/* [PHASE 6C — Remaining Products Resources Contact Retouch] */

/* ══════════════════════════════════════════════════════════════
   SCOPE:
     Part 1 — Product Detail  (shop/product.blade.php)
     Part 2 — Resources       (blog/article, solutions/show,
                                projects/show)
     Part 3 — Contact         (contact.blade.php refinements)
   Approach:
     New pdp-* / prj-* namespaces for scoped rules.
     CSS-only targets used where no Blade wrapper was added.
     Phase 7 index-card rules are intentionally left intact.
     All other phase blocks are untouched.
══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 1 — PRODUCT DETAIL PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 6C-01  MAIN CARD ─────────────────────────────────────────
   .pdp-card added to the card.blog-post wrapper in Blade.
   Stronger radius and controlled shadow to lift the card.    */

.pdp-card {
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden;
}

/* ── 6C-02  PRODUCT MAIN IMAGE ───────────────────────────────
   Direct <img> child of .pdp-card.
   object-fit:contain — product images must not be cropped.
   Padded background gives the same "light-bg media" feel
   as pkd-img-wrap on the index cards.                       */

.pdp-card > img.img-fluid {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: contain;
    object-position: center;
    background: #f0f5ff;
    padding: 2rem;
}

/* ── 6C-03  PRODUCT CARD BODY ────────────────────────────────*/

.pdp-body {
    padding: 2rem !important;
}

.pdp-body > p:first-child {
    color: #3d4a5c;
    font-size: 0.9375rem;
    line-height: 1.8;
}

/* ── 6C-04  META / ACTION ROW ────────────────────────────────
   ul.post-meta row now carries .pdp-meta-row.
   Re-built to wrap cleanly on small viewports.             */

.pdp-meta-row {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.75rem;
    padding-top: 1.25rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.pdp-meta-row > li:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Request Now — keep solid brand blue */
.pdp-meta-row .btn.btn-primary {
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    letter-spacing: 0.01em;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.pdp-meta-row .btn.btn-primary:hover {
    box-shadow: 0 4px 14px rgba(57, 108, 240, 0.28);
    transform: translateY(-1px);
}

/* Product Link / Datasheet — restyle btn-danger to brand outline */
.pdp-meta-row .btn.btn-danger {
    background: transparent;
    border-color: var(--ek-primary);
    color: var(--ek-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.pdp-meta-row .btn.btn-danger:hover {
    background: var(--ek-primary);
    border-color: var(--ek-primary);
    color: #ffffff;
}

/* ── 6C-05  PRICE BADGE ──────────────────────────────────────
   Replaces bg-danger inline classes with a brand badge.     */

.pdp-price-badge {
    display: inline-block;
    background: var(--ek-primary);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.375rem 1rem;
    border-radius: 8px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── 6C-06  TAG CLOUD ────────────────────────────────────────
   .pdp-tagcloud and the base .tagcloud — brand pill style.  */

.pdp-tagcloud a,
.tagcloud a {
    display: inline-block;
    font-size: 0.75rem !important;
    font-weight: 500;
    padding: 0.2rem 0.625rem;
    border-radius: 50rem;
    border: 1px solid rgba(57, 108, 240, 0.3);
    color: var(--ek-primary) !important;
    background: rgba(57, 108, 240, 0.05);
    margin: 0.125rem;
    text-decoration: none;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.pdp-tagcloud a:hover,
.tagcloud a:hover {
    background: var(--ek-primary);
    color: #ffffff !important;
    border-color: var(--ek-primary);
}

/* ── 6C-07  SPECS / RESOURCES TABS ──────────────────────────
   Underline-style tabs — clean, no boxy borders.           */

.pdp-card .tabs-container {
    margin-top: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.pdp-card .nav-tabs {
    background: #f8f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    padding: 0 0.75rem;
    gap: 0.25rem;
}

.pdp-card .nav-tabs .nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.75rem 1rem;
    background: transparent;
    transition:
        color 0.18s ease,
        border-color 0.18s ease;
}

.pdp-card .nav-tabs .nav-link.active,
.pdp-card .nav-tabs .nav-link:hover {
    color: var(--ek-primary);
    border-bottom-color: var(--ek-primary);
    background: transparent;
}

.pdp-card .tab-content {
    background: #ffffff;
}

.pdp-card .panel-body {
    padding: 1rem 1.25rem 1.25rem;
}

.pdp-card .table {
    font-size: 0.875rem;
    margin-bottom: 0;
}

.pdp-card .table td,
.pdp-card .table th {
    vertical-align: middle;
    padding: 0.625rem 0.875rem;
}

/* ── 6C-08  RELATED PRODUCTS HEADING ─────────────────────────*/

.container .col-12 > h5.mb-0 {
    font-weight: 700;
    color: var(--ek-navy);
    font-size: 1.0625rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ek-primary);
    display: inline-block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 2A — BLOG ARTICLE PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 6C-09  ARTICLE MAIN CARD ────────────────────────────────
   .card.blog-post on blog/article.blade.php.
   Scoped away from .pdp-card using :not().                 */

.card.blog-post:not(.pdp-card) {
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden;
}

/* ── 6C-10  ARTICLE PREVIEW IMAGE ───────────────────────────
   Direct <img> child — no wrapper in Blade.
   cover-fit is safe for editorial/blog hero images.        */

.card.blog-post:not(.pdp-card) > img.img-fluid {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center top;
}

/* ── 6C-11  ARTICLE BODY TYPOGRAPHY ─────────────────────────
   {!! $article->description !!} may contain rich HTML.
   Editorial defaults: readable size, generous line-height. */

.card.blog-post:not(.pdp-card) .card-body.content {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #3d4a5c;
    padding: 2rem !important;
}

.card.blog-post:not(.pdp-card) .card-body.content h2,
.card.blog-post:not(.pdp-card) .card-body.content h3,
.card.blog-post:not(.pdp-card) .card-body.content h4 {
    color: var(--ek-navy);
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.625rem;
    line-height: 1.35;
}

.card.blog-post:not(.pdp-card) .card-body.content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 1rem 0;
    display: block;
}

.card.blog-post:not(.pdp-card) .card-body.content blockquote {
    border-inline-start: 3px solid var(--ek-primary);
    margin-inline-start: 0;
    padding: 0.75rem 1.25rem;
    background: rgba(57, 108, 240, 0.04);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #4a5568;
}

/* ── 6C-12  BLOG SIDEBAR ─────────────────────────────────────*/

.sidebar .widget-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ek-navy);
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ek-primary);
    display: inline-block;
}

.sidebar .p-4.rounded.shadow {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
}

.sidebar .catagory li {
    padding: 0;
}

.sidebar .catagory a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: #4a5568;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: color 0.18s ease;
}

.sidebar .catagory a:hover {
    color: var(--ek-primary);
}

.sidebar .catagory li:last-child a {
    border-bottom: none;
}

/* Recent articles — thumbnail + title row */
.sidebar .flex-1 .title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ek-navy);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.sidebar .flex-1 .title:hover {
    color: var(--ek-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 2B — SOLUTION DETAIL PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 6C-13  BENEFIT FEATURE CARDS ───────────────────────────
   .card.feature.explore-feature on solutions/show.         */

.card.feature.explore-feature {
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.card.feature.explore-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(57, 108, 240, 0.1) !important;
    border-color: rgba(57, 108, 240, 0.25) !important;
}

/* Icon circle — replace raw shadow with soft brand fill */
.card.feature.explore-feature .icon.rounded-circle {
    width: 56px;
    height: 56px;
    background: rgba(57, 108, 240, 0.09);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.card.feature.explore-feature .content h5 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ek-navy);
    line-height: 1.4;
}

/* ── 6C-14  SOLUTION CTA BANNER ─────────────────────────────*/

#subscribe .rounded-pill,
#subscribe .bg-primary {
    border-radius: 16px !important;
}

/* ── 6C-15  SOLUTION SECTION IMAGES ─────────────────────────
   Carousel and alternating section images.                  */

.tiny-one-item img,
.section-title + .watch-video,
.col-lg-5 .img-fluid.rounded-md {
    border-radius: 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 2C — PROJECT DETAIL PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 6C-16  PROJECT MAIN MEDIA ───────────────────────────────
   .prj-main-media wrapper added in Blade.                  */

.prj-main-media {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
}

.prj-main-media img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    object-position: center;
}

/* ── 6C-17  PROJECT DESCRIPTION ─────────────────────────────*/

.col-lg-8.col-md-6 > p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #3d4a5c;
    margin-top: 0.25rem;
}

/* ── 6C-18  PROJECT SIDEBAR ──────────────────────────────────
   .prj-sidebar class added to .sidebar.sticky-sidebar.     */

.prj-sidebar > div {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.prj-sidebar .btn.btn-primary {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.625rem 1rem;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.prj-sidebar .btn.btn-primary:hover {
    box-shadow: 0 4px 14px rgba(57, 108, 240, 0.28);
    transform: translateY(-1px);
}

.prj-sidebar h6 {
    font-weight: 700;
    color: var(--ek-navy);
}

.prj-sidebar small.text-muted {
    font-size: 0.75rem;
}

.prj-sidebar li.list-item {
    font-size: 0.875rem;
    color: #4a5568;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 2D — GALLERY CARDS (solutions/show & projects/show)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 6C-19  WORK / GALLERY CARD ─────────────────────────────
   .card.work-container.work-modern — shared gallery card.  */

.card.work-container.work-modern {
    border-radius: 10px !important;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.card.work-container.work-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13) !important;
}

.card.work-container.work-modern img {
    transition: transform 0.35s ease;
}

.card.work-container.work-modern:hover img {
    transform: scale(1.05);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PART 3 — CONTACT PAGE (additional refinements)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Phase 7 already added:
   .card.map, .card.custom-form, .d-flex.feature basics.
   Rules below add detail without overriding Phase 7.       */

/* ── 6C-20  CONTACT FORM — SECTION TITLE ────────────────────*/

h4.card-title.text-primary {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

/* ── 6C-21  CONTACT FORM — LABELS ───────────────────────────*/

.card.custom-form .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ek-navy);
    margin-bottom: 0.3rem;
}

/* ── 6C-22  CONTACT FORM — INPUTS ───────────────────────────*/

.card.custom-form .form-control {
    border-radius: 8px;
    border-color: rgba(0, 0, 0, 0.12);
    font-size: 0.9375rem;
    padding: 0.625rem 0.875rem;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
    background: #ffffff;
}

.card.custom-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* ── 6C-23  CONTACT SUBMIT BUTTON ───────────────────────────*/

.card.custom-form .btn.btn-primary {
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    letter-spacing: 0.02em;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.card.custom-form .btn.btn-primary:hover {
    box-shadow: 0 4px 18px rgba(57, 108, 240, 0.3);
    transform: translateY(-1px);
}

/* ── 6C-24  CONTACT — SESSION MESSAGE ───────────────────────
   Success/error message from session flash.                */

#error-msg {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 6C-25  TABLET (max 991.98px) ───────────────────────────*/

@media (max-width: 991.98px) {
    .pdp-card > img.img-fluid {
        height: 300px;
        padding: 1.25rem;
    }

    .prj-main-media img {
        max-height: 360px;
    }
}

/* ── 6C-26  MOBILE (max 767.98px) ───────────────────────────*/

@media (max-width: 767.98px) {
    .pdp-card > img.img-fluid {
        height: 220px;
        padding: 1rem;
    }

    .pdp-body {
        padding: 1.25rem !important;
    }

    .pdp-meta-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pdp-meta-row > li {
        width: 100%;
    }

    .pdp-meta-row > li:first-child {
        flex-direction: column;
    }

    .pdp-meta-row .btn {
        width: 100%;
    }

    .card.blog-post:not(.pdp-card) > img.img-fluid {
        max-height: 260px;
    }

    .card.blog-post:not(.pdp-card) .card-body.content {
        padding: 1.25rem !important;
    }

    .prj-main-media img {
        max-height: 260px;
    }
}

/* ── 6C-27  REDUCED MOTION ───────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .card.feature.explore-feature,
    .card.work-container.work-modern,
    .card.work-container.work-modern img {
        transition: none;
    }

    .card.feature.explore-feature:hover,
    .card.work-container.work-modern:hover {
        transform: none;
    }

    .card.work-container.work-modern:hover img {
        transform: none;
    }

    .pdp-meta-row .btn:hover,
    .prj-sidebar .btn.btn-primary:hover,
    .card.custom-form .btn.btn-primary:hover {
        transform: none;
        box-shadow: none;
    }
}

/* [/PHASE 6C — Remaining Products Resources Contact Retouch] */

/* [PHASE 8 — Resources Pages UI/UX Enhancement] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: All resources pages:
     - Blog index       (blog/index.blade.php)
     - Blog article     (blog/article.blade.php)
     - Solutions index  (solutions/index.blade.php)
     - Solutions detail (solutions/show.blade.php)
     - Projects index   (projects/index.blade.php)
     - Projects detail  (projects/show.blade.php)
   New class namespaces: blg-* / sln-* / prj-*
   Phase 7 and 6C rules are extended, not overridden.
══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED — SECTION INTRO TITLES
   .section-title used on all resource listing pages.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-01  PAGE SECTION INTRO ─────────────────────────────────*/

.blg-section .section-title,
.sln-section .section-title,
.prj-section .section-title {
    position: relative;
}

/* Shared pill badge — used for category labels everywhere */
.blg-category-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    border-radius: 50rem;
    background: rgba(57, 108, 240, 0.09);
    color: var(--ek-primary);
    border: 1px solid rgba(57, 108, 240, 0.22);
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: 1.5;
    transition:
        background 0.18s ease,
        color 0.18s ease;
    white-space: nowrap;
}

.blg-category-pill:hover {
    background: var(--ek-primary);
    color: #ffffff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG INDEX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-02  BLOG SECTION WRAPPER ──────────────────────────────
   Subtle off-white bg distinguishes from plain white pages. */

.blg-section {
    background: #f8f9fb;
}

/* ── 8-03  BLOG ARTICLE CARD ─────────────────────────────────
   .blg-card extends Phase 7 .card.blog rules with
   tighter body padding and flex-column layout.             */

.blg-card .card-body.content.blg-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.25rem 1.25rem;
    gap: 0.3rem;
}

/* ── 8-04  BLOG CARD META ROW ────────────────────────────────
   Category pill sits above the title — scannable at a glance. */

.blg-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* ── 8-05  BLOG CARD TITLE LINK ──────────────────────────────*/

.blg-card .card-body .h5.title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ek-navy) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blg-card .card-body .h5.title:hover {
    color: var(--ek-primary) !important;
}

/* ── 8-06  BLOG CARD DESCRIPTION ─────────────────────────────*/

.blg-card .card-body p.text-muted {
    font-size: 0.875rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

/* ── 8-07  BLOG READ MORE LINK ───────────────────────────────
   Phase 7 already made it primary colour + gap animation.
   Push to bottom of flex column.                          */

.blg-card .card-body a.link {
    margin-top: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG ARTICLE PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-08  ARTICLE CARD ──────────────────────────────────────
   .blg-article-card extends Phase 6C .card.blog-post:not(.pdp-card). */

.blg-article-card {
    border-radius: 14px !important;
}

/* ── 8-09  ARTICLE META BAR ──────────────────────────────────
   Category pill + date — sits above the h1 title inside body. */

.blg-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.blg-article-date {
    font-size: 0.8125rem;
    color: var(--ek-muted);
    font-weight: 500;
}

/* ── 8-10  ARTICLE H1 TITLE ──────────────────────────────────
   Large editorial title inside card body.                   */

.blg-article-title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--ek-navy);
    line-height: 1.3;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

/* ── 8-11  ARTICLE BODY ──────────────────────────────────────
   .blg-article-body extends Phase 6C card-body.content.
   Constrained reading width on large screens.              */

.blg-article-body {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Rich content helpers inside the article body */
.blg-article-body > p,
.blg-article-body > ul,
.blg-article-body > ol {
    margin-bottom: 1.125rem;
}

.blg-article-body > hr {
    border-color: rgba(0, 0, 0, 0.08);
    margin: 2rem 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOG SIDEBAR (complement Phase 6C rules)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-12  SIDEBAR SEARCH ────────────────────────────────────*/

.sidebar #search2 .searchform input[type="text"] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 0.9rem;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.sidebar #search2 .searchform input[type="text"]:focus {
    border-color: var(--ek-primary);
    box-shadow: 0 0 0 0.2rem rgba(57, 108, 240, 0.15);
}

.sidebar #search2 .searchform input[type="submit"] {
    display: none;
}

/* ── 8-13  SIDEBAR RECENT ARTICLES ──────────────────────────*/

.sidebar .d-flex.align-items-center {
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    gap: 0.75rem;
}

.sidebar .d-flex.align-items-center:last-child {
    border-bottom: none;
}

.sidebar .d-flex.align-items-center img.avatar {
    border-radius: 6px !important;
    width: 56px !important;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar .d-flex.align-items-center .text-muted {
    font-size: 0.75rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOLUTIONS INDEX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-14  INTRO SECTION ─────────────────────────────────────*/

.section .row.align-items-end.mb-4 .section-title h4.title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--ek-navy);
    position: relative;
    display: inline-block;
    padding-bottom: 0.625rem;
}

.section .row.align-items-end.mb-4 .section-title h4.title::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 2.5rem;
    height: 3px;
    background: var(--ek-primary);
    border-radius: 2px;
}

.section .row.align-items-end.mb-4 .section-title p.text-muted {
    font-size: 0.9375rem;
    line-height: 1.75;
    max-width: 640px;
}

/* ── 8-15  SOLUTION CARD ─────────────────────────────────────
   .sln-card — unified card replacing the nested p-0/content
   structure. Phase 7 hover effects on .card.blog-post apply.  */

.sln-card .image {
    aspect-ratio: 16 / 9;
    background: #f0f5ff;
}

.sln-card .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.sln-card:hover .image img {
    transform: scale(1.04);
}

/* ── 8-16  SOLUTION CARD BODY ────────────────────────────────*/

.sln-card-body {
    display: flex;
    flex-direction: column;
    padding: 1.25rem !important;
    gap: 0.5rem;
}

/* ── 8-17  SOLUTION CARD TITLE ───────────────────────────────*/

.sln-card-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ek-navy) !important;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.18s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sln-card-title:hover {
    color: var(--ek-primary) !important;
}

/* ── 8-18  SOLUTION CARD DESCRIPTION ────────────────────────*/

.sln-card-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #4a5568;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* ── 8-19  SOLUTION READ MORE LINK ───────────────────────────
   Underline-style CTA with arrow — pushed to card bottom.  */

.sln-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ek-primary);
    text-decoration: none;
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    transition:
        gap 0.18s ease,
        color 0.18s ease;
}

.sln-readmore:hover {
    gap: 0.5rem;
    color: var(--ek-primary);
}

.sln-readmore svg,
.sln-readmore .fea {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOLUTIONS DETAIL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-20  INTRO BLOCK ───────────────────────────────────────*/

.section .col-lg-10 .section-title h4.title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ek-navy);
}

.section .col-lg-10 .section-title p.text-muted {
    font-size: 0.9375rem;
    line-height: 1.8;
}

/* ── 8-21  TESTIMONIAL / INSIGHT CARDS ──────────────────────
   .customer-testi on solutions/show testimonials carousel.  */

.customer-testi .content.p-3.shadow.rounded {
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    background: #ffffff;
}

.customer-testi .content p.text-muted {
    font-size: 0.9rem;
    line-height: 1.7;
    font-style: italic;
}

.customer-testi p.text-primary {
    font-weight: 700;
    font-size: 0.9rem;
}

.customer-testi small.text-muted {
    font-size: 0.8rem;
}

/* ── 8-22  ALTERNATING SECTION TEXT ─────────────────────────*/

.section .section-title h4.title {
    font-weight: 700;
    color: var(--ek-navy);
}

.section .section-title .text-muted.para-desc,
.section .section-title p.text-muted {
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROJECTS INDEX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-23  PROJECT INDEX CARD BODY ───────────────────────────
   The project index uses .card.blog (Phase 7 styled).
   Improve body layout with flex column push-to-bottom.     */

.section .col-lg-4 .card.blog .card-body.content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.125rem 1.25rem 1.25rem;
}

.section .col-lg-4 .card.blog .card-body .h5.title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ek-navy) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.section .col-lg-4 .card.blog .card-body .h5.title:hover {
    color: var(--ek-primary) !important;
}

.section .col-lg-4 .card.blog .card-body p.text-muted {
    font-size: 0.875rem;
    line-height: 1.6;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.section .col-lg-4 .card.blog .card-body a.link {
    margin-top: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROJECTS DETAIL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-24  PROJECT DETAIL DESCRIPTION TYPOGRAPHY ─────────────
   {!! $project->description !!} — rich editorial content.  */

.col-lg-8.col-md-6 > p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: #3d4a5c;
    margin-top: 1rem;
}

.col-lg-8.col-md-6 p a {
    color: var(--ek-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SHARED — PAGINATION IMPROVEMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-25  PAGINATION ────────────────────────────────────────*/

.pagination .page-link {
    border-radius: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--ek-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease;
}

.pagination .page-item.active .page-link {
    background: var(--ek-primary);
    border-color: var(--ek-primary);
    color: #ffffff;
}

.pagination .page-link:hover {
    background: rgba(57, 108, 240, 0.08);
    border-color: rgba(57, 108, 240, 0.3);
    color: var(--ek-primary);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 8-26  TABLET ─────────────────────────────────────────────*/

@media (max-width: 991.98px) {
    .blg-article-title {
        font-size: 1.375rem;
    }
}

/* ── 8-27  MOBILE ─────────────────────────────────────────────*/

@media (max-width: 767.98px) {
    .blg-article-title {
        font-size: 1.25rem;
    }

    .blg-article-body {
        max-width: 100%;
    }

    .blg-card .card-body.content.blg-card-body {
        padding: 1rem;
    }

    .sln-card-body {
        padding: 1rem !important;
    }
}

/* ── 8-28  REDUCED MOTION ─────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .sln-card .image img,
    .sln-readmore {
        transition: none;
    }

    .sln-card:hover .image img {
        transform: none;
    }
}

/* [/PHASE 8 — Resources Pages UI/UX Enhancement] */

/* [PHASE 8.1 — Hero Section Small-Monitor Fix] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: .ek-page-header on all interior pages.
   Problem: bg-half has a fixed height in style.css. When the
   breadcrumb wraps (long article titles, deep nav paths) or the
   page title is multi-line, the content overflows the section
   at medium viewports (800-1100px).
   Fix:
     1. height:auto already set in 5A-01 (above).
     2. Ensure proper vertical padding at each breakpoint so
        content has room and never touches the fixed navbar.
     3. Truncate the last breadcrumb item (usually the page
        title) so it never forces the breadcrumb to 3+ lines.
══════════════════════════════════════════════════════════════ */

/* ── 8.1-01  VERTICAL PADDING — MEDIUM SCREENS (800-1100px) ───
   The navbar is ~72px tall. 120px top pad clears it + adds
   breathing room. 40px bottom pad gives the title space.      */

@media (max-width: 1199.98px) {
    .ek-page-header {
        padding-top: 120px;
        padding-bottom: 40px;
    }
}

/* ── 8.1-02  VERTICAL PADDING — TABLET (< 768px) ───────────────*/

@media (max-width: 767.98px) {
    .ek-page-header {
        padding-top: 100px;
        padding-bottom: 32px;
    }

    .ek-page-header .title-heading {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ── 8.1-03  VERTICAL PADDING — MOBILE (< 576px) ───────────────*/

@media (max-width: 575.98px) {
    .ek-page-header {
        padding-top: 88px;
        padding-bottom: 28px;
    }
}

/* ── 8.1-04  BREADCRUMB — TRUNCATE LAST ITEM ────────────────────
   The active last breadcrumb item is often the full page title
   (article, project, solution name). On medium screens this
   wraps the pill to 2+ lines and inflates the hero height.
   max-width + ellipsis keeps it to one line while the
   full title still shows in the H1 below.                      */

@media (max-width: 1199.98px) {
    .ek-page-header .breadcrumb-item.active:last-child {
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
    }
}

@media (max-width: 767.98px) {
    .ek-page-header .breadcrumb-item.active:last-child {
        max-width: 180px;
    }
}

@media (max-width: 575.98px) {
    .ek-page-header .breadcrumb-item.active:last-child {
        max-width: 140px;
    }
}

/* ── 8.1-05  BREADCRUMB PILL — WRAPPING GUARD ───────────────────
   Prevent the whole pill from wrapping when there are many items.
   flex-wrap:wrap is the default; switching to nowrap + scroll
   keeps the pill on one line even with 4-5 items.             */

@media (max-width: 991.98px) {
    .ek-page-header .breadcrumb {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ek-page-header .breadcrumb::-webkit-scrollbar {
        display: none;
    }
}

/* ── 8.1-06  ABOUT PAGE HERO — RESPONSIVE PADDING ───────────────
   The about page hero uses .about-hero (NOT .ek-page-header) so
   rules above don't reach it. bg-half sets padding: 184px 0 90px
   on desktop — that 90px bottom creates a visible white gap, and
   184px top leaves 112px of dead space below the navbar.
   Here we tighten both values at lg and below to mirror the feel
   of other interior heroes without touching the desktop defaults. */

@media (max-width: 1199.98px) {
    .about-hero {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 767.98px) {
    .about-hero {
        padding-top: 80px !important;
        padding-bottom: 28px !important;
    }

    .about-hero .title-heading {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .about-hero {
        padding-top: 72px !important;
        padding-bottom: 24px !important;
    }
}

/* ── 8.1-07  BREADCRUMB BELOW TITLE — MOBILE & TABLET ───────────
   On small screens the breadcrumb pill above the H1 creates a
   crowded header. Moving it below the title improves hierarchy:
   the page title reads first, breadcrumb acts as sub-label.
   Flex column + order reorders without changing Blade HTML.
   Applies to all interior heroes (.ek-page-header) and the
   about page hero (.about-hero).                               */

@media (max-width: 991.98px) {
    .ek-page-header .title-heading,
    .about-hero .title-heading {
        display: flex;
        flex-direction: column;
    }

    /* H1 / page title → first */
    .ek-page-header .title-heading .ek-page-title,
    .about-hero .title-heading .about-hero-title {
        order: 1;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    /* Breadcrumb → second (below title) */
    .ek-page-header .title-heading .breadcrumb-position,
    .about-hero .title-heading .breadcrumb-position {
        order: 2;
        margin-top: 0.5rem;
    }
}

/* ── 8.1-08  ABOUT SECTION GAP — REDUCE BELOW HERO ─────────────
   The .section.about-retouch that follows the hero has 60px top
   padding (theme default). On mobile this creates the visible
   white box gap. Tighten it on small screens.                  */

@media (max-width: 767.98px) {
    .about-retouch {
        padding-top: 32px !important;
    }
}

/* [/PHASE 8.1 — Hero Section Small-Monitor Fix] */

/* [PHASE 8.2 — Testimonial Logo Fix] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: .ek-testi-item avatar images (company logos)
   Problem: company logos uploaded as reviewer profile pictures
   are forced into a circular avatar container. The theme's
   avatar class applies object-fit: cover which crops/distorts
   rectangular logos into circles.
   Fix: object-fit: contain + white background inside the circle
   so the full logo is visible without distortion.
══════════════════════════════════════════════════════════════ */

.ek-testi-item .d-flex img.avatar {
    object-fit:       contain !important;
    object-position:  center  !important;
    background-color: #ffffff;
    padding:          4px;
    border:           1px solid rgba(0, 0, 0, 0.07);
}

/* [/PHASE 8.2 — Testimonial Logo Fix] */

/* [PHASE 8.3 — Projects Index Enhancement] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: projects/index.blade.php — prj-idx-* namespace
   Style: full-bleed image overlay card — title always visible
   at bottom on a gradient veil; description + CTA slide up on
   hover. Intro: two-column split (heading left / text right).
══════════════════════════════════════════════════════════════ */

/* ── 8.3-01  SECTION ─────────────────────────────────────────*/

.prj-index-section {
    background: var(--ek-bg-soft, #f8faff);
}

/* ── 8.3-02  INTRO ROW ───────────────────────────────────────*/

.prj-intro-row {
    gap: 1.5rem 0;
}

.prj-intro-left {
    border-inline-end: 3px solid var(--ek-primary);
    padding-inline-end: 2rem;
}

.prj-index-title {
    font-size:      clamp(1.625rem, 3.2vw, 2.25rem);
    font-weight:    800;
    color:          var(--ek-navy);
    line-height:    1.15;
    letter-spacing: -0.02em;
    margin-bottom:  0.75rem;
}

.prj-title-accent {
    width:            3rem;
    height:           3px;
    background:       var(--ek-primary);
    border-radius:    2px;
    margin-top:       0.5rem;
}

.prj-intro-right {
    padding-inline-start: 2rem;
}

.prj-intro-desc {
    font-size:   1rem;
    line-height: 1.8;
    color:       #4a5568;
}

@media (max-width: 767.98px) {
    .prj-intro-left {
        border-inline-end: none;
        border-bottom:     3px solid var(--ek-primary);
        padding-inline-end: 0;
        padding-bottom:    1rem;
    }

    .prj-intro-right {
        padding-inline-start: 0;
    }
}

/* ── 8.3-03  CARD LINK WRAPPER ───────────────────────────────*/

.prj-idx-card {
    display:         block;
    border-radius:   var(--ek-radius-md);
    overflow:        hidden;
    text-decoration: none;
    box-shadow:      0 4px 24px rgba(0, 0, 0, 0.10);
    transition:
        transform  0.30s ease,
        box-shadow 0.30s ease;
}

.prj-idx-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 14px 40px rgba(57, 108, 240, 0.18);
}

/* ── 8.3-04  IMAGE WRAPPER ───────────────────────────────────*/

.prj-idx-img-wrap {
    position:     relative;
    aspect-ratio: 4 / 3;
    overflow:     hidden;
}

.prj-idx-img-wrap > img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform 0.45s ease;
}

.prj-idx-card:hover .prj-idx-img-wrap > img {
    transform: scale(1.07);
}

/* ── 8.3-05  OVERLAY PANEL ───────────────────────────────────
   Always shows title at bottom via a dark gradient.
   On hover the inner block (desc + cta) slides into view.   */

.prj-idx-overlay {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:    1.25rem;
    background: linear-gradient(
        to top,
        rgba(6, 16, 50, 0.88) 0%,
        rgba(6, 16, 50, 0.50) 45%,
        rgba(6, 16, 50, 0.00) 100%
    );
}

/* Hidden content block — slides up on hover */
.prj-idx-overlay-inner {
    overflow:   hidden;
    max-height: 0;
    opacity:    0;
    transition:
        max-height 0.38s ease,
        opacity    0.30s ease;
    margin-bottom: 0.75rem;
}

.prj-idx-card:hover .prj-idx-overlay-inner {
    max-height: 160px;
    opacity:    1;
}

/* ── 8.3-06  OVERLAY TITLE ───────────────────────────────────*/

.prj-idx-title {
    font-size:      1rem;
    font-weight:    700;
    color:          #ffffff !important;
    line-height:    1.35;
    margin:         0;
    display:        -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:       hidden;
}

/* ── 8.3-07  OVERLAY DESCRIPTION ────────────────────────────*/

.prj-idx-desc {
    font-size:   0.8125rem;
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.82);
    margin:      0 0 0.625rem;
    display:     -webkit-box;
    -webkit-line-clamp:  3;
    -webkit-box-orient:  vertical;
    overflow:    hidden;
}

/* ── 8.3-08  OVERLAY CTA ─────────────────────────────────────*/

.prj-idx-cta {
    display:     inline-flex;
    align-items: center;
    gap:         0.3rem;
    font-size:   0.8125rem;
    font-weight: 600;
    color:       #ffffff;
    background:  var(--ek-primary);
    padding:     0.3rem 0.875rem;
    border-radius: 50rem;
    transition:
        gap        0.18s ease,
        background 0.18s ease;
}

.prj-idx-card:hover .prj-idx-cta {
    gap:        0.5rem;
    background: var(--ek-primary-dark, #2a56d0);
}

.prj-idx-cta .uil {
    font-size:   1rem;
    line-height: 1;
}

/* ── 8.3-09  REDUCED MOTION ──────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .prj-idx-card,
    .prj-idx-img-wrap > img,
    .prj-idx-overlay-inner,
    .prj-idx-cta {
        transition: none;
    }

    .prj-idx-card:hover .prj-idx-overlay-inner {
        max-height: 160px;
        opacity:    1;
    }
}

/* [/PHASE 8.3 — Projects Index Enhancement] */

/* [PHASE 8.4 — Solutions Index Enhancement] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: solutions/index.blade.php — sln-idx-* namespace
   Same overlay-card style as Phase 8.3 (projects index).
   Intro: two-column split. Cards: full-bleed image overlay
   with title always visible, desc + CTA reveal on hover.
══════════════════════════════════════════════════════════════ */

/* ── 8.4-01  SECTION ─────────────────────────────────────────*/

.sln-index-section {
    background: var(--ek-bg-soft, #f8faff);
}

/* ── 8.4-02  INTRO ROW ───────────────────────────────────────*/

.sln-intro-row {
    gap: 1.5rem 0;
}

.sln-intro-left {
    border-inline-end: 3px solid var(--ek-primary);
    padding-inline-end: 2rem;
}

.sln-index-title {
    font-size:      clamp(1.625rem, 3.2vw, 2.25rem);
    font-weight:    800;
    color:          var(--ek-navy);
    line-height:    1.15;
    letter-spacing: -0.02em;
    margin-bottom:  0.75rem;
}

.sln-title-accent {
    width:        3rem;
    height:       3px;
    background:   var(--ek-primary);
    border-radius: 2px;
    margin-top:   0.5rem;
}

.sln-intro-right {
    padding-inline-start: 2rem;
}

.sln-intro-desc {
    font-size:   1rem;
    line-height: 1.8;
    color:       #4a5568;
}

@media (max-width: 767.98px) {
    .sln-intro-left {
        border-inline-end: none;
        border-bottom:     3px solid var(--ek-primary);
        padding-inline-end: 0;
        padding-bottom:    1rem;
    }

    .sln-intro-right {
        padding-inline-start: 0;
    }
}

/* ── 8.4-03  CARD LINK WRAPPER ───────────────────────────────*/

.sln-idx-card {
    display:         block;
    border-radius:   var(--ek-radius-md);
    overflow:        hidden;
    text-decoration: none;
    box-shadow:      0 4px 24px rgba(0, 0, 0, 0.10);
    transition:
        transform  0.30s ease,
        box-shadow 0.30s ease;
}

.sln-idx-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 14px 40px rgba(57, 108, 240, 0.18);
}

/* ── 8.4-04  IMAGE WRAPPER ───────────────────────────────────*/

.sln-idx-img-wrap {
    position:     relative;
    aspect-ratio: 4 / 3;
    overflow:     hidden;
}

.sln-idx-img-wrap > img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform 0.45s ease;
}

.sln-idx-card:hover .sln-idx-img-wrap > img {
    transform: scale(1.07);
}

/* ── 8.4-05  OVERLAY PANEL ───────────────────────────────────*/

.sln-idx-overlay {
    position:       absolute;
    inset:          0;
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:        1.25rem;
    background: linear-gradient(
        to top,
        rgba(6, 16, 50, 0.88) 0%,
        rgba(6, 16, 50, 0.50) 45%,
        rgba(6, 16, 50, 0.00) 100%
    );
}

.sln-idx-overlay-inner {
    overflow:      hidden;
    max-height:    0;
    opacity:       0;
    transition:
        max-height 0.38s ease,
        opacity    0.30s ease;
    margin-bottom: 0.75rem;
}

.sln-idx-card:hover .sln-idx-overlay-inner {
    max-height: 160px;
    opacity:    1;
}

/* ── 8.4-06  OVERLAY TITLE ───────────────────────────────────*/

.sln-idx-title {
    font-size:   1rem;
    font-weight: 700;
    color:       #ffffff !important;
    line-height: 1.35;
    margin:      0;
    display:     -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:    hidden;
}

/* ── 8.4-07  OVERLAY DESCRIPTION ────────────────────────────*/

.sln-idx-desc {
    font-size:   0.8125rem;
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.82);
    margin:      0 0 0.625rem;
    display:     -webkit-box;
    -webkit-line-clamp:  3;
    -webkit-box-orient:  vertical;
    overflow:    hidden;
}

/* ── 8.4-08  OVERLAY CTA ─────────────────────────────────────*/

.sln-idx-cta {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    font-size:     0.8125rem;
    font-weight:   600;
    color:         #ffffff;
    background:    var(--ek-primary);
    padding:       0.3rem 0.875rem;
    border-radius: 50rem;
    transition:
        gap        0.18s ease,
        background 0.18s ease;
}

.sln-idx-card:hover .sln-idx-cta {
    gap:        0.5rem;
    background: var(--ek-primary-dark, #2a56d0);
}

.sln-idx-cta .uil {
    font-size:   1rem;
    line-height: 1;
}

/* ── 8.4-09  REDUCED MOTION ──────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .sln-idx-card,
    .sln-idx-img-wrap > img,
    .sln-idx-overlay-inner,
    .sln-idx-cta {
        transition: none;
    }

    .sln-idx-card:hover .sln-idx-overlay-inner {
        max-height: 160px;
        opacity:    1;
    }
}

/* [/PHASE 8.4 — Solutions Index Enhancement] */

/* [PHASE 9 — Footer Premium Redesign] */

/* ══════════════════════════════════════════════════════════════
   SCOPE: footer.bg-footer in layouts/app.blade.php (CSS-only —
   the Blade file is locked, so all changes are visual via the
   existing class hooks: .bg-footer, .footer-head, .footer-list,
   .text-foot, .foot-social-icon, .footer-border-top).
   Goal: replace the flat slate (#35404E) with a deep branded
   navy gradient, brand top-accent, brighter text, refined
   social + contact treatments, and a polished bottom bar.
══════════════════════════════════════════════════════════════ */

/* ── 9-01  FOOTER BACKGROUND — branded navy gradient ──────────
   Deep navy → darker navy, with a faint brand-blue glow at the
   top centre and a brand-gradient accent line along the top.   */

footer.bg-footer {
    position:   relative;
    background: linear-gradient(170deg, #1a2744 0%, #131e36 60%, #0f1830 100%) !important;
    overflow:   hidden;
}

footer.bg-footer::before {
    content:  "";
    position: absolute;
    inset:    0 0 auto 0;
    height:   3px;
    background: linear-gradient(90deg,
        var(--ek-primary) 0%,
        #6b94ff 50%,
        var(--ek-primary) 100%);
    z-index:  2;
}

/* Soft brand glow behind the upper area */
footer.bg-footer::after {
    content:  "";
    position: absolute;
    top:      -140px;
    left:     50%;
    transform: translateX(-50%);
    width:    700px;
    height:   320px;
    background: radial-gradient(ellipse at center,
        rgba(57, 108, 240, 0.18) 0%,
        rgba(57, 108, 240, 0) 70%);
    pointer-events: none;
    z-index:  0;
}

/* Keep real content above the glow layer */
footer.bg-footer .container {
    position: relative;
    z-index:  1;
}

/* ── 9-02  FOOTER TEXT — improved contrast on navy ────────────*/

footer .text-foot {
    color:      #aeb9cc !important;
    transition: color 0.2s ease;
    line-height: 1.7;
}

footer .footer .text-foot.mt-4 {
    font-size: 0.9375rem;
}

/* ── 9-03  COLUMN HEADINGS — brighter + refined accent ────────*/

footer .footer-head {
    color:          #ffffff !important;
    font-weight:    600;
    font-size:      1.0625rem;
    letter-spacing: 0.01em;
}

footer .footer-head::after {
    width:      32px;
    height:     3px;
    background: linear-gradient(90deg, var(--ek-primary), #6b94ff);
}

/* ── 9-04  FOOTER LOGO ───────────────────────────────────────*/

footer .logo-footer img {
    opacity:    0.97;
    transition: opacity 0.2s ease;
}

footer .logo-footer:hover img {
    opacity: 1;
}

/* ── 9-05  SOCIAL ICONS — rounded chips with glass fill ───────
   Base theme sets 32px bordered squares. Upgrade to softer
   rounded chips with a subtle translucent fill. Hover (brand
   blue + lift + glow) already handled by Phase 2 / [09] blocks. */

.bg-footer .foot-social-icon li a {
    width:            38px;
    height:           38px;
    line-height:      36px;
    border-radius:    10px;
    background:       rgba(255, 255, 255, 0.05);
    border:           1px solid rgba(255, 255, 255, 0.12);
    color:            #c4d0e0;
}

.bg-footer .foot-social-icon li.list-inline-item {
    margin-inline-end: 0.4rem;
}

/* ── 9-06  CONTACT-INFO ICONS — brand-tinted, aligned ─────────
   The feather icons (map-pin, mail, phone, …) inside the
   Contact column. Tint them brand-blue and align with text.
   Kept inline (a stays inline-block) so the two-phone <li>
   that has two <a> tags is not broken into separate lines.    */

footer .footer-list li a .fea {
    color:          var(--ek-primary);
    stroke:         #6b94ff;
    vertical-align: -2px;
}

/* Brighten the chevron markers in the Learn More column */
footer .footer-list li a .mdi-chevron-right {
    color:      var(--ek-primary);
    transition: transform 0.2s ease;
}

footer .footer-list li a:hover .mdi-chevron-right {
    color: #6b94ff;
}

/* Comfortable row spacing in both footer link columns */
footer .footer-list li {
    margin-bottom: 0.55rem;
}

footer .footer-list li:last-child {
    margin-bottom: 0;
}

/* ── 9-07  BOTTOM BAR — copyright strip ──────────────────────*/

footer .footer-border-top,
footer.footer-border-top {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

footer .footer-py-30 {
    position: relative;
    z-index:  1;
}

footer .footer-py-30 .text-foot {
    font-size: 0.875rem;
}

footer .footer-py-30 a.text-reset {
    color:           #d4e4ff !important;
    font-weight:     600;
    text-decoration: none;
    transition:      color 0.2s ease;
}

footer .footer-py-30 a.text-reset:hover {
    color: #ffffff !important;
}

/* ── 9-08  REDUCED MOTION ────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    footer .text-foot,
    footer .logo-footer img,
    footer .footer-list li a .mdi-chevron-right,
    footer .footer-py-30 a.text-reset {
        transition: none;
    }
}

/* [/PHASE 9 — Footer Premium Redesign] */

/* ──────────────────────────────────────────────────────────────
   End of custom.css
────────────────────────────────────────────────────────────── */