main {

    p {
        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: 700;
        line-height: 35px;
    }

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

    .bold {
        font-weight: 700;
    }

    /* 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%);
            top: 27%;
            left: 50%;

            h1 {
                color: #F48120;
                text-align: center;
                font-size: 42px;
                font-style: normal;
                font-weight: 400;
                line-height: 52px;
                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;
                    padding: 0px 10px;
                }
            }
        }
    }

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

        p {
            color: #FFF;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: 24px;
        }

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

            p {
                font-size: 16px;
            }
        }
    }

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

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

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

        .main-part {
            margin-bottom: 23px;

            .main-section {
                display: flex;
                flex-direction: row;
                justify-content: center;
                gap: 60px;
                align-items: baseline;
                margin-top: 40px;

                .left-part {
                    display: flex;
                    flex-direction: column;
                    gap: 36px;
                    width: auto;

                    p {
                        font-size: 18px;
                        font-weight: 500;
                    }

                    .box-container {
                        width: 100%;
                        height: auto;
                        display: flex;
                        flex-direction: column;
                        gap: 32px;

                        .box {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            gap: 23px;
                            align-items: center;

                            .img1 {
                                width: 163.166px;
                                height: auto;

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

                            .img2 {
                                width: 163.166px;
                                height: auto;
                            }

                            p {
                                font-size: 16px;
                                font-weight: 500;
                            }
                        }
                    }
                }

                .right-part {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    gap: 36px;
                    width: 60%;

                    .cards {
                        display: flex;

                        .card {
                            width: 217px;
                            height: 211px;

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

                    .ref {
                        text-align: center;
                        font-size: 10px;
                        font-style: italic;
                        font-weight: 300;
                        line-height: 14px;
                    }
                }
            }
        }

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

                .upper-part {
                    margin-bottom: 60px;

                    p {
                        font-size: 14px;
                    }
                }

                .main-part {
                    h2 {
                        font-size: 20px;
                    }

                    .main-section {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 40px;

                        .left-part {
                            width: 100%;
                            flex-direction: column;
                            gap: 20px;
                            justify-content: space-around;
                            align-items: center;

                            p {
                                font-size: 16px;
                            }

                            .box-container {
                                flex-direction: row;
                                justify-content: space-around;
                                align-items: center;

                                .box {
                                    max-width: 160px;
                                    width: 100%;
                                    height: auto;
                                    flex-direction: column;
                                    justify-content: flex-start;
                                    align-items: center;
                                    gap: 20px;

                                    .img1,
                                    .img2 {
                                        width: 110px;

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

                                    p {
                                        font-size: 14px;
                                        text-align: center;
                                    }
                                }
                            }
                        }

                        .right-part {
                            width: 100%;
                            gap: 0px;
                            align-items: flex-start;

                            p {
                                font-size: 14px;
                            }

                            .cards {
                                flex-direction: row;
                                gap: 16px;
                                width: 100%;
                                margin-top: 20px;

                                .card {
                                    width: 100%;
                                    height: auto;

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

                            .ref {
                                font-size: 10px;
                                align-self: center;
                                margin-top: 10px;
                                margin-bottom: 20px;
                            }
                        }
                    }
                }
            }
        }

    }

}

/* <!-- Section 4 - Case --> */
.case {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 100px;

    .left-part {
        width: 40%;

        p {
            margin-bottom: 37px;
        }

        ul {
            padding-left: 14px;

            li {
                padding-bottom: 15px;
                font-size: 16px;
                font-style: normal;
                line-height: 24px;
            }
        }
    }

    .right-part {
        width: 50%;

        .cards {
            display: flex;
            flex-direction: row;
            gap: 25px;
            margin-top: 40px;

            .card {
                width: 263.398px;
                height: 334px;

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

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 0;
        padding-bottom: 60px;

        .left-part,
        .right-part {
            width: 100%;
        }

        .left-part {
            h2 {
                font-size: 20px;
            }

            p {
                font-size: 14px;
                margin-bottom: 20px;
            }

            ul {
                padding-left: 18px;

                li {
                    font-size: 14px;
                    line-height: 24px;
                }
            }
        }

        .right-part {
            h2 {
                font-size: 20px;
            }

            p {
                font-size: 14px;
            }

            .cards {
                flex-direction: row;

                .card {
                    width: 100%;
                    height: auto;

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

/* <!-- Section 5 - Feedback --> */
.feedback {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 60px;
    margin-bottom: 100px;
    background-color: #FEE6D3;
    max-width: 1030px;
    margin-inline: auto;

    .left-part {
        width: 60%;

        h2 {
            font-size: 28px;
        }

        p {
            margin-bottom: 35px;
            margin-top: 42px;
        }

        .ref {
            color: #58595B;
            font-size: 16px;
            font-style: italic;
            font-weight: 400;
            line-height: 24px;
        }
    }

    .right-part {
        width: 336.146px;
        height: 277px;

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

    @media (max-width: 768px) {
        display: flex;
        flex-direction: column;
        padding: 0px;
        margin-bottom: 60px;

        .left-part {
            width: 100%;
            padding: 0px 30px;

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

            p {
                font-size: 14px;
                margin-top: 10px;
                margin-bottom: 0px;
            }

            .ref {
                font-size: 14px;
                margin-top: 20px;
                margin-bottom: 30px;
            }
        }

        .right-part {
            width: 275px;
            height: 227px;
            margin-bottom: 30px;
        }
    }
}

/* <!-- Section 6 - Graphs --> */
.graphs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;

    .graph-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .img-container {
            height: 361px;
            width: 100%;
            margin-top: 40px;

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

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

        .graph-card {
            h2 {
                font-size: 20px;
            }

            .img-container {
                height: auto;
                margin-top: 10px;

                img {
                    height: auto;
                }
            }
        }

        .img-container {
            width: 100%;
            height: 223px;

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

/* <!-- Section 7 - qualities --> */
.qualities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 60px;

    .card {
        /* display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center; */
        max-width: 270px;

        .img-container {
            width: 60px;
            height: 60px;
            margin-top: 40px;

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

    }

    @media (max-width: 768px) {
        & {
            grid-template-columns: 1fr;

            .card {
                width: 100%;
                min-width: 100%;
                display: flex;
                gap: 0;
                justify-content: space-between;
                height: auto;
                align-items: start;

                .img-container {
                    min-width: 60px;
                    margin-top: 25px;

                    svg {
                        width: 40px;
                        height: 40px;
                    }
                }

                .card-content {
                    h3 {
                        font-size: 16px;
                    }

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

/* <!-- Section 8 - Analysis -->  */
.analysis {
    margin-bottom: 60px;

    .cards {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 50px;

        .card1 {
            flex: 1;
            width: 397px;
            height: 430px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 12px;
            text-align: center;

            .top {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100px;
                border-radius: 12px 12px 0 0;

                .triangle {
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-left: 15px solid transparent;
                    border-right: 15px solid transparent;
                    border-top: 15px solid #f00;
                    bottom: -15px;
                }

                .top-p {
                    font-size: 20px;
                    font-weight: bold;
                    color: white;
                    margin: 0;
                }
            }

            &.performance {
                .top {
                    background-color: #ff8c1a;

                    .triangle {
                        border-top: 15px solid #ff8c1a;
                    }

                }

                .main {
                    .content {
                        p {
                            padding-block: 30px;
                            font-size: 16px;
                        }
                    }
                }
            }

            &.mild .top {
                background-color: #f7941d;

                .triangle {
                    border-top: 15px solid #f7941d;
                }
            }

            &.stainless .top {
                background-color: #80C342;

                .triangle {
                    border-top: 15px solid #80C342;
                }
            }

            .main {
                padding: 20px;

                p {
                    padding: 20px;
                    font-size: 14px;
                    color: #333;

                    &.border-top {
                        border-top: 1px solid #eee;
                    }

                    &.font-bold {
                        font-weight: 500;
                    }
                }
            }
        }
    }

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

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

        .cards {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;

            .card1 {
                width: 100%;
                max-width: 100%;
                height: auto;

                &.performance {
                    .top {
                        .top-p {
                            font-size: 18px;
                            line-height: 20.252px;
                        }
                    }

                    .main {
                        .content {
                            p {
                                padding-block: 20px;
                                font-size: 14px;
                            }
                        }
                    }
                }

                .top {
                    .top-p {
                        font-size: 18px;
                        line-height: 20.252px;
                    }
                }

                .main {
                    .content {
                        p {
                            padding-block: 20px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}


/* <!-- Section 9 - project scope -->  */

.project-scope {
    padding: 40px 0px;

    .order-header {
        gap: 20px;
        flex-wrap: wrap;

        h3 {
            font-size: 24px;
            font-weight: bold;
            margin-top: 40px;
            margin-bottom: 10px;
        }

        .order-text {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            p {
                font-size: 16px;
                line-height: 24px;
                margin: 0;
                margin-right: 40px;
                width: 696px;
            }

            .total-order {
                background: #fce5d3;
                padding: 10px 15px;
                font-weight: bold;
                white-space: nowrap;
                font-size: 16px;

                span {
                    font-weight: normal;
                }
            }
        }

    }

    .company-row {
        display: flex;
        gap: 40px;
        margin-top: 50px;

        .company {
            width: 50%;
            flex-wrap: wrap;
            margin-bottom: 40px;

            ul {
                padding-left: 18px;

                li {
                    font-size: 16px;
                    padding-right: 10px;
                    line-height: 24px;

                    strong {
                        font-weight: 600;
                    }
                }
            }

            .data-grid {
                display: flex;
                gap: 20px;
                margin-top: 40px;
                flex-wrap: wrap;
                align-items: start;

                .box {
                    background: #fff;
                    border: 1px solid #ddd;
                    width: 48%;

                    .header {
                        background-color: #f7941d;
                        color: white;
                        font-weight: bold;
                        padding-block: 25px;
                        text-align: center;
                        font-size: 16.992px;
                        font-weight: 700;
                        line-height: 22.656px;
                    }

                    &:nth-child(odd) .header {
                        background-color: #F48120;
                    }

                    .box-container {
                        padding-inline: 50px;

                        .row {
                            padding: 10px;
                            border-top: 1px solid #eee;
                            text-align: center;
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 22.656px;
                            color: #333;
                        }
                    }
                }
            }
        }
    }

    .footer-note {
        margin-top: 30px;
        font-size: 16px;
        font-weight: 400;
        color: #000000;
    }

    @media (max-width: 768px) {
        h2 {
            font-size: 20px;
        }

        .order-header {
            flex-direction: column;
            align-items: flex-start;

            h3 {
                font-size: 18px;
                margin-top: 15px;
            }

            .order-text {
                flex-direction: column;

                p {
                    width: auto;
                    font-size: 14px;
                    margin-right: 0;
                    margin-top: 10px;
                }
            }

            .order-text {

                .total-order {
                    font-size: 14px;
                    margin-top: 10px;
                }
            }
        }

        .company-row {
            flex-direction: column;
            margin-top: 30px;
            gap: 40px;

            .company {
                width: 100%;
                margin-bottom: 10px;

                ul {
                    li {
                        font-size: 14px;
                    }
                }

                .data-grid {
                    margin-top: 20px;
                    flex-direction: column;

                    .box {
                        width: 100%;

                        .header {
                            padding-block: 20px;
                        }

                        .box-container {
                            padding-inline: 80px;
                        }
                    }
                }
            }
        }

        .footer-note {
            margin-top: 10px;
            font-size: 14px
        }
    }
}

/* Section 10 - Future Scope  */

.future-scope {
    padding: 40px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;

    .left {
        flex: 1;
        min-width: 280px;

        /* max-width: 502px; */
        /* max-width: 40%; */
        h2 {
            color: #f48120;
            font-size: 30px;
            margin-bottom: 20px;
            margin-top: 0;
        }

        p {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 16px;
        }
    }

    .right {
        flex: 1;
        min-width: 280px;
        /* max-width: 600px; */
        /* max-width: 50%; */
        display: flex;
        flex-wrap: wrap;
        /* allows wrapping */
        gap: 30px;

        .card {
            display: flex;
            width: 250px;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;

            img {
                width: 48px;
                height: auto;
            }

            h3 {
                margin: 0;
                font-size: 18px;
                font-weight: 600;
                color: #000;
            }

            p {
                margin: 0;
                font-size: 16px;
                color: #555;
                margin-top: 8px;
            }
        }
    }

    @media (max-width: 768px) {
        & {
            gap: 30px;

            .left {
                h2 {
                    font-size: 20px;
                }

                p {
                    font-size: 14px;
                }
            }

            .content {
                flex-direction: column;

            }

            .right {
                display: grid;
                grid-template-columns: 1fr;
                /* flex-wrap: wrap; */
                gap: 30px;

                .card {
                    width: 100%;
                    flex-direction: row;
                    align-items: flex-start;
                    gap: 20px;

                    img {
                        width: 48px;
                        height: 48px;
                        object-fit: cover;
                        overflow: visible;
                    }

                    h3 {
                        font-size: 16px;
                    }

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


/* <!-- 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;
            }
        }
    }
}

/* Sales CTA (ACF): keep banner link clickable if main img uses pointer-events: none */
.contact-section .sales-cta-link {
    display: inline-block;
    cursor: pointer;
}

.contact-section .sales-cta-link img {
    pointer-events: auto;
}