/* =====================================================
   INDUSTRA PREMIUM NAVBAR ENHANCEMENT
   Existing HTML Classes Only
===================================================== */


/* ==========================
   MAIN NAVBAR GLASS EFFECT
========================== */


.navbar {


    position: sticky;

    * {
        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: 21px;*/
        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.2fr;
        gap: 50px;
        padding-bottom: 60px;
        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;


        }


    }

    width: 100%;

    margin: auto;

    z-index: 999;


    background: rgba(255, 255, 255, .78);


    backdrop-filter: blur(18px);


    -webkit-backdrop-filter: blur(18px);


    border-radius: 22px;


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


    transition: .45s ease;


}




.navbar:hover {


    box-shadow:

        0 30px 70px rgba(0, 0, 0, .18);


}




/* Scroll class ke liye */

.navbar.scrolled {


    top: 0;

    width: 100%;

    border-radius: 0;


    background:

        rgba(255, 255, 255, .95);


}





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


.nav-container {


    padding:

        30px 25px;


}





/* ==========================
   LOGO PREMIUM
========================== */


.logo {


    gap: 14px;


}



.logo-box {


    width: 58px;

    height: 58px;


    border-radius: 18px;


    background:

        linear-gradient(135deg,
            #0B1220,
            #243447);


    box-shadow:

        0 15px 35px rgba(0, 0, 0, .25);


    overflow: hidden;


    position: relative;

    /* border: 1px solid var(--dark); */


}



.logo-box:before {


    content: "";


    position: absolute;

    inset: 0;


    background:

        linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent);


    transform:

        translateX(-100%);


    transition: .6s;


}



.logo:hover .logo-box:before {


    transform:

        translateX(100%);


}



.logo-box span {


    background:

        linear-gradient(180deg,
            #F5C542,
            #e96f32);


}



.logo-name h2 {


    font-size: 30px;


    letter-spacing: 3px;


    font-weight: 900;


    color: #0B1220;


}



.logo-name small {


    color: #e96f32;


    letter-spacing: 2.5px;


}





/* ==========================
   MENU STYLE
========================== */


.nav-menu ul {


    gap: 18px;


}



.nav-menu a,
.nav-dropdown-btn {


    font-weight: 600;


    color: var(--text);


    transition: .3s ease;


}




/*
.nav-menu a:hover,
.nav-dropdown-btn:hover{


    color:#e96f32;


}





/* Animated underline */


.nav-menu a:after,
.nav-dropdown-btn:after {


    content: "";


    position: absolute;


    left: 50%;


    bottom: -8px;


    width: 0;


    height: 3px;


    border-radius: 14px;


    background:

        linear-gradient(90deg,
            #e96f32,
            #F5C542);


    transform:

        translateX(-50%);


    transition: .35s;


}

*/ .nav-menu a:hover:after,
.nav-menu .active:after,
.nav-dropdown-btn:hover:after {


    width: 100%;


}





/* ==========================
   ACTIVE HOME
========================== */


.nav-menu .active {


    color: #e96f32;


}





/* ==========================
   DROPDOWN PREMIUM
========================== */


.dropdown {


    margin-top: 8px;


    padding: 18px;


    background:

        rgba(255, 255, 255, .95);


    backdrop-filter:

        blur(20px);


    border-radius: 22px;


    border:

        1px solid rgba(0, 0, 0, .05);


    box-shadow:

        0 30px 80px rgba(0, 0, 0, .18);


    animation:

        dropdownShow .35s ease;


}




@keyframes dropdownShow {


    from {


        opacity: 0;

        transform:

            translateY(15px);


    }


    to {


        opacity: 1;

        transform:

            translateY(0);


    }


}




.dropdown-item {


    border-radius: 14px;


    transition: .3s;


}



.dropdown-item button {


    border-radius: 14px;


    padding: 14px 16px;


    font-weight: 700;


    color: #0B1220;


}



.dropdown-item:hover {


    background: #fff7e5;


}




.dropdown-item button span {


    color: #e96f32;


    font-size: 22px;


}





/* ==========================
   SUB MENU
========================== */


.submenu {


    border-radius: 18px;


    padding: 15px;


    background: #fff;


    box-shadow:

        0 25px 60px rgba(0, 0, 0, .15);


}



.submenu a {


    display: block;


    padding: 14px 15px;


    border-radius: 14px;


    color: #4b5563 !important;


}



.submenu a:hover {


    background: #fff4d6;


    color: #e96f32 !important;


    padding-left: 22px;


}





/* ==========================
   QUOTE BUTTON
========================== */


.quote-btn {


    background:


        linear-gradient(135deg,
            #e96f32,
            #F5C542);


    padding:

        15px 28px;


    border-radius: 50px;


    color: #111 !important;


    font-weight: 900;


    box-shadow:


        0 15px 35px rgba(212, 160, 23, .35);


    transition: .35s;


}



.quote-btn:hover {


    transform:

        translateY(-5px);


    box-shadow:


        0 25px 50px rgba(212, 160, 23, .45);


}




.quote-btn span {


    font-size: 20px;


}






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

/*
.mobile-toggle{


    width:45px;

    height:45px;


    border-radius:14px;


    background:#0B1220;


    border:none;


    display:flex;


    flex-direction:column;


    justify-content:center;


    gap:6px;


    padding:14px;


}




.mobile-toggle span{


    height:2px;


    width:100%;


    background:#F5C542;


    transition:.3s;


} */






/* ==========================
 RESPONSIVE
========================== */


@media(max-width:992px) {


    .navbar {


        width: 95%;

        top: 14px;


    }



    .nav-container {


        padding: 14px 18px;


    }



    .logo-name h2 {


        font-size: 24px;


    }



}















/* =====================================================
   INDUSTRA SERVICES SECTION PREMIUM POLISH
   Existing HTML Only
===================================================== */


/* ==========================
   SECTION BACKGROUND
========================== */


.services-section {

    position: relative;

    padding: 40px 0;

    background:

        linear-gradient(180deg,
            #f8f4f4,
            #f1f7fd);

    overflow: hidden;

}



.services-section::before {


    content: "";


    position: absolute;


    width: 350px;


    height: 350px;


    background: #e96f32;


    opacity: .06;


    filter: blur(90px);


    left: -150px;


    top: 100px;


    border-radius: 50%;


}





/* ==========================
   SECTION HEADER
========================== */


.services-tag {


    display: inline-block;


    color: #e96f32;


    font-size: 15px;


    font-weight: 900;


    letter-spacing: 3px;


    margin-bottom: 15px;


}



.services-tag::before {


    content: "";


    width: 40px;


    height: 2px;


    background: #e96f32;


    display: inline-block;


    margin-right: 14px;


    vertical-align: middle;


}



.services-title {


    font-size:

        clamp(38px, 4vw, 55px);


    font-weight: 900;


    color: #0B1220;


    letter-spacing: -1px;


}


/*
.services-title::after{


    content:"";


    display:block;


    width:90px;


    height:4px;


    margin-top:18px;


    border-radius:20px;


    background:

    linear-gradient(
    90deg,
    #e96f32,
    #F5C542
    );


} */




.services-subtitle {


    max-width: 700px;


    color: #6B7280;


    line-height: 1.8;


}






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


.services-grid {


    margin-top: 55px;


}





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


.service-card {


    background: #ffffff;


    border-radius: 25px;


    padding: 30px;


    border:


        1px solid rgba(0, 0, 0, .06);


    position: relative;


    overflow: hidden;


    transition: .45s cubic-bezier(.4, 0, .2, 1);


    box-shadow:


        0 15px 40px rgba(0, 0, 0, .06);


}






/* Gold Top Line */


.service-card::before {


    content: "";


    position: absolute;


    left: 0;


    top: 0;


    width: 0;


    height: 4px;


    background:


        linear-gradient(90deg,
            #e96f32,
            #F5C542);


    transition: .45s;


}





.service-card:hover::before {


    width: 100%;


}



.service-card:hover {


    transform:


        translateY(-14px);


    box-shadow:


        0 30px 70px rgba(0, 0, 0, .14);


}






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


.card-top {


    display: flex;


    align-items: center;


    justify-content: space-between;


    margin-bottom: 25px;


}




/* ICON */


.card-icon {


    width: 70px;


    height: 70px;


    border-radius: 22px;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


        linear-gradient(135deg,
            #fff4d6,
            #ffe7a3);


    color: #e96f32;


    font-size: 30px;


    transition: .45s;


}




.service-card:hover .card-icon {


    transform:


        rotateY(180deg);


    background:


        linear-gradient(135deg,
            #e96f32,
            #F5C542);


    color: #111;


}






/* NUMBER */


.card-number {


    width: 45px;


    height: 45px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 16px;


    font-weight: 900;


    color: #e96f32;


    background: #fff7df;


    border:


        1px solid rgba(212, 160, 23, .25);


    transition: .35s;


}



.service-card:hover .card-number {


    background: #e96f32;


    color: white;


}







/* TITLE */


.service-card h3 {


    font-size: 24px;


    font-weight: 900;


    color: #0B1220;


    margin-bottom: 15px;


}





/* DESCRIPTION */


.service-card p {


    color: #6B7280;


    line-height: 1.8;


    font-size: 15px;


}







/* LINK */


.service-link {


    margin-top: px;


    display: inline-flex;


    align-items: center;


    gap: 14px;


    color: #e96f32;


    font-weight: 800;


    transition: .35s;


}




.service-link span {


    transition: .35s;


}



.service-link:hover span {


    transform:


        translateX(8px);


}




.service-link:hover {


    color: #0B1220;


}







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


.service-card {


    animation:


        serviceReveal .8s ease both;


}




@keyframes serviceReveal {


    from {


        opacity: 0;


        transform:

            translateY(35px);


    }


    to {


        opacity: 1;


        transform:

            translateY(0);


    }


}







/* ==========================
   RESPONSIVE
========================== */


@media(max-width:992px) {


    .service-card {


        padding: 25px;


    }



}



@media(max-width:576px) {


    .services-section {


        padding: 70px 0;


    }



    .service-card h3 {


        font-size: 21px;


    }



    .card-icon {


        width: 60px;


        height: 60px;


    }


}

















/* =====================================================
   PREMIUM HSE SECTION V3
===================================================== */


.hse-v3-section {

    padding: 30px 0;

    position: relative;

    background:

        linear-gradient(135deg,
            #ffffff,
            #f7f9fc);

    overflow: hidden;

}



.hse-v3-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -150px;

    top: 50px;

    background: #F59E0B;

    opacity: .08;

    filter: blur(120px);

    border-radius: 50%;

}




.hse-v3-container {

    max-width: 1200px;

    margin: auto;

    padding: 0 20px;

    display: grid;

    grid-template-columns:

        0.9fr 1.1fr;

    gap: 70px;

    align-items: center;

}





/* ===========================
   LEFT SIDE
=========================== */


.hse-v3-pill {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 14px 22px;

    border-radius: 50px;

    background:

        linear-gradient(135deg,
            #fff3d6,
            #ffe5a0);


    color: #9a6700;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1px;

}



.hse-v3-pill i {

    font-size: 18px;

}



.hse-v3-heading {


    margin-top: 25px;

    font-size:

        clamp(38px, 4vw, 58px);


    line-height: 1.1;

    font-weight: 900;

    color: #0f172a;


}



.hse-v3-heading span {


    background:

        linear-gradient(90deg,
            #e96f32);


    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;


}



.hse-v3-lead {


    margin-top: 25px;

    font-size: 17px;

    line-height: 1.9;

    color: #64748b;

}






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


.hse-v3-stat-card {


    margin-top: 35px;

    padding: 28px;

    display: flex;

    align-items: center;

    gap: 25px;


    background: white;


    border-radius: 28px;


    border: 1px solid #e5e7eb;


    box-shadow:

        0 20px 50px rgba(0, 0, 0, .08);


    position: relative;

    overflow: hidden;

}



.hse-v3-stat-card::after {


    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    background: #f59e0b;

    opacity: .12;

    border-radius: 50%;

    right: -40px;

    top: -40px;


}



.hse-v3-stat-num {


    font-size: 60px;

    font-weight: 900;

    color: #d97706;

}



.hse-v3-stat-text strong {


    display: block;

    font-size: 20px;

    color: #111827;


}


.hse-v3-stat-text span {


    color: #64748b;

    font-size: 14px;

}




/* ===========================
 ISO ROW
=========================== */


.hse-v3-iso-row {


    display: flex;

    gap: 15px;

    margin-top: 25px;

    flex-wrap: wrap;

}



.hse-v3-iso-row span {


    padding: 14px 18px;

    border-radius: 50px;

    background: #fff;


    border: 1px solid #e5e7eb;


    color: #334155;

    font-size: 14px;


}


.hse-v3-iso-row i {


    color: #d97706;

    margin-right: 8px;

}







/* ===========================
 RIGHT SIDE ITEMS
=========================== */


.hse-v3-right {


    position: relative;

}



.hse-v3-right::before {


    content: "";

    position: absolute;

    left: 35px;

    top: 40px;

    bottom: 40px;

    width: 2px;

    background:

        linear-gradient(#f59e0b,
            transparent);

}





.hse-v3-item {


    position: relative;


    display: flex;

    gap: 25px;

    padding: 30px;

    margin-bottom: px;


    background:

        rgba(255, 255, 255, .85);


    backdrop-filter: blur(14px);


    border-radius: 30px;


    border: 1px solid #e5e7eb;


    box-shadow:

        0 18px 45px rgba(15, 23, 42, .07);


    transition: .4s;


}




.hse-v3-item:hover {


    transform:

        translateX(14px);


    border-color: #f59e0b;


    box-shadow:

        0 30px 60px rgba(0, 0, 0, .12);


}




/* ICON */


.hse-v3-icon-box {


    min-width: 75px;

    height: 75px;


    display: flex;

    justify-content: center;

    align-items: center;


    border-radius: 22px;


    font-size: 30px;


}



.hse-v3-icon-box.orange {


    background: #fff1df;

    color: #ea580c;

}



.hse-v3-icon-box.blue {


    background: #e0f2fe;

    color: #0284c7;


}



.hse-v3-icon-box.green {


    background: #dcfce7;

    color: #16a34a;


}





/* CONTENT */


.hse-v3-tag {


    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

    color: #d97706;


}


.hse-v3-content h3 {


    margin: 8px 0 14px;

    font-size: 24px;

    font-weight: 900;

    color: #0f172a;


}


.hse-v3-content p {


    color: #64748b;

    line-height: 1.8;

    margin: 0;

}





/* ===========================
 RESPONSIVE
=========================== */


@media(max-width:992px) {


    .hse-v3-container {


        grid-template-columns: 1fr;


    }


    .hse-v3-right {


        margin-top: 30px;

    }


}




@media(max-width:576px) {


    .hse-v3-item {


        flex-direction: column;

    }


    .hse-v3-stat-card {


        flex-direction: column;

        align-items: flex-start;

    }


    .hse-v3-heading {


        font-size: 36px;

    }


}


















/* =====================================================
   PREMIUM INDUSTRIAL TESTIMONIAL SECTION
===================================================== */


.testimonials-section {

    padding: 30px 0;

    background:

        linear-gradient(135deg,
            #f8fafc,
            #ffffff);

    position: relative;

    overflow: hidden;

}



.testimonials-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -200px;

    top: 50px;

    background: #f59e0b;

    opacity: .08;

    filter: blur(130px);

    border-radius: 50%;

}



.testimonials-container {


    max-width: 1200px;

    margin: auto;

    padding: 0 20px;

}



/* ==========================
 HEADER
========================== */


.testimonials-header {

    text-align: center;

    max-width: 750px;

    margin: auto;

}



.testimonials-tag {


    display: inline-block;

    padding: 14px 22px;

    border-radius: 50px;


    background:

        linear-gradient(135deg,
            #fff1d6,
            #ffe4a3);


    color: #a16207;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 2px;


}



.testimonials-title {


    margin-top: 25px;

    font-size:

        clamp(36px, 4vw, 54px);


    font-weight: 900;

    color: #0f172a;


}



/* .testimonials-title::after{


    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:18px auto;

    border-radius:20px;


    background:

    linear-gradient(
        90deg,
        #d97706,
        #fbbf24
    );


} */




.testimonials-subtitle {


    color: #64748b;

    font-size: 14px;

    line-height: 1.8;


}







/* ==========================
 SLIDER
========================== */


.testimonials-wrapper {


    margin-top: 20px;

    overflow: hidden;


}



.testimonials-track {


    display: flex;

    gap: 20px;


}






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


.testimonial-card {


    min-width: 330px;


    background:

        #fff;


    backdrop-filter: blur(14px);


    border-radius: 32px;


    padding: 35px;


    border: 1px solid #e5e7eb;


    box-shadow:


        0 20px 50px rgba(15, 23, 42, .08);


    position: relative;


    transition: .45s;


}



.testimonial-card::before {


    content: "“";


    position: absolute;

    right: 30px;

    top: 15px;


    font-size: 90px;

    font-weight: 900;


    color: #f59e0b;

    opacity: .12;


}




.testimonial-card:hover {


    transform:

        translateY(-15px);


    border-color: #f59e0b;


    box-shadow:


        0 35px 70px rgba(0, 0, 0, .15);


}






/* ==========================
 STAR
========================== */


.card-stars {


    display: flex;

    gap: 6px;

    margin-bottom: 25px;


}



.card-stars i {


    color: #fbbf24;

    font-size: 18px;


}






/* ==========================
 REVIEW
========================== */


.review-text {


    font-size: 16px;

    line-height: 1.9;

    color: #475569;

    font-style: italic;


    min-height: 120px;


}







/* ==========================
 CLIENT
========================== */


.client-info {


    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 30px;


}



.avatar {


    width: 65px;

    height: 65px;


    border-radius: 50%;


    display: flex;

    justify-content: center;

    align-items: center;


    font-size: 25px;

    font-weight: 900;


    color: white;


    background:


        linear-gradient(135deg,
            #d97706,
            #fbbf24);


    box-shadow:


        0 14px 25px rgba(245, 158, 11, .35);


}



.client-details h4 {


    margin: 0;

    font-size: 19px;

    font-weight: 900;

    color: #0f172a;


}



.client-details p {


    margin-top: 5px;

    color: #64748b;

    font-size: 14px;


}





/* ==========================
 DOTS
========================== */


.slider-dots {


    display: flex;

    justify-content: center;

    gap: 14px;

    margin-top: 45px;


}



.dot {


    width: 14px;

    height: 14px;


    border-radius: 50%;


    background: #cbd5e1;


    transition: .3s;


}



.dot.active {


    width: 35px;

    border-radius: 20px;


    background: #d97706;


}






/* ==========================
 RESPONSIVE
========================== */


@media(max-width:768px) {


    .testimonial-card {


        min-width: 290px;

        padding: 25px;


    }


    .review-text {


        min-height: auto;

    }



}












/* =====================================================
   INDUSTRA PREMIUM CONTACT SECTION V2
   MODERN SPLIT STYLE
===================================================== */


.contact-section {

    padding: 30px 0;

    background:

        linear-gradient(135deg,
            #e4ebf1,
            #ffffff);

    position: relative;

    overflow: hidden;

}



.contact-section::before {


    content: "";


    position: absolute;


    width: 600px;


    height: 600px;


    background: #e96f32;


    opacity: .08;


    filter: blur(120px);


    right: -200px;


    top: -100px;


    border-radius: 50%;


}



.contact-container {


    max-width: 1250px;


    margin: auto;


    padding: 0 25px;


    display: grid;


    grid-template-columns:

        .85fr 1.15fr;


    gap: 70px;


    align-items: center;


}





/* ==========================
 LEFT SIDE
========================== */


.contact-info {


    position: relative;


}



.contact-tag {


    display: inline-flex;


    align-items: center;


    gap: 14px;


    padding: 14px 22px;


    border-radius: 50px;


    background: #fff4d6;


    color: #b45309;


    font-size: 15px;


    font-weight: 900;


    letter-spacing: 2px;


}




.contact-title {


    margin-top: 25px;


    font-size:

        clamp(40px, 4vw, 58px);


    line-height: 1.1;


    font-weight: 900;


    color: #0B1220;


}



/* .contact-title::after{


    content:"";


    display:block;


    width:90px;


    height:5px;


    margin-top:20px;


    border-radius:20px;


    background:

    linear-gradient(
    90deg,
    #e96f32,
    #F5C542
    );


} */




.contact-subtitle {


    margin-top: 5px;


    color: #64748b;


    font-size: 17px;


    line-height: 1.8;


}





/* INFO LIST */


.info-list {


    margin-top: 25px;


    display: flex;


    flex-direction: column;


    gap: 20px;


}



.info-item {


    display: flex;


    align-items: center;


    gap: 18px;


    padding: 20px;


    background: white;


    border-radius: 20px;


    border: 1px solid #e5e7eb;


    box-shadow:


        0 15px 40px rgba(0, 0, 0, .06);


    transition: .35s;


}



.info-item:hover {


    transform: translateX(14px);


    border-color: #e96f32;


    box-shadow:


        0 25px 50px rgba(0, 0, 0, .12);


}




.info-icon {


    width: 60px;


    height: 60px;


    flex-shrink: 0;


    border-radius: 18px;


    display: flex;


    align-items: center;


    justify-content: center;


    background:


        linear-gradient(135deg,
            #e96f32,
            #F5C542);


    color: #111;


    font-size: 24px;


}




.info-text {


    color: #334155;


    font-weight: 600;


}






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


.contact-card {


    background: white;


    padding: 25px;


    border-radius: 35px;


    position: relative;


    box-shadow:


        0 35px 90px rgba(15, 23, 42, .15);


    border:


        1px solid rgba(212, 160, 23, .15);


}



/*
.contact-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:5px;


    border-radius:35px 35px 0 0;


    background:


    linear-gradient(
    90deg,
    #e96f32,
    #F5C542
    );


} */




.contact-form {


    margin-top: 14px;


}





.form-grid {


    display: grid;


    grid-template-columns:

        repeat(2, 1fr);


    gap: 25px;


}



.form-group label {


    font-size: 14px;


    font-weight: 900;


    letter-spacing: 1.5px;


    color: #475569;


}





.form-group input,
.form-group select,
.form-group textarea {


    margin-top: 8px;


    width: 100%;


    padding: 16px 18px;


    border-radius: 16px;


    background: #f8fafc;


    border: 1px solid #e2e8f0;


    outline: none;


    transition: .35s;


    font-size: 15px;


}




.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {


    border-color: #e96f32;


}




.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {


    background: white;


    border-color: #e96f32;


    box-shadow:


        0 0 0 5px rgba(212, 160, 23, .12);


}





.full-width {


    margin-top: 25px;


}




/* BUTTON */


.submit-btn {


    margin-top: 30px;


    padding: 18px 40px;


    width: 100%;


    border: none;


    border-radius: 50px;


    background:


        linear-gradient(135deg,
            #e96f32,
            #F5C542);


    color: #111827;


    font-size: 16px;


    font-weight: 900;


    cursor: pointer;


    transition: .4s;


    box-shadow:


        0 20px 40px rgba(212, 160, 23, .3);


}



.submit-btn:hover {


    transform:


        translateY(-6px);


    box-shadow:


        0 30px 60px rgba(212, 160, 23, .45);


}





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


@media(max-width:992px) {


    .contact-container {


        grid-template-columns: 1fr;


        gap: 50px;


    }




}



@media(max-width:600px) {


    .contact-card {


        padding: 25px;


        border-radius: 25px;


    }



    .form-grid {


        grid-template-columns: 1fr;


    }



    .contact-title {


        font-size: 36px;


    }



}










/** ABOUT PAGE**/

.india-about-hero {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(115deg,
            #1e89f5 0%,
            #355c7e 52%,
            #2e6288 100%);

}


.india-about-hero::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    top: -180px;

    border-radius: 50%;

    background: #e96f32;

    opacity: .10;

    filter: blur(100px);

}


.india-about-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(212, 160, 23, .7),
            transparent);

}


.india-about-hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(3, 10, 16, .90),
            rgba(3, 10, 16, .55),
            rgba(3, 10, 16, .25));

    pointer-events: none;

}


.india-about-hero-grid {

    position: relative;

    z-index: 2;

    width: min(1400px, 92%);

    margin: auto;

    padding: 40px 0;

    display: grid;

    grid-template-columns: 1.3fr 1fr;

    align-items: center;

    gap: 75px;

}


/* HERO CONTENT */

.india-about-hero-content {

    max-width: 980px;

}


.india-about-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 14px 18px;

    border: 1px solid rgba(212, 160, 23, .35);

    border-radius: 50px;

    background: rgba(212, 160, 23, .10);

    color: #e96f32;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

    backdrop-filter: blur(14px);

}


.india-about-eyebrow i {

    font-size: 15px;

}


.india-about-hero-content h1 {

    margin: 24px 0 20px;

    color: #ffffff;

    font-size: 65px;

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -2px;

}


.india-about-hero-content h1 span {

    display: block;

    color: #e96f32;

}


.india-about-hero-content>p {

    max-width: 620px;

    margin: 0;

    color: rgba(255, 255, 255, .72);

    font-size: 17px;

    line-height: 1.9;

}


/* HERO BUTTONS */

.india-about-hero-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 35px;

}


.india-about-primary-btn,
.india-about-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 54px;

    padding: 0 25px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 800;

    transition: .35s ease;

}


.india-about-primary-btn {

    background:
        linear-gradient(135deg,
            #e96f32,
            #e96f32);

    color: #101820;

    box-shadow:
        0 15px 35px rgba(212, 160, 23, .20);

}


.india-about-primary-btn:hover {

    transform: translateY(-5px);

    color: #101820;

    box-shadow:
        0 22px 45px rgba(212, 160, 23, .35);

}


.india-about-secondary-btn {

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .22);

    background: rgba(255, 255, 255, .06);

    backdrop-filter: blur(14px);

}


.india-about-secondary-btn:hover {

    color: #ffffff;

    border-color: #e96f32;

    background: rgba(212, 160, 23, .10);

    transform: translateY(-5px);

}


/* HERO TRUST */

.india-about-mini-trust {

    display: flex;

    gap: 0;

    margin-top: 48px;

}


.india-about-mini-trust>div {

    min-width: 145px;

    padding-right: 28px;

    margin-right: 28px;

    border-right: 1px solid rgba(255, 255, 255, .15);

}


.india-about-mini-trust>div:last-child {

    border-right: 0;

    margin-right: 0;

}


.india-about-mini-trust strong {

    display: block;

    color: #e96f32;

    font-size: 28px;

    line-height: 1;

    font-weight: 900;

}


.india-about-mini-trust span {

    display: block;

    margin-top: 8px;

    color: rgba(255, 255, 255, .58);

    font-size: 14px;

    line-height: 1.4;

}


/* HERO IMAGE */

.india-about-hero-visual {

    position: relative;

}


.india-about-image-card {

    position: relative;

    min-height: 500px;

    overflow: hidden;

    border-radius: 34px;

    border: 1px solid rgba(255, 255, 255, .16);

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

    transform: rotate(1deg);

}


.india-about-image-card::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(180deg,
            transparent 40%,
            rgba(0, 0, 0, .70));

}


.india-about-image-card::after {

    content: "";

    position: absolute;

    inset: 14px;

    border: 1px solid rgba(245, 197, 66, .30);

    border-radius: 25px;

    z-index: 2;

    pointer-events: none;

}


.india-about-image-card img {

    width: 100%;

    height: 100%;

    min-height: 500px;

    object-fit: cover;

    display: block;

    transition: 1s ease;

}


.india-about-image-card:hover img {

    transform: scale(1.07);

}


.india-about-image-overlay {

    position: absolute;

    z-index: 3;

    left: 28px;

    bottom: 25px;

    color: #fff;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;

}


/* FLOATING CARD */

.india-about-floating-card {

    position: absolute;

    z-index: 5;

    left: -35px;

    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 20px;

    min-width: 245px;

    background: rgba(255, 255, 255, .94);

    border: 1px solid rgba(255, 255, 255, .7);

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .28);

    backdrop-filter: blur(16px);

    animation: indiaAboutFloat 4s ease-in-out infinite;

}


@keyframes indiaAboutFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }

}


.india-about-floating-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: #111827;

    background:
        linear-gradient(135deg,
            #e96f32,
            #e96f32);

}


.india-about-floating-card strong {

    display: block;

    color: #111827;

    font-size: 14px;

}


.india-about-floating-card span {

    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: 14px;

}


/* =========================================================
   COMMON ABOUT SECTION HEADINGS
   ========================================================= */

.india-section-heading {

    max-width: 1000px;

    margin: 0 auto 30px;

    text-align: center;

}


.india-section-tag {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #b17c05;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.india-section-tag i {

    font-size: 14px;

}


.india-section-heading h2 {

    margin: 17px 0 18px;

    color: #0b1220;

    font-size: 50px;

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -1px;

}


.india-section-heading h2 span {

    color: #e96f32;

}


.india-section-heading>p {

    max-width: 880px;

    margin: auto;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   COMPANY SECTION
   ========================================================= */

.india-company-section {

    position: relative;

    padding: 40px 0;

    background: #ffffff;

    overflow: hidden;

}


.india-company-container {

    width: min(1240px, 92%);

    margin: auto;

}


.india-company-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}


/* COMPANY IMAGE */

.india-company-image {

    position: relative;

}


.india-company-image-frame {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 30px 75px rgba(15, 23, 42, .15);

}


.india-company-image-frame::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 50%,
            rgba(0, 0, 0, .55));

}


.india-company-image-frame img {

    display: block;

    width: 100%;

    height: 460px;

    object-fit: cover;

    transition: .8s ease;

}


.india-company-image-frame:hover img {

    transform: scale(1.06);

}


.india-company-image-label {

    position: absolute;

    z-index: 3;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

    background: rgba(255, 255, 255, .94);

    border-radius: 17px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .16);

    backdrop-filter: blur(14px);

}


.india-company-image-label i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #fff4d6;

    color: #c28b0b;

}


.india-company-image-label strong {

    display: block;

    color: #111827;

    font-size: 14px;

}


.india-company-image-label span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 14px;

}


/* COMPANY CONTENT */

.india-company-content {

    max-width: 590px;

}


.india-content-kicker {

    display: block;

    margin-bottom: 15px;

    color: #e96f32;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.india-company-content h3 {

    margin: 0 0 22px;

    color: #0b1220;

    font-size: clamp(32px, 3vw, 46px);

    line-height: 1.15;

    font-weight: 900;

}


.india-company-content>p {

    margin: 0 0 18px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.9;

}


.india-company-checks {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 30px;

}


.india-company-checks>div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #334155;

    font-size: 15px;

    font-weight: 700;

}


.india-company-checks i {

    color: #16a34a;

}


/* STATS */

.india-company-stats {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 15px;

    background: #ffffff;

    border: 1px solid #e8ebef;

    border-radius: 25px;

    box-shadow:
        0 20px 55px rgba(15, 23, 42, .07);

}


.india-stat-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 27px 24px;

    border-right: 1px solid #e8ebef;

}


.india-stat-item:last-child {

    border-right: 0;

}


.india-stat-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #fff5d9;

    color: #c28b0b;

}


.india-stat-item strong {

    display: block;

    color: #0b1220;

    font-size: 25px;

    font-weight: 900;

}


.india-stat-item span {

    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.4;

}


/* =========================================================
   LEADERSHIP
   ========================================================= */

.india-leadership-section {

    padding: 40px 0;

    background: #f7f9fb;

}


.india-leadership-container {

    width: min(1100px, 92%);

    margin: auto;

}


.india-leader-card {

    display: grid;

    grid-template-columns: .8fr 1.5fr;

    overflow: hidden;

    border-radius: 32px;

    background: #ffffff;

    border: 1px solid #e7eaee;

    box-shadow:
        0 30px 75px rgba(15, 23, 42, .10);

}


.india-leader-image {

    position: relative;

    min-height: 530px;

    overflow: hidden;

}


.india-leader-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s ease;

}


.india-leader-card:hover .india-leader-image img {

    transform: scale(1.05);

}


.india-leader-position {

    position: absolute;

    left: 20px;

    right: 20px;

    bottom: 20px;

    padding: 17px 19px;

    background: rgba(255, 255, 255, .94);

    border-radius: 17px;

    backdrop-filter: blur(14px);

}


.india-leader-position strong {

    display: block;

    color: #111827;

    font-size: 14px;

}


.india-leader-position span {

    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: 14px;

}


.india-leader-content {

    padding: 55px;

}


.india-leader-content h3 {

    margin: 0 0 25px;

    color: #0b1220;

    font-size: clamp(32px, 3vw, 44px);

    line-height: 1.15;

    font-weight: 900;

}


.india-leader-quote {

    position: relative;

    margin: 25px 0;

    padding: 23px 25px 23px 60px;

    border-radius: 20px;

    background: #fff8e7;

    border-left: 4px solid #e96f32;

}


.india-leader-quote>i {

    position: absolute;

    left: 22px;

    top: 24px;

    color: #e96f32;

    font-size: 22px;

}


.india-leader-quote p {

    margin: 0;

    color: #475569;

    font-size: 15px;

    line-height: 1.8;

    font-style: italic;

}


.india-leader-content>p {

    color: #64748b;

    line-height: 1.9;

    font-size: 15px;

}


.india-leader-points {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 25px;

}


.india-leader-points span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 15px;

    border-radius: 50px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    color: #334155;

    font-size: 14px;

    font-weight: 800;

}


.india-leader-points i {

    color: #16a34a;

}


.india-leader-btn {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 30px;

    padding: 14px 21px;

    border-radius: 15px;

    background: #0b1220;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    transition: .35s ease;

}


.india-leader-btn:hover {

    background: #e96f32;

    color: #111827;

    transform: translateY(-4px);

}


/* =========================================================
   VALUES
   ========================================================= */

.india-values-section {

    padding: 40px 0;

    background: #ffffff;

}


.india-values-container {

    width: min(1200px, 92%);

    margin: auto;

}


.india-values-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}


.india-value-card {

    position: relative;

    overflow: hidden;

    padding: 30px;

    min-height: 285px;

    border: 1px solid #e7eaee;

    border-radius: 25px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(15, 23, 42, .05);

    transition: .4s ease;

}


.india-value-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 4px;

    background:
        linear-gradient(90deg,
            #e96f32,
            #e96f32);

    transition: .4s ease;

}


.india-value-card:hover::before {

    width: 100%;

}


.india-value-card:hover {

    transform: translateY(-14px);

    border-color: rgba(212, 160, 23, .35);

    box-shadow:
        0 30px 65px rgba(15, 23, 42, .11);

}


.india-value-number {

    position: absolute;

    right: 20px;

    top: 18px;

    color: #e9edf1;

    font-size: 40px;

    font-weight: 900;

}


.india-value-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background: #fff5d9;

    color: #c28b0b;

    font-size: 23px;

    transition: .4s ease;

}


.india-value-card:hover .india-value-icon {

    transform: rotateY(180deg);

    background: #e96f32;

    color: #111827;

}


.india-value-card h3 {

    margin: 0 0 14px;

    color: #0b1220;

    font-size: 22px;

    font-weight: 900;

}


.india-value-card p {

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.india-capabilities-section {

    position: relative;

    padding: 40px 0;

    background:
        linear-gradient(135deg,
            #e2e6e9,
            #fcf7f7);

    overflow: hidden;

}


.india-capabilities-section::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    left: -180px;

    top: 80px;

    border-radius: 50%;

    background: #e96f32;

    opacity: .06;

    filter: blur(90px);

}


.india-capabilities-container {

    position: relative;

    width: min(1200px, 92%);

    margin: auto;

}


.india-capabilities-grid {

    display: grid;

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

    gap: 22px;

}


.india-capability-card {

    position: relative;

    padding: 30px;

    overflow: hidden;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #e7eaee;

    box-shadow:
        0 15px 40px rgba(15, 23, 42, .06);

    transition: .4s ease;

}


.india-capability-card:hover {

    transform: translateY(-14px);

    box-shadow:
        0 30px 65px rgba(15, 23, 42, .12);

    border-color: rgba(212, 160, 23, .35);

}


.india-capability-card>span {

    position: absolute;

    right: 24px;

    top: 20px;

    color: #dce1e6;

    font-size: 35px;

    font-weight: 900;

}


.india-capability-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    border-radius: 19px;

    background: #fff5d9;

    color: #c28b0b;

    font-size: 25px;

    transition: .4s ease;

}


.india-capability-card:hover .india-capability-icon {

    background:
        linear-gradient(135deg,
            #e96f32,
            #e96f32);

    color: #111827;

    transform: scale(1.08) rotate(5deg);

}


.india-capability-card h3 {

    margin: 0 0 14px;

    color: #0b1220;

    font-size: 21px;

    font-weight: 900;

}


.india-capability-card p {

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   TRUST SECTION
   ========================================================= */

.india-trust-section {

    padding: 40px 0;

    background: #ffffff;

}


.india-trust-container {

    width: min(1200px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 75px;

}


.india-trust-content {

    max-width: 570px;

}


.india-trust-content h2 {

    margin: 17px 0 20px;

    color: #0b1220;

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.1;

    font-weight: 900;

}


.india-trust-content h2 span {

    color: #e96f32;

}


.india-trust-content>p {

    color: #64748b;

    line-height: 1.9;

    font-size: 16px;

}


.india-trust-list {

    display: grid;

    gap: 18px;

    margin-top: 30px;

}


.india-trust-list>div {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 17px;

    border-radius: 17px;

    border: 1px solid #edf0f2;

    transition: .35s ease;

}


.india-trust-list>div:hover {

    transform: translateX(7px);

    border-color: rgba(212, 160, 23, .35);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .07);

}


.india-trust-list>div>i {

    color: #e96f32;

    font-size: 21px;

    margin-top: 2px;

}


.india-trust-list strong {

    display: block;

    color: #111827;

    font-size: 15px;

}


.india-trust-list span {

    display: block;

    margin-top: 4px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;

}


/* TRUST VISUAL */

.india-trust-visual {

    position: relative;

}


.india-trust-image {

    overflow: hidden;

    border-radius: 32px;

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .15);

}


.india-trust-image img {

    display: block;

    width: 100%;

    height: 500px;

    object-fit: cover;

    transition: .8s ease;

}


.india-trust-image:hover img {

    transform: scale(1.06);

}


.india-trust-badge {

    position: absolute;

    left: -25px;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 20px;

    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, .17);

}


.india-trust-badge>i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #fff5d9;

    color: #c28b0b;

}


.india-trust-badge strong {

    display: block;

    color: #111827;

    font-size: 15px;

}


.india-trust-badge span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 14px;

}


/* =========================================================
   FINAL CTA
   ========================================================= */

.india-about-cta {

    padding: 0 0 40px;

    background: #ffffff;

}


.india-about-cta-inner {

    position: relative;

    width: min(1400px, 92%);

    margin: auto;

    padding: 55px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 25px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(115deg,
            #0b1220,
            #172431);

    box-shadow:
        0 30px 80px rgba(15, 23, 42, .20);

}


.india-about-cta-inner::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -100px;

    top: -130px;

    border-radius: 50%;

    background: #e96f32;

    opacity: .15;

    filter: blur(50px);

}


.india-about-cta-icon {

    position: relative;

    z-index: 1;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            #e96f32,
            #e96f32);

    color: #111827;

    font-size: 27px;

}


.india-about-cta-content {

    position: relative;

    z-index: 1;

}


.india-about-cta-content>span {

    color: #e96f32;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.india-about-cta-content h2 {

    margin: 8px 0;

    color: #ffffff;

    font-size: clamp(28px, 3vw, 40px);

    line-height: 1.1;

    font-weight: 900;

}


.india-about-cta-content p {

    margin: 0;

    color: #94a3b8;

    font-size: 14px;

}


.india-about-cta-actions {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

}


.india-about-cta-primary {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 15px 22px;

    border-radius: 15px;

    background: #e96f32;

    color: #111827;

    text-decoration: none;

    font-size: 15px;

    font-weight: 900;

    white-space: nowrap;

    transition: .35s ease;

}


.india-about-cta-primary:hover {

    transform: translateY(-4px);

    color: #111827;

    box-shadow:
        0 15px 30px rgba(245, 197, 66, .25);

}


.india-about-cta-phone {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

}


.india-about-cta-phone:hover {

    color: #e96f32;

}


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

@media(max-width:1100px) {

    .india-about-hero-grid {

        gap: 45px;

    }


    .india-company-grid,
    .india-trust-container {

        gap: 45px;

    }


    .india-company-stats {

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

    }


    .india-stat-item:nth-child(2) {

        border-right: 0;

    }


    .india-stat-item:nth-child(-n+2) {

        border-bottom: 1px solid #e8ebef;

    }


    .india-values-grid {

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

    }


    .india-capabilities-grid {

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

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media(max-width:900px) {

    .india-about-hero {

        min-height: auto;

    }


    .india-about-hero-grid {

        grid-template-columns: 1fr;

        padding: 85px 0 100px;

    }


    .india-about-hero-content {

        max-width: 750px;

    }


    .india-about-hero-visual {

        max-width: 700px;

        width: 100%;

        margin: auto;

    }


    .india-about-image-card {

        transform: none;

    }


    .india-company-grid,
    .india-trust-container {

        grid-template-columns: 1fr;

    }


    .india-company-content,
    .india-trust-content {

        max-width: none;

    }


    .india-leader-card {

        grid-template-columns: 1fr;

    }


    .india-leader-image {

        min-height: 450px;

        max-height: 500px;

    }


    .india-leader-content {

        padding: 40px;

    }


    .india-about-cta-inner {

        grid-template-columns: auto 1fr;

    }


    .india-about-cta-actions {

        grid-column: 1 / -1;

        flex-direction: row;

        align-items: center;

        flex-wrap: wrap;

    }

}


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

@media(max-width:600px) {

    .india-about-hero-grid {

        width: calc(100% - 30px);

        padding: 65px 0 80px;

    }


    .india-about-hero-content h1 {

        font-size: 42px;

        letter-spacing: -1.2px;

    }


    .india-about-hero-content>p {

        font-size: 15px;

        line-height: 1.75;

    }


    .india-about-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .india-about-primary-btn,
    .india-about-secondary-btn {

        width: 100%;

    }


    .india-about-mini-trust {

        display: grid;

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

    }


    .india-about-mini-trust>div {

        min-width: 0;

        padding-right: 14px;

        margin-right: 14px;

    }


    .india-about-mini-trust strong {

        font-size: 22px;

    }


    .india-about-mini-trust span {

        font-size: 14px;

    }


    .india-about-image-card {

        min-height: 400px;

        border-radius: 25px;

    }


    .india-about-image-card img {

        min-height: 400px;

    }


    .india-about-floating-card {

        left: 15px;

        bottom: 20px;

        min-width: 0;

        width: calc(100% - 30px);

    }


    .india-section-heading {

        margin-bottom: 40px;

    }


    .india-section-heading h2 {

        font-size: 34px;

    }


    .india-company-section,
    .india-leadership-section,
    .india-values-section,
    .india-capabilities-section,
    .india-trust-section {

        padding: 80px 0;

    }


    .india-company-image-frame img {

        height: 400px;

    }


    .india-company-image-label {

        left: 15px;

        bottom: 15px;

        right: 15px;

    }


    .india-company-checks {

        grid-template-columns: 1fr;

    }


    .india-company-stats {

        grid-template-columns: 1fr;

        margin-top: 50px;

    }


    .india-stat-item {

        border-right: 0;

        border-bottom: 1px solid #e8ebef;

    }


    .india-stat-item:last-child {

        border-bottom: 0;

    }


    .india-leader-image {

        min-height: 380px;

    }


    .india-leader-content {

        padding: 28px 22px;

    }


    .india-leader-content h3 {

        font-size: 32px;

    }


    .india-leader-quote {

        padding: 20px 18px 20px 50px;

    }


    .india-values-grid,
    .india-capabilities-grid {

        grid-template-columns: 1fr;

    }


    .india-value-card {

        min-height: auto;

    }


    .india-trust-image img {

        height: 400px;

    }


    .india-trust-badge {

        left: 15px;

        bottom: 20px;

        right: 15px;

    }


    .india-about-cta {

        padding-bottom: 80px;

    }


    .india-about-cta-inner {

        width: calc(100% - 30px);

        padding: 30px 22px;

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .india-about-cta-icon {

        width: 58px;

        height: 58px;

        font-size: 22px;

    }


    .india-about-cta-actions {

        grid-column: auto;

        flex-direction: column;

        align-items: stretch;

    }


    .india-about-cta-primary {

        justify-content: center;

        width: 100%;

    }


    .india-about-cta-phone {

        justify-content: center;

    }

}


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

@media(max-width:380px) {

    .india-about-hero-content h1 {

        font-size: 36px;

    }


    .india-about-mini-trust strong {

        font-size: 19px;

    }


    .india-about-mini-trust span {

        font-size: 10px;

    }


    .india-about-floating-card {

        padding: 15px;

    }


    .india-about-floating-icon {

        width: 42px;

        height: 42px;

    }


    .india-company-image-frame img {

        height: 350px;

    }


    .india-leader-image {

        min-height: 330px;

    }

}


















/* =========================================================
   indiaUSTRA ABOUT PAGE
   MOBILE ANIMATION FIX
   ========================================================= */

/* Prevent horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* =========================================================
   MOBILE AOS FIX
   ========================================================= */

@media (max-width: 767px) {

    /* AOS animations mobile par simple rakho */
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        transform: translate3d(0, 25px, 0) !important;
        opacity: 0;
    }

    [data-aos="fade-left"].aos-animate,
    [data-aos="fade-right"].aos-animate {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .india-about-hero {
        overflow: hidden !important;
    }

    .india-about-hero-grid {
        width: calc(100% - 30px);
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .india-about-hero-content {
        width: 100%;
        max-width: 100%;
    }

    .india-about-hero-content h1 {
        font-size: clamp(38px, 10vw, 48px);
        line-height: 1.05;
        letter-spacing: -1px;
    }

    .india-about-hero-content>p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.75;
    }


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

    .india-about-hero-visual {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .india-about-image-card {

        width: 100%;

        min-height: 390px;

        height: 390px;

        transform: none !important;

        border-radius: 24px;

        overflow: hidden;

    }

    .india-about-image-card img {

        width: 100%;

        height: 390px;

        min-height: 390px;

        object-fit: cover;

    }


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

    .india-about-floating-card {

        position: absolute;

        left: 14px;

        right: 14px;

        bottom: 15px;

        width: auto;

        min-width: 0;

        max-width: calc(100% - 24px);

        padding: 15px 15px;

        border-radius: 16px;

        animation: none !important;

    }

    .india-about-floating-icon {

        width: 42px;

        height: 42px;

        border-radius: 14px;

    }


    /* =====================================================
       HERO BUTTONS
       ===================================================== */

    .india-about-hero-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 14px;

    }

    .india-about-primary-btn,
    .india-about-secondary-btn {

        width: 100%;

        min-height: 52px;

    }


    /* =====================================================
       TRUST COUNTERS
       ===================================================== */

    .india-about-mini-trust {

        width: 100%;

        display: grid;

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

        margin-top: 35px;

    }

    .india-about-mini-trust>div {

        min-width: 0;

        padding-right: 14px;

        margin-right: 14px;

    }

    .india-about-mini-trust strong {

        font-size: 21px;

    }

    .india-about-mini-trust span {

        font-size: 10px;

        line-height: 1.35;

    }


    /* =====================================================
       COMMON SECTION
       ===================================================== */

    .india-company-section,
    .india-leadership-section,
    .india-values-section,
    .india-capabilities-section,
    .india-trust-section {

        padding: 65px 0;

        overflow: hidden;

    }

    .india-section-heading {

        width: 100%;

        max-width: 100%;

        margin-bottom: 35px;

    }

    .india-section-heading h2 {

        font-size: 32px;

        line-height: 1.15;

    }

    .india-section-heading>p {

        font-size: 14px;

        line-height: 1.75;

    }


    /* =====================================================
       COMPANY
       ===================================================== */

    .india-company-container {

        width: calc(100% - 30px);

    }

    .india-company-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .india-company-image {

        width: 100%;

    }

    .india-company-image-frame {

        width: 100%;

        border-radius: 22px;

    }

    .india-company-image-frame img {

        width: 100%;

        height: 360px;

        object-fit: cover;

    }

    .india-company-image-label {

        left: 14px;

        right: 14px;

        bottom: 14px;

        padding: 14px 14px;

    }


    .india-company-content {

        width: 100%;

        max-width: 100%;

    }

    .india-company-content h3 {

        font-size: 31px;

        line-height: 1.15;

    }

    .india-company-content>p {

        font-size: 14px;

        line-height: 1.8;

    }


    .india-company-checks {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    /* =====================================================
       COMPANY STATS
       ===================================================== */

    .india-company-stats {

        width: 100%;

        grid-template-columns: 1fr;

        margin-top: 40px;

        border-radius: 20px;

        overflow: hidden;

    }

    .india-stat-item {

        width: 100%;

        border-right: 0 !important;

        border-bottom: 1px solid #e8ebef;

        padding: 20px;

    }

    .india-stat-item:last-child {

        border-bottom: 0;

    }


    /* =====================================================
       LEADERSHIP
       ===================================================== */

    .india-leadership-container {

        width: calc(100% - 30px);

    }

    .india-leader-card {

        grid-template-columns: 1fr;

        border-radius: 23px;

    }

    .india-leader-image {

        width: 100%;

        min-height: 350px;

        height: 350px;

        max-height: none;

    }

    .india-leader-image img {

        width: 100%;

        height: 350px;

        object-fit: cover;

    }

    .india-leader-content {

        padding: 27px 20px;

    }

    .india-leader-content h3 {

        font-size: 30px;

    }


    .india-leader-quote {

        margin: 20px 0;

        padding: 18px 18px 18px 48px;

    }

    .india-leader-quote>i {

        left: 17px;

        top: 19px;

    }

    .india-leader-quote p {

        font-size: 15px;

        line-height: 1.7;

    }


    .india-leader-points {

        gap: 7px;

    }

    .india-leader-points span {

        font-size: 14px;

        padding: 8px 14px;

    }

    .india-leader-btn {

        width: 100%;

        justify-content: center;

        text-align: center;

    }


    /* =====================================================
       VALUES
       ===================================================== */

    .india-values-container {

        width: calc(100% - 30px);

    }

    .india-values-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .india-value-card {

        min-height: auto;

        padding: 25px;

        border-radius: 20px;

    }

    .india-value-card:hover {

        transform: translateY(-4px);

    }


    /* =====================================================
       CAPABILITIES
       ===================================================== */

    .india-capabilities-container {

        width: calc(100% - 30px);

    }

    .india-capabilities-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .india-capability-card {

        padding: 25px;

        border-radius: 20px;

    }

    .india-capability-card:hover {

        transform: translateY(-5px);

    }


    /* =====================================================
       TRUST
       ===================================================== */

    .india-trust-container {

        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .india-trust-content {

        max-width: 100%;

    }

    .india-trust-content h2 {

        font-size: 34px;

    }

    .india-trust-content>p {

        font-size: 14px;

    }

    .india-trust-list {

        gap: 14px;

    }

    .india-trust-list>div {

        padding: 14px;

    }

    .india-trust-list>div:hover {

        transform: none;

    }


    .india-trust-image {

        border-radius: 23px;

    }

    .india-trust-image img {

        width: 100%;

        height: 370px;

        object-fit: cover;

    }

    .india-trust-badge {

        left: 14px;

        right: 14px;

        bottom: 15px;

    }


    /* =====================================================
       FINAL CTA
       ===================================================== */

    .india-about-cta {

        padding-bottom: 65px;

        overflow: hidden;

    }

    .india-about-cta-inner {

        width: calc(100% - 30px);

        padding: 27px 20px;

        grid-template-columns: 1fr;

        gap: 18px;

        border-radius: 23px;

    }

    .india-about-cta-icon {

        width: 58px;

        height: 58px;

    }

    .india-about-cta-content h2 {

        font-size: 29px;

    }

    .india-about-cta-content p {

        font-size: 15px;

        line-height: 1.7;

    }

    .india-about-cta-actions {

        width: 100%;

        grid-column: auto;

        flex-direction: column;

        align-items: stretch;

    }

    .india-about-cta-primary {

        width: 100%;

        justify-content: center;

    }

    .india-about-cta-phone {

        justify-content: center;

    }

}


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

@media (max-width: 380px) {

    .india-about-hero-content h1 {

        font-size: 35px;

    }

    .india-about-image-card {

        height: 340px;

        min-height: 340px;

    }

    .india-about-image-card img {

        height: 340px;

        min-height: 340px;

    }

    .india-about-mini-trust strong {

        font-size: 18px;

    }

    .india-about-mini-trust span {

        font-size: 10px;

    }

    .india-company-image-frame img {

        height: 320px;

    }

    .india-leader-image,
    .india-leader-image img {

        height: 320px;

        min-height: 320px;

    }

    .india-trust-image img {

        height: 330px;

    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

    }

}













/*CONTACT PAGE*/

/* =========================================================
   INDUSTRA CONTACT PAGE
   PART 2 — STRICTLY SCOPED PREMIUM CSS
   ========================================================= */


/* =========================================================
   CONTACT PAGE ROOT
   ========================================================= */

.ind-contact-page {
    --icp-dark: #07111b;
    --icp-dark-2: #101d28;
    --icp-gold: #d4a017;
    --icp-gold-light: #f5c542;
    --icp-gold-soft: #fff6dc;
    --icp-white: #ffffff;
    --icp-text: #111827;
    --icp-muted: #64748b;
    --icp-border: #e7eaee;
    --icp-bg: #f7f9fb;
    --icp-green: #16a34a;

    width: 100%;
    min-height: 100vh;

    color: var(--icp-text);

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

    overflow-x: hidden;
}


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

.ind-contact-page .ind-contact-top-bar {

    width: 100%;

    background: #07111b;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}


.ind-contact-page .ind-contact-top-inner {

    width: min(1240px, 92%);

    min-height: 42px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.ind-contact-page .ind-contact-location {

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, .72);

    font-size: 14px;

    font-weight: 600;

}


.ind-contact-page .ind-contact-location i {

    color: var(--icp-gold-light);

}


.ind-contact-page .ind-contact-top-links {

    display: flex;

    align-items: center;

    gap: 25px;

}


.ind-contact-page .ind-contact-top-links a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: rgba(255, 255, 255, .75);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-top-links a:hover {

    color: var(--icp-gold-light);

}


/* =========================================================
   NAVBAR
   ========================================================= */

.ind-contact-page .ind-contact-navbar {

    position: relative;

    width: 100%;

    z-index: 999;

    background: rgba(255, 255, 255, .96);

    border-bottom: 1px solid rgba(15, 23, 42, .08);

    box-shadow: 0 8px 30px rgba(15, 23, 42, .06);

}


.ind-contact-page .ind-contact-nav-container {

    width: min(1240px, 92%);

    min-height: 88px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 15px;

}


.ind-contact-page .ind-contact-logo {

    flex-shrink: 0;

    text-decoration: none;

}


.ind-contact-page .ind-contact-logo-box {

    width: 52px;

    height: 52px;

    overflow: hidden;

    border-radius: 15px;

}


.ind-contact-page .ind-contact-logo-box img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.ind-contact-page .ind-contact-logo-name {

    flex-shrink: 0;

}


.ind-contact-page .ind-contact-logo-name img {

    display: block;

    width: 150px;

    height: auto;

    object-fit: contain;

}


/* NAV */

.ind-contact-page .ind-contact-nav-menu {

    margin-left: auto;

}


.ind-contact-page .ind-contact-nav-menu>ul {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 4px;

    margin: 0;

    padding: 0;

}


.ind-contact-page .ind-contact-nav-menu>ul>li {

    position: relative;

    list-style: none;

}


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

    min-height: 42px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    border: 0;

    background: transparent;

    color: #334155;

    text-decoration: none;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-nav-menu>ul>li>a:hover,
.ind-contact-page .ind-contact-dropdown-btn:hover,
.ind-contact-page .ind-contact-nav-menu>ul>li>a.ind-contact-active {

    color: #b17c05;

}


.ind-contact-page .ind-contact-dropdown-btn span {

    font-size: 10px;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-has-dropdown:hover .ind-contact-dropdown-btn span {

    transform: rotate(180deg);

}


/* QUOTE */

.ind-contact-page .ind-contact-quote-item {

    margin-left: 7px;

}


.ind-contact-page .ind-contact-quote-btn {

    padding: 0 18px !important;

    min-height: 44px !important;

    border-radius: 14px !important;

    color: #111827 !important;

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light)) !important;

    box-shadow: 0 14px 25px rgba(212, 160, 23, .18);

}


.ind-contact-page .ind-contact-quote-btn span {

    font-size: 15px;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-quote-btn:hover span {

    transform: translate(3px, -3px);

}


/* MOBILE BUTTON */

.ind-contact-page .ind-contact-mobile-toggle {

    display: none;

    width: 44px;

    height: 44px;

    margin-left: auto;

    padding: 0;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    background: #ffffff;

    cursor: pointer;

}


.ind-contact-page .ind-contact-mobile-toggle span {

    display: block;

    width: 20px;

    height: 2px;

    margin: 4px auto;

    background: #111827;

    transition: .3s ease;

}


/* =========================================================
   NAV DROPDOWN
   ========================================================= */

.ind-contact-page .ind-contact-dropdown {

    position: absolute;

    top: calc(100% + 3px);

    left: 0;

    min-width: 270px;

    padding: 9px;

    border: 1px solid rgba(15, 23, 42, .08);

    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 25px 60px rgba(15, 23, 42, .15);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition: .25s ease;

    z-index: 1000;

}


.ind-contact-page .ind-contact-has-dropdown:hover>.ind-contact-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.ind-contact-page .ind-contact-dropdown-item {

    position: relative;

}


.ind-contact-page .ind-contact-dropdown-item>button {

    width: 100%;

    min-height: 43px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 14px;

    border: 0;

    border-radius: 14px;

    background: transparent;

    color: #334155;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

    transition: .25s ease;

}


.ind-contact-page .ind-contact-dropdown-item>button:hover {

    color: #b17c05;

    background: #fff8e7;

}


.ind-contact-page .ind-contact-submenu {

    position: absolute;

    top: -9px;

    left: calc(100% + 5px);

    min-width: 250px;

    padding: 9px;

    border: 1px solid rgba(15, 23, 42, .08);

    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 25px 60px rgba(15, 23, 42, .15);

    opacity: 0;

    visibility: hidden;

    transform: translateX(8px);

    transition: .25s ease;

}


.ind-contact-page .ind-contact-has-submenu:hover>.ind-contact-submenu {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}


.ind-contact-page .ind-contact-submenu a,
.ind-contact-page .ind-contact-simple-link {

    display: block;

    padding: 14px 14px;

    border-radius: 9px;

    color: #475569;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.4;

    transition: .25s ease;

}


.ind-contact-page .ind-contact-submenu a:hover,
.ind-contact-page .ind-contact-simple-link:hover {

    color: #b17c05;

    background: #fff8e7;

}


/* =========================================================
   CONTACT HERO
   ========================================================= */

.ind-contact-page .ind-contact-hero {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(115deg,
            #061019,
            #101d28 55%,
            #172832);

}


.ind-contact-page .ind-contact-hero::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    right: -180px;

    top: -200px;

    border-radius: 50%;

    background: var(--icp-gold);

    opacity: .10;

    filter: blur(100px);

}


.ind-contact-page .ind-contact-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(245, 197, 66, .65),
            transparent);

}


.ind-contact-page .ind-contact-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(3, 9, 15, .92),
            rgba(3, 9, 15, .60),
            rgba(3, 9, 15, .25));

}


.ind-contact-page .ind-contact-hero-grid {

    position: relative;

    z-index: 2;

    width: min(1240px, 92%);

    margin: auto;

    padding: 90px 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

}


/* HERO CONTENT */

.ind-contact-page .ind-contact-hero-content {

    max-width: 650px;

}


.ind-contact-page .ind-contact-hero-tag {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 14px 17px;

    border: 1px solid rgba(245, 197, 66, .30);

    border-radius: 50px;

    background: rgba(245, 197, 66, .08);

    color: var(--icp-gold-light);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ind-contact-page .ind-contact-hero-content h1 {

    margin: 24px 0 20px;

    color: #ffffff;

    font-size: clamp(46px, 5vw, 72px);

    line-height: 1.02;

    letter-spacing: -2px;

    font-weight: 900;

}


.ind-contact-page .ind-contact-hero-content h1 span {

    display: block;

    color: var(--icp-gold-light);

}


.ind-contact-page .ind-contact-hero-content>p {

    max-width: 600px;

    margin: 0;

    color: rgba(255, 255, 255, .70);

    font-size: 16px;

    line-height: 1.9;

}


/* HERO ACTIONS */

.ind-contact-page .ind-contact-hero-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.ind-contact-page .ind-contact-hero-primary,
.ind-contact-page .ind-contact-hero-secondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 22px;

    border-radius: 15px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    transition: .35s ease;

}


.ind-contact-page .ind-contact-hero-primary {

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

    box-shadow:
        0 15px 35px rgba(212, 160, 23, .22);

}


.ind-contact-page .ind-contact-hero-primary:hover {

    color: #111827;

    transform: translateY(-5px);

    box-shadow:
        0 23px 45px rgba(212, 160, 23, .35);

}


.ind-contact-page .ind-contact-hero-secondary {

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .20);

    background: rgba(255, 255, 255, .06);

    backdrop-filter: blur(14px);

}


.ind-contact-page .ind-contact-hero-secondary:hover {

    color: #ffffff;

    border-color: var(--icp-gold);

    background: rgba(212, 160, 23, .10);

    transform: translateY(-5px);

}


/* HERO TRUST */

.ind-contact-page .ind-contact-hero-trust {

    display: flex;

    margin-top: 42px;

}


.ind-contact-page .ind-contact-hero-trust>div {

    min-width: 130px;

    padding-right: 25px;

    margin-right: 25px;

    border-right: 1px solid rgba(255, 255, 255, .15);

}


.ind-contact-page .ind-contact-hero-trust>div:last-child {

    border-right: 0;

    margin-right: 0;

}


.ind-contact-page .ind-contact-hero-trust strong {

    display: block;

    color: var(--icp-gold-light);

    font-size: 25px;

    font-weight: 900;

}


.ind-contact-page .ind-contact-hero-trust span {

    display: block;

    margin-top: 5px;

    color: rgba(255, 255, 255, .55);

    font-size: 14px;

}


/* HERO IMAGE */

.ind-contact-page .ind-contact-hero-visual {

    position: relative;

}


.ind-contact-page .ind-contact-hero-image {

    position: relative;

    min-height: 470px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 30px;

    box-shadow:
        0 35px 90px rgba(0, 0, 0, .38);

    transform: rotate(1deg);

}


.ind-contact-page .ind-contact-hero-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(180deg,
            transparent 40%,
            rgba(0, 0, 0, .75));

}


.ind-contact-page .ind-contact-hero-image img {

    display: block;

    width: 100%;

    height: 470px;

    object-fit: cover;

    transition: .8s ease;

}


.ind-contact-page .ind-contact-hero-image:hover img {

    transform: scale(1.06);

}


.ind-contact-page .ind-contact-hero-image-caption {

    position: absolute;

    z-index: 3;

    left: 25px;

    right: 25px;

    bottom: 23px;

    display: flex;

    align-items: center;

    gap: 14px;

}


.ind-contact-page .ind-contact-hero-image-caption>i {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: var(--icp-gold);

    color: #111827;

}


.ind-contact-page .ind-contact-hero-image-caption strong {

    display: block;

    color: #ffffff;

    font-size: 14px;

}


.ind-contact-page .ind-contact-hero-image-caption span {

    display: block;

    margin-top: 3px;

    color: rgba(255, 255, 255, .65);

    font-size: 14px;

}


/* FLOATING HERO */

.ind-contact-page .ind-contact-hero-floating {

    position: absolute;

    z-index: 5;

    left: -30px;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 19px;

    min-width: 230px;

    border-radius: 17px;

    background: rgba(255, 255, 255, .95);

    box-shadow: 0 20px 55px rgba(0, 0, 0, .28);

    backdrop-filter: blur(14px);

    animation: indContactFloat 4s ease-in-out infinite;

}


@keyframes indContactFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }

}


.ind-contact-page .ind-contact-floating-icon {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: var(--icp-gold-soft);

    color: #b17c05;

}


.ind-contact-page .ind-contact-hero-floating strong {

    display: block;

    color: #111827;

    font-size: 15px;

}


.ind-contact-page .ind-contact-hero-floating span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 14px;

}


/* =========================================================
   MAIN CONTACT AREA
   ========================================================= */

.ind-contact-page .ind-contact-main {

    padding: 114px 0;

    background: #ffffff;

}


.ind-contact-page .ind-contact-main-container {

    width: min(1240px, 92%);

    margin: auto;

}


.ind-contact-page .ind-contact-section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;

}


.ind-contact-page .ind-contact-section-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #b17c05;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2.5px;

}


.ind-contact-page .ind-contact-section-heading h2 {

    margin: 16px 0 17px;

    color: #0b1220;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -1px;

}


.ind-contact-page .ind-contact-section-heading h2 span {

    color: var(--icp-gold);

}


.ind-contact-page .ind-contact-section-heading p {

    max-width: 680px;

    margin: auto;

    color: var(--icp-muted);

    font-size: 15px;

    line-height: 1.8;

}


/* MAIN GRID */

.ind-contact-page .ind-contact-main-grid {

    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 30px;

    align-items: stretch;

}


/* =========================================================
   CONTACT INFO PANEL
   ========================================================= */

.ind-contact-page .ind-contact-info-panel {

    position: relative;

    overflow: hidden;

    padding: 38px;

    border-radius: 28px;

    background:
        linear-gradient(145deg,
            #09131d,
            #152530);

    box-shadow:
        0 30px 75px rgba(15, 23, 42, .16);

}


.ind-contact-page .ind-contact-info-panel::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -140px;

    top: -130px;

    border-radius: 50%;

    background: var(--icp-gold);

    opacity: .10;

    filter: blur(50px);

}


.ind-contact-page .ind-contact-info-header {

    position: relative;

    z-index: 1;

    margin-bottom: 27px;

}


.ind-contact-page .ind-contact-info-header>span {

    color: var(--icp-gold-light);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ind-contact-page .ind-contact-info-header h3 {

    margin: 14px 0 14px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.15;

    font-weight: 900;

}


.ind-contact-page .ind-contact-info-header p {

    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: 15px;

    line-height: 1.8;

}


/* INFO CARDS */

.ind-contact-page .ind-contact-info-card {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 17px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .09);

}


.ind-contact-page .ind-contact-info-card:last-of-type {

    border-bottom: 0;

}


.ind-contact-page .ind-contact-info-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(245, 197, 66, .10);

    border: 1px solid rgba(245, 197, 66, .14);

    color: var(--icp-gold-light);

}


.ind-contact-page .ind-contact-info-card>div:last-child {

    min-width: 0;

}


.ind-contact-page .ind-contact-info-card>div:last-child>span {

    display: block;

    color: rgba(255, 255, 255, .40);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-contact-page .ind-contact-info-card strong {

    display: block;

    margin-top: 4px;

    color: #ffffff;

    font-size: 15px;

    line-height: 1.4;

}


.ind-contact-page .ind-contact-info-card p {

    margin: 4px 0 0;

    color: rgba(255, 255, 255, .58);

    font-size: 14px;

    line-height: 1.6;

}


/* QUICK ACTIONS */

.ind-contact-page .ind-contact-quick-actions {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 25px;

}


.ind-contact-page .ind-contact-quick-call,
.ind-contact-page .ind-contact-quick-mail {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    border-radius: 14px;

    text-decoration: none;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-quick-call {

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

}


.ind-contact-page .ind-contact-quick-mail {

    border: 1px solid rgba(255, 255, 255, .13);

    background: rgba(255, 255, 255, .05);

    color: #ffffff;

}


.ind-contact-page .ind-contact-quick-call:hover,
.ind-contact-page .ind-contact-quick-mail:hover {

    transform: translateY(-4px);

}


.ind-contact-page .ind-contact-quick-call>i,
.ind-contact-page .ind-contact-quick-mail>i {

    font-size: 16px;

}


.ind-contact-page .ind-contact-quick-actions span {

    display: block;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

    opacity: .65;

}


.ind-contact-page .ind-contact-quick-actions strong {

    display: block;

    margin-top: 3px;

    font-size: 14px;

}


/* =========================================================
   FORM PANEL
   ========================================================= */

.ind-contact-page .ind-contact-form-panel {

    padding: 38px;

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

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 25px 65px rgba(15, 23, 42, .08);

}


.ind-contact-page .ind-contact-form-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 23px;

    margin-bottom: 25px;

    border-bottom: 1px solid #edf0f2;

}


.ind-contact-page .ind-contact-form-top>div:first-child>span {

    color: #b17c05;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ind-contact-page .ind-contact-form-top h3 {

    margin: 7px 0 0;

    color: #0b1220;

    font-size: 28px;

    line-height: 1.15;

    font-weight: 900;

}


.ind-contact-page .ind-contact-form-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 14px;

    border-radius: 50px;

    background: #effaf2;

    color: #15803d;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

}


.ind-contact-page .ind-contact-form-status i {

    font-size: 10px;

}


/* FORM ROW */

.ind-contact-page .ind-contact-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 17px;

}


.ind-contact-page .ind-contact-field {

    margin-bottom: 19px;

}


.ind-contact-page .ind-contact-field label {

    display: block;

    margin-bottom: 8px;

    color: #334155;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}


.ind-contact-page .ind-contact-field label sup {

    color: #dc2626;

    font-size: 14px;

}


/* INPUT */

.ind-contact-page .ind-contact-input-wrap {

    position: relative;

}


.ind-contact-page .ind-contact-input-wrap>i:first-child {

    position: absolute;

    z-index: 2;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    font-size: 15px;

    pointer-events: none;

}


.ind-contact-page .ind-contact-input-wrap input,
.ind-contact-page .ind-contact-input-wrap select {

    width: 100%;

    height: 50px;

    padding: 0 42px;

    border: 1px solid #e2e8f0;

    outline: none;

    border-radius: 15px;

    background: #f8fafc;

    color: #1e293b;

    font-family: inherit;

    font-size: 14px;

    transition: .3s ease;

    box-sizing: border-box;

}


.ind-contact-page .ind-contact-input-wrap select {

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;

}


.ind-contact-page .ind-contact-input-wrap input::placeholder {

    color: #a1aab5;

}


.ind-contact-page .ind-contact-input-wrap input:focus,
.ind-contact-page .ind-contact-input-wrap select:focus {

    border-color: rgba(212, 160, 23, .70);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(212, 160, 23, .09);

}


.ind-contact-page .ind-contact-input-wrap:focus-within>i:first-child {

    color: #b17c05;

}


.ind-contact-page .ind-contact-select-arrow {

    position: absolute !important;

    left: auto !important;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    pointer-events: none;

}


/* TEXTAREA */

.ind-contact-page .ind-contact-textarea-wrap {

    position: relative;

}


.ind-contact-page .ind-contact-textarea-wrap>i {

    position: absolute;

    left: 14px;

    top: 17px;

    color: #94a3b8;

    font-size: 15px;

}


.ind-contact-page .ind-contact-textarea-wrap textarea {

    display: block;

    width: 100%;

    min-height: 130px;

    padding: 15px 15px 15px 42px;

    resize: vertical;

    border: 1px solid #e2e8f0;

    outline: none;

    border-radius: 15px;

    background: #f8fafc;

    color: #1e293b;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.7;

    box-sizing: border-box;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-textarea-wrap textarea::placeholder {

    color: #a1aab5;

}


.ind-contact-page .ind-contact-textarea-wrap textarea:focus {

    border-color: rgba(212, 160, 23, .70);

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(212, 160, 23, .09);

}


/* FORM FOOTER */

.ind-contact-page .ind-contact-form-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 5px;

}


.ind-contact-page .ind-contact-form-note {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #94a3b8;

    font-size: 14px;

}


.ind-contact-page .ind-contact-form-note i {

    color: #16a34a;

}


.ind-contact-page .ind-contact-submit-btn {

    min-height: 51px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 23px;

    border: 0;

    border-radius: 15px;

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

    font-family: inherit;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 14px 28px rgba(212, 160, 23, .18);

    transition: .35s ease;

}


.ind-contact-page .ind-contact-submit-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 38px rgba(212, 160, 23, .28);

}


.ind-contact-page .ind-contact-submit-btn i {

    transition: .3s ease;

}


.ind-contact-page .ind-contact-submit-btn:hover i {

    transform: translateX(4px);

}


/* =========================================================
   SERVICES QUICK SELECT
   ========================================================= */

.ind-contact-page .ind-contact-services {

    padding: 105px 0;

    background:
        linear-gradient(135deg,
            #f7f9fb,
            #ffffff);

}


.ind-contact-page .ind-contact-services-container {

    width: min(1200px, 92%);

    margin: auto;

}


.ind-contact-page .ind-contact-services-grid {

    display: grid;

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

    gap: 18px;

}


.ind-contact-page .ind-contact-service-card {

    position: relative;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 15px;

    padding: 22px;

    overflow: hidden;

    border: 1px solid #e5e9ed;

    border-radius: 21px;

    background: #ffffff;

    text-decoration: none;

    box-shadow:
        0 14px 35px rgba(15, 23, 42, .05);

    transition: .4s ease;

}


.ind-contact-page .ind-contact-service-card::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--icp-gold),
            var(--icp-gold-light));

    transition: .4s ease;

}


.ind-contact-page .ind-contact-service-card:hover {

    transform: translateY(-8px);

    border-color: rgba(212, 160, 23, .30);

    box-shadow:
        0 25px 55px rgba(15, 23, 42, .10);

}


.ind-contact-page .ind-contact-service-card:hover::before {

    width: 100%;

}


.ind-contact-page .ind-contact-service-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #fff6dc;

    color: #b17c05;

    font-size: 20px;

    transition: .35s ease;

}


.ind-contact-page .ind-contact-service-card:hover .ind-contact-service-icon {

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

    transform: scale(1.07);

}


.ind-contact-page .ind-contact-service-card>div>span {

    color: #cbd5e1;

    font-size: 10px;

    font-weight: 900;

}


.ind-contact-page .ind-contact-service-card h3 {

    margin: 3px 0 4px;

    color: #111827;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 900;

}


.ind-contact-page .ind-contact-service-card p {

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;

}


.ind-contact-page .ind-contact-service-arrow {

    color: #94a3b8;

    font-size: 14px;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-service-card:hover .ind-contact-service-arrow {

    color: #b17c05;

    transform: translateX(5px);

}


/* =========================================================
   LOCATION SECTION
   ========================================================= */

.ind-contact-page .ind-contact-location-section {

    padding: 114px 0;

    background: #ffffff;

}


.ind-contact-page .ind-contact-location-container {

    width: min(1200px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 65px;

}


/* MAP */

.ind-contact-page .ind-contact-map-card {

    min-height: 480px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(135deg,
            #dce4e8,
            #f5f7f8);

    box-shadow:
        0 30px 70px rgba(15, 23, 42, .12);

}


.ind-contact-page .ind-contact-map-placeholder {

    position: relative;

    min-height: 480px;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 35px;

    text-align: center;

    background-image:
        linear-gradient(rgba(255, 255, 255, .45) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .45) 1px,
            transparent 1px);

    background-size: 35px 35px;

}


.ind-contact-page .ind-contact-map-placeholder::before {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    border: 1px solid rgba(212, 160, 23, .35);

    border-radius: 50%;

    animation: indContactMapPulse 3s ease-in-out infinite;

}


@keyframes indContactMapPulse {

    0%,
    100% {
        transform: scale(.92);
        opacity: .4;
    }

    50% {
        transform: scale(1.08);
        opacity: .9;
    }

}


.ind-contact-page .ind-contact-map-icon {

    position: relative;

    z-index: 2;

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

    font-size: 25px;

    box-shadow:
        0 15px 35px rgba(212, 160, 23, .25);

}


.ind-contact-page .ind-contact-map-placeholder>span {

    position: relative;

    z-index: 2;

    margin-top: 25px;

    color: #b17c05;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ind-contact-page .ind-contact-map-placeholder h3 {

    position: relative;

    z-index: 2;

    margin: 8px 0;

    color: #0b1220;

    font-size: 31px;

    font-weight: 900;

}


.ind-contact-page .ind-contact-map-placeholder p {

    position: relative;

    z-index: 2;

    max-width: 390px;

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;

}


.ind-contact-page .ind-contact-map-btn {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    padding: 14px 17px;

    border-radius: 14px;

    background: #0b1220;

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-map-btn:hover {

    color: #111827;

    background: var(--icp-gold-light);

    transform: translateY(-4px);

}


/* LOCATION CONTENT */

.ind-contact-page .ind-contact-location-content {

    max-width: 570px;

}


.ind-contact-page .ind-contact-location-content h2 {

    margin: 17px 0 18px;

    color: #0b1220;

    font-size: clamp(35px, 4vw, 51px);

    line-height: 1.08;

    font-weight: 900;

    letter-spacing: -1px;

}


.ind-contact-page .ind-contact-location-content h2 span {

    color: var(--icp-gold);

}


.ind-contact-page .ind-contact-location-content>p {

    margin: 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.9;

}


.ind-contact-page .ind-contact-location-points {

    display: grid;

    gap: 14px;

    margin-top: 30px;

}


.ind-contact-page .ind-contact-location-points>div {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 16px;

    border: 1px solid #edf0f2;

    border-radius: 17px;

    transition: .35s ease;

}


.ind-contact-page .ind-contact-location-points>div:hover {

    transform: translateX(7px);

    border-color: rgba(212, 160, 23, .30);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, .06);

}


.ind-contact-page .ind-contact-location-points>div>i {

    color: #c28b0b;

    margin-top: 2px;

}


.ind-contact-page .ind-contact-location-points strong {

    display: block;

    color: #111827;

    font-size: 15px;

}


.ind-contact-page .ind-contact-location-points span {

    display: block;

    margin-top: 3px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;

}


/* =========================================================
   EMERGENCY CTA
   ========================================================= */

.ind-contact-page .ind-contact-emergency {

    padding: 0 0 114px;

    background: #ffffff;

}


.ind-contact-page .ind-contact-emergency-inner {

    position: relative;

    width: min(1200px, 92%);

    margin: auto;

    padding: 48px;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 24px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(115deg,
            #0a141e,
            #172731);

    box-shadow:
        0 30px 75px rgba(15, 23, 42, .18);

}


.ind-contact-page .ind-contact-emergency-inner::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    right: -120px;

    top: -150px;

    border-radius: 50%;

    background: var(--icp-gold);

    opacity: .12;

    filter: blur(55px);

}


.ind-contact-page .ind-contact-emergency-icon {

    position: relative;

    z-index: 1;

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

    font-size: 24px;

}


.ind-contact-page .ind-contact-emergency-content {

    position: relative;

    z-index: 1;

}


.ind-contact-page .ind-contact-emergency-content>span {

    color: var(--icp-gold-light);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ind-contact-page .ind-contact-emergency-content h2 {

    margin: 7px 0 7px;

    color: #ffffff;

    font-size: clamp(27px, 3vw, 39px);

    line-height: 1.1;

    font-weight: 900;

}


.ind-contact-page .ind-contact-emergency-content p {

    margin: 0;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.6;

}


.ind-contact-page .ind-contact-emergency-actions {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.ind-contact-page .ind-contact-emergency-call,
.ind-contact-page .ind-contact-emergency-form {

    min-height: 47px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 18px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-emergency-call {

    background: var(--icp-gold-light);

    color: #111827;

}


.ind-contact-page .ind-contact-emergency-form {

    border: 1px solid rgba(255, 255, 255, .16);

    color: #ffffff;

    background: rgba(255, 255, 255, .05);

}


.ind-contact-page .ind-contact-emergency-call:hover,
.ind-contact-page .ind-contact-emergency-form:hover {

    transform: translateY(-4px);

}


.ind-contact-page .ind-contact-emergency-form:hover {

    color: #ffffff;

    border-color: var(--icp-gold);

}


/* =========================================================
   FOOTER
   ========================================================= */

.ind-contact-page .ind-contact-footer {

    background: #07111b;

    color: #ffffff;

}


.ind-contact-page .ind-contact-footer-container {

    width: min(1200px, 92%);

    margin: auto;

}


.ind-contact-page .ind-contact-footer-grid {

    display: grid;

    grid-template-columns: 1.3fr .8fr 1fr 1.1fr;

    gap: 45px;

    padding: 75px 0 55px;

}


.ind-contact-page .ind-contact-footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: #ffffff;

    text-decoration: none;

}


.ind-contact-page .ind-contact-footer-logo-icon {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            var(--icp-gold),
            var(--icp-gold-light));

    color: #111827;

}


.ind-contact-page .ind-contact-footer-logo span {

    font-size: 23px;

    font-weight: 900;

    letter-spacing: 1px;

}


.ind-contact-page .ind-contact-footer-brand>p {

    max-width: 300px;

    margin: 18px 0 22px;

    color: #94a3b8;

    font-size: 14px;

    line-height: 1.8;

}


.ind-contact-page .ind-contact-footer-socials {

    display: flex;

    gap: 8px;

}


.ind-contact-page .ind-contact-footer-socials a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 14px;

    color: #94a3b8;

    text-decoration: none;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-footer-socials a:hover {

    color: #111827;

    background: var(--icp-gold-light);

    border-color: var(--icp-gold-light);

    transform: translateY(-3px);

}


.ind-contact-page .ind-contact-footer-column h4 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2px;

}


.ind-contact-page .ind-contact-footer-column>a {

    display: block;

    margin-bottom: 14px;

    color: #94a3b8;

    text-decoration: none;

    font-size: 14px;

    transition: .3s ease;

}


.ind-contact-page .ind-contact-footer-column>a:hover {

    color: var(--icp-gold-light);

    transform: translateX(4px);

}


.ind-contact-page .ind-contact-footer-contact>div {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 15px;

}


.ind-contact-page .ind-contact-footer-contact i {

    flex-shrink: 0;

    margin-top: 2px;

    color: var(--icp-gold-light);

    font-size: 14px;

}


.ind-contact-page .ind-contact-footer-contact span,
.ind-contact-page .ind-contact-footer-contact a {

    color: #94a3b8;

    text-decoration: none;

    font-size: 14px;

    line-height: 1.6;

}


.ind-contact-page .ind-contact-footer-contact a:hover {

    color: var(--icp-gold-light);

}


/* FOOTER BOTTOM */

.ind-contact-page .ind-contact-footer-bottom {

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    color: #64748b;

    font-size: 14px;

}


.ind-contact-page .ind-contact-footer-bottom strong {

    color: #cbd5e1;

}


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

@media (max-width:1150px) {

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

        padding: 0 7px;

        font-size: 14px;

    }


    .ind-contact-page .ind-contact-logo-name img {

        width: 125px;

    }


    .ind-contact-page .ind-contact-nav-container {

        gap: 9px;

    }


    .ind-contact-page .ind-contact-hero-grid {

        gap: 45px;

    }


    .ind-contact-page .ind-contact-main-grid {

        grid-template-columns: 1fr;

    }


    .ind-contact-page .ind-contact-info-panel {

        display: grid;

        grid-template-columns: 1fr 1fr;

        column-gap: 25px;

    }


    .ind-contact-page .ind-contact-info-header {

        grid-column: 1 / -1;

    }


    .ind-contact-page .ind-contact-quick-actions {

        grid-column: 1 / -1;

    }


    .ind-contact-page .ind-contact-services-grid {

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

    }


    .ind-contact-page .ind-contact-footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}


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

@media (max-width:900px) {

    .ind-contact-page .ind-contact-top-links {

        display: none;

    }


    .ind-contact-page .ind-contact-nav-container {

        min-height: 75px;

    }


    .ind-contact-page .ind-contact-mobile-toggle {

        display: block;

    }


    .ind-contact-page .ind-contact-nav-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        background: #ffffff;

        border-top: 1px solid #edf0f2;

        box-shadow: 0 20px 40px rgba(15, 23, 42, .10);

        transition: .35s ease;

    }


    .ind-contact-page .ind-contact-nav-menu.ind-contact-menu-open {

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

        overflow-y: auto;

        opacity: 1;

        visibility: visible;

    }


    .ind-contact-page .ind-contact-nav-menu>ul {

        display: block;

        width: min(1240px, 92%);

        margin: auto;

        padding: 15px 0 25px;

    }


    .ind-contact-page .ind-contact-nav-menu>ul>li {

        border-bottom: 1px solid #edf0f2;

    }


    .ind-contact-page .ind-contact-nav-menu>ul>li:last-child {

        border-bottom: 0;

    }


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

        width: 100%;

        min-height: 48px;

        justify-content: space-between;

        padding: 0 5px;

    }


    .ind-contact-page .ind-contact-dropdown {

        position: static;

        width: 100%;

        min-width: 0;

        display: none;

        padding: 4px 0 8px;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

    }


    .ind-contact-page .ind-contact-has-dropdown.ind-contact-mobile-open>.ind-contact-dropdown {

        display: block;

    }


    .ind-contact-page .ind-contact-dropdown-item {

        border-bottom: 1px solid #f1f5f9;

    }


    .ind-contact-page .ind-contact-submenu {

        position: static;

        width: 100%;

        min-width: 0;

        display: none;

        padding: 3px 0 8px 14px;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

    }


    .ind-contact-page .ind-contact-has-submenu.ind-contact-mobile-open>.ind-contact-submenu {

        display: block;

    }


    .ind-contact-page .ind-contact-quote-item {

        margin: 14px 0 0;

        border: 0 !important;

    }


    .ind-contact-page .ind-contact-quote-btn {

        justify-content: center !important;

    }


    .ind-contact-page .ind-contact-hero-grid {

        grid-template-columns: 1fr;

        padding: 80px 0 95px;

    }


    .ind-contact-page .ind-contact-hero-content {

        max-width: 760px;

    }


    .ind-contact-page .ind-contact-hero-visual {

        max-width: 700px;

        width: 100%;

        margin: auto;

    }


    .ind-contact-page .ind-contact-hero-image {

        transform: none;

    }


    .ind-contact-page .ind-contact-location-container {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .ind-contact-page .ind-contact-location-content {

        max-width: none;

    }


    .ind-contact-page .ind-contact-emergency-inner {

        grid-template-columns: auto 1fr;

    }


    .ind-contact-page .ind-contact-emergency-actions {

        grid-column: 1 / -1;

        flex-direction: row;

        flex-wrap: wrap;

    }

}


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

@media (max-width:600px) {

    .ind-contact-page .ind-contact-top-inner {

        min-height: 38px;

    }


    .ind-contact-page .ind-contact-location {

        font-size: 10px;

    }


    .ind-contact-page .ind-contact-nav-container {

        width: calc(100% - 30px);

    }


    .ind-contact-page .ind-contact-logo-box {

        width: 45px;

        height: 45px;

    }


    .ind-contact-page .ind-contact-logo-name img {

        width: 114px;

    }


    /* HERO */

    .ind-contact-page .ind-contact-hero-grid {

        width: calc(100% - 30px);

        padding: 65px 0 80px;

        gap: 45px;

    }


    .ind-contact-page .ind-contact-hero-content h1 {

        font-size: 42px;

        letter-spacing: -1.2px;

    }


    .ind-contact-page .ind-contact-hero-content>p {

        font-size: 14px;

        line-height: 1.8;

    }


    .ind-contact-page .ind-contact-hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .ind-contact-page .ind-contact-hero-primary,
    .ind-contact-page .ind-contact-hero-secondary {

        width: 100%;

    }


    .ind-contact-page .ind-contact-hero-trust {

        width: 100%;

        display: grid;

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

    }


    .ind-contact-page .ind-contact-hero-trust>div {

        min-width: 0;

        padding-right: 14px;

        margin-right: 14px;

    }


    .ind-contact-page .ind-contact-hero-trust strong {

        font-size: 21px;

    }


    .ind-contact-page .ind-contact-hero-trust span {

        font-size: 10px;

        line-height: 1.35;

    }


    .ind-contact-page .ind-contact-hero-image {

        min-height: 380px;

        border-radius: 24px;

    }


    .ind-contact-page .ind-contact-hero-image img {

        height: 380px;

    }


    .ind-contact-page .ind-contact-hero-floating {

        left: 14px;

        right: 14px;

        bottom: 15px;

        min-width: 0;

        width: auto;

        padding: 15px 15px;

        animation: none;

    }


    /* MAIN */

    .ind-contact-page .ind-contact-main,
    .ind-contact-page .ind-contact-services,
    .ind-contact-page .ind-contact-location-section {

        padding: 70px 0;

    }


    .ind-contact-page .ind-contact-main-container,
    .ind-contact-page .ind-contact-services-container,
    .ind-contact-page .ind-contact-location-container {

        width: calc(100% - 30px);

    }


    .ind-contact-page .ind-contact-section-heading {

        margin-bottom: 38px;

    }


    .ind-contact-page .ind-contact-section-heading h2 {

        font-size: 32px;

    }


    .ind-contact-page .ind-contact-section-heading p {

        font-size: 15px;

    }


    /* INFO */

    .ind-contact-page .ind-contact-info-panel {

        display: block;

        padding: 27px 20px;

        border-radius: 22px;

    }


    .ind-contact-page .ind-contact-info-header h3 {

        font-size: 27px;

    }


    .ind-contact-page .ind-contact-info-card {

        padding: 15px 0;

    }


    .ind-contact-page .ind-contact-quick-actions {

        grid-template-columns: 1fr;

    }


    /* FORM */

    .ind-contact-page .ind-contact-form-panel {

        padding: 25px 18px;

        border-radius: 22px;

    }


    .ind-contact-page .ind-contact-form-top {

        flex-direction: column;

        gap: 14px;

    }


    .ind-contact-page .ind-contact-form-top h3 {

        font-size: 26px;

    }


    .ind-contact-page .ind-contact-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .ind-contact-page .ind-contact-form-footer {

        flex-direction: column;

        align-items: stretch;

    }


    .ind-contact-page .ind-contact-form-note {

        justify-content: center;

    }


    .ind-contact-page .ind-contact-submit-btn {

        width: 100%;

    }


    /* SERVICES */

    .ind-contact-page .ind-contact-services-grid {

        grid-template-columns: 1fr;

    }


    .ind-contact-page .ind-contact-service-card {

        padding: 18px;

    }


    /* LOCATION */

    .ind-contact-page .ind-contact-map-card {

        min-height: 390px;

        border-radius: 22px;

    }


    .ind-contact-page .ind-contact-map-placeholder {

        min-height: 390px;

        padding: 25px;

    }


    .ind-contact-page .ind-contact-map-placeholder h3 {

        font-size: 28px;

    }


    .ind-contact-page .ind-contact-location-content h2 {

        font-size: 34px;

    }


    .ind-contact-page .ind-contact-location-content>p {

        font-size: 14px;

    }


    .ind-contact-page .ind-contact-location-points>div:hover {

        transform: none;

    }


    /* EMERGENCY */

    .ind-contact-page .ind-contact-emergency {

        padding-bottom: 70px;

    }


    .ind-contact-page .ind-contact-emergency-inner {

        width: calc(100% - 30px);

        padding: 28px 20px;

        grid-template-columns: 1fr;

        border-radius: 22px;

    }


    .ind-contact-page .ind-contact-emergency-actions {

        grid-column: auto;

        flex-direction: column;

        align-items: stretch;

    }


    .ind-contact-page .ind-contact-emergency-call,
    .ind-contact-page .ind-contact-emergency-form {

        width: 100%;

    }


    /* FOOTER */

    .ind-contact-page .ind-contact-footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 60px 0 40px;

    }


    .ind-contact-page .ind-contact-footer-brand>p {

        max-width: 100%;

    }


    .ind-contact-page .ind-contact-footer-bottom {

        min-height: auto;

        padding: 20px 0;

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        line-height: 1.5;

    }

}


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

@media (max-width:380px) {

    .ind-contact-page .ind-contact-logo-name {

        display: none;

    }


    .ind-contact-page .ind-contact-hero-content h1 {

        font-size: 36px;

    }


    .ind-contact-page .ind-contact-hero-trust strong {

        font-size: 18px;

    }


    .ind-contact-page .ind-contact-hero-image,
    .ind-contact-page .ind-contact-hero-image img {

        min-height: 330px;

        height: 330px;

    }


    .ind-contact-page .ind-contact-section-heading h2 {

        font-size: 29px;

    }


    .ind-contact-page .ind-contact-location-content h2 {

        font-size: 30px;

    }


    .ind-contact-page .ind-contact-map-placeholder h3 {

        font-size: 25px;

    }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .ind-contact-page *,
    .ind-contact-page *::before,
    .ind-contact-page *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: .01ms !important;

    }

}


















/* CONTACT PAGE */
.ind-contact-v3 {

    --icv3-navy: #0b1b25;
    --icv3-navy-light: #17313d;

    --icv3-gold: #e96f32;
    --icv3-gold-light: #e96f32;
    --icv3-gold-soft: #fff8e7;

    --icv3-white: #ffffff;
    --icv3-bg: #f6f8f9;
    --icv3-bg-soft: #fbfcfc;

    --icv3-text: #17242d;
    --icv3-muted: #71808b;
    --icv3-border: #e5eaed;

    width: 100%;
    color: var(--icv3-text);

    font-family: "Inter", sans-serif;
    font-size: 14px;

    overflow: hidden;
}


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

.ind-contact-v3 .ind-contact-v3-container {

    width: min(1180px, 92%);
    margin: 0 auto;

}


/* =========================================================
   COMMON SECTION LABEL
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-section-label {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--icv3-gold);

    font-size: 14px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: 2px;

}


.ind-contact-v3 .ind-contact-v3-section-label::before {

    content: "";

    width: 25px;
    height: 1px;

    background: var(--icv3-gold);

}


/* =========================================================
   COMMON SECTION TITLE
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-section-title {

    margin: 15px 0 0;

    color: var(--icv3-navy);

    font-size: 38px;
    line-height: 1.12;

    font-weight: 800;
    letter-spacing: -1px;

}


.ind-contact-v3 .ind-contact-v3-section-title span {

    color: var(--icv3-gold);

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-breadcrumb {

    position: relative;

    min-height: 275px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

}


/* Decorative circle */

.ind-contact-v3 .ind-contact-v3-breadcrumb::before {

    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    right: -150px;
    top: -175px;

    border: 1px solid rgba(232, 189, 84, .18);

    border-radius: 50%;

    box-shadow:
        0 0 0 50px rgba(232, 189, 84, .025),
        0 0 0 100px rgba(232, 189, 84, .015);

}


/* Bottom accent */

.ind-contact-v3 .ind-contact-v3-breadcrumb::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 150px;
    height: 3px;

    background:
        linear-gradient(90deg,
            var(--icv3-gold),
            transparent);

}


/* Background */

.ind-contact-v3 .ind-contact-v3-breadcrumb-bg {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(201, 150, 32, .12),
            transparent 25%);

}


/* Breadcrumb content */

.ind-contact-v3 .ind-contact-v3-breadcrumb-content {

    position: relative;

    z-index: 2;

    padding: 65px 0 60px;

}


/* Label */

.ind-contact-v3 .ind-contact-v3-breadcrumb-label {

    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--icv3-gold-light);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 2.2px;

}


.ind-contact-v3 .ind-contact-v3-breadcrumb-label::before {

    content: "";

    width: 28px;
    height: 1px;

    background: var(--icv3-gold);

}


/* Title */

.ind-contact-v3 .ind-contact-v3-breadcrumb-title {

    margin: 14px 0 16px;

    color: #ffffff;

    font-size: 40px;
    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -.8px;

}


/* Navigation */

.ind-contact-v3 .ind-contact-v3-breadcrumb-nav {

    display: flex;
    align-items: center;

    gap: 14px;

}


.ind-contact-v3 .ind-contact-v3-breadcrumb-nav a {

    color: rgba(255, 255, 255, .58);

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition: color .25s ease;

}


.ind-contact-v3 .ind-contact-v3-breadcrumb-nav a:hover {

    color: var(--icv3-gold-light);

}


.ind-contact-v3 .ind-contact-v3-breadcrumb-nav i {

    color: rgba(255, 255, 255, .3);

    font-size: 10px;

}


.ind-contact-v3 .ind-contact-v3-breadcrumb-nav span {

    color: var(--icv3-gold-light);

    font-size: 14px;
    font-weight: 700;

}


/* =========================================================
   INTRO
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-intro {

    padding: 40px 0 40px;

    background: #ffffff;

}


.ind-contact-v3 .ind-contact-v3-intro-head {

    display: grid;

    grid-template-columns: 1fr .8fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 38px;

}


.ind-contact-v3 .ind-contact-v3-intro-text {

    margin: 0;

    color: var(--icv3-muted);

    font-size: 14px;
    line-height: 1.85;

}


/* =========================================================
   CONTACT QUICK CARDS
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-contact-grid {

    display: grid;

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

    gap: 15px;

}


.ind-contact-v3 .ind-contact-v3-contact-card {

    min-height: 100px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 19px;

    border: 1px solid var(--icv3-border);
    border-radius: 17px;

    background: #ffffff;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(12, 30, 42, .035);

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

}


.ind-contact-v3 .ind-contact-v3-contact-card:hover {

    transform: translateY(-6px);

    border-color: rgba(201, 150, 32, .35);

    box-shadow:
        0 18px 40px rgba(12, 30, 42, .09);

}


.ind-contact-v3 .ind-contact-v3-contact-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--icv3-gold);

    background: var(--icv3-gold-soft);

    transition: all .3s ease;

}


.ind-contact-v3 .ind-contact-v3-contact-card:hover .ind-contact-v3-contact-icon {

    color: #18242c;

    background:
        linear-gradient(135deg,
            var(--icv3-gold),
            var(--icv3-gold-light));

    transform: scale(1.05);

}


.ind-contact-v3 .ind-contact-v3-contact-content {

    min-width: 0;

}


.ind-contact-v3 .ind-contact-v3-contact-content span {

    display: block;

    color: #9ba5ad;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.4px;

}


.ind-contact-v3 .ind-contact-v3-contact-content strong {

    display: block;

    margin-top: 4px;

    color: var(--icv3-text);

    font-size: 15px;
    line-height: 1.3;

    font-weight: 800;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}


.ind-contact-v3 .ind-contact-v3-contact-content small {

    display: block;

    margin-top: 3px;

    color: #8a969f;

    font-size: 14px;

}


.ind-contact-v3 .ind-contact-v3-contact-arrow {

    margin-left: auto;

    color: #bdc5ca;

    font-size: 14px;

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-contact-card:hover .ind-contact-v3-contact-arrow {

    color: var(--icv3-gold);

    transform: translate(3px, -3px);

}


/* =========================================================
   MAIN CONTACT AREA
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-main {

    padding: 40px 0;

    background:
        linear-gradient(135deg,
            #f6f8f9,
            #ffffff);

}


.ind-contact-v3 .ind-contact-v3-main-grid {

    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 55px;

    align-items: center;

}


/* =========================================================
   LEFT INFO
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-info {

    max-width: 500px;

}


.ind-contact-v3 .ind-contact-v3-info-title {

    margin: 15px 0 17px;

    color: var(--icv3-navy);

    font-size: 40px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;

}


.ind-contact-v3 .ind-contact-v3-info-title span {

    display: block;

    color: var(--icv3-gold);

}


.ind-contact-v3 .ind-contact-v3-info-description {

    margin: 0;

    color: var(--icv3-muted);

    font-size: 14px;
    line-height: 1.85;

}


/* =========================================================
   PROCESS
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-process {

    margin-top: 32px;

}


.ind-contact-v3 .ind-contact-v3-process-item {

    display: flex;

    align-items: center;

    gap: 15px;

}


.ind-contact-v3 .ind-contact-v3-process-icon {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--icv3-gold-soft);

}


.ind-contact-v3 .ind-contact-v3-process-icon span {

    color: #ae7907;

    font-size: 14px;
    font-weight: 900;

}


.ind-contact-v3 .ind-contact-v3-process-item h4 {

    margin: 0;

    color: #25323b;

    font-size: 15px;
    font-weight: 800;

}


.ind-contact-v3 .ind-contact-v3-process-item p {

    margin: 3px 0 0;

    color: #89959e;

    font-size: 14px;
    line-height: 1.5;

}


.ind-contact-v3 .ind-contact-v3-process-line {

    width: 1px;
    height: 22px;

    margin: 3px 0 3px 20px;

    background: #dfe5e8;

}


/* =========================================================
   DIRECT CONTACT
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-direct {

    margin-top: 30px;

    padding: 14px;

    display: flex;
    align-items: center;

    gap: 14px;

    border: 1px solid var(--icv3-border);
    border-radius: 15px;

    background: #ffffff;

}


.ind-contact-v3 .ind-contact-v3-direct-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--icv3-gold);

    background: var(--icv3-gold-soft);

}


.ind-contact-v3 .ind-contact-v3-direct span {

    display: block;

    color: #9ca6ad;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.2px;

}


.ind-contact-v3 .ind-contact-v3-direct strong {

    display: block;

    margin-top: 3px;

    color: #25323b;

    font-size: 14px;

}


.ind-contact-v3 .ind-contact-v3-direct>a {

    width: 34px;
    height: 34px;

    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #ffffff;

    background: var(--icv3-navy);

    text-decoration: none;

    font-size: 14px;

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-direct>a:hover {

    color: #111827;

    background: var(--icv3-gold-light);

    transform: translateX(3px);

}


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

.ind-contact-v3 .ind-contact-v3-form-card {

    padding: 31px;

    border: 1px solid var(--icv3-border);
    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(12, 30, 42, .08);

}


.ind-contact-v3 .ind-contact-v3-form-heading {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;
    margin-bottom: 22px;

    border-bottom: 1px solid #edf0f2;

}


.ind-contact-v3 .ind-contact-v3-form-heading span {

    color: var(--icv3-gold);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;

}


.ind-contact-v3 .ind-contact-v3-form-heading h3 {

    margin: 6px 0 0;

    color: var(--icv3-navy);

    font-size: 24px;
    line-height: 1.1;

    font-weight: 800;

}


.ind-contact-v3 .ind-contact-v3-form-badge {

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 7px 9px;

    border-radius: 50px;

    color: #168044;

    background: #effaf3;

    font-size: 10px;
    font-weight: 800;

}


/* =========================================================
   FORM ROW
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


/* =========================================================
   FIELD
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-field {

    margin-bottom: 15px;

}


.ind-contact-v3 .ind-contact-v3-field label {

    display: block;

    margin-bottom: 6px;

    color: #4c5962;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

}


.ind-contact-v3 .ind-contact-v3-field label b {

    color: #dc2626;

}


/* =========================================================
   INPUT
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-input {

    position: relative;

}


.ind-contact-v3 .ind-contact-v3-input>i:first-child {

    position: absolute;

    left: 15px;
    top: 50%;

    z-index: 2;

    color: #9ca7af;

    font-size: 14px;

    transform: translateY(-50%);

    pointer-events: none;

    transition: .25s ease;

}


.ind-contact-v3 .ind-contact-v3-input input,
.ind-contact-v3 .ind-contact-v3-input select {

    width: 100%;
    height: 46px;

    box-sizing: border-box;

    padding: 0 37px;

    border: 1px solid #dfe5e8;
    border-radius: 14px;

    outline: none;

    color: #293640;

    background: #fafbfb;

    font-family: inherit;

    font-size: 15px;

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

}


.ind-contact-v3 .ind-contact-v3-input input::placeholder {

    color: #a5afb6;

}


.ind-contact-v3 .ind-contact-v3-input input:focus,
.ind-contact-v3 .ind-contact-v3-input select:focus {

    border-color: rgba(201, 150, 32, .65);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(201, 150, 32, .08);

}


.ind-contact-v3 .ind-contact-v3-input:focus-within>i:first-child {

    color: var(--icv3-gold);

}


/* SELECT */

.ind-contact-v3 .ind-contact-v3-input select {

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

}


.ind-contact-v3 .ind-contact-v3-select-arrow {

    left: auto !important;
    right: 15px;

    pointer-events: none;

}


/* =========================================================
   TEXTAREA
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-textarea {

    position: relative;

}


.ind-contact-v3 .ind-contact-v3-textarea>i {

    position: absolute;

    left: 15px;
    top: 15px;

    color: #9ca7af;

    font-size: 14px;

    pointer-events: none;

}


.ind-contact-v3 .ind-contact-v3-textarea textarea {

    width: 100%;

    min-height: 115px;

    display: block;

    box-sizing: border-box;

    padding: 15px 15px 15px 37px;

    border: 1px solid #dfe5e8;
    border-radius: 14px;

    outline: none;

    resize: vertical;

    color: #293640;

    background: #fafbfb;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.7;

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

}


.ind-contact-v3 .ind-contact-v3-textarea textarea::placeholder {

    color: #a5afb6;

}


.ind-contact-v3 .ind-contact-v3-textarea textarea:focus {

    border-color: rgba(201, 150, 32, .65);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(201, 150, 32, .08);

}


/* =========================================================
   FORM FOOTER
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-form-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 3px;

}


.ind-contact-v3 .ind-contact-v3-form-note {

    display: flex;
    align-items: center;

    gap: 6px;

    color: #929da5;

    font-size: 14px;

}


.ind-contact-v3 .ind-contact-v3-form-note i {

    color: #20a05a;

}


.ind-contact-v3 .ind-contact-v3-submit {

    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    padding: 0 19px;

    border: 0;
    border-radius: 14px;

    color: #151b20;

    background:
        linear-gradient(135deg,
            var(--icv3-gold),
            var(--icv3-gold-light));

    font-family: inherit;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 14px 25px rgba(201, 150, 32, .16);

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-submit:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 32px rgba(201, 150, 32, .25);

}


.ind-contact-v3 .ind-contact-v3-submit i {

    transition: .25s ease;

}


.ind-contact-v3 .ind-contact-v3-submit:hover i {

    transform: translateX(4px);

}


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

.ind-contact-v3 .ind-contact-v3-services {

    padding: 40px 0;

    background: #ffffff;

}


.ind-contact-v3 .ind-contact-v3-services-head {

    display: grid;

    grid-template-columns: 1fr .7fr;

    align-items: end;

    gap: 50px;

    margin-bottom: 40px;

}


.ind-contact-v3 .ind-contact-v3-services-head>p {

    margin: 0;

    color: var(--icv3-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* SERVICES GRID */

.ind-contact-v3 .ind-contact-v3-services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

}


.ind-contact-v3 .ind-contact-v3-service-card {

    position: relative;

    min-height: 245px;

    padding: 22px;

    overflow: hidden;

    border: 1px solid var(--icv3-border);
    border-radius: 18px;

    background: #ffffff;

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

}


.ind-contact-v3 .ind-contact-v3-service-card:hover {

    transform: translateY(-7px);

    border-color: rgba(201, 150, 32, .35);

    box-shadow:
        0 22px 45px rgba(12, 30, 42, .08);

}


.ind-contact-v3 .ind-contact-v3-service-number {

    position: absolute;

    right: 18px;
    top: 17px;

    color: #dfe4e7;

    font-size: 14px;
    font-weight: 900;

}


.ind-contact-v3 .ind-contact-v3-service-icon {

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--icv3-gold);

    background: var(--icv3-gold-soft);

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-service-card:hover .ind-contact-v3-service-icon {

    color: #18242c;

    background:
        linear-gradient(135deg,
            var(--icv3-gold),
            var(--icv3-gold-light));

    transform: rotate(-4deg);

}


.ind-contact-v3 .ind-contact-v3-service-card h3 {

    margin: 22px 0 9px;

    color: var(--icv3-text);

    font-size: 17px;
    line-height: 1.25;

    font-weight: 800;

}


.ind-contact-v3 .ind-contact-v3-service-card p {

    margin: 0;

    color: var(--icv3-muted);

    font-size: 14px;
    line-height: 1.7;

}


.ind-contact-v3 .ind-contact-v3-service-card a {

    position: absolute;

    left: 22px;
    bottom: 20px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--icv3-gold);

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

}


.ind-contact-v3 .ind-contact-v3-service-card a i {

    transition: .25s ease;

}


.ind-contact-v3 .ind-contact-v3-service-card:hover a i {

    transform: translateX(4px);

}


/* =========================================================
   LOCATION
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-location {

    padding: 40px 0;

    background: #f7f9fa;

}


.ind-contact-v3 .ind-contact-v3-location-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;

}


/* LOCATION VISUAL */

.ind-contact-v3 .ind-contact-v3-location-visual {

    position: relative;

    min-height: 430px;

}


.ind-contact-v3 .ind-contact-v3-location-pattern {

    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(135deg,
            #e8edef,
            #f9fafb);

    box-shadow:
        0 22px 55px rgba(12, 30, 42, .08);

}


.ind-contact-v3 .ind-contact-v3-location-pattern::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .45;

    background-image:
        linear-gradient(rgba(89, 105, 115, .11) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(89, 105, 115, .11) 1px,
            transparent 1px);

    background-size: 38px 38px;

}


/* circles */

.ind-contact-v3 .ind-contact-v3-location-circle {

    position: absolute;

    left: 50%;
    top: 48%;

    border: 1px solid rgba(201, 150, 32, .27);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation:
        indContactV3Pulse 4s ease-in-out infinite;

}


.ind-contact-v3 .location-circle-one {

    width: 85px;
    height: 85px;

}


.ind-contact-v3 .location-circle-two {

    width: 165px;
    height: 165px;

    animation-delay: .4s;

}


.ind-contact-v3 .location-circle-three {

    width: 255px;
    height: 255px;

    animation-delay: .8s;

}


@keyframes indContactV3Pulse {

    0%,
    100% {
        opacity: .25;
        transform:
            translate(-50%, -50%) scale(.96);
    }

    50% {
        opacity: .75;
        transform:
            translate(-50%, -50%) scale(1.03);
    }

}


/* PIN */

.ind-contact-v3 .ind-contact-v3-location-pin {

    position: absolute;

    left: 50%;
    top: 48%;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #16212a;

    background:
        linear-gradient(135deg,
            var(--icv3-gold),
            var(--icv3-gold-light));

    font-size: 21px;

    transform: translate(-50%, -50%);

    box-shadow:
        0 15px 35px rgba(201, 150, 32, .25);

}


/* CITY */

.ind-contact-v3 .ind-contact-v3-location-city {

    position: absolute;

    left: 50%;
    top: calc(48% + 55px);

    color: #273640;

    font-size: 15px;
    font-weight: 900;

    letter-spacing: 2px;

    transform: translateX(-50%);

}


/* LOCATION CONTENT */

.ind-contact-v3 .ind-contact-v3-location-content>p {

    margin: 17px 0 0;

    color: var(--icv3-muted);

    font-size: 14px;

    line-height: 1.85;

}


/* ADDRESS */

.ind-contact-v3 .ind-contact-v3-address,
.ind-contact-v3 .ind-contact-v3-working {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px;

    border: 1px solid var(--icv3-border);
    border-radius: 14px;

    background: #ffffff;

}


.ind-contact-v3 .ind-contact-v3-address {

    margin-top: 25px;

}


.ind-contact-v3 .ind-contact-v3-working {

    margin-top: 14px;

}


.ind-contact-v3 .ind-contact-v3-address-icon,
.ind-contact-v3 .ind-contact-v3-working-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--icv3-gold);

    background: var(--icv3-gold-soft);

}


.ind-contact-v3 .ind-contact-v3-address strong,
.ind-contact-v3 .ind-contact-v3-working strong {

    display: block;

    color: #26333d;

    font-size: 14px;
    font-weight: 800;

}


.ind-contact-v3 .ind-contact-v3-address span,
.ind-contact-v3 .ind-contact-v3-working span {

    display: block;

    margin-top: 3px;

    color: #7e8b95;

    font-size: 14px;
    line-height: 1.5;

}


.ind-contact-v3 .ind-contact-v3-directions {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 17px;

    padding: 14px 16px;

    border-radius: 14px;

    color: #ffffff;

    background: var(--icv3-navy);

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-directions:hover {

    color: #15212a;

    background: var(--icv3-gold-light);

    transform: translateY(-3px);

}


/* =========================================================
   FAQ
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-faq {

    padding: 40px 0;

    background: #ffffff;

}


.ind-contact-v3 .ind-contact-v3-faq-grid {

    display: grid;

    grid-template-columns: .72fr 1.28fr;

    gap: 65px;

    align-items: start;

}


.ind-contact-v3 .ind-contact-v3-faq-heading>p {

    margin: 17px 0 0;

    color: var(--icv3-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* FAQ LIST */

.ind-contact-v3 .ind-contact-v3-faq-list {

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

}


.ind-contact-v3 .ind-contact-v3-faq-item {

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

}


.ind-contact-v3 .ind-contact-v3-faq-question {

    width: 100%;
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0;

    border: 0;
    outline: 0;

    color: #25323b;

    background: transparent;

    text-align: left;

    font-family: inherit;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

}


.ind-contact-v3 .ind-contact-v3-faq-question i {

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #788691;

    background: #f2f5f6;

    font-size: 14px;

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-faq-item.active .ind-contact-v3-faq-question i {

    color: #18232c;

    background: var(--icv3-gold-light);

    transform: rotate(45deg);

}


.ind-contact-v3 .ind-contact-v3-faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .4s ease,
        padding .4s ease;

}


.ind-contact-v3 .ind-contact-v3-faq-item.active .ind-contact-v3-faq-answer {

    max-height: 180px;

}


.ind-contact-v3 .ind-contact-v3-faq-answer p {

    margin: 0;

    padding: 0 45px 20px 0;

    color: #75838e;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   FINAL CTA
   ========================================================= */

.ind-contact-v3 .ind-contact-v3-final {

    padding: 0 0 40px;

    background: #ffffff;

}


.ind-contact-v3 .ind-contact-v3-final-card {

    position: relative;

    min-height: 285px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding: 20px 55px;

    border-radius: 24px;

    background:
        linear-gradient(120deg,
            #081720,
            #17313d);

    box-shadow:
        0 25px 60px rgba(12, 30, 42, .16);

}


.ind-contact-v3 .ind-contact-v3-final-card::before {

    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    right: -150px;
    top: -170px;

    border: 1px solid rgba(232, 189, 84, .15);

    border-radius: 50%;

    box-shadow:
        0 0 0 50px rgba(232, 189, 84, .025),
        0 0 0 100px rgba(232, 189, 84, .015);

}


.ind-contact-v3 .ind-contact-v3-final-content {

    position: relative;

    z-index: 2;

    max-width: 650px;

}


.ind-contact-v3 .ind-contact-v3-final-content h2 {

    margin: 15px 0 14px;

    color: #ffffff;

    font-size: 40px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;

}


.ind-contact-v3 .ind-contact-v3-final-content h2 span {

    color: var(--icv3-gold-light);

}


.ind-contact-v3 .ind-contact-v3-final-content>p {

    max-width: 520px;

    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: 15px;

    line-height: 1.8;

}


.ind-contact-v3 .ind-contact-v3-final-buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 24px;

}


.ind-contact-v3 .ind-contact-v3-final-primary,
.ind-contact-v3 .ind-contact-v3-final-secondary {

    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 17px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: .3s ease;

}


.ind-contact-v3 .ind-contact-v3-final-primary {

    color: #15212a;

    background:
        linear-gradient(135deg,
            var(--icv3-gold),
            var(--icv3-gold-light));

}


.ind-contact-v3 .ind-contact-v3-final-secondary {

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .15);

    background: rgba(255, 255, 255, .045);

}


.ind-contact-v3 .ind-contact-v3-final-primary:hover,
.ind-contact-v3 .ind-contact-v3-final-secondary:hover {

    transform: translateY(-3px);

}


.ind-contact-v3 .ind-contact-v3-final-secondary:hover {

    color: #ffffff;

    border-color: var(--icv3-gold);

}


/* Decorative word */

.ind-contact-v3 .ind-contact-v3-final-mark {

    position: absolute;

    right: 50px;
    bottom: 15px;

    color: rgba(255, 255, 255, .035);

    font-size: 80px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -3px;

}


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

@media (max-width: 1050px) {

    .ind-contact-v3 .ind-contact-v3-main-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .ind-contact-v3 .ind-contact-v3-info {

        max-width: 700px;

    }


    .ind-contact-v3 .ind-contact-v3-location-grid {

        gap: 40px;

    }


    .ind-contact-v3 .ind-contact-v3-faq-grid {

        gap: 40px;

    }


    .ind-contact-v3 .ind-contact-v3-services-grid {

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

    }

}


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

@media (max-width: 800px) {

    .ind-contact-v3 .ind-contact-v3-intro-head,
    .ind-contact-v3 .ind-contact-v3-services-head {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .ind-contact-v3 .ind-contact-v3-contact-grid {

        grid-template-columns: 1fr;

    }


    .ind-contact-v3 .ind-contact-v3-location-grid {

        grid-template-columns: 1fr;

    }


    .ind-contact-v3 .ind-contact-v3-location-content {

        max-width: 700px;

    }


    .ind-contact-v3 .ind-contact-v3-faq-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}


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

@media (max-width: 600px) {

    .ind-contact-v3 {

        font-size: 14px;

    }


    .ind-contact-v3 .ind-contact-v3-container {

        width: calc(100% - 30px);

    }


    /* Breadcrumb */

    .ind-contact-v3 .ind-contact-v3-breadcrumb {

        min-height: 220px;

    }


    .ind-contact-v3 .ind-contact-v3-breadcrumb-content {

        padding: 55px 0 50px;

    }


    .ind-contact-v3 .ind-contact-v3-breadcrumb-title {

        font-size: 32px;

        margin: 14px 0 14px;

    }


    /* Intro */

    .ind-contact-v3 .ind-contact-v3-intro {

        padding: 65px 0;

    }


    .ind-contact-v3 .ind-contact-v3-section-title {

        font-size: 32px;

    }


    .ind-contact-v3 .ind-contact-v3-intro-text {

        font-size: 15px;

    }


    /* Main */

    .ind-contact-v3 .ind-contact-v3-main {

        padding: 65px 0;

    }


    .ind-contact-v3 .ind-contact-v3-info-title {

        font-size: 34px;

    }


    .ind-contact-v3 .ind-contact-v3-info-description {

        font-size: 15px;

    }


    /* Form */

    .ind-contact-v3 .ind-contact-v3-form-card {

        padding: 23px 17px;

        border-radius: 19px;

    }


    .ind-contact-v3 .ind-contact-v3-form-heading {

        flex-direction: column;

        gap: 14px;

    }


    .ind-contact-v3 .ind-contact-v3-form-heading h3 {

        font-size: 22px;

    }


    .ind-contact-v3 .ind-contact-v3-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .ind-contact-v3 .ind-contact-v3-form-footer {

        flex-direction: column;

        align-items: stretch;

    }


    .ind-contact-v3 .ind-contact-v3-form-note {

        justify-content: center;

    }


    .ind-contact-v3 .ind-contact-v3-submit {

        width: 100%;

    }


    /* Services */

    .ind-contact-v3 .ind-contact-v3-services {

        padding: 65px 0;

    }


    .ind-contact-v3 .ind-contact-v3-services-grid {

        grid-template-columns: 1fr;

    }


    .ind-contact-v3 .ind-contact-v3-service-card {

        min-height: 225px;

    }


    /* Location */

    .ind-contact-v3 .ind-contact-v3-location {

        padding: 65px 0;

    }


    .ind-contact-v3 .ind-contact-v3-location-visual {

        min-height: 350px;

    }


    .ind-contact-v3 .ind-contact-v3-location-pattern {

        border-radius: 20px;

    }


    .ind-contact-v3 .location-circle-one {

        width: 70px;
        height: 70px;

    }


    .ind-contact-v3 .location-circle-two {

        width: 135px;
        height: 135px;

    }


    .ind-contact-v3 .location-circle-three {

        width: 214px;
        height: 214px;

    }


    /* FAQ */

    .ind-contact-v3 .ind-contact-v3-faq {

        padding: 65px 0;

    }


    .ind-contact-v3 .ind-contact-v3-faq-heading .ind-contact-v3-section-title {

        font-size: 32px;

    }


    .ind-contact-v3 .ind-contact-v3-faq-question {

        min-height: 64px;

        font-size: 14px;

    }


    .ind-contact-v3 .ind-contact-v3-faq-answer p {

        font-size: 14px;

    }


    /* Final */

    .ind-contact-v3 .ind-contact-v3-final {

        padding-bottom: 65px;

    }


    .ind-contact-v3 .ind-contact-v3-final-card {

        min-height: auto;

        padding: 35px 22px;

        border-radius: 20px;

    }


    .ind-contact-v3 .ind-contact-v3-final-content h2 {

        font-size: 33px;

    }


    .ind-contact-v3 .ind-contact-v3-final-buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .ind-contact-v3 .ind-contact-v3-final-primary,
    .ind-contact-v3 .ind-contact-v3-final-secondary {

        width: 100%;

    }


    .ind-contact-v3 .ind-contact-v3-final-mark {

        right: -14px;

        bottom: -5px;

        font-size: 55px;

    }

}


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

@media (max-width: 380px) {

    .ind-contact-v3 .ind-contact-v3-breadcrumb-title {

        font-size: 29px;

    }


    .ind-contact-v3 .ind-contact-v3-section-title {

        font-size: 29px;

    }


    .ind-contact-v3 .ind-contact-v3-info-title {

        font-size: 31px;

    }


    .ind-contact-v3 .ind-contact-v3-form-card {

        padding: 20px 14px;

    }


    .ind-contact-v3 .ind-contact-v3-location-visual {

        min-height: 320px;

    }


    .ind-contact-v3 .ind-contact-v3-final-content h2 {

        font-size: 30px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind-contact-v3 *,
    .ind-contact-v3 *::before,
    .ind-contact-v3 *::after {

        animation: none !important;

        transition: none !important;

    }

}























/** HSE PAGE  **/

/* =========================================================
   INDUSTRA HSE V4
   PART 2 — PREMIUM CSS
   BASE FONT: 14px
   STRICTLY SCOPED
   ========================================================= */

.ind-hse-v4-page {

    --hse4-navy: #0b1d27;
    --hse4-navy-2: #15313d;

    --hse4-gold: #e96f32;
    --hse4-gold-light: #e96f32;
    --hse4-gold-soft: #fff8e8;

    --hse4-text: #1c2b34;
    --hse4-muted: #71808a;

    --hse4-white: #ffffff;
    --hse4-bg: #f5f7f8;
    --hse4-border: #e4e9ec;

    width: 100%;

    color: var(--hse4-text);

    font-family: "Inter", sans-serif;
    font-size: 14px;

    overflow: hidden;
}


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

.ind-hse-v4-page .ind-hse-v4-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-breadcrumb {

    position: relative;

    min-height: 245px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb::before {

    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    right: -145px;
    top: -180px;

    border: 1px solid rgba(232, 189, 85, .18);

    border-radius: 50%;

    box-shadow:
        0 0 0 50px rgba(232, 189, 85, .025),
        0 0 0 100px rgba(232, 189, 85, .015);

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 155px;
    height: 3px;

    background:
        linear-gradient(90deg,
            var(--hse4-gold),
            transparent);

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-glow {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(201, 150, 32, .12),
            transparent 27%);

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content {

    position: relative;

    z-index: 2;

    padding: 216px 0;
    height: 550px;

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--hse4-gold-light);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 2px;

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-label::before {

    content: "";

    width: 27px;
    height: 1px;

    background: var(--hse4-gold);

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content h1 {

    margin: 14px 0 15px;

    color: #ffffff;

    font-size: 39px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -.8px;

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content nav {

    display: flex;

    align-items: center;

    gap: 14px;

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content nav a {

    color: rgba(255, 255, 255, .55);

    font-size: 14px;

    text-decoration: none;

    transition: .25s ease;

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content nav a:hover {

    color: var(--hse4-gold-light);

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content nav i {

    color: rgba(255, 255, 255, .3);

    font-size: 10px;

}


.ind-hse-v4-page .ind-hse-v4-breadcrumb-content nav span {

    color: var(--hse4-gold-light);

    font-size: 14px;

    font-weight: 700;

}


/* =========================================================
   SECTION 1 — OVERVIEW
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-overview {

    padding: 75px 0;

    background: #ffffff;

}


.ind-hse-v4-page .ind-hse-v4-overview-card {

    position: relative;

    min-height: 405px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding: 50px 55px;

    border-radius: 25px;

    background:
        linear-gradient(120deg,
            #091a23,
            #16313c);

    box-shadow:
        0 25px 65px rgba(8, 29, 39, .14);

}


/* Background pattern */

.ind-hse-v4-page .ind-hse-v4-overview-pattern {

    position: absolute;

    inset: 0;

    opacity: .45;

    background-image:
        linear-gradient(90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px),
        linear-gradient(rgba(255, 255, 255, .025) 1px,
            transparent 1px);

    background-size: 42px 42px;

}


.ind-hse-v4-page .ind-hse-v4-overview-pattern::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -160px;
    top: -160px;

    border: 1px solid rgba(232, 189, 85, .14);

    border-radius: 50%;

}


/* Content */

.ind-hse-v4-page .ind-hse-v4-overview-content {

    position: relative;

    z-index: 2;

    width: 67%;

}


.ind-hse-v4-page .ind-hse-v4-overview-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid rgba(232, 189, 85, .22);

    border-radius: 50px;

    color: var(--hse4-gold-light);

    background: rgba(201, 150, 32, .07);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ind-hse-v4-page .ind-hse-v4-overview-content h2 {

    max-width: 680px;

    margin: 17px 0 14px;

    color: #ffffff;

    font-size: 38px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1px;

}


.ind-hse-v4-page .ind-hse-v4-overview-content>p {

    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, .61);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   METRICS
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-metrics {

    display: flex;

    align-items: center;

    gap: 27px;

    margin-top: 35px;

}


.ind-hse-v4-page .ind-hse-v4-metric {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.ind-hse-v4-page .ind-hse-v4-metric strong {

    color: var(--hse4-gold-light);

    font-size: 23px;

    line-height: 1;

    font-weight: 900;

}


.ind-hse-v4-page .ind-hse-v4-metric span {

    color: rgba(255, 255, 255, .48);

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;

}


.ind-hse-v4-page .ind-hse-v4-metric-divider {

    width: 1px;
    height: 34px;

    background: rgba(255, 255, 255, .12);

}


/* =========================================================
   OVERVIEW VISUAL
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-overview-visual {

    position: absolute;

    right: 55px;
    top: 50%;

    width: 270px;
    height: 270px;

    transform: translateY(-50%);

}


.ind-hse-v4-page .ind-hse-v4-visual-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(232, 189, 85, .18);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation:
        hseV4RingPulse 4s ease-in-out infinite;

}


.ind-hse-v4-page .ring-one {

    width: 90px;
    height: 90px;

}


.ind-hse-v4-page .ring-two {

    width: 165px;
    height: 165px;

    animation-delay: .5s;

}


.ind-hse-v4-page .ring-three {

    width: 250px;
    height: 250px;

    animation-delay: 1s;

}


@keyframes hseV4RingPulse {

    0%,
    100% {

        opacity: .25;

        transform:
            translate(-50%, -50%) scale(.96);

    }

    50% {

        opacity: .75;

        transform:
            translate(-50%, -50%) scale(1.03);

    }

}


.ind-hse-v4-page .ind-hse-v4-visual-shield {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    color: #18232b;

    background:
        linear-gradient(135deg,
            var(--hse4-gold),
            var(--hse4-gold-light));

    font-size: 27px;

    transform: translate(-50%, -50%);

    box-shadow:
        0 18px 40px rgba(201, 150, 32, .25);

}


.ind-hse-v4-page .ind-hse-v4-visual-text {

    position: absolute;

    left: 50%;
    top: calc(50% + 62px);

    color: rgba(255, 255, 255, .45);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

    transform: translateX(-50%);

}


/* =========================================================
   COMMON SECTION HEADER
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-section-head {

    margin-bottom: 38px;

}


.ind-hse-v4-page .ind-hse-v4-section-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--hse4-gold);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.ind-hse-v4-page .ind-hse-v4-section-label i {

    font-size: 14px;

}


.ind-hse-v4-page .ind-hse-v4-section-head h2 {

    margin: 14px 0 0;

    color: var(--hse4-navy);

    font-size: 36px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -.8px;

}


/* =========================================================
   SECTION 2 — PILLARS
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-pillars {

    padding: 20px 0;

    background: var(--hse4-bg);

}


.ind-hse-v4-page .ind-hse-v4-pillar-grid {

    display: grid;

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

    gap: 17px;

}


.ind-hse-v4-page .ind-hse-v4-pillar-card {

    position: relative;

    min-height: 270px;

    padding: 25px;

    overflow: hidden;

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

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(10, 30, 40, .035);

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

}


.ind-hse-v4-page .ind-hse-v4-pillar-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 3px;

    background:
        linear-gradient(90deg,
            var(--hse4-gold),
            var(--hse4-gold-light));

    transition: width .35s ease;

}


.ind-hse-v4-page .ind-hse-v4-pillar-card:hover {

    transform: translateY(-8px);

    border-color: rgba(201, 150, 32, .28);

    box-shadow:
        0 22px 48px rgba(10, 30, 40, .09);

}


.ind-hse-v4-page .ind-hse-v4-pillar-card:hover::before {

    width: 100%;

}


/* Top */

.ind-hse-v4-page .ind-hse-v4-pillar-top {

    display: flex;

    align-items: center;

    gap: 14px;

}


.ind-hse-v4-page .ind-hse-v4-pillar-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: var(--hse4-gold);

    background: var(--hse4-gold-soft);

    transition: .35s ease;

}


.ind-hse-v4-page .ind-hse-v4-pillar-card:hover .ind-hse-v4-pillar-icon {

    color: #17242c;

    background:
        linear-gradient(135deg,
            var(--hse4-gold),
            var(--hse4-gold-light));

    transform: rotate(-4deg) scale(1.04);

}


.ind-hse-v4-page .ind-hse-v4-pillar-top>span {

    color: #9a780f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


.ind-hse-v4-page .ind-hse-v4-pillar-top>b {

    margin-left: auto;

    color: #dce2e5;

    font-size: 14px;

}


/* Content */

.ind-hse-v4-page .ind-hse-v4-pillar-content h3 {

    margin: 25px 0 9px;

    color: var(--hse4-navy);

    font-size: 19px;

    line-height: 1.25;

    font-weight: 800;

}


.ind-hse-v4-page .ind-hse-v4-pillar-content p {

    margin: 0;

    color: var(--hse4-muted);

    font-size: 15px;

    line-height: 1.8;

}


.ind-hse-v4-page .ind-hse-v4-pillar-line {

    position: absolute;

    left: 25px;
    bottom: 21px;

    width: 38px;
    height: 2px;

    background: #e6e9eb;

    transition: .35s ease;

}


.ind-hse-v4-page .ind-hse-v4-pillar-card:hover .ind-hse-v4-pillar-line {

    width: 70px;

    background: var(--hse4-gold);

}


/* =========================================================
   SECTION 3 — FLOW
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-flow {

    padding: 40px 0;

    background: #ffffff;

}


.ind-hse-v4-page .ind-hse-v4-timeline {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr auto 1fr;

    align-items: center;

    gap: 14px;

    padding: 30px;

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

    border-radius: 22px;

    background: #fbfcfc;

}


/* Step */

.ind-hse-v4-page .ind-hse-v4-step {

    position: relative;

    min-height: 185px;

    padding: 20px;

    border: 1px solid #e8ecee;

    border-radius: 16px;

    background: #ffffff;

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

}


.ind-hse-v4-page .ind-hse-v4-step:hover {

    transform: translateY(-6px);

    border-color: rgba(201, 150, 32, .3);

    box-shadow:
        0 18px 38px rgba(10, 30, 40, .07);

}


/* Number */

.ind-hse-v4-page .ind-hse-v4-step-number {

    position: absolute;

    right: 15px;
    top: 15px;

    color: #e0e5e8;

    font-size: 14px;

    font-weight: 900;

}


/* Icon */

.ind-hse-v4-page .ind-hse-v4-step-icon {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--hse4-gold);

    background: var(--hse4-gold-soft);

    font-size: 14px;

    transition: .3s ease;

}


.ind-hse-v4-page .ind-hse-v4-step:hover .ind-hse-v4-step-icon {

    color: #17242c;

    background:
        linear-gradient(135deg,
            var(--hse4-gold),
            var(--hse4-gold-light));

}


/* Content */

.ind-hse-v4-page .ind-hse-v4-step-content span {

    display: block;

    margin-top: 18px;

    color: var(--hse4-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}


.ind-hse-v4-page .ind-hse-v4-step-content h4 {

    margin: 7px 0 7px;

    color: var(--hse4-navy);

    font-size: 16px;

    line-height: 1.25;

    font-weight: 800;

}


.ind-hse-v4-page .ind-hse-v4-step-content p {

    margin: 0;

    color: var(--hse4-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* Connector */

.ind-hse-v4-page .ind-hse-v4-step-connector {

    width: 32px;

    display: flex;

    justify-content: center;

    color: #c7cfd4;

    font-size: 14px;

}


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

@media (max-width: 1000px) {

    .ind-hse-v4-page .ind-hse-v4-overview-content {

        width: 75%;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-visual {

        right: 20px;

        opacity: .45;

    }


    .ind-hse-v4-page .ind-hse-v4-pillar-grid {

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

    }


    .ind-hse-v4-page .ind-hse-v4-timeline {

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

    }


    .ind-hse-v4-page .ind-hse-v4-step-connector {

        display: none;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 760px) {

    .ind-hse-v4-page .ind-hse-v4-overview-card {

        padding: 40px 35px;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-content {

        width: 100%;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-visual {

        display: none;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-content h2 {

        font-size: 34px;

    }


    .ind-hse-v4-page .ind-hse-v4-section-head h2 {

        font-size: 33px;

    }


    .ind-hse-v4-page .ind-hse-v4-pillar-grid {

        grid-template-columns: 1fr;

    }

}


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

@media (max-width: 600px) {

    .ind-hse-v4-page {

        font-size: 14px;

    }


    .ind-hse-v4-page .ind-hse-v4-container {

        width: calc(100% - 30px);

    }


    /* Breadcrumb */

    .ind-hse-v4-page .ind-hse-v4-breadcrumb {

        min-height: 215px;

    }


    .ind-hse-v4-page .ind-hse-v4-breadcrumb-content {

        padding: 200px 0;

    }


    .ind-hse-v4-page .ind-hse-v4-breadcrumb-content h1 {

        font-size: 31px;

    }


    /* Overview */

    .ind-hse-v4-page .ind-hse-v4-overview {

        padding: 60px 0;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-card {

        min-height: auto;

        padding: 32px 22px;

        border-radius: 20px;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-content h2 {

        font-size: 29px;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-content>p {

        font-size: 15px;

        line-height: 1.75;

    }


    /* Metrics */

    .ind-hse-v4-page .ind-hse-v4-metrics {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

    }


    .ind-hse-v4-page .ind-hse-v4-metric-divider {

        display: none;

    }


    .ind-hse-v4-page .ind-hse-v4-metric strong {

        font-size: 20px;

    }


    /* Section */

    .ind-hse-v4-page .ind-hse-v4-section-head {

        margin-bottom: 28px;

    }


    .ind-hse-v4-page .ind-hse-v4-section-head h2 {

        font-size: 29px;

    }


    /* Pillars */

    .ind-hse-v4-page .ind-hse-v4-pillars {

        padding: 65px 0;

    }


    .ind-hse-v4-page .ind-hse-v4-pillar-card {

        min-height: 245px;

        padding: 21px;

    }


    .ind-hse-v4-page .ind-hse-v4-pillar-content h3 {

        font-size: 18px;

    }


    /* Flow */

    .ind-hse-v4-page .ind-hse-v4-flow {

        padding: 65px 0;

    }


    .ind-hse-v4-page .ind-hse-v4-timeline {

        grid-template-columns: 1fr;

        gap: 14px;

        padding: 15px;

        border-radius: 18px;

    }


    .ind-hse-v4-page .ind-hse-v4-step {

        min-height: auto;

        padding: 20px;

    }


    .ind-hse-v4-page .ind-hse-v4-step-content h4 {

        font-size: 15px;

    }


    .ind-hse-v4-page .ind-hse-v4-step-content p {

        font-size: 14px;

    }

}


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

@media (max-width: 380px) {

    .ind-hse-v4-page .ind-hse-v4-breadcrumb-content h1 {

        font-size: 28px;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-card {

        padding: 27px 18px;

    }


    .ind-hse-v4-page .ind-hse-v4-overview-content h2 {

        font-size: 27px;

    }


    .ind-hse-v4-page .ind-hse-v4-metrics {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .ind-hse-v4-page .ind-hse-v4-section-head h2 {

        font-size: 27px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind-hse-v4-page *,
    .ind-hse-v4-page *::before,
    .ind-hse-v4-page *::after {

        animation: none !important;

        transition: none !important;

    }

}














/* =========================================================
   HSE OVERVIEW - CLEAN NORMAL UPGRADE
   Existing HTML ke liye
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-overview {
    padding: 40px 0;
    background: #f7f8f9;
}

.ind-hse-v4-page .ind-hse-v4-overview-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 330px;

    padding: 45px 50px;

    overflow: hidden;

    border: 1px solid #e5e8ea;
    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 14px 35px rgba(15, 30, 38, 0.06);

    transition: box-shadow 0.3s ease,
        transform 0.3s ease;
}

.ind-hse-v4-page .ind-hse-v4-overview-card:hover {
    box-shadow: 0 16px 42px rgba(15, 30, 38, 0.09);
}


/* =========================================================
   BACKGROUND PATTERN
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-overview-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.35;

    background-image:
        linear-gradient(90deg,
            rgba(15, 35, 45, 0.035) 1px,
            transparent 1px),
        linear-gradient(rgba(15, 35, 45, 0.035) 1px,
            transparent 1px);

    background-size: 35px 35px;

    pointer-events: none;
}


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

.ind-hse-v4-page .ind-hse-v4-overview-content {
    position: relative;
    z-index: 2;

    width: 68%;
}


.ind-hse-v4-page .ind-hse-v4-overview-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 14px;

    border: 1px solid rgba(201, 150, 32, 0.25);
    border-radius: 30px;

    color: #a8790d;
    background: #fff9eb;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1.3px;

    transition: 0.3s ease;
}


.ind-hse-v4-page .ind-hse-v4-overview-badge i {
    font-size: 14px;
}


.ind-hse-v4-page .ind-hse-v4-overview-badge:hover {
    background: #fff4d7;
    border-color: rgba(201, 150, 32, 0.4);
}


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

.ind-hse-v4-page .ind-hse-v4-overview-content h2 {
    margin: 17px 0 15px;

    color: #122630;

    font-size: 36px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.6px;
}


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

.ind-hse-v4-page .ind-hse-v4-overview-content>p {
    max-width: 650px;

    margin: 0;

    color: #71808a;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   METRICS
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-metrics {
    display: flex;
    align-items: center;

    gap: 25px;

    margin-top: 30px;
}


.ind-hse-v4-page .ind-hse-v4-metric {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 105px;
}


.ind-hse-v4-page .ind-hse-v4-metric strong {
    color: #e96f32;

    font-size: 22px;
    line-height: 1;

    font-weight: 800;
}


.ind-hse-v4-page .ind-hse-v4-metric span {
    color: #7c8991;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 600;
}


.ind-hse-v4-page .ind-hse-v4-metric-divider {
    width: 1px;
    height: 35px;

    background: #e1e5e7;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-overview-visual {
    position: absolute;

    right: 55px;
    top: 50%;

    width: 214px;
    height: 214px;

    transform: translateY(-50%);
}


/* Rings */

.ind-hse-v4-page .ind-hse-v4-visual-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(201, 150, 32, 0.18);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation: hseCleanPulse 4s ease-in-out infinite;
}


.ind-hse-v4-page .ind-hse-v4-visual-ring.ring-one {
    width: 70px;
    height: 70px;
}


.ind-hse-v4-page .ind-hse-v4-visual-ring.ring-two {
    width: 125px;
    height: 125px;

    animation-delay: .4s;
}


.ind-hse-v4-page .ind-hse-v4-visual-ring.ring-three {
    width: 190px;
    height: 190px;

    animation-delay: .8s;
}


@keyframes hseCleanPulse {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .8;
    }
}


/* =========================================================
   SHIELD
   ========================================================= */

.ind-hse-v4-page .ind-hse-v4-visual-shield {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: #26333a;

    background: linear-gradient(135deg,
            #d7a52e,
            #edc766);

    font-size: 22px;

    transform: translate(-50%, -50%);

    box-shadow: 0 14px 25px rgba(201, 150, 32, 0.18);

    transition: transform .3s ease,
        box-shadow .3s ease;
}


.ind-hse-v4-page .ind-hse-v4-overview-card:hover .ind-hse-v4-visual-shield {
    transform: translate(-50%, -50%) scale(1.06);

    box-shadow: 0 14px 30px rgba(201, 150, 32, 0.25);
}


.ind-hse-v4-page .ind-hse-v4-visual-text {
    position: absolute;

    left: 50%;
    top: calc(50% + 48px);

    color: #849099;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;

    transform: translateX(-50%);
}


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

@media (max-width: 900px) {

    .ind-hse-v4-page .ind-hse-v4-overview-card {
        padding: 40px;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-content {
        width: 72%;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-visual {
        right: 25px;
        opacity: .55;
    }

}


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

@media (max-width: 650px) {

    .ind-hse-v4-page .ind-hse-v4-overview {
        padding: 55px 0;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-card {
        min-height: auto;

        padding: 30px 22px;

        border-radius: 14px;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-content {
        width: 100%;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-content h2 {
        font-size: 29px;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-content>p {
        font-size: 14px;
        line-height: 1.75;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-visual {
        display: none;
    }

    .ind-hse-v4-page .ind-hse-v4-metrics {
        display: grid;

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

        gap: 14px;

        margin-top: 25px;
    }

    .ind-hse-v4-page .ind-hse-v4-metric {
        min-width: 0;
    }

    .ind-hse-v4-page .ind-hse-v4-metric strong {
        font-size: 18px;
    }

    .ind-hse-v4-page .ind-hse-v4-metric span {
        font-size: 10px;
    }

    .ind-hse-v4-page .ind-hse-v4-metric-divider {
        display: none;
    }

}


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

@media (max-width: 420px) {

    .ind-hse-v4-page .ind-hse-v4-overview-card {
        padding: 26px 18px;
    }

    .ind-hse-v4-page .ind-hse-v4-overview-content h2 {
        font-size: 26px;
    }

    .ind-hse-v4-page .ind-hse-v4-metrics {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ind-hse-v4-page .ind-hse-v4-metric {
        padding-bottom: 14px;

        border-bottom: 1px solid #edf0f1;
    }

    .ind-hse-v4-page .ind-hse-v4-metric:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

}


















/**   EQUIPMENT INSTALLATION PAGE**/

/* =========================================================
   INDUSTRA — HEAVY EQUIPMENT INSTALLATION
   PART 2 — PREMIUM CSS UPGRADE
   ---------------------------------------------------------
   CONTENT: UNCHANGED
   BASE FONT: 14px
   CSS: FULLY SCOPED
   ========================================================= */


/* =========================================================
   PAGE ROOT
   ========================================================= */

.ind-eqi-page {

    --eqi-navy: #0c202a;
    --eqi-navy-light: #173541;

    --eqi-gold: #e96f32;
    --eqi-gold-light: #e96f32;
    --eqi-gold-soft: #fff8e8;

    --eqi-text: #1c2b34;
    --eqi-muted: #72808a;

    --eqi-bg: #f6f8f9;
    --eqi-white: #ffffff;

    --eqi-border: #e4e9ec;

    width: 100%;

    color: var(--eqi-text);

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

    font-size: 14px;

    overflow: hidden;
}


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

.ind-eqi-page .ind-eqi-container {

    width: min(1400px, 92%);

    margin: 0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.ind-eqi-page .ind-eqi-hero {

    position: relative;

    min-height: 440px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(115deg,
            rgba(7, 20, 27, .96),
            rgba(12, 32, 42, .91));

}


/* subtle industrial grid */

.ind-eqi-page .ind-eqi-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .16;

    background-image:
        linear-gradient(90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px),
        linear-gradient(rgba(255, 255, 255, .08) 1px,
            transparent 1px);

    background-size: 48px 48px;

}


/* gold accent */

.ind-eqi-page .ind-eqi-hero::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 170px;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--eqi-gold),
            transparent);

}


/* Hero container */

.ind-eqi-page .ind-eqi-hero-container {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: 0 auto;

    padding: 75px 0;

}


/* Hero tag */

.ind-eqi-page .ind-eqi-hero-sub-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid rgba(229, 189, 89, .25);

    border-radius: 30px;

    color: var(--eqi-gold-light);

    background: rgba(201, 150, 32, .06);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.7px;

    transition: .3s ease;

}


.ind-eqi-page .ind-eqi-hero-sub-tag i {

    font-size: 14px;

}


.ind-eqi-page .ind-eqi-hero-sub-tag:hover {

    border-color: rgba(229, 189, 89, .5);

    background: rgba(201, 150, 32, .12);

}


/* Hero title */

.ind-eqi-page .ind-eqi-hero-title {

    max-width: 800px;

    margin: 17px 0 15px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.2px;

}


.ind-eqi-page .ind-eqi-hero-title span {

    color: var(--eqi-gold-light);

}


/* Hero description */

.ind-eqi-page .ind-eqi-hero-desc {

    max-width: 680px;

    margin: 0;

    color: rgba(255, 255, 255, .63);

    font-size: 14px;

    line-height: 1.85;

}


/* Hero buttons */

.ind-eqi-page .ind-eqi-hero-cta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 27px;

}


.ind-eqi-page .ind-eqi-btn-primary,
.ind-eqi-page .ind-eqi-btn-outline {

    min-height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 18px;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

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

}


.ind-eqi-page .ind-eqi-btn-primary {

    color: #18232a;

    background:
        linear-gradient(135deg,
            var(--eqi-gold),
            var(--eqi-gold-light));

    box-shadow:
        0 14px 25px rgba(201, 150, 32, .16);

}


.ind-eqi-page .ind-eqi-btn-primary:hover {

    color: #18232a;

    transform: translateY(-3px);

    box-shadow:
        0 16px 30px rgba(201, 150, 32, .25);

}


.ind-eqi-page .ind-eqi-btn-outline {

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, .18);

    background: rgba(255, 255, 255, .04);

}


.ind-eqi-page .ind-eqi-btn-outline:hover {

    color: #ffffff;

    border-color: var(--eqi-gold);

    background: rgba(201, 150, 32, .08);

    transform: translateY(-3px);

}


/* =========================================================
   OVERVIEW
   ========================================================= */

.ind-eqi-page .ind-eqi-overview {

    padding: 85px 0;

    background: #ffffff;

}


.ind-eqi-page .ind-eqi-overview-grid {

    display: grid;

    grid-template-columns: 1fr .92fr;

    gap: 60px;

    align-items: center;

}


/* Content */

.ind-eqi-page .ind-eqi-overview-content {

    max-width: 590px;

}


.ind-eqi-page .ind-eqi-section-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--eqi-gold);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.ind-eqi-page .ind-eqi-section-tag::before {

    content: "";

    width: 24px;

    height: 1px;

    background: var(--eqi-gold);

}


.ind-eqi-page .ind-eqi-overview-content h2 {

    margin: 15px 0 16px;

    color: var(--eqi-navy);

    font-size: 38px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -.8px;

}


.ind-eqi-page .ind-eqi-overview-content>p {

    margin: 0;

    color: var(--eqi-muted);

    font-size: 14px;

    line-height: 1.85;

}


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

.ind-eqi-page .ind-eqi-check-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin: 26px 0 0;

    padding: 0;

    list-style: none;

}


.ind-eqi-page .ind-eqi-check-list li {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    color: #43515a;

    font-size: 14px;

    line-height: 1.65;

    transition: transform .25s ease;

}


.ind-eqi-page .ind-eqi-check-list li:hover {

    transform: translateX(5px);

}


.ind-eqi-page .ind-eqi-check-list i {

    flex-shrink: 0;

    margin-top: 3px;

    color: var(--eqi-gold);

    font-size: 14px;

}


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

.ind-eqi-page .ind-eqi-image-card {

    position: relative;

    overflow: hidden;

    min-height: 414px;

    border-radius: 18px;

    background: #e9edef;

    box-shadow:
        0 18px 45px rgba(12, 30, 42, .10);

}


.ind-eqi-page .ind-eqi-main-image {

    width: 100%;

    height: 414px;

    display: block;

    object-fit: cover;

    transition:
        transform .7s ease,
        filter .4s ease;

}


.ind-eqi-page .ind-eqi-image-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 55%,
            rgba(8, 23, 31, .34));

    pointer-events: none;

}


.ind-eqi-page .ind-eqi-image-card:hover .ind-eqi-main-image {

    transform: scale(1.045);

    filter: saturate(1.05);

}


/* Floating safety tag */

.ind-eqi-page .ind-eqi-image-tag {

    position: absolute;

    z-index: 3;

    left: 18px;

    bottom: 18px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 15px;

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 9px;

    color: #ffffff;

    background: rgba(10, 27, 36, .88);

    backdrop-filter: blur(8px);

    font-size: 14px;

    font-weight: 800;

    box-shadow:
        0 14px 25px rgba(0, 0, 0, .16);

}


.ind-eqi-page .ind-eqi-image-tag i {

    color: var(--eqi-gold-light);

}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.ind-eqi-page .ind-eqi-capabilities {

    padding: 90px 0;

    background: var(--eqi-bg);

}


.ind-eqi-page .ind-eqi-section-header {

    max-width: 700px;

    margin-bottom: 38px;

}


.ind-eqi-page .ind-eqi-section-header h2 {

    margin: 14px 0 14px;

    color: var(--eqi-navy);

    font-size: 36px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -.7px;

}


.ind-eqi-page .ind-eqi-section-header>p {

    margin: 0;

    color: var(--eqi-muted);

    font-size: 14px;

    line-height: 1.7;

}


/* Cards */

.ind-eqi-page .ind-eqi-capabilities-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

}


.ind-eqi-page .ind-eqi-cap-card {

    position: relative;

    min-height: 285px;

    padding: 24px;

    overflow: hidden;

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

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(12, 30, 42, .035);

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

}


.ind-eqi-page .ind-eqi-cap-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--eqi-gold),
            var(--eqi-gold-light));

    transition: width .35s ease;

}


.ind-eqi-page .ind-eqi-cap-card:hover {

    transform: translateY(-8px);

    border-color: rgba(201, 150, 32, .32);

    box-shadow:
        0 20px 42px rgba(12, 30, 42, .09);

}


.ind-eqi-page .ind-eqi-cap-card:hover::before {

    width: 100%;

}


/* Icon */

.ind-eqi-page .ind-eqi-cap-icon {

    width: 49px;

    height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: var(--eqi-gold);

    background: var(--eqi-gold-soft);

    font-size: 17px;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease;

}


.ind-eqi-page .ind-eqi-cap-card:hover .ind-eqi-cap-icon {

    color: #17242c;

    background:
        linear-gradient(135deg,
            var(--eqi-gold),
            var(--eqi-gold-light));

    transform: rotate(-4deg) scale(1.05);

}


/* Card title */

.ind-eqi-page .ind-eqi-cap-card h3 {

    margin: 21px 0 9px;

    color: var(--eqi-navy);

    font-size: 17px;

    line-height: 1.3;

    font-weight: 800;

}


/* Card text */

.ind-eqi-page .ind-eqi-cap-card p {

    margin: 0;

    color: var(--eqi-muted);

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   PROCESS
   ========================================================= */

.ind-eqi-page .ind-eqi-process {

    padding: 90px 0;

    background: #ffffff;

}


.ind-eqi-page .ind-eqi-process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

}


.ind-eqi-page .ind-eqi-step-card {

    position: relative;

    min-height: 220px;

    padding: 25px;

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

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 7px 25px rgba(12, 30, 42, .035);

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

}


.ind-eqi-page .ind-eqi-step-card:hover {

    transform: translateY(-7px);

    border-color: rgba(201, 150, 32, .32);

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

}


/* Number */

.ind-eqi-page .ind-eqi-step-num {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: var(--eqi-gold);

    background: var(--eqi-gold-soft);

    font-size: 14px;

    font-weight: 900;

    transition: .3s ease;

}


.ind-eqi-page .ind-eqi-step-card:hover .ind-eqi-step-num {

    color: #18242c;

    background:
        linear-gradient(135deg,
            var(--eqi-gold),
            var(--eqi-gold-light));

    transform: scale(1.06);

}


/* Step heading */

.ind-eqi-page .ind-eqi-step-card h4 {

    margin: 22px 0 9px;

    color: var(--eqi-navy);

    font-size: 16px;

    line-height: 1.3;

    font-weight: 800;

}


/* Step description */

.ind-eqi-page .ind-eqi-step-card p {

    margin: 0;

    color: var(--eqi-muted);

    font-size: 14px;

    line-height: 1.75;

}


/* Bottom accent */

.ind-eqi-page .ind-eqi-step-card::after {

    content: "";

    position: absolute;

    left: 25px;

    bottom: 18px;

    width: 30px;

    height: 2px;

    background: #e5e9eb;

    transition: .3s ease;

}


.ind-eqi-page .ind-eqi-step-card:hover::after {

    width: 58px;

    background: var(--eqi-gold);

}


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

@media (max-width: 1050px) {

    .ind-eqi-page .ind-eqi-capabilities-grid,
    .ind-eqi-page .ind-eqi-process-grid {

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

    }


    .ind-eqi-page .ind-eqi-overview-grid {

        gap: 40px;

    }


    .ind-eqi-page .ind-eqi-overview-content h2 {

        font-size: 34px;

    }

}


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

@media (max-width: 800px) {

    .ind-eqi-page .ind-eqi-overview-grid {

        grid-template-columns: 1fr;

    }


    .ind-eqi-page .ind-eqi-overview-content {

        max-width: 100%;

    }


    .ind-eqi-page .ind-eqi-image-card {

        min-height: 360px;

    }


    .ind-eqi-page .ind-eqi-main-image {

        height: 360px;

    }


    .ind-eqi-page .ind-eqi-hero-title {

        font-size: 42px;

    }

}


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

@media (max-width: 600px) {

    .ind-eqi-page {

        font-size: 14px;

    }


    .ind-eqi-page .ind-eqi-container,
    .ind-eqi-page .ind-eqi-hero-container {

        width: calc(100% - 30px);

    }


    /* Hero */

    .ind-eqi-page .ind-eqi-hero {

        min-height: 390px;

    }


    .ind-eqi-page .ind-eqi-hero-container {

        padding: 60px 0;

    }


    .ind-eqi-page .ind-eqi-hero-title {

        font-size: 32px;

        letter-spacing: -.5px;

    }


    .ind-eqi-page .ind-eqi-hero-desc {

        font-size: 15px;

        line-height: 1.75;

    }


    .ind-eqi-page .ind-eqi-hero-cta {

        align-items: stretch;

        flex-direction: column;

    }


    .ind-eqi-page .ind-eqi-btn-primary,
    .ind-eqi-page .ind-eqi-btn-outline {

        width: 100%;

    }


    /* Overview */

    .ind-eqi-page .ind-eqi-overview {

        padding: 60px 0;

    }


    .ind-eqi-page .ind-eqi-overview-content h2 {

        font-size: 29px;

    }


    .ind-eqi-page .ind-eqi-overview-content>p {

        font-size: 15px;

    }


    .ind-eqi-page .ind-eqi-image-card {

        min-height: 300px;

        border-radius: 14px;

    }


    .ind-eqi-page .ind-eqi-main-image {

        height: 300px;

    }


    /* Capabilities */

    .ind-eqi-page .ind-eqi-capabilities {

        padding: 65px 0;

    }


    .ind-eqi-page .ind-eqi-section-header h2 {

        font-size: 29px;

    }


    .ind-eqi-page .ind-eqi-capabilities-grid {

        grid-template-columns: 1fr;

    }


    .ind-eqi-page .ind-eqi-cap-card {

        min-height: 245px;

    }


    /* Process */

    .ind-eqi-page .ind-eqi-process {

        padding: 65px 0;

    }


    .ind-eqi-page .ind-eqi-process-grid {

        grid-template-columns: 1fr;

    }


    .ind-eqi-page .ind-eqi-step-card {

        min-height: 190px;

    }

}


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

@media (max-width: 380px) {

    .ind-eqi-page .ind-eqi-hero-title {

        font-size: 29px;

    }


    .ind-eqi-page .ind-eqi-overview-content h2 {

        font-size: 27px;

    }


    .ind-eqi-page .ind-eqi-section-header h2 {

        font-size: 27px;

    }


    .ind-eqi-page .ind-eqi-cap-card,
    .ind-eqi-page .ind-eqi-step-card {

        padding: 20px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind-eqi-page *,
    .ind-eqi-page *::before,
    .ind-eqi-page *::after {

        animation: none !important;

        transition: none !important;

    }

}


















/**-----------------------  PROJECT PAGE  ---------------------**/

/* =========================================================
   INDUSTRA PROJECTS PAGE
   PART 2 — PREMIUM SHOWCASE CSS
   ========================================================= */

.ind-projects-page {

    --ip-navy: #102630;
    --ip-navy-dark: #091a21;
    --ip-navy-soft: #183943;

    --ip-gold: #e96f32;
    --ip-gold-light: #e96f32;
    --ip-gold-soft: #fff8e7;

    --ip-green: #18845d;
    --ip-green-soft: #eaf8f2;

    --ip-text: #26363e;
    --ip-muted: #718089;

    --ip-white: #ffffff;
    --ip-light: #f5f7f8;

    --ip-border: #e3e8ea;

    width: 100%;
    overflow: hidden;

    color: var(--ip-text);

    font-family: "Inter", sans-serif;
    font-size: 14px;

}


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

.ind-projects-page .ind-projects-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   HERO / BREADCRUMB
   ========================================================= */

.ind-projects-page .ind-projects-hero {

    position: relative;

    min-height: 300px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(115deg,
            var(--ip-navy-dark) 0%,
            var(--ip-navy) 55%,
            #193c48 100%);

}


/* Industrial grid */

.ind-projects-page .ind-projects-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(rgba(255, 255, 255, .13) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .13) 1px,
            transparent 1px);

    background-size: 52px 52px;

}


/* Decorative radial glow */

.ind-projects-page .ind-projects-hero::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -160px;
    top: -230px;

    border: 1px solid rgba(230, 189, 90, .20);

    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(230, 189, 90, .025),
        0 0 0 90px rgba(230, 189, 90, .018);

}


/* Hero content */

.ind-projects-page .ind-projects-hero-content {

    position: relative;

    z-index: 2;

    padding: 65px 0;

}


.ind-projects-page .ind-projects-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid rgba(230, 189, 90, .25);

    border-radius: 30px;

    color: var(--ip-gold-light);

    background: rgba(201, 151, 39, .07);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.ind-projects-page .ind-projects-eyebrow i {

    font-size: 14px;

}


.ind-projects-page .ind-projects-hero-content h1 {

    margin: 17px 0 14px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.2px;

}


.ind-projects-page .ind-projects-hero-content h1 span {

    color: var(--ip-gold-light);

}


.ind-projects-page .ind-projects-breadcrumb {

    display: flex;

    align-items: center;

    gap: 14px;

}


.ind-projects-page .ind-projects-breadcrumb a,
.ind-projects-page .ind-projects-breadcrumb span {

    font-size: 14px;

    font-weight: 600;

}


.ind-projects-page .ind-projects-breadcrumb a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: rgba(255, 255, 255, .52);

    text-decoration: none;

    transition: .25s ease;

}


.ind-projects-page .ind-projects-breadcrumb a:hover {

    color: var(--ip-gold-light);

}


.ind-projects-page .ind-projects-breadcrumb>i {

    color: rgba(255, 255, 255, .25);

    font-size: 10px;

}


.ind-projects-page .ind-projects-breadcrumb span {

    color: var(--ip-gold-light);

}


/* Hero gold accent */

.ind-projects-page .ind-projects-hero-accent {

    position: absolute;

    z-index: 3;

    left: 0;
    bottom: 0;

    width: 135px;
    height: 3px;

    background:
        linear-gradient(90deg,
            var(--ip-gold),
            var(--ip-gold-light),
            transparent);

}


/* =========================================================
   INTRO
   ========================================================= */

.ind-projects-page .ind-projects-intro {

    padding: 78px 0 34px;

    background: var(--ip-white);

}


.ind-projects-page .ind-projects-section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--ip-gold);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1.8px;

}


.ind-projects-page .ind-projects-section-label::before {

    content: "";

    width: 25px;
    height: 1px;

    background: var(--ip-gold);

}


.ind-projects-page .ind-projects-intro h2 {

    max-width: 650px;

    margin: 15px 0 0;

    color: var(--ip-navy);

    font-size: 38px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;

}


.ind-projects-page .ind-projects-intro h2 span {

    color: var(--ip-gold);

}


/* =========================================================
   LIVE PROJECT SECTION
   ========================================================= */

.ind-projects-page .ind-projects-live {

    padding: 35px 0 90px;

    background: #ffffff;

}


/* =========================================================
   COMPLETED SECTION
   ========================================================= */

.ind-projects-page .ind-projects-completed {

    padding: 90px 0;

    background:
        linear-gradient(180deg,
            #f6f8f9,
            #f2f5f6);

}


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

.ind-projects-page .ind-projects-block-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 34px;

}


.ind-projects-page .ind-projects-block-marker {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

}


.ind-projects-page .ind-projects-block-marker span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

}


.ind-projects-page .live-marker {

    background: var(--ip-green-soft);

}


.ind-projects-page .live-marker span {

    background: var(--ip-green);

    box-shadow:
        0 0 0 5px rgba(24, 132, 93, .10);

}


.ind-projects-page .completed-marker {

    background: var(--ip-gold-soft);

}


.ind-projects-page .completed-marker span {

    background: var(--ip-gold);

    box-shadow:
        0 0 0 5px rgba(201, 151, 39, .10);

}


.ind-projects-page .ind-projects-block-kicker {

    display: block;

    margin-bottom: 4px;

    color: var(--ip-muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ind-projects-page .ind-projects-block-heading h2 {

    margin: 0;

    color: var(--ip-navy);

    font-size: 26px;

    line-height: 1.1;

    font-weight: 800;

}


.ind-projects-page .ind-projects-block-line {

    flex: 1;

    height: 1px;

    margin-left: 8px;

    background:
        linear-gradient(90deg,
            var(--ip-border),
            transparent);

}


/* =========================================================
   PROJECT SHOWCASE
   ========================================================= */

.ind-projects-page .ind-project-showcase {

    position: relative;

    display: grid;

    grid-template-columns: 1.08fr .92fr;

    min-height: 425px;

    margin-bottom: 25px;

    overflow: hidden;

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

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 14px 35px rgba(10, 30, 40, .045);

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

}


.ind-projects-page .ind-project-showcase:last-child {

    margin-bottom: 0;

}


.ind-projects-page .ind-project-showcase:hover {

    transform: translateY(-7px);

    border-color: rgba(201, 151, 39, .28);

    box-shadow:
        0 25px 55px rgba(10, 30, 40, .10);

}


/* Reverse */

.ind-projects-page .ind-project-showcase.reverse {

    grid-template-columns: .92fr 1.08fr;

}


.ind-projects-page .ind-project-showcase.reverse .ind-project-visual {

    order: 2;

}


.ind-projects-page .ind-project-showcase.reverse .ind-project-details {

    order: 1;

}


/* =========================================================
   PROJECT VISUAL
   ========================================================= */

.ind-projects-page .ind-project-visual {

    position: relative;

    min-height: 425px;

    overflow: hidden;

    background: #dfe5e7;

}


.ind-projects-page .ind-project-visual img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.2, .7, .2, 1),
        filter .5s ease;

}


.ind-projects-page .ind-project-showcase:hover .ind-project-visual img {

    transform: scale(1.075);

    filter: saturate(1.08);

}


/* Dark cinematic overlay */

.ind-projects-page .ind-project-visual-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(6, 22, 29, .08),
            rgba(6, 22, 29, .10) 40%,
            rgba(6, 22, 29, .52));

    pointer-events: none;

}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.ind-projects-page .ind-project-status {

    position: absolute;

    z-index: 3;

    top: 20px;
    left: 20px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 14px;

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 8px;

    color: #ffffff;

    background:
        rgba(9, 28, 37, .88);

    backdrop-filter: blur(9px);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.1px;

}


.ind-projects-page .ind-project-status i {

    font-size: 10px;

}


.ind-projects-page .ind-project-status.live i {

    color: #48ca94;

}


.ind-projects-page .ind-project-status.completed i {

    color: var(--ip-gold-light);

}


/* =========================================================
   BIG PROJECT NUMBER
   ========================================================= */

.ind-projects-page .ind-project-big-number {

    position: absolute;

    z-index: 2;

    right: 22px;
    bottom: 18px;

    color: rgba(255, 255, 255, .22);

    font-size: 72px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -4px;

    user-select: none;

    transition:
        color .4s ease,
        transform .4s ease;

}


.ind-projects-page .ind-project-showcase:hover .ind-project-big-number {

    color: rgba(255, 255, 255, .38);

    transform: translateY(-4px);

}


/* =========================================================
   PROJECT DETAILS
   ========================================================= */

.ind-projects-page .ind-project-details {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 48px;

    background: #ffffff;

}


/* Gold side accent */

.ind-projects-page .ind-project-details::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    background:
        linear-gradient(180deg,
            var(--ip-gold),
            var(--ip-gold-light));

    transform: translateY(-50%);

    transition: height .45s ease;

}


.ind-projects-page .ind-project-showcase:hover .ind-project-details::before {

    height: 72%;

}


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

.ind-projects-page .ind-project-top-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}


.ind-projects-page .ind-project-top-meta span {

    color: var(--ip-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-projects-page .ind-project-top-meta i {

    color: #cbd2d5;

    font-size: 14px;

    transition: .3s ease;

}


.ind-projects-page .ind-project-showcase:hover .ind-project-top-meta i {

    color: var(--ip-gold);

    transform: translate(2px, -2px);

}


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

.ind-projects-page .ind-project-details h3 {

    max-width: 430px;

    margin: 0 0 25px;

    color: var(--ip-navy);

    font-size: 31px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.8px;

}


/* =========================================================
   LOCATION
   ========================================================= */

.ind-projects-page .ind-project-location {

    display: grid;

    grid-template-columns: 40px 1fr;

    gap: 14px;

    margin-bottom: 19px;

}


.ind-projects-page .ind-project-info-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: var(--ip-gold);

    background: var(--ip-gold-soft);

}


.ind-projects-page .ind-project-info-icon i {

    font-size: 14px;

}


.ind-projects-page .ind-project-location small,
.ind-projects-page .ind-project-work-box small {

    display: block;

    margin-bottom: 6px;

    color: #a0a9ae;

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.ind-projects-page .ind-project-location p {

    margin: 0;

    color: var(--ip-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   WORK BOX
   ========================================================= */

.ind-projects-page .ind-project-work-box {

    margin-top: 4px;

    padding: 16px 17px;

    border: 1px solid #edf0f1;

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            #fafbfb,
            #ffffff);

}


.ind-projects-page .ind-project-work-box small {

    color: var(--ip-gold);

}


.ind-projects-page .ind-project-work-box p {

    margin: 0;

    color: #45555d;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 600;

}


/* =========================================================
   COMPLETED CARD DIFFERENCE
   ========================================================= */

.ind-projects-page .completed-card .ind-project-status {

    background:
        rgba(20, 28, 30, .90);

}


.ind-projects-page .completed-card .ind-project-details::before {

    background:
        linear-gradient(180deg,
            var(--ip-gold),
            var(--ip-gold-light));

}


/* =========================================================
   FOOTER
   ========================================================= */

.ind-projects-page .ind-projects-footer {

    padding: 35px 0 0;

    background:
        linear-gradient(135deg,
            #091b23,
            #102a34);

}


.ind-projects-page .ind-projects-footer-main {

    min-height: 50px;

}


.ind-projects-page .ind-projects-footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 14px;

}


.ind-projects-page .ind-projects-footer-logo>span {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(201, 151, 39, .18);

    border-radius: 14px;

    color: var(--ip-gold-light);

    background: rgba(201, 151, 39, .08);

}


.ind-projects-page .ind-projects-footer-logo strong {

    color: #ffffff;

    font-size: 18px;

    letter-spacing: 1.2px;

}


.ind-projects-page .ind-projects-footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

    padding: 18px 0;

    border-top: 1px solid rgba(255, 255, 255, .08);

}


.ind-projects-page .ind-projects-footer-bottom span {

    color: rgba(255, 255, 255, .42);

    font-size: 14px;

}


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

@media (max-width: 1000px) {

    .ind-projects-page .ind-project-showcase,
    .ind-projects-page .ind-project-showcase.reverse {

        grid-template-columns: 1fr 1fr;

    }


    .ind-projects-page .ind-project-details {

        padding: 32px;

    }


    .ind-projects-page .ind-project-details h3 {

        font-size: 27px;

    }

}


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

@media (max-width: 760px) {

    .ind-projects-page .ind-project-showcase,
    .ind-projects-page .ind-project-showcase.reverse {

        grid-template-columns: 1fr;

    }


    .ind-projects-page .ind-project-showcase.reverse .ind-project-visual {

        order: 1;

    }


    .ind-projects-page .ind-project-showcase.reverse .ind-project-details {

        order: 2;

    }


    .ind-projects-page .ind-project-visual {

        min-height: 314px;

    }


    .ind-projects-page .ind-project-details {

        min-height: 330px;

        padding: 30px;

    }


    .ind-projects-page .ind-project-details h3 {

        font-size: 27px;

    }

}


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

@media (max-width: 600px) {

    .ind-projects-page .ind-projects-container {

        width: calc(100% - 30px);

    }


    /* Hero */

    .ind-projects-page .ind-projects-hero {

        min-height: 250px;

    }


    .ind-projects-page .ind-projects-hero-content {

        padding: 55px 0;

    }


    .ind-projects-page .ind-projects-hero-content h1 {

        font-size: 36px;

    }


    /* Intro */

    .ind-projects-page .ind-projects-intro {

        padding: 58px 0 25px;

    }


    .ind-projects-page .ind-projects-intro h2 {

        font-size: 29px;

    }


    /* Sections */

    .ind-projects-page .ind-projects-live {

        padding: 28px 0 60px;

    }


    .ind-projects-page .ind-projects-completed {

        padding: 60px 0;

    }


    /* Section heading */

    .ind-projects-page .ind-projects-block-heading {

        margin-bottom: 24px;

    }


    .ind-projects-page .ind-projects-block-heading h2 {

        font-size: 23px;

    }


    .ind-projects-page .ind-projects-block-line {

        display: none;

    }


    /* Project */

    .ind-projects-page .ind-project-showcase {

        border-radius: 15px;

        margin-bottom: 18px;

    }


    .ind-projects-page .ind-project-visual {

        min-height: 245px;

    }


    .ind-projects-page .ind-project-details {

        min-height: auto;

        padding: 25px 21px 26px;

    }


    .ind-projects-page .ind-project-details h3 {

        font-size: 23px;

        margin-bottom: 20px;

    }


    .ind-projects-page .ind-project-location {

        grid-template-columns: 35px 1fr;

        gap: 14px;

    }


    .ind-projects-page .ind-project-info-icon {

        width: 35px;
        height: 35px;

    }


    .ind-projects-page .ind-project-location p {

        font-size: 14px;

    }


    .ind-projects-page .ind-project-work-box {

        padding: 14px;

    }


    .ind-projects-page .ind-project-work-box p {

        font-size: 14px;

    }


    .ind-projects-page .ind-project-big-number {

        font-size: 55px;

    }


    /* Footer */

    .ind-projects-page .ind-projects-footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }

}


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

@media (max-width: 380px) {

    .ind-projects-page .ind-projects-hero-content h1 {

        font-size: 32px;

    }


    .ind-projects-page .ind-projects-intro h2 {

        font-size: 26px;

    }


    .ind-projects-page .ind-projects-block-heading h2 {

        font-size: 21px;

    }


    .ind-projects-page .ind-project-visual {

        min-height: 220px;

    }


    .ind-projects-page .ind-project-details h3 {

        font-size: 21px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind-projects-page *,
    .ind-projects-page *::before,
    .ind-projects-page *::after {

        animation: none !important;

        transition: none !important;

    }

}


/* =========================================================
   INDUSTRA PROJECTS PAGE
   COMPLETE PREMIUM CSS
   ========================================================= */

.ind-projects-page {

    --ip-navy: #102630;
    --ip-navy-dark: #071a21;
    --ip-navy-soft: #183943;

    --ip-gold: #e96f32;
    --ip-gold-light: #e5bd5b;
    --ip-gold-soft: #fff8e8;

    --ip-green: #19845d;
    --ip-green-soft: #eaf8f2;

    --ip-white: #ffffff;
    --ip-light: #f5f7f8;

    --ip-text: #273840;
    --ip-muted: #718089;

    --ip-border: #e2e8ea;

    width: 100%;

    overflow: hidden;

    color: var(--ip-text);

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

    font-size: 14px;

}


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

.ind-projects-page .ind-projects-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.ind-projects-page .ind-projects-hero {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--ip-navy-dark);

}


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

.ind-projects-page .ind-projects-hero-image {

    position: absolute;

    inset: 0;

    overflow: hidden;


}


.ind-projects-page .ind-projects-hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.03);

    transition: transform 8s ease;

}


.ind-projects-page .ind-projects-hero:hover .ind-projects-hero-image img {

    transform: scale(1.08);

}


/* =========================================================
   HERO OVERLAY
   ========================================================= */

.ind-projects-page .ind-projects-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 17, 23, .96) 0%,
            rgba(5, 22, 29, .90) 35%,
            rgba(7, 27, 35, .66) 62%,
            rgba(7, 27, 35, .32) 100%);

}


.ind-projects-page .ind-projects-hero-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(0deg,
            rgba(5, 18, 24, .75),
            transparent 42%);

}


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

.ind-projects-page .ind-projects-hero-pattern {

    position: absolute;

    inset: 0;

    opacity: .10;

    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .18) 1px,
            transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(90deg,
            black,
            transparent 85%);

}


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

.ind-projects-page .ind-projects-hero-content {

    position: relative;

    z-index: 5;

    max-width: 760px;

    padding: 40px 0 40px;

}


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

.ind-projects-page .ind-projects-hero-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

    color: var(--ip-gold-light);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2.2px;

}


.ind-projects-page .ind-projects-hero-label span {

    width: 34px;

    height: 2px;

    background:
        linear-gradient(90deg,
            var(--ip-gold),
            var(--ip-gold-light));

}


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

.ind-projects-page .ind-projects-hero-content h1 {

    max-width: 730px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(45px, 5.4vw, 74px);

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -2.5px;

}


.ind-projects-page .ind-projects-hero-content h1 strong {

    display: block;

    margin-top: 7px;

    color:#e96f32;

    font-weight: 800;

}


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

.ind-projects-page .ind-projects-hero-content>p {

    max-width: 590px;

    margin: 26px 0 0;

    color: rgba(255, 255, 255, .67);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   HERO META
   ========================================================= */

.ind-projects-page .ind-projects-hero-meta {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 48px;

    padding-top: 21px;

    border-top: 1px solid rgba(255, 255, 255, .13);

}


.ind-projects-page .ind-projects-hero-meta-item {

    display: flex;

    align-items: center;

    gap: 14px;

}


.ind-projects-page .ind-projects-hero-meta-item>i {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(229, 189, 91, .22);

    border-radius: 9px;

    color: var(--ip-gold-light);

    background: rgba(201, 151, 39, .08);

    font-size: 14px;

}


.ind-projects-page .ind-projects-hero-meta-item div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ind-projects-page .ind-projects-hero-meta-item small {

    color: rgba(255, 255, 255, .35);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.ind-projects-page .ind-projects-hero-meta-item strong {

    color: rgba(255, 255, 255, .75);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .8px;

}


/* Divider */

.ind-projects-page .ind-projects-hero-divider {

    width: 1px;

    height: 35px;

    background: rgba(255, 255, 255, .12);

}


/* =========================================================
   HERO INDEX
   ========================================================= */

.ind-projects-page .ind-projects-hero-index {

    position: absolute;

    z-index: 4;

    right: 6%;

    bottom: 38px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}


.ind-projects-page .ind-projects-hero-index span {

    color: rgba(255, 255, 255, .28);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.ind-projects-page .ind-projects-hero-index strong {

    margin-top: -7px;

    color: rgba(255, 255, 255, .12);

    font-size: 145px;

    line-height: .85;

    font-weight: 900;

    letter-spacing: -9px;

}


/* =========================================================
   HERO GOLD LINE
   ========================================================= */

.ind-projects-page .ind-projects-hero-bottom-line {

    position: absolute;

    z-index: 7;

    left: 0;

    bottom: 0;

    width: 180px;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--ip-gold),
            var(--ip-gold-light),
            transparent);

}


/* =========================================================
   INTRO
   ========================================================= */

.ind-projects-page .ind-projects-intro {

    padding: 40px 0 40px;

    background: #ffffff;

}


.ind-projects-page .ind-projects-section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--ip-gold);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1.8px;

}


.ind-projects-page .ind-projects-section-label::before {

    content: "";

    width: 25px;

    height: 1px;

    background: var(--ip-gold);

}


.ind-projects-page .ind-projects-intro h2 {

    max-width: 700px;

    margin: 15px 0 0;

    color: var(--ip-navy);

    font-size: 38px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;

}


.ind-projects-page .ind-projects-intro h2 span {

    color: var(--ip-gold);

}


/* =========================================================
   LIVE SECTION
   ========================================================= */

.ind-projects-page .ind-projects-live {

    padding: 35px 0 40px;

    background: #ffffff;

}


/* =========================================================
   COMPLETED SECTION
   ========================================================= */

.ind-projects-page .ind-projects-completed {

    padding: 40px 0;

    background:
        linear-gradient(180deg,
            #f6f8f9,
            #f1f4f5);

}


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

.ind-projects-page .ind-projects-block-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 30px;

}


.ind-projects-page .ind-projects-block-marker {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

}


.ind-projects-page .ind-projects-block-marker span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

}


.ind-projects-page .live-marker {

    background: var(--ip-green-soft);

}


.ind-projects-page .live-marker span {

    background: var(--ip-green);

    box-shadow:
        0 0 0 5px rgba(25, 132, 93, .10);

}


.ind-projects-page .completed-marker {

    background: var(--ip-gold-soft);

}


.ind-projects-page .completed-marker span {

    background: var(--ip-gold);

    box-shadow:
        0 0 0 5px rgba(201, 151, 39, .10);

}


.ind-projects-page .ind-projects-block-heading small {

    display: block;

    margin-bottom: 4px;

    color: var(--ip-muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ind-projects-page .ind-projects-block-heading h2 {

    margin: 0;

    color: var(--ip-navy);

    font-size: 27px;

    line-height: 1.1;

    font-weight: 800;

}


.ind-projects-page .ind-projects-block-line {

    flex: 1;

    height: 1px;

    margin-left: 8px;

    background:
        linear-gradient(90deg,
            var(--ip-border),
            transparent);

}


/* =========================================================
   TWO COLUMN GRID
   ========================================================= */

.ind-projects-page .ind-projects-grid {

    display: grid;

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

    gap: 28px;

}


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

.ind-projects-page .ind-project-card {

    position: relative;

    overflow: hidden;

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

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 9px 30px rgba(10, 30, 40, .045);

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

}


.ind-projects-page .ind-project-card:hover {

    transform: translateY(-8px);

    border-color: rgba(201, 151, 39, .30);

    box-shadow:
        0 25px 55px rgba(10, 30, 40, .11);

}


/* Bottom gold line */

.ind-projects-page .ind-project-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--ip-gold),
            var(--ip-gold-light));

    transition: width .4s ease;

}


.ind-projects-page .ind-project-card:hover::after {

    width: 100%;

}


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

.ind-projects-page .ind-project-card-image {

    position: relative;

    height: 285px;

    overflow: hidden;

    background: #dfe5e7;

}


.ind-projects-page .ind-project-card-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s ease,
        filter .45s ease;

}


.ind-projects-page .ind-project-card:hover .ind-project-card-image img {

    transform: scale(1.07);

    filter: saturate(1.08);

}


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

.ind-projects-page .ind-project-card-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 35%,
            rgba(5, 21, 28, .65));

    pointer-events: none;

}


/* =========================================================
   STATUS
   ========================================================= */

.ind-projects-page .ind-project-status {

    position: absolute;

    z-index: 3;

    top: 17px;

    left: 17px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 14px;

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 7px;

    color: #ffffff;

    background:
        rgba(8, 27, 35, .88);

    backdrop-filter: blur(8px);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


.ind-projects-page .ind-project-status i {

    font-size: 10px;

}


.ind-projects-page .ind-project-status.live i {

    color: #44ca92;

}


.ind-projects-page .ind-project-status.completed i {

    color: var(--ip-gold-light);

}


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

.ind-projects-page .ind-project-number {

    position: absolute;

    z-index: 3;

    right: 18px;

    bottom: 16px;

    color: rgba(255, 255, 255, .31);

    font-size: 65px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -4px;

    transition:
        color .4s ease,
        transform .4s ease;

}


.ind-projects-page .ind-project-card:hover .ind-project-number {

    color: rgba(255, 255, 255, .43);

    transform: translateY(-4px);

}


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

.ind-projects-page .ind-project-card-body {

    padding: 25px;

}


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

.ind-projects-page .ind-project-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

}


.ind-projects-page .ind-project-card-top span {

    color: var(--ip-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}


.ind-projects-page .ind-project-card-top i {

    color: #c7ced1;

    font-size: 14px;

    transition: .3s ease;

}


.ind-projects-page .ind-project-card:hover .ind-project-card-top i {

    color: var(--ip-gold);

    transform: translate(2px, -2px);

}


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

.ind-projects-page .ind-project-card-body h3 {

    margin: 0 0 19px;

    color: var(--ip-navy);

    font-size: 23px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.4px;

}


/* =========================================================
   LOCATION
   ========================================================= */

.ind-projects-page .ind-project-location {

    display: grid;

    grid-template-columns: 35px minmax(0, 1fr);

    gap: 14px;

    padding-bottom: 17px;

    border-bottom: 1px solid #edf0f1;

}


.ind-projects-page .ind-project-location>i {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: var(--ip-gold);

    background: var(--ip-gold-soft);

    font-size: 14px;

}


.ind-projects-page .ind-project-location small,
.ind-projects-page .ind-project-work small {

    display: block;

    margin-bottom: 6px;

    color: #a0a9ad;

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 1.2px;

}


.ind-projects-page .ind-project-location p {

    margin: 0;

    color: var(--ip-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   NATURE OF WORK
   ========================================================= */

.ind-projects-page .ind-project-work {

    padding-top: 17px;

}


.ind-projects-page .ind-project-work small {

    color: var(--ip-gold);

}


.ind-projects-page .ind-project-work p {

    margin: 0;

    color: #43545c;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 600;

}


/* =========================================================
   FOOTER
   ========================================================= */

.ind-projects-page .ind-projects-footer {

    padding: 35px 0 0;

    background:
        linear-gradient(135deg,
            #081b23,
            #102b35);

}


.ind-projects-page .ind-projects-footer-logo {

    display: inline-flex;

    align-items: center;

    gap: 14px;

}


.ind-projects-page .ind-projects-footer-logo>span {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(201, 151, 39, .20);

    border-radius: 9px;

    color: var(--ip-gold-light);

    background: rgba(201, 151, 39, .08);

}


.ind-projects-page .ind-projects-footer-logo strong {

    color: #ffffff;

    font-size: 18px;

    letter-spacing: 1px;

}


.ind-projects-page .ind-projects-footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

    padding: 18px 0;

    border-top: 1px solid rgba(255, 255, 255, .08);

}


.ind-projects-page .ind-projects-footer-bottom span {

    color: rgba(255, 255, 255, .42);

    font-size: 14px;

}


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

@media (max-width: 900px) {

    .ind-projects-page .ind-projects-hero {

        min-height: 560px;

    }


    .ind-projects-page .ind-projects-hero-content {

        padding: 105px 0 85px;

    }


    .ind-projects-page .ind-projects-hero-content h1 {

        font-size: 53px;

    }


    .ind-projects-page .ind-project-card-image {

        height: 255px;

    }


    .ind-projects-page .ind-project-card-body {

        padding: 21px;

    }

}


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

@media (max-width: 700px) {

    .ind-projects-page .ind-projects-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .ind-projects-page .ind-projects-hero {

        min-height: 535px;

    }


    .ind-projects-page .ind-projects-hero-content {

        padding: 90px 0 75px;

    }


    .ind-projects-page .ind-projects-hero-content h1 {

        font-size: 40px;

        line-height: 1.05;

        letter-spacing: -1.4px;

    }


    .ind-projects-page .ind-projects-hero-content>p {

        font-size: 15px;

        line-height: 1.75;

    }


    .ind-projects-page .ind-projects-hero-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        margin-top: 32px;

    }


    .ind-projects-page .ind-projects-hero-divider {

        display: none;

    }


    .ind-projects-page .ind-projects-hero-index {

        right: 15px;

        bottom: 18px;

    }


    .ind-projects-page .ind-projects-hero-index strong {

        font-size: 85px;

    }


    .ind-projects-page .ind-projects-intro {

        padding: 58px 0 28px;

    }


    .ind-projects-page .ind-projects-intro h2 {

        font-size: 29px;

    }


    .ind-projects-page .ind-projects-live {

        padding: 28px 0 60px;

    }


    .ind-projects-page .ind-projects-completed {

        padding: 60px 0;

    }


    .ind-projects-page .ind-projects-block-line {

        display: none;

    }


    .ind-projects-page .ind-projects-block-heading h2 {

        font-size: 23px;

    }


    .ind-projects-page .ind-project-card-image {

        height: 250px;

    }


    .ind-projects-page .ind-project-card-body {

        padding: 20px;

    }


    .ind-projects-page .ind-project-card-body h3 {

        font-size: 20px;

    }


    .ind-projects-page .ind-project-location p {

        font-size: 14px;

    }


    .ind-projects-page .ind-project-work p {

        font-size: 14px;

    }


    .ind-projects-page .ind-project-number {

        font-size: 54px;

    }


    .ind-projects-page .ind-projects-footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }

}


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

@media (max-width: 380px) {

    .ind-projects-page .ind-projects-container {

        width: calc(100% - 28px);

    }


    .ind-projects-page .ind-projects-hero {

        min-height: 500px;

    }


    .ind-projects-page .ind-projects-hero-content h1 {

        font-size: 34px;

    }


    .ind-projects-page .ind-projects-hero-content>p {

        font-size: 14px;

    }


    .ind-projects-page .ind-projects-intro h2 {

        font-size: 26px;

    }


    .ind-projects-page .ind-projects-block-heading h2 {

        font-size: 21px;

    }


    .ind-projects-page .ind-project-card-image {

        height: 220px;

    }


    .ind-projects-page .ind-project-card-body h3 {

        font-size: 19px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind-projects-page *,
    .ind-projects-page *::before,
    .ind-projects-page *::after {

        animation: none !important;

        transition: none !important;

    }

}



















/**----------------- CAREER PAGE  -------------------------**/

/* =========================================================
   INDUSTRA CAREER PAGE
   PART 1 — PREMIUM CSS
   ========================================================= */

.ind-career-page {

    --ic-navy: #102630;
    --ic-navy-dark: #071a21;
    --ic-gold: #e96f32;
    --ic-gold-light: #e5bd5b;

    --ic-text: #263840;
    --ic-muted: #718089;

    --ic-white: #ffffff;
    --ic-light: #f5f7f8;

    --ic-border: #e2e8ea;

    width: 100%;

    overflow: hidden;

    color: var(--ic-text);

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

    font-size: 14px;

}


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

.ind-career-page .ind-career-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.ind-career-page .ind-career-hero {

    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--ic-navy-dark);

}


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

.ind-career-page .ind-career-hero-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.ind-career-page .ind-career-hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.03);

    transition: transform 8s ease;

}


.ind-career-page .ind-career-hero:hover .ind-career-hero-image img {

    transform: scale(1.07);

}


/* =========================================================
   HERO OVERLAY
   ========================================================= */

.ind-career-page .ind-career-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 17, 23, .96) 0%,
            rgba(5, 23, 30, .90) 36%,
            rgba(7, 27, 35, .61) 65%,
            rgba(7, 27, 35, .28) 100%);

}


.ind-career-page .ind-career-hero-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(0deg,
            rgba(4, 17, 23, .72),
            transparent 45%);

}


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

.ind-career-page .ind-career-hero-pattern {

    position: absolute;

    inset: 0;

    opacity: .10;

    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .18) 1px,
            transparent 1px);

    background-size: 68px 68px;

    mask-image:
        linear-gradient(90deg,
            black,
            transparent 85%);



}


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

.ind-career-page .ind-career-hero-content {

    position: relative;

    z-index: 5;

    max-width: 760px;



}


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

.ind-career-page .ind-career-hero-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

    color: var(--ic-gold-light);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2.2px;

}


.ind-career-page .ind-career-hero-label span {

    width: 34px;

    height: 2px;

    background:
        linear-gradient(90deg,
            var(--ic-gold),
            var(--ic-gold-light));

}


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

.ind-career-page .ind-career-hero-content h1 {

    max-width: 720px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(45px, 5.4vw, 55px);

    line-height: 1.03;

    font-weight: 700;

    letter-spacing: -2.4px;

}


.ind-career-page .ind-career-hero-content h1 strong {

    display: block;

    margin-top: 6px;

    color: var(--ic-gold-light);

    font-weight: 800;

}


/* =========================================================
   HERO TEXT
   ========================================================= */

.ind-career-page .ind-career-hero-content>p {

    max-width: 590px;

    margin: 26px 0 0;

    color: rgba(255, 255, 255, .67);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.ind-career-page .ind-career-hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 34px;

    padding: 15px 17px;

    border: 1px solid rgba(229, 189, 91, .35);

    border-radius: 7px;

    color: #ffffff;

    background: rgba(201, 151, 39, .10);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .8px;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.ind-career-page .ind-career-hero-btn i {

    color: var(--ic-gold-light);

    font-size: 14px;

    transition: transform .3s ease;

}


.ind-career-page .ind-career-hero-btn:hover {

    border-color: var(--ic-gold-light);

    background: rgba(201, 151, 39, .18);

    transform: translateY(-2px);

}


.ind-career-page .ind-career-hero-btn:hover i {

    transform: translateX(4px);

}


/* =========================================================
   HERO INDEX
   ========================================================= */

.ind-career-page .ind-career-hero-index {

    position: absolute;

    z-index: 4;

    right: 6%;

    bottom: 35px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}


.ind-career-page .ind-career-hero-index span {

    color: rgba(255, 255, 255, .27);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.ind-career-page .ind-career-hero-index strong {

    margin-top: -7px;

    color: rgba(255, 255, 255, .12);

    font-size: 145px;

    line-height: .85;

    font-weight: 900;

    letter-spacing: -9px;

}


/* =========================================================
   HERO BOTTOM LINE
   ========================================================= */

.ind-career-page .ind-career-hero-line {

    position: absolute;

    z-index: 7;

    left: 0;

    bottom: 0;

    width: 180px;

    height: 3px;

    background:
        linear-gradient(90deg,
            var(--ic-gold),
            var(--ic-gold-light),
            transparent);

}


/* =========================================================
   WHY JOIN
   ========================================================= */

.ind-career-page .ind-career-why {

    padding: 40px 0 40px;

    background: #ffffff;

}


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

.ind-career-page .ind-career-section-heading {

    max-width: 720px;

    margin-bottom: 30px;

}


.ind-career-page .ind-career-section-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: var(--ic-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;

}


.ind-career-page .ind-career-section-label span {

    width: 26px;

    height: 1px;

    background: var(--ic-gold);

}


.ind-career-page .ind-career-section-heading h2 {

    margin: 0;

    color: var(--ic-navy);

    font-size: 39px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1px;

}


.ind-career-page .ind-career-section-heading h2 span {

    color: var(--ic-gold);

}


.ind-career-page .ind-career-section-heading p {

    max-width: 630px;

    margin: 18px 0 0;

    color: var(--ic-muted);

    font-size: 15px;

    line-height: 1.8;

}


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

.ind-career-page .ind-career-benefits-grid {

    display: grid;

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

    gap: 18px;

}


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

.ind-career-page .ind-career-benefit-card {

    position: relative;

    min-height: 300px;

    padding: 27px 23px;

    overflow: hidden;

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

    border-radius: 15px;

    background: #ffffff;

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

}


.ind-career-page .ind-career-benefit-card:hover {

    transform: translateY(-7px);

    border-color: rgba(201, 151, 39, .35);

    box-shadow:
        0 20px 45px rgba(10, 30, 40, .09);

}


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

.ind-career-page .ind-career-benefit-number {

    position: absolute;

    top: 18px;

    right: 18px;

    color: #e9edef;

    font-size: 36px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    transition: color .3s ease;

}


.ind-career-page .ind-career-benefit-card:hover .ind-career-benefit-number {

    color: #f5ecd6;

}


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

.ind-career-page .ind-career-benefit-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    border-radius: 14px;

    color: var(--ic-gold);

    background: var(--ic-gold-soft);

}


.ind-career-page .ind-career-benefit-icon i {

    font-size: 15px;

}


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

.ind-career-page .ind-career-benefit-card h3 {

    margin: 0 0 14px;

    color: var(--ic-navy);

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;

}


/* =========================================================
   BENEFIT TEXT
   ========================================================= */

.ind-career-page .ind-career-benefit-card p {

    margin: 0;

    color: var(--ic-muted);

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   BENEFIT ARROW
   ========================================================= */

.ind-career-page .ind-career-benefit-arrow {

    position: absolute;

    left: 23px;

    bottom: 23px;

    color: #c8d0d3;

    font-size: 14px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.ind-career-page .ind-career-benefit-card:hover .ind-career-benefit-arrow {

    color: var(--ic-gold);

    transform: translate(3px, -3px);

}


/* =========================================================
   CULTURE STRIP
   ========================================================= */

.ind-career-page .ind-career-culture {

    padding: 0 0 40px;

    background: #ffffff;

}


.ind-career-page .ind-career-culture-box {

    position: relative;

    display: flex;

    align-items: center;

    gap: 22px;

    min-height: 155px;

    padding: 30px 35px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(115deg,
            #0a2029,
            #14343f);

}


.ind-career-page .ind-career-culture-box::after {

    content: "";

    position: absolute;

    right: -80px;
    top: -120px;

    width: 300px;
    height: 300px;

    border: 1px solid rgba(229, 189, 91, .14);

    border-radius: 50%;

}


.ind-career-page .ind-career-culture-icon {

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(229, 189, 91, .25);

    border-radius: 14px;

    color: var(--ic-gold-light);

    background: rgba(201, 151, 39, .08);

}


.ind-career-page .ind-career-culture-content {

    position: relative;

    z-index: 2;

}


.ind-career-page .ind-career-culture-content span {

    color: var(--ic-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.7px;

}


.ind-career-page .ind-career-culture-content h3 {

    margin: 5px 0 5px;

    color: #ffffff;

    font-size: 23px;

    font-weight: 800;

}


.ind-career-page .ind-career-culture-content p {

    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: 14px;

    line-height: 1.7;

}


.ind-career-page .ind-career-culture-mark {

    position: relative;

    z-index: 2;

    margin-left: auto;

    color: rgba(255, 255, 255, .12);

    font-size: 31px;

    font-weight: 900;

    letter-spacing: 3px;

}


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

@media (max-width: 1000px) {

    .ind-career-page .ind-career-benefits-grid {

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

    }


    .ind-career-page .ind-career-benefit-card {

        min-height: 270px;

    }

}


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

@media (max-width: 650px) {

    .ind-career-page .ind-career-container {

        width: calc(100% - 30px);

    }


    .ind-career-page .ind-career-hero {

        min-height: 540px;

    }


    .ind-career-page .ind-career-hero-content {

        padding: 90px 0 75px;

    }


    .ind-career-page .ind-career-hero-content h1 {

        font-size: 39px;

        line-height: 1.06;

        letter-spacing: -1.4px;

    }


    .ind-career-page .ind-career-hero-content>p {

        font-size: 14px;

        line-height: 1.75;

    }


    .ind-career-page .ind-career-hero-index {

        right: 15px;

        bottom: 18px;

    }


    .ind-career-page .ind-career-hero-index strong {

        font-size: 85px;

    }


    .ind-career-page .ind-career-why {

        padding: 60px 0 65px;

    }


    .ind-career-page .ind-career-section-heading {

        margin-bottom: 32px;

    }


    .ind-career-page .ind-career-section-heading h2 {

        font-size: 29px;

    }


    .ind-career-page .ind-career-section-heading p {

        font-size: 14px;

    }


    .ind-career-page .ind-career-benefits-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .ind-career-page .ind-career-benefit-card {

        min-height: 225px;

        padding: 24px 21px;

    }


    .ind-career-page .ind-career-benefit-icon {

        margin-bottom: 22px;

    }


    .ind-career-page .ind-career-culture {

        padding-bottom: 60px;

    }


    .ind-career-page .ind-career-culture-box {

        align-items: flex-start;

        flex-direction: column;

        padding: 27px 23px;

    }


    .ind-career-page .ind-career-culture-mark {

        display: none;

    }

}


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

@media (max-width: 380px) {

    .ind-career-page .ind-career-hero {

        min-height: 500px;

    }


    .ind-career-page .ind-career-hero-content h1 {

        font-size: 34px;

    }


    .ind-career-page .ind-career-section-heading h2 {

        font-size: 26px;

    }


    .ind-career-page .ind-career-benefit-card h3 {

        font-size: 17px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ind-career-page *,
    .ind-career-page *::before,
    .ind-career-page *::after {

        animation: none !important;

        transition: none !important;

    }

}








/* =========================================================
   CAREER APPLICATION SECTION
   ========================================================= */

.ind-career-page .ind-career-application {

    padding: 40px 0;

    background:
        linear-gradient(180deg,
            #f5f7f8,
            #ffffff);

}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.ind-career-page .ind-career-application-wrapper {

    display: grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap: 65px;

    align-items: center;

}


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

.ind-career-page .ind-career-application-info {

    padding-right: 20px;

}


.ind-career-page .ind-career-application-info h2 {

    margin: 15px 0 0;

    color: var(--ic-navy);

    font-size: 42px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.2px;

}


.ind-career-page .ind-career-application-info h2 strong {

    display: block;

    color: var(--ic-gold);

    font-weight: 800;

}


.ind-career-page .ind-career-application-info>p {

    max-width: 500px;

    margin: 20px 0 35px;

    color: var(--ic-muted);

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   APPLICATION POINTS
   ========================================================= */

.ind-career-page .ind-career-application-points {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.ind-career-page .ind-career-application-point {

    display: flex;

    align-items: flex-start;

    gap: 15px;

}


.ind-career-page .ind-career-application-point-icon {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #eee1bd;

    border-radius: 9px;

    color: var(--ic-gold);

    background: var(--ic-gold-soft);

}


.ind-career-page .ind-career-application-point-icon i {

    font-size: 14px;

}


.ind-career-page .ind-career-application-point h4 {

    margin: 1px 0 4px;

    color: var(--ic-navy);

    font-size: 15px;

    font-weight: 800;

}


.ind-career-page .ind-career-application-point span {

    display: block;

    max-width: 414px;

    color: var(--ic-muted);

    font-size: 14px;

    line-height: 1.65;

}


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

.ind-career-page .ind-career-application-card {

    padding: 34px;

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

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(10, 30, 40, .08);

}


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

.ind-career-page .ind-career-form-heading {

    padding-bottom: 21px;

    margin-bottom: 23px;

    border-bottom: 1px solid #edf0f1;

}


.ind-career-page .ind-career-form-heading>span {

    color: var(--ic-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.6px;

}


.ind-career-page .ind-career-form-heading h3 {

    margin: 7px 0 5px;

    color: var(--ic-navy);

    font-size: 24px;

    line-height: 1.2;

    font-weight: 800;

}


.ind-career-page .ind-career-form-heading p {

    margin: 0;

    color: var(--ic-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
   FORM ROW
   ========================================================= */

.ind-career-page .ind-career-form-row {

    display: grid;

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

    gap: 16px;

    margin-bottom: 17px;

}


/* =========================================================
   FORM GROUP
   ========================================================= */

.ind-career-page .ind-career-form-group {

    margin-bottom: 17px;

}


.ind-career-page .ind-career-form-row .ind-career-form-group {

    margin-bottom: 0;

}


.ind-career-page .ind-career-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #617078;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.1px;

}


/* =========================================================
   INPUTS
   ========================================================= */

.ind-career-page .ind-career-form-group input,
.ind-career-page .ind-career-form-group select,
.ind-career-page .ind-career-form-group textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dfe5e7;

    border-radius: 7px;

    outline: none;

    color: var(--ic-navy);

    background: #fafbfb;

    font-family: inherit;

    font-size: 14px;

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

}


.ind-career-page .ind-career-form-group input,
.ind-career-page .ind-career-form-group select {

    height: 43px;

    padding: 0 15px;

}


.ind-career-page .ind-career-form-group textarea {

    min-height: 95px;

    padding: 14px 15px;

    resize: vertical;

}


.ind-career-page .ind-career-form-group input::placeholder,
.ind-career-page .ind-career-form-group textarea::placeholder {

    color: #a9b2b6;

}


.ind-career-page .ind-career-form-group input:focus,
.ind-career-page .ind-career-form-group select:focus,
.ind-career-page .ind-career-form-group textarea:focus {

    border-color: var(--ic-gold);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(201, 151, 39, .08);

}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.ind-career-page .ind-career-resume-group {

    margin-top: 2px;

}


.ind-career-page .ind-career-file-box {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 62px;

    padding: 14px 15px;

    box-sizing: border-box;

    overflow: hidden;

    border: 1px dashed #d7dfe1;

    border-radius: 8px;

    background: #fafbfb;

    cursor: pointer;

    transition:
        border-color .25s ease,
        background .25s ease;

}


.ind-career-page .ind-career-file-box:hover {

    border-color: var(--ic-gold);

    background: #fffdf7;

}


.ind-career-page .ind-career-file-box>i {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    color: var(--ic-gold);

    background: var(--ic-gold-soft);

    font-size: 14px;

}


.ind-career-page .ind-career-file-box div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.ind-career-page .ind-career-file-box strong {

    color: var(--ic-navy);

    font-size: 14px;

    font-weight: 800;

}


.ind-career-page .ind-career-file-box span {

    color: #9aa5aa;

    font-size: 10px;

}


.ind-career-page .ind-career-file-box input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    cursor: pointer;

}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.ind-career-page .ind-career-submit-btn {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 4px;

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

    border-radius: 7px;

    outline: none;

    color: #ffffff;

    background:
        var(--ic-gold);

    font-family: inherit;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .8px;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;

}


.ind-career-page .ind-career-submit-btn i {

    font-size: 10px;

    transition: transform .3s ease;

}


.ind-career-page .ind-career-submit-btn:hover {

    transform: translateY(-2px);

    filter: brightness(1.04);

    box-shadow:
        0 14px 25px rgba(201, 151, 39, .22);

}


.ind-career-page .ind-career-submit-btn:hover i {

    transform: translateX(4px);

}


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

@media (max-width: 900px) {

    .ind-career-page .ind-career-application-wrapper {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .ind-career-page .ind-career-application-info {

        padding-right: 0;

    }


    .ind-career-page .ind-career-application-info>p {

        max-width: 650px;

    }

}


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

@media (max-width: 600px) {

    .ind-career-page .ind-career-application {

        padding: 65px 0;

    }


    .ind-career-page .ind-career-application-info h2 {

        font-size: 30px;

    }


    .ind-career-page .ind-career-application-info>p {

        font-size: 14px;

    }


    .ind-career-page .ind-career-application-card {

        padding: 21px;

        border-radius: 14px;

    }


    .ind-career-page .ind-career-form-heading h3 {

        font-size: 21px;

    }


    .ind-career-page .ind-career-form-row {

        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 0;

    }


    .ind-career-page .ind-career-form-row .ind-career-form-group {

        margin-bottom: 17px;

    }


    .ind-career-page .ind-career-form-group input,
    .ind-career-page .ind-career-form-group select {

        height: 42px;

    }

}


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

@media (max-width: 380px) {

    .ind-career-page .ind-career-application-card {

        padding: 17px;

    }


    .ind-career-page .ind-career-application-info h2 {

        font-size: 27px;

    }

}




















/**-----------------------  GALLERY PAGE  ----------------------**/

/* =========================================================
   INDUSTRA GALLERY PAGE
   PART 1 CSS
   ========================================================= */

.ind-gallery-page {

    --ig1-navy: #102630;
    --ig1-deep: #061920;

    --ig1-gold: #e96f32;
    --ig1-gold-light: #e96f32;

    --ig1-white: #ffffff;

    --ig1-text: #263840;
    --ig1-muted: #718089;

    --ig1-border: #e1e7e9;

    width: 100%;

    overflow: hidden;

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

    font-size: 14px;

}


.ind-gallery-page *,
.ind-gallery-page *::before,
.ind-gallery-page *::after {

    box-sizing: border-box;

}


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

.ind-gallery-page .ind-gallery-p1-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   HERO
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-hero {

    position: relative;

    min-height: 300px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--ig1-deep);

}


.ind-gallery-page .ind-gallery-p1-hero-image {

    position: absolute;

    inset: 0;

}


.ind-gallery-page .ind-gallery-p1-hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.04);

    transition: transform 8s ease;

}


.ind-gallery-page .ind-gallery-p1-hero:hover .ind-gallery-p1-hero-image img {

    transform: scale(1.08);

}


.ind-gallery-page .ind-gallery-p1-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(3, 16, 22, .97) 0%,
            rgba(5, 22, 29, .89) 40%,
            rgba(7, 28, 36, .48) 72%,
            rgba(7, 28, 36, .18));

}


.ind-gallery-page .ind-gallery-p1-hero-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(0deg,
            rgba(3, 15, 20, .78),
            transparent 55%);

}


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

.ind-gallery-page .ind-gallery-p1-hero-grid {

    position: absolute;

    inset: 0;

    opacity: .08;

    background-image:
        linear-gradient(rgba(255, 255, 255, .2) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(255, 255, 255, .2) 1px,
            transparent 1px);

    background-size: 70px 70px;

    mask-image:
        linear-gradient(90deg,
            black,
            transparent 85%);

}


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

.ind-gallery-page .ind-gallery-p1-hero-content {

    position: relative;

    z-index: 5;

    max-width: 720px;

    min-height: 550px;

    padding: 100px 0 40px;

}


.ind-gallery-page .ind-gallery-p1-eyebrow {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

    color: var(--ig1-gold-light);

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 2.2px;

}


.ind-gallery-page .ind-gallery-p1-eyebrow span {

    width: 34px;

    height: 2px;

    background:
        linear-gradient(90deg,
            var(--ig1-gold),
            var(--ig1-gold-light));

}


.ind-gallery-page .ind-gallery-p1-hero-content h1 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(55px, 7vw, 86px);

    line-height: .93;

    font-weight: 700;

    letter-spacing: -4px;

}


.ind-gallery-page .ind-gallery-p1-hero-content h1 strong {

    display: block;

    color: var(--ig1-gold-light);

    font-weight: 800;

}


.ind-gallery-page .ind-gallery-p1-hero-content>p {

    max-width: 580px;

    margin: 30px 0 0;

    color: rgba(255, 255, 255, .64);

    font-size: 14px;

    line-height: 1.9;

}


.ind-gallery-page .ind-gallery-p1-hero-meta {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 38px;

}


.ind-gallery-page .ind-gallery-p1-hero-meta span {

    color: rgba(255, 255, 255, .38);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-hero-meta span:first-child {

    color: var(--ig1-gold-light);

    font-size: 14px;

}


.ind-gallery-page .ind-gallery-p1-hero-meta div {

    width: 45px;

    height: 1px;

    background: rgba(229, 189, 91, .35);

}


.ind-gallery-page .ind-gallery-p1-hero-number {

    position: absolute;

    right: 7%;

    bottom: 30px;

    color: rgba(255, 255, 255, .10);

    font-size: 155px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -14px;

}


/* =========================================================
   SECTION 01
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-story {

    padding: 40px 0 40px;

    background: #ffffff;

}


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

.ind-gallery-page .ind-gallery-p1-story-heading {

    display: grid;

    grid-template-columns: .35fr 1fr;

    gap: 65px;

    margin-bottom: 48px;

}


.ind-gallery-page .ind-gallery-p1-story-index {

    display: flex;

    align-items: center;

    align-self: start;

    gap: 14px;

    padding-top: 8px;

    color: var(--ig1-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.4px;

}


.ind-gallery-page .ind-gallery-p1-story-index span {

    font-size: 24px;

    letter-spacing: -1px;

}


.ind-gallery-page .ind-gallery-p1-story-index div {

    width: 25px;

    height: 1px;

    background: var(--ig1-gold);

}


.ind-gallery-page .ind-gallery-p1-story-title h2 {

    max-width: 700px;

    margin: 0;

    color: var(--ig1-navy);

    font-size: 45px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.ind-gallery-page .ind-gallery-p1-story-title h2 strong {

    color: var(--ig1-gold);

}


.ind-gallery-page .ind-gallery-p1-story-title p {

    max-width: 650px;

    margin: 18px 0 0;

    color: var(--ig1-muted);

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   PROJECT IMAGE GALLERY
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-project-gallery {

    display: grid;

    grid-template-columns:
        1.5fr .75fr;

    grid-template-rows:
        250px 250px;

    gap: 14px;

}


.ind-gallery-page .ind-gallery-p1-project-main {

    position: relative;

    grid-row: span 2;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-project-main img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

}


.ind-gallery-page .ind-gallery-p1-project-main:hover img {

    transform: scale(1.06);

}


.ind-gallery-page .ind-gallery-p1-image-shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 35%,
            rgba(3, 16, 22, .82));

}


.ind-gallery-page .ind-gallery-p1-image-caption {

    position: absolute;

    left: 25px;

    right: 25px;

    bottom: 24px;

}


.ind-gallery-page .ind-gallery-p1-image-caption span {

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.6px;

}


.ind-gallery-page .ind-gallery-p1-image-caption h3 {

    max-width: 350px;

    margin: 6px 0 0;

    color: #ffffff;

    font-size: 24px;

    line-height: 1.15;

    font-weight: 800;

}


/* =========================================================
   PROJECT SIDE IMAGES
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-project-side {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-project-side img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;

}


.ind-gallery-page .ind-gallery-p1-project-side:hover img {

    transform: scale(1.07);

}


.ind-gallery-page .ind-gallery-p1-small-caption {

    position: absolute;

    left: 16px;

    right: 16px;

    bottom: 15px;

    padding: 15px;

    border: 1px solid rgba(255, 255, 255, .16);

    border-radius: 8px;

    background: rgba(4, 17, 23, .62);

    backdrop-filter: blur(7px);

}


.ind-gallery-page .ind-gallery-p1-small-caption span {

    display: block;

    margin-bottom: 4px;

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.2px;

}


.ind-gallery-page .ind-gallery-p1-small-caption strong {

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

}


/* =========================================================
   STORY FOOTER
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-story-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

    margin-top: 17px;

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

}


.ind-gallery-page .ind-gallery-p1-story-footer span {

    color: var(--ig1-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-story-footer p {

    margin: 0;

    color: #9aa5aa;

    font-size: 10px;

}


/* =========================================================
   SECTION 02
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-site {

    padding: 40px 0;

    background:
        linear-gradient(180deg,
            #f4f7f8,
            #eef2f3);

}


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

.ind-gallery-page .ind-gallery-p1-site-heading {

    display: grid;

    grid-template-columns: .25fr 1fr .65fr;

    gap: 45px;

    align-items: end;

    margin-bottom: 45px;

}


.ind-gallery-page .ind-gallery-p1-site-number {

    color: rgba(16, 38, 48, .09);

    font-size: 80px;

    line-height: .8;

    font-weight: 900;

    letter-spacing: -5px;

}


.ind-gallery-page .ind-gallery-p1-section-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: var(--ig1-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.7px;

}


.ind-gallery-page .ind-gallery-p1-section-label span {

    width: 25px;

    height: 1px;

    background: var(--ig1-gold);

}


.ind-gallery-page .ind-gallery-p1-site-heading h2 {

    margin: 0;

    color: var(--ig1-navy);

    font-size: 42px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.2px;

}


.ind-gallery-page .ind-gallery-p1-site-heading h2 strong {

    color: var(--ig1-gold);

}


.ind-gallery-page .ind-gallery-p1-site-heading>p {

    margin: 0;

    color: var(--ig1-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   SITE GALLERY
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-site-gallery {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    grid-template-rows:
        260px 260px 190px;

    gap: 14px;

}


.ind-gallery-page .ind-gallery-p1-site-large {

    position: relative;

    grid-row: span 2;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-site-large img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

}


.ind-gallery-page .ind-gallery-p1-site-large:hover img {

    transform: scale(1.06);

}


.ind-gallery-page .ind-gallery-p1-site-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: flex-end;

    flex-direction: column;

    padding: 25px;

    background:
        linear-gradient(180deg,
            transparent 35%,
            rgba(3, 16, 22, .85));

}


.ind-gallery-page .ind-gallery-p1-site-overlay span {

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-site-overlay h3 {

    max-width: 360px;

    margin: 6px 0 0;

    color: #ffffff;

    font-size: 23px;

    line-height: 1.15;

    font-weight: 800;

}


/* =========================================================
   SITE SMALL IMAGES
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-site-small {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-site-small img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;

}


.ind-gallery-page .ind-gallery-p1-site-small:hover img {

    transform: scale(1.07);

}


.ind-gallery-page .ind-gallery-p1-site-small-info {

    position: absolute;

    left: 14px;

    right: 14px;

    bottom: 14px;

    padding: 14px;

    border-radius: 7px;

    background: rgba(5, 20, 27, .68);

    backdrop-filter: blur(7px);

}


.ind-gallery-page .ind-gallery-p1-site-small-info span {

    display: block;

    margin-bottom: 3px;

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


.ind-gallery-page .ind-gallery-p1-site-small-info strong {

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

}


/* =========================================================
   SITE WIDE IMAGE
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-site-wide {

    position: relative;

    grid-column: span 2;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-site-wide img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

}


.ind-gallery-page .ind-gallery-p1-site-wide:hover img {

    transform: scale(1.05);

}


.ind-gallery-page .ind-gallery-p1-site-wide::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(3, 16, 22, .75),
            transparent 70%);

}


.ind-gallery-page .ind-gallery-p1-site-wide-info {

    position: absolute;

    z-index: 2;

    left: 25px;

    top: 50%;

    transform: translateY(-50%);

}


.ind-gallery-page .ind-gallery-p1-site-wide-info span {

    display: block;

    margin-bottom: 5px;

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-site-wide-info strong {

    color: #ffffff;

    font-size: 18px;

    font-weight: 800;

}


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

@media (max-width: 900px) {

    .ind-gallery-page .ind-gallery-p1-story-heading {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .ind-gallery-page .ind-gallery-p1-site-heading {

        grid-template-columns: .2fr 1fr;

    }


    .ind-gallery-page .ind-gallery-p1-site-heading>p {

        grid-column: 2;

    }

}


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

@media (max-width: 650px) {

    .ind-gallery-page .ind-gallery-p1-container {

        width: calc(100% - 30px);

    }


    /* HERO */

    .ind-gallery-page .ind-gallery-p1-hero {

        min-height: 540px;

    }


    .ind-gallery-page .ind-gallery-p1-hero-content {

        padding: 95px 0 75px;

    }


    .ind-gallery-page .ind-gallery-p1-hero-content h1 {

        font-size: 43px;

        letter-spacing: -2px;

    }


    .ind-gallery-page .ind-gallery-p1-hero-content>p {

        font-size: 14px;

        line-height: 1.75;

    }


    .ind-gallery-page .ind-gallery-p1-hero-number {

        right: 15px;

        font-size: 82px;

    }


    /* SECTION 01 */

    .ind-gallery-page .ind-gallery-p1-story {

        padding: 65px 0;

    }


    .ind-gallery-page .ind-gallery-p1-story-heading {

        gap: 15px;

        margin-bottom: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-story-index {

        padding-top: 0;

    }


    .ind-gallery-page .ind-gallery-p1-story-title h2 {

        font-size: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-project-gallery {

        grid-template-columns: 1fr;

        grid-template-rows:
            270px 190px 190px;

    }


    .ind-gallery-page .ind-gallery-p1-project-main {

        grid-row: auto;

    }


    .ind-gallery-page .ind-gallery-p1-image-caption h3 {

        font-size: 20px;

    }


    .ind-gallery-page .ind-gallery-p1-story-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    /* SECTION 02 */

    .ind-gallery-page .ind-gallery-p1-site {

        padding: 65px 0;

    }


    .ind-gallery-page .ind-gallery-p1-site-heading {

        display: block;

        margin-bottom: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-site-number {

        display: none;

    }


    .ind-gallery-page .ind-gallery-p1-site-heading h2 {

        font-size: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-site-heading>p {

        margin-top: 15px;

        font-size: 14px;

    }


    .ind-gallery-page .ind-gallery-p1-site-gallery {

        grid-template-columns: 1fr;

        grid-template-rows:
            270px 190px 190px 214px;

    }


    .ind-gallery-page .ind-gallery-p1-site-large {

        grid-row: auto;

    }


    .ind-gallery-page .ind-gallery-p1-site-wide {

        grid-column: auto;

    }


    .ind-gallery-page .ind-gallery-p1-site-overlay h3 {

        font-size: 20px;

    }


    .ind-gallery-page .ind-gallery-p1-site-wide-info {

        left: 18px;

    }


    .ind-gallery-page .ind-gallery-p1-site-wide-info strong {

        font-size: 15px;

    }

    .ind-gallery-page .ind-gallery-p1-hero-content {

        position: relative;

        z-index: 5;

        max-width: 720px;

        max-height: 150px;

        padding: 50px 0 40px;

    }

}


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

@media (max-width: 380px) {

    .ind-gallery-page .ind-gallery-p1-hero-content h1 {

        font-size: 38px;

    }


    .ind-gallery-page .ind-gallery-p1-story-title h2,
    .ind-gallery-page .ind-gallery-p1-site-heading h2 {

        font-size: 27px;

    }

}









/* =========================================================
   SECTION 03 — ENGINEERING
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-engineering {

    padding: 40px 0;

    background: #ffffff;

}


.ind-gallery-page .ind-gallery-p1-engineering-head {

    display: grid;

    grid-template-columns: 1fr .65fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 45px;

}


.ind-gallery-page .ind-gallery-p1-engineering-title h2 {

    margin: 14px 0 0;

    color: var(--ig1-navy);

    font-size: 44px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.ind-gallery-page .ind-gallery-p1-engineering-title h2 strong {

    display: block;

    color: var(--ig1-gold);

}


.ind-gallery-page .ind-gallery-p1-engineering-copy {

    display: flex;

    align-items: flex-start;

    gap: 18px;

}


.ind-gallery-page .ind-gallery-p1-engineering-copy>span {

    color: rgba(16, 38, 48, .12);

    font-size: 48px;

    line-height: .8;

    font-weight: 900;

}


.ind-gallery-page .ind-gallery-p1-engineering-copy p {

    margin: 0;

    color: var(--ig1-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* GALLERY */

.ind-gallery-page .ind-gallery-p1-engineering-gallery {

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    grid-template-rows: 245px 245px 185px;

    gap: 14px;

}


.ind-gallery-page .ind-gallery-p1-engineering-main {

    position: relative;

    grid-row: span 2;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-engineering-main img,
.ind-gallery-page .ind-gallery-p1-engineering-small img,
.ind-gallery-page .ind-gallery-p1-engineering-wide img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

}


.ind-gallery-page .ind-gallery-p1-engineering-main:hover img,
.ind-gallery-page .ind-gallery-p1-engineering-small:hover img,
.ind-gallery-page .ind-gallery-p1-engineering-wide:hover img {

    transform: scale(1.06);

}


.ind-gallery-page .ind-gallery-p1-engineering-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 25px;

    background:
        linear-gradient(180deg,
            transparent 35%,
            rgba(4, 17, 23, .85));

}


.ind-gallery-page .ind-gallery-p1-engineering-overlay span,
.ind-gallery-page .ind-gallery-p1-engineering-wide span {

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-engineering-overlay h3 {

    margin: 6px 0 0;

    color: #ffffff;

    font-size: 23px;

    line-height: 1.15;

    font-weight: 800;

}


.ind-gallery-page .ind-gallery-p1-engineering-small {

    position: relative;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-engineering-small>div {

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 15px;

    padding: 14px;

    border-radius: 7px;

    background: rgba(5, 20, 27, .70);

    backdrop-filter: blur(7px);

}


.ind-gallery-page .ind-gallery-p1-engineering-small span {

    display: block;

    margin-bottom: 3px;

    color: var(--ig1-gold-light);

    font-size: 10px;

}


.ind-gallery-page .ind-gallery-p1-engineering-small strong {

    color: #ffffff;

    font-size: 10px;

}


.ind-gallery-page .ind-gallery-p1-engineering-wide {

    position: relative;

    grid-column: span 2;

    overflow: hidden;

    border-radius: 15px;

}


.ind-gallery-page .ind-gallery-p1-engineering-wide::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(3, 16, 22, .72),
            transparent);

}


.ind-gallery-page .ind-gallery-p1-engineering-wide>div {

    position: absolute;

    z-index: 2;

    left: 23px;

    top: 50%;

    transform: translateY(-50%);

}


.ind-gallery-page .ind-gallery-p1-engineering-wide strong {

    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 17px;

}


/* =========================================================
   SECTION 04 — SAFETY
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-safety {

    padding: 40px 0;

    background: var(--ig1-navy);

}


.ind-gallery-page .ind-gallery-p1-safety-intro {

    display: grid;

    grid-template-columns: .25fr 1fr .7fr;

    gap: 50px;

    align-items: end;

    margin-bottom: 45px;

}


.ind-gallery-page .ind-gallery-p1-safety-number {

    color: rgba(255, 255, 255, .08);

    font-size: 85px;

    line-height: .8;

    font-weight: 900;

}


.ind-gallery-page .ind-gallery-p1-safety-title h2 {

    margin: 14px 0 0;

    color: #ffffff;

    font-size: 43px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.4px;

}


.ind-gallery-page .ind-gallery-p1-safety-title h2 strong {

    color: var(--ig1-gold-light);

}


.ind-gallery-page .ind-gallery-p1-safety-intro>p {

    margin: 0;

    color: rgba(255, 255, 255, .48);

    font-size: 14px;

    line-height: 1.8;

}


/* SAFETY IMAGES */

.ind-gallery-page .ind-gallery-p1-safety-gallery {

    display: grid;

    grid-template-columns: 1.25fr .75fr;

    grid-template-rows: 260px 260px;

    gap: 14px;

}


.ind-gallery-page .ind-gallery-p1-safety-image {

    position: relative;

    overflow: hidden;

    border-radius: 14px;

}


.ind-gallery-page .ind-gallery-p1-safety-image.safety-one {

    grid-row: span 2;

}


.ind-gallery-page .ind-gallery-p1-safety-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

}


.ind-gallery-page .ind-gallery-p1-safety-image:hover img {

    transform: scale(1.06);

}


.ind-gallery-page .ind-gallery-p1-safety-caption {

    position: absolute;

    left: 17px;

    right: 17px;

    bottom: 17px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, .13);

    border-radius: 8px;

    background: rgba(5, 20, 27, .68);

    backdrop-filter: blur(8px);

}


.ind-gallery-page .ind-gallery-p1-safety-caption span {

    display: block;

    margin-bottom: 4px;

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.3px;

}


.ind-gallery-page .ind-gallery-p1-safety-caption strong {

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

}


.ind-gallery-page .ind-gallery-p1-safety-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 22px;

}


.ind-gallery-page .ind-gallery-p1-safety-bottom span {

    color: var(--ig1-gold-light);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-safety-bottom div {

    width: 35px;

    height: 1px;

    background: rgba(229, 189, 91, .35);

}


.ind-gallery-page .ind-gallery-p1-safety-bottom p {

    margin: 0;

    color: rgba(255, 255, 255, .28);

    font-size: 10px;

}


/* =========================================================
   SECTION 05 — COMPLETED PROJECTS
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-completed {

    padding: 40px 0;

    background: #ffffff;

}


.ind-gallery-page .ind-gallery-p1-completed-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 50px;

}


.ind-gallery-page .ind-gallery-p1-completed-head h2 {

    margin: 14px 0 0;

    color: var(--ig1-navy);

    font-size: 42px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -1.3px;

}


.ind-gallery-page .ind-gallery-p1-completed-head h2 strong {

    display: block;

    color: var(--ig1-gold);

}


.ind-gallery-page .ind-gallery-p1-completed-count {

    display: flex;

    align-items: flex-end;

    gap: 9px;

}


.ind-gallery-page .ind-gallery-p1-completed-count strong {

    color: var(--ig1-navy);

    font-size: 36px;

    line-height: .8;

}


.ind-gallery-page .ind-gallery-p1-completed-count span {

    color: #9aa5aa;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


/* PROJECT CARD */

.ind-gallery-page .ind-gallery-p1-completed-project {

    display: grid;

    grid-template-columns: 1.2fr .8fr;

    height: 250px;

    margin-bottom: 18px;

    overflow: hidden;

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

    border-radius: 15px;

    background: #ffffff;

}


.ind-gallery-page .ind-gallery-p1-completed-project.reverse {

    grid-template-columns: .8fr 1.2fr;

}


.ind-gallery-page .ind-gallery-p1-completed-project.reverse .ind-gallery-p1-completed-image {

    order: 2;

}


.ind-gallery-page .ind-gallery-p1-completed-project.reverse .ind-gallery-p1-completed-content {

    order: 1;

}


.ind-gallery-page .ind-gallery-p1-completed-image {

    overflow: hidden;

}


.ind-gallery-page .ind-gallery-p1-completed-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;

}


.ind-gallery-page .ind-gallery-p1-completed-project:hover .ind-gallery-p1-completed-image img {

    transform: scale(1.06);

}


.ind-gallery-page .ind-gallery-p1-completed-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 40px;

}


.ind-gallery-page .ind-gallery-p1-completed-content>span {

    color: var(--ig1-gold);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ind-gallery-page .ind-gallery-p1-completed-content h3 {

    margin: 14px 0 14px;

    color: var(--ig1-navy);

    font-size: 25px;

    font-weight: 800;

}


.ind-gallery-page .ind-gallery-p1-completed-content p {

    max-width: 400px;

    margin: 0;

    color: var(--ig1-muted);

    font-size: 14px;

    line-height: 1.8;

}


.ind-gallery-page .ind-gallery-p1-completed-content>div {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 18px;

    color: #7d898e;

    font-size: 10px;

    font-weight: 700;

}


.ind-gallery-page .ind-gallery-p1-completed-content>div i {

    color: var(--ig1-gold);

}


/* =========================================================
   SECTION 06 — CTA
   ========================================================= */

.ind-gallery-page .ind-gallery-p1-cta {

    position: relative;

    min-height: 250px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--ig1-deep);

}


.ind-gallery-page .ind-gallery-p1-cta-bg {

    position: absolute;

    inset: 0;

}


.ind-gallery-page .ind-gallery-p1-cta-bg img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.ind-gallery-page .ind-gallery-p1-cta-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 17, 23, .96),
            rgba(4, 17, 23, .72),
            rgba(4, 17, 23, .35));

}


.ind-gallery-page .ind-gallery-p1-cta-content {

    position: relative;

    z-index: 3;

    max-width: 1100px;

    padding: 20px 0;

}


.ind-gallery-page .ind-gallery-p1-cta-content h2 {

    margin: 15px 0 0;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -1.7px;

}


.ind-gallery-page .ind-gallery-p1-cta-content h2 strong {

    color: var(--ig1-gold-light);

}


.ind-gallery-page .ind-gallery-p1-cta-content p {

    max-width: 520px;

    margin: 20px 0 0;

    color: rgba(255, 255, 255, .55);

    font-size: 14px;

    line-height: 1.8;

}


.ind-gallery-page .ind-gallery-p1-cta-btn {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 28px;

    padding: 15px 17px;

    border: 1px solid rgba(229, 189, 91, .35);

    border-radius: 7px;

    color: #ffffff;

    background: rgba(201, 151, 39, .12);

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .8px;

}


.ind-gallery-page .ind-gallery-p1-cta-btn i {

    color: var(--ig1-gold-light);

}


.ind-gallery-page .ind-gallery-p1-cta-mark {

    position: absolute;

    right: 4%;

    bottom: 25px;

    color: rgba(255, 255, 255, .10);

    font-size: 55px;

    font-weight: 900;

    letter-spacing: 4px;

}


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

@media (max-width: 650px) {

    .ind-gallery-page .ind-gallery-p1-engineering,
    .ind-gallery-page .ind-gallery-p1-safety,
    .ind-gallery-page .ind-gallery-p1-completed {

        padding: 65px 0;

    }


    .ind-gallery-page .ind-gallery-p1-engineering-head {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .ind-gallery-page .ind-gallery-p1-engineering-title h2 {

        font-size: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-engineering-gallery {

        grid-template-columns: 1fr;

        grid-template-rows:
            270px 190px 190px 214px;

    }


    .ind-gallery-page .ind-gallery-p1-engineering-main {

        grid-row: auto;

    }


    .ind-gallery-page .ind-gallery-p1-engineering-wide {

        grid-column: auto;

    }


    .ind-gallery-page .ind-gallery-p1-safety-intro {

        display: block;

        margin-bottom: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-safety-number {

        display: none;

    }


    .ind-gallery-page .ind-gallery-p1-safety-title h2 {

        font-size: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-safety-intro>p {

        margin-top: 15px;

    }


    .ind-gallery-page .ind-gallery-p1-safety-gallery {

        grid-template-columns: 1fr;

        grid-template-rows:
            270px 190px 190px;

    }


    .ind-gallery-page .ind-gallery-p1-safety-image.safety-one {

        grid-row: auto;

    }


    .ind-gallery-page .ind-gallery-p1-completed-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

    }


    .ind-gallery-page .ind-gallery-p1-completed-head h2 {

        font-size: 30px;

    }


    .ind-gallery-page .ind-gallery-p1-completed-project,
    .ind-gallery-page .ind-gallery-p1-completed-project.reverse {

        grid-template-columns: 1fr;

    }


    .ind-gallery-page .ind-gallery-p1-completed-project.reverse .ind-gallery-p1-completed-image {

        order: 1;

    }


    .ind-gallery-page .ind-gallery-p1-completed-project.reverse .ind-gallery-p1-completed-content {

        order: 2;

    }


    .ind-gallery-page .ind-gallery-p1-completed-image {

        min-height: 230px;

    }


    .ind-gallery-page .ind-gallery-p1-completed-content {

        padding: 27px 22px;

    }


    .ind-gallery-page .ind-gallery-p1-cta {

        min-height: 430px;

    }


    .ind-gallery-page .ind-gallery-p1-cta-content {

        padding: 80px 0;

    }


    .ind-gallery-page .ind-gallery-p1-cta-content h2 {

        font-size: 36px;

    }


    .ind-gallery-page .ind-gallery-p1-cta-mark {

        display: none;

    }

}