﻿.mfg {
    font-family: 'Poppins',sans-serif;
    color: #07152d;
    background: #fff
}

    .mfg * {
        box-sizing: border-box
    }

.mfg-wrap {
    width: 1180px;
    max-width: calc(100% - 40px);
    margin: auto
}

.mfg-k {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color:white;
    margin-bottom: 8px
}

.mfg h1, .mfg h2, .mfg h3, .mfg p {
    font-family: 'Poppins',sans-serif
}

.mfg h2 {
    font-size: 31px;
    line-height: 1.18;
    margin: 0 0 14px;
    font-weight: 700;
    color: #07152d
}

.mfg p {
    font-size: 15px;
    line-height: 1.75;
    color: #435066
}


/* HERO CONTAINER */
.mfg-hero {
    position: relative;
    min-height: 535px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #04162b;
}

/* BACKGROUND VIDEO */
.mfg-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

/* DARK GRADIENT OVER VIDEO */
.mfg-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4,22,43,.94) 0%, rgba(4,22,43,.82) 38%, rgba(4,22,43,.24) 68%, rgba(4,22,43,.06) 100% );
    z-index: 1;
    pointer-events: none;
}

/* CONTENT ABOVE VIDEO */
.mfg-hero > .mfg-wrap {
    position: relative;
    z-index: 2;
    width: 1180px;
    max-width: calc(100% - 40px);
    margin: auto;
}

.mfg-hero-content {
    width: 650px;
    max-width: 100%;
    padding: 75px 0 62px;
    color: #fff;
}

/* MOBILE */
@media (max-width: 767px) {
    .mfg-hero {
        min-height: 590px;
    }

    .mfg-hero-overlay {
        background: rgba(4,22,43,.70);
    }

    .mfg-hero-content {
        padding: 58px 0;
    }
}


/* VIDEO BACKGROUND */
/*.mfg-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}*/

/* DARK GRADIENT */
/*.mfg-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4,22,43,.94) 0%, rgba(4,22,43,.82) 38%, rgba(4,22,43,.24) 68%, rgba(4,22,43,.06) 100% );
    z-index: 1;
    pointer-events: none;
}*/

/* HERO CONTENT */
/*.mfg-hero > .mfg-wrap {
    position: relative;
    z-index: 2;
    width: 1180px;
    max-width: calc(100% - 40px);
}*/

/* MOBILE */
/*@media (max-width: 767px) {
    .mfg-hero {
        min-height: 590px;
    }

    .mfg-hero-video {
        object-position: center;
    }

    .mfg-hero-overlay {
        background: rgba(4,22,43,.65);
    }
}*/









.mfg-hero-content {
    width: 650px;
    max-width: 100%;
    padding: 75px 0 62px;
    color: #fff
}

.mfg-hero .mfg-k {
    color: #fff
}

.mfg-hero h1 {
    font-size: 48px;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 20px;
    font-weight: 700;
    letter-spacing: -1px
}

.mfg-hero p {
    font-size: 17px;
    line-height: 1.7;
    color: #fff;
    max-width: 625px;
    margin: 0 0 28px
}

.mfg-btn {
    display: inline-block;
    background: #27a6c7;
    color: #fff !important;
    text-decoration: none;
    padding: 15px 27px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px
}

    .mfg-btn i {
        margin-left: 10px
    }

/* HERO FACTS */
.mfg-facts {
    background: #fff;
    border-bottom: 1px solid #e7edf1
}

.mfg-facts-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

.mfg-fact {
    padding: 25px 20px;
    border-right: 1px solid #dce7ec;
    display: flex;
    align-items: center;
    gap: 15px
}

    .mfg-fact:last-child {
        border-right: 0
    }

    .mfg-fact i {
        font-size: 28px;
        color: #20a6c8;
        width: 35px;
        text-align: center
    }

    .mfg-fact strong {
        display: block;
        font-size: 20px;
        line-height: 1.15;
        color: #07152d
    }

    .mfg-fact span {
        display: block;
        font-size: 12px;
        color: #657186;
        margin-top: 4px
    }

.mfg-sec {
    padding: 68px 0
}

.mfg-soft {
    background: #f3fafc
}
.mfg-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}
.mfg-photo {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(6,31,51,.10);
}

    .mfg-photo img {
        display: block;
        width: 100%;
        height: auto;
    }
@media (max-width: 767px) {
    .mfg-photo {
        height: auto;
        box-shadow:none;
    }

        .mfg-photo img {
            width: 100%;
            height: auto;
            object-fit: initial;
        }
}
.mfg-lead {
    font-size: 17px !important;
    color: #27364d !important
}

/* PRODUCTION */
.mfg-head {
    display: flex;
    justify-content: space-between;
    gap: 55px;
    align-items: flex-end;
    margin-bottom: 32px
}

    .mfg-head > div {
        max-width: 590px
    }

    .mfg-head > p {
        max-width: 490px;
        margin: 0
    }

.mfg-grid8 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

.mfg-card {
    background: #fff;
    padding: 25px 22px;
    min-height: 205px;
    border: 1px solid #e5edf1;
    box-shadow: 0 6px 20px rgba(7,21,45,.035)
}

    .mfg-card i {
        font-size: 27px;
        color: #20a6c8;
        margin-bottom: 17px
    }

    .mfg-card h3 {
        font-size: 16px;
        line-height: 1.25;
        margin: 0 0 9px;
        color: #07152d
    }

    .mfg-card p {
        font-size: 13px;
        line-height: 1.6;
        margin: 0
    }

/* FORMATS */
.mfg-format {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: center
}

.mfg-range {
    background: #08233e;
    padding: 42px;
    color: #fff
}

    .mfg-range .big {
        font-size: 54px;
        font-weight: 700;
        line-height: 1;
        color: #fff
    }

    .mfg-range .label {
        font-size: 15px;
        margin-top: 9px;
        color: #d8edf4
    }

.mfg-pack {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 24px
}

    .mfg-pack span {
        background: #eef8fb;
        padding: 12px 10px;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: #17314b
    }

/* LPG */
.mfg-lpg {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 360px;
    background: #08233e
}

.mfg-lpg-photo {
    background: url('Edited Gas tank.png') center/cover no-repeat
}

.mfg-lpg-copy {
    padding: 55px;
    color: #fff
}

    .mfg-lpg-copy .mfg-k, .mfg-lpg-copy h2, .mfg-lpg-copy p {
        color: #fff
    }

/* CATEGORIES */
.mfg-cats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.mfg-cat {
    background: #fff;
    border: 1px solid #e5edf1;
    padding: 24px;
    position: relative
}

    .mfg-cat i {
        color: #20a6c8;
        font-size: 25px;
        margin-bottom: 15px
    }

    .mfg-cat h3 {
        font-size: 17px;
        margin: 0 0 8px
    }

    .mfg-cat p {
        font-size: 13px;
        line-height: 1.6;
        margin: 0
    }

/* NON AEROSOL */
.mfg-band {
    background: linear-gradient(90deg,#1ca3c5,#1486ad);
    color: #fff
}

.mfg-band-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    padding: 44px 0
}

.mfg-band h2, .mfg-band p {
    color: #fff
}

.mfg-band p {
    margin: 0;
    max-width: 760px
}

/* WORK MODELS */
.mfg-models {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.mfg-model {
    padding: 31px;
    background: #fff;
    border-top: 4px solid #20a6c8;
    box-shadow: 0 7px 25px rgba(7,21,45,.06)
}

    .mfg-model i {
        font-size: 30px;
        color: #20a6c8;
        margin-bottom: 17px
    }

    .mfg-model h3 {
        font-size: 19px;
        margin: 0 0 10px
    }

    .mfg-model p {
        font-size: 13px;
        margin: 0
    }

/* QUALITY */
.mfg-quality {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 50px;
    align-items: center
}

.mfg-quality-box {
    background: #f3fafc;
    padding: 35px
}

.mfg-quality-points {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    margin-top: 20px
}

    .mfg-quality-points div {
        background: #fff;
        border: 1px solid #e3edf1;
        padding: 17px;
        font-size: 13px;
        font-weight: 600
    }

    .mfg-quality-points i {
        color: #20a6c8;
        margin-right: 8px
    }

/* CTA */
.mfg-cta {
    background: linear-gradient(90deg,rgba(10,152,188,.96),rgba(7,113,157,.89)), url('images/manufacturing/jipco-production-line.jpg') center/cover no-repeat;
}

.mfg-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 50px 0
}

.mfg-cta h2, .mfg-cta p, .mfg-cta .mfg-k {
    color: #fff
}

.mfg-cta p {
    margin: 0;
    max-width: 730px
}

.mfg-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0
}

.mfg-btn-white {
    background: #fff;
    color: #087da1 !important
}

.mfg-btn-outline {
    background: transparent;
    border: 2px solid #fff
}

@media(max-width:991px) {
    .mfg-hero h1 {
        font-size: 40px
    }

    .mfg-facts-grid, .mfg-grid8 {
        grid-template-columns: repeat(2,1fr)
    }

    .mfg-intro, .mfg-format, .mfg-lpg, .mfg-quality {
        grid-template-columns: 1fr
    }

    .mfg-photo {
      
    }

    .mfg-head {
        display: block
    }

        .mfg-head > p {
            max-width: none
        }

    .mfg-cats {
        grid-template-columns: repeat(2,1fr)
    }

    .mfg-lpg-photo {
        min-height: 250px
    }

    .mfg-models {
        grid-template-columns: 1fr
    }

    .mfg-cta-inner {
        display: block
    }

    .mfg-actions {
        margin-top: 25px
    }
}

@media(max-width:767px) {
    .mfg-wrap {
        max-width: calc(100% - 30px)
    }

    .mfg-hero {
        min-height: 590px;
        background-position: 58% center
    }

        .mfg-hero:before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(4,22,43,.28)
        }

    .mfg-hero-content {
        position: relative;
        z-index: 2;
        padding: 58px 0
    }

    .mfg-hero h1 {
        font-size: 35px;
        line-height: 1.12
    }

    .mfg-hero p {
        font-size: 15px
    }

    .mfg-facts-grid {
        grid-template-columns: 1fr 1fr
    }

    .mfg-fact {
        padding: 18px 10px;
        display: block;
        text-align: center
    }

        .mfg-fact:nth-child(2) {
            border-right: 0
        }

        .mfg-fact strong {
            font-size: 17px
        }

    .mfg-sec {
        padding: 48px 0
    }

    .mfg h2 {
        font-size: 26px
    }

    .mfg-grid8, .mfg-cats {
        grid-template-columns: 1fr
    }

    .mfg-card {
        min-height: 0
    }

    .mfg-pack {
        grid-template-columns: repeat(2,1fr)
    }

    .mfg-lpg-copy {
        padding: 35px 25px
    }

    .mfg-band-inner {
        display: block
    }

    .mfg-quality-points {
        grid-template-columns: 1fr
    }

    .mfg-actions {
        display: block
    }

        .mfg-actions a {
            display: block;
            text-align: center;
            margin-bottom: 10px
        }
}
.mfg-quality .mfg-k, .mfg-sec .mfg-k {
    color: #20a6c8
}
.mfg-band-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 50px 40px;
    margin: 0;
    display: block;
    text-align: center;
}

    .mfg-band-inner > div {
        width: 100%;
        max-width: 950px;
        margin: 0 auto;
    }

    .mfg-band-inner .mfg-k {
        text-align: center;
    }

    .mfg-band-inner h2 {
        text-align: center;
        color: #fff;
    }

    .mfg-band-inner p {
        max-width: 950px;
        margin: 0 auto;
        text-align: center;
        color: #fff;
    }

/* Manufacturing Capabilities — final integration fixes */
.mfg .mfg-hero { overflow: hidden; }
.mfg .mfg-hero > .mfg-wrap { position: relative; z-index: 1; }
.mfg .mfg-hero-content { position: relative; z-index: 1; }
.mfg .mfg-k { color: #20a6c8; }
.mfg .mfg-hero .mfg-k, .mfg .mfg-cta .mfg-k, .mfg .mfg-lpg .mfg-k { color: #fff; }
.mfg .const-about img { display: block; width: 100%; height: auto; border-radius: 6px; }
.mfg .mfg-cta { background: linear-gradient(90deg, #0b789e 0%, #087197 100%); }
.mfg .mfg-cta-inner { display: flex; text-align: left; }
.mfg .mfg-cta-inner > div:first-child { flex: 1 1 auto; min-width: 0; }
.mfg .mfg-actions { display: flex; flex: 0 0 auto; }
.mfg .mfg-btn-outline { color: #fff !important; }
.mfg .mfg-btn:hover { text-decoration: none; filter: brightness(.94); }
.mfg .mfg-cta h2 { color: #fff; }
.mfg .mfg-cta p { color: #fff; }
.mfg .mfg-quality-points div { line-height: 1.6; }
@media(max-width:991px) {
  .mfg .mfg-cta-inner { display: block; }
  .mfg .mfg-actions { margin-top: 25px; flex-wrap: wrap; }
}
@media(max-width:767px) {
  .mfg .mfg-hero:before { pointer-events: none; }
  .mfg .mfg-cta-inner { padding: 42px 15px; }
  .mfg .mfg-actions { display: block; }
  .mfg .mfg-actions a { display: block; margin: 0 0 12px; text-align: center; }
  .mfg .mfg-hero h1 { overflow-wrap: anywhere; }
  .mfg .mfg-fact strong { font-size: 16px; }
}
