* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:#082c61;
    background:#fff;
    font-size:15px;
}

.container {
    width:min(1180px,94%);
    margin:auto;
}

.header {
    height:76px;
    background:#fff;
    border-bottom:1px solid #e7eaf0;
    position:sticky;
    top:0;
    z-index:20;
}

.nav {
    height:76px;
    display:flex;
    align-items:center;
    gap:22px;
}

.brand img {
    width:220px;
    height:35px;
    object-fit:cover;
    object-position:left center;
}

.nav nav {
    display:flex;
    align-items:center;
    gap:20px;
    flex:1;
    justify-content:center;
}

.nav nav a {
    font-size:13px;
    font-weight:600;
    color:#122f56;
    text-decoration:none;
    white-space:nowrap;
}

.nav nav a.active {
    border-bottom:2px solid #f47721;
    padding-bottom:7px;
}

.search {
    font-size:18px!important;
}

.head-right {
    display:flex;
    align-items:center;
    gap:18px;
}

.phone {
    font-size:13px;
    position:relative;
    padding-left:22px;
    color:#092d60;
}

.phone b {
    display:block;
}

.phone small {
    display:block;
    font-size:10px;
    color:#777;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:5px;
    padding:14px 22px;
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
}

.orange {
    background:#f58220;
    color:#fff;
    box-shadow:0 3px 8px #f5822030;
}

.outline {
    border:1px solid #fff;
    color:#fff;
    background:#0b315d55;
}

.outline-dark {
    border:1px solid #153c6c;
    color:#153c6c;
}

.menu {
    display:none;
    background:none;
    border:0;
    font-size:24px;
}

.hero {
    height:430px;
    position:relative;
    overflow:hidden;
    background:#092d5b;
}

.hero-image {
    position:absolute;
    right:0;
    top:0;
    width:72%;
    height:100%;
}

.hero-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#082c61 0%,#082c61e8 15%,#082c6155 55%,transparent 75%);
}

.hero-content {
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
}

.hero-copy {
    width:56%;
    padding-top:5px;
}

.eyebrow {
    font-size:12px;
    letter-spacing:1.5px;
    font-weight:700;
    color:#fff;
    margin-bottom:7px;
}

.eyebrow.dark {
    color:#153c6c;
}

.hero h1 {
    font-family:'Playfair Display',Georgia,serif;
    font-size:58px;
    line-height:.88;
    margin:8px 0 15px;
}

.hero h1 span {
    color:#f58220;
}

.hero-copy>p {
    font-size:15px;
    line-height:1.45;
    max-width:430px;
    margin:0 0 16px;
}

.features {
    display:flex;
    gap:23px;
    margin-bottom:18px;
}

.features span {
    font-size:17px;
}

.features b,.features small {
    display:block;
    margin-left:18px;
    font-size:12px;
}

.features small {
    font-size:10px;
    color:#ddd;
}

.features span> b {
    margin-top:-15px;
}

.actions {
    display:flex;
    gap:12px;
}

.hero-side {
    width:24%;
    height:83%;
    border-left:1px solid #ffffff55;
    padding:20px 15px 10px 32px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.hero-side h3 {
    font-family:'Playfair Display',Georgia,serif;
    font-size:27px;
    line-height:1.03;
    margin:0;
}

.side-points {
    display:flex;
    flex-direction:column;
    gap:9px;
    font-size:12px;
}

.stats {
    height:75px;
    background:#fff;
}

.stats-grid {
    height:100%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
}

.stats-grid>div {
    display:grid;
    grid-template-columns:45px auto;
    grid-template-rows:1fr 1fr;
    column-gap:6px;
    padding:0 25px;
    border-right:1px solid #aab3c1;
}

.stats-grid>div:last-child {
    border:0;
}

.stats-grid strong {
    grid-row:1/3;
    font-size:30px;
    align-self:center;
}

.stats-grid b {
    font-size:23px;
    align-self:end;
}

.stats-grid small {
    font-size:11px;
    color:#5c6470;
}

.section {
    padding:26px 0;
}

/* ==========================================================
   SERVICES SECTION
   Reference UI — Left Content + 6 Cards
========================================================== */

.services {
    width: 100%;
    background: #f1f7ff;
    padding: 16px 0 18px;
}

/* Main two-column layout */
.services .service-layout {
    display: grid;
    grid-template-columns: 27% 73%;
    gap: 22px;
    align-items: center;
}


/* ==========================================================
   LEFT — SERVICES INTRO
========================================================== */

.services .intro {
    padding-left: 2px;
}

.services .intro .eyebrow {
    margin: 0 0 8px;
    color: #143e73;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1;
}

.services .intro h2 {
    margin: 0 0 12px;

    color: #0b3770;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
}

.services .intro h2 span {
    display: block;
    color: #f58220;
}

.services .intro p {
    max-width: 310px;
    margin: 0;

    color: #536274;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.services .text-link {
    display: inline-block;

    margin-top: 17px;

    color: #123d70;
    font-size: 11px;
    font-weight: 800;

    border-bottom: 1px solid #f58220;
    padding-bottom: 3px;
}


/* ==========================================================
   RIGHT — SERVICE CARDS
========================================================== */

.services .cards {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;

    align-items: stretch;
}


/* Individual card */

.services .card {
    position: relative;

    width: 100%;
    height: 190px;

    background: #ffffff;

    border-radius: 7px;
    overflow: hidden;

    box-shadow: 0 2px 8px rgba(15, 55, 95, 0.12);
}


/* Card image */

.services .card img {
    display: block;

    width: 100%;
    height: 108px;

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

    border-radius: 0;
}


/* Card title */

.services .card h3 {
    margin: 7px 7px 4px;

    color: #10396c;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}


/* Card description */

.services .card p {
    margin: 0 20px 20px 7px;

    color: #687382;

    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.35;
}


/* Circular arrow */

.services .card i {
    position: absolute;

    right: 6px;
    bottom: 7px;

    width: 18px;
    height: 18px;

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

    border: 1px solid #7c8ea3;
    border-radius: 50%;

    color: #163e70;
    background: #fff;

    font-size: 10px;
    font-style: normal;
    line-height: 1;
}


/* ==========================================================
   DESKTOP — REFERENCE SIZE
========================================================== */

@media (min-width: 1201px) {

    .services {
        padding: 16px 0 18px;
    }

    .services .service-layout {
        grid-template-columns: 27% 73%;
        gap: 20px;
    }

    .services .intro h2 {
        font-size: 29px;
    }

    .services .intro p {
        max-width: 315px;
        font-size: 12px;
    }

    .services .cards {
        gap: 10px;
    }

    .services .card {
        height: 190px;
    }

    .services .card img {
        height: 108px;
    }
}


/* ==========================================================
   1024–1200px
   Keep all 6 cards in ONE ROW
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .services {
        padding: 13px 0 15px;
    }

    .services .service-layout {
        grid-template-columns: 25% 75%;
        gap: 14px;
    }

    .services .intro h2 {
        font-size: 23px;
    }

    .services .intro p {
        max-width: 230px;
        font-size: 9px;
    }

    .services .text-link {
        font-size: 9px;
        margin-top: 11px;
    }

    .services .cards {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
    }

    .services .card {
        height: 155px;
    }

    .services .card img {
        height: 82px;
    }

    .services .card h3 {
        font-size: 8px;
        margin: 5px 5px 3px;
    }

    .services .card p {
        font-size: 6.5px;
        margin: 0 12px 15px 5px;
    }

    .services .card i {
        width: 14px;
        height: 14px;
        right: 4px;
        bottom: 5px;
        font-size: 7px;
    }
}


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

@media (max-width: 900px) {

    .services {
        padding: 25px 0;
    }

    .services .service-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .services .intro h2 {
        font-size: 25px;
    }

    .services .intro p {
        max-width: 450px;
        font-size: 11px;
    }

    .services .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .services .card {
        height: 205px;
    }

    .services .card img {
        height: 125px;
    }

    .services .card h3 {
        font-size: 11px;
    }

    .services .card p {
        font-size: 9px;
    }
}
.intro h2,.why h2,.process h2,.about h2,.testimonials h2 {
    font-size:22px;
    line-height:1.05;
    margin:8px 0 13px;
    color:#0c3771;
}

.intro h2 span {
    color:#f58220;
}

.intro p,.why-intro p,.about-copy p {
    font-size:13px;
    line-height:1.5;
    color:#4d5b6b;
}

.text-link {
    display:inline-block;
    color:#0b3466;
    font-weight:700;
    font-size:12px;
    margin-top:12px;
}

.cards {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
}

.card {
    position:relative;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px #0c377115;
    min-width:0;
}

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

.card h3 {
    font-size:13px;
    margin:8px 8px 4px;
}

.card p {
    font-size:11px;
    color:#687382;
    line-height:1.35;
    margin:0 20px 22px 8px;
}

.card i {
    position:absolute;
    right:7px;
    bottom:8px;
    border:1px solid #7890aa;
    border-radius:50%;
    width:18px;
    height:18px;
    text-align:center;
    line-height:16px;
    font-style:normal;
    font-size:10px;
}

.industries {
    width:100%;
    background:#092f5c;
    color:#fff;
    padding:12px 0 14px;
    overflow:hidden;
}

.industries .industry-wrap {
    width:min(1650px,94%);
    max-width:1650px;
    margin:0 auto;
    display:grid;
    grid-template-columns:370px minmax(0,1fr);
    gap:30px;
    align-items:center;
}

.industry-title {
    padding-left:4px;
}

.industry-title .eyebrow {
    font-size:12px;
    letter-spacing:1.4px;
    font-weight:700;
    line-height:1;
    color:#fff;
    margin:0 0 10px;
}

.industry-title h2 {
    font-family:'Playfair Display',Georgia,serif;
    font-size:36px;
    line-height:1.03;
    font-weight:700;
    color:#fff;
    margin:0;
}

.industry-grid {
    position:relative;
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:16px;
    align-items:start;
    padding-right:56px;
}

.industry-grid div {
    min-width:0;
    text-align:center;
}

.industry-grid img {
    display:block;
    width:100%;
    height:105px;
    object-fit:cover;
    object-position:center;
    border-radius:7px;
}

.industry-grid b {
    display:block;
    margin-top:7px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1.12;
    text-align:center;
}

.industry-grid::after {
    content:'←\A↓';
    white-space:pre;
    position:absolute;
    right:2px;
    top:16px;
    width:38px;
    height:76px;
    border-radius:7px;
    background:
        radial-gradient(circle at 50% 25%,#f58220 0 17px,transparent 18px),
        radial-gradient(circle at 50% 78%,transparent 0 17px,#fff 18px 19px,transparent 20px);
    color:#fff;
    font-size:18px;
    font-weight:700;
    line-height:38px;
    text-align:center;
    pointer-events:none;
}

@media (min-width:1101px) and (max-width:1450px) {
    .industries .industry-wrap {
        width:94%;
        grid-template-columns:300px minmax(0,1fr);
        gap:24px;
    }

    .industry-title h2 {
        font-size:31px;
    }

    .industry-grid {
        gap:10px;
        padding-right:48px;
    }

    .industry-grid img {
        height:88px;
    }

    .industry-grid b {
        font-size:11px;
    }

    .industry-grid::after {
        right:0;
        top:6px;
        transform:scale(.9);
        transform-origin:top right;
    }
}

@media (max-width:1100px) {
    .industries {
        padding:24px 0;
    }

    .industries .industry-wrap {
        width:94%;
        grid-template-columns:1fr;
        gap:22px;
    }

    .industry-title h2 {
        font-size:32px;
    }

    .industry-grid {
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:15px;
        padding-right:0;
    }

    .industry-grid img {
        height:100px;
    }

    .industry-grid b {
        font-size:12px;
    }

    .industry-grid::after {
        display:none;
    }
}

@media (max-width:600px) {
    .industries .industry-wrap {
        width:92%;
    }

    .industry-title h2 {
        font-size:28px;
    }

    .industry-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:15px;
    }

    .industry-grid img {
        height:120px;
    }

    .industry-grid b {
        font-size:12px;
    }
}

/* ==========================================================
   6. WHY BUSINESSES CHOOSE US
   Reference Template
========================================================== */

.why {
    width: 100%;
    background: #f3f8fe;
    padding: 20px 0 18px;
}

.why .why-grid {
    display: grid;
    grid-template-columns: 29% 71%;
    align-items: stretch;
    gap: 0;
}


/* ==========================================================
   LEFT INTRO
========================================================== */

.why-intro {
    padding: 0 22px 0 2px;
}

.why-intro .eyebrow {
    margin: 0 0 8px;

    color: #103d73;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1;
}

.why-intro h2 {
    margin: 0 0 10px;

    color: #0b3972;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.05;
}

.why-intro p {
    max-width: 390px;
    margin: 0;

    color: #536579;
    font-size: 10px;
    line-height: 1.45;
}

.why-intro .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 14px;

    min-width: 135px;
    height: 36px;

    padding: 0 16px;

    font-size: 10px;
    font-weight: 800;
}


/* ==========================================================
   RIGHT FEATURES
========================================================== */

.why-items {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    min-height: 155px;

    border-left: 1px solid #d5dfe9;
}


/* ==========================================================
   FEATURE ITEM
========================================================== */

.why-items > div {
    min-width: 0;

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

    text-align: center;

    border-right: 1px solid #d5dfe9;
}

.why-items > div:last-child {
    border-right: none;
}


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

.why-items b {
    width: 48px;
    height: 48px;

    margin-bottom: 10px;

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

    border-radius: 50%;

    background: #e7eff9;

    color: #0a3971;

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

    line-height: 1;
}


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

.why-items strong {
    color: #0b3972;

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

    line-height: 1.15;

    text-align: center;
}


/* ==========================================================
   DESKTOP 1201px+
========================================================== */

@media (min-width: 1201px) {

    .why {
        padding: 20px 0 18px;
    }

    .why .why-grid {
        grid-template-columns: 29% 71%;
    }

    .why-intro h2 {
        font-size: 26px;
    }

    .why-intro p {
        font-size: 11.05px;
    }

    .why-items {
        min-height: 155px;
    }

    .why-items b {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .why-items strong {
        font-size: 11px;
    }
}


/* ==========================================================
   901px – 1200px
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .why {
        padding: 15px 0 14px;
    }

    .why .why-grid {
        grid-template-columns: 28% 72%;
    }

    .why-intro {
        padding-right: 14px;
    }

    .why-intro .eyebrow {
        font-size: 8px;
    }

    .why-intro h2 {
        font-size: 20px;
        line-height: 1.05;
    }

    .why-intro p {
        font-size: 8px;
    }

    .why-intro .btn {
        height: 30px;
        min-width: 110px;
        font-size: 8px;
        margin-top: 10px;
    }

    .why-items {
        min-height: 125px;
    }

    .why-items b {
        width: 38px;
        height: 38px;

        margin-bottom: 7px;

        font-size: 18px;
    }

    .why-items strong {
        font-size: 8px;
    }
}


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

@media (max-width: 900px) {

    .why {
        padding: 25px 0;
    }

    .why .why-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .why-intro {
        padding: 0;
    }

    .why-intro h2 {
        font-size: 27px;
    }

    .why-intro p {
        max-width: 500px;
        font-size: 11px;
    }

    .why-items {
        grid-template-columns: repeat(3, 1fr);

        border-left: none;

        min-height: auto;
    }

    .why-items > div {
        min-height: 120px;
        border-bottom: 1px solid #d5dfe9;
    }

    .why-items b {
        width: 45px;
        height: 45px;
    }
}


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

@media (max-width: 600px) {

    .why-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-items strong {
        font-size: 10px;
    }
}

/* ==========================================================
   7. OUR PROCESS SECTION
   FINAL REFERENCE MATCH
========================================================== */

.process {
    width: 100%;
    background: #fff;
    padding: 16px 0 14px;
    overflow: hidden;
}

.process .process-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 26% 74%;
    align-items: start;
    gap: 0;
}


/* =========================
   LEFT INTRO
========================= */

.process-intro {
     padding: 3px 22px 0 18px;
}

.process-intro .eyebrow {
    margin: 2 0 8px;
    color: #123d70;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1;
}

.process-intro h2 {
    margin: 0;
    color: #0b3972;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.08;
}


/* =========================
   FIVE STEPS
========================= */

.process-steps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
}

.process-steps > div {
    position: relative;
    min-width: 0;
    height: 118px;
    padding: 0 8px;
    text-align: left;
}


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

.process-steps > div > b {
    position: relative;
    z-index: 3;

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

    width: 38px;
    height: 38px;
    margin: 5;

    border-radius: 50%;
    background: #f58220;
    color: #fff;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}


/* =========================
   TOP ORANGE LINE + ARROW
========================= */

.process-steps > div:not(:last-child)::after {
    content: "→";

    position: absolute;
    z-index: 1;

    top: 0;
    left: 66px;

    width: calc(100% - 78px);

    border-top: 1px solid #f58220;

    color: #f58220;
    font-size: 22px;
    font-weight: 400;
    line-height: 31px;

    text-align: right;
}


/* =========================
   ICON
   Works when <i> exists.
========================= */

.process-steps > div > i {
    display: block;

    width: 25px;
    height: 22px;

    margin: 5px 0 3px 47px;

    color: #0b3972;
    font-size: 15px;
    font-style: normal;
    line-height: 22px;
}


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

.process-steps > div > strong {
    display: block;

    margin: 0 0 4px;

    color: #123d70;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}


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

.process-steps > div > span {
    display: block;

    max-width: 155px;

    color: #697686;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.28;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1201px) {

    .process {
        padding: 17px 0 15px;
    }

    .process .process-grid {
        grid-template-columns: 26% 74%;
    }

    .process-intro {
        padding-right: 20px;
    }

    .process-intro .eyebrow {
        font-size: 9px;
    }

    .process-intro h2 {
        font-size: 26px;
    }

    .process-steps > div {
        height: 122px;
        padding: 0 9px;
    }

    .process-steps > div > b {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

/* ==========================================================
   PROCESS ARROW — REFERENCE STYLE
========================================================== */

.process-steps > div:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 18px;
    left: 64px;

    width: calc(100% - 82px);
    height: 1px;

    background: #f58220;
    border: 0;

    font-size: 0;
    line-height: 0;
}


/* Small arrow head */
.process-steps > div:not(:last-child)::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 14px;
    right: 17px;

    width: 7px;
    height: 7px;

    border-top: 1.5px solid #f58220;
    border-right: 1.5px solid #f58220;

    transform: rotate(45deg);
}

    .process-steps > div > i {
        margin-left: 49px;
        margin-top: 5px;
    }

    .process-steps > div > strong {
        font-size: 12px;
    }

    .process-steps > div > span {
        max-width: 160px;
        font-size: 10px;
    }
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .process {
        padding: 13px 0 12px;
    }

    .process .process-grid {
        grid-template-columns: 26% 74%;
    }

    .process-intro {
        padding-right: 10px;
    }

    .process-intro .eyebrow {
        font-size: 8px;
    }

    .process-intro h2 {
        font-size: 21px;
    }

    .process-steps > div {
        height: 98px;
        padding: 0 5px;
    }

    .process-steps > div > b {
        width: 31px;
        height: 31px;
        font-size: 9px;
    }

    .process-steps > div:not(:last-child)::after {
        left: 52px;
        width: calc(100% - 63px);
        font-size: 18px;
        line-height: 26px;
    }

    .process-steps > div > i {
        margin: 3px 0 2px 38px;
        font-size: 12px;
    }

    .process-steps > div > strong {
        font-size: 8px;
    }

    .process-steps > div > span {
        max-width: 120px;
        font-size: 6.5px;
    }
}


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

@media (max-width: 900px) {

    .process {
        padding: 24px 0;
    }

    .process .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-intro {
        padding: 0;
    }

    .process-intro h2 {
        font-size: 27px;
    }

    .process-steps {
        grid-template-columns: repeat(5, 125px);
        overflow-x: auto;
        padding-bottom: 7px;
    }

    .process-steps > div {
        min-width: 125px;
        height: 112px;
    }

    .process-steps > div > b {
        width: 34px;
        height: 34px;
        font-size: 10px;
    }

    .process-steps > div:not(:last-child)::after {
        left: 57px;
        width: calc(100% - 70px);
        font-size: 19px;
    }

    .process-steps > div > strong {
        font-size: 10px;
    }

    .process-steps > div > span {
        max-width: 115px;
        font-size: 8px;
    }
}

@media (max-width: 600px) {
    .process-steps {
        grid-template-columns: repeat(5, 125px);
    }
}

/* ==========================================================
   8. ABOUT SM MANPOWER SERVICES
   Reference layout:
   LEFT  = Building image
   CENTER = About content
   RIGHT = Quote card
========================================================== */

.about {
    width: 100%;
    padding: 10px 24px 12px;
    background: #ffffff;
    overflow: hidden;
}

.about-grid {
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: 40% 40% 20%;
    gap: 0;
    align-items: stretch;
}

/* ==========================================================
   LEFT — BUILDING IMAGE
========================================================== */

.about-photo {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 4px;
}

.about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark bottom gradient */
.about-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 48%,
        rgba(3, 25, 55, .18) 65%,
        rgba(3, 25, 55, .82) 100%
    );
    pointer-events: none;
}

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

.photo-caption {
    position: absolute;
    z-index: 3;
    left: 48px;
    bottom: 28px;
    color: #ffffff;
    font-size: 32px;
    font-weight: 800;
    line-height: .96;
    margin: 0;
}

.photo-caption span {
    color: #ffffff;
}

/* ==========================================================
   WATCH OUR STORY
========================================================== */

.watch {
    position: absolute;
    z-index: 4;
    left: 330px;
    bottom: 31px;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* ==========================================================
   CENTER — ABOUT COPY
========================================================== */

.about-copy {
    min-width: 0;
    padding: 12px 40px 0 40px;
}

.about-copy .eyebrow {
    margin: 0 0 8px;
    color: #123d70;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1;
}

.about-copy h2 {
    margin: 0 0 11px;
    color: #0b3972;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.05;
}

.about-copy p {
    margin: 0 0 15px;
    color: #536579;
    font-size: 12px;
    line-height: 1.38;
}

/* ==========================================================
   ABOUT STATISTICS
========================================================== */

.about-stats {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 13px 0 14px;
}

.about-stats > div {
    padding: 0 25px 0 0;
    margin-right: 24px;
    border-right: 1px solid #d5dde7;
}

.about-stats > div:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}

.about-stats b {
    display: block;
    margin: 0 0 3px;
    color: #0b3972;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.about-stats small {
    display: block;
    color: #677384;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ==========================================================
   KNOW MORE BUTTON
========================================================== */

.about-copy .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 0 17px;
    border: 1px solid #123d70;
    border-radius: 4px;
    color: #123d70;
    background: #ffffff;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

/* ==========================================================
   RIGHT — QUOTE
========================================================== */

.about-grid blockquote {
    min-width: 0;
    height: 300px;
    margin: 0 0 0 8px;
    padding: 26px 35px 20px;
    background: #eef5fc;
    border: 0;
    border-radius: 4px;
    color: #173e70;
}

.about-grid blockquote > span {
    display: block;
    margin: 0 0 10px;
    color: #f58220;
    font-family: Georgia, serif;
    font-size: 46px;
    font-weight: 700;
    line-height: .55;
}

.about-grid blockquote p {
    margin: 0 0 22px;
    color: #536579;
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42;
}

.about-grid blockquote strong {
    display: block;
    margin: 0 0 3px;
    color: #123d70;
    font-size: 11px;
    font-weight: 800;
}

.about-grid blockquote small {
    display: block;
    color: #687686;
    font-size: 9px;
}

/* ==========================================================
   ABOUT — DESKTOP 1201px+
========================================================== */

@media (min-width: 1201px) {

    .about {
        padding: 10px 24px 12px;
    }

    .about-grid {
        grid-template-columns: 40% 40% 20%;
    }

    .about-photo,
    .about-grid blockquote {
        height: 300px;
    }

    .photo-caption {
        left: 48px;
        bottom: 28px;
        font-size: 32px;
    }

    .watch {
        left: 330px;
        bottom: 31px;
        font-size: 13px;
    }

    .about-copy {
        padding: 12px 40px 0;
    }

    .about-copy h2 {
        font-size: 27px;
    }

    .about-copy p {
        font-size: 12px;
    }
}

/* ==========================================================
   ABOUT — LAPTOP 901px–1200px
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .about {
        padding: 10px 18px;
    }

    .about-grid {
        grid-template-columns: 40% 40% 20%;
    }

    .about-photo,
    .about-grid blockquote {
        height: 235px;
    }

    .photo-caption {
        left: 25px;
        bottom: 22px;
        font-size: 25px;
    }

    .watch {
        left: 225px;
        bottom: 24px;
        font-size: 10px;
    }

    .about-copy {
        padding: 10px 22px 0;
    }

    .about-copy .eyebrow {
        font-size: 8px;
    }

    .about-copy h2 {
        font-size: 21px;
    }

    .about-copy p {
        font-size: 9px;
    }

    .about-stats {
        margin: 10px 0 11px;
    }

    .about-stats > div {
        padding-right: 13px;
        margin-right: 13px;
    }

    .about-stats b {
        font-size: 16px;
    }

    .about-stats small {
        font-size: 7px;
    }

    .about-copy .btn {
        min-height: 31px;
        padding: 0 12px;
        font-size: 8px;
    }

    .about-grid blockquote {
        margin-left: 5px;
        padding: 20px 18px;
    }

    .about-grid blockquote > span {
        font-size: 36px;
    }

    .about-grid blockquote p {
        font-size: 9px;
    }

    .about-grid blockquote strong {
        font-size: 8px;
    }

    .about-grid blockquote small {
        font-size: 7px;
    }
}

/* ==========================================================
   ABOUT — MOBILE
========================================================== */

@media (max-width: 900px) {

    .about {
        padding: 24px 0;
    }

    .about-grid {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-photo {
        height: 300px;
        border-radius: 4px;
    }

    .photo-caption {
        left: 25px;
        bottom: 25px;
        font-size: 30px;
    }

    .watch {
        left: auto;
        right: 25px;
        bottom: 28px;
        font-size: 12px;
    }

    .about-copy {
        padding: 0 20px;
    }

    .about-copy h2 {
        font-size: 27px;
    }

    .about-copy p {
        font-size: 12px;
    }

    .about-stats {
        flex-wrap: wrap;
        gap: 15px;
    }

    .about-grid blockquote {
        height: auto;
        margin: 0;
        padding: 25px;
    }
}
/* ==========================================================
   CTA SECTION - FINAL REFERENCE POSITION
========================================================== */

.cta {
    position: relative !important;
    width: 100% !important;
    height: 155px !important;
    min-height: 155px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Background image */
.cta-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.cta-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Overlay */
.cta-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
}

/* ==========================================================
   CONTENT
========================================================== */

.cta-content {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    height: 155px !important;
    min-height: 155px !important;

    max-width: 1250px !important;
    margin: 0 auto !important;

    padding: 0 15px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
}


/* ==========================================================
   CENTER TEXT BLOCK
========================================================== */

.cta-content > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    margin-left: 350px !important;
    height: 155px !important;
}

.cta-content .eyebrow {
    margin: 0 0 4px !important;

    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 1.2px !important;
}

.cta-content h2 {
    margin: 0 0 5px !important;

    font-size: 23px !important;
    line-height: 1.1 !important;
}

.cta-content p {
    margin: 0 0 7px !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
}

.cta-points {
    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}


/* ==========================================================
   REQUEST MANPOWER BUTTON
========================================================== */

.cta-content > .btn {
    align-self: start !important;

    margin-top: 18px !important;
    margin-right: 35px !important;

    min-width: 210px !important;
    height: 55px !important;

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

    white-space: nowrap !important;

    font-size: 13px !important;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .cta {
        height: 125px !important;
        min-height: 125px !important;
    }

    .cta-content {
        height: 125px !important;
        min-height: 125px !important;
    }

    .cta-content > div:first-child {
        margin-left: 260px !important;
        height: 125px !important;
    }

    .cta-content h2 {
        font-size: 18px !important;
    }

    .cta-content p {
        font-size: 8px !important;
    }

    .cta-points {
        font-size: 7px !important;
    }

    .cta-content > .btn {
        min-width: 165px !important;
        height: 42px !important;
        margin-top: 12px !important;
        margin-right: 20px !important;
        font-size: 10px !important;
    }
}


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

@media (max-width: 900px) {

    .cta {
        height: auto !important;
        min-height: 180px !important;
    }

    .cta-content {
        height: auto !important;
        min-height: 180px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        padding: 25px 20px !important;
    }

    .cta-content > div:first-child {
        margin-left: 0 !important;
        height: auto !important;
    }

    .cta-content h2 {
        font-size: 20px !important;
    }

    .cta-content p {
        font-size: 10px !important;
    }

    .cta-points {
        white-space: normal !important;
        font-size: 8px !important;
    }

    .cta-content > .btn {
        align-self: flex-start !important;
        margin: 15px 0 0 !important;
        min-width: 170px !important;
        height: 42px !important;
    }
}

/* =========================================================
   TESTIMONIALS - FINAL FIX
   ========================================================= */

.testimonials {
    border-top: none !important;
    border-bottom: none !important;

    padding: 12px 0 14px !important;
    background: #ffffff;
    overflow: visible !important;
}


/* MAIN ROW */
.testimonial-grid {
    display: grid !important;

    grid-template-columns: 310px 1fr 1fr 70px !important;

    align-items: center !important;

    gap: 24px !important;

    padding: 0 30px !important;

    max-width: 1400px !important;
    margin: 0 auto !important;

    box-sizing: border-box;
}


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

.test-title {
    padding: 0 !important;
    margin: 0 !important;
}

.test-title .eyebrow {
    margin-bottom: 9px !important;
}

.test-title h2 {
    margin: 0 !important;

    font-size: 27px !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;

    color: #073b78 !important;
}


/* =========================================================
   TESTIMONIAL CARDS
   ========================================================= */

.testimonial-grid article {
    width: 100% !important;

    /* IMPORTANT: fixed 104px hata diya */
    height: 118px !important;
    min-height: 118px !important;

    padding: 13px 28px 12px !important;

    box-sizing: border-box !important;

    border: 1px solid #d8e1ec !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: visible !important;

    box-shadow: 0 2px 7px rgba(8,45,85,.04) !important;
}


/* =========================================================
   QUOTE
   ========================================================= */

.testimonial-grid article > span {
    height: 18px !important;

    margin: 0 0 5px !important;

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

    color: #ff7418 !important;
}


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

.testimonial-grid article p {
    margin: 0 0 6px !important;

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

    color: #536c89 !important;
}


/* =========================================================
   NAME
   ========================================================= */

.testimonial-grid article b {
    margin-top: auto !important;

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

    color: #073b78 !important;
}


/* =========================================================
   DESIGNATION
   ========================================================= */

.testimonial-grid article small {
    margin-top: 2px !important;

    font-size: 12px !important;
    line-height: 1.15 !important;

    color: #5d7691 !important;
}


/* =========================================================
   RIGHT ARROWS
   ========================================================= */

.testimonial-grid::after {
    content: "‹   ›" !important;

    width: 60px !important;
    height: 40px !important;

    display: flex !important;

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

    color: #0b477f !important;

    font-size: 27px !important;
    font-weight: 400 !important;

    letter-spacing: 5px !important;
}


/* =========================================================
   REMOVE ANY EXTRA TOP LINE
   ========================================================= */

.testimonials::before,
.testimonials::after {
    border: none !important;
    box-shadow: none !important;
}


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

@media (max-width: 1100px) {

    .testimonial-grid {
        grid-template-columns: 250px 1fr 1fr 50px !important;
        gap: 15px !important;
        padding: 0 18px !important;
    }

    .test-title h2 {
        font-size: 23px !important;
    }

    .testimonial-grid article {
        height: 112px !important;
        min-height: 112px !important;

        padding: 12px 17px !important;
    }

    .testimonial-grid article p {
        font-size: 12px !important;
    }
}


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

@media (max-width: 800px) {

    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .testimonial-grid article {
        height: auto !important;
        min-height: 115px !important;
    }

    .testimonial-grid::after {
        display: none !important;
    }
}

footer {
    background:#062a53;
    color:#fff;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr 1.3fr 1.2fr 1.4fr;
    gap:30px;
    padding:25px 0 20px;
}

.footer-brand img {
    width:190px;
    height:32px;
    object-fit:cover;
    object-position:left;
    filter:brightness(0) invert(1) grayscale(1);
    margin-bottom:15px;
}

.social {
    font-size:24px;
}

.footer-grid h4 {
    font-size:16px;
    margin:0 0 9px;
}

.footer-grid a,.footer-grid p {
    display:block;
    color:#d5dfeb;
    text-decoration:none;
    font-size:13px;
    line-height:1.55;
    margin:0;
}

.newsletter {
    display:flex;
    margin-top:10px;
}

.newsletter input {
    height:34px;
    border:0;
    padding:0 10px;
    width:100%;
    font-size:11px;
}

.newsletter button {
    width:36px;
    background:#f58220;
    color:#fff;
    border:0;
}

.copyright {
    border-top:1px solid #365374;
    display:flex;
    justify-content:space-between;
    padding:10px 3%;
    font-size:13px;
    color:#cad6e3;
}

.show {
    display:flex!important;
}

@media(max-width:1050px) {
    .nav nav{gap:11px}.nav nav a{font-size:9px}.head-right .phone{display:none}.hero h1{font-size:45px}.cards{grid-template-columns:repeat(3,1fr)}.service-layout,.industry-wrap,.why-grid,.process-grid{grid-template-columns:1fr}.intro{max-width:500px}.industry-grid{grid-template-columns:repeat(4,1fr);
    gap:15px}.industry-grid img{height:100px}.industry-grid b{font-size:12px}.why-items{min-height:140px}.about-grid{grid-template-columns:1fr 1fr}.about blockquote{display:none};
}

@media(max-width:720px) {
    .header,.nav{height:62px}.brand img{width:190px;
    height:31px}.nav nav{display:none;
    position:absolute;
    top:62px;
    left:0;
    right:0;
    background:#fff;
    padding:15px;
    flex-direction:column;
    gap:14px;
    box-shadow:0 5px 12px #0002}.menu{display:block}.hero{height:520px}.hero-image{width:100%;
    height:62%;
    top:auto;
    bottom:0}.hero-overlay{background:linear-gradient(180deg,#082c61 0%,#082c61ed 38%,#082c6160 65%,transparent 100%)}.hero-content{align-items:flex-start;
    padding-top:30px}.hero-copy{width:100%}.hero h1{font-size:43px}.hero-side{display:none}.features{gap:10px;
    flex-wrap:wrap}.stats{height:auto}.stats-grid{grid-template-columns:repeat(2,1fr);
    padding:12px 0}.stats-grid>div{padding:10px;
    border-bottom:1px solid #ccd5df}.stats-grid>div:last-child{grid-column:span 2}.cards{grid-template-columns:repeat(2,1fr)}.industry-grid{grid-template-columns:repeat(4,1fr);
    gap:15px}.industry-grid img{height:100px}.industry-grid b{font-size:12px}.why-items{grid-template-columns:repeat(3,1fr);
    gap:15px}.why-items>div{min-height:85px}.steps{grid-template-columns:1fr}.steps>div:not(:last-child):after{content:'↓';
    right:50%;
    top:auto;
    bottom:-22px}.about-grid{grid-template-columns:1fr}.about-photo{height:230px}.about-copy{padding:20px}.cta{height:auto;
    min-height:190px}.cta-content{padding:25px 0;
    gap:15px;
    align-items:flex-start;
    flex-direction:column}.testimonial-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;
    gap:20px}.copyright{flex-direction:column;
    gap:6px}.head-right{display:none};
}

@media (min-width:721px) and (max-width:1100px) {
    body{font-size:15px}
  .nav{gap:12px}
  .brand img{width:205px}
  .nav nav{gap:12px}
  .nav nav a{font-size:11px}
  .head-right .btn{font-size:12px;
    padding:12px 15px}
  .hero h1{font-size:52px}
  .hero-copy>p{font-size:14px}
  .features b{font-size:11px}
  .features small{font-size:9px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card h3{font-size:14px}
  .card p{font-size:11px};
}

/* ==========================================================
   SM MANPOWER HEADER — CLEAN DESKTOP LAYOUT
   Root files: index.html + style.css + assets/
   ========================================================== */

@media (min-width: 1101px) {
    .header {
        width: 100%;
    height: 76px;
    background: #fff;
    border-bottom: 1px solid #e7eaf0;
    position: sticky;
    top: 0;
    z-index: 1000;
    }

    /* IMPORTANT: header uses full browser width.
       Other .container sections keep their existing width. */
    .header .container.nav {
        width: 100%;
    max-width: none;
    height: 76px;
    margin: 0;
    padding: 0 36px;
    display: flex;
    align-items: center;
    gap: 0;
    }

    .header .brand {
        flex: 0 0 390px;
    width: 390px;
    height: 76px;
    display: flex;
    align-items: center;
    }

    .header .brand img {
        width: 350px;
    height: 58px;
    object-fit: contain;
    object-position: left center;
    display: block;
    }

    .header .nav nav {
        flex: 1 1 auto;
    min-width: 0;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    padding: 0 8px;
    margin: 0;
    }

    .header .nav nav a {
        color: #092d60;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    }

    .header .nav nav a.active {
        padding: 30px 0 22px;
    border-bottom: 3px solid #f58220;
    }

    .header .nav nav .search {
        font-size: 21px !important;
    margin-left: 0;
    }

    .header .head-right {
        flex: 0 0 auto;
    height: 76px;
    display: flex;
    align-items: center;
    gap: 20px;
    }

    .header .phone {
        min-width: 180px;
    padding-left: 31px;
    position: relative;
    color: #092d60;
    line-height: 1.15;
    white-space: nowrap;
    font-size: 13px;
    }

    .header .phone::before {
        content: "☎";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 23px;
    line-height: 1;
    }

    .header .phone b {
        display: block;
    font-size: 14px;
    font-weight: 700;
    }

    .header .phone small {
        display: block;
    margin-top: 4px;
    font-size: 9px;
    color: #6b7480;
    }

    .header .head-right .btn {
        flex: 0 0 220px;
    width: 220px;
    height: 52px;
    padding: 0 20px;
    font-size: 14px;
    }

    .header .menu {
        display: none;
    };
}

/* Smaller desktop / laptop */
@media (min-width: 1101px) and (max-width: 1450px) {
    .header .container.nav {
        padding: 0 22px;
    }

    .header .brand {
        flex-basis: 285px;
    width: 285px;
    }

    .header .brand img {
        width: 265px;
    }

    .header .nav nav {
        gap: 15px;
    padding: 0 5px;
    }

    .header .nav nav a {
        font-size: 12px;
    }

    .header .head-right {
        gap: 12px;
    }

    .header .phone {
        min-width: 145px;
    padding-left: 27px;
    }

    .header .phone b {
        font-size: 12px;
    }

    .header .head-right .btn {
        flex-basis: 170px;
    width: 170px;
    font-size: 12px;
    };
}

/* =========================
   STATS SECTION
========================= */

.stats {
    width: 100%;
    height: 76px;
    background: #ffffff;
    border-bottom: 1px solid #e5eaf0;
}

.stats-grid {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
}

.stat-item {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-right: 1px solid #aeb8c5;
}

.stat-item:last-child {
    border-right: none;
}

.stat-icon {
    color: #092f5c;
    font-size: 30px;
    line-height: 1;
    min-width: 38px;
    text-align: center;
}

.stat-item strong {
    display: block;
    color: #092f5c;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.stat-item span {
    display: block;
    color: #596676;
    font-size: 9px;
    margin-top: 3px;
    white-space: nowrap;
}


/* TABLET */

@media (max-width: 1100px) {

    .stats {
        height: 68px;
    }

    .stat-item {
        gap: 6px;
    }

    .stat-icon {
        font-size: 25px;
        min-width: 30px;
    }

    .stat-item strong {
        font-size: 17px;
    }

    .stat-item span {
        font-size: 7px;
    }
}


/* MOBILE */

@media (max-width: 700px) {

    .stats {
        height: auto;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 8px 0;
    }

    .stat-item {
        height: 58px;
        border-right: 1px solid #d5dce5;
        border-bottom: 1px solid #d5dce5;
    }

    .stat-item:nth-child(2n) {
        border-right: none;
    }

    .stat-item:last-child {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: none;
    }
}


/* ==========================================================
   PROCESS BLUE ICON
========================================================== */

.process-icon {
    display: block;

    width: 25px;
    height: 24px;

    margin: 6px 0 4px 47px;

    color: #0b3972;
}

.process-icon svg {
    width: 22px;
    height: 22px;

    display: block;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Description */
.process-desc {
    display: block;

    max-width: 155px;

    color: #697686;

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

    line-height: 1.28;
}
/* ==========================================================
   ABOUT STATS + BUTTON — REFERENCE MATCH
========================================================== */

@media (min-width: 901px) {

    .about-copy {
        position: relative !important;
        padding-bottom: 55px !important;
    }

    /* Stats stay on left */
    .about-stats {
        display: flex !important;
        align-items: flex-start !important;
        margin: 0 !important;
    }

    .about-stats > div {
        padding-right: 20px !important;
        margin-right: 18px !important;
    }

    .about-stats b {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .about-stats small {
        font-size: 8px !important;
    }

    /* Button moves to same row as stats */
    .about-copy > .btn {
        position: absolute !important;

        left: auto !important;
        right: 4px !important;
        bottom: 86px !important;

        min-height: 39px !important;
        padding: 0 18px !important;

        white-space: nowrap !important;
    }
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .about-copy {
        padding-bottom: 42px !important;
    }

    .about-copy > .btn {
        right: 15px !important;
        bottom: 40px !important;

        min-height: 30px !important;
        padding: 0 11px !important;

        font-size: 7px !important;
    }
}

/* ==========================================================
   ABOUT QUOTE - SIGNATURE
========================================================== */

.about-grid blockquote strong {
    position: relative !important;

    margin-top: 42px !important;
}

/* Handwritten signature */
.about-grid blockquote strong::before {
    content: "Amit Kumar";

    position: absolute;
    left: 0;
    bottom: 18px;

    color: #23466f;

    font-family: "Brush Script MT",
                 "Segoe Script",
                 "Lucida Handwriting",
                 cursive;

    font-size: 23px;
    font-weight: 400;
    font-style: italic;

    white-space: nowrap;

    transform: rotate(-5deg);
}

/* Founder & Director stays below name */
.about-grid blockquote small {
    display: block !important;
    margin-top: 0 !important;
}


/* ==========================================================
   ABOUT SECTION - REDUCE COMPLETE HEIGHT
========================================================== */

.about {
    padding: 10px 0 !important;
}

.about-grid {
    align-items: stretch !important;
}

/* Left building image */
.about-photo {
    height: 300px !important;
    min-height: 300px !important;
}

/* Right message box */
.about-grid blockquote {
    height: 300px !important;
    min-height: 300px !important;
}

/* Middle content compact */
.about-copy {
    padding-top: 5px !important;
}

.about-copy h2 {
    margin-bottom: 8px !important;
}

.about-copy p {
    margin-bottom: 10px !important;
}

.about-stats {
    margin-bottom: 0 !important;
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (min-width: 901px) and (max-width: 1200px) {

    .about {
        padding: 8px 0 !important;
    }

    .about-photo {
        height: 240px !important;
        min-height: 240px !important;
    }

    .about-grid blockquote {
        height: 240px !important;
        min-height: 240px !important;
    }
}



/* ==========================================================
   CTA TEXT VISIBILITY FIX
========================================================== */

.cta-content {
    position: relative !important;
    z-index: 10 !important;
}

/* Small heading */
.cta-content .eyebrow {
    color: #ffffff !important;
}

/* Main heading */
.cta-content h2 {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Description */
.cta-content p {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bottom points */
.cta-points {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Point symbols */
.cta-points::first-letter {
    color: #ffffff !important;
}

/* Button */
.cta-content > .btn {
    position: relative !important;
    z-index: 20 !important;
    color: #ffffff !important;
}

/* Make sure overlay doesn't cover content */
.cta-overlay {
    z-index: 2 !important;
}

.cta-bg {
    z-index: 1 !important;
}

.cta-content {
    z-index: 10 !important;
}


/* =========================================================
   TESTIMONIALS - FINAL COMPACT FIX
   ========================================================= */

.testimonials {
    background: #ffffff !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    padding: 16px 0 18px !important;

    overflow: visible !important;
}


/* MAIN ROW */
.testimonial-grid {
    display: grid !important;

    grid-template-columns: 310px minmax(0, 1fr) minmax(0, 1fr) 65px !important;

    gap: 24px !important;

    align-items: center !important;

    max-width: 1400px !important;
    margin: 0 auto !important;

    padding: 0 30px !important;

    box-sizing: border-box !important;
}


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

.test-title {
    margin: 0 !important;
    padding: 0 !important;
}

.test-title .eyebrow {
    margin: 0 0 10px !important;

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

    letter-spacing: 1.5px !important;
}

.test-title h2 {
    margin: 0 !important;

    font-size: 28px !important;
    line-height: 1.08 !important;

    font-weight: 800 !important;

    color: #073b78 !important;
}


/* =========================================================
   TESTIMONIAL CARD
   ========================================================= */

.testimonial-grid article {
    width: 100% !important;

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

    padding: 12px 26px 11px !important;

    box-sizing: border-box !important;

    border: 1px solid #d7e1ec !important;
    border-radius: 10px !important;

    background: #ffffff !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    box-shadow: 0 2px 6px rgba(0,0,0,.03) !important;
}


/* =========================================================
   QUOTE
   ========================================================= */

.testimonial-grid article > span {
    display: block !important;

    height: 18px !important;

    margin: 0 0 5px !important;

    color: #ff7418 !important;

    font-family: Georgia, serif !important;

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

    font-weight: 700 !important;
}


/* =========================================================
   TESTIMONIAL PARAGRAPH
   ========================================================= */

.testimonial-grid article p {
    margin: 0 0 5px !important;

    color: #506b88 !important;

    font-family: Arial, sans-serif !important;

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

    font-weight: 400 !important;
}


/* =========================================================
   PERSON NAME
   ========================================================= */

.testimonial-grid article b {
    display: block !important;

    margin-top: auto !important;
    margin-bottom: 0 !important;

    color: #073b78 !important;

    font-family: Arial, sans-serif !important;

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

    font-weight: 800 !important;
}


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

.testimonial-grid article small {
    display: block !important;

    margin: 1px 0 0 !important;

    color: #5c7590 !important;

    font-family: Arial, sans-serif !important;

    font-size: 11px !important;
    line-height: 13px !important;
}


/* =========================================================
   RIGHT SIDE ARROWS
   ========================================================= */

.testimonial-grid::after {
    content: "‹   ›" !important;

    width: 55px !important;
    height: 40px !important;

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

    color: #08477e !important;

    font-family: Arial, sans-serif !important;

    font-size: 27px !important;
    font-weight: 400 !important;

    letter-spacing: 5px !important;

    white-space: nowrap !important;
}


/* =========================================================
   REMOVE EXTRA LINES
   ========================================================= */

.testimonials::before,
.testimonials::after {
    content: none !important;
    display: none !important;
}


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

@media (max-width: 1100px) {

    .testimonial-grid {
        grid-template-columns: 250px 1fr 1fr 50px !important;
        gap: 15px !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .test-title h2 {
        font-size: 23px !important;
    }

    .testimonial-grid article {
        height: 125px !important;
        min-height: 125px !important;

        padding: 11px 17px !important;
    }

    .testimonial-grid article p {
        font-size: 12px !important;
    }
}


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

@media (max-width: 800px) {

    .testimonials {
        padding: 22px 0 !important;
    }

    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .testimonial-grid article {
        height: auto !important;
        min-height: 125px !important;
    }

    .testimonial-grid::after {
        display: none !important;
    }
}

/* =========================================================
   TESTIMONIAL CARD - FINAL HEIGHT FIX
   ========================================================= */

.testimonial-grid article {
    height: 138px !important;
    min-height: 138px !important;
    padding: 13px 26px 12px !important;
}

/* First card text */
.testimonial-grid article p {
    font-size: 13px !important;
    line-height: 1.28 !important;
    margin-bottom: 5px !important;
}

/* Name */
.testimonial-grid article b {
    margin-top: 2px !important;
    line-height: 15px !important;
}

/* Designation */
.testimonial-grid article small {
    margin-top: 2px !important;
    line-height: 14px !important;
}

/* Keep testimonial section compact */
.testimonials {
    padding: 14px 0 16px !important;
}