/* =========================================================
   PMC HERO BANNER
========================================================= */

.scs-pmc-hero {

    position: relative;

    width: 100%;

    height: 285px;

    overflow: hidden;

    background: #eef4f7;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.scs-pmc-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../images/solutions/pmc-banner.jfif");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}


/* =========================================================
   WHITE LEFT GRADIENT
========================================================= */

.scs-pmc-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.99) 0%,
            rgba(255,255,255,0.97) 24%,
            rgba(255,255,255,0.88) 42%,
            rgba(255,255,255,0.50) 60%,
            rgba(255,255,255,0.12) 82%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.scs-pmc-hero-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 116px);

    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


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

.scs-pmc-hero-content {

    width: 100%;

    max-width: 650px;

}


/* =========================================================
   LABEL
========================================================= */

.scs-pmc-hero-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 5px 8px;

    background: rgba(241,90,22,0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .2px;

    text-transform: uppercase;

    border-radius: 2px;

}


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

.scs-pmc-hero-content h1 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 36px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.scs-pmc-hero-content h1 span {

    display: block;

    margin-top: 3px;

    color: #f15a16;

}


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

.scs-pmc-hero-content p {

    max-width: 560px;

    margin: 14px 0 0;

    color: #193a60;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 500;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-pmc-hero-line {

    width: 34px;

    height: 3px;

    margin-top: 14px;

    background: #f15a16;

}


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

@media (max-width: 900px) {

    .scs-pmc-hero {

        height: 245px;

    }


    .scs-pmc-hero-container {

        width: calc(100% - 70px);

    }


    .scs-pmc-hero-content h1 {

        font-size: 31px;

    }

}


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

@media (max-width: 600px) {

    .scs-pmc-hero {

        height: 220px;

        min-height: 220px;

        max-height: 220px;

    }


    .scs-pmc-hero-bg {

        background-position: 65% center;

    }


    .scs-pmc-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.96) 40%,
                rgba(255,255,255,0.72) 68%,
                rgba(255,255,255,0.12) 100%
            );

    }


    .scs-pmc-hero-container {

        width: calc(100% - 36px);

    }


    .scs-pmc-hero-content {

        max-width: 340px;

    }


    .scs-pmc-hero-label {

        margin-bottom: 7px;

        padding: 4px 6px;

        font-size: 7px;

    }


    .scs-pmc-hero-content h1 {

        font-size: 25px;

        line-height: 1.08;

        letter-spacing: -0.3px;

    }


    .scs-pmc-hero-content h1 span {

        margin-top: 2px;

    }


    .scs-pmc-hero-content p {

        max-width: 290px;

        margin-top: 10px;

        font-size: 8px;

        line-height: 1.45;

    }


    .scs-pmc-hero-line {

        width: 30px;

        height: 3px;

        margin-top: 10px;

    }

}


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

@media (max-width: 380px) {

    .scs-pmc-hero {

        height: 205px;

        min-height: 205px;

        max-height: 205px;

    }


    .scs-pmc-hero-container {

        width: calc(100% - 30px);

    }


    .scs-pmc-hero-content h1 {

        font-size: 22px;

    }


    .scs-pmc-hero-content p {

        max-width: 260px;

        font-size: 8px;

    }

}

/* =========================================================
   PMC - OWNER'S ENGINEER
========================================================= */

.scs-pmc-owner {

    width: 100%;

    padding: 65px 0;

    background: #ffffff;

}


.scs-pmc-owner-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 65px;

    align-items: center;

}


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

.scs-pmc-owner-content {

    max-width: 560px;

}


.scs-pmc-section-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 4px 8px;

    background: rgba(241, 90, 22, 0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-pmc-owner-content h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;

    white-space: nowrap;

}


/* Do NOT make the orange word a separate line */

.scs-pmc-owner-content h2 span {

    display: inline;

    color: #f15a16;

}


/* Complete underline */

.scs-pmc-section-line {

    width: 100%;

    max-width: 430px;

    height: 3px;

    margin: 14px 0 20px;

    background: #f15a16;

}


.scs-pmc-owner-content p {

    margin: 0;

    color: #526174;

    font-size: 14px;

    line-height: 1.75;

}


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

.scs-pmc-owner-image {

    width: 100%;

    height: 310px;

    overflow: hidden;

    border-radius: 5px;

    background: #eef3f6;

}


.scs-pmc-owner-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


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

@media (max-width: 900px) {

    .scs-pmc-owner {

        padding: 50px 0;

    }


    .scs-pmc-owner-container {

        width: calc(100% - 70px);

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .scs-pmc-owner-content h2 {

        font-size: 28px;

    }


    .scs-pmc-owner-image {

        height: 280px;

    }

}


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

@media (max-width: 600px) {

    .scs-pmc-owner {

        padding: 42px 0;

    }


    .scs-pmc-owner-container {

        width: calc(100% - 36px);

        display: flex;

        flex-direction: column;

        gap: 28px;

        align-items: stretch;

    }


    .scs-pmc-owner-content {

        max-width: none;

    }


   

    .scs-pmc-owner-content h2 {

        font-size: 25px;

        white-space: normal;

    }

    .scs-pmc-owner-content h2 span {

        display: inline;

    }

    .scs-pmc-section-line {

        width: 100%;

        max-width: 100%;

        margin-top: 12px;

    }

 


    .scs-pmc-owner-content p {

        font-size: 11px;

        line-height: 1.65;

    }


    .scs-pmc-owner-image {

        width: 100%;

        height: 230px;

    }

}


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

@media (max-width: 380px) {

    .scs-pmc-owner-container {

        width: calc(100% - 30px);

    }


    .scs-pmc-owner-content h2 {

        font-size: 23px;

    }


    .scs-pmc-owner-image {

        height: 210px;

    }

}

/* =========================================================
   PMC SCOPE OF SERVICES
========================================================= */

.scs-pmc-scope {

    width: 100%;

    padding: 65px 0;

    background: #f7fafc;

}


.scs-pmc-scope-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

}


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

.scs-pmc-scope-heading {

    text-align: center;

    margin-bottom: 38px;

}


.scs-pmc-scope-heading > span {

    display: inline-block;

    margin-bottom: 8px;

    padding: 4px 8px;

    color: #f15a16;

    background: rgba(241, 90, 22, 0.08);

    font-size: 8px;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-pmc-scope-heading h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 700;

}


.scs-pmc-scope-heading h2 strong {

    color: #f15a16;

}


.scs-pmc-scope-line {

    width: 34px;

    height: 3px;

    margin: 11px auto 0;

    background: #f15a16;

}


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

.scs-pmc-scope-grid {

    display: grid;

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

    gap: 14px;

}


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

.scs-pmc-scope-card {

    position: relative;

    min-height: 215px;

    padding: 22px 16px 20px;

    background: #ffffff;

    border: 1px solid #dce5ed;

    border-radius: 5px;

    text-align: center;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.scs-pmc-scope-card:hover {

    transform: translateY(-4px);

    border-color: #f15a16;

    box-shadow:
        0 8px 22px rgba(3, 38, 83, 0.09);

}


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

.scs-pmc-scope-number {

    position: absolute;

    top: 8px;

    right: 10px;

    color: #dbe3eb;

    font-size: 25px;

    line-height: 1;

    font-weight: 700;

}


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

.scs-pmc-scope-icon {

    width: 43px;

    height: 43px;

    margin: 6px auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #f15a16;

    border-radius: 50%;

    color: #f15a16;

    font-size: 20px;

    font-weight: 700;

}


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

.scs-pmc-scope-card h3 {

    margin: 0 0 10px;

    color: #082d58;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 700;

}


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

.scs-pmc-scope-card p {

    margin: 0;

    color: #526174;

    font-size: 14px;

    line-height: 1.55;

}


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

@media (max-width: 1000px) {

    .scs-pmc-scope-container {

        width: calc(100% - 70px);

    }

    .scs-pmc-scope-grid {

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

        gap: 16px;

    }

}


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

@media (max-width: 600px) {

    .scs-pmc-scope {

        padding: 45px 0;

    }

    .scs-pmc-scope-container {

        width: calc(100% - 36px);

    }

    .scs-pmc-scope-heading {

        margin-bottom: 28px;

    }

    .scs-pmc-scope-heading h2 {

        font-size: 25px;

    }

    .scs-pmc-scope-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .scs-pmc-scope-card {

        min-height: auto;

        padding: 20px 18px;

        text-align: left;

    }

    .scs-pmc-scope-icon {

        margin: 0 0 12px;

    }

    .scs-pmc-scope-card h3 {

        font-size: 14px;

    }

    .scs-pmc-scope-card p {

        font-size: 14px;

    }

}


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

@media (max-width: 380px) {

    .scs-pmc-scope-container {

        width: calc(100% - 30px);

    }

    .scs-pmc-scope-heading h2 {

        font-size: 23px;

    }

}

/* =========================================================
   PROCESS ENGINEERING & BASIC ENGINEERING
   HERO BANNER
========================================================= */

.scs-pebe-hero {

    position: relative;

    width: 100%;

    height: 285px;

    overflow: hidden;

    background: #eef4f7;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.scs-pebe-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../images/solutions/plant-img.jpg"); 

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}


/* =========================================================
   LEFT WHITE GRADIENT
========================================================= */

.scs-pebe-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.99) 0%,
            rgba(255,255,255,0.97) 24%,
            rgba(255,255,255,0.88) 42%,
            rgba(255,255,255,0.50) 60%,
            rgba(255,255,255,0.12) 82%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.scs-pebe-hero-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 116px);

    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


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

.scs-pebe-hero-content {

    width: 100%;

    max-width: 670px;

}


/* =========================================================
   LABEL
========================================================= */

.scs-pebe-hero-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 5px 8px;

    background: rgba(241,90,22,0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .2px;

    text-transform: uppercase;

    border-radius: 2px;

}


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

.scs-pebe-hero-content h1 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 35px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.scs-pebe-hero-content h1 span {

    display: block;

    margin-top: 3px;

    color: #f15a16;

}


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

.scs-pebe-hero-content p {

    max-width: 570px;

    margin: 14px 0 0;

    color: #193a60;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 500;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-pebe-hero-line {

    width: 34px;

    height: 3px;

    margin-top: 14px;

    background: #f15a16;

}


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

@media (max-width: 900px) {

    .scs-pebe-hero {

        height: 245px;

    }

    .scs-pebe-hero-container {

        width: calc(100% - 70px);

    }

    .scs-pebe-hero-content {

        max-width: 580px;

    }

    .scs-pebe-hero-content h1 {

        font-size: 30px;

    }

}


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

@media (max-width: 600px) {

    .scs-pebe-hero {

        height: 220px;

        min-height: 220px;

        max-height: 220px;

    }


    .scs-pebe-hero-bg {

        background-position: 65% center;

    }


    .scs-pebe-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.96) 40%,
                rgba(255,255,255,0.72) 68%,
                rgba(255,255,255,0.12) 100%
            );

    }


    .scs-pebe-hero-container {

        width: calc(100% - 36px);

    }


    .scs-pebe-hero-content {

        max-width: 340px;

    }


    .scs-pebe-hero-label {

        margin-bottom: 7px;

        padding: 4px 6px;

        font-size: 7px;

    }


    .scs-pebe-hero-content h1 {

        font-size: 24px;

        line-height: 1.08;

        letter-spacing: -0.3px;

    }


    .scs-pebe-hero-content h1 span {

        margin-top: 2px;

    }


    .scs-pebe-hero-content p {

        max-width: 290px;

        margin-top: 10px;

        font-size: 8px;

        line-height: 1.45;

    }


    .scs-pebe-hero-line {

        width: 30px;

        height: 3px;

        margin-top: 10px;

    }

}


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

@media (max-width: 380px) {

    .scs-pebe-hero {

        height: 205px;

        min-height: 205px;

        max-height: 205px;

    }


    .scs-pebe-hero-container {

        width: calc(100% - 30px);

    }


    .scs-pebe-hero-content h1 {

        font-size: 21px;

    }


    .scs-pebe-hero-content p {

        max-width: 255px;

        font-size: 8px;

    }

}

/* =========================================================
   PROCESS ENGINEERING & BASIC ENGINEERING PACKAGES
========================================================= */

.scs-pebe-packages {

    width: 100%;

    padding: 65px 0;

    background: #f7fafc;

}


.scs-pebe-packages-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

}


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

.scs-pebe-packages-heading {

    max-width: 760px;

    margin: 0 auto 40px;

    text-align: center;

}


.scs-pebe-section-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 4px 8px;

    background: rgba(241, 90, 22, 0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-pebe-packages-heading h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 31px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-pebe-packages-heading h2 span {

    color: #f15a16;

}


.scs-pebe-section-line {

    width: 100%;

    max-width: 360px;

    height: 3px;

    margin: 13px auto 18px;

    background: #f15a16;

}


.scs-pebe-packages-heading p {

    max-width: 690px;

    margin: 0 auto;

    color: #526174;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   DELIVERABLE GRID
========================================================= */

.scs-pebe-deliverables {

    display: grid;

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

    gap: 15px;

}


/* =========================================================
   DELIVERABLE CARD
========================================================= */

.scs-pebe-deliverable {

    position: relative;

    min-height: 92px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 18px;

    background: #ffffff;

    border: 1px solid #dce5ed;

    border-radius: 5px;

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.scs-pebe-deliverable:hover {

    transform: translateY(-3px);

    border-color: #f15a16;

    box-shadow:
        0 8px 20px rgba(3, 38, 83, 0.08);

}


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

.scs-pebe-deliverable-number {

    flex-shrink: 0;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #082d58;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

}


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

.scs-pebe-deliverable-content {

    flex: 1;

}


.scs-pebe-deliverable-content h3 {

    margin: 0;

    color: #082d58;

    font-size: 14px;

    line-height: 1.35;

    font-weight: 700;

}


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

@media (max-width: 900px) {

    .scs-pebe-packages {

        padding: 52px 0;

    }


    .scs-pebe-packages-container {

        width: calc(100% - 70px);

    }


    .scs-pebe-packages-heading h2 {

        font-size: 28px;

    }


    .scs-pebe-deliverables {

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

        gap: 14px;

    }

}


/* =========================================================
   MOBILE
   2 COLUMNS
   LAST CARD CENTERED
========================================================= */

@media (max-width: 600px) {

    .scs-pebe-packages {

        padding: 45px 0;

    }


    .scs-pebe-packages-container {

        width: calc(100% - 36px);

    }


    .scs-pebe-packages-heading {

        margin-bottom: 28px;

    }


    .scs-pebe-packages-heading h2 {

        font-size: 25px;

        line-height: 1.12;

    }


    .scs-pebe-section-line {

        width: 100%;

        max-width: 100%;

    }


    .scs-pebe-packages-heading p {

        font-size: 14px;

        line-height: 1.65;

    }


    /* =====================================
       TWO COLUMNS
    ====================================== */

    .scs-pebe-deliverables {

        display: grid;

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

        gap: 11px;

    }


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

    .scs-pebe-deliverable {

        min-height: 115px;

        padding: 14px 12px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 9px;

    }


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

    .scs-pebe-deliverable-number {

        width: 32px;

        height: 32px;

        font-size: 8px;

    }


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

    .scs-pebe-deliverable-content {

        width: 100%;

    }


    .scs-pebe-deliverable-content h3 {

        font-size: 14px;

        line-height: 1.35;

    }


    /* =====================================
       CENTER 9TH CARD
    ====================================== */

    .scs-pebe-deliverable:last-child {

        grid-column: 1 / -1;

        width: calc(50% - 5.5px);

        justify-self: center;

    }

}


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

@media (max-width: 380px) {

    .scs-pebe-packages-container {

        width: calc(100% - 30px);

    }


    .scs-pebe-packages-heading h2 {

        font-size: 23px;

    }


    .scs-pebe-packages-heading p {

        font-size: 14px;

    }


    .scs-pebe-deliverables {

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

        gap: 9px;

    }


    .scs-pebe-deliverable {

        min-height: 108px;

        padding: 12px 10px;

        gap: 8px;

    }


    .scs-pebe-deliverable-number {

        width: 29px;

        height: 29px;

        font-size: 8px;

    }


    .scs-pebe-deliverable-content h3 {

        font-size: 14px;

        line-height: 1.3;

    }


    /* =====================================
       CENTER 9TH CARD
    ====================================== */

    .scs-pebe-deliverable:last-child {

        width: calc(50% - 4.5px);

    }

}
/* =========================================================
   ENGINEERING APPLICATIONS
========================================================= */

.scs-pebe-applications {

    width: 100%;

    padding: 65px 0;

    background: #ffffff;

}


.scs-pebe-applications-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1fr;

    gap: 70px;

    align-items: center;

}


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

.scs-pebe-applications-content {

    max-width: 500px;

}


.scs-pebe-applications-content h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 32px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-pebe-applications-content h2 span {

    display: block;

    color: #f15a16;

}


.scs-pebe-applications-content p {

    margin: 0;

    color: #526174;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-pebe-applications-content
.scs-pebe-section-line {

    width: 100%;

    max-width: 350px;

    height: 3px;

    margin: 14px 0 20px;

    background: #f15a16;

}


/* =========================================================
   APPLICATION LIST
========================================================= */

.scs-pebe-applications-list {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


/* =========================================================
   APPLICATION CARD
========================================================= */

.scs-pebe-application {

    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 95px;

    padding: 15px 18px;

    background: #f7fafc;

    border: 1px solid #dce5ed;

    border-left: 3px solid #f15a16;

    border-radius: 4px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.scs-pebe-application:hover {

    transform: translateX(4px);

    box-shadow:
        0 7px 18px rgba(3, 38, 83, 0.08);

}


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

.scs-pebe-application-number {

    flex-shrink: 0;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #082d58;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

}


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

.scs-pebe-application h3 {

    margin: 0 0 5px;

    color: #082d58;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

}


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

.scs-pebe-application p {

    margin: 0;

    color: #526174;

    font-size: 14px;

    line-height: 1.5;

}


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

@media (max-width: 900px) {

    .scs-pebe-applications {

        padding: 52px 0;

    }

    .scs-pebe-applications-container {

        width: calc(100% - 70px);

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }

    .scs-pebe-applications-content h2 {

        font-size: 28px;

    }

}


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

@media (max-width: 600px) {

    .scs-pebe-applications {

        padding: 45px 0;

    }

    .scs-pebe-applications-container {

        width: calc(100% - 36px);

        display: flex;

        flex-direction: column;

        gap: 28px;

        align-items: stretch;

    }

    .scs-pebe-applications-content {

        max-width: none;

    }

    .scs-pebe-applications-content h2 {

        font-size: 25px;

        line-height: 1.12;

    }

    .scs-pebe-applications-content
    .scs-pebe-section-line {

        max-width: 100%;

    }

    .scs-pebe-applications-content p {

        font-size: 11px;

        line-height: 1.65;

    }

    .scs-pebe-applications-list {

        gap: 11px;

    }

    .scs-pebe-application {

        min-height: 85px;

        padding: 13px;

        gap: 12px;

    }

    .scs-pebe-application-number {

        width: 35px;

        height: 35px;

        font-size: 8px;

    }

    .scs-pebe-application h3 {

        font-size: 14px;

    }

    .scs-pebe-application p {

        font-size: 14px;

    }

}


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

@media (max-width: 380px) {

    .scs-pebe-applications-container {

        width: calc(100% - 30px);

    }

    .scs-pebe-applications-content h2 {

        font-size: 23px;

    }

    .scs-pebe-application {

        min-height: 80px;

        padding: 12px;

    }

    .scs-pebe-application-number {

        width: 32px;

        height: 32px;

    }

}

/* =========================================================
   PLANT REVAMPING / RETROFIT
   HERO BANNER
========================================================= */

.scs-revamp-hero {

    position: relative;

    width: 100%;

    height: 285px;

    overflow: hidden;

    background: #eef4f7;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.scs-revamp-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../images/solutions/plant-revamping-banner.jfif");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}


/* =========================================================
   LEFT WHITE GRADIENT
========================================================= */

.scs-revamp-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.99) 0%,
            rgba(255,255,255,0.97) 24%,
            rgba(255,255,255,0.88) 42%,
            rgba(255,255,255,0.50) 60%,
            rgba(255,255,255,0.12) 82%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.scs-revamp-hero-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 116px);

    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


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

.scs-revamp-hero-content {

    width: 100%;

    max-width: 680px;

}


/* =========================================================
   LABEL
========================================================= */

.scs-revamp-hero-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 5px 8px;

    background: rgba(241,90,22,0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .2px;

    text-transform: uppercase;

    border-radius: 2px;

}


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

.scs-revamp-hero-content h1 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 36px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.scs-revamp-hero-content h1 span {

    display: block;

    margin-top: 3px;

    color: #f15a16;

}


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

.scs-revamp-hero-content p {

    max-width: 560px;

    margin: 14px 0 0;

    color: #193a60;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 500;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-revamp-hero-line {

    width: 34px;

    height: 3px;

    margin-top: 14px;

    background: #f15a16;

}


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

@media (max-width: 900px) {

    .scs-revamp-hero {

        height: 245px;

    }


    .scs-revamp-hero-container {

        width: calc(100% - 70px);

    }


    .scs-revamp-hero-content {

        max-width: 590px;

    }


    .scs-revamp-hero-content h1 {

        font-size: 31px;

    }

}


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

@media (max-width: 600px) {

    .scs-revamp-hero {

        height: 220px;

        min-height: 220px;

        max-height: 220px;

    }


    .scs-revamp-hero-bg {

        background-position: 65% center;

    }


    .scs-revamp-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.96) 40%,
                rgba(255,255,255,0.72) 68%,
                rgba(255,255,255,0.12) 100%
            );

    }


    .scs-revamp-hero-container {

        width: calc(100% - 36px);

    }


    .scs-revamp-hero-content {

        max-width: 340px;

    }


    .scs-revamp-hero-label {

        margin-bottom: 7px;

        padding: 4px 6px;

        font-size: 7px;

    }


    .scs-revamp-hero-content h1 {

        font-size: 24px;

        line-height: 1.08;

        letter-spacing: -0.3px;

    }


    .scs-revamp-hero-content h1 span {

        margin-top: 2px;

    }


    .scs-revamp-hero-content p {

        max-width: 290px;

        margin-top: 10px;

        font-size: 8px;

        line-height: 1.45;

    }


    .scs-revamp-hero-line {

        width: 30px;

        height: 3px;

        margin-top: 10px;

    }

}


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

@media (max-width: 380px) {

    .scs-revamp-hero {

        height: 205px;

        min-height: 205px;

        max-height: 205px;

    }


    .scs-revamp-hero-container {

        width: calc(100% - 30px);

    }


    .scs-revamp-hero-content h1 {

        font-size: 21px;

    }


    .scs-revamp-hero-content p {

        max-width: 255px;

        font-size: 8px;

    }

}

/* =========================================================
   PLANT PERFORMANCE IMPROVEMENT
========================================================= */

.scs-revamp-intro {

    width: 100%;

    padding: 65px 0;

    background: #ffffff;

}


.scs-revamp-intro-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 65px;

    align-items: center;

}


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

.scs-revamp-intro-content {

    max-width: 560px;

}


.scs-revamp-section-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 4px 8px;

    background: rgba(241, 90, 22, 0.08);

    color: #f15a16;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-revamp-intro-content h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 32px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-revamp-intro-content h2 span {

    color: #f15a16;

}


.scs-revamp-section-line {

    width: 100%;

    max-width: 360px;

    height: 3px;

    margin: 14px 0 20px;

    background: #f15a16;

}


.scs-revamp-intro-content p {

    margin: 0;

    color: #526174;

    font-size: 12px;

    line-height: 1.75;

}


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

.scs-revamp-intro-image {

    width: 100%;

    height: 310px;

    overflow: hidden;

    border-radius: 6px;

    background: #eef3f6;

}


.scs-revamp-intro-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


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

@media (max-width: 900px) {

    .scs-revamp-intro {

        padding: 50px 0;

    }


    .scs-revamp-intro-container {

        width: calc(100% - 70px);

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .scs-revamp-intro-content h2 {

        font-size: 28px;

    }


    .scs-revamp-intro-image {

        height: 280px;

    }

}


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

@media (max-width: 600px) {

    .scs-revamp-intro {

        padding: 42px 0;

    }


    .scs-revamp-intro-container {

        width: calc(100% - 36px);

        display: flex;

        flex-direction: column;

        gap: 28px;

        align-items: stretch;

    }


    .scs-revamp-intro-content {

        max-width: none;

    }


    .scs-revamp-intro-content h2 {

        font-size: 25px;

        line-height: 1.12;

    }


    .scs-revamp-section-line {

        max-width: 100%;

        margin-top: 12px;

    }


    .scs-revamp-intro-content p {

        font-size: 11px;

        line-height: 1.65;

    }


    .scs-revamp-intro-image {

        width: 100%;

        height: 230px;

    }

}


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

@media (max-width: 380px) {

    .scs-revamp-intro-container {

        width: calc(100% - 30px);

    }


    .scs-revamp-intro-content h2 {

        font-size: 23px;

    }


    .scs-revamp-intro-image {

        height: 210px;

    }

}

/* =========================================================
   REVAMPING & RETROFIT SCOPE
========================================================= */

.scs-revamp-scope {

    width: 100%;

    padding: 70px 0;

    background: #f7fafc;

}


.scs-revamp-scope-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 55px;

    align-items: center;

}


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

.scs-revamp-scope-image {

    position: relative;

    width: 100%;

    height: 480px;

    overflow: hidden;

    border-radius: 7px;

    background: #dfe7ed;

}


.scs-revamp-scope-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.scs-revamp-scope-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8,45,88,0.02) 35%,
            rgba(8,45,88,0.82) 100%
        );

}


.scs-revamp-scope-image-overlay {

    position: absolute;

    left: 25px;

    bottom: 25px;

    z-index: 2;

    color: #ffffff;

}


.scs-revamp-scope-image-overlay span {

    display: block;

    margin-bottom: 7px;

    color: #f15a16;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .5px;

}


.scs-revamp-scope-image-overlay strong {

    display: block;

    font-size: 23px;

    line-height: 1.15;

    font-weight: 700;

}


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

.scs-revamp-scope-content {

    width: 100%;

}


.scs-revamp-scope-content h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 31px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-revamp-scope-content h2 span {

    color: #f15a16;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-revamp-scope-line {

    width: 100%;

    max-width: 360px;

    height: 3px;

    margin: 13px 0 23px;

    background: #f15a16;

}


/* =========================================================
   LIST
========================================================= */

.scs-revamp-scope-list {

    display: grid;

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

    gap: 11px;

}


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

.scs-revamp-scope-item {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    min-height: 92px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #dce5ed;

    border-radius: 5px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.scs-revamp-scope-item:hover {

    transform: translateY(-3px);

    border-color: #f15a16;

    box-shadow:
        0 7px 18px rgba(3,38,83,0.08);

}


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

.scs-revamp-scope-number {

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #082d58;

    color: #ffffff;

    font-size: 8px;

    font-weight: 700;

}


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

.scs-revamp-scope-item h3 {

    margin: 1px 0 5px;

    color: #082d58;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 700;

}


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

.scs-revamp-scope-item p {

    margin: 0;

    color: #526174;

    font-size: 14px;

    line-height: 1.5;

}


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

@media (max-width: 900px) {

    .scs-revamp-scope {

        padding: 55px 0;

    }


    .scs-revamp-scope-container {

        width: calc(100% - 70px);

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .scs-revamp-scope-image {

        height: 300px;

    }


    .scs-revamp-scope-content h2 {

        font-size: 28px;

    }

}


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

@media (max-width: 600px) {

    .scs-revamp-scope {

        padding: 45px 0;

    }


    .scs-revamp-scope-container {

        width: calc(100% - 36px);

        gap: 28px;

    }


    .scs-revamp-scope-image {

        height: 230px;

        border-radius: 5px;

    }


    .scs-revamp-scope-image-overlay {

        left: 18px;

        bottom: 18px;

    }


    .scs-revamp-scope-image-overlay strong {

        font-size: 19px;

    }


    .scs-revamp-scope-content h2 {

        font-size: 25px;

        line-height: 1.12;

    }


    .scs-revamp-scope-line {

        max-width: 100%;

    }


    .scs-revamp-scope-list {

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

        gap: 9px;

    }


    .scs-revamp-scope-item {

        min-height: 120px;

        padding: 12px 10px;

        display: flex;

        flex-direction: column;

        gap: 8px;

    }


    .scs-revamp-scope-number {

        width: 29px;

        height: 29px;

        font-size: 8px;

    }


    .scs-revamp-scope-item h3 {

        font-size: 10px;

    }


    .scs-revamp-scope-item p {

        font-size: 8px;

    }

}


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

@media (max-width: 380px) {

    .scs-revamp-scope-container {

        width: calc(100% - 30px);

    }


    .scs-revamp-scope-image {

        height: 210px;

    }


    .scs-revamp-scope-image-overlay strong {

        font-size: 17px;

    }


    .scs-revamp-scope-list {

        gap: 8px;

    }


    .scs-revamp-scope-item {

        min-height: 115px;

        padding: 10px 9px;

    }


    .scs-revamp-scope-item h3 {

        font-size: 14px;

    }


    .scs-revamp-scope-item p {

        font-size: 7.5px;

    }

}

/* =========================================================
   PROCESS SAFETY & HAZOP STUDIES
   HERO BANNER
========================================================= */

.scs-hazop-hero {

    position: relative;

    width: 100%;

    height: 285px;

    overflow: hidden;

    background: #eef4f7;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.scs-hazop-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../images/solutions/process-safety-banner.jfif");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}


/* =========================================================
   LEFT WHITE GRADIENT
========================================================= */

.scs-hazop-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.99) 0%,
            rgba(255,255,255,0.97) 24%,
            rgba(255,255,255,0.88) 42%,
            rgba(255,255,255,0.50) 60%,
            rgba(255,255,255,0.12) 82%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.scs-hazop-hero-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 116px);

    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


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

.scs-hazop-hero-content {

    width: 100%;

    max-width: 670px;

}


/* =========================================================
   LABEL
========================================================= */

.scs-hazop-hero-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 5px 8px;

    background: rgba(241,90,22,0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .2px;

    text-transform: uppercase;

    border-radius: 2px;

}


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

.scs-hazop-hero-content h1 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 36px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.scs-hazop-hero-content h1 span {

    display: block;

    margin-top: 3px;

    color: #f15a16;

}


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

.scs-hazop-hero-content p {

    max-width: 570px;

    margin: 14px 0 0;

    color: #193a60;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 500;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-hazop-hero-line {

    width: 34px;

    height: 3px;

    margin-top: 14px;

    background: #f15a16;

}


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

@media (max-width: 900px) {

    .scs-hazop-hero {

        height: 245px;

    }


    .scs-hazop-hero-container {

        width: calc(100% - 70px);

    }


    .scs-hazop-hero-content {

        max-width: 590px;

    }


    .scs-hazop-hero-content h1 {

        font-size: 31px;

    }

}


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

@media (max-width: 600px) {

    .scs-hazop-hero {

        height: 220px;

        min-height: 220px;

        max-height: 220px;

    }


    .scs-hazop-hero-bg {

        background-position: 65% center;

    }


    .scs-hazop-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.96) 40%,
                rgba(255,255,255,0.72) 68%,
                rgba(255,255,255,0.12) 100%
            );

    }


    .scs-hazop-hero-container {

        width: calc(100% - 36px);

    }


    .scs-hazop-hero-content {

        max-width: 340px;

    }


    .scs-hazop-hero-label {

        margin-bottom: 7px;

        padding: 4px 6px;

        font-size: 7px;

    }


    .scs-hazop-hero-content h1 {

        font-size: 24px;

        line-height: 1.08;

        letter-spacing: -0.3px;

    }


    .scs-hazop-hero-content h1 span {

        margin-top: 2px;

    }


    .scs-hazop-hero-content p {

        max-width: 290px;

        margin-top: 10px;

        font-size: 8px;

        line-height: 1.45;

    }


    .scs-hazop-hero-line {

        width: 30px;

        height: 3px;

        margin-top: 10px;

    }

}


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

@media (max-width: 380px) {

    .scs-hazop-hero {

        height: 205px;

        min-height: 205px;

        max-height: 205px;

    }


    .scs-hazop-hero-container {

        width: calc(100% - 30px);

    }


    .scs-hazop-hero-content h1 {

        font-size: 21px;

    }


    .scs-hazop-hero-content p {

        max-width: 255px;

        font-size: 8px;

    }

}

/* =========================================================
   PROCESS SAFETY & HAZOP EXPERTISE
========================================================= */

.scs-hazop-intro {

    width: 100%;

    padding: 65px 0;

    background: #ffffff;

}


.scs-hazop-intro-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 65px;

    align-items: center;

}


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

.scs-hazop-intro-content {

    max-width: 560px;

}


.scs-hazop-section-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 4px 8px;

    background: rgba(241, 90, 22, 0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-hazop-intro-content h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 32px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-hazop-intro-content h2 span {

    display: inline;

    color: #f15a16;

}


/* =========================================================
   UNDERLINE
========================================================= */

.scs-hazop-section-line {

    width: 100%;

    max-width: 360px;

    height: 3px;

    margin: 14px 0 20px;

    background: #f15a16;

}


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

.scs-hazop-intro-content p {

    margin: 0;

    color: #526174;

    font-size: 12px;

    line-height: 1.75;

}


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

.scs-hazop-intro-image {

    width: 100%;

    height: 310px;

    overflow: hidden;

    border-radius: 6px;

    background: #eef3f6;

}


.scs-hazop-intro-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


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

@media (max-width: 900px) {

    .scs-hazop-intro {

        padding: 50px 0;

    }


    .scs-hazop-intro-container {

        width: calc(100% - 70px);

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .scs-hazop-intro-content h2 {

        font-size: 28px;

    }


    .scs-hazop-intro-image {

        height: 280px;

    }

}


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

@media (max-width: 600px) {

    .scs-hazop-intro {

        padding: 42px 0;

    }


    .scs-hazop-intro-container {

        width: calc(100% - 36px);

        display: flex;

        flex-direction: column;

        gap: 28px;

        align-items: stretch;

    }


    .scs-hazop-intro-content {

        max-width: none;

    }


    .scs-hazop-intro-content h2 {

        font-size: 25px;

        line-height: 1.12;

    }


    .scs-hazop-section-line {

        max-width: 100%;

        margin-top: 12px;

    }


    .scs-hazop-intro-content p {

        font-size: 11px;

        line-height: 1.65;

    }


    .scs-hazop-intro-image {

        width: 100%;

        height: 230px;

    }

}


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

@media (max-width: 380px) {

    .scs-hazop-intro-container {

        width: calc(100% - 30px);

    }


    .scs-hazop-intro-content h2 {

        font-size: 23px;

    }


    .scs-hazop-intro-image {

        height: 210px;

    }

}

/* =========================================================
   HAZOP STUDY SCOPE
========================================================= */

.scs-hazop-scope {

    width: 100%;

    padding: 65px 0;

    background: #f7fafc;

}


.scs-hazop-scope-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

}


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

.scs-hazop-scope-heading {

    max-width: 760px;

    margin: 0 auto 38px;

    text-align: center;

}


.scs-hazop-scope-heading h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 31px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-hazop-scope-heading h2 span {

    color: #f15a16;

}


.scs-hazop-scope-line {

    width: 100%;

    max-width: 360px;

    height: 3px;

    margin: 13px auto 18px;

    background: #f15a16;

}


.scs-hazop-scope-heading p {

    max-width: 680px;

    margin: 0 auto;

    color: #526174;

    font-size: 12px;

    line-height: 1.7;

}


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

.scs-hazop-scope-grid {

    display: grid;

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

    gap: 17px;

}


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

.scs-hazop-scope-card {

    position: relative;

    min-height: 210px;

    padding: 23px 21px;

    background: #ffffff;

    border: 1px solid #dce5ed;

    border-radius: 6px;

    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.scs-hazop-scope-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background: #f15a16;

}


.scs-hazop-scope-card:hover {

    transform: translateY(-4px);

    border-color: #f15a16;

    box-shadow:
        0 8px 22px rgba(3,38,83,0.09);

}


/* =========================================================
   TOP
========================================================= */

.scs-hazop-scope-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

}


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

.scs-hazop-scope-number {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #082d58;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

}


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

.scs-hazop-scope-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #f15a16;

    border-radius: 50%;

    color: #f15a16;

    font-size: 19px;

    font-weight: 700;

}


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

.scs-hazop-scope-card h3 {

    margin: 0 0 10px;

    color: #082d58;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 700;

}


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

.scs-hazop-scope-card p {

    margin: 0;

    color: #526174;

    font-size: 10px;

    line-height: 1.65;

}


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

@media (max-width: 900px) {

    .scs-hazop-scope {

        padding: 52px 0;

    }


    .scs-hazop-scope-container {

        width: calc(100% - 70px);

    }


    .scs-hazop-scope-heading h2 {

        font-size: 28px;

    }


    .scs-hazop-scope-grid {

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

        gap: 11px;

    }


    .scs-hazop-scope-card {

        min-height: 200px;

        padding: 18px 15px;

    }


    .scs-hazop-scope-card h3 {

        font-size: 13px;

    }

}


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

@media (max-width: 600px) {

    .scs-hazop-scope {

        padding: 45px 0;

    }


    .scs-hazop-scope-container {

        width: calc(100% - 36px);

    }


    .scs-hazop-scope-heading {

        margin-bottom: 28px;

    }


    .scs-hazop-scope-heading h2 {

        font-size: 25px;

        line-height: 1.12;

    }


    .scs-hazop-scope-line {

        max-width: 100%;

    }


    .scs-hazop-scope-heading p {

        font-size: 10px;

        line-height: 1.6;

    }


    /* 2 COLUMNS */

    .scs-hazop-scope-grid {

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

        gap: 10px;

    }


    .scs-hazop-scope-card {

        min-height: 185px;

        padding: 15px 12px;

    }


    .scs-hazop-scope-top {

        margin-bottom: 15px;

    }


    .scs-hazop-scope-number {

        width: 31px;

        height: 31px;

        font-size: 8px;

    }


    .scs-hazop-scope-icon {

        width: 31px;

        height: 31px;

        font-size: 15px;

    }


    .scs-hazop-scope-card h3 {

        font-size: 11px;

        line-height: 1.3;

    }


    .scs-hazop-scope-card p {

        font-size: 8px;

        line-height: 1.55;

    }


    /* CENTER LAST CARD */

    .scs-hazop-scope-card:last-child {

        grid-column: 1 / -1;

        width: calc(50% - 5px);

        justify-self: center;

    }

}


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

@media (max-width: 380px) {

    .scs-hazop-scope-container {

        width: calc(100% - 30px);

    }


    .scs-hazop-scope-heading h2 {

        font-size: 23px;

    }


    .scs-hazop-scope-grid {

        gap: 8px;

    }


    .scs-hazop-scope-card {

        min-height: 175px;

        padding: 13px 10px;

    }


    .scs-hazop-scope-number {

        width: 28px;

        height: 28px;

    }


    .scs-hazop-scope-icon {

        width: 28px;

        height: 28px;

        font-size: 13px;

    }


    .scs-hazop-scope-card h3 {

        font-size: 10px;

    }


    .scs-hazop-scope-card p {

        font-size: 7.5px;

    }


    .scs-hazop-scope-card:last-child {

        width: calc(50% - 4px);

    }

}

/* =========================================================
   PROCESS OPTIMIZATION & SIMULATION
   HERO BANNER
========================================================= */

.scs-optimization-hero {

    position: relative;

    width: 100%;

    height: 285px;

    overflow: hidden;

    background: #eef4f7;

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.scs-optimization-hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../images/solutions/Process-Optimization-banner.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}


/* =========================================================
   LEFT WHITE GRADIENT
========================================================= */

.scs-optimization-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.99) 0%,
            rgba(255,255,255,0.97) 24%,
            rgba(255,255,255,0.88) 42%,
            rgba(255,255,255,0.50) 60%,
            rgba(255,255,255,0.12) 82%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   CONTAINER
========================================================= */

.scs-optimization-hero-container {

    position: relative;

    z-index: 2;

    width: calc(100% - 116px);

    max-width: 1200px;

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

}


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

.scs-optimization-hero-content {

    width: 100%;

    max-width: 720px;

}


/* =========================================================
   LABEL
========================================================= */

.scs-optimization-hero-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 5px 8px;

    background: rgba(241,90,22,0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .2px;

    text-transform: uppercase;

    border-radius: 2px;

}


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

.scs-optimization-hero-content h1 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 36px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.scs-optimization-hero-content h1 span {

    display: block;

    margin-top: 3px;

    color: #f15a16;

}


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

.scs-optimization-hero-content p {

    max-width: 570px;

    margin: 14px 0 0;

    color: #193a60;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 500;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-optimization-hero-line {

    width: 34px;

    height: 3px;

    margin-top: 14px;

    background: #f15a16;

}


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

@media (max-width: 900px) {

    .scs-optimization-hero {

        height: 245px;

    }

    .scs-optimization-hero-container {

        width: calc(100% - 70px);

    }

    .scs-optimization-hero-content {

        max-width: 600px;

    }

    .scs-optimization-hero-content h1 {

        font-size: 31px;

    }

}


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

@media (max-width: 600px) {

    .scs-optimization-hero {

        height: 220px;

        min-height: 220px;

        max-height: 220px;

    }


    .scs-optimization-hero-bg {

        background-position: 65% center;

    }


    .scs-optimization-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,0.99) 0%,
                rgba(255,255,255,0.96) 40%,
                rgba(255,255,255,0.72) 68%,
                rgba(255,255,255,0.12) 100%
            );

    }


    .scs-optimization-hero-container {

        width: calc(100% - 36px);

    }


    .scs-optimization-hero-content {

        max-width: 340px;

    }


    .scs-optimization-hero-label {

        margin-bottom: 7px;

        padding: 4px 6px;

        font-size: 7px;

    }


    .scs-optimization-hero-content h1 {

        font-size: 24px;

        line-height: 1.08;

        letter-spacing: -0.3px;

    }


    .scs-optimization-hero-content h1 span {

        margin-top: 2px;

    }


    .scs-optimization-hero-content p {

        max-width: 290px;

        margin-top: 10px;

        font-size: 8px;

        line-height: 1.45;

    }


    .scs-optimization-hero-line {

        width: 30px;

        height: 3px;

        margin-top: 10px;

    }

}


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

@media (max-width: 380px) {

    .scs-optimization-hero {

        height: 205px;

        min-height: 205px;

        max-height: 205px;

    }


    .scs-optimization-hero-container {

        width: calc(100% - 30px);

    }


    .scs-optimization-hero-content h1 {

        font-size: 21px;

    }


    .scs-optimization-hero-content p {

        max-width: 255px;

        font-size: 8px;

    }

}

/* =========================================================
   PROCESS OPTIMIZATION INTRODUCTION
========================================================= */

.scs-optimization-intro {

    width: 100%;

    padding: 65px 0;

    background: #ffffff;

}


.scs-optimization-intro-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 0.9fr;

    gap: 65px;

    align-items: center;

}


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

.scs-optimization-intro-content {

    max-width: 560px;

}


.scs-optimization-section-label {

    display: inline-block;

    margin-bottom: 9px;

    padding: 4px 8px;

    background: rgba(241, 90, 22, 0.08);

    color: #f15a16;

    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-optimization-intro-content h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 32px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-optimization-intro-content h2 span {

    display: block;

    color: #f15a16;

}


/* =========================================================
   ORANGE LINE
========================================================= */

.scs-optimization-section-line {

    width: 100%;

    max-width: 360px;

    height: 3px;

    margin: 14px 0 20px;

    background: #f15a16;

}


/* =========================================================
   PARAGRAPHS
========================================================= */

.scs-optimization-intro-content p {

    margin: 0 0 13px;

    color: #526174;

    font-size: 12px;

    line-height: 1.75;

}


.scs-optimization-intro-content p:last-child {

    margin-bottom: 0;

}


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

.scs-optimization-intro-image {

    width: 100%;

    height: 310px;

    overflow: hidden;

    border-radius: 6px;

    background: #eef3f6;

}


.scs-optimization-intro-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


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

@media (max-width: 900px) {

    .scs-optimization-intro {

        padding: 50px 0;

    }


    .scs-optimization-intro-container {

        width: calc(100% - 70px);

        grid-template-columns: 1fr 1fr;

        gap: 35px;

    }


    .scs-optimization-intro-content h2 {

        font-size: 28px;

    }


    .scs-optimization-intro-image {

        height: 280px;

    }

}


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

@media (max-width: 600px) {

    .scs-optimization-intro {

        padding: 42px 0;

    }


    .scs-optimization-intro-container {

        width: calc(100% - 36px);

        display: flex;

        flex-direction: column;

        gap: 28px;

        align-items: stretch;

    }


    .scs-optimization-intro-content {

        max-width: none;

    }


    .scs-optimization-intro-content h2 {

        font-size: 25px;

        line-height: 1.12;

    }


    .scs-optimization-section-line {

        max-width: 100%;

        margin-top: 12px;

    }


    .scs-optimization-intro-content p {

        font-size: 11px;

        line-height: 1.65;

    }


    .scs-optimization-intro-image {

        width: 100%;

        height: 230px;

    }

}


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

@media (max-width: 380px) {

    .scs-optimization-intro-container {

        width: calc(100% - 30px);

    }


    .scs-optimization-intro-content h2 {

        font-size: 23px;

    }


    .scs-optimization-intro-image {

        height: 210px;

    }

}

/* =========================================================
   PROCESS OPTIMIZATION & SIMULATION
   SCOPE SECTION
========================================================= */

.scs-optimization-scope {

    width: 100%;

    padding: 60px 0;

    background: #f6f9fc;

}


.scs-optimization-scope-container {

    width: calc(100% - 116px);

    max-width: 1200px;

    margin: 0 auto;

}


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

.scs-optimization-scope-heading {

    max-width: 760px;

    margin: 0 auto 32px;

    text-align: center;

}


.scs-optimization-scope-heading
.scs-optimization-section-label {

    display: inline-block;

    margin-bottom: 8px;

    padding: 5px 8px;

    background: rgba(241, 90, 22, 0.08);

    color: #f15a16;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 2px;

}


.scs-optimization-scope-heading h2 {

    margin: 0;

    color: #082d58;

    font-family: "Roboto", sans-serif;

    font-size: 30px;

    line-height: 1.15;

    font-weight: 700;

}


.scs-optimization-scope-heading h2 span {

    color: #f15a16;

}


/* =========================================================
   ORANGE UNDERLINE
========================================================= */

.scs-optimization-scope-line {

    width: 42px;

    height: 3px;

    margin: 12px auto 16px;

    background: #f15a16;

}


.scs-optimization-scope-heading p {

    max-width: 680px;

    margin: 0 auto;

    color: #526174;

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   SCOPE GRID
========================================================= */

.scs-optimization-scope-grid {

    display: grid;

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

    gap: 14px;

}


/* =========================================================
   SCOPE CARD
========================================================= */

.scs-optimization-scope-card {

    position: relative;

    min-height: 80px;

    padding: 19px 20px 18px 22px;

    background: #ffffff;

    border: 1px solid #dce5ed;

    border-radius: 5px;

    overflow: hidden;

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

}


/* =========================================================
   LEFT ORANGE ACCENT
========================================================= */

.scs-optimization-scope-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 3px;

    height: 100%;

    background: #f15a16;

}


.scs-optimization-scope-card:hover {

    transform: translateY(-3px);

    border-color: #cbd8e4;

    box-shadow:
        0 8px 20px rgba(3, 38, 83, 0.09);

}


/* =========================================================
   NUMBER + HEADING
========================================================= */

.scs-optimization-scope-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}


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

.scs-optimization-scope-number {

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #082d58;

    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

}


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

.scs-optimization-scope-card h3 {

    margin: 0;

    color: #082d58;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;

}


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

.scs-optimization-scope-card p {

    margin: 0;

    color: #526174;

    font-size: 14px;

    line-height: 1.55;

}


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

@media (max-width: 900px) {

    .scs-optimization-scope {

        padding: 52px 0;

    }


    .scs-optimization-scope-container {

        width: calc(100% - 70px);

    }


    .scs-optimization-scope-heading {

        margin-bottom: 28px;

    }


    .scs-optimization-scope-heading h2 {

        font-size: 27px;

    }


    .scs-optimization-scope-grid {

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

        gap: 12px;

    }


    .scs-optimization-scope-card {

        min-height: 135px;

    }


    .scs-optimization-scope-card h3 {

        font-size: 12px;

    }


    .scs-optimization-scope-card p {

        font-size: 9px;

    }

}


/* =========================================================
   MOBILE
   2 × 2 × 2
========================================================= */

@media (max-width: 600px) {

    .scs-optimization-scope {

        padding: 42px 0;

    }


    .scs-optimization-scope-container {

        width: calc(100% - 36px);

    }


    .scs-optimization-scope-heading {

        margin-bottom: 25px;

    }


    .scs-optimization-scope-heading h2 {

        font-size: 24px;

        line-height: 1.12;

    }


    .scs-optimization-scope-heading p {

        font-size: 9px;

        line-height: 1.6;

    }


    .scs-optimization-scope-line {

        margin: 11px auto 14px;

    }


    /* -----------------------------------------
       TWO COLUMNS
    ----------------------------------------- */

    .scs-optimization-scope-grid {

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

        gap: 10px;

    }


    /* -----------------------------------------
       CARD
    ----------------------------------------- */

    .scs-optimization-scope-card {

        min-height: 125px;

        padding: 14px 11px 14px 15px;

    }


    /* -----------------------------------------
       NUMBER + TITLE
    ----------------------------------------- */

    .scs-optimization-scope-title {

        gap: 8px;

        margin-bottom: 10px;

    }


    .scs-optimization-scope-number {

        width: 29px;

        height: 29px;

        font-size: 8px;

    }


    .scs-optimization-scope-card h3 {

        font-size: 10px;

        line-height: 1.3;

    }


    .scs-optimization-scope-card p {

        font-size: 8px;

        line-height: 1.5;

    }

}


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

@media (max-width: 380px) {

    .scs-optimization-scope-container {

        width: calc(100% - 30px);

    }


    .scs-optimization-scope-heading h2 {

        font-size: 22px;

    }


    .scs-optimization-scope-grid {

        gap: 8px;

    }


    .scs-optimization-scope-card {

        min-height: 120px;

        padding: 12px 9px 12px 13px;

    }


    .scs-optimization-scope-title {

        gap: 7px;

        margin-bottom: 9px;

    }


    .scs-optimization-scope-number {

        width: 27px;

        height: 27px;

        font-size: 7.5px;

    }


    .scs-optimization-scope-card h3 {

        font-size: 9px;

    }


    .scs-optimization-scope-card p {

        font-size: 7.5px;

        line-height: 1.5;

    }

}