@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/* ═══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════════════════════════ */
:root {
    --font-sans: "Jost", sans-serif;
    --font-display: "Bebas Neue", sans-serif;

    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark-navy: #343842;
    --color-dark-blue: #343842;
    --color-dark: #1e2a3a;
    --color-muted: #757575;
    --color-border: #eeeeee;
    --color-border-light: #e0e0e0;
    --color-accent-blue: #29b6d1;
    --color-process-bg: #111111;

    --transition-base: 0.3s ease;
    --transition-med: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.18);
    --container-max: 1170px;
}

/* ═══════════════════════════════════════════════════════════
   BASE RESET & GLOBAL
═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-fg);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

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

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
═══════════════════════════════════════════════════════════ */
.display-title {
    /* font-family: var(--font-display); */
    font-size: clamp(42px, 5.5vw, 130px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-dark-blue);
}

.subtitle-md {
    font-family: var(--font-sans);
    font-size: 35px;
    font-weight: 400;
    color: var(--color-fg);
}

.label-caps {
    /* font-family: var(--font-sans); */
    font-family: "Jost", sans-serif;
    padding-top: 10px;
    font-size: 20px;
    font-weight: 500;
    /* text-transform: uppercase; */
    letter-spacing: 0.1em;
    color: var(--color-fg);
}

.label-caps-copy {
    /* font-family: var(--font-sans); */
    font-family: "Jost", sans-serif;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-fg);
}

.text-muted-custom {
    color: var(--color-muted);
    font-size: 19px;
    line-height: 1.7;
}

.text-muted-custom-narratives {
    color: black;
    font-size: 30px;
    line-height: 1.7;
}

.text-muted-custom-logistics {
    color: black;
    font-size: 30px;
    line-height: 1.7;
}

.py-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS & LINKS
═══════════════════════════════════════════════════════════ */
.btn-underline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 500;
    /* text-transform: uppercase; */
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-fg);
    padding-bottom: 4px;
    color: var(--color-fg);
    transition: opacity var(--transition-base);
}

.btn-underline:hover {
    opacity: 0.6;
    color: var(--color-fg);
}

.btn-outline-white {
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 10px 25px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 23px;
    font-weight: 500;
    /* text-transform: uppercase; */
    /* letter-spacing: 0.12em; */
    transition: background-color var(--transition-base), color var(--transition-base);
}

.btn-outline-white:hover {
    background-color: #ffffff;
    color: var(--color-dark);
}

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.header-fixed.scrolled {
    background-color: #ffffff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 992px) {
    .header-inner {
        padding-left: 60px;
        padding-right: 60px;
    }
}

.header-row {
    min-height: 90px;
}

.logo-text {
    /* font-family: var(--font-display); */
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #ffffff;
    transition: color var(--transition-base);
}

.header-fixed.scrolled .logo-text {
    color: var(--color-fg);
}

.header-nav-list {
    min-height: 90px;
}

.nav-item-link {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    /* padding: 0 24px; */
    transition: opacity var(--transition-base);
}

.header-fixed.scrolled .nav-item-link {
    color: var(--color-fg);
}



.nav-item-link:hover {
    position: relative;
    top: 10px;
    font-family: var(--font-sans);
    /* height: 2rem; */
    /* font-size: 13px; */
    /* font-weight: 700; */
    /* text-transform: uppercase; */
    /* letter-spacing: 0.05em; */
    color: white !important;
    background-color: #000000;
    padding: 0;
    width: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 80%);
    transition: all 0.3s ease;
}

.nav-search-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 18px;
    margin-left: 12px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition-base);
}

.header-fixed.scrolled .nav-search-btn {
    color: var(--color-fg);
}

.nav-search-btn:hover {
    opacity: 1;
}

.mobile-toggle {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
}

.header-fixed.scrolled .mobile-toggle {
    color: var(--color-fg);
}

.mobile-menu {
    background-color: #ffffff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-menu.open {
    max-height: 400px;
}

.mobile-nav-item {
    display: block;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-fg);
    transition: background-color var(--transition-base);
    border-radius: 4px;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    background-color: var(--color-fg);
    color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════════════════════ */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background-color: #000;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    animation: heroZoom 20s linear infinite alternate;
}

@keyframes heroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.72));
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: 760px;
    padding-top: 90px;
}

.hero-subtitle {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
    animation: fadeInLeft 0.8s ease-out forwards;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(42px, 8vw, 88px);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 24px;
    animation: fadeInUp 1s ease-out forwards;
}

.hero-excerpt {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    max-width: 580px;
    line-height: 1.65;
    animation: fadeInUp 1s ease-out 0.2s both forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-social {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 20;
    gap: 24px;
}

.hero-social-link {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--transition-base);
}

.hero-social-link:hover {
    color: #ffffff;
}

.hero-nav-dots {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

.hero-dot {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: color var(--transition-base);
    padding: 2px 0;
    line-height: 1;
}

.hero-dot.active {
    color: #ffffff;
}

.hero-dot.active::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: #ffffff;
    margin-left: 8px;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   CAPABILITIES
═══════════════════════════════════════════════════════════ */
.service-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    /* font-weight: 500; */
    color: var(--color-fg);
}

.service-plus {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: transform var(--transition-base);
}

.service-item:hover .service-plus {
    transform: scale(1.3);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 105px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1px #000000;
}

/* ═══════════════════════════════════════════════════════════
   PROCESS FLOW (updated fxl- prefix)
═══════════════════════════════════════════════════════════ */
/* foundation from page-2.html, avoids conflicts with existing selectors */

.fxl-process-section {
    position: relative;
    width: 100%;
    min-height: 340px;
    overflow: hidden;
}

/* background placeholder for the warehouse/dock night image */
.fxl-process-bg-placeholder {
    position: absolute;
    inset: 0;
    background-color: #111820;
    /* tonal placeholder, replace with real image */
}

/* dark overlay for readability */
.fxl-process-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.fxl-process-inner {
    position: relative;
    z-index: 2;
    padding-top: 40px;
    padding-bottom: 44px;
    padding-left: 32px;
    padding-right: 32px;
}

/* TIMELINE ROW */
.fxl-timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fxl-timeline-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fxl-node-badge {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.fxl-node-circle {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fxl-icon-placeholder {
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* connectors between nodes */
.fxl-timeline-connector {
    flex: 1;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* CARDS ROW */
.fxl-cards-row {
    margin-top: 2rem;
}

.fxl-step-card {
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    text-align: center;
}

.fxl-step-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.fxl-step-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

/* TICKER / MARQUEE BAND */
.fxl-ticker-band {
    position: relative;
    width: 100%;
    background-color: #0d0d0d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    height: 68px;
    display: flex;
    align-items: center;
}

.fxl-ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: fxl-marquee 22s linear infinite;
}

@keyframes fxl-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.fxl-ticker-item {
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.18);
    text-transform: uppercase;
    padding: 0 2.5rem;
}

.fxl-ticker-dot {
    color: rgba(255, 255, 255, 0.12);
    font-size: 0.55rem;
    padding: 0 0.5rem;
}

/* legacy ticker rules for original section */
.process-ticker {
    background-color: #000000;
    padding: 20px 0;
    overflow: hidden;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
    /* filter: blur(5px); */
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    margin: 0 32px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: transparent;
    -webkit-text-stroke: 0.1px #DBFDD3E8;
}

.ticker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    margin-left: 32px;
}

/* hero image styles for original process section */
.section-process {
    position: relative;
    overflow: hidden;
}

.process-hero-img {
    position: relative;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (min-width: 768px) {
    .process-hero-img {
        height: 560px;
    }
}

.process-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.process-overlay-lr {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.801), rgba(0, 0, 0, 0.452), rgba(0, 0, 0, 0.836));
}

/* ticker adjustments */
#tickerTrack .ticker-item {
    font-size: 5rem;
}

#tickerTrack .ticker-dot {
    display: none;
}

.process-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96px;
    background: linear-gradient(to top, #000000, transparent);
}

.cearcil-relative {
    position: relative;
    z-index: 5;
}

.process-steps-bg {
    background-image: url('../image/page-1/5/white-world-map-dotted-black-background_1198919-370.avif');
    /* allow a background image to be used; when provided it will stay fixed */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    /* needed for overlay */
}

.process-steps-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.74);
    pointer-events: none;
}

/* alternate version using a custom background image and semi-transparent overlay */
.process-steps-bg-alt {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #ffffff;
}

.process-steps-bg-alt .process-steps-overlay {
    /* dark overlay to improve text contrast without hiding the image */
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.process-steps-bg-alt .container {
    /* elevate inner content above overlay */
    position: relative;
    z-index: 1;
}

.process-step-title {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.process-step-desc {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
}

.process-icons-row {
    --icon-size: clamp(4rem, 8vw, 7rem);
    /* icon-size variable moved here so children and the line can reference it */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* ensure first/last icons sit at ends, avoiding extra outer gap */
    padding: 0 calc(var(--icon-size) / 2);
    /* padding ensures line endpoints align with icon centers */
}

.process-line {
    position: absolute;
    top: 50%;
    /* line spans from the center of first icon to center of last icon */
    left: calc(var(--icon-size) / 2);
    right: calc(var(--icon-size) / 2);
    transform: translateY(-50%);
    height: 3px;
    background: #ffffff;
    z-index: 1;
}

.process-icon-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-icon-circle {
    /* size now inherited from parent row */
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--icon-size) / 1.6);
    color: #000000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition-base);
}

.process-icon-circle:hover {
    transform: scale(1.1);
}

.process-num {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 30px;
    height: 30px;
    background: #ffffff;
    color: #000000;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════════════════════════════ */
.why-main-title {
    /* font-family: var(--font-display); */
    font-size: clamp(52px, 7vw, 110px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-dark-navy);
}

.why-top-link {
    font-family: var(--font-sans);
    font-size: 21px;
    font-weight: 600;
    color: var(--color-dark-navy);
    border-bottom: 1px solid var(--color-dark-navy);
    padding-bottom: 2px;
    white-space: nowrap;
    transition: opacity var(--transition-base);
}

.why-top-link:hover {
    opacity: 0.6;
    color: var(--color-dark-navy);
}

.why-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
}

.why-subtitle {
    font-size: 30px;
    color: var(--color-dark-navy);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.why-tab-btn {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    color: #b0b5c8;
    /* padding-bottom: 4px; */
    cursor: pointer;
    text-align: left;
    /* transition: color var(--transition-base), border-color var(--transition-base); */
    text-decoration: underline;
}

.why-tab-btn.active,
.why-tab-btn:hover {
    color: var(--color-dark-navy);
    /* border-bottom-color: var(--color-dark-navy); */
}

.why-tab-text {
    font-size: 18px;
    color: var(--color-muted);
    line-height: 1.9;
}

.metric-label {
    /* font-family: var(--font-sans); */
    font-size: 13px;
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: 0.06em;
    color: var(--color-dark-navy);
}

.metric-pct {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark-navy);
    font-variant-numeric: tabular-nums;
}

.metric-track {
    position: relative;
    height: 2px;
    background: #e0e0e0;
    border-radius: 999px;
    overflow: hidden;
}

.metric-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--color-dark-navy);
    border-radius: 999px;
    width: 0%;
    transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Stack */
.card-stack-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 68%;
}

.card-stack {
    position: absolute;
    inset: 0;
}

.stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.45s ease,
        outline 0.45s ease;
}

.stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stack-card.card-exit {
    animation: cardToBack 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stack-card.card-enter {
    animation: cardFromBack 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes cardToBack {
    0% {
        transform: var(--st);
        z-index: 50;
        opacity: 1;
    }

    35% {
        transform: translateX(120%) scale(0.85);
        z-index: 50;
        opacity: 0.7;
    }

    70% {
        transform: translateX(80%) translateY(40px) scale(0.75);
        z-index: 1;
        opacity: 0.3;
    }

    100% {
        transform: translateX(0) translateY(0) scale(0.75);
        z-index: 1;
        opacity: 0;
    }
}

@keyframes cardFromBack {
    0% {
        transform: translateX(-110%) scale(0.75);
        opacity: 0;
        z-index: 50;
    }

    55% {
        transform: translateX(8%) scale(1.02);
        opacity: 0.9;
        z-index: 50;
    }

    100% {
        transform: var(--st);
        opacity: 1;
        z-index: 50;
    }
}

.stack-arrow {
    width: 44px;
    height: 44px;
    border: 1px solid #d1d5db;
    background: none;
    color: var(--color-dark-navy);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.stack-arrow:hover {
    background-color: var(--color-dark-navy);
    color: #ffffff;
    border-color: var(--color-dark-navy);
}

.stack-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.stack-dot {
    height: 3px;
    border-radius: 999px;
    background: #d1d5db;
    transition: width 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    border: none;
    padding: 0;
}

.stack-dot.active {
    background: var(--color-dark-navy);
    width: 32px !important;
}

/* ______________________ */

/* ═══════════════════════════════════════════════════════════
   GALLERY SLIDER
═══════════════════════════════════════════════════════════ */
.lgs-carousel-section {
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0;
    overflow: hidden;
}

.lgs-carousel-track-outer {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lgs-img-side {
    flex: 0 0 22%;
    max-width: 22%;
}

.lgs-img-side .lgs-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    /* fallback color for when no image is provided */
    background-color: #d0d0d0;
    background-size: cover;
    background-position: center;
    /* apply an actual image via inline style or script, e.g.
       style="background-image:url('path/to.jpg');" */
}


.lgs-img-center {
    flex: 0 0 50%;
    max-width: 50%;
}

.lgs-img-center .lgs-img-placeholder {
    width: 100%;
    aspect-ratio: 16/7;
    background-color: #c0c8d8;
    /* fallback when no image */
    background-size: cover;
    background-position: center;
    /* use inline/background-image from JS or markup for real pictures */
}


/* Carousel sliding strip */
.lgs-carousel-relative {
    position: relative;
    overflow: hidden;
    /* clips the sliding strip */
}

/* The strip holds 3 "frames" side by side: prev-group | current-group | next-group */
.lgs-car-strip {
    display: flex;
    width: 300%;
    /* 3 frames × 100% */
    will-change: transform;
    /* transition injected by JS */
}

/* Each frame = one full-width copy of the 3-image layout */
.lgs-car-frame {
    width: calc(100% / 3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 43px;
    padding: 0;
}

/* Inside each frame, side and center keep same proportions */
.lgs-car-frame .lgs-car-f-side {
    flex: 0 0 22%;
    max-width: 22%;
}

.lgs-car-frame .lgs-car-f-side .lgs-img-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #d0d0d0;
}

.lgs-car-frame .lgs-car-f-center {
    flex: 0 0 50%;
    max-width: 50%;
}

.lgs-car-frame .lgs-car-f-center .lgs-img-placeholder {
    width: 100%;
    aspect-ratio: 16/7;
    background-size: cover;
    background-position: center;
    background-color: #c0c8d8;
}

/* Arrow buttons on sides */
.lgs-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #9f9f9f69;
    border: none;
    color: #ffffff;
    font-size: 2.4rem;
    cursor: pointer;
    z-index: 5;
    padding: 8px;
}

.lgs-arrow-btn.lgs-arrow-left {
    left: 10px;
}

.lgs-arrow-btn.lgs-arrow-right {
    right: 10px;
}

.lgs-carousel-relative {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════
   PROJECT HIGHLIGHTS
═══════════════════════════════════════════════════════════ */
.project-slider {
    position: relative;
    width: 100%;
    /* flexible height: proportionate to viewport with sensible bounds */
    height: 60vh;
    max-height: 800px;
    min-height: 400px;
    overflow: hidden;
    margin-top: 32px;
}

/* tweak for smaller screens */
@media (max-width: 768px) {
    .project-slider {
        height: 70vh;
        min-height: 300px;
    }

    .project-dots-v {
        right: 16px;
    }
}

.project-slider-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s ease, opacity 0.5s ease;
    filter: brightness(0.7);
}

.project-slider-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
}

.project-dots-v {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-140%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

/* smaller dots/spacing on narrow screens */
@media (max-width: 768px) {
    .project-dots-v {
        right: 16px;
        gap: 8px;
    }

    .project-dot-v {
        width: 6px;
        height: 6px;
    }
}

.project-dot-v {
    border: none;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
    padding: 0;
}

.project-dot-v.active {
    background: #ffffff;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.project-content {
    position: absolute;
    bottom: 5rem;
    left: 15rem;
    z-index: 20;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.project-content.animating {
    opacity: 0;
    transform: translateY(10px);
}

.project-accent-line {
    width: 56px;
    height: 3px;
    background: #ffffff;
    margin-bottom: 16px;
}

.project-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 80px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.btn-view-project {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 16px;
    /* font-weight: 700; */
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 12px 28px;
    border-radius: 999px;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.btn-view-project:hover {
    background-color: #ffffff;
    color: var(--color-dark);
}

.project-arrow {
    margin-top: 40px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgb(255, 255, 255);
    background: none;
    color: #ffffff;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.project-arrow:hover {
    background-color: #ffffff;
    color: var(--color-dark);
}

.project-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════
   NEWS GRID
═══════════════════════════════════════════════════════════ */
/* slider wrapper and arrows for reactive news carousel */
.lgs-news-slider-wrap {
    position: relative;
    overflow: visible;
    /* allow arrows to extend outside container */
}

.lgs-news-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    /* default inside placement for small screens */
}

.lgs-news-arrow.lgs-news-prev {
    left: 10px;
}

.lgs-news-arrow.lgs-news-next {
    right: 10px;
}


.news-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    color: #aaa;
    cursor: pointer;
    z-index: 5;
    transition: color var(--transition-base);
    padding: 4px;
}

.news-arrow:hover {
    color: var(--color-dark-blue);
}

.news-arrow:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.news-arrow-left {
    left: -44px;
}

.news-arrow-right {
    right: -44px;
}

.news-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.news-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
}

.news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.news-card:hover .news-card-img img {
    transform: scale(1.06);
}

.news-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.news-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-dark-blue);
    transition: text-decoration 0.2s ease;
}

.news-card:hover .news-title {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.news-dot {
    border: none;
    border-radius: 50%;
    background: #ccc;
    width: 8px;
    height: 8px;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.news-dot.active {
    background: var(--color-dark-blue);
    width: 10px;
    height: 10px;
}

@keyframes newsSlideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes newsSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.news-enter-right {
    animation: newsSlideInRight 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.news-enter-left {
    animation: newsSlideInLeft 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.lgs-news-viewport {
    width: 100%;
    overflow: hidden;
}

.lgs-news-track {
    display: flex;
    will-change: transform;
}

.lgs-news-page {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    gap: 24px;
}

.lgs-news-card-wrap {
    flex: 1;
    min-width: 0;
}

.lgs-news-card-wrap .lgs-news-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #c8d0dc;
    /* light neutral fallback */
    background-size: cover;
    background-position: center;
    display: block;
    /* script already injects background-image when available */
}

.lgs-news-card-wrap .lgs-news-card-meta {
    font-size: 0.75rem;
    color: #555;
    margin-top: 14px;
    margin-bottom: 6px;
}

.lgs-news-card-wrap .lgs-meta-sep {
    margin: 0 6px;
}

.lgs-news-card-wrap .lgs-news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════
   TEAM SECTION
═══════════════════════════════════════════════════════════ */
.team-card {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #f5f5f5;
}

.team-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer {
    width: 100%;
    overflow: hidden;
}

.footer-cta {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.footer-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.72));
}

.footer-cta-content {
    position: relative;
    z-index: 2;
}

.footer-cta-title {
    font-family: "Jost", sans-serif;
    font-size: clamp(28px, 5vw, 75px);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 16px;
}

.footer-cta-sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    margin-bottom: 40px;
    letter-spacing: 0.02em;
}

.footer-offices {
    padding-top: 120px;
    padding-bottom: 120px;
}

.footer-office-title {
    font-family: "Jost", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-fg);
    margin-bottom: 16px;
}

.footer-office-detail {
    font-family: "Jost", sans-serif;

    font-size: 16px;
    color: black;
    line-height: 1.6;
    margin-bottom: 4px;
}

.footer-office-detail a {
    color: black;
    transition: color var(--transition-base);
}

.footer-office-detail a:hover {
    color: var(--color-fg);
}

/* ═══════════════════════════════════════════════════════════
   ANIMATED TEXT / CHARACTER ANIMATIONS
═══════════════════════════════════════════════════════════ */

/* Character animation - fade in from right with transition */
.qodef-e-character {
    display: inline-block;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active state for animated characters */
.qodef-e-character.appeared,
.qodef--appeared .qodef-e-character {
    opacity: 1;
    transform: translateX(0);
}

/* Word holder container */
.qodef-e-word-holder {
    display: inline;
}

/* Process line animation - grows from left to right */
@keyframes lineGrow {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* Process line animated state */
.process-line.animating {
    animation: lineGrow 2s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .process-icons-row {
        gap: 0;
    }

    .process-icon-circle {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .process-num {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
}

@media (max-width: 767px) {
    .py-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .hero-nav-dots {
        right: 16px;
    }

    .gallery-slide.side-slide {
        width: 28vw;
        height: 160px;
    }

    .gallery-slide.center-slide {
        width: 60vw;
        height: 230px;
    }

    .project-content {
        left: 20px;
        bottom: 28px;
    }

    .news-arrow-left {
        left: -28px;
    }

    .news-arrow-right {
        right: -28px;
    }

    .footer-offices {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media (min-width: 576px) {
    .lgs-step-title {
        font-size: 1rem;
    }

    .lgs-step-desc {
        font-size: 0.75rem;
    }
}

@media (min-width: 768px) {
    .lgs-process-section {
        padding-top: 58%;
    }

    .lgs-step-icon-wrap {
        width: 65px;
        height: 65px;
    }

    .lgs-news-heading {
        font-size: 3.5rem;
    }
}

@media (min-width: 992px) {
    .lgs-process-section {
        padding-top: 52%;
    }

    .lgs-news-heading {
        font-size: 4rem;
    }

    .lgs-news-arrow.lgs-news-prev {
        left: -50px;
    }

    .lgs-news-arrow.lgs-news-next {
        right: -50px;
    }

    .process-line {
        top: 38%;
    }
}

/* dots for news slider */
.lgs-dots-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.lgs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.3s;
}

.lgs-dot-active {
    background-color: rgba(0, 0, 0, 0.8);
}


@media (min-width: 1200px) {
    .lgs-process-section {
        padding-top: 48%;
    }

    .lgs-news-heading {
        font-size: 4.5rem;
    }
}

@media (min-width: 1400px) {
    .lgs-process-section {
        padding-top: 44%;
    }
}

/* ═══════════════════════════════════════════════════════════
   HERO SLIDER STYLES
═══════════════════════════════════════════════════════════ */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #0d1e2e;
}

/* ---- Slides ---- */
.slides-wrapper {
    position: absolute;
    inset: 0;
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.2s ease-in-out;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-color: #0d1e2e;
    transform: scale(1);
    transition: transform 8s linear;
}

.slide.active .slide-bg {
    transform: scale(1.06);
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(8, 20, 35, 0.72) 0%,
            rgba(8, 20, 35, 0.55) 42%,
            rgba(8, 20, 35, 0.1) 60%,
            transparent 75%);
}

/* ---- Slide Content ---- */
.slide-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: clamp(40px, 6vw, 90px);
    padding-right: 50%;
    padding-top: 60px;
}

.slide-subtitle {
    display: block;
    font-family: "Outfit", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.slide.active .slide-subtitle {
    opacity: 1;
    transform: translateY(0);
}

.slide-title {
    font-family: "Outfit", sans-serif;
    font-size: clamp(52px, 8.5vw, 5.5rem);
    font-weight: 700;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-white);
    max-width: 560px;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}

.slide.active .slide-title {
    opacity: 1;
    transform: translateY(0);
}

.slide-excerpt {
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 525px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease 0.5s, transform 0.7s ease 0.5s;
}

.slide.active .slide-excerpt {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Decorative Semi-circle (right frosted panel) ---- */
.hero-semicircle {
    position: absolute;
    top: 0;
    right: -80px;
    bottom: 0;
    width: 520px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50% 0 0 50%;
    pointer-events: none;
    z-index: 4;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 991px) {
    .hero-semicircle {
        display: none;
    }
}

/* ---- Slide Numbers (right side vertical nav) ---- */
.slide-numbers {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

@media (max-width: 991px) {
    .slide-numbers {
        right: 18px;
    }
}

.slide-num {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.slide-num-line {
    display: block;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.35s ease;
}

.slide-num.active .slide-num-line {
    width: 34px;
}

.slide-num span:last-child {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.38);
    transition: color var(--transition-base);
}

.slide-num.active span:last-child {
    color: var(--color-white);
    font-weight: 400;
}

.slide-num:hover span:last-child {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Social Links (bottom-left) ---- */
.hero-socials {
    position: absolute;
    bottom: 38px;
    left: clamp(40px, 6vw, 90px);
    z-index: 10;
    display: flex;
    gap: 28px;
}

.hero-social-link {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-base);
}

.hero-social-link:hover {
    color: var(--color-white);
}

/* ═══════════════════════════════════════════════════════════
   SERVICES TRANSIT SECTION
═══════════════════════════════════════════════════════════ */
:root {
    --white: #ffffff;
    --light-gray: #f5f5f5;
    --primary: #29b6d1;
    --slate-navy: #0a2540;
    --slate-gray: #6b7280;
    --dark: #1a1a2a;
    --radius-full: 999px;
    --radius-sm: 8px;
    --transition: 0.3s ease;
    --heading-h4: 1.75rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --section-padding: 120px;
}

.services-section {
    background: var(--white);
    padding: var(--section-padding) 0;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--slate-navy);
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.service-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-full);
    border: none;
    font-weight: 600;
    font-size: var(--font-size-md);
    background: var(--light-gray);
    color: var(--slate-navy);
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn:hover,
.tab-btn.active {
    background: var(--primary);
    color: var(--white);
}

.service-content {
    background: var(--light-gray);
    clip-path: polygon(7% 0%, 100% 0%, 100% 0, 100% 100%, 100% 100%, 0% 100%, 0 100%, 0% 15%);
    overflow: hidden;
    min-height: 400px;
}

.service-info-bg {
    background-image: url('../image/footer-two-img.png');
    background-size: cover;
    background-position: center;
}

.icon-car {
    width: 33px;
    height: 33px;
    color: #0a2540;
}

.icon-car-cocean-icon {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 17rem;
}

.icon-car-cocean-icon img {
    width: 15%;
    height: 100%;
    max-width: 100%;
}



.icon-car svg {
    width: 100%;
    height: 100%;
}

.service-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    transition: var(--transition);
}

.service-icon {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: var(--primary);
    margin-bottom: 1.5rem;
    align-content: center;
}

.service-title {
    font-size: var(--heading-h4);
    font-weight: 700;
    color: var(--slate-navy);
    margin-bottom: 1rem;
}

.service-desc {
    color: var(--slate-gray);
    margin-bottom: 1.5rem;
}

.service-features {
    margin-bottom: 2rem;
    list-style: none;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--slate-navy);
}

.service-features li i {
    color: var(--dark);
    font-weight: bold;
}

.btn-dark-custom {
    width: 12rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--dark);
    color: var(--white);
    padding: 0.7rem 2rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-md);
    border: none;
    transition: var(--transition);
    cursor: pointer;
    text-decoration: none;
}

.btn-dark-custom:hover {
    background: var(--primary);
    color: var(--white);
}

.service-image {
    height: 100%;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, opacity 0.4s ease;
}

.service-image img.fade-out {
    opacity: 0;
}

.diagonal-left {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
}

/* ----------------------------------------
   Responsive overrides for Services Section
   ---------------------------------------- */

/* Large devices (992px+) */
@media (min-width: 992px) {
    .service-info {
        padding: 3.5rem;
    }
}

/* Extra large devices (1200px+) */
@media (min-width: 1200px) {
    .service-info {
        padding: 4rem;
    }
}

/* Tablet and smaller */
@media (max-width: 991px) {
    .services-section {
        padding: 60px 0;
    }

    .service-content {
        clip-path: none;
    }

    .service-info {
        padding: 2rem;
    }

    .diagonal-left {
        clip-path: none;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .service-tabs {
        gap: 0.5rem;
    }

    .tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .icon-car {
        width: 24px;
        height: 24px;
    }

    .service-info {
        padding: 1.5rem;
    }

    .service-title {
        font-size: 1.25rem;
    }

    .service-features li {
        font-size: 1rem;
    }

    .btn-dark-custom {
        width: 100%;
        justify-content: center;
    }
}