main {

    p {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    h1 {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    h2 {
        color: #F48120;
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: 35px;
    }

    h3 {
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
    }

    .bold {
        font-weight: 700;
    }

    .web {
        display: block;
    }

    .mobile {
        display: none;
    }

    @media (max-width: 768px) {

        h2 {
            font-size: 20px !important;
            line-height: 30px !important;
        }

        p {
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
        }

        .web {
            display: none;
        }

        .mobile {
            display: block;
        }
    }

    /* Section 1 - Hero  */
    .hero {
        height: 100%;
        width: 100%;
        position: relative;

        .img-container {
            height: 100vh;
            width: 100%;

            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }

        .text-part {
            position: absolute;
            transform: translate(-50%, -50%);
            bottom: 0%;
            left: 50%;

            h1 {
                color: #FFF;
                text-align: center;
                font-size: 48px;
                font-style: normal;
                font-weight: 700;
                line-height: 64px;
                text-transform: uppercase;
            }

            p {
                color: #000;
                text-align: center;
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 24px;
            }
        }

        @media (max-width: 768px) {
            .text-part {
                width: 335px;

                h1 {
                    font-size: 28px;
                    line-height: 34px;
                }

                p {
                    font-size: 16px !important;
                    padding: 0px 10px;
                }
            }
        }
    }

    /* <!-- Section 2 - Introduction --> */
    .introduction {
        padding: 32px 0px;
        background: #F48120;

        .text-part-upper {
            p {
                color: #FFF;
                font-size: 29px;
                font-style: normal;
                font-weight: 400;
                line-height: 42px;
            }
        }

        .text-part {
            p {
                color: #FFF;
                text-align: center;
                font-size: 18px;
                font-style: normal;
                font-weight: 600;
                line-height: 26px;
            }
        }

        @media (max-width: 768px) {
            padding: 20px 5px;

            .text-part-upper {
                p {
                    font-size: 20px !important;
                    line-height: 24px !important;
                    text-align: center;
                }
            }

            .text-part {
                p {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 24px;
                }
            }

        }
    }

    /* <!-- Section 3 - Introduction: Transforming  --> */
    .marine-environments {
        margin: 40px auto 50px auto;

        .upper-part {
            /* margin-bottom: 120px; */

            .p1 {
                margin-bottom: 23px;
            }
        }

        .main-part {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-self: start;
            margin-top: 40px;

            .content-part {
                width: 48%;
            }

            .img1 {
                width: 50%;
            }
        }

        @media (max-width: 768px) {
            & {
                margin-bottom: 20px;
                margin-top: 20px;

                .upper-part {

                    p {
                        font-size: 14px;
                    }
                }

                .main-part {
                    flex-direction: column;
                    gap: 32px;
                    margin-bottom: 30px;
                    margin-top: 0px;

                    .content-part,
                    .img1 {
                        width: 100%;
                    }
                }
            }
        }

    }

    /* <!-- Section 5 - Table part --> */
    .table-part {
        margin-top: 60px;
        margin-bottom: 30px;

        .p11 {
            margin-bottom: 60px;
        }

        .table-wrapper {

            .comparison-table {
                width: 100%;
                overflow-x: auto;
                margin: 32px 0;

                table {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 8px 8px;

                    thead {
                        tr {
                            th {
                                padding: 12px 16px;
                                font-size: 16px;
                                font-weight: 600;
                                text-align: center;
                            }

                            .col-param,
                            .col-carbon,
                            .col-stainless {
                                background-color: #f58220;
                                color: #ffffff;
                            }

                            .col-param {
                                width: 240px;
                            }
                        }
                    }

                    tbody {

                        tr:nth-child(odd) {

                            .param,
                            .carbon {
                                background: #B3B3B3;
                                color: #ffffff;
                                font-weight: 500;
                            }
                        }

                        tr:nth-child(even) {

                            .param,
                            .carbon {
                                background: #E6E6E6;
                                color: #000000;
                                font-weight: 500;
                            }
                        }

                        td.stainless {
                            background: #78be20;
                            color: #ffffff;
                        }

                        td.highlight.light {
                            background: #dff3d1;
                            color: #2a2a2a;
                        }

                        td {
                            padding: 16px;
                            font-size: 14px;
                            line-height: 1.4;
                            color: #ffffff;
                            font-weight: 500;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }

        .icon {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 6px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        @media (max-width: 768px) {
            & {
                margin-top: 20px;
                margin-bottom: 0px;

                .table-wrapper {
                    position: relative;

                    .comparison-table {

                        table {
                            width: max-content;

                            thead {
                                tr {
                                    th {
                                        text-align: left;
                                    }
                                }
                            }

                        }

                    }
                    .gradient {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 20%;
                        height: 100%;
                        background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
                    }
                }

                .p11 {
                    margin-bottom: 0px;
                }
            }
        }
    }

    /* <!-- Section 11 - Enquiry --> */

    .enquiry-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 88px;
        margin-top: 100px;
        margin-bottom: 100px;

        .icon {
            img {
                width: 240px;
                height: 240px;
            }
        }

        .text-content {
            display: flex;
            flex-direction: column;

            h3 {
                font-size: 28px;
                font-weight: 700;
                color: #000;
            }

            a {
                width: fit-content;
                background-color: #f48120;
                color: #fff;
                border: none;
                padding: 10px 20px;
                margin-top: 20px;
                font-size: 18px;
                font-weight: 700;
            }
        }

        @media (max-width: 768px) {
            flex-direction: column;
            text-align: center;
            gap: 0px;
            margin-block: 60px;

            .icon {
                img {
                    width: 158px;
                    height: 158px;
                }
            }

            .text-content {
                align-items: center;

                h3 {
                    font-size: 20px;
                    margin-top: 20px;
                    /* margin-bottom: 20px; */
                    padding-left: 70px;
                    padding-right: 70px;
                }

                a {
                    font-size: 14px;
                }
            }
        }
    }

    /* <!-- Section 7 - Case Spotlight 1 --> */
    .case-spotlight-1 {
        .img-web {
            margin: 60px 80px;

            img {
                height: 100%;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            & {
                .img-web {
                    margin: 40px 0px;
                }
            }
        }
    }

    /* <!-- Section 8 - Graph 1 --> */
    .graph-1 {
        .img-web {
            margin: 60px 80px;

            img {
                height: 100%;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            & {
                .img-web {
                    margin: 50px 0px;
                }
            }
        }
    }

    /* <!-- Section 9 - reference --> */
    .reference-part {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 30px;

        .left,
        .right {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .img1 {
                img {
                    height: 100%;
                    width: 100%;
                }
            }

            p {
                font-size: 12px !important;
                font-style: italic;
                margin-top: 16px;
            }
        }

        @media (max-width: 768px) {
            & {
                flex-direction: column;

                .left,
                .right {
                    width: 100%;

                    p {
                        text-align: center;
                    }
                }
            }
        }

    }

    /* <!-- Section 9 - Client feedback --> */
    .client-feedback {
        .img-web {
            margin: 80px 80px;

            img {
                height: 100%;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            & {
                .img-web {
                    margin: 0;
                }
            }
        }
    }

    .line {
        width: 86%;
        margin-inline: auto;
        height: 2px;
        background-color: #F48120;
        margin-bottom: 90px;
        align-content: center;
    }

    /* <!-- Section 12 - truck-container --> */
    .truck-container {
        .img-web {
            margin: 80px 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                height: 100%;
                width: 100%;
            }

            p {
                font-size: 14px !important;
                font-style: italic;
                margin-top: 16px;
            }
        }

        @media (max-width: 768px) {
            & {
                .img-web {
                    margin: 0;

                    p {
                        text-align: center;
                    }
                }
            }
        }

    }

    /* <!-- Section 13 - What’s Next --> */

    .what-next-wrapper {

        .main {

            .heading {
                width: 60%;
                margin-inline: auto;
                margin-top: 55px;
                margin-bottom: 55px;

                .line {
                    width: 100%;
                    margin-top: 20px;
                    background-color: #F48120;
                }
            }

            .cards {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                row-gap: 70px;

                .card {
                    height: 348px;
                    width: 380px;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-start;

                    .icon {
                        width: 171px;
                        height: 167px;
                        pointer-events: none;

                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }

                    h4 {
                        color: #F48120;
                    }

                    p {
                        text-align: center;
                        width: 65%;
                    }

                    .bg {
                        position: absolute;
                        bottom: 0;
                        pointer-events: none;
                    }

                    .bg-2 {
                        position: absolute;
                        bottom: 0;
                        pointer-events: none;
                        width: 101.5%;
                        height: 70%;
                    }
                }
            }

            .content {
                margin-top: 110px;
                margin-bottom: 40px;
            }

            .get-in-touch {
                display: flex;
                flex-direction: row;
                gap: 30px;

                .cards {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 12px;
                    margin-top: 15px;

                    p {
                        margin: 0;
                    }

                }
            }

            .line {
                width: 100%;
                background-color: #000;
                margin-top: 60px;
                margin-bottom: 60px;
            }

            @media (max-width: 768px) {
                & {
                    .heading {
                        width: 80%;
                        text-align: center;
                    }

                    .ch-50 {
                        height: 398px !important;
                    }

                    .cards {
                        row-gap: 40px;
                    }

                    .content {
                        margin-top: 0px;
                        margin-bottom: 0px;
                    }

                    .line {
                        margin-top: 20px;
                        margin-bottom: 20px;
                    }

                    .get-in-touch {
                        flex-direction: column;
                        gap: 0px;
                        align-items: flex-start;
                    }
                }
            }
        }

    }

}