:root {
    --ink: #0c2030;
    --muted: #5a6a78;
    --line: #e6edf2;
    --white: #fff;
    --blue: #0c3e63;
    /* matches reference tone */
    --blue-2: #0d4d7d;
    --accent: #da2a2a;
    /* small red accent like reference dots/quotes */
    --bg: #ffffff;
    --off: #f7fafc;
    --wrap: clamp(300px, 92vw, 1180px);
    --r: 14px;
    --r-lg: 22px;
    --shadow: 0 12px 30px rgba(12, 32, 48, .08);
    --wh-blue: #0a4f84;
    /* headline & button */
    --wh-blue-ink: #c93b39;
    /* slightly deeper blue for legibility */
    --wh-red: #a84130;
    /* red accent words */
    --wh-chip: #0a4f840f;
}

/* Reset / base */
* {
    box-sizing: border-box;
    font-family: "Barlow", sans-serif;
}

html,
body {
    margin: 0;
    overflow-x: hidden;
}

body {
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Barlow Condensed", sans-serif;
}

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

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

.whx-wrap {
    width: var(--wrap);
    margin-inline: auto;
    padding-inline: 16px
}

.whx-eyebrow {
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 700
}

/* ------------------------------------
   HEADER (merged with requested behavior)
------------------------------------ */

/* Base header — transparent on top, white text */
.whx-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(160%) blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #000;
    /* text color on hero */
    transition:
        transform 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease;
}

/* When scrolling up — header visible with white bg + blue text */
.whx-header.is-sticky {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(160%) blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    color: #000;
    /* dark blue */
}

/* When scrolling down — hide header off-canvas */
.whx-header.hide {
    transform: translateY(-100%);
}

/* Inner layout */
.whx-header__row {
    /* height: 74px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 0;
}

/* Brand / logo adopts header color (white on hero, blue when sticky) */
.whx-brand {
    display: flex;
    align-items: center;
    font-weight: 800;
    color: inherit;
    max-width: 80px;
}

.whx-brand img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.whx-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: currentColor;
    /* follows text color */
}

/* Nav */
.whx-nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav.whx-nav ul li a {
    padding: 3px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all .3s ease;
}

nav.whx-nav ul li a:hover {
    border-color: #fff;
}

.whx-nav a {
    color: inherit;
    /* white on hero, blue when sticky */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 15px;
    transition: color .25s ease, opacity .25s ease;
}

.whx-header.is-sticky .whx-nav a:hover {
    color: #c83a38;
    /* lighter blue hover when sticky */
}

.whx-header:not(.is-sticky) .whx-nav a:hover {
    opacity: .85;
    /* subtle hover on transparent state */
}

/* CTA button — solid blue when sticky */
.whx-cta {
    background: linear-gradient(90deg, #c83a38 0, #d94543 35%, #f9f2d2 65%, #f9f2d2);
    background-size: 200% 100%;
    background-position: 0;
    color: #fff;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-transform: uppercase;
    padding: 12px 21px;
    text-align: center;
    cursor: pointer;
    background-size: 300%;
    transition: background-position .65s ease, color .65s ease;
    border: none;
}

/* .whx-cta {
    background: #0c3e63;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 12px 22px rgba(12, 62, 99, .22);
    line-height: normal;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
} */

/* CTA style when header is transparent (hero state) */
.whx-header:not(.is-sticky) .whx-cta {
    /* color: #fff; */
    /* box-shadow: none; */
}


.whx-cta:hover {
    background-position: 100%;
    color: #22304c;
}

/* Burger */
.whx-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line, #e6ebf1);
    background: #fff;
    border-radius: 10px;
    place-items: center;
}

.whx-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1f2b35;
    border-radius: 2px;
    margin: 5px auto;
}

/* ------------------------------------
   MOBILE
------------------------------------ */
@media (max-width: 980px) {
    .whx-nav {
        display: none;
    }

    .whx-burger {
        display: grid;
    }
    
    .whx-brand{
            max-width: 55px;
    }

    .whx-header.nav-open .whx-nav {
        display: block;
        position: fixed;
        inset: 72px 0 auto 0;
        background: #fff;
        /* mobile menu on white */
        border-top: 1px solid var(--line, #e6ebf1);
        color: #0c3e63;
        /* menu text color */
    }

    .whx-header.nav-open .whx-nav a {
        color: #0c3e63;
        /* ensure blue links in mobile menu */
    }

    .whx-nav ul {
        flex-direction: column;
        padding: 16px;
    }
}

.whx-header--inner .whx-nav li {
    color: #000;
}

/* active link + inner header */
/*.whx-nav a.is-active {*/
/*    color: #c83a38;*/
/*    border: 1px solid #c83a38;*/
/*}*/



/* Hero (Full height video background) */
.whx-hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    overflow: hidden;
}

/* Video container */
.whx-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.whx-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55);
}

.whx-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.55);
}

/* Inner content */
.whx-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 20px;
}

.whx-hero span {
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 24px;
    font-size: clamp(16px, 5vw, 22px);
    text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    /* max-width: 14ch; */
    margin-inline: auto;
}

.whx-hero h1 {
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 24px;
    font-size: clamp(38px, 10vw, 134px);
    text-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    /* max-width: 14ch; */
    margin-inline: auto;
}

/* Buttons */
.whx-hero__cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.whx-btn {
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 700;
    border: 1.5px solid transparent;
    font-size: 16px;
    transition: all 0.25s ease;
}

/* Primary (white button) */
.whx-btn--primary {
    background: #fff;
    color: var(--blue, #0c3e63);
}

.whx-btn--primary:hover {
    background: #0c3e63;
    color: #fff;
}

/* Ghost (transparent button) */
.whx-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.whx-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* wrapper */
.whx-quote {
    padding: clamp(44px, 8vw, 100px) 16px clamp(48px, 9vw, 120px);
    text-align: center;
    color: var(--wh-blue-ink);
    width: var(--wrap);
    margin: 0 auto;
}

.whx-provides__swiper {
    overflow: visible;
}

/* top tiny quote marks */
.whx-quote__marks {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.whx-quote__marks span {
    color: var(--wh-red);
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-2px);
}

/* main line stack */
.whx-quote__text {
    margin: 0 auto;
    max-width: 85vw;
    /* narrow like ref */
    font-weight: 400;
    line-height: normal;
    color: #000;
    font-size: clamp(28px, 6vw, 49px);
    font-family: "Barlow", sans-serif;
    /* matches ref scale */
}

.whx-q--em {
    color: var(--wh-red);
}

/* signature */
.whx-sign {
    display: block;
    margin: 28px auto 8px;
    height: auto;
    width: min(220px, 70%);
    opacity: .95;
}

/* CEO caption */
.whx-quote__by {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--wh-blue-ink);
    opacity: .85;
    /* margin-bottom: 26px; */
}

/* a bit more breathing on very wide screens (to mimic ref spacing) */
@media (min-width:1200px) {
    .whx-quote {
        padding-top: 110px;
    }

    /* .whx-quote__text {
        max-width: 24ch;
    } */
}

/* --------------------------------------------
   PROVIDES Section (pixel-accurate clone)
-------------------------------------------- */
.whx-provides {
    padding-block: clamp(64px, 8vw, 50px);
    /* padding-top: 0; */
    background: #fff;
    color: #c83a38;
    font-family: "Poppins", sans-serif;
}

/* eyebrow heading */
.whx-eyebrow {
    color: #a84130;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 14px;
    margin-bottom: 10px;
}

/* main heading */
.whx-heading {
    font-size: clamp(22px, 3vw, 26px);
    color: #c83a38;
    font-weight: 600;
    margin-bottom: 40px;
}

/* swiper base */
.whx-provides .swiper {
    padding-bottom: 70px;
}

/* card */
.whx-card {
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 10px;
    padding: 26px 22px;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.whx-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}

/* icon */
.whx-card__icon {
    color: #c83a38;
    font-size: 31px;
    margin-bottom: 5px;
}

/* title */
.whx-card h3 {
    color: #c83a38;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
}

/* description */
.whx-card p {
    color: #33475b;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    max-height: 75px;
    min-height: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* nav buttons */
.whx-provides .whx-nav {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #dfe5ea;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.whx-provides .whx-nav:hover {
    background: #c83a38;
    /* transform: translateY(-50%) scale(1.05); */
}

.whx-provides .whx-nav::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    margin: 0 auto;
    transform: rotate(45deg);
    color: #c83a38;
}

.whx-provides .whx-prev::before {
    transform: rotate(225deg);
}

.whx-provides .whx-prev {
    left: -5px;
}

.whx-provides .whx-next {
    right: -5px;
}

.whx-provides .whx-nav:hover::before {
    color: #fff;
}

.navigation-flex {
    width: 100%;
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}

.whx-provides .whx-nav {
    position: relative;
    top: unset;
    bottom: unset;
    transform: unset;
}

/* pagination dots */
.whx-provides .swiper-pagination {
    position: absolute;
    margin-top: 0;
    bottom: 0px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #c6cdd5;
    opacity: 1;
    transition: background 0.3s ease, transform 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #c83a38;
    transform: scale(1.2);
}

.mob-btn {
    display: none;
    width: 100%;
    background: #c83a38;
    color: #fff !important;
    border-radius: 5px;
    padding: 7px;
}

/* responsive tweaks */
@media (max-width: 768px) {
    .whx-provides .whx-nav {
        width: 36px;
        height: 36px;
        top: 46%;
    }

    .whx-header .whx-cta {
        display: none;
    }

    .mob-btn {
        display: block;
    }

    .whx-hero {
        height: 50vh;
    }
}

/* ---------------------------------------------------
   PROJECTS SECTION — Pixel-tight clone
--------------------------------------------------- */
.whx-projects {
    background: #F1ECE5;
    padding: clamp(64px, 9vw, 110px) 0;
    padding-top: 50px;
    font-family: "Poppins", sans-serif;
    color: #c83a38;
}

/* heading */
.whx-projects__title {
    text-align: center;
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 700;
    color: #c83a38;
    margin-bottom: 46px;
    line-height: 1.25;
}

.whx-projects__title span {
    display: block;
    font-size: clamp(28px, 3.5vw, 32px);
}

figure.whx-project__img {
    width: 100%;
    margin: 0;
}

/* grid layout */
.whx-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 980px) {
    .whx-projects__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .whx-projects__grid {
        grid-template-columns: 1fr;
    }
}

/* card container */
.whx-project {
    background: #fff;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.whx-project:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* image */
.whx-project__img img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-bottom: 1px solid #e3e8ed;
}

/* body */
.whx-project__body {
    padding: 18px 18px 22px;
    color: #c83a38;
}

/* title */
.whx-project__body h3 {
    margin: 8px 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #c83a38;
}

/* text */
.whx-project__body p {
    margin: 6px 0;
    font-size: 14px;
    color: #33475b;
    line-height: 1.55;
}

.whx-project__body strong {
    font-weight: 700;
    color: #c83a38;
}

/* ============== TYPES SECTION (pixel-tight clone) ============== */

.whx-types {
    padding: clamp(56px, 7vw, 84px) 0;
    background: #fff;
    /* matches reference white background */
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Eyebrow (same size/spacing/tone as reference) */
.whx-eyebrow {
    color: #b1342e;
    /* deep red like reference */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 13px;
    margin: 0 0 18px;
}

/* Grid 2x2 (collapses to 1) with generous spacing like screenshot */
.whx-types__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 860px) {
    .whx-types__grid {
        grid-template-columns: 1fr;
    }
}

/* Card */
.whx-type {
    display: grid;
    grid-template-columns: 56px 1fr;
    /* icon column + text */
    align-items: start;
    gap: 18px;
    padding: 24px 26px;
    border: 1px solid #e3e8ed;
    /* subtle blue-gray border */
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(9, 30, 66, 0.04);
    transition: box-shadow .25s ease, transform .25s ease;
}

.whx-type:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(9, 30, 66, 0.09);
}

/* Icon — solid blue, slightly oversized like reference */
.whx-type__ico {
    font-size: 30px;
    line-height: 1;
    color: #c83a38;
    /* workershotel blue */
    margin-top: 2px;
}

/* Titles & text (matching tones/weights/sizes) */
.whx-type__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: #c83a38;
    /* deep blue headlines */
}

.whx-type__txt {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #33475b;
    /* readable blue-gray body */
}

/* Small tweak so icon and text align nicely on narrow screens */
@media (max-width: 520px) {
    .whx-type {
        grid-template-columns: 42px 1fr;
        padding: 20px 22px;
    }

    .whx-type__ico {
        font-size: 26px;
    }
}

/* ----------------------------------------------
   20 YEARS SECTION — Pixel-tight clone
---------------------------------------------- */

.whx-band {
    padding: clamp(60px, 9vw, 100px) 0;
    background: #fff;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #c83a38;
}

/* Inner layout: two columns, balanced */
.whx-band__inner {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    align-items: center;
    gap: 32px;
}

@media (max-width: 900px) {
    .whx-band__inner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .whx-band__actions {
        justify-content: center;
    }
}

/* Text column */
.whx-band__text h3 {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    margin: 0 0 12px;
    color: #c83a38;
}

.whx-band__text p {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.7;
    color: #33475b;
}

/* Buttons */
.whx-band__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.whx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.whx-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.whx-btn:hover i {
    transform: translateX(3px);
}

.whx-btn--primary {
    background: #c83a38;
    color: #fff;
}

.whx-btn--primary:hover {
    background: #084973;
}

.whx-btn--ghost {
    background: transparent;
    border-color: #c83a38;
    color: #c83a38;
}

.whx-btn--ghost:hover {
    background: #c83a38;
    color: #fff;
}

/* Faces column */
.whx-band__faces {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.whx-band__faces img {
    /*width: 140px;*/
    /*height: 140px;*/
    object-fit: cover;
    /*border-radius: 50%;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
/*.whx-band__faces img:last-child {*/
/*    display:none;*/
/*}*/

.whx-band__faces img:hover {
    transform: scale(1.05);
}

@media (max-width: 900px) {
    .whx-band__faces {
        justify-content: center;
    }

    .whx-band__faces img {
        width: 120px;
        height: 120px;
    }
}

/* How it works */
/* ----------------------------------------------
   HOW IT WORKS — pixel-tight clone
---------------------------------------------- */
.whx-how {
    padding: clamp(60px, 9vw, 100px) 0;
    background: #fff;
}

.whx-how__title {
    margin: 0 0 18px;
    color: #c83a38;
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: .02em;
}

.whx-how__row {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 32px;
    align-items: center;
}

@media (max-width:1000px) {
    .whx-how__row {
        grid-template-columns: 1fr;
    }

    .whx-how__circle {
        text-align: center;
        display: grid;
        place-items: center;
    }
}

/* Left circle */
.whx-how__circle {
    border-radius: 20px;
    padding: 16px;
}

.how-ring {
    display: block;
    width: 100%;
    height: auto;
}

/* Steps / timeline area */
.whx-steps {
    position: relative;
    padding-left: 36px;
    display: grid;
    gap: 34px;
}

/* Vertical line (yellow -> blue -> navy) */
.whx-steps::before {
    content: "";
    position: absolute;
    left: 12px;
    /* centers dots over it */
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(to bottom,
            #f4c238 0%,
            #f4c238 31%,
            #c83a38 31%,
            #c83a38 66%,
            #15283b 66%,
            #15283b 100%);
    border-radius: 2px;
}

/* Step block */
.whx-step h4 {
    margin: .1rem 0 .35rem;
    color: #c83a38;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 22px);
}

.whx-step p {
    margin: 0 0 12px;
    color: #33475b;
    line-height: 1.7;
    font-size: 16px;
}

/* Dots on the line */
.whx-step {
    position: relative;
}

.whx-step::before {
    content: "";
    position: absolute;
    left: -27px;
    /* positions over the line */
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c83a38;
    box-shadow: 0 0 0 4px #fff;
    /* white halo like reference */
}

.whx-step.is-1::before {
    background: #f4c238;
}

.whx-step.is-2::before {
    background: #c83a38;
}

.whx-step.is-3::before {
    background: #15283b;
}

/* Chip buttons (light rounded) */
.whx-chipbtn {
    display: inline-block;
    background: #f4f7fb;
    border: 1px solid #dbe7f2;
    color: #c83a38;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: all .25s ease;
}

.whx-chipbtn:hover {
    background: #e9f2fb;
    border-color: #cfe3f4;
}

/* === How it works — timeline fix === */
.whx-steps {
    /* Timeline geometry */
    --tl-x: 14px;
    /* distance from the steps container's left edge */
    --tl-w: 2px;
    /* line width */
    --dot: 12px;
    /* dot size */

    /* Where the color breaks happen (percent of total line height) */
    --seg1: 33%;
    --seg2: 66%;

    position: relative;
    /* leave room so text doesn’t overlap the timeline */
    padding-left: calc(var(--tl-x) + 22px);
    display: grid;
    gap: 34px;
}

/* The vertical line with sharp color sections (not a smooth gradient) */
.whx-steps::before {
    content: "";
    position: absolute;
    left: var(--tl-x);
    top: 6px;
    bottom: 6px;
    width: var(--tl-w);
    /* hard stops using range syntax: colorA 0 seg1, colorB seg1 seg2, colorC seg2 100% */
    background:
        linear-gradient(to bottom,
            #f4c238 0 var(--seg1),
            #c83a38 var(--seg1) var(--seg2),
            #15283b var(--seg2) 100%);
    border-radius: 2px;
}

/* Step blocks */
.whx-step {
    position: relative;
}

.whx-step h4 {
    margin: .1rem 0 .35rem;
    color: #c83a38;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 22px);
}

.whx-step p {
    margin: 0 0 12px;
    color: #33475b;
    line-height: 1.7;
    font-size: 16px;
}

/* Dots — perfectly centered on the line using the same variables */
.whx-step::before {
    content: "";
    position: absolute;
    /* center = lineX + (lineW/2) - (dot/2) */
    /* left: calc(var(--tl-x) + var(--tl-w)/2 - var(--dot)/2); */
    top: 4px;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: #c83a38;
    /* default color */
    box-shadow: 0 0 0 4px #fff;
    /* white halo like the reference */
}

/* Per-step colors to match the line segments */
.whx-step.is-1::before {
    background: #f4c238;
}

/* yellow top */
.whx-step.is-2::before {
    background: #c83a38;
}

/* blue middle */
.whx-step.is-3::before {
    background: #15283b;
}

/* navy bottom */


/* ===== Footer (reference-accurate) ===== */
.whx-footer--ref {
    background: #000;
    /* dark slate like reference */
    color: #d5e0ea;
    padding-top: 48px;
}

.whx-foot__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 980px) {
    .whx-foot__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Left side */
.whx-foot__intro {
    padding-top: 8px;
}

.whx-foot__lead {
    margin: 0 0 28px;
    max-width: 680px;
    color: #c9d6e4;
    line-height: 1.6;
    font-size: 16px;
}

/* Huge stacked brand (tight tracking & heavy weight) */
.whx-foot__brand {
    margin: 0;
    font-weight: 800;
    line-height: .95;
    letter-spacing: .5px;
    /* subtle tracking like the reference font */
    color: #f2f6fa;
    font-size: clamp(44px, 8vw, 96px);
}

/* Right columns block */
.whx-foot__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 40px;
}

@media (max-width: 560px) {
    .whx-foot__cols {
        grid-template-columns: 1fr;
    }
}

.whx-foot__title {
    margin: 0 0 6px;
    font-size: 15px;
    letter-spacing: .3px;
    color: #f0f6fb;
}

.whx-foot__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.whx-foot__list a {
    margin: 0 0 6px;
    font-size: 15px;
    letter-spacing: .3px;
    color: #fff;
    font-weight: 600;
}

.whx-foot__list a:hover {
    text-decoration: underline;
}

/* Social / email column */
.whx-foot__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.whx-foot__social li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whx-foot__social i {
    width: 18px;
    text-align: center;
    font-size: 16px;
    color: #f0f6fb;
}

.whx-foot__social a {
    color: #ffffff;
    text-decoration: none;
}

.whx-foot__social a:hover {
    text-decoration: underline;
}

/* Bottom bar split layout */
.whx-foot__bottom--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 18px;
    /* same vertical rhythm */
}

.whx-copyline {
    color: #c9d6e4;
    font-size: 14px;
}

.whx-dev {
    color: #c9d6e4;
    font-size: 14px;
}

.whx-dev a {
    color: #cfe0ee;
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 224, 238, .25);
    padding-bottom: 1px;
}

.whx-dev a:hover {
    color: #ffffff;
    border-color: #ffffff;
}

@media (max-width:680px) {
    .whx-foot__bottom--split {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/**
 * ==================================
 * ABOUT US SECTION
 * ==================================
 */
.innerpage-hero {
    position: relative;
    width: 100%;
    padding-block: 100px;
    /* Adjust padding to avoid header overlap */
}

.innerpage-hero h1 {
    font-size: 4rem;
    font-weight: bold;
    color: #c83a38;
    /* Matching the color from the screenshot */
    margin-left: 20px;
    margin-bottom: 20px;
    max-width: 1120px;
    margin: 0 auto;
    line-height: 1;
}

.innerpage-hero p {
    max-width: 1120px;
    margin: 0 auto;
    line-height: 1.4;
    margin-top: 20px;
}

.innerpage-swiper {
    width: 100%;
    /* Adjust height for better image display */
    padding-top: 50px;
    max-width: 1120px;
    margin: 0 auto;
}

.innerpage-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    aspect-ratio: 4/3;
}

.innerpage-swiper .swiper-button-prev,
.innerpage-swiper .swiper-button-next {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px;
    z-index: 10;
}

.innerpage-swiper .swiper-button-prev {
    left: 20px;
}

.innerpage-swiper .swiper-button-next {
    right: 20px;
}

.innerpage-hero-buttons {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10;
}

.innerpage-controller {
    position: absolute;
    bottom: 40px;
    right: 10%;
    transform: translateY(-10%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100px;
}

.innerpage-swiper .swiper-button-prev,
.innerpage-swiper .swiper-button-next {
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    bottom: unset;
    background: #c83a38;
    width: 40px;
    height: 40px;
    font-size: 12px !important;
}

.innerpage-swiper .swiper-button-prev:after,
.innerpage-swiper .swiper-button-next:after {
    font-size: 16px !important;
}

.btn-primary {
    background-color: #c83a38;
    /* New color */
    color: #fff;
    padding: 10px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #a02c30;
    /* Darker shade for hover */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .innerpage-hero h1 {
        font-size: 2rem;
    }
    
    .innerpage-hero{
        padding:40px 20px;
    }

    .innerpage-swiper {
        height: 60vh;
        /* Reduced height for mobile devices */
    }
}

@media (max-width: 480px) {
    .innerpage-hero h1 {
        font-size: 1.5rem;
    }

    .innerpage-swiper {
        height: 50vh;
    }

    .btn-primary {
        font-size: 0.9rem;
        padding: 8px 20px;
    }
}

/* Our Story */
.our-story-section {
    margin: 60px 0;
    padding: 0 20px;
}

.story-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
}

.story-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 40%;
}

.story-header h2 {
    font-size: 22px;
    font-weight: bold;
    color: #c83a38;
    margin: 0;
    /* Blue color used in the screenshot */
}

.story-text {
    width: 60%;
    /* Full width for the text */
}

.story-text p {
    font-size: 15px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.8;
}

.story-text p:first-of-type {
    margin-top: 0;
}

.story-text p:last-of-type {
    margin-bottom: 0;
}

/* Adjusting for smaller screens */
@media (max-width: 768px) {
    .story-container {
        flex-direction: column;
        /* Stack content vertically for tablets */
    }
    
    .story-header, .story-text{
        width:100%;
    }

    .story-header h2 {
        font-size: 2rem;
    }

    .story-text p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .story-header h2 {
        font-size: 1.5rem;
    }

    .story-text p {
        font-size: 0.9rem;
    }
}

.heading-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #c83a38;
    margin-bottom: 20px;
}

.story-text ul {
    padding-left: 20px;
}

/* Stats Section */
.main-section-stats {
    position: relative;
    width: 100%;
    padding: 40px 20px;
}

.stats-section {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 40px 20px;
}

.stat-box {
    flex: 1;
    padding: 20px;
    border: 2px solid #c83a38;
    border-radius: 8px;
    text-align: center;
}

.stat-header {
    font-size: 1.125rem;
    font-weight: bold;
    color: #c83a38;
    /* Blue color for header */
    margin-bottom: 10px;
}

.stat-number {
    font-size: 3rem;
    font-weight: bold;
    color: #c83a38;
    margin-bottom: 15px;
}

.stat-description {
    font-size: 1rem;
    color: #333;
}

.stat-box:hover {
    background-color: #f4f9fc;
    transition: background-color 0.3s ease;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .stats-section {
        flex-direction: column;
        align-items: center;
    }

    .stat-box {
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .stat-number {
        font-size: 2.5rem;
    }

    .stat-header {
        font-size: 1rem;
    }

    .stat-description {
        font-size: 0.9rem;
    }
}

.special-request-main {
    position: relative;
    width: 100%;
    padding: 40px 20px;
    background-color: #f4f9fc;
}

.special-request-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Light background color */
}

.request-text {
    max-width: 60%;
    /* Ensures text occupies less space */
}

.request-text h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #c83a38;
    /* Blue color for the heading */
    margin-bottom: 15px;
}

.request-text p {
    font-size: 1.125rem;
    color: #333;
    line-height: 1.8;
}

.request-image img {
    max-width: 100%;
    height: auto;
    max-width: 200px;
    border-radius: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .special-request-section {
        flex-direction: column;
        align-items: center;
    }

    .request-text {
        text-align: center;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .request-image {
        max-width: 80%;
    }

    .request-text h2 {
        font-size: 2rem;
    }

    .request-text p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .request-text h2 {
        font-size: 1.5rem;
    }

    .request-text p {
        font-size: 0.9rem;
    }
}

.faq-section {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-header {
    font-size: 2rem;
    font-weight: bold;
    color: #c83a38;
    /* Blue color for the heading */
    margin-bottom: 20px;
}

.faq-item {
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
}

.faq-toggle {
    width: 100%;
    text-align: left;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: #c83a38;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
}

.plus-sign {
    margin-right: 10px;
    font-size: 1.5rem;
}

.faq-answer {
    display: none;
    padding: 10px 0;
    font-size: 1rem;
    color: #333;
}

.faq-toggle:focus {
    outline: none;
}

.faq-item:last-child {
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .faq-header {
        font-size: 1.5rem;
    }

    .faq-toggle {
        font-size: 1rem;
    }
}

/**
 * ==================================
 * CONTACT US PAGE
 * ==================================
 */

/* --- Amium Team (scoped) --- */
.am-team {
    --accent: #c83a38;
    --text: #1a2c3b;
    --muted: #6a7b8a;
}

.am-team {
    padding: 30px 35px;
}

.am-team__grid {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Card */
.am-team__card {}

.am-team__photo {
    margin: 0 0 16px 0;
}

.am-team__photo img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* Text block under photo */
.am-team__name {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--accent);
}

.am-team__role {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
}

.am-team__phone,
.am-team__email {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: var(--accent);
    text-decoration: none;
}

.am-team__email {
    margin-bottom: 16px;
}

.am-team__phone:hover,
.am-team__email:hover {
    text-decoration: underline;
}

/* Languages */
.am-team__langs {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
}

.am-team__langs li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-transform: uppercase;
}

.am-flag {
    width: 18px;
    display: inline-block;
}

/* Responsive to match layout flow from screenshot */
@media (max-width: 1200px) {
    .am-team__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .am-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .am-team__photo img {
        height: 380px;
    }
}

@media (max-width: 520px) {
    .am-team__grid {
        grid-template-columns: 1fr;
    }

    .am-team {
        padding: 20px 30px;
    }

    .am-team__photo img {
        height: 360px;
    }
}


/* Form Popup */
/* ===== Brand + base (scoped) ===== */
.am-scope {
    --brand: #c83a38;
    --ink: #153a57;
    --muted: #7f92a2;
    --line: #dbe4ea;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Sample trigger */
.am-scope .am-trigger {
    appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 26px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* ===== Overlay + panel ===== */
.am-req {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.am-req__scrim {
    position: absolute;
    inset: 0;
    background: #0b223333;
    opacity: 0;
    transition: opacity .25s;
}

.am-req__panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: min(620px, 100%);
    background: #fff;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    box-shadow: -24px 0 48px rgba(0, 0, 0, .08);
    padding: 28px 28px 34px;
    overflow: auto;
}

.am-req.is-open {
    pointer-events: auto;
}

.am-req.is-open .am-req__scrim {
    opacity: 1;
}

.am-req.is-open .am-req__panel {
    transform: translateX(0);
}

/* Header */
.am-req__title {
    margin: 0 56px 18px 0;
    color: var(--ink);
    font-weight: 900;
    font-size: 38px;
    line-height: 1.1;
}

.am-req__close {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.am-req__close i {
    color: var(--ink);
    font-size: 18px;
}

/* Form layout */
.am-req__form {
    margin-top: 8px;
}

.am-req__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 28px;
    margin-bottom: 16px;
}

/* Floating labels (text, email, number, textarea) */
.am-field {
    position: relative;
    padding-top: 18px;
}

.am-field.am-field--full {
    grid-column: 1 / -1;
}

.am-field input,
.am-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 2px solid var(--line);
    padding: 10px 10px 12px 0;
    font-size: 16px;
    color: var(--ink);
    outline: none;
    background: transparent;
}

.am-field textarea {
    resize: vertical;
}

.am-field input:focus,
.am-field textarea:focus {
    border-bottom-color: var(--brand);
}

.am-field label {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ink);
    font-weight: 700;
    transform: translateY(26px);
    transition: transform .18s ease, font-size .18s ease, color .18s ease;
    pointer-events: none;
    font-size: 14px;
}

.am-req__req {
    color: var(--brand);
}

/* Float when focused or filled (works for text-like inputs using placeholder hack) */
.am-field:focus-within label,
.am-field input:not(:placeholder-shown)+label,
.am-field textarea:not(:placeholder-shown)+label {
    transform: translateY(0);
    font-size: 12px;
    color: var(--brand);
}

/* Date inputs: special handling (no custom icon; rely on native) */
.am-field--date .am-field__ico {
    display: none !important;
}

/* ensure only native icon shows */
.am-field--date input[type="date"] {
    padding-right: 24px;
}

.am-field--date .am-date-mask {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

/* keep label floated when date has a value */
.am-field.has-value label {
    transform: translateY(0);
    font-size: 12px;
    color: var(--brand);
}

/* while focused and empty -> show mask */
.am-field--date:focus-within:not(.has-value) .am-date-mask {
    opacity: 1;
}

/* Checkbox */
.am-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 24px;
    color: var(--ink);
}

.am-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}

/* Submit */
.am-req__submit {
    width: 100%;
    height: 58px;
    border-radius: 29px;
    border: 0;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Field helper layout (labels left space like screenshot) */
.am-field input::placeholder,
.am-field textarea::placeholder {
    color: transparent;
}

/* ensure only the native calendar icon is visible */
.am-field--date .am-field__ico {
    display: none !important;
}

/* our small grey mask text appears only while focused & empty */
.am-field--date .am-date-mask {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 14px;
    color: #8aa0b3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

.am-field--date:focus-within:not(.has-value) .am-date-mask {
    opacity: 1;
}

/* keep label floated when a date is selected */
.am-field.has-value label {
    transform: translateY(0);
    font-size: 12px;
    color: var(--brand, #c83a38);
}

/* Hide Chrome/Safari built-in date text while empty… */
.am-field--date:not(.has-value) input[type="date"]::-webkit-datetime-edit,
.am-field--date:not(.has-value) input[type="date"]::-webkit-datetime-edit-text,
.am-field--date:not(.has-value) input[type="date"]::-webkit-datetime-edit-month-field,
.am-field--date:not(.has-value) input[type="date"]::-webkit-datetime-edit-day-field,
.am-field--date:not(.has-value) input[type="date"]::-webkit-datetime-edit-year-field {
    color: transparent;
}

/* …but show it when focused */
.am-field--date:focus-within input[type="date"]::-webkit-datetime-edit {
    color: inherit;
}

/* after a value is chosen, keep UA text visible in your ink color */
.am-field--date.has-value input[type="date"]::-webkit-datetime-edit {
    color: var(--ink, #153a57);
}


/* hide placeholders for float pattern */

/* Responsive */
@media (max-width:560px) {
    .am-req__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .am-req__title {
        font-size: 30px;
    }
}

/* Scoped only to the contact section */
.contact-section {
    padding: 4rem 1.5rem;
    background: #ffffff;
    color: #111827;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.contact-section * {
    box-sizing: border-box;
}

.contact-container {
    max-width: 1120px;
    margin: 0 auto;
}

/* Header */
.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-header h2 {
    font-size: clamp(2rem, 3vw, 2.6rem);
    margin-bottom: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.contact-header p {
    max-width: 640px;
    margin: 0 auto;
    font-size: 0.95rem;
    color: #6b7280;
}

/* Info Cards */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-info-card {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.6rem 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease,
                background 0.25s ease;
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(177, 52, 46, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 52, 46, 0.4);
    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.15);
}

.contact-info-card:hover::before {
    opacity: 1;
}

.contact-info-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: #b1342e;
    color: #ffffff;
    box-shadow:
        0 8px 20px rgba(177, 52, 46, 0.45);
}

.contact-info-icon i {
    font-size: 1.25rem;
}

.contact-info-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.contact-info-card p {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.contact-info-card a,
.contact-info-card span {
    font-size: 0.95rem;
    color: #111827;
    text-decoration: none;
    word-break: break-word;
}

.contact-info-card a:hover {
    color: #b1342e;
}

/* Form */
.contact-form-wrapper {
    display: flex;
    justify-content: center;
}

.contact-form-card {
    width: 100%;
    /*max-width: 760px;*/
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2.2rem 1.75rem 2.3rem;
    border: 1px solid #e5e7eb;
    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.12);
}

.contact-form-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.contact-form-card p {
    margin: 0 0 1.6rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label {
    font-size: 0.85rem;
    color: #374151;
}

.form-group input,
.form-group textarea {
    border-radius: 0.85rem;
    border: 1px solid #d1d5db;
    padding: 0.75rem 0.85rem;
    background: #f9fafb;
    color: #111827;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.1s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9ca3af;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #b1342e;
    box-shadow:
        0 0 0 1px rgba(177, 52, 46, 0.6),
        0 10px 22px rgba(177, 52, 46, 0.18);
    background: #ffffff;
    transform: translateY(-1px);
}

.contact-btn {
    margin-top: 0.5rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.78rem 1.7rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #b1342e;
    color: #ffffff;
    box-shadow:
        0 12px 30px rgba(177, 52, 46, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.contact-btn i {
    font-size: 0.95rem;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 40px rgba(177, 52, 46, 0.55);
    filter: brightness(1.03);
}

.contact-btn:active {
    transform: translateY(0);
    box-shadow:
        0 8px 20px rgba(148, 163, 184, 0.7);
}

/* Responsive */
@media (max-width: 900px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        padding: 1.9rem 1.4rem 2rem;
    }

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

@media (max-width: 600px) {
    .contact-section {
        padding: 3rem 1.25rem;
    }

    .contact-header h2 {
        font-size: 1.7rem;
    }

    .contact-info-card {
        padding: 1.4rem 1.3rem;
    }
}