* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --orange: #e96f32;
    --orange-dark: #c95720;
    --dark: #11191e;
    --text: #596368;
    --border: #e6e9ea;
    --white: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: #f5f6f6;
    color: var(--dark);
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

/* ===========top bar=========== */
.top-bar {
    height: 28px;
    background: var(--dark);
    color: #ffffff;
    font-size: 12px;

    position: sticky;
}

.top-inner {
    width: min(1320px, calc(100% - 48px));
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.top-right {
    display: flex;
    align-items: center;
    gap: 35px;
}

.top-right a {
    transition: .2s;
}

.top-right a:hover {
    color: var(--orange);
}

/* =================navbar========================== */
.navbar {
    width: 100%;
    height: 86px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    width: min(1320px, calc(100% - 48px));
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =============logo======================== */
.logo {
    display: flex;
    align-items: center;
    gap: 11px;
}

.logo-box {
    width: 53px;
    height: 53px;
    background: #111c21;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.logo-box span {
    width: 5px;
    background: var(--orange);
    transform: skew(-10deg);
}

.logo-box span:nth-child(1) {
    height: 20px;
}

.logo-box span:nth-child(2) {
    height: 32px;
}

.logo-box span:nth-child(3) {
    height: 25px;
}

.logo-name h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 25px;
    letter-spacing: 1.8px;
    line-height: .9;
}

.logo-name small {
    display: block;
    font-size: 7px;
    letter-spacing: 2px;
    color: #8a9498;
    margin-top: 5px;
}


.logo-name img {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* ================nav menu============ */
.nav-menu {
    height: 100%;
}

.nav-menu>ul {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;

    margin-left: 18px;
}

.nav-menu>ul>li {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-menu>ul>li>a,
.nav-dropdown-btn {
    height: 45px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: .2s;
}

.nav-menu>ul>li>a:hover,
.nav-dropdown-btn:hover,
.nav-menu>ul>li>a.active {
    color: var(--orange);
}

.down-arrow {
    font-size: 12px;
}

/* =====================================
   QUOTE
===================================== */
.quote-li {
    margin-left: 8px;
}

.quote-btn {

    height: 35px !important;

    padding: 0 17px !important;

    border-radius: 30px;

    background: var(--orange) !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    box-shadow: 0 8px 22px rgba(233, 111, 50, .22);

    transition: .25s !important;

}


.quote-btn:hover {

    background: var(--orange-dark) !important;

    transform: translateY(-2px);

}


.quote-btn span {

    font-size: 17px;

    margin-left: 5px;

}


/* =====================================
   FIRST DROPDOWN
===================================== */

.has-dropdown {

    position: relative;

}


.dropdown {

    position: absolute;

    top: calc(100% - 1px);

    left: 0;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 0 0 10px 10px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .14);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px);

    transition: .22s ease;

}


.has-dropdown:hover>.dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}


/* =====================================
   SERVICES DROPDOWN
===================================== */

.services-dropdown {

    width: 285px;

    padding: 7px;

}


/* =====================================
   INDUSTRIES DROPDOWN
===================================== */

.industries-dropdown {

    width: 250px;

    padding: 7px;

}

.dropdown-item {
    position: relative;
}


.dropdown-item>button {
    width: 100%;
    height: 30px;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: #4f5a5f;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: .2s;

}


.dropdown-item>button:hover {

    color: var(--orange);

    background: #f7f8f8;

}


/* =====================================
   THIRD LEVEL
===================================== */

.submenu {
    position: absolute;
    left: calc(100%);
    top: -7px;
    width: 285px;
    background: #ffffff;
    /* border: 1px solid var(--border); */
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(10px);
    transition: .22s ease;
}


.has-submenu:hover>.submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}


.submenu a {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    color: #596469;
    font-size: 14px;
    border-radius: 9px;
    transition: .2s;
}


.submenu a:hover {
    color: var(--orange);
    background: #f7f8f8;
}

.simple-link {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    color: #0B1220;
    font-size: 14px;
    border-radius: 8px;
}


.simple-link:hover {
    color: var(--orange);
    background: #f7f8f8;
}

.mobile-toggle {
    display: none;
    width: 45px;
    height: 42px;
    border: 1px solid #dfe3e4;
    background: #ffffff;
    border-radius: 7px;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    background: var(--dark);
    margin: 4px auto;
    transition: .25s;
}

.mobile-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


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

@media(max-width:1100px) {

    .nav-container {

        width: calc(100% - 30px);

    }


    .nav-menu>ul>li>a,
    .nav-dropdown-btn {

        padding: 0 10px;

        font-size: 13px;

    }


    .logo-name h2 {

        font-size: 22px;

    }


    .submenu {

        width: 250px;

    }

}


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

@media(max-width:850px) {

    .top-bar {

        height: 30px;

    }


    .top-inner {

        width: calc(100% - 25px);

        font-size: 10px;

    }


    .top-right {

        display: none;

    }


    .navbar {

        height: 72px;

    }


    .nav-container {

        width: calc(100% - 28px);

    }


    .mobile-toggle {

        display: block;

    }


    .nav-menu {

        position: absolute;

        top: 72px;

        left: 0;

        width: 100%;

        height: auto;

        max-height: calc(100vh - 102px);

        overflow-y: auto;

        background: #ffffff;

        border-top: 1px solid var(--border);

        box-shadow: 0 20px 40px rgba(0, 0, 0, .12);

        display: none;

    }


    .nav-menu.open {

        display: block;

    }


    .nav-menu>ul {

        display: block;

        height: auto;

        padding: 8px 14px 18px;

    }


    .nav-menu>ul>li {

        display: block;

        height: auto;

        border-bottom: 1px solid var(--border);

    }


    .nav-menu>ul>li>a,
    .nav-dropdown-btn {

        width: 100%;

        height: 52px;

        justify-content: space-between;

        padding: 0 8px;

        font-size: 14px;

    }


    /* QUOTE */

    .quote-li {

        border: none !important;

        padding-top: 12px;

    }


    .quote-btn {

        width: 100%;

        justify-content: center !important;

    }


    /* MOBILE DROPDOWN */

    .dropdown {

        position: static;

        width: 100%;

        display: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: none;

        border: none;

        border-top: 1px solid var(--border);

        border-radius: 0;

        box-shadow: none;

        padding: 5px;

    }


    .has-dropdown.open>.dropdown {

        display: block;

    }


    /* MOBILE SUBMENU */

    .submenu {

        position: static;

        width: 100%;

        display: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: none;

        border: none;

        border-top: 1px solid var(--border);

        border-radius: 0;

        box-shadow: none;

        padding-left: 12px;

    }


    .has-submenu.open>.submenu {

        display: block;

    }


    .dropdown-item>button {

        height: 48px;

    }


    .submenu a {

        min-height: 46px;

        font-size: 13px;

    }

}


/* =====================================
   SMALL PHONE
===================================== */

@media(max-width:500px) {

    .logo-box {

        width: 46px;

        height: 46px;

    }


    .logo-name h2 {

        font-size: 20px;

    }


    .logo-name small {

        font-size: 5.5px;

        letter-spacing: 1.5px;

    }


    .location {

        font-size: 9px;

    }

}

/* ==============hero section=============== */

.hero-slider {
    position: relative;
    width: 100%;
    height: calc(80vh - 114px);
    min-height: 550px;
    overflow: hidden;
}

.slides-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    display: flex;
    align-items: center;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-content {
    width: min(1320px, calc(100% - 48px));
    margin-left: max(24px, calc((100% - 1320px) / 2));
    max-width: 650px;
    padding-left: 0;
    color: var(--white);
    z-index: 2;
    text-align: left;
}

/* Badge Style */
.hero-badge {
    display: inline-block;
    background: var(--orange);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Title & Text */
.hero-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.hero-description {
    font-size: 16px;
    line-height: 1.6;
    color: #d1d5db;
    margin-bottom: 30px;
}

/* Button Style */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--dark);
    font-weight: 700;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 6px;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: var(--orange);
    color: var(--white);
    transform: translateY(-2px);
}

/* Arrows Style */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(17, 25, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: 0.3s ease;
    z-index: 10;
}

.slider-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
}

.slider-arrow.prev {
    left: 24px;
}

.slider-arrow.next {
    right: 24px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 38px;
    }

    .hero-description {
        font-size: 14px;
    }

    .slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* =============about section============= */
:root {
    --orange: #e96f32;
    --orange-hover: #d55c20;
    --dark: #0f172a;
    --text: #475569;
    --bg-light: #f8fafc;
    --border: #e2e8f0;
}

.about-section {
    padding: 40px 0;
    background: #ffffff;
    overflow: hidden;
    width: 100%;
}

.about-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 70px;
    align-items: center;
}

/* Left Column: Image Wrapper */
.about-image-wrapper {
    position: relative;
    padding-right: 20px;
    padding-bottom: 20px;
}

.image-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.about-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-image-wrapper:hover .about-img {
    transform: scale(1.03);
}

/* Floating Badges Styling */
.exp-badge {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 14px 20px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 5;
}

.main-badge {
    bottom: 0;
    left: 0;
}

.project-badge {
    top: 25px;
    right: 0;
}

.badge-icon {
    width: 44px;
    height: 44px;
    background: var(--orange);
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.badge-icon.green-icon {
    background: #10b981;
}

.badge-text h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    margin: 0;
}

.badge-text p {
    font-size: 11.5px;
    color: var(--text);
    font-weight: 700;
    margin: 3px 0 0 0;
}

/* Right Column Content */
.about-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.about-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--dark);
    margin-bottom: 18px;
}

.about-title span {
    color: var(--orange);
}

.about-description {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 30px;
}

.about-description strong {
    color: var(--dark);
}

/* Highlights Grid (2x2 Layout) */
.about-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 35px;
}

.highlight-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.25s ease;
}

.highlight-card:hover {
    border-color: var(--orange);
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(233, 111, 50, 0.08);
}

.hl-icon {
    width: 38px;
    height: 38px;
    background: #ffffff;
    color: var(--orange);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.hl-info h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 2px 0;
}

.hl-info p {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    margin: 0;
}

/* Action Group */
.about-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--orange);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.about-btn:hover {
    background: var(--orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(233, 111, 50, 0.25);
}

.about-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.about-phone i {
    width: 40px;
    height: 40px;
    background: var(--dark);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.about-phone span {
    display: block;
    font-size: 11px;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 700;
}

.about-phone strong {
    font-size: 15px;
    color: var(--dark);
}

/* Responsive Rules */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-img {
        height: 420px;
    }
}

@media (max-width: 600px) {
    .about-highlights {
        grid-template-columns: 1fr;
    }

    .about-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .project-badge {
        display: none;
        /* Mobile space management */
    }
}

/* =================service section============================ */
.services-section {
    padding: 40px 0;
    background: #f8fafc;
}

.services-container {
    width: min(1380px, calc(100% - 48px));
    /* Grid span broad kiya for 4 cards */
    margin: 0 auto;
}

/* Header Styling */
.services-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 55px auto;
}

.services-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange, #f97316);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.services-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    line-height: 1.1;
    margin-bottom: 14px;
}

.services-subtitle {
    font-size: 15px;
    color: var(--text, #64748b);
    line-height: 1.6;
}

/* 4-COLUMN GRID LAYOUT FOR 8 CARDS */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Upar, 4 Neeche */
    gap: 24px;
}

/* Individual Service Card */
.service-card {
    background: #ffffff;
    border: 1px solid #eef1f4;
    border-radius: 16px;
    padding: 30px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
    will-change: transform;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-icon {
    width: 48px;
    height: 48px;
    background: #fff3ec;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background-color 0.3s ease;
}

.card-icon i {
    color: var(--orange, #f97316);
    transition: color 0.3s ease;
}

.card-number {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #cbd5e1;
    line-height: 1;
}

.service-card h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.service-card p {
    font-size: 13.5px;
    color: var(--text, #64748b);
    line-height: 1.6;
    margin-bottom: px;
}

.service-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
    text-decoration: none;
}

.service-link span {
    transition: transform 0.2s ease;
}

.service-link:hover {
    color: var(--orange, #f97316);
}

.service-link:hover span {
    transform: translateX(4px);
}

/* HOVER EFFECT */
.service-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--orange, #f97316) !important;
    box-shadow: 0 18px 35px rgba(249, 115, 22, 0.12) !important;
}

.service-card:hover .card-icon {
    background: var(--orange, #f97316);
}

.service-card:hover .card-icon i {
    color: #ffffff;
}

.service-card:hover h3 {
    color: var(--orange, #f97316);
}

/* ================= RESPONSIVE BREAKPOINTS ================= */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Laptop/Large Tablets: 2 columns */
        gap: 20px;
    }
}

@media (max-width: 650px) {
    .services-grid {
        grid-template-columns: 1fr;
        /* Mobile: Single Column */
    }

    .services-title {
        font-size: 34px;
    }
}

/* =============why choose us============ */
:root {
    --orange: #e96f32;
    --dark: #0f172a;
    --text: #475569;
    --border: #e2e8f0;
    --bg-light: #f8fafc;
}

.why-us-clean {
    padding: 40px 0;
    background: #ffffff;
    width: 100%;
}

.why-us-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 60px;
    align-items: center;
}

/* LEFT IMAGE COLUMN */
.why-img-box {
    position: relative;
    border-radius: 20px;
}

.why-main-photo {
    width: 100%;
    height: 540px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.why-photo-badge {
    position: absolute;
    bottom: 25px;
    left: 25px;
    background: var(--dark);
    padding: 16px 24px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.badge-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.badge-txt strong {
    display: block;
    font-size: 14px;
    color: #ffffff;
}

.badge-txt span {
    font-size: 11px;
    color: #94a3b8;
}

/* RIGHT TEXT COLUMN */
.why-sub-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.why-main-heading {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--dark);
    margin-bottom: 14px;
}

.why-main-heading span {
    color: var(--orange);
}

.why-intro-p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 30px;
}

/* REASONS LIST */
.why-reasons-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reason-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: background 0.25s ease;
}

.reason-item:hover {
    background: #c4d9ee;
}

.reason-icon {
    width: 44px;
    height: 44px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.reason-content h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 3px 0;
}

.reason-content p {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .why-us-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-main-photo {
        height: 400px;
    }
}

@media (max-width: 576px) {
    .why-main-heading {
        font-size: 32px;
    }

    .why-photo-badge {
        bottom: 15px;
        left: 15px;
        padding: 12px 18px;
    }

    .reason-item {
        padding: 10px 0;
    }
}

/* ===============gallery section============= */
/* =====================================
   GALLERY SIDE TABS WITH IN-SECTION SCROLL
===================================== */
:root {
    --orange: #e96f32;
    --dark: #0f172a;
    --text: #475569;
    --border: #e2e8f0;
    --bg-light: #f8fafc;
}

.gallery-scroll-section {
    padding: 40px 0;
    background: #e9ebeb;
    width: 100%;
}

.gallery-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 40px;
    align-items: start;
}

/* LEFT SIDEBAR */
.gallery-sidebar {
    position: sticky;
    top: 100px;
}

.gallery-sub-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.gallery-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 12px;
}

.gallery-title span {
    color: var(--orange);
}

.gallery-desc {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 28px;
}

/* BUTTONS VERTICAL GROUP */
.gallery-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--dark);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.filter-btn i {
    color: var(--orange);
    font-size: 16px;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--orange);
    color: #ffffff;
    border-color: var(--orange);
}

.filter-btn:hover i,
.filter-btn.active i {
    color: #ffffff;
}

/* RIGHT SCROLLABLE CONTAINER */
.gallery-scroll-box {
    max-height: 570px;
    /* Is height ke andar hi scroll hoga */
    overflow-y: auto;

    padding-right: 12px;
}

/* Custom Scrollbar Styling */
.gallery-scroll-box::-webkit-scrollbar {
    width: 6px;
}

.gallery-scroll-box::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}

.gallery-scroll-box::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 10px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD STYLING */
.gallery-card {
    background: #ffffff;
    border: 2px solid var(--dark-bg);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 1s ease, box-shadow 0.3s ease;
}

.gallery-card:hover {
    /* transform: translateY(-3px); */
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08);
    margin-top: 5px;
    border: 2px solid var(--dark-bg);
}

.img-wrapper {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-card:hover .img-wrapper img {
    transform: scale(1.05);
}

.card-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.card-info {
    padding: 16px;
}

.card-info h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px 0;
}

.card-info p {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .gallery-container {
        grid-template-columns: 1fr;
    }

    .gallery-sidebar {
        position: static;
    }

    .gallery-btn-group {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .filter-btn {
        width: auto;
    }

    .gallery-scroll-box {
        max-height: 500px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ============testimonial section=========== */
/* =====================================
   INDUSTRA TESTIMONIALS SECTION (COMPLETE)
===================================== */
:root {
    --orange: #e96f32;
    --dark: #0f172a;
    --text: #475569;
    --bg-light: #f8fafc;
    --border: #e2e8f0;
}

.testimonials-section {
    padding: 40px 0;
    background: #ffffff;
    overflow: hidden;
    width: 100%;
}

.testimonials-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    position: relative;
}

/* Header Styling */
.testimonials-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 45px auto;
}

.testimonials-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.testimonials-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
    margin-bottom: 12px;
}

.testimonials-subtitle {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
}

/* Wrapper & Track Setup */
.testimonials-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 15px 0 25px 20px;

    border-radius: 20px;
}

.testimonials-track {
    display: flex;
    gap: 24px;
    will-change: transform;
}

/* Card Sizing (Desktop: Exactly 3 Cards) */
.testimonial-card {
    flex: 0 0 calc((100% - 48px) / 3);
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    border-color: var(--orange);
    background: #ffffff;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(233, 111, 50, 0.1);
}

/* Stars Rating */
.card-stars {
    color: #f59e0b;
    font-size: 14px;
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

/* Review Text */
.review-text {
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 24px;
    font-style: italic;
}

/* Client Profile Info */
.client-info {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.avatar {
    width: 42px;
    height: 42px;
    background: var(--dark);
    color: #ffffff;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.testimonial-card:hover .avatar {
    background: var(--orange);
}

.client-details h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
    line-height: 1.2;
}

.client-details p {
    font-size: 12px;
    color: var(--text);
    margin: 2px 0 0 0;
}

/* Slider Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--orange);
    width: 22px;
    border-radius: 10px;
}

/* Responsive Media Queries */
@media (max-width: 992px) {

    /* Tablet: 2 Cards */
    .testimonial-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

@media (max-width: 650px) {

    /* Mobile: 1 Card */
    .testimonial-card {
        flex: 0 0 100%;
        padding: 24px 20px;
    }

    .testimonials-title {
        font-size: 32px;
    }
}

/* ============contact section========================== */
.contact-section {
    padding: 40px 0;
    background: #ececec;
    width: 100%;
}

.contact-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Styling */
.contact-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.contact-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
    margin-bottom: 16px;
}

.contact-subtitle {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Contact Info Items */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.info-icon {
    width: 44px;
    height: 44px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.info-text {
    font-size: 14.5px;
    color: var(--dark);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.phone-link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.phone-link:hover {
    color: var(--orange);
}

/* Right Column: Card Form Styling */
.contact-card {
    background: var(--bg-light);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    margin-bottom: 24px;
}

.form-group label {
    font-size: 11px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--dark);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(233, 111, 50, 0.15);
}

.form-group textarea {
    resize: vertical;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--orange);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.submit-btn:hover {
    background: var(--orange-hover);
    transform: translateY(-2px);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: 24px 20px;
    }

    .contact-title {
        font-size: 34px;
    }
}

/* =============footer section================= */

/* =====================================
   INDUSTRA FOOTER SECTION
===================================== */
:root {
    --orange: #e96f32;
    --dark-bg: #0f172a;
    --card-bg: #1e293b;
    --text-light: #94a3b8;
    --border-color: #334155;
}

.footer-section {
    background: var(--dark-bg);
    color: #ffffff;
    padding: 30px 0 15px 0;
    width: 100%;
}

.footer-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* 4-Column Layout Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1.4fr;
    gap: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

/* Brand Column */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.logo-icon {
    width: 38px;
    height: 38px;
    background: var(--orange);
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.footer-logo h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0.5px;
}

.brand-desc {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Social Buttons Circle */
.social-links {
    display: flex;
    gap: 12px;
}

.social-btn {
    width: 36px;
    height: 36px;
    background: var(--card-bg);
    color: var(--text-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background: var(--orange);
    color: #ffffff;
    transform: translateY(-3px);
}

/* Column Title */
.col-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
    text-transform: uppercase;
}

/* Footer Links List */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--text-light);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
    color: var(--orange);
    padding-left: 4px;
}

/* Contact Info List */
.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    color: var(--text-light);
    line-height: 1.5;
}

.contact-info-list .icon {
    color: var(--orange);
    font-size: 15px;
    margin-top: 3px;
    flex-shrink: 0;
}

.contact-info-list a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-info-list a:hover {
    color: var(--orange);
}

/* Footer Bottom Strip */
.footer-bottom {
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
}

.bottom-links {
    display: flex;
    gap: 20px;
}

.bottom-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bottom-links a:hover {
    color: var(--orange);
}

/* Responsive Queries */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* ====================atjdvsfuylhkwevlifhefj===================== */

/* =====================================
   EQUIPMENT INSTALLATION PAGE STYLES
===================================== */
:root {
    --orange: #e96f32;
    --dark: #0f172a;
    --text: #475569;
    --border: #e2e8f0;
    --bg-light: #f8fafc;
}

/* Common Typography & Sub-tags */
.section-tag {
    display: inline-block;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px;
}

.section-header h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
}

.section-header p {
    font-size: 14.5px;
    color: var(--text);
    margin-top: 8px;
}

.eq-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* 1. HERO SECTION */
.page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 100px 0 80px;
    text-align: center;
    color: #ffffff;
}

.page-hero-container {
    width: min(900px, calc(100% - 48px));
    margin: 0 auto;
}

.hero-sub-tag {
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 16px;
}

.page-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 18px;
}

.page-title span {
    color: var(--orange);
}

.page-desc {
    font-size: 16px;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-cta-btns {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.btn-primary {
    background: var(--orange);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-primary:hover {
    background: #d55c20;
}

.btn-outline {
    border: 1px solid #334155;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-outline:hover {
    border-color: var(--orange);
    color: var(--orange);
}

/* 2. OVERVIEW SECTION */
.eq-overview-section {
    padding: 90px 0;
    background: #ffffff;
}

.eq-grid-2 {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.eq-text h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
}

.eq-text p {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 24px;
}

.eq-check-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eq-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.eq-check-list i {
    color: var(--orange);
}

.eq-image-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.eq-image-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
}

.img-floating-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.img-floating-tag i {
    color: var(--orange);
}

/* 3. CAPABILITIES GRID */
.eq-capabilities-section {
    padding: 90px 0;
    background: var(--bg-light);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.cap-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 22px;
    transition: 0.3s ease;
}

.cap-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08);
}

.cap-icon {
    width: 48px;
    height: 48px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.cap-card h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.cap-card p {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}

/* 4. PROCESS STEPS */
.eq-process-section {
    padding: 90px 0;
    background: #ffffff;
}

.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.step-card {
    background: var(--bg-light);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: 16px;
    position: relative;
}

.step-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--orange);
    margin-bottom: 12px;
}

.step-card h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
}

.step-card p {
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.45;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .eq-grid-2 {
        grid-template-columns: 1fr;
    }

    .capabilities-grid,
    .process-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-title {
        font-size: 40px;
    }
}

@media (max-width: 576px) {

    .capabilities-grid,
    .process-steps-grid {
        grid-template-columns: 1fr;
    }

    .hero-cta-btns {
        flex-direction: column;
    }
}

/* =============pump installation  page================== */

:root {
    --orange: #e96f32;
    --dark: #0f172a;
    --text: #475569;
    --border: #e2e8f0;
    --bg-light: #f8fafc;
}

.pipe-section {
    padding: 90px 0;
    width: 100%;
}

.bg-white {
    background: #ffffff;
}

.bg-light {
    background: var(--bg-light);
}

.pipe-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

.pipe-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.pipe-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.pipe-grid-2.align-start {
    align-items: start;
}

/* SECTION 1: HERO OVERVIEW */
.pipe-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 46px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 16px;
}

.pipe-title span {
    color: var(--orange);
}

.pipe-desc {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 28px;
}

.pipe-feature-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pipe-f-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pipe-f-item i {
    width: 42px;
    height: 42px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.pipe-f-item h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px 0;
}

.pipe-f-item p {
    font-size: 13px;
    color: var(--text);
    margin: 0;
    line-height: 1.45;
}

.pipe-img-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.pipe-img-card img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.img-floating-stat {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background: var(--dark);
    color: #ffffff;
    padding: 16px 24px;
    border-radius: 14px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.img-floating-stat h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--orange);
    margin: 0;
    line-height: 1;
}

.img-floating-stat p {
    font-size: 11px;
    color: #94a3b8;
    margin: 4px 0 0 0;
    font-weight: 600;
}

/* SECTION 2: 3-COLUMNS WITH TOP IMAGES */
.pipe-header-center {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px;
}

.pipe-header-center h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.pipe-header-center p {
    font-size: 14.5px;
    color: var(--text);
}

.pipe-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pipe-service-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pipe-service-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08);
}

.card-img-box {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pipe-service-card:hover .card-img-box img {
    transform: scale(1.06);
}

/* .card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
} */

.card-body {
    padding: 22px;
}

.card-body h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.card-body p {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}

/* SECTION 3: PROCESS WITH STICKY IMAGE & STEPS */
.sticky-img {
    position: sticky;
    top: 100px;
}

.img-bottom-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.img-bottom-tag i {
    color: var(--orange);
}

.step-process-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    padding: 18px;
    border-radius: 14px;
    transition: 0.3s;
}

.step-item:hover {
    border-color: var(--orange);
    background: #ffffff;
}

.step-icon {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    background: var(--orange);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-info h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px 0;
}

.step-info p {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .pipe-grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .pipe-card-grid {
        grid-template-columns: 1fr;
    }

    .pipe-img-card img {
        height: 380px;
    }

    .sticky-img {
        position: static;
    }
}

@media (max-width: 576px) {
    .pipe-title {
        font-size: 34px;
    }
}

/* ================global reusable breadcrumb=====================*/
/* =====================================
   DARK TONE BREADCRUMB BANNER (DOUBLE HEIGHT)
===================================== */
:root {
    --orange: #e96f32;
    --dark: #0f172a;
    --border: #1e293b;
}

.page-banner-sm {
    background: var(--dark);
    /* Theme Dark Background */
    border-bottom: 1px solid var(--border);
    padding: 50px 0;
    /* Height doubled from 24px to 50px */
    width: 100%;
}

.banner-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.banner-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 32px;
    /* Slightly bigger font for better proportion */
    font-weight: 800;
    color: #ffffff;
    /* White text for contrast */
    margin: 0;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Breadcrumb Styling for Dark Background */
.site-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-breadcrumb li {
    font-size: 13.5px;
    font-weight: 600;
    color: #94a3b8;
}

.site-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.site-breadcrumb a i {
    font-size: 12px;
    color: var(--orange);
}

.site-breadcrumb a:hover {
    color: var(--orange);
}

.site-breadcrumb .sep {
    font-size: 10px;
    color: #64748b;
}

.site-breadcrumb .active {
    color: var(--orange);
    font-weight: 700;
}

/* Responsive Handling */
@media (max-width: 600px) {
    .page-banner-sm {
        padding: 35px 0;
    }

    .banner-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ==============composer installation page============ */
/* =====================================
   COMPRESSOR PAGE UNIQUE STYLES
===================================== */
.cmp-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

.cmp-section {
    padding: 80px 0;
}

.bg-white {
    background: #ffffff;
}

.bg-light {
    background: #f8fafc;
}

.cmp-sub-tag {
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

/* 1. HERO LAYOUT */
.cmp-hero-section {
    padding: 70px 0;
    background: #ffffff;
}

.cmp-hero-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 50px;
    align-items: center;
}

.cmp-hero-img-box {
    position: relative;
    border-radius: 16px;
}

.cmp-hero-img-box img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
}

.cmp-floating-badge {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: var(--dark);
    color: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.cmp-floating-badge i {
    color: var(--orange);
    font-size: 22px;
}

.cmp-floating-badge strong {
    display: block;
    font-size: 13px;
}

.cmp-floating-badge span {
    font-size: 11px;
    color: #94a3b8;
}

.cmp-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 16px;
}

.cmp-title span {
    color: var(--orange);
}

.cmp-lead {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
}

.cmp-quick-specs {
    display: flex;
    gap: 30px;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

.cmp-spec-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cmp-spec-item i {
    font-size: 24px;
    color: var(--orange);
}

.cmp-spec-item span {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.cmp-spec-item strong {
    font-size: 15px;
    color: var(--dark);
}

/* 2. FEATURE MATRIX GRID */
.cmp-section-head h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
}

.cmp-head-line {
    width: 60px;
    height: 4px;
    background: var(--orange);
    border-radius: 2px;
    margin-bottom: 40px;
}

.cmp-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cmp-matrix-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.cmp-matrix-card:hover {
    border-color: var(--orange);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.cmp-icon-wrap {
    width: 46px;
    height: 46px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.cmp-matrix-card h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.cmp-matrix-card p {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* 3. HORIZONTAL ROW CARDS */
.text-center {
    text-align: center;
}

.cmp-rows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}

.cmp-row-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    align-items: center;
}

.cmp-row-card.alt {
    grid-template-columns: 1fr 320px;
}

.cmp-row-img {
    height: 100%;
    min-height: 220px;
}

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

.cmp-row-info {
    padding: 30px;
}

.cmp-type-tag {
    background: rgba(15, 23, 42, 0.08);
    color: var(--dark);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}

.cmp-row-info h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.cmp-row-info p {
    font-size: 14px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .cmp-hero-grid {
        grid-template-columns: 1fr;
    }

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

    .cmp-row-card,
    .cmp-row-card.alt {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .cmp-matrix-grid {
        grid-template-columns: 1fr;
    }

    .cmp-quick-specs {
        flex-direction: column;
        gap: 15px;
    }
}

/* =================heat exchanger page========================== */
.hx2-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

.hx2-section {
    padding: 85px 0;
}

.bg-white {
    background: #ffffff;
}

.bg-light {
    background: #f8fafc;
}

.hx2-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.hx2-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.hx2-grid-2.align-center {
    align-items: center;
}

.hx2-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 16px;
}

.hx2-title span {
    color: var(--orange);
}

.hx2-text-lead {
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 24px;
}

/* TRUST BOX */
.hx2-trust-box {
    background: #f1f5f9;
    border-left: 4px solid var(--orange);
    padding: 20px;
    border-radius: 0 12px 12px 0;
}

.hx2-trust-box h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    color: var(--dark);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hx2-trust-box h4 i {
    color: var(--orange);
}

.hx2-trust-box ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hx2-trust-box li {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.5;
}

/* IMAGE WITH FLOATING BADGE */
.hx2-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.hx2-image-wrap img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: 16px;
}

.hx2-badge-float {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--dark);
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hx2-badge-float i {
    color: var(--orange);
    font-size: 24px;
}

.hx2-badge-float strong {
    display: block;
    font-size: 13px;
}

.hx2-badge-float span {
    font-size: 11px;
    color: #94a3b8;
}

/* HOW IT WORKS PROCESS GRID */
.hx2-header-center {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px;
}

.hx2-header-center h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.hx2-header-center p {
    font-size: 14.5px;
    color: #64748b;
}

.hx2-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.hx2-process-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: 0.3s ease;
}

.hx2-process-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
}

.hx2-p-img {
    position: relative;
    height: 160px;
}

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

.hx2-step-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--orange);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
}

.hx2-p-body {
    padding: 18px;
}

.hx2-p-body h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.hx2-p-body p {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* APPLICATIONS LIST */
.hx2-app-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.hx2-app-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hx2-app-item i {
    width: 38px;
    height: 38px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.hx2-app-item h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 3px 0;
}

.hx2-app-item p {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .hx2-grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

@media (max-width: 576px) {
    .hx2-process-grid {
        grid-template-columns: 1fr;
    }

    .hx2-title {
        font-size: 34px;
    }
}

/* ===============Pressure vessel page======================= */
.pv-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* 1. HERO SECTION */
.pv-premium-hero {
    padding: 85px 0;
    background: #ffffff;
}

.pv-hero-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.pv-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.pv-hero-text h1 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 16px;
}

.pv-hero-text h1 span {
    color: var(--orange);
}

.pv-hero-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 28px;
}

.pv-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pv-trust-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--orange);
    padding: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pv-trust-card i {
    font-size: 22px;
    color: var(--orange);
}

.pv-trust-card strong {
    display: block;
    font-size: 13.5px;
    color: var(--dark);
}

.pv-trust-card span {
    font-size: 11.5px;
    color: #64748b;
}

/* HERO MEDIA */
.pv-img-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.pv-img-frame img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

.pv-experience-tag {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--dark);
    color: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    text-align: center;
    border-bottom: 3px solid var(--orange);
}

.pv-experience-tag .num {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.pv-experience-tag .txt {
    font-size: 11px;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 2. SECTION HEADERS */
.pv-section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px;
}

.pv-sub-title {
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.pv-section-header h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
}

.pv-section-header p {
    font-size: 14.5px;
    color: #64748b;
}

.pv-section-header.light h2 {
    color: #ffffff;
}

.pv-section-header.light p {
    color: #94a3b8;
}

/* 3. TYPES SECTION */
.pv-types-section {
    padding: 85px 0;
    background: #f8fafc;
}

.pv-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.pv-type-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    transition: 0.3s ease;
}

.pv-type-card:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}

.pv-type-img {
    position: relative;
    width: 200px;
    flex-shrink: 0;
}

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

.pv-type-no {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--dark);
    color: var(--orange);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
}

.pv-type-info {
    padding: 24px;
}

.pv-type-info h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.pv-type-info p {
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* 4. WORKFLOW PROCESS SECTION */
.pv-process-section {
    padding: 85px 0;
    background: var(--dark);
    color: #ffffff;
}

.pv-workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pv-wf-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 28px 20px;
    border-radius: 14px;
    position: relative;
    transition: 0.3s ease;
}

.pv-wf-step:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--orange);
}

.pv-wf-icon {
    font-size: 28px;
    color: var(--orange);
    margin-bottom: 20px;
}

.step-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.pv-wf-content h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.pv-wf-content p {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* 5. APPLICATIONS SECTION */
.pv-apps-section {
    padding: 85px 0;
    background: #ffffff;
}

.pv-apps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.pv-app-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 28px 20px;
    border-radius: 16px;
    text-align: center;
    transition: 0.3s ease;
}

.pv-app-card:hover {
    border-color: var(--orange);
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.05);
}

.pv-app-icon {
    width: 50px;
    height: 50px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 18px;
}

.pv-app-card h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.pv-app-card p {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .pv-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .pv-types-grid {
        grid-template-columns: 1fr;
    }

    .pv-workflow,
    .pv-apps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .pv-type-card {
        flex-direction: column;
    }

    .pv-type-img {
        width: 100%;
        height: 180px;
    }

    .pv-trust-grid,
    .pv-workflow,
    .pv-apps-grid {
        grid-template-columns: 1fr;
    }

    .pv-hero-text h1 {
        font-size: 34px;
    }
}

/* ============biler installation page================= */
/* =====================================
   BOILER INSTALLATION UNIQUE STYLES
===================================== */
.bi-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* HERO DECK */
.bi-hero-deck {
    padding: 80px 0;
    background: #ffffff;
}

.bi-deck-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

.bi-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.bi-deck-text h1 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.15;
}

.bi-deck-text h1 span {
    color: var(--orange);
}

.bi-lead {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
}

.bi-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.bi-trust-pills span {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 6px;
}

.bi-trust-pills span i {
    color: var(--orange);
}

.bi-deck-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* SYSTEMS GRID */
.bi-systems-section {
    padding: 85px 0;
    background: #f8fafc;
}

.bi-section-head {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px;
}

.bi-tag-sub {
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.bi-section-head h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.bi-section-head p {
    font-size: 14.5px;
    color: #64748b;
}

.bi-systems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bi-sys-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 28px 24px;
    transition: 0.3s ease;
}

.bi-sys-card:hover {
    border-color: var(--orange);
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
}

.bi-sys-icon {
    width: 48px;
    height: 48px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.bi-sys-card h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.bi-sys-card p {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* PROCESS ROW */
.bi-process-wrapper {
    padding: 85px 0;
    background: var(--dark);
}

.text-white h2 {
    color: #ffffff !important;
}

.text-white p {
    color: #94a3b8 !important;
}

.bi-process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.bi-proc-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--orange);
    padding: 24px 20px;
    border-radius: 10px;
}

.proc-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--orange);
    margin-bottom: 10px;
}

.bi-proc-box h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.bi-proc-box p {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

/* APPLICATIONS & TRUST */
.bi-apps-section {
    padding: 85px 0;
    background: #ffffff;
}

.bi-apps-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
}

.bi-apps-text h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 12px;
}

.bi-apps-text p {
    font-size: 14.5px;
    color: #475569;
    margin-bottom: 20px;
}

.bi-use-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bi-use-list li {
    font-size: 13.5px;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bi-use-list i {
    color: var(--orange);
    margin-top: 3px;
}

.bi-trust-box-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
}

.bi-tb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 14px;
}

.bi-tb-header i {
    font-size: 24px;
    color: var(--orange);
}

.bi-tb-header h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.bi-tb-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tb-item strong {
    display: block;
    font-size: 14px;
    color: var(--dark);
    margin-bottom: 2px;
}

.tb-item p {
    font-size: 12.5px;
    color: #64748b;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 992px) {

    .bi-deck-grid,
    .bi-apps-wrapper {
        grid-template-columns: 1fr;
    }

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

    .bi-process-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {

    .bi-systems-grid,
    .bi-process-row {
        grid-template-columns: 1fr;
    }

    .bi-deck-text h1 {
        font-size: 34px;
    }
}

/* ============skid installation page=================== */
/* =====================================
   SKID INSTALLATION PAGE STYLES
===================================== */
.sk-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* HERO SECTION */
.sk-hero-section {
    padding: 80px 0;
    background: #ffffff;
}

.sk-hero-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

.sk-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3ec;
    color: var(--orange);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.sk-hero-content h1 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.15;
}

.sk-hero-content h1 span {
    color: var(--orange);
}

.sk-lead {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
}

.sk-pill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sk-pill-tags span {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 6px;
}

.sk-pill-tags span i {
    color: var(--orange);
}

.sk-hero-img-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.sk-hero-img-frame img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.sk-trust-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--dark);
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sk-trust-tag i {
    color: var(--orange);
    font-size: 24px;
}

.sk-trust-tag strong {
    display: block;
    font-size: 13px;
}

.sk-trust-tag span {
    font-size: 11px;
    color: #94a3b8;
}

/* NEW COMPONENTS GRID STYLING */
.sk-components-section {
    padding: 85px 0;
    background: #f8fafc;
}

.sk-header-center {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px;
}

.sk-sub-tag {
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.sk-header-center h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.sk-header-center p {
    font-size: 14.5px;
    color: #64748b;
}

.sk-comp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.sk-grid-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 26px 20px;
    position: relative;
    transition: all 0.3s ease;
}

.sk-grid-card:hover {
    border-color: var(--orange);
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
}

.sk-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sk-grid-icon {
    width: 48px;
    height: 48px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sk-card-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #cbd5e1;
}

.sk-grid-card h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
}

.sk-grid-card p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
}

/* APPLICATIONS & TRUST */
.sk-apps-section {
    padding: 85px 0;
    background: #ffffff;
}

.sk-apps-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
}

.sk-apps-info h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 12px;
}

.sk-apps-info p {
    font-size: 14.5px;
    color: #475569;
    margin-bottom: 24px;
}

.sk-use-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sk-ub-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sk-ub-item i {
    width: 38px;
    height: 38px;
    background: #fff3ec;
    color: var(--orange);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.sk-ub-item h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px 0;
}

.sk-ub-item p {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

.sk-trust-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
}

.sk-trust-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 14px;
}

.sk-trust-head i {
    font-size: 24px;
    color: var(--orange);
}

.sk-trust-head h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.sk-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sk-trust-list li {
    font-size: 13px;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.sk-trust-list i {
    color: var(--orange);
    margin-top: 2px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {

    .sk-hero-card,
    .sk-apps-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 576px) {
    .sk-comp-grid {
        grid-template-columns: 1fr;
    }

    .sk-hero-content h1 {
        font-size: 34px;
    }
}

/* =============indusrtial piping page============== */

.ip-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* BREADCRUMB BANNER */
.page-banner-sm {
    background: var(--dark, #0f172a);
    padding: 30px 0;
    color: #ffffff;
}

.banner-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.banner-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.site-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.site-breadcrumb a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s;
}

.site-breadcrumb a:hover {
    color: var(--orange, #f97316);
}

.site-breadcrumb .sep {
    font-size: 10px;
    color: #64748b;
}

.site-breadcrumb .active {
    color: var(--orange, #f97316);
    font-weight: 600;
}

/* HERO SECTION */
.ip-hero-section {
    padding: 80px 0;
    background: #ffffff;
}

.ip-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

.ip-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3ec;
    color: var(--orange, #f97316);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.ip-hero-content h1 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 16px;
    line-height: 1.15;
}

.ip-hero-content h1 span {
    color: var(--orange, #f97316);
}

.ip-lead {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
}

.ip-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ip-trust-badges span {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 8px 14px;
    border-radius: 6px;
}

.ip-trust-badges span i {
    color: var(--orange, #f97316);
}

.ip-hero-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .ip-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .ip-hero-content h1 {
        font-size: 34px;
    }

    .banner-container {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================carbon steel piping=============== */
.csp-container {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

/* SUB BREADCRUMB BAR */
.csp-sub-breadcrumb-bar {
    background: #0f172a;
    padding: 12px 0;
    border-bottom: 2px solid var(--orange, #f97316);
}

.csp-breadcrumb-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
}

.csp-bc-side-label {
    font-family: "Barlow Condensed", sans-serif;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Center Heading Styling */
.csp-bc-center-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

.csp-bc-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 13px;
}

.csp-bc-nav a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s;
}

.csp-bc-nav a:hover {
    color: #ffffff;
}

.csp-bc-nav i {
    font-size: 10px;
    color: #64748b;
}




/* SECTION BASE STYLES */
.csp-detail-section {
    padding: 70px 0;
    background: #f8fafc;
}

.csp-grid-reversed {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 50px;
    align-items: center;
}

/* IMAGE AREA */
.csp-media-box {
    position: relative;
}

.csp-media-box img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.csp-floating-badge {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: #0f172a;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.csp-floating-badge i {
    color: var(--orange, #f97316);
    font-size: 20px;
}

.csp-floating-badge strong {
    display: block;
    font-size: 13px;
}

.csp-floating-badge span {
    font-size: 11px;
    color: #94a3b8;
}

/* CONTENT AREA */
.csp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff3ec;
    color: var(--orange, #f97316);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.csp-content-box h2 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 14px;
}

.csp-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
}

.csp-spec-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.csp-spec-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.csp-spec-card i {
    color: var(--orange, #f97316);
    font-size: 18px;
    margin-top: 2px;
}

.csp-spec-card h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.csp-spec-card p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.csp-app-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.csp-app-tags span {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.csp-app-tags span i {
    color: var(--orange, #f97316);
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .csp-grid-reversed {
        grid-template-columns: 1fr;
    }
}


/* Mobile Responsive */
@media (max-width: 768px) {
    .csp-breadcrumb-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .csp-bc-nav {
        justify-content: center;
    }
}

/* =============quality policy section=========== */
.qp-light-section {
    padding: 40px 0;
    background: #ffffff;
    color: #1e293b;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.qp-container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

/* HEADER STYLING */
.qp-header {
    text-align: center;
    max-width: 1720px;
    margin: 0 auto 25px auto;
}

.qp-sub-title {
    color: var(--orange, #f97316);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 8px;
}

.qp-main-title {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 14px 0;
    line-height: 1.2;
}

.qp-divider {
    width: 60px;
    height: 4px;
    background: var(--orange, #f97316);
    margin: 0 auto 18px auto;
    border-radius: 2px;
}

.qp-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* 3-COLUMN FEATURE CARDS */
.qp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 20px;
}

.qp-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 32px 24px;
    transition: all 0.3s ease;
}

.qp-box:hover {
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
    transform: translateY(-4px);
}

/* Middle Card Highlight */
.qp-box.active-box {
    background: #ffffff;
    border: 2px solid var(--orange, #f97316);
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.08);
}

.qp-icon {
    width: 50px;
    height: 50px;
    background: #fff3ec;
    color: var(--orange, #f97316);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 20px;
}

.qp-box h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.qp-box p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Checklist inside cards */
.qp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
}

.qp-list li {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qp-list li:last-child {
    margin-bottom: 0;
}

.qp-list li i {
    color: var(--orange, #f97316);
    font-size: 12px;
}

/* BOTTOM TRUST STRIP */
.qp-trust-strip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.qp-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.qp-trust-item i {
    font-size: 28px;
    color: var(--orange, #f97316);
}

.qp-trust-item strong {
    display: block;
    font-size: 14px;
    color: #0f172a;
}

.qp-trust-item span {
    font-size: 12px;
    color: #64748b;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .qp-features-grid {
        grid-template-columns: 1fr;
    }

    .qp-trust-strip {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .qp-main-title {
        font-size: 30px;
    }

    .qp-box {
        padding: 24px 18px;
    }
}

/* ================ HSE section============ */
.hse-v3-section {
    padding: 40px 0;
    background: #f1f5f9;
    /* Soft Industrial Light Gray */
    color: #0f172a;
    font-family: 'Inter', sans-serif;
}

.hse-v3-container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* LEFT SIDE STYLING */
.hse-v3-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e2e8f0;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hse-v3-heading {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.hse-v3-heading span {
    color: var(--orange, #f97316);
}

.hse-v3-lead {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Left Stat Card */
.hse-v3-stat-card {
    background: #ffffff;
    border-left: 5px solid var(--orange, #f97316);
    padding: 20px;
    border-radius: 8px 12px 12px 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.hse-v3-stat-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--orange, #f97316);
    line-height: 1;
}

.hse-v3-stat-text strong {
    display: block;
    font-size: 15px;
    color: #0f172a;
}

.hse-v3-stat-text span {
    font-size: 12px;
    color: #64748b;
}

.hse-v3-iso-row {
    display: flex;
    gap: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.hse-v3-iso-row i {
    color: var(--orange, #f97316);
}

/* RIGHT SIDE STACKED LIST */
.hse-v3-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hse-v3-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

.hse-v3-item:hover {
    transform: translateX(8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--orange, #f97316);
}



/* Icon Variants */
.hse-v3-icon-box {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.hse-v3-icon-box.orange {
    background: #fff3ec;
    color: #f97316;
}

.hse-v3-icon-box.blue {
    background: #eff6ff;
    color: #2563eb;
}

.hse-v3-icon-box.green {
    background: #f0fdf4;
    color: #16a34a;
}

.hse-v3-tag {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.hse-v3-content h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.hse-v3-content p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
    .hse-v3-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .hse-v3-heading {
        font-size: 36px;
    }

    .hse-v3-item {
        flex-direction: column;
    }
}

/* =============carbon steel pipe============ */
/* =====================================
   PROCESS & CAPABILITIES (NO IMAGE LAYOUT)
===================================== */
.csp-process-section {
    padding: 80px 0;
    background: #f8fafc;
}

.csp-proc-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

/* Header */
.csp-proc-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.proc-tagline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.csp-proc-header h2 {
    font-size: 34px;
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 12px;
}

.csp-proc-header p {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
}

/* 4-Step Cards Grid */
.csp-proc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.proc-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 22px;
    position: relative;
    transition: all 0.3s ease;
}

.proc-card:hover {
    transform: translateY(-6px);
    border-color: var(--orange);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

/* Step Number Badge */
.proc-num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 26px;
    font-weight: 800;
    color: #e2e8f0;
    transition: 0.3s;
}

.proc-card:hover .proc-num {
    color: var(--orange);
}

/* Icon Box */
.proc-icon {
    width: 52px;
    height: 52px;
    background: #f1f5f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--orange);
    margin-bottom: 20px;
}

.proc-card h3 {
    font-size: 18px;
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 10px;
}

.proc-card p {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
}

/* Bottom Quick Info Strip */
.csp-info-strip {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

.info-strip-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-strip-item i {
    font-size: 28px;
    color: var(--orange);
}

.info-strip-item strong {
    display: block;
    font-size: 15px;
    color: var(--dark);
}

.info-strip-item span {
    font-size: 13px;
    color: var(--text);
}

.info-strip-divider {
    width: 1px;
    height: 35px;
    background: var(--border);
}

/* Responsive */
@media (max-width: 1024px) {
    .csp-proc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .csp-proc-grid {
        grid-template-columns: 1fr;
    }

    .csp-info-strip {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }

    .info-strip-divider {
        display: none;
    }
}


/* =====================================
   STAINLESS STEEL PIPING SECTION
===================================== */
.ss-detail-section {
    padding: 80px 0;
    background: #ffffff;
}

.ss-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

.ss-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

/* Badge */
.ss-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    /* Light Orange Tint */
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* Headings & Text */
.ss-content-box h2 {
    font-size: 34px;
    color: var(--dark);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
}

.ss-desc {
    font-size: 15px;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Specification Cards */
.ss-spec-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.ss-spec-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.ss-spec-card:hover {
    background: #ffffff;
    border-color: var(--orange);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.ss-spec-card i {
    font-size: 20px;
    color: var(--orange);
    background: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.ss-spec-card h4 {
    font-size: 16px;
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 4px;
}

.ss-spec-card p {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}

/* Material Grade Badges */
.ss-app-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
}

.ss-app-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: var(--dark);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.ss-app-tags span i {
    color: var(--orange);
}

/* Right Side Image Box */
.ss-media-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.ss-media-box img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* Floating Badge */
.ss-floating-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(17, 25, 30, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
}

.ss-floating-badge i {
    font-size: 26px;
    color: var(--orange);
}

.ss-floating-badge strong {
    display: block;
    font-size: 15px;
    color: #ffffff;
}

.ss-floating-badge span {
    font-size: 12.5px;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 992px) {
    .ss-grid {
        grid-template-columns: 1fr;
    }

    .ss-media-box img {
        height: 380px;
    }
}

/* =====================================
   STAINLESS STEEL GRADE COMPARISON (TAB DESIGN)
===================================== */
.ss-compare-section {
    padding: 80px 0;
    background: #f8fafc;
}

.ss-comp-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

/* Header */
.ss-comp-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 35px auto;
}

.ss-comp-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.ss-comp-header h2 {
    font-size: 34px;
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 10px;
}

.ss-comp-header p {
    font-size: 15px;
    color: var(--text);
}

/* Grade Tab Pills Selector */
.ss-tab-pills {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.ss-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ss-pill-btn i {
    color: var(--orange);
    font-size: 16px;
}

.ss-pill-btn:hover,
.ss-pill-btn.active {
    background: var(--dark);
    color: #ffffff;
    border-color: var(--dark);
}

.ss-pill-btn.active i {
    color: var(--orange);
}

/* Main Content Card Box */
.ss-grade-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

/* Left Info Content */
.ss-grade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.ss-grade-header h3 {
    font-size: 26px;
    color: var(--dark);
    font-weight: 800;
}

.ss-status-badge {
    background: #e0f2fe;
    color: #0284c7;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
}

.ss-grade-desc {
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Specs Table Inside Card */
.ss-specs-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 25px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed #cbd5e1;
}

.spec-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.spec-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

.spec-label i {
    color: var(--orange);
}

.spec-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dark);
}

/* Download Button */
.ss-spec-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.ss-spec-download-btn:hover {
    background: var(--dark);
}

/* Right Media Card */
.ss-grade-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.ss-grade-media img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.ss-media-overlay-card {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: rgba(17, 25, 30, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.overlay-icon i {
    font-size: 22px;
    color: var(--orange);
}

.ss-media-overlay-card strong {
    display: block;
    font-size: 14px;
}

.ss-media-overlay-card span {
    font-size: 12px;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 992px) {
    .ss-grade-card {
        grid-template-columns: 1fr;
        padding: 25px;
    }

    .ss-grade-media img {
        height: 280px;
    }
}

/* =====================================
   HDPE PIPING MASTER STYLES (SEPARATED SECTIONS)
===================================== */
.hdpe-master-section {
    padding: 80px 0 50px 0;
    background: #ffffff;
}

.hdpe-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

/* --- SUB-SECTION 1: OVERVIEW BLOCK --- */
.hdpe-overview-block {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px;
    align-items: center;
}

.hdpe-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.hdpe-intro-content h2 {
    font-size: 36px;
    color: var(--dark);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.hdpe-main-desc {
    font-size: 15px;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Highlight Bar */
.hdpe-highlight-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hdpe-hl-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #f8fafc;
    border-left: 4px solid var(--orange);
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
}

.hdpe-hl-item i {
    font-size: 22px;
    color: var(--orange);
    margin-top: 2px;
}

.hdpe-hl-item strong {
    display: block;
    font-size: 15px;
    color: var(--dark);
    margin-bottom: 2px;
}

.hdpe-hl-item span {
    font-size: 13px;
    color: var(--text);
}

/* Banner Card */
.hdpe-banner-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

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

.hdpe-banner-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(17, 25, 30, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #ffffff;
}

.hdpe-banner-overlay i {
    font-size: 26px;
    color: var(--orange);
}

.hdpe-banner-overlay strong {
    display: block;
    font-size: 15px;
}

.hdpe-banner-overlay span {
    font-size: 12.5px;
    color: #94a3b8;
}

/* --- SECTION HEADERS --- */
.hdpe-section-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 40px auto;
}

.hdpe-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.hdpe-section-header h2 {
    font-size: 32px;
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 10px;
}

.hdpe-section-header p {
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.6;
}

/* --- SUB-SECTION 2: APPLICATIONS GRID --- */
.hdpe-apps-section {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.hdpe-apps-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hdpe-app-card {
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: all 0.3s ease;
}

.hdpe-app-card:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.app-icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 102, 0, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 20px;
    flex-shrink: 0;
}

.hdpe-app-card h4 {
    font-size: 16px;
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 6px;
}

.hdpe-app-card p {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}

/* --- SUB-SECTION 3: JOINING TECHNOLOGIES (DARK ACCENT) --- */
.hdpe-tech-section {
    padding: 80px 0;
    background: var(--dark);
    color: #ffffff;
}

.hdpe-section-header.light-text h2 {
    color: #ffffff;
}

.hdpe-section-header.light-text p {
    color: #94a3b8;
}

.hdpe-sub-tag.dark-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--orange);
}

.hdpe-tech-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.hdpe-tech-box-large {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 35px;
    border-radius: 20px;
    position: relative;
    transition: 0.3s ease;
}

.hdpe-tech-box-large:hover {
    border-color: var(--orange);
    background: rgba(255, 255, 255, 0.07);
}

.tech-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tech-num {
    font-size: 32px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
}

.tech-head i {
    font-size: 28px;
    color: var(--orange);
}

.hdpe-tech-box-large h3 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 12px;
}

.hdpe-tech-box-large p {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 20px;
}

.tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--orange);
    background: rgba(255, 102, 0, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
}

/* Responsive */
@media (max-width: 992px) {

    .hdpe-overview-block,
    .hdpe-tech-split {
        grid-template-columns: 1fr;
    }

    .hdpe-apps-grid-3col {
        grid-template-columns: 1fr;
    }
}

/* ============upvc pipe page============ */
.upvc-hero-section {
    padding: 80px 0;
    background: #f8fafc;
}

.upvc-container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

/* SECTION 1: OVERVIEW CARD */
.upvc-overview-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 45px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.upvc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.upvc-info-side h2 {
    font-size: 34px;
    color: var(--dark);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 14px;
}

.upvc-desc {
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* Feature Items */
.upvc-feat-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upvc-feat-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.upvc-icon {
    width: 42px;
    height: 42px;
    background: #f1f5f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 18px;
    flex-shrink: 0;
}

.upvc-feat-item strong {
    display: block;
    font-size: 15px;
    color: var(--dark);
    margin-bottom: 2px;
}

.upvc-feat-item span {
    font-size: 13px;
    color: var(--text);
}

/* Right Media Box */
.upvc-media-side {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

.upvc-media-side img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.upvc-stat-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    padding: 16px 20px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.stat-circle {
    width: 36px;
    height: 36px;
    background: var(--orange);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.upvc-stat-box strong {
    display: block;
    font-size: 14px;
    color: var(--dark);
}

.upvc-stat-box span {
    font-size: 12px;
    color: var(--text);
}


/* SECTION 2: APPLICATIONS GRID */
.upvc-apps-section {
    padding: 80px 0;
    background: #ffffff;
}

.upvc-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 45px auto;
}

.upvc-badge-alt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.upvc-header h2 {
    font-size: 32px;
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 10px;
}

.upvc-header p {
    font-size: 14.5px;
    color: var(--text);
}

.upvc-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.upvc-app-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
    position: relative;
    transition: all 0.3s ease;
}

.upvc-app-card:hover {
    border-color: var(--orange);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.card-head i {
    font-size: 26px;
    color: var(--orange);
}

.card-head span {
    font-size: 13px;
    font-weight: 800;
    color: #cbd5e1;
}

.upvc-app-card h3 {
    font-size: 18px;
    color: var(--dark);
    font-weight: 800;
    margin-bottom: 10px;
}

.upvc-app-card p {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

.upvc-app-card.highlight-card {
    background: #f8fafc;
    border-dashed: 1px solid var(--orange);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
    .upvc-overview-card {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .upvc-grid-3col {
        grid-template-columns: 1fr;
    }

    .upvc-media-side img {
        height: 280px;
    }
}

/* =========gre page================ */
/* =====================================
   BREADCRUMB STYLING
===================================== */
.site-breadcrumb-wrap {
    background: #f1f5f9;
    padding: 14px 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.site-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
}

.site-breadcrumb li a {
    color: var(--text, #475569);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-breadcrumb li a:hover {
    color: var(--orange, #ff6600);
}

.site-breadcrumb li.active {
    color: var(--orange, #ff6600);
    font-weight: 700;
}

.site-breadcrumb .separator {
    font-size: 10px;
    color: #94a3b8;
}

/* =====================================
   GRE / GRP NEW UNIQUE STYLES
===================================== */
.gre-hero-section-v2 {
    padding: 80px 0;
    background: #ffffff;
}

.gre-container-v2 {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.gre-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: var(--dark, #0f172a);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.gre-main-title {
    font-size: 38px;
    color: var(--dark, #0f172a);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    max-width: 800px;
}

.gre-main-desc {
    font-size: 16px;
    color: var(--text, #475569);
    line-height: 1.6;
    max-width: 750px;
    margin-bottom: 40px;
}

/* Split Spec Cards */
.gre-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.gre-spec-card {
    background: #f8fafc;
    border-left: 5px solid var(--dark, #0f172a);
    padding: 35px;
    border-radius: 0 16px 16px 0;
    position: relative;
}

.gre-spec-card.accent-card {
    border-left-color: var(--orange, #ff6600);
    background: #fff8f5;
}

.spec-badge {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 28px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.06);
}

.gre-spec-card h3 {
    font-size: 22px;
    color: var(--dark, #0f172a);
    font-weight: 800;
    margin-bottom: 12px;
}

.gre-spec-card p {
    font-size: 14px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin-bottom: 20px;
}

.spec-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-bullets li {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
}

.spec-bullets li i {
    color: var(--orange, #ff6600);
}

/* Image Showcase Styling */
.gre-image-showcase {
    margin-top: 40px;
}

.showcase-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    max-height: 380px;
    border: 1px solid var(--border, #e2e8f0);
}

.showcase-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.img-overlay-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- SECTION 2: TIMELINE LIST --- */
.gre-apps-section-v2 {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border, #e2e8f0);
}

.gre-section-head-v2 {
    margin-bottom: 45px;
}

.gre-section-head-v2 h2 {
    font-size: 32px;
    color: var(--dark, #0f172a);
    font-weight: 800;
    margin-bottom: 8px;
}

.gre-section-head-v2 p {
    font-size: 15px;
    color: var(--text, #475569);
}

/* Timeline Staggered Rows */
.gre-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gre-timeline-item {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    padding: 24px 30px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.gre-timeline-item:hover {
    border-color: var(--orange, #ff6600);
    transform: translateX(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.timeline-num {
    font-size: 24px;
    font-weight: 900;
    color: var(--orange, #ff6600);
    opacity: 0.8;
    min-width: 40px;
}

.timeline-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.timeline-icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange, #ff6600);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.timeline-content h3 {
    font-size: 17px;
    color: var(--dark, #0f172a);
    font-weight: 800;
    margin-bottom: 4px;
}

.timeline-content p {
    font-size: 13.5px;
    color: var(--text, #475569);
    margin: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
    .gre-split-wrapper {
        grid-template-columns: 1fr;
    }

    .gre-timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .timeline-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===============fire fighting============ */
/* =====================================
   SINGLE HERO SECTION STYLES
===================================== */

.ff-single-hero {
    padding: 70px 0;
    background: #ffffff;
}

.ff-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.ff-single-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

/* Left Content */
.ff-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.1);
    color: var(--orange, #ff6600);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.ff-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 14px;
    line-height: 1.25;
}

.ff-desc {
    font-size: 15px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin-bottom: 24px;
}

.ff-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.highlight-item i {
    color: var(--orange, #ff6600);
    font-size: 20px;
    margin-top: 2px;
}

.highlight-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 2px;
}

.highlight-item p {
    font-size: 13.5px;
    color: var(--text, #475569);
    margin: 0;
}

/* Right Image Box */
.ff-hero-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.ff-hero-img-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.ff-img-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}

.ff-img-badge i {
    color: var(--orange, #ff6600);
}

/* Responsive */
@media (max-width: 992px) {
    .ff-single-grid {
        grid-template-columns: 1fr;
    }

    .ff-hero-img-box img {
        height: 280px;
    }
}

/* ===============chilled water pipe page============ */
/* =====================================
   CHILLED WATER PIPING STYLES
===================================== */

.cw-single-hero {
    padding: 70px 0;
    background: #ffffff;
}

.cw-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.cw-single-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

/* Left Side Content */
.cw-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.1);
    color: var(--orange, #ff6600);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.cw-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 14px;
    line-height: 1.25;
}

.cw-desc {
    font-size: 15px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Circulation Flow Summary Box */
.cw-flow-box {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.flow-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.flow-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.flow-pills .pill {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    color: var(--dark, #0f172a);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.flow-pills .pill.highlight {
    background: rgba(255, 102, 0, 0.1);
    border-color: var(--orange, #ff6600);
    color: var(--orange, #ff6600);
}

.flow-pills i {
    font-size: 10px;
    color: #94a3b8;
}

/* Key Advantages List */
.cw-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.highlight-item i {
    color: var(--orange, #ff6600);
    font-size: 18px;
    margin-top: 2px;
}

.highlight-item h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 2px;
}

.highlight-item p {
    font-size: 13px;
    color: var(--text, #475569);
    margin: 0;
}

/* Right Side Image Box */
.cw-hero-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.cw-hero-img-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.cw-img-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}

.cw-img-badge i {
    color: var(--orange, #ff6600);
}

/* =====================================
   SECTION 2: UNIQUE APPLICATION GRID
===================================== */

.cw-apps-unique-grid {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border, #e2e8f0);
}

.cw-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.cw-section-head h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.cw-section-head p {
    font-size: 15px;
    color: var(--text, #475569);
    margin: 0;
}

/* Grid Layout */
.cw-unique-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 35px;
}

.cw-sector-box {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-sector-box:hover {
    transform: translateY(-6px);
    border-color: var(--orange, #ff6600);
    box-shadow: 0 12px 30px rgba(255, 102, 0, 0.08);
}

.cw-sector-box.featured-wide {
    grid-column: span 2;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf8 100%);
}

/* Card Top Bar */
.sector-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.sector-icon {
    width: 48px;
    height: 48px;
    background: #0f172a;
    color: var(--orange, #ff6600);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.sector-code {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1px;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 20px;
}

/* Card Body */
.sector-content h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.sector-content p {
    font-size: 14px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* Card Footer Badge */
.sector-footer {
    border-top: 1px dashed var(--border, #e2e8f0);
    padding-top: 16px;
}

.spec-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange, #ff6600);
}

/* Responsive Media Queries */
@media (max-width: 992px) {
    .cw-single-grid {
        grid-template-columns: 1fr;
    }

    .cw-hero-img-box img {
        height: 280px;
    }

    .cw-unique-cards-wrapper {
        grid-template-columns: 1fr;
    }

    .cw-sector-box.featured-wide {
        grid-column: span 1;
    }
}

/* ================utility pipe page=================== */

/* =====================================
   PLANT UTILITY PIPING STYLES
===================================== */

.up-hero-section {
    padding: 70px 0;
    background: #ffffff;
}

.up-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.up-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

/* Badge & Headings */
.up-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.1);
    color: var(--orange, #ff6600);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.up-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 14px;
    line-height: 1.25;
}

.up-desc {
    font-size: 15px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Features Grid */
.up-features-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.up-feat-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
}

.up-feat-box i {
    color: var(--orange, #ff6600);
    font-size: 20px;
    margin-top: 2px;
}

.up-feat-box h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 2px;
}

.up-feat-box p {
    font-size: 13px;
    color: var(--text, #475569);
    margin: 0;
}

/* Image Side */
.up-hero-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.up-hero-img-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.up-img-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}

.up-img-tag i {
    color: var(--orange, #ff6600);
}

/* =====================================
   SECTION 2: SERVICES GRID STYLES
===================================== */

.up-services-section {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border, #e2e8f0);
}

.up-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.up-section-head h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.up-section-head p {
    font-size: 15px;
    color: var(--text, #475569);
    margin: 0;
}

/* 3-Column Utility Grid */
.up-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 35px;
}

.up-util-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.up-util-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--orange, #ff6600);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.up-util-card:hover {
    transform: translateY(-6px);
    border-color: var(--orange, #ff6600);
    box-shadow: 0 12px 30px rgba(255, 102, 0, 0.08);
}

.up-util-card:hover::before {
    opacity: 1;
}

/* Card Elements */
.util-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.util-icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 102, 0, 0.08);
    color: var(--orange, #ff6600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.util-id {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
}

.up-util-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.up-util-card p {
    font-size: 13.5px;
    color: var(--text, #475569);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.util-meta {
    border-top: 1px dashed var(--border, #e2e8f0);
    padding-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange, #ff6600);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive Queries */
@media (max-width: 992px) {
    .up-hero-grid {
        grid-template-columns: 1fr;
    }

    .up-utility-grid {
        grid-template-columns: 1fr;
    }

    .up-hero-img-box img {
        height: 280px;
    }
}

/* =============water supply page================ */
/* =====================================
   WATER SUPPLY HERO SECTION STYLES
===================================== */

.ws-hero-section {
    padding: 70px 0;
    background: #ffffff;
}

.ws-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.ws-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

/* Badge & Headings */
.ws-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.1);
    color: var(--orange, #ff6600);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.ws-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 14px;
    line-height: 1.25;
}

.ws-desc {
    font-size: 15px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Route Sequence Box */
.ws-route-card {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 24px;
}

.route-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.route-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.step-item {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    flex: 1;
}

.step-item.highlight {
    background: rgba(255, 102, 0, 0.08);
    border-color: var(--orange, #ff6600);
}

.step-num {
    font-size: 10px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    display: block;
    margin-bottom: 2px;
}

.step-item p {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin: 0;
}

.step-arrow {
    color: #94a3b8;
    font-size: 12px;
}

/* Features List */
.ws-feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ws-feat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark, #0f172a);
}

.ws-feat-item i {
    color: var(--orange, #ff6600);
}

/* Right Image Box */
.ws-hero-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.ws-hero-img-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.ws-img-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}

.ws-img-tag i {
    color: var(--orange, #ff6600);
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .ws-hero-grid {
        grid-template-columns: 1fr;
    }

    .route-steps {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .ws-hero-img-box img {
        height: 280px;
    }
}

/* =====================================
   DRAINAGE LINE SECTION STYLES
===================================== */

.dl-hero-section {
    padding: 70px 0;
    background: #ffffff;
}

.dl-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.dl-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

/* Badge & Headings */
.dl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 102, 0, 0.1);
    color: var(--orange, #ff6600);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.dl-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 14px;
    line-height: 1.25;
}

.dl-desc {
    font-size: 15px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Route Sequence Box */
.dl-route-card {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 24px;
}

.route-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.route-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.step-item {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    flex: 1;
}

.step-item.highlight {
    background: rgba(255, 102, 0, 0.08);
    border-color: var(--orange, #ff6600);
}

.step-num {
    font-size: 10px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    display: block;
    margin-bottom: 2px;
}

.step-item p {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin: 0;
}

.step-arrow {
    color: #94a3b8;
    font-size: 12px;
}

/* Features List */
.dl-feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-feat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark, #0f172a);
}

.dl-feat-item i {
    color: var(--orange, #ff6600);
}

/* Right Image Box */
.dl-hero-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.dl-hero-img-box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}

.dl-img-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
}

.dl-img-tag i {
    color: var(--orange, #ff6600);
}

/* =====================================
   SECTION 2: TYPES GRID
===================================== */

.dl-types-section {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border, #e2e8f0);
}

.dl-sub-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.dl-section-head h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.dl-section-head p {
    font-size: 15px;
    color: var(--text, #475569);
    margin: 0;
}

/* 2x2 Grid Layout */
.dl-types-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 35px;
}

.dl-type-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s ease;
}

.dl-type-card:hover {
    transform: translateY(-6px);
    border-color: var(--orange, #ff6600);
    box-shadow: 0 12px 30px rgba(255, 102, 0, 0.08);
}

.type-icon-box {
    width: 48px;
    height: 48px;
    background: #0f172a;
    color: var(--orange, #ff6600);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

.type-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.type-info h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.type-info p {
    font-size: 14px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.type-footer {
    border-top: 1px dashed var(--border, #e2e8f0);
    padding-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange, #ff6600);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive Queries */
@media (max-width: 992px) {

    .dl-hero-grid,
    .dl-types-grid {
        grid-template-columns: 1fr;
    }

    .route-steps {
        flex-direction: column;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .dl-hero-img-box img {
        height: 280px;
    }
}

/* =====================================
   CONTACT SECTION (EQUAL HEIGHT FIX)
===================================== */

.ws-contact-section {
    padding: 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border, #e2e8f0);
}

.ws-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.ws-sec-head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 45px auto;
}

/* Equal Columns Grid Layout */
.ws-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Dono sides equal width */
    gap: 30px;
    align-items: stretch;
    /* Dono columns height me barabar hongi */
}

/* Left Side Wrapper */
.ws-contact-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Cards poori height distribute kar lenge */
    gap: 16px;
    height: 100%;
}

.info-card-box {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    /* Teeno cards barabar jagah lenge */
    transition: all 0.3s ease;
}

.info-card-box:hover {
    border-color: var(--orange, #ff6600);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.info-icon {
    width: 48px;
    height: 48px;
    background: var(--dark, #0f172a);
    color: var(--orange, #ff6600);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.info-card-box h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 2px;
}

.info-card-box p {
    font-size: 14px;
    font-weight: 700;
    color: var(--orange, #ff6600);
    margin: 0 0 2px 0;
}

.info-card-box span {
    font-size: 12px;
    color: var(--text, #475569);
}

/* Right Side Form Wrapper */
.ws-contact-form-wrap {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.ws-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.ws-form h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--dark, #0f172a);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--orange, #ff6600);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
}

.ws-submit-btn {
    width: 100%;
    background: var(--orange, #ff6600);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.ws-submit-btn:hover {
    background: #e55c00;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 102, 0, 0.25);
}

/* Responsive Queries */
@media (max-width: 992px) {
    .ws-contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 100%;
        gap: 0;
    }

    .ws-contact-form-wrap {
        padding: 24px;
    }
}

/* =====================================
   HSE PREMIUM LIGHT THEME STYLES
===================================== */

/* Section 1: Hero Card */
.hse-hero {
    padding: 70px 0 40px 0;
    background: #f8fafc;
}

.hse-hero-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    padding: 45px 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.hse-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hse-metrics {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 35px;
    padding-top: 30px;
    border-top: 1px dashed var(--border, #e2e8f0);
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--orange, #ff6600);
}

.metric-lbl {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark, #0f172a);
}

.metric-divider {
    width: 1px;
    height: 35px;
    background: var(--border, #e2e8f0);
}

/* Section 2: Pillars Grid */
.hse-pillars {
    padding: 60px 0;
    background: #ffffff;
}

.hse-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hse-card {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    padding: 28px;
    transition: all 0.3s ease;
}

.hse-card:hover {
    background: #ffffff;
    border-color: var(--orange, #ff6600);
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(255, 102, 0, 0.08);
}

.hse-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hse-icon-wrap {
    width: 44px;
    height: 44px;
    background: var(--dark, #0f172a);
    color: var(--orange, #ff6600);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.hse-tag {
    font-size: 10px;
    font-weight: 800;
    color: var(--orange, #ff6600);
    letter-spacing: 1px;
}

.hse-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.hse-card p {
    font-size: 13px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin: 0;
}

/* Section 3: Flow Timeline */
.hse-flow {
    padding: 60px 0 80px 0;
    background: #f8fafc;
    border-top: 1px solid var(--border, #e2e8f0);
}

.hse-timeline {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 18px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
}

.t-step {
    flex: 1;
    text-align: center;
}

.t-badge {
    display: inline-block;
    background: rgba(255, 102, 0, 0.1);
    color: var(--orange, #ff6600);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.t-step h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 4px;
}

.t-step p {
    font-size: 12px;
    color: var(--text, #475569);
    margin: 0;
}

.t-arrow {
    color: var(--border, #cbd5e1);
    font-size: 12px;
}

/* Responsive Queries */
@media (max-width: 992px) {
    .hse-pillars-grid {
        grid-template-columns: 1fr;
    }

    .hse-metrics {
        flex-direction: column;
        gap: 15px;
    }

    .metric-divider {
        width: 100%;
        height: 1px;
    }

    .hse-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .t-step {
        text-align: left;
    }

    .t-arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
}

/* =====================================
   about page
===================================== */

/* Container Setup */
.ws-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* SECTION 1: COMPANY OVERVIEW */
.ws-about-hero {
    padding: 80px 0 60px 0;
    background: #f8fafc;
}

.ws-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.ws-about-text h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 16px;
}

.ws-about-text p {
    font-size: 14px;
    color: var(--text, #475569);
    line-height: 1.7;
    margin-bottom: 14px;
}

.ws-about-stats {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--border, #e2e8f0);
}

.stat-box {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--orange, #ff6600);
}

.stat-txt {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark, #0f172a);
}

.ws-about-img-wrap {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

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

/* SECTION 2: OWNER PROFILE */
.ws-owner-section {
    padding: 70px 0;
    background: #ffffff;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.ws-owner-card {
    background: #f8fafc;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    padding: 35px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 35px;
    align-items: center;
}

.ws-owner-img-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border, #e2e8f0);
}

.ws-owner-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}

.ws-owner-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    padding: 12px 16px;
    backdrop-filter: blur(8px);
}

.ws-owner-tag h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.ws-owner-tag span {
    font-size: 11px;
    color: var(--orange, #ff6600);
}

.owner-quote-box {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-left: 4px solid var(--orange, #ff6600);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

.quote-icon {
    color: rgba(255, 102, 0, 0.2);
    font-size: 24px;
    margin-bottom: 8px;
}

.quote-text {
    font-size: 15px;
    font-style: italic;
    font-weight: 600;
    color: var(--dark, #0f172a);
    margin: 0;
    line-height: 1.5;
}

.owner-bio {
    font-size: 14px;
    color: var(--text, #475569);
    line-height: 1.7;
    margin-bottom: 20px;
}

.owner-contact-row {
    display: flex;
    gap: 15px;
}

.owner-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--dark, #0f172a);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.owner-link:hover {
    border-color: var(--orange, #ff6600);
    color: var(--orange, #ff6600);
}

/* SECTION 3: CORE VALUES */
.ws-values-section {
    padding: 80px 0;
    background: #f8fafc;
}

.ws-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.value-card {
    background: #ffffff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
}

.value-card:hover {
    border-color: var(--orange, #ff6600);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.value-icon {
    width: 44px;
    height: 44px;
    background: var(--dark, #0f172a);
    color: var(--orange, #ff6600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.value-card h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--dark, #0f172a);
    margin-bottom: 8px;
}

.value-card p {
    font-size: 13px;
    color: var(--text, #475569);
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE QUERIES */
@media (max-width: 992px) {

    .ws-about-grid,
    .ws-owner-card {
        grid-template-columns: 1fr;
    }

    .ws-values-grid {
        grid-template-columns: 1fr;
    }

    .ws-about-stats {
        flex-wrap: wrap;
    }
}








/* =====================================================
   INDUSTRA QUALITY POLICY PREMIUM POLISH
   Existing HTML Only
===================================================== */


/* ==========================
   MAIN SECTION
========================== */


.qp-light-section {

    position: relative;

    padding: 40px 0;

    background:

        linear-gradient(180deg,
            #ffffff,
            #f8fafc);

    overflow: hidden;

}



.qp-light-section::before {


    content: "";


    position: absolute;


    width: 400px;


    height: 400px;


    left: -180px;


    top: 100px;


    background: #e96f32;


    opacity: .05;


    filter: blur(100px);


    border-radius: 50%;


}




/* ==========================
   HEADER
========================== */


.qp-sub-title {


    color: #e96f32;


    font-size: 13px;


    font-weight: 900;


    letter-spacing: 3px;


}



.qp-sub-title::before {


    content: "";


    display: inline-block;


    width: 45px;


    height: 2px;


    background: #e96f32;


    margin-right: 12px;


    vertical-align: middle;


}



.qp-main-title {


    margin-top: 20px;


    font-size:

        clamp(38px, 4vw, 55px);


    font-weight: 900;


    color: #0B1220;


    line-height: 1.15;


}




.qp-divider {


    width: 90px;


    height: 4px;


    margin: 25px auto;


    border-radius: 20px;


    background:

        linear-gradient(90deg,
            #e96f32,
            #F5C542);


}



.qp-desc {


    max-width: 1750px;


    margin: auto;


    color: #6B7280;


    line-height: 1.8;


    font-size: 14px;


}





/* ==========================
   QUALITY BOX GRID
========================== */


.qp-features-grid {


    margin-top: 0px;


    display: grid;


    grid-template-columns:

        repeat(3, 1fr);


    gap: 30px;


}




.qp-box {


    background: #fff;


    border-radius: 28px;


    padding: 35px;


    border:

        1px solid #edf0f3;


    position: relative;


    overflow: hidden;


    transition: .45s;


    box-shadow:


        0 15px 40px rgba(0, 0, 0, .06);


}




/* top gold line */


.qp-box::before {


    content: "";


    position: absolute;


    top: 0;


    left: 0;


    height: 4px;


    width: 0;


    background:

        linear-gradient(90deg,
            #e96f32,
            #F5C542);


    transition: .45s;


}




.qp-box:hover::before {


    width: 100%;


}




.qp-box:hover {


    transform:


        translateY(-12px);


    box-shadow:


        0 30px 70px rgba(0, 0, 0, .14);


}






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


.qp-icon {


    width: 75px;


    height: 75px;


    border-radius: 22px;


    display: flex;


    justify-content: center;


    align-items: center;


    background:

        linear-gradient(135deg,
            #fff4d6,
            #ffe7a3);


    color: #e96f32;


    font-size: 32px;


    margin-bottom: 25px;


    transition: .45s;


}




.qp-box:hover .qp-icon {


    background:

        linear-gradient(135deg,
            #e96f32,
            #F5C542);


    color: #111;


    transform:

        rotateY(180deg);


}






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


.qp-box h3 {


    font-size: 23px;


    font-weight: 900;


    color: #0B1220;


    margin-bottom: 15px;


}



.qp-box p {


    color: #6B7280;


    line-height: 1.8;


}





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


.qp-list {


    margin-top: 20px;


    padding: 0;


    list-style: none;


}




.qp-list li {


    display: flex;


    align-items: center;


    gap: 10px;


    margin-bottom: 12px;


    color: #374151;


    font-size: 14px;


}



.qp-list i {


    color: #16a34a;


    background: #dcfce7;


    width: 22px;


    height: 22px;


    border-radius: 50%;


    display: flex;


    justify-content: center;


    align-items: center;


    font-size: 11px;


}







/* ==========================
   TRUST STRIP
========================== */


.qp-trust-strip {


    margin-top: 20px;


    display: grid;


    grid-template-columns:

        repeat(3, 1fr);


    gap: 25px;


}





.qp-trust-item {


    display: flex;


    align-items: center;


    gap: 18px;


    padding: 25px;


    background: #fff;


    border-radius: 22px;


    border:

        1px solid #edf0f3;


    box-shadow:


        0 15px 35px rgba(0, 0, 0, .06);


    transition: .35s;


}





.qp-trust-item:hover {


    transform:


        translateY(-8px);


    border-color: #e96f32;


    box-shadow:


        0 25px 55px rgba(0, 0, 0, .12);


}




.qp-trust-item i {


    width: 60px;


    height: 60px;


    border-radius: 18px;


    display: flex;


    align-items: center;


    justify-content: center;


    background: #fff4d6;


    color: #e96f32;


    font-size: 26px;


}



.qp-trust-item strong {


    display: block;


    color: #0B1220;


    font-size: 17px;


}



.qp-trust-item span {


    display: block;


    margin-top: 5px;


    color: #6B7280;


    font-size: 13px;


}






/* ==========================
   RESPONSIVE
========================== */


@media(max-width:992px) {


    .qp-features-grid {


        grid-template-columns: 1fr;


    }



    .qp-trust-strip {


        grid-template-columns: 1fr;


    }


}



@media(max-width:576px) {


    .qp-box {


        padding: 25px;


    }



    .qp-main-title {


        font-size: 34px;


    }



    .qp-trust-item {


        padding: 20px;


    }


}