* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #101828;
}

a {
    text-decoration: none;
    color: inherit;
}


/* navbar */

.navbar {
    height: 82px;
    background: #ffffff;
    border-bottom: 1px solid #dfe3e8;
    display: flex;
    align-items: center;
}

.nav-wrap {
    width: 88%;
    max-width: 1200px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #101828;
    color: #ffffff;

    border-left: 4px solid #2563eb;

    font-weight: bold;
}

.brand-text h3 {
    font-size: 16px;
}

.brand-text span {
    display: block;
    margin-top: 3px;

    font-size: 9px;
    letter-spacing: 1px;

    color: #667085;
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    font-size: 14px;
    color: #475467;
}

nav a:hover {
    color: #2563eb;
}

.nav-button {
    padding: 12px 20px;

    background: #2563eb;
    color: white;

    font-size: 13px;
    font-weight: bold;
}

.nav-button:hover {
    background: #1d4ed8;
}


/* hero */


.hero-wrap {
    width: 88%;
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 90px;

    align-items: center;
}

.eyebrow {
    color: #2563eb;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;

    margin-bottom: 18px;
}

.hero h1 {
    max-width: 650px;

    font-size: 52px;
    line-height: 1.02;
    letter-spacing: -2px;

    color: #101828;
}

.hero h1 span {
    display: block;
    color: #2563eb;
}

.hero-description {
    max-width: 590px;

    margin-top: 24px;

    font-size: 17px;
    line-height: 1.7;

    color: #667085;
}

.hero-buttons {
    display: flex;
    gap: 12px;

    margin-top: 30px;
}

.main-button,
.second-button {
    padding: 15px 22px;

    font-size: 14px;
    font-weight: bold;
}

.main-button {
    background: #2563eb;
    color: white;
}

.main-button:hover {
    background: #1d4ed8;
}

.second-button {
    background: #ffffff;

    color: #101828;

    border: 1px solid #cfd4dc;
}


/* hero card */

.hero-card {
    background: #101828;
    color: white;

    padding: 38px;

    border-top: 5px solid #2563eb;

    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}

.card-small {
    color: #98a2b3;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;

    margin-bottom: 10px;
}

.hero-card h2 {
    font-size: 26px;
    margin-bottom: 28px;
}

.metric {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.metric div {
    padding: 22px 0;
    border-top: 1px solid #344054;
}

.metric div:nth-child(odd) {
    padding-right: 20px;
}

.metric div:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid #344054;
}

.metric strong {
    display: block;

    color: #60a5fa;

    font-size: 25px;

    margin-bottom: 6px;
}

.metric span {
    color: #d0d5dd;
    font-size: 12px;
}


/* responsive */

@media (max-width: 850px) {

    nav {
        display: none;
    }

    .hero {
        padding: 70px 0;
    }

    .hero-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hero h1 {
        font-size: 45px;
    }
}
/* EXPERTISE PAGE */

.expertise-page {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 0 100px;
}

.page-heading {
    max-width: 700px;
    margin-bottom: 50px;
}

.page-heading > p {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.page-heading h1 {
    color: #101828;
    font-size: 42px;
    line-height: 1.1;
    margin: 0;
}

.page-heading span {
    display: block;
    margin-top: 15px;
    color: #667085;
    font-size: 16px;
    line-height: 1.6;
}


/* expertise boxes */

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #d0d5dd;
    border-left: 1px solid #d0d5dd;
}

.expertise-box {
    background: #ffffff;
    min-height: 230px;
    padding: 30px;

    border-right: 1px solid #d0d5dd;
    border-bottom: 1px solid #d0d5dd;

    transition: 0.2s;
}

.expertise-box:hover {
    background: #f8fafc;
    box-shadow: inset 0 3px 0 #2563eb;
}

.box-number {
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 32px;
}

.expertise-box h2 {
    color: #101828;
    font-size: 20px;
    margin-bottom: 12px;
}

.expertise-box p {
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}
/* ABOUT / PROFILE */

.about-page {
    width: 88%;
    max-width: 1200px;
    margin: auto;
    padding: 75px 0 100px;
}

.profile-section {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 70px;
    align-items: start;
}

.profile-photo {
    background: #e9edf3;
    min-height: 520px;
}

.photo-placeholder {
    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #98a2b3;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.profile-content {
    padding-top: 15px;
}

.about-label {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.profile-content h1 {
    font-size: 46px;
    color: #101828;
    margin-bottom: 8px;
}

.profile-content > h3 {
    color: #2563eb;
    font-size: 18px;
    margin-bottom: 25px;
}

.profile-intro {
    color: #667085;
    font-size: 16px;
    line-height: 1.7;
    max-width: 680px;
}

.experience-list {
    margin-top: 45px;
    border-top: 1px solid #d0d5dd;
}

.experience-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 25px;

    padding: 25px 0;
    border-bottom: 1px solid #d0d5dd;
}

.experience-item > span {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.experience-item h2 {
    color: #101828;
    font-size: 18px;
    margin-bottom: 5px;
}

.experience-item p {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================
   TEAM SHOWCASE
   ========================= */

.team-showcase {
    background: #f7f8fa;
    padding-bottom: 110px;
}


/* HERO */

.team-hero {
    max-width: 900px;
    margin: auto;
    padding: 95px 30px 70px;
    text-align: center;
}

.team-hero > p {
    margin-bottom: 14px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.team-hero h1 {
    margin: 0;

    color: #101828;

    font-size: 52px;
    line-height: 1.08;
    letter-spacing: -2px;
}

.team-hero span {
    display: block;

    max-width: 700px;

    margin: 20px auto 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.65;
}


/* GROUP */

.team-group {
    width: 88%;
    max-width: 1180px;

    margin: auto;
}

.group-title {
    margin-bottom: 30px;
}

.group-title p {
    margin: 0 0 7px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.group-title h2 {
    margin: 0;

    color: #101828;

    font-size: 30px;
}


/* PROFILE CARDS */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.profile-card {
    position: relative;

    height: 500px;

    overflow: hidden;

    background: #e5e7eb;

    border: 1px solid #d0d5dd;

    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}

.profile-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;

    transition: transform 0.35s ease;
}

.profile-card:hover img {
    transform: scale(1.025);
}


/* EMPTY PHOTO */

.profile-placeholder {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #e4e7ec,
            #f2f4f7
        );
}

.profile-placeholder span {
    color: #98a2b3;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* GLASS INFO PANEL */

.profile-overlay {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    padding: 18px 20px;

    background: rgba(15, 23, 42, 0.72);

    border: 1px solid rgba(255,255,255,0.18);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: white;
}

.profile-overlay p {
    margin: 0 0 5px;

    color: #93c5fd;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.profile-overlay h3 {
    margin: 0;

    font-size: 22px;
}

.profile-overlay span {
    display: block;

    margin-top: 5px;

    color: #d0d5dd;

    font-size: 13px;
}


/* FEATURED ABUL */

.profile-card.featured {
    border-top: 4px solid #2563eb;
}


/* ABUL DETAIL */

.profile-detail {
    width: 88%;
    max-width: 1180px;

    margin: 70px auto 0;

    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    gap: 70px;

    padding: 45px 0;

    border-top: 1px solid #d0d5dd;
    border-bottom: 1px solid #d0d5dd;
}

.detail-heading p {
    margin: 0 0 9px;

    color: #2563eb;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.detail-heading h2 {
    margin: 0;

    color: #101828;

    font-size: 29px;
}

.detail-content ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.detail-content li {
    position: relative;

    padding: 12px 0 12px 22px;

    border-bottom: 1px solid #eaecf0;

    color: #475467;

    font-size: 14px;
    line-height: 1.55;
}

.detail-content li:last-child {
    border-bottom: none;
}

.detail-content li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20px;

    width: 6px;
    height: 6px;

    background: #2563eb;
}


/* CONSULTING */

.consulting-group {
    margin-top: 85px;
}

.single-profile {
    grid-template-columns: minmax(300px, 520px);
}


/* MOBILE */

@media (max-width: 850px) {

    .team-hero h1 {
        font-size: 38px;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-card {
        height: 430px;
    }

    .profile-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}
.solutions-page {
    width: 88%;
    max-width: 1180px;
    margin: auto;
    padding: 80px 0 110px;
}
/* ===== SOLUTIONS PAGE FIX ===== */

.solutions-page {
    width: 88%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0 100px;
}

.solutions-heading {
    max-width: 850px;
    margin-bottom: 50px;
}

.solutions-heading > p {
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    margin-bottom: 12px;
}

.solutions-heading h1 {
    margin: 0;
    font-size: 48px;
    line-height: 1.08;
    color: #101828;
    letter-spacing: -1.5px;
}

.solutions-heading span {
    display: block;
    margin-top: 18px;
    max-width: 760px;
    color: #667085;
    font-size: 16px;
    line-height: 1.6;
}


/* 2 x 2 layout */

.solution-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}


/* cards */

.solution-card {
    min-height: 500px;
    padding: 34px;

    border: 1px solid #d0d5dd;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.solution-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 32px;
}

.solution-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;

    font-size: 13px;
    font-weight: 700;
}

.solution-top > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.solution-card h2 {
    margin: 0;

    font-size: 28px;
    line-height: 1.15;
}

.solution-description {
    margin-top: 15px;

    font-size: 15px;
    line-height: 1.6;
}

.solution-divider {
    height: 1px;

    margin: 28px 0 22px;
}

.included-title {
    margin: 0 0 12px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.solution-card ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.solution-card li {
    position: relative;

    padding: 8px 0 8px 22px;

    font-size: 14px;
    line-height: 1.45;
}

.solution-card li::before {
    content: "✓";

    position: absolute;
    left: 0;

    font-weight: 700;
}

.solution-link {
    margin-top: auto;
    padding-top: 32px;

    font-size: 13px;
    font-weight: 700;
}


/* CARD 1 */

.solution-dark {
    background: #101828;
    color: #ffffff;
}

.solution-dark .solution-description,
.solution-dark li {
    color: #d0d5dd;
}

.solution-dark .solution-top > span,
.solution-dark .included-title {
    color: #98a2b3;
}

.solution-dark .solution-divider {
    background: #344054;
}

.solution-dark .solution-link {
    color: #60a5fa;
}


/* CARD 2 */

.solution-grey {
    background: #e4e7ec;
    color: #101828;
}

.solution-grey .solution-description,
.solution-grey li {
    color: #475467;
}

.solution-grey .solution-top > span,
.solution-grey .included-title {
    color: #667085;
}

.solution-grey .solution-divider {
    background: #c7cdd6;
}

.solution-grey .solution-link {
    color: #101828;
}


/* CARD 3 */

.solution-grey {
    background: #e4e7ec;
    color: #101828;
}

.solution-grey .solution-description,
.solution-grey li {
    color: #475467;
}

.solution-grey .solution-top > span,
.solution-grey .included-title {
    color: #667085;
}

.solution-grey .solution-divider {
    background: #c7cdd6;
}

.solution-grey .solution-link {
    color: #101828;
}


/* CARD 4 */

.solution-dark {
    background: #101828;
    color: #ffffff;
}

.solution-dark .solution-description,
.solution-dark li {
    color: #d0d5dd;
}

.solution-dark .solution-top > span,
.solution-dark .included-title {
    color: #98a2b3;
}

.solution-dark .solution-divider {
    background: #344054;
}

.solution-dark .solution-link {
    color: #60a5fa;
}


/* hover */

.solution-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(16, 24, 40, 0.12);
}


/* mobile */

@media (max-width: 850px) {

    .solution-grid {
        grid-template-columns: 1fr !important;
    }

    .solutions-heading h1 {
        font-size: 38px;
    }

    .solution-card {
        min-height: auto;
    }
}
/* =========================
   LONG SOLUTION RECTANGLES
   ========================= */

.solution-strip-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.solution-strip {
    position: relative;

    min-height: 260px;

    overflow: hidden;

    background-size: cover;
    background-position: center;

    border: 1px solid #d0d5dd;
}

.strip-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(16, 24, 40, 0.94) 0%,
            rgba(16, 24, 40, 0.78) 48%,
            rgba(16, 24, 40, 0.30) 100%
        );
}

.strip-content {
    position: relative;
    z-index: 2;

    min-height: 260px;

    display: grid;
    grid-template-columns: 90px 1fr 70px;
    align-items: center;

    padding: 35px 42px;

    color: #ffffff;
}

.strip-number {
    color: #60a5fa;

    font-size: 18px;
    font-weight: 700;
}

.strip-text {
    max-width: 620px;
}

.strip-text > p {
    margin: 0 0 8px;

    color: #93c5fd;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.strip-text h2 {
    margin: 0;

    font-size: 31px;
    line-height: 1.1;
}

.strip-text span {
    display: block;

    margin-top: 12px;

    color: #d0d5dd;

    font-size: 15px;
    line-height: 1.6;
}

.strip-arrow {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: end;

    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 50%;

    color: #ffffff;

    font-size: 20px;
}

.solution-strip:hover .strip-arrow {
    background: #2563eb;
    border-color: #2563eb;
}


/* IMAGE FILES */

.strip-one {
    background-image: url("warehouse-optimization.jpg");
}

.strip-two {
    background-image: url("inventory-accuracy.jpg");
}

.strip-three {
    background-image: url("cost-reduction.jpg");
}

.strip-four {
    background-image: url("process-control.jpg");
}


/* mobile */

@media (max-width: 850px) {

    .strip-content {
        grid-template-columns: 55px 1fr 50px;
        padding: 28px 24px;
    }

    .strip-text h2 {
        font-size: 24px;
    }

    .strip-text span {
        font-size: 13px;
    }

}

/* ==================================
   GLOBAL DARK TECHNICAL THEME
   ================================== */

html,
body {
    margin: 0;
    background: #05070b;
    color: #f8fafc;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

main {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(34, 211, 238, 0.07),
            transparent 28%
        ),
        #05070b;
}


/* NAVBAR */

.navbar {
    background: rgba(5, 7, 11, 0.96);
    border-bottom: 1px solid #1f2937;
}

.brand-text h3 {
    color: #f8fafc;
}

.brand-text span {
    color: #94a3b8;
}

.logo {
    background: #0b1220;
    color: #ffffff;

    border-left: 4px solid #2563eb;
}

nav a {
    color: #cbd5e1;
}

nav a:hover {
    color: #38bdf8;
}

.nav-button {
    background: #2563eb;
    color: #ffffff;
}

.nav-button:hover {
    background: #1d4ed8;
}
.page-heading > p,
.solutions-heading > p,
.team-hero > p,
.group-title p,
.eyebrow {
    color: #38bdf8 !important;
}

.page-heading h1,
.solutions-heading h1,
.team-hero h1 {
    color: #f8fafc !important;
}

.page-heading span,
.solutions-heading span,
.team-hero span {
    color: #94a3b8 !important;
}
.solution-strip {
    border: 1px solid #1f2937;
    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.solution-strip:hover {
    transform: translateY(-4px);

    border-color: rgba(56, 189, 248, 0.65);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(37, 99, 235, 0.12);
}

.strip-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 11, 0.97) 0%,
            rgba(11, 18, 32, 0.88) 48%,
            rgba(5, 7, 11, 0.30) 100%
        );
}

.strip-text > p {
    color: #38bdf8;
}

.strip-number {
    color: #38bdf8;
}

.strip-arrow {
    border-color: rgba(56, 189, 248, 0.55);
}

.solution-strip:hover .strip-arrow {
    background: #2563eb;
    border-color: #38bdf8;
}
.team-showcase {
    background: #05070b;
}

.profile-card {
    background: #0b1220;

    border: 1px solid #1f2937;
    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30);
}

.profile-card:hover {
    border-color: rgba(56, 189, 248, 0.55);
}

.profile-overlay {
    background: rgba(5, 7, 11, 0.84);

    border: 1px solid rgba(56, 189, 248, 0.22);

    backdrop-filter: blur(12px);
}

.profile-overlay p {
    color: #38bdf8;
}

.profile-overlay h3 {
    color: #ffffff;
}

.profile-overlay span {
    color: #94a3b8;
}
.expertise-page {
    color: #f8fafc;
}

.expertise-grid {
    border: none;
    gap: 18px;
}

.expertise-box {
    background: #0b1220;

    border: 1px solid #1f2937;
    border-radius: 10px;

    min-height: 230px;

    transition: 0.25s ease;
}

.expertise-box:hover {
    background: #111827;

    border-color: rgba(56, 189, 248, 0.55);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.30);
}

.box-number {
    color: #38bdf8;
}

.expertise-box h2 {
    color: #f8fafc;
}

.expertise-box p {
    color: #94a3b8;
}
/* =====================================================
   FINAL VISUAL CLEANUP
   DARK TECH / LOGISTICS STYLE
   ===================================================== */


/* ---------- GLOBAL ---------- */

body {
    background: #05070b;
    color: #f8fafc;
}

main {
    background: #05070b;
}


/* =====================================================
   HOME PAGE
   ===================================================== */

.hero {
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(37, 99, 235, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #05070b 0%,
            #08101d 50%,
            #05070b 100%
        ) !important;

    color: #ffffff;
}

.hero h1 {
    color: #ffffff !important;
}

.hero h1 span {
    color: #38bdf8 !important;
}

.eyebrow {
    color: #38bdf8 !important;
}

.hero-description {
    color: #cbd5e1 !important;
}

.hero-card {
    background: rgba(11, 18, 32, 0.92) !important;

    border: 1px solid #1f2937;
    border-top: 4px solid #2563eb;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.35),
        0 0 25px rgba(37,99,235,0.08);
}

.hero-card h2 {
    color: #ffffff;
}

.card-small {
    color: #38bdf8 !important;
}

.metric span {
    color: #cbd5e1 !important;
}

.metric strong {
    color: #60a5fa !important;
}


/* =====================================================
   ABOUT PAGE
   ===================================================== */

.team-showcase {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 28%
        ),
        #05070b !important;
}

.team-hero h1,
.group-title h2,
.detail-heading h2 {
    color: #f8fafc !important;
}

.team-hero span {
    color: #b6c2d1 !important;
}

.group-title p,
.team-hero > p,
.detail-heading p {
    color: #38bdf8 !important;
}


/* ABUL DETAILS - MUCH LIGHTER */

.detail-content li {
    color: #cbd5e1 !important;

    border-bottom: 1px solid #253044 !important;

    font-size: 15px;
}

.detail-content li::before {
    background: #38bdf8 !important;
}

.profile-detail {
    border-top: 1px solid #253044 !important;
    border-bottom: 1px solid #253044 !important;
}


/* Board title */

.group-title h2 {
    color: #ffffff !important;
}


/* =====================================================
   SOLUTIONS PAGE - REMOVE PALE GRID LOOK
   ===================================================== */

.solutions-page {
    position: relative;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(37, 99, 235, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #05070b 0%,
            #08101d 45%,
            #05070b 100%
        ) !important;

    color: #ffffff;
}


/* REMOVE THE OLD GRID / LABELS */

.solutions-page::before,
.solutions-page::after {
    display: none !important;
}


/* SOLUTIONS HEADING */

.solutions-heading > p {
    color: #38bdf8 !important;
}

.solutions-heading h1 {
    color: #f8fafc !important;

    font-size: clamp(44px, 5vw, 68px) !important;

    max-width: 950px;
}

.solutions-heading span {
    color: #b6c2d1 !important;

    max-width: 850px;
}


/* LONG IMAGE RECTANGLES */

.solution-strip-list {
    gap: 20px;
}

.solution-strip {
    min-height: 240px;

    border: 1px solid #243044 !important;
    border-radius: 12px;

    background-color: #0b1220;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28);

    transition: 0.25s ease;
}

.solution-strip:hover {
    transform: translateY(-3px);

    border-color: rgba(56,189,248,0.6) !important;

    box-shadow:
        0 22px 50px rgba(0,0,0,0.40),
        0 0 20px rgba(37,99,235,0.10);
}


/* make image overlay darker and cleaner */

.strip-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5,7,11,0.97) 0%,
            rgba(8,16,29,0.90) 43%,
            rgba(8,16,29,0.52) 73%,
            rgba(5,7,11,0.30) 100%
        ) !important;
}


/* STRIP TEXT */

.strip-number {
    color: #38bdf8 !important;
}

.strip-text > p {
    color: #38bdf8 !important;
}

.strip-text h2 {
    color: #ffffff !important;
}

.strip-text span {
    color: #d1d9e6 !important;
}

.strip-arrow {
    color: #ffffff;

    border-color: rgba(56,189,248,0.5) !important;
}

.solution-strip:hover .strip-arrow {
    background: #2563eb;
    border-color: #38bdf8 !important;
}


/* =====================================================
   NAVBAR
   ===================================================== */

.navbar {
    background: #05070b !important;
    border-bottom: 1px solid #1f2937 !important;
}

.brand-text h3 {
    color: #ffffff !important;
}

.brand-text span {
    color: #9aa9bd !important;
}

nav a {
    color: #d5dce7 !important;
}

nav a:hover {
    color: #38bdf8 !important;
}

.logo {
    background: #0b1220 !important;
    color: #ffffff !important;
    border-left: 4px solid #2563eb !important;
}

.nav-button {
    background: #2563eb !important;
    color: #ffffff !important;
}
/* =========================================
   BRING BACK IMAGE + GRADIENT ON SOLUTIONS
   ========================================= */

.solution-strip {
    position: relative;
    overflow: hidden;

    min-height: 300px;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 14px;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* THE IMPORTANT PART */

.strip-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(3, 7, 15, 0.98) 0%,
        rgba(5, 12, 24, 0.94) 25%,
        rgba(8, 18, 35, 0.82) 48%,
        rgba(15, 28, 48, 0.50) 70%,
        rgba(37, 99, 235, 0.12) 100%
    ) !important;
}


/* keep all text ABOVE gradient */

.strip-number,
.strip-text,
.strip-arrow {
    position: relative;
    z-index: 2;
}


/* subtle blue light on right */

.strip-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(5, 9, 15, 0.98) 0%,
        rgba(12, 17, 25, 0.94) 30%,
        rgba(34, 40, 50, 0.82) 60%,
        rgba(105, 112, 123, 0.68) 100%
    ) !important;
}

/* =====================================
   SOLUTIONS - 4 PANEL DESIGN
===================================== */

.solution-wheel {
    position: relative;

    width: min(1200px, 92%);
    margin: 60px auto 100px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    min-height: 650px;
}


/* CARDS */

.wheel-card {
    position: relative;

    min-height: 310px;
    padding: 48px 210px 45px 50px;

    background: rgba(14, 24, 40, 0.88);
    border: 1px solid rgba(96, 165, 250, 0.15);

    color: white;
}

.card-02,
.card-04 {
    padding:
        48px 50px
        45px 210px;
}


.wheel-number {
    display: block;

    margin-bottom: 18px;

    color: #38bdf8;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}


.wheel-card h2 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 31px;
    line-height: 1.05;
}


.wheel-card p {
    max-width: 310px;

    margin: 0 0 25px;

    color: #aeb9c8;

    font-size: 14px;
    line-height: 1.65;
}


.wheel-card a {
    color: #38bdf8;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;
}


/* =====================================
   CENTER CIRCLE
===================================== */

.solution-circle {
    position: absolute;

    width: 390px;
    height: 390px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    border: 5px solid #07101d;

    box-shadow:
        0 0 0 1px rgba(56, 189, 248, 0.35),
        0 20px 60px rgba(0, 0, 0, 0.55);

    z-index: 5;
}


.circle-img {
    background-size: cover;
    background-position: center;

    position: relative;
}


.circle-img::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(4, 10, 20, 0.25);
}


/* YOUR FOUR PHOTOS */

.circle-1 {
    background-image:
        url("warehouse-layout.jpg");
}

.circle-2 {
    background-image:
        url("inventory.jpg");
}

.circle-3 {
    background-image:
        url("warehouse-cost.jpg");
}

.circle-4 {
    background-image:
        url("process-control.png");
}


/* DIVIDING LINES */

.circle-1,
.circle-3 {
    border-right:
        3px solid #07101d;
}

.circle-1,
.circle-2 {
    border-bottom:
        3px solid #07101d;
}


/* SMALL AAO CENTER */

.circle-center {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: #07101d;
    border: 1px solid #38bdf8;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10;
}


.circle-center span {
    color: white;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 2px;
}
body {
    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 14, 0.90),
            rgba(7, 16, 29, 0.72)
        ),
        url("expertise-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
/* =========================
   EXPERTISE FULL BACKGROUND FIX
   ========================= */

.expertise-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding: 80px 6% 110px !important;

    background: transparent !important;
}
/* =========================================
   EXPERTISE - MATCH REFERENCE MORE CLOSELY
   ========================================= */

.expertise-page {
    width: 100% !important;
    max-width: none !important;
    padding: 26px 4% 60px !important;

    background:
        linear-gradient(
            rgba(3, 8, 15, 0.80),
            rgba(3, 8, 15, 0.88)
        ),
        url("expertise-bg.jpg") center / cover fixed no-repeat !important;
}


/* heading tighter like reference */

.page-heading {
    max-width: 720px !important;
    margin: 0 0 24px !important;
}

.page-heading > p {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 8px !important;
}

.page-heading h1 {
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
}

.page-heading span {
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}


/* grid */

.expertise-grid {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    gap: 16px !important;

    border: none !important;
}


/* cards */

.expertise-box {
    position: relative;

    min-height: 245px !important;

    padding: 26px 26px 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(12, 27, 47, 0.82),
            rgba(6, 17, 32, 0.82)
        ) !important;

    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    border-radius: 10px !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 14px 30px rgba(0,0,0,0.28);

    transition: 0.25s ease;
}


/* thin cyan top glow */

.expertise-box::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #2563eb,
            transparent 80%
        );
}


/* number */

.box-number {
    margin-bottom: 24px !important;

    color: #38bdf8 !important;

    font-size: 13px !important;
    font-weight: 800;
}


/* card heading */

.expertise-box h2 {
    margin: 0 0 10px !important;

    color: #ffffff !important;

    font-size: 19px !important;
    line-height: 1.05 !important;
}


/* card description */

.expertise-box p {
    max-width: 260px;

    color: #aebfd3 !important;

    font-size: 12px !important;
    line-height: 1.55 !important;
}


/* hover */

.expertise-box:hover {
    transform: translateY(-4px);

    border-color: rgba(56, 189, 248, 0.65) !important;

    background:
        linear-gradient(
            145deg,
            rgba(15, 35, 60, 0.88),
            rgba(7, 20, 38, 0.88)
        ) !important;
}


/* icon position */

.expertise-icon {
    position: absolute;

    top: 24px;
    right: 24px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(56, 189, 248, 0.50);
    border-radius: 8px;

    color: #60a5fa;

    font-size: 16px;
}
/* =====================================
   EXPERTISE - MATCH REFERENCE
===================================== */

.expertise-page {
    padding: 30px 6% 55px;
}

.page-heading {
    max-width: 700px;
    margin-bottom: 28px;
}

.page-heading p {
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.page-heading h1 {
    font-size: 46px;
    line-height: 1.05;
    margin: 0 0 12px;
}

.page-heading span {
    font-size: 16px;
    line-height: 1.5;
}


/* THE IMPORTANT PART */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    max-width: 1250px;
    margin: 0 auto;
}


/* CARDS */
.expertise-box {
    position: relative;

    min-height: 265px;
    padding: 28px 30px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 35, 58, 0.96),
            rgba(5, 18, 34, 0.96)
        );

    border: 1px solid rgba(76, 160, 230, 0.45);
    border-radius: 7px;

    box-shadow:
        inset 0 1px 0 rgba(70, 190, 255, 0.18),
        0 12px 30px rgba(0,0,0,.25);
}


/* BLUE TOP EDGE */
.expertise-box::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #38bdf8,
        #2563eb,
        transparent
    );

    border-radius: 7px 7px 0 0;
}


/* NUMBER */
.box-number {
    color: #38bdf8;

    font-size: 18px;
    font-weight: 800;

    margin-bottom: 35px;
}


/* TITLE */
.expertise-box h2 {
    color: #ffffff;

    font-size: 25px;
    line-height: 1.08;

    max-width: 250px;

    margin: 0 0 14px;
}


/* DESCRIPTION */
.expertise-box p {
    color: #9fb3ca;

    font-size: 15px;
    line-height: 1.55;

    max-width: 290px;

    margin: 0;
}


/* ICON */
.card-icon {
    position: absolute;

    top: 26px;
    right: 27px;

    width: 32px;
    height: 32px;

    color: #60a5fa;

    stroke-width: 1.6;
}
/* EXPERTISE FONT - REFERENCE STYLE */

.expertise-page {
    font-family: "Inter", sans-serif;
}

.page-heading p {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.page-heading h1 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -1.5px;
}

.page-heading span {
    font-family: "Inter", sans-serif;
    font-weight: 400;
}

.box-number {
    font-family: "Inter", sans-serif;
    font-weight: 700;
}

.expertise-box h2 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.expertise-box p {
    font-family: "Inter", sans-serif;
    font-weight: 400;
}
/* FONT FIX FOR EXPERTISE PAGE */

.expertise-page,
.expertise-page * {
    font-family: Arial, Helvetica, sans-serif;
}

.expertise-box h2 {
    font-size: 22px;
    font-weight: 600;
}

.expertise-box p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

.box-number {
    font-size: 17px;
    font-weight: 700;
}

.page-heading h1 {
    font-size: 46px;
    font-weight: 600;
}
/* =========================================
   EXPERTISE — MATCH REFERENCE IMAGE
========================================= */

.expertise-page {
    padding: 35px 7% 55px;
}

/* HEADER */
.page-heading {
    margin-bottom: 25px;
}

.page-heading p {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.page-heading h1 {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 0 0 12px;
}

.page-heading span {
    font-size: 15px;
    line-height: 1.5;
}


/* GRID */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    max-width: 1180px;
    margin: 0 auto;
}


/* CARDS */
.expertise-box {
    position: relative;

    min-height: 220px;
    padding: 25px 25px 24px;

    background: linear-gradient(
        145deg,
        rgba(13, 32, 53, 0.97),
        rgba(5, 18, 34, 0.97)
    );

    border: 1px solid rgba(82, 155, 215, 0.45);
    border-radius: 6px;

    box-shadow:
        inset 0 1px 0 rgba(96, 165, 250, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.25);
}


/* THIN BLUE TOP LINE */
.expertise-box::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        #38bdf8,
        #2563eb,
        transparent 80%
    );
}


/* 01 / 02 / 03 */
.box-number {
    font-size: 17px;
    font-weight: 700;
    color: #38bdf8;

    margin-bottom: 25px;
}


/* CARD TITLE */
.expertise-box h2 {
    font-size: 22px;
    line-height: 1.08;
    font-weight: 600;

    max-width: 230px;

    margin: 0 0 12px;
}


/* DESCRIPTION */
.expertise-box p {
    font-size: 14px;
    line-height: 1.55;

    max-width: 270px;

    margin: 0;

    color: #9fb2c8;
}


/* ICONS */
.card-icon {
    position: absolute;

    top: 23px;
    right: 24px;

    width: 31px;
    height: 31px;

    color: #60a5fa;
    stroke-width: 1.6;
}
/* ==================================
   EXPERTISE CARD ICONS
   ================================== */

.expertise-box {
    position: relative;
}

.card-icon {
    position: absolute;

    top: 28px;
    right: 28px;

    width: 34px;
    height: 34px;

    color: #60a5fa;

    stroke-width: 1.7;

    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.25));
}


/* Card number */
.expertise-box .box-number {
    color: #38bdf8;
    font-size: 18px;
    font-weight: 700;
}


/* Card title */
.expertise-box h2 {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.5px;
}


/* Card description */
.expertise-box p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #a9b8ca;
}
/* =========================================
   EXPERTISE CARD FINAL TWEAKS
   ========================================= */


/* REMOVE BLUE LINE ABOVE EACH CARD */

.expertise-box::before {
    display: none !important;
}


/* STRONGER GLASS / BLUR EFFECT */

.expertise-box {
    background: rgba(7, 18, 32, 0.68) !important;

    backdrop-filter: blur(18px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;

    border: 1px solid rgba(120, 160, 200, 0.30) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 15px 35px rgba(0,0,0,0.30) !important;
}


/* BIGGER 01 02 03 ETC */

.box-number {
    font-size: 22px !important;
    font-weight: 700 !important;

    color: #38bdf8 !important;

    margin-bottom: 30px !important;
}


/* ICONS TOP-RIGHT CORNER */

.card-icon {
    position: absolute !important;

    top: 22px !important;
    right: 22px !important;

    width: 36px !important;
    height: 36px !important;

    color: #60a5fa !important;

    stroke-width: 1.6 !important;
}


/* JUST MAKE SURE CARDS CAN POSITION ICONS */

.expertise-box {
    position: relative !important;
}
/* SMALLER EXPERTISE CARDS */

.expertise-grid {
    max-width: 1180px;
    margin: 0 auto;

    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.expertise-box {
    min-height: 250px !important;
    padding: 26px 28px !important;
}
.expertise-grid {
    max-width: 1100px;
    margin: 0 auto;
    gap: 16px;
}

.expertise-box {
    min-height: 230px !important;
    padding: 24px 26px !important;
}
.expertise-grid {
    max-width: 950px;
    margin: 0 auto;
    gap: 12px;
}

.expertise-box {
    min-height: 175px !important;
    padding: 18px 20px !important;
}
/* FINAL EXPERTISE CARD STYLE */

.expertise-box {
    position: relative !important;

    /* GLASS / BLUR EFFECT */
    background: rgba(5, 18, 34, 0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    /* CARD */
    min-height: 175px !important;
    padding: 18px 20px !important;

    border: 1px solid rgba(90, 150, 205, 0.30) !important;
    border-radius: 7px !important;

    /* REMOVE BLUE TOP LINE */
    border-top: 1px solid rgba(90, 150, 205, 0.30) !important;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.20) !important;
}
/* SMALLER SOLUTIONS HEADING */
.solutions-page .page-heading h1 {
    font-size: 52px !important;
    line-height: 1.05 !important;
    max-width: 950px !important;
}/* FORCE SOLUTIONS TITLE SMALLER */
.solutions-page h1 {
    font-size: 46px !important;
    line-height: 1.08 !important;
}
/* TIGHTEN SOLUTIONS SECTION */

.solutions-page .page-heading {
    margin-bottom: 28px !important;
}

.solutions-page .page-heading p {
    margin-bottom: 12px !important;
}

.solutions-page .page-heading h1 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.solutions-page .page-heading span {
    display: block;
    margin-bottom: 0 !important;
}

.solutions-grid {
    margin-top: 25px !important;
}
.solutions-page {
    padding-top: 35px !important;
}
/* ===== HOME HERO FIX ===== */

/* REMOVE BLUE LINE ABOVE WAREHOUSE PERFORMANCE BOX */
.performance-card,
.performance-box,
.hero-card {
    border-top: none !important;
}

.performance-card::before,
.performance-box::before,
.hero-card::before {
    display: none !important;
    content: none !important;
}


/* GIVE LEFT SIDE MORE SPACE */
.hero-content {
    padding-left: 80px !important;
}


/* LEFT TEXT WIDTH */
.hero-text {
    max-width: 700px !important;
    width: 100% !important;
}


/* MAKE DESCRIPTION USE MORE WIDTH */
.hero-text p {
    max-width: 680px !important;
}


/* SPACE BETWEEN LEFT AND RIGHT */
.hero-grid {
    grid-template-columns: 1.35fr 0.85fr !important;
    gap: 70px !important;
}
.hero-text h1 .blue-text {
    display: block;
    margin-top: -18px !important;
}
/* =========================================================
   FINAL APPROACH DESIGN — 5 STEP PROCESS
   ========================================================= */


/* PROCESS CONTAINER */

.process-flow {
    position: relative !important;

    width: 100% !important;
    max-width: 1350px !important;
    height: 560px !important;

    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;

    gap: 22px !important;

    align-items: center !important;
}


/* =========================================================
   SMALLER CARDS
   ========================================================= */

.process-card {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 340px !important;
    min-height: 340px !important;

    padding: 28px 24px 55px !important;

    border-radius: 24px !important;

    border: 1px solid rgba(96, 165, 250, 0.30) !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 27, 46, 0.72),
            rgba(5, 17, 31, 0.78)
        ) !important;

    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

    z-index: 5 !important;
}


/* =========================================================
   ALTERNATING POSITION
   ========================================================= */

.process-card.step-up {
    transform: translateY(-75px) !important;
}

.process-card.step-down {
    transform: translateY(75px) !important;
}


/* =========================================================
   NUMBER + ICON
   ========================================================= */

.process-top {
    display: flex !important;

    justify-content: space-between !important;
    align-items: flex-start !important;

    margin-bottom: 42px !important;
}


.process-number {
    font-size: 26px !important;
    font-weight: 700 !important;

    color: #38bdf8 !important;
}


.process-icon {
    width: 35px !important;
    height: 35px !important;

    color: #60a5fa !important;

    stroke-width: 1.6 !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.process-card h2 {
    margin: 0 0 15px !important;

    color: white !important;

    font-size: 22px !important;
    font-weight: 600 !important;

    line-height: 1.1 !important;
}


.process-card p {
    margin: 0 !important;

    color: #aebfd1 !important;

    font-size: 13px !important;

    line-height: 1.6 !important;
}


/* WE DON'T NEED "STEP 01" AT BOTTOM */

.process-step-label {
    display: none !important;
}


/* =========================================================
   MAIN PIPE
   ========================================================= */

.flow-line {
    display: block !important;

    position: absolute !important;

    left: 2% !important;
    right: 2% !important;

    top: 50% !important;

    height: 18px !important;

    transform: translateY(-50%) !important;

    border-radius: 50px !important;

    background: rgba(71, 85, 105, 0.72) !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;

    z-index: 2 !important;
}


/* =========================================================
   BLUE CONNECTION DOT
   ========================================================= */

.flow-dot {
    display: block !important;

    position: absolute !important;

    left: 50% !important;

    width: 16px !important;
    height: 16px !important;

    transform: translateX(-50%) !important;

    border-radius: 50% !important;

    background: #38bdf8 !important;

    border: 3px solid #07101d !important;

    box-shadow:
        0 0 0 3px rgba(56,189,248,0.15),
        0 0 15px rgba(56,189,248,0.50) !important;

    z-index: 10 !important;
}


/* TOP CARD DOTS */

.process-card.step-up .flow-dot {
    bottom: -84px !important;
}


/* BOTTOM CARD DOTS */

.process-card.step-down .flow-dot {
    top: -84px !important;
}


/* =========================================================
   VERY SUBTLE HOVER
   ========================================================= */

.process-card.step-up:hover {
    transform: translateY(-80px) !important;

    border-color: rgba(56,189,248,0.55) !important;
}


.process-card.step-down:hover {
    transform: translateY(70px) !important;

    border-color: rgba(56,189,248,0.55) !important;
}
/* =========================================
   APPROACH PAGE - FINAL 5 CARD LAYOUT
   ========================================= */

.process-flow {
    max-width: 1400px !important;
    width: 92% !important;
    margin: 70px auto 100px !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 18px !important;

    align-items: center !important;
}


/* CARD SIZE */

.process-card {
    width: 100% !important;
    height: 330px !important;
    min-height: 0 !important;

    padding: 28px 24px !important;

    box-sizing: border-box !important;

    position: relative !important;

    background: rgba(6, 20, 36, 0.76) !important;

    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    border: 1px solid rgba(83, 150, 220, 0.35) !important;
    border-radius: 24px !important;

    box-shadow: 0 18px 35px rgba(0,0,0,.25) !important;
}


/* ZIG ZAG */

.process-card:nth-child(odd) {
    transform: translateY(-45px) !important;
}

.process-card:nth-child(even) {
    transform: translateY(45px) !important;
}


/* TOP NUMBER + ICON */

.process-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 55px !important;
}


/* NUMBER */

.process-number {
    font-size: 25px !important;
    font-weight: 700 !important;
    color: #38bdf8 !important;
}


/* ICON */

.process-icon {
    width: 34px !important;
    height: 34px !important;
    color: #60a5fa !important;
    stroke-width: 1.7 !important;
}


/* TITLE */

.process-card h2 {
    font-size: 21px !important;
    line-height: 1.15 !important;

    margin: 0 0 14px !important;

    color: #ffffff !important;
    font-weight: 650 !important;
}


/* DESCRIPTION */

.process-card p {
    font-size: 13px !important;
    line-height: 1.6 !important;

    color: #aebed0 !important;

    margin: 0 !important;
}


/* REMOVE OLD STEP TEXT */

.process-step-label {
    display: none !important;
}


/* REMOVE ANY OLD HUGE CARD RULE */

.approach-grid {
    display: contents !important;
}
/* NAVBAR - FIT ENGAGEMENT */

.nav-wrap nav {
    display: flex;
    align-items: center;
    gap: 24px !important;
}

.nav-wrap nav a {
    font-size: 14px !important;
    white-space: nowrap;
}

.nav-button {
    padding: 16px 24px !important;
}
/* ===== APPROACH TOP HEADING ===== */

.approach-heading {
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto 55px !important;
    padding-top: 55px !important;
}

.approach-label {
    display: block !important;
    color: #38bdf8 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    margin-bottom: 16px !important;
}

.approach-heading h1 {
    color: #f8fafc !important;
    font-size: clamp(38px, 4vw, 58px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -1.5px !important;
    margin: 0 0 20px !important;
}

.approach-heading p {
    color: #9fb0c5 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 650px !important;
    margin: 0 auto !important;
}
/* ===== REMOVE EXTRA SPACE AROUND APPROACH HEADING ===== */

.approach-heading {
    padding-top: 22px !important;
    margin-bottom: 18px !important;
}

.approach-heading h1 {
    margin-bottom: 12px !important;
}

.approach-heading p {
    margin-bottom: 0 !important;
}

/* pull process/cards closer to heading */
.process-flow,
.process-container,
.process-wrapper {
    margin-top: 15px !important;
    padding-top: 15px !important;
}/* MOVE BLUE DOTS FURTHER FROM CARDS */

/* 01, 03, 05 — dots BELOW cards */
.process-card.step-up .flow-dot {
    bottom: -32px !important;
    top: auto !important;
}

/* 02, 04 — dots ABOVE cards */
.process-card.step-down .flow-dot {
    top: -32px !important;
    bottom: auto !important;
}
/* STOP APPROACH CARDS FROM MOVING */

.process-card,
.process-card:hover,
.process-card:active,
.process-card:focus {
    transition: none !important;
}

/* KEEP THE ZIG-ZAG POSITION FIXED */

.process-card.step-up,
.process-card.step-up:hover,
.process-card.step-up:active,
.process-card.step-up:focus {
    transform: translateY(-45px) !important;
}

.process-card.step-down,
.process-card.step-down:hover,
.process-card.step-down:active,
.process-card.step-down:focus {
    transform: translateY(45px) !important;
}
/* =========================================
   GLOBAL NAVBAR - SAME SIZE ON EVERY PAGE
   ========================================= */

.navbar {
    width: 100% !important;
    background: #03070d !important;
    border-bottom: 1px solid rgba(120, 150, 180, 0.18) !important;
}

.nav-wrap {
    width: 100% !important;
    max-width: 1320px !important;

    margin: 0 auto !important;

    padding: 12px 24px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 26px !important;

    box-sizing: border-box !important;
}


/* BRAND AREA */

.brand {
    display: flex !important;
    align-items: center !important;

    gap: 14px !important;

    flex: 0 0 320px !important;
}


.logo {
    width: 48px !important;
    height: 58px !important;

    flex-shrink: 0 !important;
}


.brand-text {
    width: 245px !important;
}


.brand-text h3 {
    margin: 0 0 3px !important;

    font-size: 18px !important;
    line-height: 1.05 !important;

    white-space: nowrap !important;
}


.brand-text span {
    display: block !important;

    font-size: 10px !important;
    line-height: 1.2 !important;

    letter-spacing: 1.2px !important;

    white-space: nowrap !important;
}


/* NAV LINKS */

.nav-wrap nav {
    flex: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 24px !important;

    min-width: 0 !important;
}


.nav-wrap nav a {
    font-size: 14px !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* REQUEST AUDIT */

.nav-button {
    flex: 0 0 auto !important;

    padding: 15px 22px !important;

    font-size: 14px !important;
    line-height: 1.1 !important;

    min-width: 118px !important;

    text-align: center !important;
}
/* ===== FIX NAVBAR FIT ===== */

header nav {
    display: flex !important;
    align-items: center !important;
    gap: 34px !important;
    white-space: nowrap !important;
}

header nav a {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
}

header .nav-button {
    margin-left: 28px !important;
    flex-shrink: 0 !important;
}

/* stop company name from stealing navbar space */
header .brand {
    flex-shrink: 0 !important;
}
/* =========================================
   APPROACH PAGE — MATCH EXPERTISE FONT SCALE
   ========================================= */

/* HOW WE WORK */
.approach-heading .eyebrow,
.approach-heading .section-label {
    font-size: 13px !important;
    letter-spacing: 3px !important;
}

/* Main heading */
.approach-heading h1,
.approach-heading h2 {
    font-size: 42px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
}

/* Subtitle */
.approach-heading p {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* 01 / 02 / 03 / etc */
.process-card .number,
.process-card .step-number {
    font-size: 24px !important;
}

/* Diagnose / Redesign / Implement etc */
.process-card h2,
.process-card h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* Card descriptions */
.process-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
}
/* ============================================================
   FINAL MASTER SIZE FIX
   KEEP THIS AT THE ABSOLUTE BOTTOM OF STYLE.CSS
   ============================================================ */


/* ============================================================
   1. SAME NAVBAR ON EVERY PAGE
   ============================================================ */

.navbar {
    width: 100% !important;
    height: 92px !important;

    background: #03070d !important;
    border-bottom: 1px solid rgba(120,150,180,0.18) !important;

    display: flex !important;
    align-items: center !important;
}


.nav-wrap {
    width: 92% !important;
    max-width: 1360px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 24px !important;
}


/* COMPANY / LOGO */

.brand {
    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    flex: 0 0 310px !important;
}


.logo {
    width: 48px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
}


.brand-text {
    width: auto !important;
}


.brand-text h3 {
    margin: 0 0 4px !important;

    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
}


.brand-text span {
    display: block !important;

    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.2 !important;

    letter-spacing: 1.25px !important;

    white-space: nowrap !important;
}


/* NAV LINKS */

.nav-wrap nav,
header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 1 !important;

    gap: 24px !important;

    white-space: nowrap !important;
}


.nav-wrap nav a,
header nav a {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 14px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* REQUEST AUDIT */

.nav-button,
header .nav-button {
    margin-left: 0 !important;

    padding: 14px 22px !important;

    min-width: 120px !important;

    font-size: 14px !important;
    line-height: 1.1 !important;

    text-align: center !important;

    flex-shrink: 0 !important;
}



/* ============================================================
   2. EXPERTISE SCALE = MASTER PAGE HEADING SCALE
   ============================================================ */

/* BLUE SMALL LABELS */

.eyebrow,
.team-hero > p,
.approach-label,
.page-heading > p,
.solutions-heading > p {
    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 2px !important;

    color: #38bdf8 !important;
}



/* ============================================================
   3. INDEX / HOME
   ============================================================ */

.hero h1 {
    font-size: 46px !important;
    line-height: 1.03 !important;

    font-weight: 600 !important;

    letter-spacing: -1.3px !important;
}


.hero-description {
    font-size: 15px !important;
    line-height: 1.55 !important;
}



/* ============================================================
   4. ABOUT US
   MATCH EXPERTISE HEADING
   ============================================================ */

.team-hero {
    max-width: 900px !important;

    padding: 55px 30px 45px !important;
}


.team-hero > p {
    margin-bottom: 10px !important;
}


.team-hero h1 {
    font-size: 44px !important;
    line-height: 1.05 !important;

    font-weight: 600 !important;

    letter-spacing: -1px !important;

    margin: 0 !important;
}


.team-hero span {
    max-width: 760px !important;

    margin: 15px auto 0 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
}



/* ============================================================
   5. EXPERTISE
   KEEP ITS CURRENT GOOD SIZE
   ============================================================ */

.page-heading > p {
    margin-bottom: 10px !important;
}


.page-heading h1 {
    font-size: 44px !important;
    line-height: 1.05 !important;

    font-weight: 600 !important;

    letter-spacing: -1px !important;
}


.page-heading span {
    margin-top: 12px !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
}



/* ============================================================
   6. SOLUTIONS
   SAME GENERAL SCALE
   ============================================================ */

.solutions-heading > p {
    margin-bottom: 10px !important;
}


.solutions-heading h1,
.solutions-page h1 {
    font-size: 44px !important;
    line-height: 1.06 !important;

    font-weight: 600 !important;

    letter-spacing: -1px !important;
}


.solutions-heading span {
    margin-top: 14px !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
}



/* ============================================================
   7. APPROACH
   MATCH EXPERTISE
   ============================================================ */

.approach-heading {
    max-width: 900px !important;

    margin: 0 auto 25px !important;

    padding-top: 35px !important;

    text-align: center !important;
}


.approach-label {
    margin-bottom: 10px !important;
}


.approach-heading h1 {
    margin: 0 0 14px !important;

    font-size: 44px !important;
    line-height: 1.05 !important;

    font-weight: 600 !important;

    letter-spacing: -1px !important;

    color: #f8fafc !important;
}


.approach-heading p {
    max-width: 720px !important;

    margin: 0 auto !important;

    font-size: 15px !important;
    line-height: 1.5 !important;

    color: #9fb0c5 !important;
}



/* ============================================================
   8. APPROACH CARD TYPOGRAPHY
   SAME FEEL AS EXPERTISE CARDS
   ============================================================ */

.process-number {
    font-size: 22px !important;
}


.process-card h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;

    font-weight: 600 !important;
}


.process-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
}
/* =========================================
   NAVBAR FIX - RESTORE CLEAN EXPERTISE STYLE
   ========================================= */

.navbar {
    height: 82px !important;
    background: #03070d !important;
    border-bottom: 1px solid #1f2937 !important;

    display: flex !important;
    align-items: center !important;
}

.nav-wrap {
    width: 88% !important;
    max-width: 1200px !important;
    margin: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;
}

/* BRAND */

.brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    flex-shrink: 0 !important;
}

.logo {
    width: 42px !important;
    height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-shrink: 0 !important;
}

.brand-text h3 {
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin: 0 !important;

    white-space: nowrap !important;
}

.brand-text span {
    display: block !important;

    margin-top: 3px !important;

    font-size: 9px !important;
    letter-spacing: 1px !important;

    white-space: nowrap !important;
}

/* NAV */

.nav-wrap nav {
    display: flex !important;
    align-items: center !important;

    gap: 24px !important;

    margin-left: auto !important;

    flex: 0 1 auto !important;
}

.nav-wrap nav a {
    font-size: 13px !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
}

/* BUTTON */

.nav-button {
    margin-left: 8px !important;

    padding: 12px 18px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;
}
/* =========================================
   NAVBAR ACTUAL FINAL FIX
   ========================================= */

.navbar {
    height: 82px !important;
}

.nav-wrap {
    width: 92% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;

    gap: 18px !important;
}

/* COMPANY */

.brand {
    flex: 0 0 auto !important;
    gap: 12px !important;
}

.logo {
    width: 42px !important;
    height: 42px !important;
}

.brand-text h3 {
    font-size: 16px !important;
}

.brand-text span {
    font-size: 9px !important;
    letter-spacing: 1px !important;
}

/* LINKS */

.nav-wrap nav {
    flex: 1 1 auto !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    gap: 24px !important;

    margin: 0 !important;
}

.nav-wrap nav a {
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* BUTTON */

.nav-button {
    flex: 0 0 auto !important;

    min-width: 0 !important;

    margin-left: 8px !important;

    padding: 12px 18px !important;

    font-size: 13px !important;

    white-space: nowrap !important;
}
/* =========================================
   NAVBAR — CLEAN FINAL VERSION
   ========================================= */

.navbar {
    height: 82px !important;
    width: 100% !important;

    background: #03070d !important;
    border-bottom: 1px solid #1f2937 !important;

    display: flex !important;
    align-items: center !important;
}


/* WHOLE NAVBAR WIDTH */

.nav-wrap {
    width: 96% !important;
    max-width: 1400px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    gap: 20px !important;
}


/* =========================================
   COMPANY
   ========================================= */

.brand {
    display: flex !important;
    align-items: center !important;

    gap: 12px !important;

    flex: 0 0 auto !important;

    margin: 0 !important;
}


.logo {
    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;
}


.brand-text {
    width: 300px !important;
    min-width: 300px !important;

    flex: 0 0 300px !important;
}


.brand-text h3 {
    margin: 0 !important;

    font-size: 16px !important;
    line-height: 1.1 !important;

    white-space: nowrap !important;
}


.brand-text span {
    display: block !important;

    margin-top: 3px !important;

    font-size: 9px !important;
    line-height: 1.1 !important;

    letter-spacing: 1px !important;

    white-space: nowrap !important;
}


/* =========================================
   LINKS
   ========================================= */

.nav-wrap nav,
header nav {
    display: flex !important;
    align-items: center !important;

    gap: 20px !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    flex: 0 0 auto !important;
}


.nav-wrap nav a,
header nav a {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* =========================================
   REQUEST AUDIT
   ========================================= */

.nav-button,
header .nav-button {
    margin: 0 0 0 8px !important;

    min-width: 0 !important;
    width: auto !important;

    padding: 12px 18px !important;

    font-size: 13px !important;

    white-space: nowrap !important;

    flex: 0 0 auto !important;
}
/* ===== SOLUTIONS FULL SCREEN BACKGROUND ===== */

.solutions-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    padding: 35px 6% 30px !important;

    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 14, 0.88),
            rgba(7, 16, 29, 0.72)
        ),
        url("expertise-bg.jpg") center / cover no-repeat !important;

    background-attachment: fixed !important;
}
/* APPROACH — ONLY shorten outer gaps */

.approach-page {
    padding-top: 35px !important;
}

.approach-heading {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.approach-process {
    margin-top: -100px !important;
}
/* MOVE ONLY THE PROCESS CARDS UP */

.approach-grid {
    transform: translateY(-120px) !important;
}
/* MOVE THE 5 APPROACH CARDS CLOSER TO THE SUBTITLE */

.process-flow {
    margin-top: -50px !important;
}
/* =========================================
   SOLUTIONS WHEEL - FIT PROPERLY
   ========================================= */

.solution-wheel {
    width: min(1180px, 92%) !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 45px auto 30px !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;

    overflow: visible !important;
}


/* CARDS */

.wheel-card {
    min-height: 260px !important;
    height: auto !important;

    padding-top: 34px !important;
    padding-bottom: 34px !important;

    box-sizing: border-box !important;
}


/* LEFT CARDS */

.card-01,
.card-03 {
    padding-left: 40px !important;
    padding-right: 175px !important;
}


/* RIGHT CARDS */

.card-02,
.card-04 {
    padding-left: 175px !important;
    padding-right: 40px !important;
}


/* CENTER CIRCLE */

.solution-circle {
    width: 330px !important;
    height: 330px !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;
}


/* CENTER AAO */

.circle-center {
    width: 62px !important;
    height: 62px !important;
}


/* TEXT */

.wheel-card h2 {
    font-size: 27px !important;
    line-height: 1.05 !important;
}

.wheel-card p {
    font-size: 13px !important;
    line-height: 1.55 !important;

    margin-bottom: 20px !important;
}
/* =========================================
   GLOBAL WIDTH FIX
   ========================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.navbar {
    width: 100%;
    max-width: 100%;
}

.nav-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* Never allow page sections to exceed screen */
main,
section {
    max-width: 100%;
}
/* APPROACH - remove image strip / extra bottom area */

.approach-page {
    min-height: auto !important;
    padding-bottom: 25px !important;
    background: #05070b !important;
}

.process-flow {
    margin-bottom: 20px !important;
}
/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-page {
    min-height: calc(100vh - 82px);
    width: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(3, 8, 15, 0.90),
            rgba(5, 14, 27, 0.78)
        ),
        url("expertise-bg.jpg") center / cover no-repeat;

    background-attachment: fixed;

    color: #ffffff;

    font-family: "Inter", Arial, sans-serif;
}


/* WHOLE SECTION */

.contact-section {
    width: 100%;

    padding: 55px 6% 70px;
}


.contact-wrap {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;

    gap: 70px;

    align-items: start;
}


/* =====================================================
   LEFT SIDE
   ===================================================== */

.contact-info {
    padding-top: 15px;
}


.contact-label,
.form-label {
    margin: 0 0 12px;

    color: #38bdf8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
}


.contact-info h1 {
    max-width: 520px;

    margin: 0;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.04;

    font-weight: 600;

    letter-spacing: -1.2px;
}


.contact-intro {
    max-width: 520px;

    margin: 20px 0 0;

    color: #aebed0;

    font-size: 15px;
    line-height: 1.65;
}


/* CONTACT DETAILS */

.contact-details {
    margin-top: 42px;

    border-top: 1px solid rgba(120, 160, 200, 0.20);
}


.contact-detail {
    padding: 22px 0;

    border-bottom: 1px solid rgba(120, 160, 200, 0.18);
}


.contact-detail span {
    display: block;

    margin-bottom: 7px;

    color: #38bdf8;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.contact-detail h3 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 600;
}


.contact-detail p {
    max-width: 430px;

    margin: 7px 0 0;

    color: #93a4b8;

    font-size: 13px;
    line-height: 1.5;
}


/* =====================================================
   RIGHT SIDE - FORM GLASS BOX
   ===================================================== */

.contact-form-box {
    padding: 34px 36px 38px;

    background: rgba(6, 18, 33, 0.70);

    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);

    border: 1px solid rgba(96, 165, 250, 0.24);

    border-radius: 12px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 18px 45px rgba(0, 0, 0, 0.30);
}


.contact-form-box h2 {
    margin: 0 0 28px;

    color: #ffffff;

    font-size: 30px;
    line-height: 1.1;

    font-weight: 600;

    letter-spacing: -0.6px;
}


/* =====================================================
   FORM
   ===================================================== */

.contact-form-box form {
    width: 100%;
}


.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 16px;
}


.form-group {
    display: flex;
    flex-direction: column;

    margin-bottom: 18px;
}


.form-group label {
    margin-bottom: 8px;

    color: #cbd5e1;

    font-size: 12px;
    font-weight: 600;
}


/* INPUTS */

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid rgba(120, 160, 200, 0.26);
    border-radius: 6px;

    outline: none;

    background: rgba(3, 10, 19, 0.66);

    color: #ffffff;

    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #64748b;
}


.form-group select {
    cursor: pointer;
}


.form-group select option {
    background: #07101d;
    color: #ffffff;
}


.form-group textarea {
    resize: vertical;

    min-height: 125px;
}


/* FOCUS */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #38bdf8;

    background: rgba(5, 16, 30, 0.88);

    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.08);
}


/* =====================================================
   SEND BUTTON
   ===================================================== */

.contact-submit {
    width: 100%;

    margin-top: 4px;

    padding: 15px 22px;

    border: 1px solid #38bdf8;

    background: #2563eb;

    color: #ffffff;

    font-family: "Inter", Arial, sans-serif;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.contact-submit:hover {
    background: #1d4ed8;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    .contact-wrap {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .contact-info h1 {
        font-size: 40px;
    }
}


@media (max-width: 600px) {

    .contact-section {
        padding: 35px 20px 50px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-form-box {
        padding: 26px 22px 30px;
    }


    .contact-info h1 {
        font-size: 34px;
    }


    .contact-form-box h2 {
        font-size: 25px;
    }
}
/* =====================================================
   ENGAGEMENT PAGE
===================================================== */

.engagement-page {
    width: 100%;
    min-height: calc(100vh - 90px);

    background:
        linear-gradient(
            rgba(3, 8, 14, 0.82),
            rgba(3, 8, 14, 0.94)
        ),
        url("expertise-bg.jpg") center / cover no-repeat;

    background-attachment: fixed;

    color: #ffffff;
}


/* MAIN SECTION */

.engagement-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 55px 55px 65px;
}


/* =====================================================
   HEADING
===================================================== */

.engagement-heading {
    text-align: center;

    margin-bottom: 52px;
}


.engagement-heading > p {
    margin: 0 0 14px;

    color: #38bdf8;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
}


.engagement-heading h1 {
    margin: 0;

    color: #f8fafc;

    font-size: 48px;
    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;
}


.engagement-heading > span {
    display: block;

    max-width: 760px;

    margin: 18px auto 0;

    color: #aebed0;

    font-size: 16px;
    line-height: 1.6;
}


/* =====================================================
   OPTIONS GRID
===================================================== */

.engagement-options {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;
}


/* EACH OPTION */

.engagement-option {
    min-width: 0;

    padding: 0 34px 10px;

    border-right: 1px solid rgba(120, 160, 200, 0.20);

    display: flex;
    flex-direction: column;
}


.engagement-option:first-child {
    padding-left: 12px;
}


.engagement-option:last-child {
    border-right: none;

    padding-right: 12px;
}


/* =====================================================
   NUMBER
===================================================== */

.engagement-number {
    margin-bottom: 16px;

    color: #38bdf8;

    font-size: 38px;
    line-height: 1;

    font-weight: 700;
}


/* =====================================================
   SHORT BLUE LINE
===================================================== */

.engagement-line {
    position: relative;

    width: 100%;
    height: 2px;

    margin-bottom: 30px;

    background: rgba(56, 189, 248, 0.75);
}


.engagement-line::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #38bdf8;

    transform: translate(-1px, -50%);

    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.08),
        0 0 15px rgba(56, 189, 248, 0.35);
}


/* =====================================================
   ICON
===================================================== */

.engagement-icon {
    width: 64px;
    height: 64px;

    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(96, 165, 250, 0.30);

    border-radius: 10px;

    background: rgba(7, 18, 32, 0.60);

    color: #60a5fa;

    font-size: 30px;
}


/* =====================================================
   TITLE
===================================================== */

.engagement-option h2 {
    margin: 0 0 16px;

    color: #f8fafc;

    font-size: 25px;
    line-height: 1.2;

    font-weight: 700;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.engagement-option > p {
    max-width: 270px;

    margin: 0 0 26px;

    color: #aebed0;

    font-size: 14px;
    line-height: 1.7;
}


/* =====================================================
   BUTTON
===================================================== */

.engagement-option > a {
    width: fit-content;
    min-width: 175px;

    margin-top: auto;

    padding: 13px 18px;

    border: 1px solid #2563eb;

    color: #f8fafc;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.engagement-option > a span {
    color: #38bdf8;

    font-size: 18px;
}


.engagement-option > a:hover {
    background: rgba(37, 99, 235, 0.18);

    border-color: #38bdf8;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .engagement-section {
        padding: 45px 35px 60px;
    }


    .engagement-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 50px;
    }


    .engagement-option:nth-child(2) {
        border-right: none;
    }


    .engagement-heading h1 {
        font-size: 40px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .engagement-section {
        padding: 35px 20px 50px;
    }


    .engagement-heading {
        margin-bottom: 40px;
    }


    .engagement-heading h1 {
        font-size: 33px;
    }


    .engagement-heading > span {
        font-size: 14px;
    }


    .engagement-options {
        grid-template-columns: 1fr;

        row-gap: 40px;
    }


    .engagement-option {
        padding: 0 0 35px;

        border-right: none;

        border-bottom: 1px solid rgba(120, 160, 200, 0.20);
    }


    .engagement-option:last-child {
        border-bottom: none;
    }


    .engagement-option > p {
        max-width: none;
    }
}
/* =====================================================
   ENGAGEMENT PAGE
===================================================== */

.engagement-page {
    width: 100%;
    min-height: calc(100vh - 90px);

    background:
        linear-gradient(
            rgba(3, 8, 14, 0.82),
            rgba(3, 8, 14, 0.94)
        ),
        url("expertise-bg.jpg") center / cover no-repeat;

    background-attachment: fixed;

    color: #ffffff;
}


/* MAIN SECTION */

.engagement-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 55px 55px 65px;
}


/* =====================================================
   HEADING
===================================================== */

.engagement-heading {
    text-align: center;

    margin-bottom: 52px;
}


.engagement-heading > p {
    margin: 0 0 14px;

    color: #38bdf8;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;
}


.engagement-heading h1 {
    margin: 0;

    color: #f8fafc;

    font-size: 48px;
    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;
}


.engagement-heading > span {
    display: block;

    max-width: 760px;

    margin: 18px auto 0;

    color: #aebed0;

    font-size: 16px;
    line-height: 1.6;
}


/* =====================================================
   OPTIONS GRID
===================================================== */

.engagement-options {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;
}


/* EACH OPTION */

.engagement-option {
    min-width: 0;

    padding: 0 34px 10px;

    border-right: 1px solid rgba(120, 160, 200, 0.20);

    display: flex;
    flex-direction: column;
}


.engagement-option:first-child {
    padding-left: 12px;
}


.engagement-option:last-child {
    border-right: none;

    padding-right: 12px;
}


/* =====================================================
   NUMBER
===================================================== */

.engagement-number {
    margin-bottom: 16px;

    color: #38bdf8;

    font-size: 38px;
    line-height: 1;

    font-weight: 700;
}


/* =====================================================
   SHORT BLUE LINE
===================================================== */

.engagement-line {
    position: relative;

    width: 100%;
    height: 2px;

    margin-bottom: 30px;

    background: rgba(56, 189, 248, 0.75);
}


.engagement-line::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #38bdf8;

    transform: translate(-1px, -50%);

    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.08),
        0 0 15px rgba(56, 189, 248, 0.35);
}


/* =====================================================
   ICON
===================================================== */

.engagement-icon {
    width: 64px;
    height: 64px;

    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(96, 165, 250, 0.30);

    border-radius: 10px;

    background: rgba(7, 18, 32, 0.60);

    color: #60a5fa;

    font-size: 30px;
}


/* =====================================================
   TITLE
===================================================== */

.engagement-option h2 {
    margin: 0 0 16px;

    color: #f8fafc;

    font-size: 25px;
    line-height: 1.2;

    font-weight: 700;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.engagement-option > p {
    max-width: 270px;

    margin: 0 0 26px;

    color: #aebed0;

    font-size: 14px;
    line-height: 1.7;
}


/* =====================================================
   BUTTON
===================================================== */

.engagement-option > a {
    width: fit-content;
    min-width: 175px;

    margin-top: auto;

    padding: 13px 18px;

    border: 1px solid #2563eb;

    color: #f8fafc;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.engagement-option > a span {
    color: #38bdf8;

    font-size: 18px;
}


.engagement-option > a:hover {
    background: rgba(37, 99, 235, 0.18);

    border-color: #38bdf8;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .engagement-section {
        padding: 45px 35px 60px;
    }


    .engagement-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 50px;
    }


    .engagement-option:nth-child(2) {
        border-right: none;
    }


    .engagement-heading h1 {
        font-size: 40px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .engagement-section {
        padding: 35px 20px 50px;
    }


    .engagement-heading {
        margin-bottom: 40px;
    }


    .engagement-heading h1 {
        font-size: 33px;
    }


    .engagement-heading > span {
        font-size: 14px;
    }


    .engagement-options {
        grid-template-columns: 1fr;

        row-gap: 40px;
    }


    .engagement-option {
        padding: 0 0 35px;

        border-right: none;

        border-bottom: 1px solid rgba(120, 160, 200, 0.20);
    }


    .engagement-option:last-child {
        border-bottom: none;
    }


    .engagement-option > p {
        max-width: none;
    }
}
/* =========================================
   GLOBAL BLURRED TRUCK BACKGROUND
   ========================================= */

html,
body {
    margin: 0;
    min-height: 100%;
    background: #02060b;
}

body {
    background:
        linear-gradient(
            rgba(2, 7, 14, 0.68),
            rgba(2, 7, 14, 0.82)
        ),
        url("truck-blur.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.hero,
.about-page,
.expertise-page,
.solutions-page,
.approach-page,
.engagement-page,
.contact-page,
.media-page {
    background: transparent !important;
}
body {
    background:
        linear-gradient(
            rgba(2, 7, 14, 0.74),
            rgba(2, 7, 14, 0.86)
        ),
        url("truck-blur.png") center / cover no-repeat fixed;
}
/* ================================
   TRANSPARENT NAVBAR
================================ */

.navbar {
    background: rgba(2, 6, 11, 0.35) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* ================================
   ACTIVE NAV LINK
================================ */

nav a {
    position: relative;
    text-decoration: none;
    color: #ffffff;
}

/* Active page text */
nav a.active {
    color: #18aeea !important;
}

/* Blue line below active page */
nav a.active::after {
    content: "";
    position: absolute;

    width: 42px;
    height: 3px;

    left: 50%;
    bottom: -20px;

    transform: translateX(-50%);

    background: #18aeea;
    border-radius: 2px;
}
/* FORCE ACTIVE NAV TO WORK ON EVERY PAGE */

.navbar nav a {
    position: relative !important;
    text-decoration: none !important;
}

.navbar nav a.active {
    color: #18aeea !important;
}

.navbar nav a.active::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;

    width: 42px !important;
    height: 3px !important;

    left: 50% !important;
    bottom: -20px !important;

    transform: translateX(-50%) !important;

    background: #18aeea !important;
    border-radius: 2px !important;

    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================
   MAIN WEBSITE BACKGROUND
========================================= */

body {
    background:
        linear-gradient(
            rgba(2, 6, 11, 0.62),
            rgba(2, 6, 11, 0.78)
        ),
        url("truck-blur.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    min-height: 100vh;
}
.hero,
.about-page,
.expertise-page,
.solutions-page,
.approach-page,
.engagement-page,
.contact-page,
.media-page {
    background: transparent !important;
}
/* ===== TRUCK BACKGROUND ===== */

html,
body {
    min-height: 100%;
}

body {
    background:
        linear-gradient(
            rgba(2, 6, 11, 0.68),
            rgba(2, 6, 11, 0.78)
        ),
        url("truck-blur.png") center center / cover no-repeat fixed !important;
}


/* Make page sections transparent so truck can show through */

main,
.hero,
.expertise-page,
.solutions-page,
.about-page,
.approach-page,
.engagement-page,
.contact-page,
.media-page {
    background-color: transparent !important;
}
/* =========================================
   NAVBAR OVER HERO IMAGE
========================================= */

.navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: rgba(2, 6, 11, 0.18) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* HERO STARTS AT VERY TOP */

.hero {
    min-height: 100vh;

    padding-top: 110px !important;

    background:
        linear-gradient(
            rgba(2, 6, 11, 0.28),
            rgba(2, 6, 11, 0.48)
        ),
        url("truck-blur.png") center / cover no-repeat !important;
}


/* NO BLACK BODY STRIP ABOVE IMAGE */

body {
    margin: 0;
    background: #02060b;
}/* =========================================
   NAVBAR OVER HERO IMAGE
========================================= */

.navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: rgba(2, 6, 11, 0.18) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* HERO STARTS AT VERY TOP */

.hero {
    min-height: 100vh;

    padding-top: 110px !important;

    background:
        linear-gradient(
            rgba(2, 6, 11, 0.28),
            rgba(2, 6, 11, 0.48)
        ),
        url("truck-blur.png") center / cover no-repeat !important;
}


/* NO BLACK BODY STRIP ABOVE IMAGE */

body {
    margin: 0;
    background: #02060b;
}
/* =========================================================
   SAME BACKGROUND STYLE AS HOME — ALL PAGES
========================================================= */

/* HOME + ALL INTERNAL PAGE WRAPPERS */
.hero,
.about-page,
.expertise-page,
.solutions-page,
.approach-page,
.engagement-page,
.contact-page,
.media-page {
    position: relative !important;

    min-height: 100vh !important;

    background:
        linear-gradient(
            rgba(2, 6, 11, 0.28),
            rgba(2, 6, 11, 0.48)
        ),
        url("truck-blur.png") center center / cover no-repeat !important;

    background-attachment: fixed !important;
}


/* =========================================================
   REMOVE OLD BACKGROUNDS INSIDE THE PAGES
========================================================= */

.about-page section,
.expertise-page section,
.solutions-page section,
.approach-page section,
.engagement-page section,
.contact-page section,
.media-page section {
    background-color: transparent !important;
}


/* Remove old page background images / pseudo backgrounds */

.about-page::before,
.expertise-page::before,
.solutions-page::before,
.approach-page::before,
.engagement-page::before,
.contact-page::before,
.media-page::before {
    background: none !important;
    background-image: none !important;
}


/* =========================================================
   NAVBAR — SAME AS HOME
========================================================= */

.navbar {
    position: absolute !important;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background: rgba(2, 6, 11, 0.18) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}


/* =========================================================
   MAKE ROOM FOR NAVBAR ON INTERNAL PAGES
========================================================= */

.about-page,
.expertise-page,
.solutions-page,
.approach-page,
.engagement-page,
.contact-page,
.media-page {
    padding-top: 90px !important;
}
/* =================================
   ABOUT PAGE BACKGROUND FIX
================================= */

body:has(.team-showcase) {
    background:
        linear-gradient(
            rgba(2, 6, 11, 0.55),
            rgba(2, 6, 11, 0.65)
        ),
        url("truck-blur.png") center center / cover fixed no-repeat !important;

    min-height: 100vh;
}

.team-showcase {
    background: transparent !important;
}
/* =================================
   ABOUT PAGE HERO FIX
================================= */

.team-hero {
    max-width: 1050px;
    margin: 0 auto;
    padding: 120px 30px 55px;

    text-align: center;
}

.team-hero > p {
    margin: 0 0 14px;

    color: #38bdf8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.team-hero h1 {
    max-width: 820px;
    margin: 0 auto;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.08;
    font-weight: 700;

    letter-spacing: -1px;
}

.team-hero > span {
    display: block;

    max-width: 850px;
    margin: 20px auto 0;

    color: #b3c2d4;

    font-size: 16px;
    line-height: 1.6;
}
.team-hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 40px 28px;
    text-align: left;
}

.team-hero > p {
    margin: 0 0 10px;
    color: #38bdf8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.team-hero h1 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: 40px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.team-hero > span {
    display: block;
    max-width: 760px;
    margin: 14px 0 0;
    color: #b6c3d3;
    font-size: 14px;
    line-height: 1.6;
}
/* REMOVE BLUE BLOCK BEHIND ABOUT HEADING */

.team-hero {
    background: transparent !important;
}

.team-showcase {
    background: transparent !important;
}
/* ================================
   COMPANY LOGO
================================ */

.logo {    width: 54px;
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent;
    border-left: none;
}

.logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;
}
/* ================================
   COMPANY LOGO
================================ */

.logo {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.logo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
/* =========================================
   CONTACT PAGE BACKGROUND
========================================= */

main.contact-page,
main.home-page  {
    background:
        linear-gradient(
            rgba(2, 6, 11, 0.48),
            rgba(2, 6, 11, 0.58)
        ),
        url("logai.jpg") center center / cover no-repeat !important;

    background-attachment: fixed !important;
    min-height: 100vh;
}
/* =========================================
   CLEAN NAVBAR FIX
========================================= */

.navbar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;

    z-index: 9999;

    background: rgba(2, 6, 11, 0.22) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border-bottom: 1px solid rgba(255,255,255,0.08);

    padding: 0 !important;
}


/* INNER NAV WIDTH + HEIGHT */

.nav-wrap {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    min-height: 82px !important;

    padding: 0 32px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;
}


/* BRAND AREA */

.brand {
    display: flex;
    align-items: center;
    gap: 14px;

    flex-shrink: 0;
}


/* LOGO */

.logo {
    width: 58px !important;
    height: 58px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
}

.logo img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    display: block;
}


/* COMPANY TEXT */

.brand-text h3 {
    margin: 0 0 4px !important;

    font-size: 20px !important;
    line-height: 1.1 !important;

    color: #ffffff;
}

.brand-text span {
    display: block;

    font-size: 11px !important;
    line-height: 1.2 !important;

    letter-spacing: 1px;

    color: #9eb1c5;
}


/* NAV LINKS */

.nav-wrap nav {
    display: flex;
    align-items: center;

    gap: 30px !important;

    margin-left: auto;
}

.nav-wrap nav a {
    position: relative;

    padding: 30px 0 !important;

    color: #ffffff;

    font-size: 15px !important;
    line-height: 1 !important;

    text-decoration: none;

    white-space: nowrap;
}


/* ACTIVE PAGE */

.nav-wrap nav a.active {
    color: #18aeea !important;
}

.nav-wrap nav a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 38px;
    height: 3px;

    background: #18aeea;

    transform: translateX(-50%);

    border-radius: 10px;
}
.contact-form-box {
    border: 1px solid rgba(56, 189, 248, 0.45);

    box-shadow:
        0 0 18px rgba(56, 189, 248, 0.22),
        0 0 40px rgba(56, 189, 248, 0.14),
        0 0 80px rgba(56, 189, 248, 0.08);
}
/* CONTACT SOCIAL MEDIA */

.social-links {
    margin-top: 35px;
}

.social-links > p {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #38bdf8;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.social-icons a {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 50%;

    background: rgba(2, 6, 11, 0.40);
    color: white;

    font-size: 20px;
    text-decoration: none;

    transition: 0.25s ease;
}

.social-icons a:hover {
    color: #38bdf8;
    border-color: #38bdf8;

    transform: translateY(-3px);

    box-shadow: 0 0 18px rgba(56, 189, 248, 0.30);
}
/* FIX ACTIVE NAV BLUE LINE POSITION */

.nav-wrap nav a {
    padding: 28px 0 !important;
}

.nav-wrap nav a.active::after {
    bottom: 14px !important;

    width: 38px;
    height: 3px;

    background: #18aeea;

    border-radius: 10px;
}
/* APPROACH - REDUCE GAP BETWEEN NUMBER/ICON AND HEADING */

.process-card .process-top {
    margin-bottom: 18px !important;
}

.process-card h2 {
    margin-top: 0 !important;
    margin-bottom: 16px;
}
/* HOME HERO - USE LOGAI */
body.home-page .hero {
    background:
        linear-gradient(
            rgba(2, 6, 11, 0.45),
            rgba(2, 6, 11, 0.45)
        ),
        url("logai.jpg") center center / cover no-repeat !important;

    background-attachment: fixed !important;
    min-height: 100vh;
}
/* =========================================
   HOME HERO - REFERENCE STYLE
========================================= */

body.home-page .hero {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(2, 8, 16, 0.52),
            rgba(2, 8, 16, 0.66)
        ),
        url("logai.jpg") center / cover no-repeat !important;

    position: relative;
}

.hero-wrap {
    max-width: 1350px;
    min-height: 100vh;

    margin: 0 auto;

    padding: 150px 55px 55px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* LEFT HERO CONTENT */

.hero-left {
    max-width: 650px;
}

.eyebrow {
    margin-bottom: 16px;

    color: #38bdf8;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.hero-left h1 {
    margin: 0;

    font-size: 56px;
    line-height: 1.05;
    font-weight: 600;

    color: #ffffff;
}

.hero-left h1 span {
    display: block;
    color: #24b6ee;
}

.hero-description {
    max-width: 600px;

    margin-top: 22px;

    color: #d2dbe6;

    font-size: 17px;
    line-height: 1.65;
}


/* BUTTONS */

.hero-buttons {
    margin-top: 30px;

    display: flex;
    gap: 16px;
}


/* BOTTOM SERVICE ITEMS */

.hero-services {
    margin-top: 70px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 25px 60px;

    max-width: 850px;
}

.hero-service {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hero-service svg {
    width: 27px;
    height: 27px;

    color: #38bdf8;

    flex-shrink: 0;
}

.hero-service h4 {
    margin: 0 0 6px;

    font-size: 15px;
    font-weight: 600;

    color: #ffffff;
}

.hero-service p {
    margin: 0;

    font-size: 13px;
    line-height: 1.5;

    color: #aebccd;
}
/* =========================================
   HOME HERO - FINAL
========================================= */

body.home-page .hero {
    min-height: 720px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 8, 16, 0.95) 0%,
            rgba(2, 8, 16, 0.82) 28%,
            rgba(2, 8, 16, 0.52) 55%,
            rgba(2, 8, 16, 0.15) 100%
        ),
        url("fork.png") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    position: relative !important;
}


/* HERO CONTENT */

body.home-page .hero-wrap {
    width: 100%;
    max-width: 1350px;

    min-height: 720px !important;

    margin: 0 auto;
    padding: 130px 60px 45px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}


/* LEFT TEXT */

body.home-page .hero-left {
    max-width: 720px !important;

    margin: 0 !important;

    padding-left: 32px;

    border-left: 3px solid #2bbcff;
}


body.home-page .eyebrow {
    margin: 0 0 18px !important;

    color: #2bbcff !important;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
}


body.home-page .hero-left h1 {
    margin: 0 !important;

    color: #ffffff;

    font-size: 56px !important;
    line-height: 1.05 !important;
    font-weight: 700;
}


body.home-page .hero-left h1 span {
    display: block;

    color: #2bbcff;
}


/* DESCRIPTION */

body.home-page .hero-description {
    max-width: 680px !important;

    margin: 24px 0 0 !important;

    color: #c8d3df;

    font-size: 16px;
    line-height: 1.7;
}


/* BUTTONS */

body.home-page .hero-buttons {
    margin-top: 28px !important;

    display: flex !important;
    gap: 16px;
}


/* SERVICES */

body.home-page .hero-services {
    width: 100%;
    max-width: 1100px !important;

    margin-top: 65px !important;

    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;

    column-gap: 0 !important;
    row-gap: 0 !important;

    padding-top: 24px;

    border-top: 1px solid rgba(255,255,255,0.15);
}


body.home-page .hero-service {
    max-width: none !important;

    display: flex;
    gap: 14px;

    padding: 5px 24px;

    border-right: 1px solid rgba(255,255,255,0.15);
}


body.home-page .hero-service:first-child {
    padding-left: 0;
}


body.home-page .hero-service:last-child {
    border-right: none;
}


body.home-page .hero-service svg {
    width: 27px;
    height: 27px;

    min-width: 27px;

    stroke: #2bbcff;
}


body.home-page .hero-service h4 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}


body.home-page .hero-service p {
    margin: 0;

    color: #aebdcb;

    font-size: 13px;
    line-height: 1.5;
}
/* ==========================================================
   HOME PAGE — HARD FINAL OVERRIDE
   DO NOT PUT OTHER HOME HERO CSS BELOW THIS
========================================================== */

body.home-page {
    background: #020811 !important;
}


/* HERO */

body.home-page main .hero {
    position: relative !important;

    width: 100% !important;
    min-height: 720px !important;

    padding: 0 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(2, 8, 16, 0.96) 0%,
            rgba(2, 8, 16, 0.88) 25%,
            rgba(2, 8, 16, 0.58) 55%,
            rgba(2, 8, 16, 0.12) 100%
        ),
        url("fork.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;

    display: flex !important;
    align-items: center !important;

    overflow: hidden !important;
}


/* REMOVE OLD HERO PSEUDO EFFECTS */

body.home-page .hero::before,
body.home-page .hero::after {
    pointer-events: none !important;
}


/* CONTENT WRAPPER */

body.home-page .hero-wrap {
    position: relative !important;
    z-index: 5 !important;

    width: 92% !important;
    max-width: 1350px !important;
    min-height: 720px !important;

    margin: 0 auto !important;
    padding: 125px 35px 45px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}


/* TEXT AREA */

body.home-page .hero-left {
    position: relative !important;

    width: 100% !important;
    max-width: 720px !important;

    margin: 0 !important;
    padding-left: 30px !important;

    border-left: 3px solid #2bbcff !important;
}


body.home-page .hero-left::before {
    display: none !important;
}


body.home-page .eyebrow {
    display: block !important;

    margin: 0 0 17px !important;

    color: #2bbcff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    letter-spacing: 2.5px !important;
}


body.home-page .hero-left h1 {
    display: block !important;

    max-width: 720px !important;

    margin: 0 !important;

    color: #ffffff !important;

    font-size: 56px !important;
    line-height: 1.06 !important;

    font-weight: 700 !important;

    letter-spacing: -1.5px !important;
}


body.home-page .hero-left h1 span {
    display: block !important;

    color: #2bbcff !important;
}


/* DESCRIPTION */

body.home-page .hero-description {
    display: block !important;

    max-width: 670px !important;

    margin: 24px 0 0 !important;

    color: #c7d3df !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}


/* BUTTONS */

body.home-page .hero-buttons {
    display: flex !important;
    align-items: center !important;

    gap: 16px !important;

    margin: 28px 0 0 !important;
}


body.home-page .hero-buttons a {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 54px !important;

    padding: 0 26px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* SERVICES */

body.home-page .hero-services {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 65px 0 0 !important;
    padding: 24px 0 0 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 0 !important;

    border-top: 1px solid rgba(255,255,255,0.16) !important;
}


body.home-page .hero-service {
    width: auto !important;
    max-width: none !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 13px !important;

    padding: 4px 22px !important;

    border-right: 1px solid rgba(255,255,255,0.14) !important;
}


body.home-page .hero-service:first-child {
    padding-left: 0 !important;
}


body.home-page .hero-service:last-child {
    border-right: none !important;
}


body.home-page .hero-service svg {
    display: block !important;

    width: 27px !important;
    height: 27px !important;

    min-width: 27px !important;

    color: #2bbcff !important;
    stroke: #2bbcff !important;
}


body.home-page .hero-service h4 {
    margin: 0 0 5px !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 600 !important;
}


body.home-page .hero-service p {
    margin: 0 !important;

    color: #aebdcc !important;

    font-size: 12px !important;
    line-height: 1.5 !important;
}
.contact-info-block h3 {
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: #ffffff;
    margin: 4px 0 0;
}
}

.contact-label {
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #22b8ff;
}

.contact-info-block {
    margin-top: 22px;
}
.contact-info-block {
    margin-top: 22px;
}

.contact-label {
    display: block;

    margin-bottom: 6px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #22b8ff;
}

.contact-info-block h3 {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.6;

    color: #9db1c3;
} 
/* =========================
   CONTACT ADDRESS FIX
========================= */

.contact-info-block {
    margin-top: 22px;
}

.contact-label {
    display: block;

    margin-bottom: 6px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #22b8ff;
}

.contact-info-block h3 {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;

    line-height: 1.45;

    color: #ffffff;
}
/* =========================
   CONTACT DETAILS FINAL FIX
========================= */

.contact-wrap {
    align-items: flex-start;
}

.contact-details {
    margin-top: 0 !important;
    border-top: none !important;
}

/* remove any extra top pseudo-lines */
.contact-details::before,
.contact-details::after {
    content: none !important;
    display: none !important;
}

/* first contact block: keep only one line above LOCATION */
.contact-detail:first-child {
    position: relative;
    border-top: none !important;
}

.contact-detail:first-child::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    top: -42px;

    height: 1px;

    background: rgba(150, 185, 205, 0.25);
}

/* all contact headings */
.contact-detail > span {
    display: block;

    margin-bottom: 6px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #22b8ff;
}

/* main white text */
.contact-detail h3 {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;

    color: #ffffff;
}

/* grey description text */
.contact-detail p {
    margin: 7px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

    color: #9db1c3;
}
/* FINAL TOP LINE ALIGNMENT */

.contact-detail:first-child {
    position: relative;
    border-top: none !important;
}

.contact-detail:first-child::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;

    top: 9px;   /* THIS moves the line down */

    height: 1px;

    background: rgba(150, 185, 205, 0.25);
}
/* SOCIAL ICON GLOW */

.social-icons a {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1.8px solid #22b8ff;
    border-radius: 50%;

    color: #ffffff;
    text-decoration: none;

    background: rgba(2, 16, 30, 0.28);

    box-shadow:
        0 0 0 1px rgba(34, 184, 255, 0.08),
        0 0 10px rgba(34, 184, 255, 0.20),
        inset 0 0 10px rgba(34, 184, 255, 0.05);

    transition: all 0.3s ease;
}

.social-icons a i {
    font-size: 28px;
    line-height: 1;
}

.social-icons a:hover {
    transform: translateY(-2px);

    border-color: #4cc8ff;

    box-shadow:
        0 0 0 1px rgba(76, 200, 255, 0.15),
        0 0 14px rgba(34, 184, 255, 0.38),
        0 0 28px rgba(34, 184, 255, 0.22),
        inset 0 0 12px rgba(34, 184, 255, 0.08);
}
/* =========================
   SOCIAL ICONS - THIN GLOW
========================= */

.social-icons {
    display: flex;
    gap: 18px;
    align-items: center;
}

.social-icons a {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(34, 184, 255, 0.75);
    border-radius: 50%;

    background: rgba(3, 18, 32, 0.18);
    color: #ffffff;
    text-decoration: none;

    box-shadow:
        0 0 10px rgba(34, 184, 255, 0.22),
        0 0 22px rgba(34, 184, 255, 0.10);

    transition: all 0.3s ease;
}

.social-icons a i {
    font-size: 26px;
    line-height: 1;
}

.social-icons a:hover {
    border-color: #22b8ff;

    box-shadow:
        0 0 12px rgba(34, 184, 255, 0.30),
        0 0 26px rgba(34, 184, 255, 0.16);

    transform: translateY(-2px);
}
/* =========================================
   FORCE CONTACT TEXT BIGGER
========================================= */

/* ALL normal text on left contact side */
.contact-page p,
.contact-info p,
.contact-details p,
.contact-left p,
.contact-content p {
    font-size: 19px !important;
    line-height: 1.6 !important;
}

/* Blue labels */
.contact-page .contact-label,
.contact-info-block .contact-label,
.contact-left .contact-label {
    font-size: 16px !important;
    line-height: 1.3 !important;
}

/* White contact details */
.contact-page h3,
.contact-page h4,
.contact-info h3,
.contact-info h4,
.contact-details h3,
.contact-details h4 {
    font-size: 23px !important;
    line-height: 1.4 !important;
}

/* Links like email / phone */
.contact-page a:not(nav a),
.contact-info a,
.contact-details a {
    font-size: 22px !important;
}

/* FORM labels */
.contact-form label {
    font-size: 16px !important;
}

/* FORM input text */
.contact-form input,
.contact-form select,
.contact-form textarea {
    font-size: 17px !important;
}

/* Form heading */
.contact-form h2 {
    font-size: 38px !important;
}  
.brand-text span {
    display: block;
    margin-top: 3px;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.15px;

    color: #9fb2c2;
    line-height: 1.2;
}
/* =========================================
   GLOBAL NAVBAR SUBTITLE - FORCE SIZE
========================================= */

.navbar .nav-wrap .brand .brand-text span {
    display: block !important;

    margin-top: 4px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    line-height: 1.25 !important;
    letter-spacing: 1.2px !important;

    color: #a9bac8 !important;

    opacity: 1 !important;
}