html,
body {
     margin: 0 !important;
    padding: 0 !important;
       max-width: 100%;
    overflow-x: hidden !important;
     font-family: "Muli", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
   font-family: "Saira", sans-serif;
    font-weight: 700;
    margin: 0;
}


/* ===== RESET ONLY FOR THIS HEADER ===== */
.ophm-header *,
.ophm-header *::before,
.ophm-header *::after {
    box-sizing: border-box;
}

.ophm-header {
    width: 100%;
     position: relative;
    z-index: 9999;
    background: #ffffff;
}

/* ===== TOP BAR ===== */
.ophm-topbar {
    width: 100%;
    background: #06244d;
    color: #ffffff;
    min-height: 34px;
}

.ophm-topbar-inner {
    max-width: 1400px;
    width: 92%;
    margin: 0 auto;
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ophm-topbar-left,
.ophm-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ophm-topbar-item {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #ffffff;
    text-decoration: none;
font-family: "Muli", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;

    white-space: nowrap;
}

.ophm-topbar-item i {
    color: #f5b91e;
    font-size: 11px;
}


/* ===== MAIN NAVIGATION ===== */
.ophm-navbar {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e8edf3;
}

.ophm-navbar-inner {
    max-width: 1400px;
    width: 92%;
    min-height: 76px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* ===== LOGO ===== */
.ophm-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.ophm-logo img {
    width: 120px;
    height: auto;
    display: block;
}


/* ===== DESKTOP MENU ===== */
.ophm-nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 31px;
    font-family: "Saira", sans-serif;
    margin-left: auto;
}

.ophm-nav-link {
    position: relative;

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

    padding: 29px 0;

    color: #0a2a55;
    text-decoration: none;

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

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.ophm-nav-link:hover {
    color: #e9a900;
    transform: translateY(-1px);
}

.ophm-nav-link.ophm-active {
    color: #e9a900;
}

.ophm-nav-link.ophm-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;

    height: 2px;
    border-radius: 10px;

    background: #e9a900;
}

.ophm-nav-link i {
    font-size: 8px;
    margin-top: 1px;
}


/* ===== QUOTE BUTTON ===== */
.ophm-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 125px;
    padding: 12px 18px;

    background: #f5b91e;
    color: #06244d;

    border-radius: 5px;
    font-family: "Saira", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;

    border: 1px solid #f5b91e;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ophm-quote-btn:hover {
    background: #06244d;
    color: #ffffff;
    border-color: #06244d;

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(6, 36, 77, 0.18);
}

.ophm-quote-btn i {
    font-size: 10px;
}


/* ===== MOBILE MENU BUTTON ===== */
.ophm-mobile-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid #dce3ec;
    background: #ffffff;

    border-radius: 5px;

    color: #06244d;
    font-size: 19px;

    cursor: pointer;
}


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

@media (max-width: 1100px) {

    .ophm-navbar-inner {
        width: 94%;
        gap: 18px;
    }

    .ophm-logo img {
        width: 100px;
    }

    .ophm-nav-menu {
        gap: 19px;
    }

    .ophm-nav-link {
        font-size: 11px;
    }

    .ophm-quote-btn {
        min-width: 112px;
        padding: 11px 14px;
    }
}


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

@media (max-width: 850px) {

    /* Top bar */
    .ophm-topbar-inner {
        width: 94%;
        min-height: 32px;
        justify-content: center;
    }

    .ophm-topbar-left {
        display: none;
    }

    .ophm-topbar-right {
        width: 100%;
        justify-content: center;
        gap: 15px;
    }

    .ophm-topbar-item {
        font-size: 9px;
    }

    .ophm-topbar-item i {
        font-size: 9px;
    }


    /* Navbar */
    .ophm-navbar-inner {
        width: 94%;
        min-height: 68px;
    }

    .ophm-logo img {
        width: 100px;
    }


    /* Hide desktop navigation */
    .ophm-nav-menu {
        display: none;
    }


    /* Quote button */
    .ophm-quote-btn {
        display: none;
    }


    /* Mobile button */
    .ophm-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }


    /* Mobile navigation opened */
    .ophm-header.ophm-menu-open .ophm-nav-menu {
        position: absolute;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        margin: 0;
        padding: 10px 20px 18px;

        gap: 0;

        background: #ffffff;

        border-top: 1px solid #e9edf2;
        border-bottom: 2px solid #f5b91e;

        box-shadow: 0 12px 30px rgba(6, 36, 77, 0.12);
    }

    .ophm-header.ophm-menu-open .ophm-nav-link {
        width: 100%;
        padding: 14px 5px;

        border-bottom: 1px solid #edf0f4;

        font-size: 13px;
    }

    .ophm-header.ophm-menu-open .ophm-nav-link.ophm-active::after {
        display: none;
    }

    .ophm-header.ophm-menu-open .ophm-quote-btn {
        display: inline-flex;
        margin-top: 14px;
        width: 100%;
    }
}


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

@media (max-width: 480px) {

    .ophm-topbar-right {
        gap: 9px;
    }

    .ophm-topbar-item {
        font-size: 8px;
    }

    .ophm-topbar-item i {
        font-size: 8px;
    }

    .ophm-navbar-inner {
        min-height: 64px;
    }

    .ophm-logo img {
        width: 100px;
    }

    .ophm-mobile-toggle {
        width: 39px;
        height: 39px;
        font-size: 17px;
    }
}




.ophmhero-banner {
    position: relative;
    width: 100%;

    min-height: 500px;

    background-image:
        url("../img/banner.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;

    display: flex;
    align-items: center;
}


/* ============================================
   DARK OVERLAY
   Keeps text readable while preserving image
============================================ */

.ophmhero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 22, 49, 0.72) 0%,
            rgba(2, 22, 49, 0.42) 34%,
            rgba(2, 22, 49, 0.08) 67%,
            rgba(2, 22, 49, 0) 100%
        );

    z-index: 1;

    pointer-events: none;
}


/* ============================================
   CONTENT CONTAINER
============================================ */

.ophmhero-container {
    position: relative;

    z-index: 2;

    width: 92%;
    max-width: 1400px;

    margin: 0 auto;

    display: flex;
    align-items: center;
}


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

.ophmhero-content {
    width: 560px;
    max-width: 55%;

    padding: 70px 0;
}


/* ============================================
   EYEBROW
============================================ */

.ophmhero-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #f5b91e;

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

    letter-spacing: 1.5px;
    text-transform: uppercase;

    line-height: 1.4;
}


/* ============================================
   MAIN HEADING
============================================ */

.ophmhero-title {
    margin: 0;

    color: #ffffff;

 
    font-size: clamp(38px, 4vw, 64px);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -1.5px;

    text-transform: uppercase;
}

.ophmhero-title span {
    display: block;

    margin-top: 7px;

    color: #f5b91e;
}


/* ============================================
   SUBTITLE
============================================ */

.ophmhero-subtitle {
    margin: 18px 0 12px;

    color: #ffffff;

 
    font-size: clamp(16px, 1.5vw, 21px);

    font-weight: 700;

    line-height: 1.3;
}


/* ============================================
   DESCRIPTION
============================================ */

.ophmhero-description {
    max-width: 500px;

    margin: 0 0 24px;

    color: rgba(255, 255, 255, 0.92);

 
    font-size: 13px;

    font-weight: 400;

    line-height: 1.65;
}


/* ============================================
   BUTTON AREA
============================================ */

.ophmhero-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* ============================================
   COMMON BUTTON
============================================ */

.ophmhero-btn {
    display: inline-flex;

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

    gap: 10px;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 5px;

 
    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all 0.25s ease;
}

.ophmhero-btn i {
    font-size: 10px;
}


/* ============================================
   PRIMARY BUTTON
============================================ */

.ophmhero-btn-primary {
    background: #f5b91e;

    color: #06244d;

    border: 1px solid #f5b91e;
}

.ophmhero-btn-primary:hover {
    background: #ffffff;

    color: #06244d;

    border-color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


/* ============================================
   SECONDARY BUTTON
============================================ */

.ophmhero-btn-secondary {
    background: rgba(255, 255, 255, 0.04);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.75);
}

.ophmhero-btn-secondary:hover {
    background: #ffffff;

    color: #06244d;

    border-color: #ffffff;

    transform: translateY(-2px);
}


/* ============================================
   LARGE DESKTOP
============================================ */

@media (min-width: 1600px) {

    .ophmhero-banner {
        min-height: 560px;
    }

    .ophmhero-content {
        padding: 85px 0;
    }

    .ophmhero-description {
        font-size: 14px;
        max-width: 530px;
    }

}


/* ============================================
   LAPTOP
============================================ */

@media (max-width: 1200px) {

    .ophmhero-banner {
        min-height: 470px;
    }

    .ophmhero-container {
        width: 90%;
    }

    .ophmhero-content {
        max-width: 58%;
        padding: 60px 0;
    }

    .ophmhero-title {
        font-size: 48px;
    }

    .ophmhero-subtitle {
        font-size: 18px;
    }

}


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

@media (max-width: 900px) {

    .ophmhero-banner {
        min-height: 430px;

        background-position:
            62% center;
    }

    .ophmhero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 22, 49, 0.82) 0%,
                rgba(2, 22, 49, 0.60) 45%,
                rgba(2, 22, 49, 0.18) 100%
            );
    }

    .ophmhero-container {
        width: 92%;
    }

    .ophmhero-content {
        max-width: 65%;
        padding: 50px 0;
    }

    .ophmhero-eyebrow {
        font-size: 9px;
        letter-spacing: 1.1px;
    }

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

    .ophmhero-subtitle {
        font-size: 16px;
    }

    .ophmhero-description {
        font-size: 11px;
        max-width: 430px;
    }

    .ophmhero-btn {
        min-height: 42px;
        padding: 0 16px;
        font-size: 11px;
    }

}


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

@media (max-width: 600px) {

    .ophmhero-banner {
        min-height: 560px;

        background-position:
            68% center;
    }

    .ophmhero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 22, 49, 0.88) 0%,
                rgba(2, 22, 49, 0.70) 55%,
                rgba(2, 22, 49, 0.28) 100%
            );
    }

    .ophmhero-container {
        width: 90%;

        align-items: flex-start;
    }

    .ophmhero-content {
        width: 100%;
        max-width: 100%;

        padding:
            75px 0 45px;
    }

    .ophmhero-eyebrow {
        font-size: 8px;

        letter-spacing: 0.9px;

        margin-bottom: 10px;
    }

    .ophmhero-title {
        font-size: 37px;

        line-height: 1.02;

        letter-spacing: -0.7px;
    }

    .ophmhero-title span {
        margin-top: 5px;
    }

    .ophmhero-subtitle {
        margin-top: 16px;

        font-size: 15px;

        line-height: 1.35;
    }

    .ophmhero-description {
        max-width: 350px;

        margin-top: 10px;

        font-size: 10.5px;

        line-height: 1.55;
    }

    .ophmhero-actions {
        margin-top: 18px;

        gap: 8px;
    }

    .ophmhero-btn {
        min-height: 40px;

        padding: 0 14px;

        font-size: 10px;

        gap: 7px;
    }

}


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

@media (max-width: 400px) {

    .ophmhero-banner {
        min-height: 530px;
    }

    .ophmhero-content {
        padding-top: 65px;
    }

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

    .ophmhero-subtitle {
        font-size: 14px;
    }

    .ophmhero-description {
        font-size: 10px;
    }

    .ophmhero-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .ophmhero-btn {
        width: auto;
    }

}





/* ============================================
   MAIN SECTION
============================================ */

.ophm-highlight-section {
    width: 100%;
    position: relative;

 
    padding: 0 0 18px;

 }


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

.ophm-highlight-container {
    width: 92%;
    max-width: 1100px;

    margin: -30px auto 0;

    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 15px;
}


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

.ophm-highlight-card {
    min-height: 108px;

    background: #ffffff;

    border: 1px solid #edf1f5;

    border-radius: 7px;

    padding: 18px 12px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    box-shadow:
        0 5px 20px rgba(6, 36, 77, 0.09);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* ============================================
   HOVER
============================================ */

.ophm-highlight-card:hover {
    transform: translateY(-5px);

    border-color: rgba(245, 185, 30, 0.5);

    box-shadow:
        0 12px 28px rgba(6, 36, 77, 0.14);
}


/* ============================================
   ICON
============================================ */

.ophm-highlight-icon {
    width: 34px;
    height: 34px;

    margin-bottom: 8px;

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

    color: #06244d;

    font-size: 20px;

    position: relative;
}


/* Small gold accent */

.ophm-highlight-icon::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    right: -2px;
    bottom: 2px;

 
    border-radius: 50%;
}


/* ============================================
   TITLE
============================================ */

.ophm-highlight-content h3 {
    margin: 0;

    color: #06244d;

 
    font-size: 16px;

    font-weight: 700;

    line-height: 1.25;
}


/* ============================================
   DESCRIPTION
============================================ */

.ophm-highlight-content p {
    margin: 5px 0 0;

    color: #637084;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;
}


/* ============================================
   LARGE DESKTOP
============================================ */

@media (min-width: 1500px) {

    .ophm-highlight-container {
        gap: 18px;
    }

    .ophm-highlight-card {
        min-height: 118px;

        padding: 20px 15px;
    }

    .ophm-highlight-icon {
        width: 38px;
        height: 38px;

        font-size: 22px;

        margin-bottom: 9px;
    }

    .ophm-highlight-content h3 {
        font-size: 13px;
    }

    .ophm-highlight-content p {
        font-size: 10px;
    }

}


/* ============================================
   LAPTOP
============================================ */

@media (max-width: 1200px) {

    .ophm-highlight-container {
        width: 94%;
        gap: 10px;
    }

    .ophm-highlight-card {
        min-height: 100px;

        padding: 14px 8px;
    }

    .ophm-highlight-icon {
        font-size: 18px;

        margin-bottom: 6px;
    }

    .ophm-highlight-content h3 {
        font-size: 10px;
    }

    .ophm-highlight-content p {
        font-size: 8px;
    }

}


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

@media (max-width: 900px) {

    .ophm-highlight-section {
        padding-bottom: 15px;
    }

    .ophm-highlight-container {
        width: 92%;

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

        gap: 12px;

        margin-top: -25px;
    }

    .ophm-highlight-card {
        min-height: 105px;
    }

    .ophm-highlight-card:nth-child(4) {
        grid-column: 1 / 2;
    }

    .ophm-highlight-card:nth-child(5) {
        grid-column: 2 / 3;
    }

}


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

@media (max-width: 600px) {

    .ophm-highlight-container {
        width: 92%;

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

        gap: 10px;

        margin-top: -20px;
    }

    .ophm-highlight-card {
        min-height: 100px;

        padding: 14px 8px;

        border-radius: 6px;
    }

    .ophm-highlight-icon {
        width: 30px;
        height: 30px;

        font-size: 18px;

        margin-bottom: 6px;
    }

    .ophm-highlight-icon::after {
        width: 6px;
        height: 6px;
    }

    .ophm-highlight-content h3 {
        font-size: 10px;

        line-height: 1.3;
    }

    .ophm-highlight-content p {
        font-size: 8px;

        line-height: 1.25;
    }

}


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

@media (max-width: 380px) {

    .ophm-highlight-container {
        width: 94%;

        gap: 8px;
    }

    .ophm-highlight-card {
        min-height: 92px;

        padding: 12px 5px;
    }

    .ophm-highlight-icon {
        width: 27px;
        height: 27px;

        font-size: 16px;

        margin-bottom: 5px;
    }

    .ophm-highlight-content h3 {
        font-size: 9px;
    }

    .ophm-highlight-content p {
        font-size: 7.5px;
    }

}




/* ==========================================
   MAIN SECTION
========================================== */

.ophm-about-section {
    width: 100%;
    background: #ffffff;

    overflow: hidden;

 }


/* ==========================================
   MAIN WRAPPER
========================================== */

.ophm-about-wrapper {
    width: 100%;
    min-height: 390px;

    display: flex;
    align-items: stretch;

    position: relative;
}


/* ==========================================
   LEFT CONTENT
========================================== */

.ophm-about-content {
    width: 55%;

    padding: 55px 5% 55px 7%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    z-index: 3;

    background: #ffffff;
}


/* ==========================================
   SMALL LABEL
========================================== */

.ophm-about-label {
    display: block;

    margin-bottom: 8px;

    color: #e8a900;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ==========================================
   HEADING
========================================== */

.ophm-about-title {
    margin: 0 0 17px;

    color: #06244d;

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

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.8px;
}


/* ==========================================
   PARAGRAPHS
========================================== */

.ophm-about-text {
    max-width: 620px;

    margin: 0 0 11px;

    color: #526174;

    font-size: 15px;
    text-align: justify;

    font-weight: 400;

    line-height: 1.65;
}


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

.ophm-about-button {
    width: fit-content;

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

    gap: 9px;

    margin-top: 12px;

    padding: 12px 20px;

    background: #f5b91e;

    color: #06244d;

    border: 1px solid #f5b91e;

    border-radius: 4px;

    text-decoration: none;

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

    transition:
        all 0.25s ease;
}

.ophm-about-button i {
    font-size: 9px;
}

.ophm-about-button:hover {
    background: #06244d;

    color: #ffffff;

    border-color: #06244d;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(6, 36, 77, 0.18);
}


/* ==========================================
   RIGHT IMAGE AREA
========================================== */

.ophm-about-image {
    width: 45%;

    min-height: 390px;

    position: relative;

    overflow: hidden;

    background: #06244d;

    /*
       Diagonal left edge
    */
    clip-path: polygon(
        17% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}


/* ==========================================
   GOLD DIAGONAL ACCENT
========================================== */

.ophm-about-image::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    left: 3%;

    width: 18px;
    height: 100%;

 
    clip-path: polygon(
        65% 0,
        100% 0,
        35% 100%,
        0 100%
    );
}


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

.ophm-about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.6s ease;
}


/* ==========================================
   IMAGE HOVER
========================================== */

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


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1200px) {

    .ophm-about-content {
        width: 56%;

        padding:
            50px 4% 50px 6%;
    }

    .ophm-about-image {
        width: 44%;

        min-height: 360px;
    }

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

    .ophm-about-text {
        font-size: 12px;

        max-width: 550px;
    }

}


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

@media (max-width: 900px) {

    .ophm-about-wrapper {
        min-height: 340px;
    }

    .ophm-about-content {
        width: 55%;

        padding:
            40px 4% 40px 5%;
    }

    .ophm-about-image {
        width: 45%;

        min-height: 340px;

        clip-path: polygon(
            12% 0,
            100% 0,
            100% 100%,
            0 100%
        );
    }

    .ophm-about-image::before {
        left: 2%;
        width: 14px;
    }

    .ophm-about-label {
        font-size: 9px;
    }

    .ophm-about-title {
        font-size: 27px;

        line-height: 1.12;

        margin-bottom: 13px;
    }

    .ophm-about-text {
        font-size: 12px;

        line-height: 1.55;

        margin-bottom: 8px;
    }

    .ophm-about-button {
        margin-top: 7px;

        padding: 10px 15px;

        font-size: 10px;
    }

}


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

@media (max-width: 650px) {

    .ophm-about-wrapper {
        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    /* CONTENT */

    .ophm-about-content {
        width: 100%;

        padding:
            42px 7% 35px;

        order: 1;
    }


    /* IMAGE */

    .ophm-about-image {
        width: 100%;

        height: 280px;

        min-height: 280px;

        order: 2;

        clip-path: none;
    }


    /* GOLD DIAGONAL */

    .ophm-about-image::before {
        top: 0;
        left: 0;

        width: 100%;
        height: 12px;

        clip-path: polygon(
            0 0,
            100% 0,
            98% 100%,
            0 100%
        );
    }


    .ophm-about-label {
        font-size: 9px;

        letter-spacing: 0.8px;

        margin-bottom: 8px;
                margin-top: 15px;
    }


    .ophm-about-title {
        font-size: 28px;

        line-height: 1.12;

        letter-spacing: -0.4px;

        margin-bottom: 15px;
    }


    .ophm-about-text {
        max-width: 100%;

        font-size: 12px;

        line-height: 1.65;

        margin-bottom: 10px;
    }


    .ophm-about-button {
        margin-top: 10px;

        padding: 11px 17px;

        font-size: 10px;
    }

}


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

@media (max-width: 400px) {

    .ophm-about-content {
        padding:
            35px 6% 30px;
    }

    .ophm-about-title {
        font-size: 24px;
    }

    .ophm-about-text {
        font-size: 12px;
    }

    .ophm-about-image {
        height: 235px;
        min-height: 235px;
    }

}




/* =====================================================
   MAIN SECTION
===================================================== */

.ophm-products-section {
    width: 100%;

    padding: 55px 0 48px;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #eef6fc 100%
        );

 
    overflow: hidden;
}


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

.ophm-products-container {
    width: 92%;
    max-width: 1150px;

    margin: 0 auto;
}


/* =====================================================
   HEADING AREA
===================================================== */

.ophm-products-heading {
    width: 100%;

    text-align: center;

    margin: 0 auto 28px;
}


/* SMALL LABEL */

.ophm-products-label {
    display: block;

    margin-bottom: 5px;

    color: #e7a900;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* MAIN TITLE */

.ophm-products-title {
    margin: 0;

    color: #06244d;

 
    font-size: clamp(25px, 2.6vw, 38px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


/* DESCRIPTION */

.ophm-products-description {
    max-width: 700px;

    margin: 8px auto 0;

    color: #617083;

    font-size: 15px;

    line-height: 1.55;

    font-weight: 400;
}


/* =====================================================
   PRODUCT GRID
===================================================== */

.ophm-products-grid {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 13px;

    width: 100%;
}


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

.ophm-products-card {

    display: block;

    width: 100%;

    background: #ffffff;

    border-radius: 6px;

    overflow: hidden;

    text-decoration: none;

    border: 1px solid #e6edf4;

    box-shadow:
        0 3px 12px rgba(6, 36, 77, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* HOVER */

.ophm-products-card:hover {

    transform: translateY(-5px);

    border-color: #f5b91e;

    box-shadow:
        0 12px 25px rgba(6, 36, 77, 0.13);
}


/* =====================================================
   PRODUCT IMAGE
===================================================== */

.ophm-products-image {

    width: 100%;

    aspect-ratio: 1.25 / 1;

    overflow: hidden;

    background: #eaf2f8;
}


.ophm-products-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.45s ease;
}


/* IMAGE HOVER */

.ophm-products-card:hover
.ophm-products-image img {

    transform: scale(1.07);
}


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

.ophm-products-card h3 {

    min-height: 34px;

    display: flex;

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

    margin: 0;

    padding: 7px 5px 8px;

    color: #06244d;

 
    font-size: 13px;

    font-weight: 700;

    line-height: 1.15;

    text-align: center;
}


.ophm-products-card h3 span {

    display: inline;
}


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

.ophm-products-button-wrap {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 28px;
}


.ophm-products-button {

    display: inline-flex;

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

    gap: 9px;

    min-height: 43px;

    padding: 0 22px;

    background: #f5b91e;

    color: #06244d;

    border: 1px solid #f5b91e;

    border-radius: 5px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition:
        all 0.25s ease;
}


.ophm-products-button i {

    font-size: 13px;

}


.ophm-products-button:hover {

    background: #06244d;

    border-color: #06244d;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(6, 36, 77, 0.18);
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1500px) {

    .ophm-products-section {

        padding-top: 65px;
        padding-bottom: 55px;

    }

    .ophm-products-grid {

        gap: 16px;

    }

    .ophm-products-card h3 {

        font-size: 15px;

        min-height: 38px;

    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .ophm-products-container {

        width: 94%;

    }

    .ophm-products-grid {

        gap: 10px;

    }

    .ophm-products-card h3 {

        font-size: 15px;

    }

    .ophm-products-description {

        font-size: 12px;

    }

}


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

@media (max-width: 900px) {

    .ophm-products-section {

        padding:
            45px 0 42px;

    }

    .ophm-products-container {

        width: 92%;

    }

    .ophm-products-heading {

        margin-bottom: 23px;

    }

    .ophm-products-grid {

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

        gap: 12px;

    }

    .ophm-products-card h3 {

        font-size: 15px;

    }

    .ophm-products-description {

        max-width: 600px;

    }

}


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

@media (max-width: 600px) {

    .ophm-products-section {

        padding:
            38px 0 38px;

    }

    .ophm-products-container {

        width: 92%;

    }

    .ophm-products-heading {

        margin-bottom: 20px;

    }

    .ophm-products-label {

        font-size: 8px;

        letter-spacing: 1px;

    }

    .ophm-products-title {

        font-size: 23px;

        line-height: 1.18;

    }

    .ophm-products-description {

        margin-top: 7px;

        font-size: 12px;

        line-height: 1.55;

    }

    .ophm-products-grid {

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

        gap: 10px;

    }

    .ophm-products-card {

        border-radius: 5px;

    }

    .ophm-products-image {

        aspect-ratio: 1.22 / 1;

    }

    .ophm-products-card h3 {

        min-height: 34px;

        padding:
            7px 4px;

        font-size: 15px;

        line-height: 1.2;

    }

    .ophm-products-button-wrap {

        margin-top: 22px;

    }

    .ophm-products-button {

        min-height: 40px;

        padding: 0 18px;

        font-size: 13px;

    }

}


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

@media (max-width: 380px) {

    .ophm-products-container {

        width: 94%;

    }

    .ophm-products-grid {

        gap: 8px;

    }

    .ophm-products-title {

        font-size: 21px;

    }

    .ophm-products-description {

        font-size: 12px;

    }

    .ophm-products-card h3 {

        font-size: 15px;

        min-height: 32px;

    }

}




/* =====================================================
   MAIN SECTION
===================================================== */

.ophm-featured-section {

    width: 100%;

    overflow: hidden;

    background: #06244d;

 }


/* =====================================================
   MAIN WRAPPER
===================================================== */

.ophm-featured-wrapper {

    width: 100%;

    min-height: 430px;

    display: flex;

    position: relative;
}


/* =====================================================
   LEFT IMAGE
===================================================== */

.ophm-featured-image {

    width: 48%;

    min-height: 430px;

    position: relative;

    overflow: hidden;

    z-index: 1;
}


/* IMAGE */

.ophm-featured-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.7s ease;
}


/* IMAGE HOVER */

.ophm-featured-wrapper:hover
.ophm-featured-image img {

    transform: scale(1.04);

}


/* =====================================================
   DIAGONAL TRANSITION
===================================================== */

.ophm-featured-image::after {

    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    right: -1px;

    width: 115px;
    height: 100%;

    background: #06244d;

    clip-path: polygon(
        72% 0,
        100% 0,
        100% 100%,
        0 100%
    );

}


/* GOLD ACCENT
===================================================== */

.ophm-featured-image::before {

    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    right: 55px;

    width: 20px;
    height: 100%;

 
    clip-path: polygon(
        45% 0,
        100% 0,
        55% 100%,
        0 100%
    );

}


/* =====================================================
   RIGHT CONTENT
===================================================== */

.ophm-featured-content {

    width: 52%;

    min-height: 430px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #06244d 0%,
            #052b59 100%
        );

    color: #ffffff;

    position: relative;

    z-index: 2;
}


/* =====================================================
   CONTENT INNER
===================================================== */

.ophm-featured-inner {

    width: 100%;

    max-width: 650px;

    padding:
        55px 7% 55px 4%;

}


/* =====================================================
   LABEL
===================================================== */

.ophm-featured-label {

    display: block;

    margin-bottom: 7px;

    color: #f5b91e;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =====================================================
   TITLE
===================================================== */

.ophm-featured-title {

    margin: 0 0 12px;

    color: #ffffff;

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

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.5px;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.ophm-featured-description {

    max-width: 570px;

    margin: 0 0 18px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.55;
}


/* =====================================================
   FEATURES GRID
===================================================== */

.ophm-featured-features {

    width: 100%;

    display: grid;

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

    column-gap: 30px;

    row-gap: 9px;

    margin-bottom: 22px;
}


/* =====================================================
   FEATURE ITEM
===================================================== */

.ophm-featured-feature {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.35;
}


/* =====================================================
   CHECK ICON
===================================================== */

.ophm-featured-check {

    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    display: flex;

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

    border-radius: 50%;

    background: #f5b91e;

    color: #06244d;

    font-size: 8px;
}


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

.ophm-featured-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 43px;

    padding: 0 21px;

    background: #f5b91e;

    color: #06244d;

    border: 1px solid #f5b91e;

    border-radius: 4px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition:
        all 0.25s ease;
}


.ophm-featured-button i {

    font-size: 8px;

}


.ophm-featured-button:hover {

    background: #ffffff;

    color: #06244d;

    border-color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1500px) {

    .ophm-featured-wrapper {

        min-height: 470px;

    }

    .ophm-featured-image {

        min-height: 470px;

    }

    .ophm-featured-content {

        min-height: 470px;

    }

    .ophm-featured-inner {

        padding-left: 5%;

    }

    .ophm-featured-description {

        font-size: 13px;

    }

    .ophm-featured-feature {

        font-size: 13px;

    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .ophm-featured-wrapper {

        min-height: 400px;

    }

    .ophm-featured-image {

        min-height: 400px;

    }

    .ophm-featured-content {

        min-height: 400px;

    }

    .ophm-featured-inner {

        padding:
            45px 6% 45px 3%;

    }

    .ophm-featured-title {

        font-size: 32px;

    }

    .ophm-featured-description {

        font-size: 13px;

    }

    .ophm-featured-feature {

        font-size: 13px;

    }

}


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

@media (max-width: 900px) {

    .ophm-featured-wrapper {

        min-height: 360px;

    }

    .ophm-featured-image {

        width: 46%;

        min-height: 360px;

    }

    .ophm-featured-content {

        width: 54%;

        min-height: 360px;

    }

    .ophm-featured-image::after {

        width: 80px;

    }

    .ophm-featured-image::before {

        right: 40px;

        width: 15px;

    }

    .ophm-featured-inner {

        padding:
            35px 5% 35px 2%;

    }

    .ophm-featured-label {

        font-size: 8px;

    }

    .ophm-featured-title {

        font-size: 25px;

    }

    .ophm-featured-description {

        font-size: 13px;

        margin-bottom: 13px;

    }

    .ophm-featured-features {

        gap: 7px 15px;

        margin-bottom: 16px;

    }

    .ophm-featured-feature {

        font-size: 13px;

        gap: 6px;

    }

    .ophm-featured-check {

        width: 14px;
        height: 14px;

        flex-basis: 14px;

        font-size: 6px;

    }

    .ophm-featured-button {

        min-height: 38px;

        padding: 0 15px;

        font-size: 13px;

    }

}


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

@media (max-width: 650px) {

    .ophm-featured-wrapper {

        flex-direction: column;

        min-height: auto;

    }


    /* IMAGE */

    .ophm-featured-image {

        width: 100%;

        height: 270px;

        min-height: 270px;

        order: 1;

    }


    /* Remove desktop diagonal */

    .ophm-featured-image::after {

        display: none;

    }


    /* Gold top accent */

    .ophm-featured-image::before {

        top: auto;

        bottom: 0;

        left: 0;
        right: auto;

        width: 100%;

        height: 10px;

        clip-path: none;

    }


    /* CONTENT */

    .ophm-featured-content {

        width: 100%;

        min-height: auto;

        order: 2;

    }


    .ophm-featured-inner {

        max-width: none;

        padding:
            38px 7% 40px;

    }


    .ophm-featured-label {

        font-size: 8px;

        letter-spacing: 1px;

    }


    .ophm-featured-title {

        font-size: 27px;

        line-height: 1.12;

        margin-bottom: 12px;

    }


    .ophm-featured-description {

        max-width: 100%;

        font-size: 13px;

        line-height: 1.6;

    }


    .ophm-featured-features {

        grid-template-columns: 1fr;

        row-gap: 9px;

        margin-top: 18px;

        margin-bottom: 21px;

    }


    .ophm-featured-feature {

        font-size: 13px;

    }


    .ophm-featured-button {

        min-height: 42px;

        padding: 0 17px;

        font-size: 13px;

    }

}


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

@media (max-width: 400px) {

    .ophm-featured-image {

        height: 230px;

        min-height: 230px;

    }

    .ophm-featured-inner {

        padding:
            32px 6% 35px;

    }

    .ophm-featured-title {

        font-size: 24px;

    }

    .ophm-featured-description {

        font-size: 13px;

    }

    .ophm-featured-feature {

        font-size: 13px;

    }

}
/* =====================================================
   MAIN SECTION
===================================================== */

.ophm-network-section {

    width: 100%;

    padding: 65px 0 55px;

    background:
        linear-gradient(
            180deg,
            #f8fbfe 0%,
            #eef5fa 100%
        );

 
    overflow: hidden;
}


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

.ophm-network-container {

    width: 92%;

    max-width: 1100px;

    margin: 0 auto;

    position: relative;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.ophm-network-heading {

    width: 100%;

    text-align: center;

    margin-bottom: 48px;
}


/* LABEL */

.ophm-network-label {

    display: block;

    margin-bottom: 7px;

    color: #e4a900;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* TITLE */

.ophm-network-title {

    margin: 0;

    color: #06244d;

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

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.5px;
}


/* INTRO */

.ophm-network-intro {

    max-width: 680px;

    margin: 10px auto 0;

    color: #68788a;

    font-size: 15px;

    line-height: 1.6;
}


/* =====================================================
   NETWORK MAP
===================================================== */

.ophm-network-map {

    width: 100%;

    min-height: 275px;

    display: grid;

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

    gap: 35px;

    position: relative;

    align-items: start;
}


/* =====================================================
   CONNECTING LINE
===================================================== */

.ophm-network-line {

    position: absolute;

    left: 16.5%;

    right: 16.5%;

    top: 34px;

    height: 2px;

    background: #d7e0e8;

    z-index: 1;

    overflow: hidden;
}


/* GOLD PROGRESS LINE */

.ophm-network-line-progress {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #f5b91e,
            #e5a600
        );
}


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

.ophm-network-location {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* =====================================================
   MARKER
===================================================== */

.ophm-network-marker {

    width: 68px;
    height: 68px;

    position: relative;

    display: flex;

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

    border-radius: 50%;

    background: #06244d;

    border: 5px solid #ffffff;

    box-shadow:
        0 5px 18px rgba(6, 36, 77, 0.18);

    color: #f5b91e;

    font-size: 20px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


/* NUMBER */

.ophm-network-marker span {

    position: absolute;

    top: -5px;
    right: -8px;

    width: 21px;
    height: 21px;

    display: flex;

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

    border-radius: 50%;

    background: #f5b91e;

    color: #06244d;

    font-size: 8px;

    font-weight: 800;
}


/* HOVER */

.ophm-network-location:hover
.ophm-network-marker {

    background: #f5b91e;

    color: #06244d;

    transform: translateY(-4px);

}


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

.ophm-network-card {

    width: 100%;

    max-width: 300px;

    min-height: 95px;

    margin-top: 20px;

    padding: 20px 22px;

    background: #ffffff;

    border: 1px solid #e5ebf1;

    border-radius: 7px;

    box-shadow:
        0 7px 25px rgba(6, 36, 77, 0.07);

    text-align: center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* CARD HOVER */

.ophm-network-location:hover
.ophm-network-card {

    transform: translateY(-4px);

    border-color: rgba(245, 185, 30, 0.55);

    box-shadow:
        0 13px 30px rgba(6, 36, 77, 0.12);

}


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

.ophm-network-card-top {

    display: flex;

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

    gap: 8px;

    flex-wrap: wrap;
}


/* CITY */

.ophm-network-city {

    color: #06244d;

 
    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.5px;
}


/* STATE */

.ophm-network-state {

    padding: 3px 7px;

    background: #eef4fa;

    color: #62758a;

    border-radius: 3px;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.6px;
}


/* =====================================================
   DIVIDER
===================================================== */

.ophm-network-card-divider {

    width: 35px;

    height: 2px;

    margin: 10px auto;

    background: #f5b91e;
}


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

.ophm-network-card h3 {

    margin: 0 0 5px;

    color: #17365d;

 
    font-size: 15px;

    font-weight: 700;

    line-height: 1.3;
}


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

.ophm-network-card p {

    max-width: 270px;

    margin: 0 auto;

    color: #718094;

    font-size: 13px;

    line-height: 1.5;
}


/* =====================================================
   BOTTOM INFORMATION
===================================================== */

.ophm-network-bottom {

    width: 100%;

    max-width: 950px;

    margin: 38px auto 0;

    padding: 17px 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    background: #06244d;

    border-radius: 5px;

    box-shadow:
        0 8px 25px rgba(6, 36, 77, 0.12);
}


/* BOTTOM ICON */

.ophm-network-bottom-icon {

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

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

    border-radius: 50%;

    background: #f5b91e;

    color: #06244d;

    font-size: 13px;
}


/* BOTTOM TEXT */

.ophm-network-bottom p {

    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 10px;

    line-height: 1.55;

    text-align: left;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1500px) {

    .ophm-network-section {

        padding:
            75px 0 60px;

    }

    .ophm-network-map {

        min-height: 300px;

    }

    .ophm-network-marker {

        width: 74px;
        height: 74px;

        font-size: 22px;

    }

    .ophm-network-card {

        min-height: 155px;

        padding: 22px 25px;

    }

    .ophm-network-city {

        font-size: 17px;

    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .ophm-network-container {

        width: 94%;

    }

    .ophm-network-map {

        gap: 20px;

    }

    .ophm-network-card {

        padding:
            17px 15px;

    }

    .ophm-network-city {

        font-size: 13px;

    }

}


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

@media (max-width: 900px) {

    .ophm-network-section {

        padding:
            50px 0 45px;

    }

    .ophm-network-heading {

        margin-bottom: 38px;

    }

    .ophm-network-label {

        font-size: 8px;

    }

    .ophm-network-title {

        font-size: 27px;

    }

    .ophm-network-intro {

        font-size: 12px;

    }

    .ophm-network-map {

        gap: 12px;

    }

    .ophm-network-line {

        left: 16%;
        right: 16%;

        top: 30px;

    }

    .ophm-network-marker {

        width: 60px;
        height: 60px;

        font-size: 17px;

        border-width: 4px;

    }

    .ophm-network-card {

        margin-top: 16px;

        min-height: 135px;

        padding: 15px 10px;

    }

    .ophm-network-city {

        font-size: 11px;

    }

    .ophm-network-card h3 {

        font-size: 15px;

    }

    .ophm-network-card p {

        font-size: 13px;

    }

    .ophm-network-bottom {

        margin-top: 30px;

    }

}


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

@media (max-width: 650px) {

    .ophm-network-section {

        padding:
            42px 0 40px;

    }

    .ophm-network-container {

        width: 90%;

    }

    .ophm-network-heading {

        margin-bottom: 30px;

        text-align: left;

    }

    .ophm-network-label {

        font-size: 8px;

    }

    .ophm-network-title {

        font-size: 24px;

        line-height: 1.2;

    }

    .ophm-network-intro {

        margin-left: 0;

        font-size: 12px;

    }


    /* MOBILE MAP */

    .ophm-network-map {

        display: flex;

        flex-direction: column;

        gap: 22px;

        min-height: auto;

        padding-left: 7px;

    }


    /* VERTICAL LINE */

    .ophm-network-line {

        left: 35px;

        right: auto;

        top: 30px;

        bottom: 30px;

        width: 2px;

        height: auto;

    }

    .ophm-network-line-progress {

        width: 100%;

        height: 100%;

    }


    /* LOCATION */

    .ophm-network-location {

        width: 100%;

        display: flex;

        flex-direction: row;

        align-items: flex-start;

        gap: 15px;

    }


    /* MARKER */

    .ophm-network-marker {

        width: 58px;
        height: 58px;

        flex: 0 0 58px;

        font-size: 16px;

        border-width: 4px;

    }


    /* CARD */

    .ophm-network-card {

        width: calc(100% - 73px);

        max-width: none;

        min-height: 100px;

        margin-top: 0;

        padding: 15px;

        text-align: left;

    }


    .ophm-network-card-top {

        justify-content: flex-start;

    }


    .ophm-network-city {

        font-size: 12px;

    }


    .ophm-network-card-divider {

        margin:
            8px 0;

    }


    .ophm-network-card h3 {

        font-size: 15px;

    }


    .ophm-network-card p {

        margin: 0;

        font-size: 13px;

    }


    /* BOTTOM */

    .ophm-network-bottom {

        margin-top: 30px;

        padding: 15px;

        align-items: flex-start;

        gap: 10px;

    }

    .ophm-network-bottom-icon {

        width: 31px;
        height: 31px;

        flex: 0 0 31px;

        font-size: 11px;

    }

    .ophm-network-bottom p {

        font-size: 8.5px;

        line-height: 1.55;

    }

}


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

@media (max-width: 400px) {

    .ophm-network-container {

        width: 92%;

    }

    .ophm-network-title {

        font-size: 21px;

    }

    .ophm-network-marker {

        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 14px;

    }

    .ophm-network-line {

        left: 31px;

    }

    .ophm-network-card {

        width: calc(100% - 67px);

        padding: 13px;

    }

    .ophm-network-city {

        font-size: 11px;

    }

    .ophm-network-card h3 {

        font-size: 15px;

    }

    .ophm-network-card p {

        font-size: 13px;

    }

}
/* =====================================================
   MAIN SECTION
===================================================== */

.ophm-brand-section {

    width: 100%;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #031a38 0%,
            #06244d 48%,
            #073566 100%
        );

 
    color: #ffffff;
}


/* =====================================================
   DECORATIVE BACKGROUND
===================================================== */

.ophm-brand-section::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -260px;
    top: -260px;

    border: 1px solid rgba(245, 185, 30, 0.15);

    border-radius: 50%;

    pointer-events: none;
}


.ophm-brand-section::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -200px;
    bottom: -230px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


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

.ophm-brand-container {

    position: relative;

    z-index: 2;

    width: 92%;

    max-width: 1400px;

    min-height: 500px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 70px;

    padding: 70px 0;
}


/* =====================================================
   LEFT VISUAL
===================================================== */

.ophm-brand-visual {

    width: 40%;

    min-height: 360px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =====================================================
   GLOW
===================================================== */

.ophm-brand-glow {

    position: absolute;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(245, 185, 30, 0.18) 0%,
            rgba(245, 185, 30, 0.05) 45%,
            transparent 70%
        );

    filter: blur(2px);
}


/* =====================================================
   CIRCLE
===================================================== */

.ophm-brand-circle {

    position: relative;

    z-index: 2;

    width: 285px;
    height: 285px;

    border-radius: 50%;

    display: flex;

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

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f7f9fb 55%,
            #e8edf3 100%
        );

    border: 8px solid rgba(245, 185, 30, 0.95);

    box-shadow:
        0 0 0 12px rgba(255, 255, 255, 0.04),
        0 20px 60px rgba(0, 0, 0, 0.30);
}


/* LOGO */

.ophm-brand-circle img {
    /* width: 78%; */
    max-width: 284px;
    /* height: auto; */
    display: block;
    width: 356px;
    height: 294px;
    border-radius: 50%;
}


/* =====================================================
   POLE DECORATIVE SHAPE
===================================================== */

.ophm-brand-pole-shape {

    position: absolute;

    z-index: 3;

    width: 5px;
    height: 245px;

    left: 50%;

    bottom: 18px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #aeb8c3,
            #ffffff,
            #7e8995
        );

    opacity: 0.12;

    pointer-events: none;
}


/* =====================================================
   BADGE
===================================================== */

.ophm-brand-badge {

    position: absolute;

    z-index: 5;

    bottom: 30px;

    right: 0;

    min-width: 110px;

    padding: 10px 15px;

    background: #f5b91e;

    color: #06244d;

    border-radius: 4px;

 
    font-size: 9px;

    font-weight: 800;

    line-height: 1.35;

    letter-spacing: 0.7px;

    text-align: center;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   CONTENT
===================================================== */

.ophm-brand-content {

    width: 60%;

    max-width: 720px;
}


/* =====================================================
   LABEL
===================================================== */

.ophm-brand-label {

    display: block;

    margin-bottom: 8px;

    color: #f5b91e;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =====================================================
   TITLE
===================================================== */

.ophm-brand-title {

    margin: 0;

    color: #ffffff;

 
    font-size: clamp(38px, 4vw, 58px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: 1px;
}


/* =====================================================
   TAGLINE
===================================================== */

.ophm-brand-tagline {

    margin: 13px 0 16px;

    color: #ffffff;

 
    font-size: 22px;

    font-weight: 600;

    line-height: 1.3;
}


.ophm-brand-tagline span {

    color: #f5b91e;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.ophm-brand-description {

    max-width: 640px;

    margin: 0 0 25px;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   HIGHLIGHTS
===================================================== */

.ophm-brand-highlights {

    display: grid;

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

    gap: 12px 14px;

    margin-bottom: 28px;
}


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

.ophm-brand-highlight {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 13px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.045);

    border-radius: 5px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.ophm-brand-highlight:hover {

    background:
        rgba(255, 255, 255, 0.08);

    border-color:
        rgba(245, 185, 30, 0.45);

    transform: translateY(-3px);
}


/* =====================================================
   ICON
===================================================== */

.ophm-brand-icon {

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

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

    background: #f5b91e;

    color: #06244d;

    border-radius: 4px;

    font-size: 13px;
}


/* =====================================================
   HIGHLIGHT TEXT
===================================================== */

.ophm-brand-highlight-text h4 {

    margin: 0 0 4px;

    color: #ffffff;

 
    font-size: 15px;

    font-weight: 700;
}


.ophm-brand-highlight-text p {

    margin: 0;

    color: rgba(255, 255, 255, 0.64);

    font-size: 15px;

    line-height: 1.45;
}


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

.ophm-brand-button {

    display: inline-flex;

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

    gap: 9px;

    min-height: 44px;

    padding: 0 22px;

    background: #f5b91e;

    color: #06244d;

    border: 1px solid #f5b91e;

    border-radius: 4px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition:
        all 0.25s ease;
}


.ophm-brand-button i {

    font-size: 9px;

}


.ophm-brand-button:hover {

    background: #ffffff;

    border-color: #ffffff;

    color: #06244d;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1500px) {

    .ophm-brand-container {

        min-height: 540px;

        padding: 80px 0;

    }

    .ophm-brand-visual {

        min-height: 400px;

    }

    .ophm-brand-circle {

        width: 320px;
        height: 320px;

    }

    .ophm-brand-tagline {

        font-size: 25px;

    }

    .ophm-brand-description {

        font-size: 13px;

    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .ophm-brand-container {

        width: 94%;

        gap: 45px;

        padding: 60px 0;

    }

    .ophm-brand-circle {

        width: 250px;
        height: 250px;

    }

    .ophm-brand-visual {

        min-height: 320px;

    }

    .ophm-brand-title {

        font-size: 45px;

    }

    .ophm-brand-tagline {

        font-size: 19px;

    }

    .ophm-brand-description {

        font-size: 13px;

    }

}


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

@media (max-width: 900px) {

    .ophm-brand-container {

        width: 92%;

        gap: 30px;

        padding: 50px 0;

    }

    .ophm-brand-visual {

        width: 37%;

        min-height: 280px;

    }

    .ophm-brand-content {

        width: 63%;

    }

    .ophm-brand-circle {

        width: 210px;
        height: 210px;

        border-width: 6px;

    }

    .ophm-brand-glow {

        width: 250px;
        height: 250px;

    }

    .ophm-brand-badge {

        right: -5px;

        bottom: 20px;

        min-width: 90px;

        padding: 8px;

        font-size: 7px;

    }

    .ophm-brand-label {

        font-size: 8px;

    }

    .ophm-brand-title {

        font-size: 36px;

    }

    .ophm-brand-tagline {

        font-size: 16px;

    }

    .ophm-brand-description {

        font-size: 13px;

        line-height: 1.6;

    }

    .ophm-brand-highlights {

        gap: 8px;

    }

    .ophm-brand-highlight {

        padding: 9px;

        gap: 8px;

    }

    .ophm-brand-icon {

        width: 27px;
        height: 27px;

        flex-basis: 27px;

        font-size: 10px;

    }

    .ophm-brand-highlight-text h4 {

        font-size: 12px;

    }

    .ophm-brand-highlight-text p {

        font-size: 12px;

    }

}


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

@media (max-width: 650px) {

    .ophm-brand-container {

        width: 90%;

        min-height: auto;

        padding: 50px 0 55px;

        display: flex;

        flex-direction: column;

        gap: 35px;

    }


    /* VISUAL */

    .ophm-brand-visual {

        width: 100%;

        min-height: 270px;

    }

    .ophm-brand-circle {

        width: 230px;
        height: 230px;

        border-width: 6px;

    }

    .ophm-brand-glow {

        width: 280px;
        height: 280px;

    }

    .ophm-brand-badge {

        right: 5%;

        bottom: 10px;

    }


    /* CONTENT */

    .ophm-brand-content {

        width: 100%;

        max-width: none;

        text-align: center;

    }

    .ophm-brand-label {

        font-size: 8px;

    }

    .ophm-brand-title {

        font-size: 39px;

    }

    .ophm-brand-tagline {

        font-size: 18px;

        margin-top: 10px;

    }

    .ophm-brand-description {

        max-width: 100%;

        font-size: 13px;

        line-height: 1.65;

    }


    /* HIGHLIGHTS */

    .ophm-brand-highlights {

        grid-template-columns: 1fr;

        text-align: left;

        gap: 9px;

        margin-top: 20px;

    }

    .ophm-brand-highlight {

        padding: 12px;

    }

    .ophm-brand-highlight-text h4 {

        font-size: 12px;

    }

    .ophm-brand-highlight-text p {

        font-size: 12px;

    }


    /* BUTTON */

    .ophm-brand-button {

        min-height: 42px;

        padding: 0 19px;

        font-size: 10px;

    }

}


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

@media (max-width: 400px) {

    .ophm-brand-container {

        width: 92%;

        padding:
            42px 0 45px;

    }

    .ophm-brand-visual {

        min-height: 235px;

    }

    .ophm-brand-circle {

        width: 195px;
        height: 195px;

    }

    .ophm-brand-glow {

        width: 230px;
        height: 230px;

    }

    .ophm-brand-title {

        font-size: 33px;

    }

    .ophm-brand-tagline {

        font-size: 15px;

    }

    .ophm-brand-description {

        font-size: 13px;

    }

}


/* =====================================================
   ODISHA PIPES FOOTER
   UNIQUE PREFIX: opipes-footer-
===================================================== */


/* ==========================================
   COLOR VARIABLES
========================================== */

.opipes-footer {
    --opipes-maroon: #5A0B22;
    --opipes-maroon-dark: #430718;
    --opipes-gold: #EFAF17;
    --opipes-gold-light: #F6C84A;
    --opipes-text: #666666;
    --opipes-border: #eeeeee;

     background: #ffffff;
}


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

.opipes-footer-main {
    position: relative;

    padding: 35px 20px 55px;

    background-color: #ffffff;

    overflow: hidden;
}


/* Subtle pattern */
.opipes-footer-main::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.45;

    background-image:
        linear-gradient(
            30deg,
            rgba(90, 11, 34, 0.045) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(90, 11, 34, 0.045) 87.5%,
            rgba(90, 11, 34, 0.045)
        ),
        linear-gradient(
            150deg,
            rgba(90, 11, 34, 0.045) 12%,
            transparent 12.5%,
            transparent 87%,
            rgba(90, 11, 34, 0.045) 87.5%,
            rgba(90, 11, 34, 0.045)
        );

    background-size: 52px 30px;

    pointer-events: none;
}


/* Top gold border */
.opipes-footer-main::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        var(--opipes-maroon),
        var(--opipes-gold),
        var(--opipes-maroon)
    );
}


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

.opipes-footer-container {
    position: relative;

    z-index: 2;

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr
        1.15fr
        1.05fr;

    gap: 55px;
}


/* ==========================================
   LOGO / BRAND
========================================== */

.opipes-footer-brand {
    padding-right: 15px;
}


.opipes-footer-logo {
    display: inline-block;

    margin-bottom: 17px;
}


.opipes-footer-logo img {
    display: block;

    width: 205px;
    max-width: 100%;
    height: auto;

    object-fit: contain;
}


.opipes-footer-brand > p {
    max-width: 280px;

    margin: 0;

    color: var(--opipes-text);

    font-size: 13px;

    line-height: 1.8;
}


/* ==========================================
   SOCIAL
========================================== */

.opipes-footer-social {
    display: flex;

    align-items: center;

    gap: 9px;

    /* margin-top: 23px; */
}


.opipes-footer-social a {
    width: 42px;
    height: 42px;

    display: flex;

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

    color: #02265d;

    background: #ffffff;

    border: 1px solid #e6dce0;

    border-radius: 4px;

    font-size: 15px;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.opipes-footer-social a:hover {
    background: #02265d;

    color: #ffffff;

    border-color: var(--opipes-maroon);

    transform: translateY(-3px);
}


/* ==========================================
   COLUMN HEADING
========================================== */

.opipes-footer-column h3,
.opipes-footer-map-column h3 {
    margin: 0;

    color: #02265d;

 
    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;
}


/* Heading line */
.opipes-footer-heading-line {
    position: relative;

    width: 43px;
    height: 3px;

    margin-top: 13px;
    margin-bottom: 21px;

    background: var(--opipes-gold);
}


.opipes-footer-heading-line span {
    position: absolute;

    left: 0;
    top: 0;

    width: 28px;
    height: 3px;

    background: #02265d;
}


/* ==========================================
   QUICK LINKS
========================================== */

.opipes-footer-links {
    list-style: none;

    padding: 0;
    margin: 0;
}


.opipes-footer-links li {
    margin-bottom: 12px;
}


.opipes-footer-links a {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #637084;

    font-size: 13px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.opipes-footer-links a i {
    color: var(--opipes-gold);

    font-size: 9px;

    transition: transform 0.3s ease;
}


.opipes-footer-links a:hover {
    color: var(--opipes-maroon);

    transform: translateX(4px);
}


.opipes-footer-links a:hover i {
    transform: translateX(3px);
}


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

.opipes-footer-contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 19px;
}


.opipes-footer-contact-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;

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

    color: #02265d;

    font-size: 13px;
}


.opipes-footer-contact-text {
    padding-top: 1px;
}


.opipes-footer-contact-text p {
    margin: 0;

    color: #637084;

    font-size: 12px;

    line-height: 1.8;
}


.opipes-footer-contact-text a {
    display: block;

    margin-bottom: 4px;

    color: #637084;

    font-size: 12px;

    line-height: 1.6;

    text-decoration: none;

    transition: color 0.3s ease;
}


.opipes-footer-contact-text a:hover {
    color: var(--opipes-maroon);
}


/* ==========================================
   MAP
========================================== */

.opipes-footer-map {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: #eeeeee;

    border: 1px solid #e3e3e3;

    border-radius: 6px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.07);
}


.opipes-footer-map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


/* Map button */
.opipes-footer-map-button {
    position: absolute;

    left: 12px;
    top: 12px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    background: #ffffff;

    color: var(--opipes-maroon);

    border-radius: 3px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.12);

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;
}


/* ==========================================
   BOTTOM COPYRIGHT
========================================== */

.opipes-footer-bottom {
    background:#02265d;

    border-top: 3px solid var(--opipes-gold);

    padding: 17px 20px;
}


.opipes-footer-bottom-container {
    max-width: 1240px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.opipes-footer-copyright,
.opipes-footer-credit {
    color: rgba(255,255,255,0.85);

    font-size: 12px;
}


.opipes-footer-copyright span,
.opipes-footer-credit a {
    color: var(--opipes-gold);
}


.opipes-footer-credit a {
    font-weight: 600;

    text-decoration: none;
}


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

@media (max-width: 1050px) {

    .opipes-footer-container {
        grid-template-columns: 1fr 1fr;

        gap: 45px 40px;
    }

    .opipes-footer-map {
        height: 220px;
    }

}


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

@media (max-width: 650px) {

    .opipes-footer-main {
        padding: 55px 18px 40px;
    }


    .opipes-footer-container {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .opipes-footer-brand {
        padding-right: 0;

        text-align: center;
    }


    .opipes-footer-logo img {
        width: 185px;

        margin: 0 auto;
    }


    .opipes-footer-brand > p {
        max-width: 400px;

        margin: 0 auto;
    }


    .opipes-footer-social {
        justify-content: center;
    }


    .opipes-footer-column,
    .opipes-footer-map-column {
        text-align: left;
    }


    .opipes-footer-column h3,
    .opipes-footer-map-column h3 {
        font-size: 19px;
    }


    .opipes-footer-map {
        height: 230px;
    }


    .opipes-footer-bottom-container {
        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 8px;
    }

}


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

@media (max-width: 400px) {

    .opipes-footer-main {
        padding: 48px 15px 35px;
    }


    .opipes-footer-logo img {
        width: 165px;
    }


    .opipes-footer-brand > p {
        font-size: 12px;
    }


    .opipes-footer-map {
        height: 210px;
    }


    .opipes-footer-copyright,
    .opipes-footer-credit {
        font-size: 10px;
    }

}




.ophm-solar-section {

    width: 100%;

    padding: 75px 0 65px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f1f7fa 100%
        );

 
    overflow: hidden;
}


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

.ophm-solar-container {

    width: 92%;

    max-width: 1100px;

    margin: 0 auto;
}


/* =====================================================
   MAIN FEATURE
===================================================== */

.ophm-solar-main {

    min-height: 400px;

    display: grid;

    grid-template-columns:
        48% 52%;

    overflow: hidden;

    border-radius: 10px;

    background: #06244d;

    box-shadow:
        0 15px 45px rgba(6, 36, 77, 0.12);
}


/* =====================================================
   VISUAL
===================================================== */

.ophm-solar-visual {

    position: relative;

    min-height: 400px;

    overflow: hidden;
}


.ophm-solar-image {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.7s ease;
}


.ophm-solar-main:hover
.ophm-solar-image {

    transform: scale(1.04);
}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.ophm-solar-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 20, 42, 0.08),
            rgba(0, 20, 42, 0.32)
        );

    pointer-events: none;
}


/* =====================================================
   SOLAR BADGE
===================================================== */

.ophm-solar-visual-badge {

    position: absolute;

    left: 25px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 11px 15px;

    background:
        rgba(6, 36, 77, 0.91);

    border-left: 3px solid #f5b91e;

    border-radius: 4px;

    color: #ffffff;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.2);
}


.ophm-solar-visual-badge i {

    color: #f5b91e;

    font-size: 20px;
}


.ophm-solar-visual-badge strong {

    display: block;

    color: #ffffff;

 
    font-size: 15px;

    font-weight: 800;

    letter-spacing: 0.8px;
}


.ophm-solar-visual-badge span {

    display: block;

    margin-top: 2px;

    color: rgba(255,255,255,0.65);

    font-size: 10px;

    letter-spacing: 0.8px;
}


/* =====================================================
   CONTENT
===================================================== */

.ophm-solar-content {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 8%;

    background:
        linear-gradient(
            135deg,
            #06244d,
            #073763
        );

    color: #ffffff;
}


/* GOLD DIAGONAL */

.ophm-solar-content::before {

    content: "";

    position: absolute;

    left: -55px;
    top: 0;

    width: 90px;
    height: 100%;

    background: #f5b91e;

    clip-path:
        polygon(
            62% 0,
            100% 0,
            38% 100%,
            0 100%
        );
}


/* =====================================================
   LABEL
===================================================== */

.ophm-solar-label {

    display: block;

    margin-bottom: 8px;

    color: #f5b91e;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =====================================================
   TITLE
===================================================== */

.ophm-solar-title {

    max-width: 600px;

    margin: 0 0 15px;

    color: #ffffff;

 
    font-size: 30px;

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.6px;
}


.ophm-solar-title span {

    display: block;

    color: #f5b91e;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.ophm-solar-description {

    max-width: 570px;

    margin: 0 0 20px;

    color: rgba(255,255,255,0.73);

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   SOLAR SPEC
===================================================== */

.ophm-solar-spec {

    display: grid;

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

    gap: 9px 18px;

    margin-bottom: 25px;
}


.ophm-solar-spec-item {

    display: flex;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,0.85);

    font-size: 15px;

    line-height: 1.3;
}


.ophm-solar-spec-item i {

    color: #f5b91e;

    font-size: 15px;
}


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

.ophm-solar-button {

    width: fit-content;

    display: inline-flex;

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

    gap: 9px;

    min-height: 43px;

    padding: 0 20px;

    background: #f5b91e;

    border: 1px solid #f5b91e;

    border-radius: 4px;

    color: #06244d;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    transition:
        all 0.25s ease;
}


.ophm-solar-button i {

    font-size: 8px;
}


.ophm-solar-button:hover {

    background: #ffffff;

    border-color: #ffffff;

    color: #06244d;

    transform: translateY(-2px);

}


/* =====================================================
   FEATURE CARDS
===================================================== */

.ophm-solar-features {

    display: grid;

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

    gap: 13px;

    margin-top: 20px;
}


/* CARD */

.ophm-solar-feature-card {

    position: relative;

    min-height: 100px;

    padding: 23px 20px;

    background: #ffffff;

    border: 1px solid #e3ebf1;

    border-radius: 7px;

    box-shadow:
        0 6px 20px rgba(6,36,77,0.06);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* HOVER */

.ophm-solar-feature-card:hover {

    transform: translateY(-5px);

    border-color: #f5b91e;

    box-shadow:
        0 13px 28px rgba(6,36,77,0.11);
}


/* ICON */

.ophm-solar-feature-icon {

    width: 39px;
    height: 39px;

    display: flex;

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

    background: #eef4f8;

    color: #06244d;

    border-radius: 5px;

    font-size: 16px;

    margin-bottom: 18px;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.ophm-solar-feature-card:hover
.ophm-solar-feature-icon {

    background: #f5b91e;

    color: #06244d;
}


/* NUMBER */

.ophm-solar-feature-number {

    position: absolute;

    top: 18px;
    right: 17px;

    color: #e4ebf1;

 
    font-size: 21px;

    font-weight: 800;
}


/* TITLE */

.ophm-solar-feature-card h3 {

    margin: 0 0 7px;

    color: #06244d;

 
    font-size: 17px;

    font-weight: 700;

    line-height: 1.3;
}


/* TEXT */

.ophm-solar-feature-card p {

    max-width: 230px;

    margin: 0;

    color: #718093;

    font-size: 14px;

    line-height: 1.6;
}


/* CUSTOM CARD */

.ophm-solar-feature-custom {

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fbfc
        );
}


/* =====================================================
   BOTTOM NOTE
===================================================== */

.ophm-solar-bottom {

    margin-top: 18px;

    padding: 14px 20px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: #06244d;

    border-radius: 6px;
}


.ophm-solar-bottom-icon {

    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: flex;

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

    border-radius: 50%;

    background: #f5b91e;

    color: #06244d;

    font-size: 13px;
}


.ophm-solar-bottom-text span {

    display: block;

    margin-bottom: 2px;

    color: #f5b91e;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ophm-solar-bottom-text p {

    margin: 0;

    color: rgba(255,255,255,0.72);

    font-size: 9px;

    line-height: 1.5;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1500px) {

    .ophm-solar-section {

        padding:
            85px 0 70px;
    }

    .ophm-solar-main {

        min-height: 440px;
    }

    .ophm-solar-visual {

        min-height: 440px;
    }

    .ophm-solar-content {

        padding-left: 9%;
    }

    .ophm-solar-feature-card {

        min-height: 180px;

        padding: 26px;
    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .ophm-solar-container {

        width: 94%;
    }

    .ophm-solar-content {

        padding:
            40px 7%;
    }

    .ophm-solar-description {

        font-size: 12px;
    }

    .ophm-solar-feature-card {

        padding: 18px;
    }

}


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

@media (max-width: 900px) {

    .ophm-solar-section {

        padding:
            55px 0 50px;
    }

    .ophm-solar-main {

        grid-template-columns:
            45% 55%;

        min-height: 360px;
    }

    .ophm-solar-visual {

        min-height: 360px;
    }

    .ophm-solar-content {

        padding:
            35px 6%;
    }

    .ophm-solar-content::before {

        left: -40px;

        width: 65px;
    }

    .ophm-solar-label {

        font-size: 8px;
    }

    .ophm-solar-title {

        font-size: 28px;
    }

    .ophm-solar-description {

        font-size: 12px;
    }

    .ophm-solar-spec-item {

        font-size: 12px;
    }

    .ophm-solar-button {

        min-height: 38px;

        padding: 0 14px;

        font-size: 12px;
    }

    .ophm-solar-features {

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

}


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

@media (max-width: 650px) {

    .ophm-solar-section {

        padding:
            45px 0 42px;
    }

    .ophm-solar-container {

        width: 90%;
    }

    .ophm-solar-main {

        display: flex;

        flex-direction: column;

        min-height: auto;

        border-radius: 7px;
    }


    /* IMAGE */

    .ophm-solar-visual {

        width: 100%;

        height: 250px;

        min-height: 250px;

        order: 1;
    }


    .ophm-solar-content {

        width: 100%;

        order: 2;

        padding:
            35px 7%;
    }


    /* REMOVE DIAGONAL */

    .ophm-solar-content::before {

        top: -1px;

        left: 0;

        width: 100%;

        height: 8px;

        clip-path: none;
    }


    .ophm-solar-label {

        font-size: 8px;
    }

    .ophm-solar-title {

        font-size: 27px;

        line-height: 1.12;
    }

    .ophm-solar-description {

        font-size: 12px;

        line-height: 1.65;
    }


    /* SPEC */

    .ophm-solar-spec {

        gap: 9px;

        margin-bottom: 20px;
    }

    .ophm-solar-spec-item {

        font-size: 12px;
    }


    /* FEATURES */

    .ophm-solar-features {

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 12px;
    }

    .ophm-solar-feature-card {

        min-height: auto;

        padding: 19px;
    }

    .ophm-solar-feature-card p {

        max-width: 100%;

        font-size: 13px;
    }


    /* BOTTOM */

    .ophm-solar-bottom {

        align-items: flex-start;

        padding: 14px;

    }

    .ophm-solar-bottom-text p {

        font-size: 8px;
    }

}


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

@media (max-width: 400px) {

    .ophm-solar-container {

        width: 92%;
    }

    .ophm-solar-visual {

        height: 215px;

        min-height: 215px;
    }

    .ophm-solar-title {

        font-size: 23px;
    }

    .ophm-solar-spec {

        grid-template-columns: 1fr;
    }

    .ophm-solar-feature-card {
         margin-top: 10px;
        padding: 17px;
    }

}




.ophm-industries-section {
    position: relative;
    padding: 100px 20px;
    background: #06244D;
    overflow: hidden;
 }


/* Decorative circles */
.ophm-industries-section::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    right: -250px;
    top: -270px;

    border: 1px solid rgba(245, 185, 30, 0.16);
    border-radius: 50%;
}

.ophm-industries-section::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    left: -190px;
    bottom: -200px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}


.ophm-industries-container {
    position: relative;
    z-index: 2;

    max-width: 1100px;
    margin: 0 auto;
}


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

.ophm-industries-header {
    max-width: 760px;
    margin: 0 auto 55px;

    text-align: center;
}


.ophm-industries-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #F5B91E;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
}


.ophm-industries-label span {
    width: 28px;
    height: 2px;

    background: #F5B91E;
}


.ophm-industries-header h2 {
    margin: 0;

    color: #FFFFFF;

 
    font-size: 42px;
    line-height: 1.18;
    font-weight: 700;
}


.ophm-industries-header h2 strong {
    display: block;

    color: #F5B91E;

    font-weight: 800;
}


.ophm-industries-header p {
    max-width: 680px;

    margin: 18px auto 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;
    line-height: 1.8;
}


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

.ophm-industries-grid {
    display: grid;

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

    gap: 14px;
}


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

.ophm-industries-card {
    position: relative;

    min-height: 140px;

    padding: 28px 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.11);

    border-radius: 5px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* Gold hover glow */
.ophm-industries-card::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #F5B91E;

    transition: width 0.35s ease;
}


.ophm-industries-card:hover {
    transform: translateY(-7px);

    background: #FFFFFF;

    border-color: #F5B91E;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}


.ophm-industries-card:hover::before {
    width: 100%;
}


/* Number */
.ophm-industries-number {
    position: absolute;

    top: 14px;
    right: 16px;

    color: rgba(255, 255, 255, 0.12);

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

    transition: color 0.3s ease;
}


.ophm-industries-card:hover .ophm-industries-number {
    color: rgba(6, 36, 77, 0.08);
}


/* ==========================================
   ICON
========================================== */

.ophm-industries-icon {
    width: 55px;
    height: 55px;

    margin-bottom: 21px;

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

    background: rgba(245, 185, 30, 0.12);

    border: 1px solid rgba(245, 185, 30, 0.25);

    border-radius: 50%;

    color: #F5B91E;

    font-size: 21px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ophm-industries-card:hover .ophm-industries-icon {
    background: #06244D;

    color: #F5B91E;

    transform: scale(1.06);
}


/* ==========================================
   TITLE
========================================== */

.ophm-industries-card h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #FFFFFF;

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

    font-weight: 700;

    transition: color 0.3s ease;
}


.ophm-industries-card:hover h3 {
    color: #06244D;
}


/* Bottom line */
.ophm-industries-line {
    width: 25px;
    height: 2px;

    margin-top: 15px;

    background: #F5B91E;

    transition: width 0.3s ease;
}


.ophm-industries-card:hover .ophm-industries-line {
    width: 45px;
}


/* ==========================================
   BOTTOM STRIP
========================================== */

.ophm-industries-bottom {
    margin-top: 30px;

    padding: 20px 23px;

    display: flex;
    align-items: center;

    gap: 17px;

    background: #FFFFFF;

    border-radius: 5px;
}


.ophm-industries-bottom-icon {
    flex: 0 0 50px;

    width: 50px;
    height: 50px;

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

    background: #F5B91E;

    color: #06244D;

    border-radius: 50%;

    font-size: 18px;
}


.ophm-industries-bottom-content {
    flex: 1;
}


.ophm-industries-bottom-content span {
    display: block;

    margin-bottom: 4px;

    color: #F5B91E;

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

    letter-spacing: 2px;
}


.ophm-industries-bottom-content strong {
    display: block;

    color: #06244D;

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

    font-weight: 700;
}


/* Button */
.ophm-industries-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 13px 19px;

    background: #06244D;
    color: #FFFFFF;

    border-radius: 4px;

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

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ophm-industries-btn:hover {
    background: #F5B91E;
    color: #06244D;

    transform: translateY(-2px);
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1150px) {

    .ophm-industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


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

@media (max-width: 768px) {

    .ophm-industries-section {
        padding: 75px 18px;
    }

    .ophm-industries-header {
        margin-bottom: 40px;
    }

    .ophm-industries-header h2 {
        font-size: 34px;
    }

    .ophm-industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 13px;
    }

    .ophm-industries-card {
        min-height: 100px;
    }

    .ophm-industries-bottom {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .ophm-industries-bottom-content {
        padding-top: 2px;
    }

    .ophm-industries-btn {
        width: 100%;
    }

}


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

@media (max-width: 520px) {

    .ophm-industries-section {
        padding: 60px 15px;
    }

    .ophm-industries-header {
        margin-bottom: 32px;
    }

    .ophm-industries-label {
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .ophm-industries-label span {
        width: 20px;
    }

    .ophm-industries-header h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    .ophm-industries-header h2 strong {
        display: inline;
    }

    .ophm-industries-header p {
        font-size: 13px;
        line-height: 1.7;
    }

    .ophm-industries-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .ophm-industries-card {
        min-height: 100px;
        padding: 22px;
    }

    .ophm-industries-icon {
        width: 50px;
        height: 50px;

        margin-bottom: 16px;

        font-size: 19px;
    }

    .ophm-industries-card h3 {
        font-size: 14px;
    }

    .ophm-industries-bottom {
        padding: 18px;

        gap: 12px;
    }

    .ophm-industries-bottom-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .ophm-industries-bottom-content strong {
        font-size: 13px;
    }

    .ophm-industries-btn {
        padding: 12px 15px;
    }

}


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

@media (max-width: 360px) {

    .ophm-industries-header h2 {
        font-size: 25px;
    }

    .ophm-industries-card {
        min-height: 135px;
    }

}




/* ==========================================
   WHY CHOOSE SECTION
   UNIQUE PREFIX: ophm-why-
========================================== */

.ophm-why-section {
    position: relative;
    padding: 60px 20px;
    background: #ffffff;
    overflow: hidden;
 }


/* Subtle background detail */
.ophm-why-section::before {
    content: "";
    position: absolute;

    width: 480px;
    height: 480px;

    left: -300px;
    top: -250px;

    border: 1px solid rgba(6, 36, 77, 0.055);
    border-radius: 50%;
}


.ophm-why-container {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;

    align-items: center;

    gap: 80px;
}


/* ==========================================
   LEFT IMAGE
========================================== */

.ophm-why-image-wrap {
    position: relative;
    padding: 0 22px 22px 0;
}


.ophm-why-image {
    position: relative;

    height: 570px;

    overflow: hidden;

    border-radius: 6px;

    background: #06244D;

    box-shadow: 0 20px 55px rgba(6, 36, 77, 0.16);
}


.ophm-why-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6, 36, 77, 0.02) 45%,
            rgba(6, 36, 77, 0.35) 100%
        );

    pointer-events: none;
}


.ophm-why-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}


.ophm-why-image-wrap:hover .ophm-why-image img {
    transform: scale(1.04);
}


/* ==========================================
   GOLD CORNER
========================================== */

.ophm-why-gold-shape {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 125px;
    height: 125px;

    background: #F5B91E;

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );

    z-index: 3;
}


/* ==========================================
   PROJECT BADGE
========================================== */

.ophm-why-badge {
    position: absolute;

    left: -22px;
    bottom: 55px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 15px 19px;

    background: #06244D;

    border-left: 4px solid #F5B91E;

    box-shadow: 0 12px 30px rgba(6, 36, 77, 0.2);
}


.ophm-why-badge-icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    background: #F5B91E;

    color: #06244D;

    border-radius: 50%;

    font-size: 16px;
}


.ophm-why-badge small {
    display: block;

    color: rgba(255,255,255,0.55);

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

    letter-spacing: 2px;
}


.ophm-why-badge strong {
    display: block;

    color: #F5B91E;

 
    font-size: 15px;
    line-height: 1.2;
}


.ophm-why-badge div > span {
    display: block;

    color: #ffffff;

    font-size: 10px;

    margin-top: 2px;
}


/* ==========================================
   RIGHT CONTENT
========================================== */

.ophm-why-content {
    position: relative;
}


.ophm-why-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #F5B91E;

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

    letter-spacing: 2.5px;
}


.ophm-why-label span {
    width: 31px;
    height: 2px;

    background: #F5B91E;
}


.ophm-why-content h2 {
    max-width: 600px;

    margin: 0;

    color: #06244D;

 
    font-size: 42px;
    line-height: 1.16;

    font-weight: 700;
}


.ophm-why-content h2 strong {
    display: block;

    color: #F5B91E;

    font-weight: 800;
}


.ophm-why-intro {
    max-width: 650px;

    margin: 18px 0 30px;

    color: #637084;

    font-size: 14px;
    line-height: 1.8;
}


/* ==========================================
   POINTS GRID
========================================== */

.ophm-why-points {
    display: grid;

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

    column-gap: 25px;
    row-gap: 15px;
}


/* Point */
.ophm-why-point {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 11px 0;

    border-bottom: 1px solid #edf0f3;
}


.ophm-why-check {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

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

    margin-top: 1px;

    background: rgba(245, 185, 30, 0.14);

    color: #06244D;

    border-radius: 50%;

    font-size: 10px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.ophm-why-point:hover .ophm-why-check {
    background: #F5B91E;
    color: #06244D;
}


.ophm-why-point h3 {
    margin: 0 0 3px;

    color: #06244D;

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

    font-weight: 700;
}


.ophm-why-point p {
    margin: 0;

    color: #7a8492;

    font-size: 12px;
    line-height: 1.5;
}


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

.ophm-why-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 30px;

    padding: 14px 22px;

    background: #06244D;
    color: #ffffff;

    border-radius: 4px;

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

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ophm-why-btn:hover {
    background: #F5B91E;
    color: #06244D;

    transform: translateY(-2px);
}


/* ==========================================
   LAPTOP
========================================== */

@media (max-width: 1100px) {

    .ophm-why-container {
        gap: 50px;
    }

    .ophm-why-image {
        height: 530px;
    }

    .ophm-why-content h2 {
        font-size: 36px;
    }

    .ophm-why-points {
        column-gap: 18px;
    }

}


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

@media (max-width: 850px) {

    .ophm-why-section {
        padding: 80px 20px;
    }

    .ophm-why-container {
        grid-template-columns: 1fr;

        gap: 55px;

        max-width: 700px;
    }

    .ophm-why-image-wrap {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .ophm-why-image {
        height: 500px;
    }

    .ophm-why-content h2 {
        font-size: 36px;
    }

}


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

@media (max-width: 600px) {

    .ophm-why-section {
        padding: 60px 15px;
    }

    .ophm-why-container {
        gap: 42px;
    }

    .ophm-why-image-wrap {
        padding: 0 12px 12px 0;
    }

    .ophm-why-image {
        height: 420px;
    }

    .ophm-why-badge {
        left: -5px;
        bottom: 35px;

        padding: 12px 14px;
    }

    .ophm-why-badge-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
    }

    .ophm-why-gold-shape {
        width: 90px;
        height: 90px;
    }

    .ophm-why-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .ophm-why-label span {
        width: 23px;
    }

    .ophm-why-content h2 {
        font-size: 29px;
        line-height: 1.2;
    }

    .ophm-why-content h2 strong {
        display: inline;
    }

    .ophm-why-intro {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .ophm-why-points {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .ophm-why-point {
        padding: 12px 0;
    }

    .ophm-why-point h3 {
        font-size: 13px;
    }

    .ophm-why-point p {
        font-size: 11px;
    }

    .ophm-why-btn {
        width: 100%;
        margin-top: 25px;
    }

}


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

@media (max-width: 360px) {

    .ophm-why-image {
        height: 360px;
    }

    .ophm-why-content h2 {
        font-size: 26px;
    }

    .ophm-why-badge {
        transform: scale(0.9);
        transform-origin: left bottom;
    }

}



.ophm-boq-cta {
    position: relative;

    padding: 75px 20px;

    background: #06244D;

    overflow: hidden;

 }


/* ==========================================
   BACKGROUND DECORATION
========================================== */

.ophm-boq-cta::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -240px;
    top: -250px;

    border: 1px solid rgba(245, 185, 30, 0.18);

    border-radius: 50%;
}


.ophm-boq-cta::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -180px;
    bottom: -200px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;
}


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

.ophm-boq-container {
    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 60px;

    padding: 42px 48px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );

    border: 1px solid rgba(255,255,255,0.10);

    border-radius: 8px;
}


/* ==========================================
   SUBTLE GRID PATTERN
========================================== */

.ophm-boq-pattern {
    position: absolute;

    right: 300px;
    top: 0;

    width: 260px;
    height: 100%;

    opacity: 0.08;

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

    background-size: 28px 28px;

    pointer-events: none;
}


/* ==========================================
   LABEL
========================================== */

.ophm-boq-label {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: #F5B91E;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.ophm-boq-label span {
    width: 30px;
    height: 2px;

    background: #F5B91E;
}


/* ==========================================
   HEADING
========================================== */

.ophm-boq-content h2 {
    margin: 0;

    color: #FFFFFF;

 
    font-size: 40px;

    line-height: 1.15;

    font-weight: 700;
}


.ophm-boq-content h2 strong {
    color: #F5B91E;

    font-weight: 800;
}


.ophm-boq-content p {
    max-width: 700px;

    margin: 17px 0 0;

    color: rgba(255,255,255,0.68);

    font-size: 15px;

    line-height: 1.8;
}


/* ==========================================
   ACTION AREA
========================================== */

.ophm-boq-actions {
    position: relative;

    z-index: 3;

    min-width: 245px;

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ==========================================
   PRIMARY BUTTON
========================================== */

.ophm-boq-primary {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 18px;

    background: #F5B91E;

    color: #06244D;

    border: 2px solid #F5B91E;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.ophm-boq-primary > span {
    display: flex;

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

    font-size: 15px;
}


.ophm-boq-primary:hover {
    background: #FFFFFF;

    border-color: #FFFFFF;

    color: #06244D;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}


.ophm-boq-primary > i {
    margin-left: 3px;

    transition: transform 0.3s ease;
}


.ophm-boq-primary:hover > i {
    transform: translateX(4px);
}


/* ==========================================
   PHONE BUTTON
========================================== */

.ophm-boq-phone {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 15px;

    background: rgba(255,255,255,0.06);

    border: 1px solid rgba(255,255,255,0.13);

    border-radius: 4px;

    text-decoration: none;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


.ophm-boq-phone:hover {
    background: rgba(255,255,255,0.10);

    border-color: rgba(245,185,30,0.55);
}


.ophm-boq-phone-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

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

    background: rgba(245,185,30,0.14);

    color: #F5B91E;

    border-radius: 50%;

    font-size: 14px;
}


.ophm-boq-phone-text small {
    display: block;

    margin-bottom: 2px;

    color:white;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.ophm-boq-phone-text strong {
    display: block;

    color: #FFFFFF;

 
    font-size: 15px;

    font-weight: 700;
}


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

@media (max-width: 850px) {

    .ophm-boq-cta {
        padding: 65px 18px;
    }

    .ophm-boq-container {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 38px;
    }

    .ophm-boq-content h2 {
        font-size: 35px;
    }

    .ophm-boq-actions {
        min-width: 0;

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;
    }

}


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

@media (max-width: 600px) {

    .ophm-boq-cta {
        padding: 50px 15px;
    }

    .ophm-boq-container {
        padding: 30px 22px;

        gap: 25px;
    }

    .ophm-boq-label {
        font-size: 9px;

        letter-spacing: 1.8px;
    }

    .ophm-boq-label span {
        width: 22px;
    }

    .ophm-boq-content h2 {
        font-size: 28px;

        line-height: 1.2;
    }

    .ophm-boq-content p {
        font-size: 12px;

        line-height: 1.75;
    }

    .ophm-boq-actions {
        display: flex;

        flex-direction: column;

        width: 100%;
    }

    .ophm-boq-primary {
        width: 100%;

        padding: 2px;
    }

    .ophm-boq-phone {
        width: 100%;
        padding: 1px;
    }

}


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

@media (max-width: 360px) {

    .ophm-boq-container {
        padding: 27px 18px;
    }

    .ophm-boq-content h2 {
        font-size: 25px;
    }

    .ophm-boq-content p {
        font-size: 11.5px;
    }

}



@media (max-width: 575px) {
    .ophm-highlight-section {
        display: none !important;
    }
}



@media (max-width: 991px) {

    .ophm-about-wrapper {
        gap: 30px;
    }

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

    .ophm-about-text {
        font-size: 15px;
    }

}


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

@media (max-width: 767px) {

    .ophm-about-section {
        width: 100%;
        overflow: hidden;
    }

    .ophm-about-wrapper {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 25px;

        box-sizing: border-box;
    }

    /* CONTENT FIRST */

    .ophm-about-content {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

        padding: 0 20px;
    }

    /* LABEL */

    .ophm-about-label {
        font-size: 11px;
        line-height: 1.4;

        margin-bottom: 10px;

        letter-spacing: 0.5px;
                margin-top: 15px;
    }

    /* TITLE */

    .ophm-about-title {
        width: 100%;
        max-width: 100%;

        margin: 0 0 18px;

        font-size: 27px;
        line-height: 1.18;

        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* TEXT */

    .ophm-about-text {
        width: 100%;
        max-width: 100%;

        margin: 0 0 14px;

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

        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* BUTTON */

    .ophm-about-button {
        margin-top: 5px;

        padding: 12px 18px;

        font-size: 12px;

        max-width: 100%;
        box-sizing: border-box;
    }

    /* IMAGE */

    .ophm-about-image {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

        overflow: hidden;
    }

    .ophm-about-image img {
        width: 100%;
        max-width: 100%;

        height: auto;

        display: block;

        object-fit: cover;
    }

}


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

@media (max-width: 480px) {

    .ophm-about-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ophm-about-title {
        font-size: 25px;
        line-height: 1.18;
    }

    .ophm-about-text {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .ophm-about-button {
        padding: 11px 16px;
    }

}


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

@media (max-width: 360px) {

    .ophm-about-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ophm-about-title {
        font-size: 23px;
    }

    .ophm-about-text {
        font-size: 13px;
    }

}


/* =========================================
   SOLAR LIGHTING SECTION
   RESPONSIVE CSS ONLY
========================================= */

@media (max-width: 767px) {

    /* Main section */
    .ophm-solar-section {
        width: 100%;
        overflow: hidden;
    }

    /* Main wrapper */
    .ophm-solar-wrapper {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    /* Image */
    .ophm-solar-image {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .ophm-solar-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    /* Content */
    .ophm-solar-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        padding: 30px 20px 35px;
    }

    /* Label */
    .ophm-solar-label {
        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    /* Heading */
    .ophm-solar-title {
        width: 100%;
        max-width: 100%;

        font-size: 27px;
        line-height: 1.18;

        margin: 0 0 16px;

        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Description */
    .ophm-solar-text {
        width: 100%;
        max-width: 100%;

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

        margin: 0 0 20px;

        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Feature list */
    .ophm-solar-features {
        width: 100%;
        max-width: 100%;

        margin: 0 0 22px;
        padding: 0;

        box-sizing: border-box;
    }

    .ophm-solar-feature {
        display: flex;
        align-items: center;

        width: 100%;

        margin-bottom: 10px;

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

        box-sizing: border-box;
    }

    .ophm-solar-feature i {
        flex: 0 0 20px;
        width: 20px;

        margin-right: 8px;
    }

    /* Button */
    .ophm-solar-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        max-width: 100%;
        box-sizing: border-box;

        padding: 12px 18px;

        font-size: 12px;
        white-space: nowrap;
    }
}


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

@media (max-width: 480px) {

    .ophm-solar-content {
        padding: 27px 18px 32px;
    }

    .ophm-solar-title {
        font-size: 25px;
        line-height: 1.18;
    }

    .ophm-solar-text {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .ophm-solar-feature {
        font-size: 13px;
        margin-bottom: 9px;
    }

}


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

@media (max-width: 360px) {

    .ophm-solar-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ophm-solar-title {
        font-size: 23px;
    }

    .ophm-solar-text {
        font-size: 13px;
    }

    .ophm-solar-feature {
        font-size: 12.5px;
    }

}



@media (max-width: 767px) {
    .ophm-quote-btn {
        display: none !important;
    }
}


/* =========================================
   FLOATING CONTACT BUTTONS
========================================= */

.ophm-floating-contact {
    position: fixed;

    right: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    z-index: 99999;
}


/* Common button */

.ophm-float-whatsapp,
.ophm-float-call {

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 24px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* WhatsApp */

.ophm-float-whatsapp {
    background: #25D366;
}


/* Call */

.ophm-float-call {
    background: #021E4F;
}


/* Hover */

.ophm-float-whatsapp:hover,
.ophm-float-call:hover {

    color: #ffffff;

    /* transform: translateY(-4px) scale(1.05); */

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28);
}


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

@media (max-width: 767px) {

    .ophm-floating-contact {

        right: 15px;
        bottom: 15px;

        gap: 9px;
    }

    .ophm-float-whatsapp,
    .ophm-float-call {

        width: 46px;
        height: 46px;

        font-size: 20px;
    }

}


.desktop-only-section {
    display: none !important;
}

@media (min-width: 992px) {
    .desktop-only-section {
        display: block !important;
    }
}
/* ==========================================
   4 LOCATION BOXES - ONE ROW
========================================== */

.ophm-network-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
    align-items: start;
}

/* Connecting line */
.ophm-network-line {
    position: absolute;
    top: 35px;
    left: 8%;
    width: 84%;
    height: 2px;
    z-index: 1;
}

/* Location boxes */
.ophm-network-location {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100%;
    z-index: 2;
}

/* Marker */
.ophm-network-marker {
    position: relative;
    z-index: 3;
    margin: 0 auto 20px;
}

/* Card */
.ophm-network-card {
    width: 100%;
    box-sizing: border-box;
}


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

@media (max-width: 991px) {

    .ophm-network-map {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 35px;
    }

    .ophm-network-line {
        display: none;
    }

}


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

@media (max-width: 575px) {

    .ophm-network-map {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}


/* ==========================================
   CLIENT LOGO SECTION
========================================== */

.clogoauto-section {
    width: 100%;
    padding: 70px 20px;
    background: #ffffff;
    overflow: hidden;
}

.clogoauto-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


/* ==========================================
   HEADING
========================================== */

.clogoauto-heading {
    text-align: center;
    margin-bottom: 40px;
}

.clogoauto-small-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #777;
    margin-bottom: 8px;
}

.clogoauto-heading h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.3;
    font-weight: 700;
    color: #222;
}

.clogoauto-heading h2 strong {
    color: #0a3c81;
}


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

.clogoauto-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}


/* ==========================================
   MOVING TRACK
========================================== */

.clogoauto-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clogoautoMove 25s linear infinite;
}


/* ==========================================
   LOGO BOX
========================================== */

.clogoauto-item {
    width: 95px;
    /* height: 110px; */
    margin: 0 12px;

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

    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;

    padding: 18px;

    flex-shrink: 0;

    transition: all 0.3s ease;
}


/* ==========================================
   LOGO IMAGE
========================================== */

.clogoauto-item img {
    max-width: 100%;
    max-height: 65px;
    width: auto;
    height: auto;

    object-fit: contain;

    /* filter: grayscale(100%); */
    opacity: 0.75;

    transition: all 0.3s ease;
}


/* ==========================================
   HOVER EFFECT
========================================== */

.clogoauto-item:hover {
    /* transform: translateY(-5px); */
    border-color: #1769aa;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.clogoauto-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}


/* ==========================================
   AUTO ANIMATION
========================================== */

@keyframes clogoautoMove {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


/* ==========================================
   PAUSE ON HOVER
========================================== */

.clogoauto-slider:hover .clogoauto-track {
    animation-play-state: paused;
}


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

@media (max-width: 991px) {

    .clogoauto-section {
        padding: 55px 20px;
    }

    .clogoauto-heading h2 {
        font-size: 30px;
    }

    .clogoauto-item {
        width: 165px;
        height: 100px;
        margin: 0 10px;
        padding: 15px;
    }

    .clogoauto-item img {
        max-height: 58px;
    }

}


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

@media (max-width: 767px) {

    .clogoauto-section {
        padding: 45px 15px;
    }

    .clogoauto-heading {
        margin-bottom: 30px;
    }

    .clogoauto-small-title {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .clogoauto-heading h2 {
        font-size: 25px;
    }

    .clogoauto-item {
        width: 145px;
        height: 90px;
        margin: 0 8px;
        padding: 13px;
        border-radius: 8px;
    }

    .clogoauto-item img {
        max-height: 50px;
    }

}


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

@media (max-width: 480px) {

    .clogoauto-section {
        padding: 40px 10px;
    }

    .clogoauto-heading h2 {
        font-size: 23px;
    }

    .clogoauto-item {
        width: 130px;
        height: 82px;
        margin: 0 7px;
        padding: 10px;
    }

    .clogoauto-item img {
        max-height: 45px;
    }

}






/* =========================================================
   ROOT / GLOBAL
========================================================= */

.opaboutx-page{
    --opx-navy:#032b5c;
    --opx-navy-dark:#011d40;
    --opx-blue:#073b78;
    --opx-gold:#f5b51b;
    --opx-gold-dark:#d99b00;
    --opx-white:#ffffff;
    --opx-light:#f5f8fc;
    --opx-border:#e3e9f1;
    --opx-text:#26364a;
    --opx-muted:#66758a;

     font-size:16px;
    line-height:1.5;
    color:var(--opx-text);
    background:#fff;
    overflow:hidden;
}

.opaboutx-page *,
.opaboutx-page *::before,
.opaboutx-page *::after{
    box-sizing:border-box;
}

.opaboutx-container{
    width:min(1180px,92%);
    margin:0 auto;
}

.opaboutx-page img{
    display:block;
    max-width:100%;
}


/* =========================================================
   DEFAULT TYPOGRAPHY
========================================================= */

.opaboutx-page p{
    font-size:14px;
    line-height:1.65;
}

.opaboutx-hero-label,
.opaboutx-section-label,
.opaboutx-brand-label,
.opaboutx-cta-label{
    font-size:.875rem;
}

.opaboutx-hero-description{
    font-size:1rem;
    line-height:1.65;
}


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

.opaboutx-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 22px;
    border-radius:4px;
    text-decoration:none;
    font-size:.95rem;
    font-weight:700;
    transition:.3s ease;
}

.opaboutx-btn-primary{
    color:#111;
    background:var(--opx-gold);
}

.opaboutx-btn-primary:hover{
    background:#fff;
    color:var(--opx-navy);
    transform:translateY(-2px);
}

.opaboutx-btn-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,.65);
    background:rgba(255,255,255,.04);
}

.opaboutx-btn-outline:hover{
    color:var(--opx-navy);
    background:#fff;
}


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

.opaboutx-hero{
    position:relative;
    min-height:510px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--opx-navy);
}

.opaboutx-hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,29,64,.98) 0%,
            rgba(3,43,92,.91) 38%,
            rgba(3,43,92,.42) 68%,
            rgba(3,43,92,.08) 100%
        ),
        url("../img/subbanner.png") center center/cover no-repeat;
}

.opaboutx-hero-grid{
    position:absolute;
    right:0;
    top:0;
    width:45%;
    height:100%;
    opacity:.10;
/* 
    background-image:
        linear-gradient(
            rgba(255,255,255,.35) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.35) 1px,
            transparent 1px
        ); */

    background-size:40px 40px;
}

.opaboutx-hero-container{
    position:relative;
    z-index:2;
    width:min(1180px,92%);
    margin:auto;
}

.opaboutx-hero-content{
    max-width:680px;
    padding:75px 0;
}

.opaboutx-hero-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--opx-gold);
    font-weight:800;
    letter-spacing:1.8px;
    margin-bottom:18px;
}

.opaboutx-hero-label::before{
    content:"";
    width:34px;
    height:3px;
    background:var(--opx-gold);
}

.opaboutx-hero-title{
    margin:0;
    color:#fff;

    font-size:40px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1.5px;
}

.opaboutx-hero-title span{
    color:var(--opx-gold);
}

.opaboutx-hero-description{
    max-width:620px;
    margin:24px 0 30px;
    color:rgba(255,255,255,.88);
}

.opaboutx-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}


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

.opaboutx-trust{
    position:relative;
    z-index:5;
    background:#fff;
    border-bottom:1px solid var(--opx-border);
}

.opaboutx-trust-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.opaboutx-trust-item{
    min-height:95px;
    padding:16px;

    display:flex;
    align-items:center;
    gap:14px;

    border-right:1px solid var(--opx-border);
}

.opaboutx-trust-item:last-child{
    border-right:0;
}

.opaboutx-trust-icon{
    width:45px;
    height:45px;
    flex:0 0 45px;

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

    color:var(--opx-navy);
    background:#fff8df;
    border:1px solid #f0cd61;
    border-radius:50%;
}

.opaboutx-trust-text strong{
    display:block;
    color:var(--opx-navy);
    font-size:12px;
    line-height:1.3;
}

.opaboutx-trust-text span{
    display:block;
    margin-top:4px;
    color:var(--opx-muted);
    font-size:14px;
    line-height:1.35;
}


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

.opaboutx-section-label,
.opaboutx-intro-label{
    display:inline-flex;
    align-items:center;
    gap:9px;

    color:#f5b51b;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.opaboutx-section-label::before,
.opaboutx-intro-label::before{
    content:"";
    width:28px;
    height:2px;
    background:var(--opx-gold);
}


/* =========================================================
   WHO WE ARE
========================================================= */

.opaboutx-intro{
    padding:85px 0;
    background:#fff;
}

.opaboutx-intro-grid{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:65px;
    align-items:center;
}

.opaboutx-image-wrap{
    position:relative;
}

.opaboutx-image-wrap::after{
    content:"";

    position:absolute;
    right:-22px;
    bottom:-22px;

    width:80px;
    height:80px;

    border-right:7px solid var(--opx-gold);
    border-bottom:7px solid var(--opx-gold);
}

.opaboutx-main-image{
    position:relative;
    z-index:1;

    width:100%;
    height:440px;
    object-fit:cover;

    border-radius:7px;

    box-shadow:
        0 20px 45px rgba(0,31,70,.14);
}

.opaboutx-intro-title{
    margin:14px 0 20px;

    color:var(--opx-navy);

    font-size:clamp(2rem,3.5vw,2.8rem);
    line-height:1.15;
    font-weight:800;
}

.opaboutx-intro-title span{
    color:#f5b51b;
}

.opaboutx-intro-text{
    margin:0 0 15px;
    color:var(--opx-muted);
}

.opaboutx-intro-btn{
    margin-top:10px;
}


/* =========================================================
   OWN MANUFACTURING BRAND
========================================================= */

.opaboutx-brand{
    position:relative;

    padding:75px 0;

    color:#fff;

    background:
        linear-gradient(
            100deg,
            #011e43 0%,
            #032b5c 58%,
            #053d78 100%
        );

    overflow:hidden;
}

.opaboutx-brand::before{
    content:"";

    position:absolute;

    width:380px;
    height:380px;

    left:-180px;
    top:-190px;

    border:1px solid rgba(245,181,27,.22);
    border-radius:50%;
}

.opaboutx-brand::after{
    content:"";

    position:absolute;

    width:540px;
    height:540px;

    right:-250px;
    bottom:-310px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.opaboutx-brand-grid{
    position:relative;
    z-index:1;

    display:grid;
    grid-template-columns:.8fr 1.2fr;

    gap:55px;

    align-items:center;
}

.opaboutx-brand-visual{
    position:relative;

    min-height:330px;

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

.opaboutx-brand-circle{
    width:285px;
    height:285px;

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

    background:#fff;

    border:8px solid var(--opx-gold);
    border-radius:50%;

    box-shadow:
        0 0 0 15px rgba(245,181,27,.08);
}

.opaboutx-brand-circle img{
    width:220px;
    height:220px;
    object-fit:contain;
}

.opaboutx-brand-badge{
    position:absolute;
    right:8%;
    bottom:28px;

    width:105px;
    height:105px;

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

    padding:10px;

    text-align:center;

    color:#111;
    background:var(--opx-gold);

    border-radius:50%;

    font-size:.7rem;
    line-height:1.35;
    font-weight:900;
}

.opaboutx-brand-label{
    color:var(--opx-gold);
    font-weight:800;
    letter-spacing:1.8px;
}

.opaboutx-brand-title{
    margin:10px 0 6px;

    font-size:clamp(2.5rem,4vw,3.6rem);
    line-height:1;
    font-weight:900;
}

.opaboutx-brand-tagline{
    margin:0 0 18px;
    font-size:1.25rem;
}

.opaboutx-brand-tagline span{
    color:var(--opx-gold);
}

.opaboutx-brand-description{
    max-width:670px;
    color:rgba(255,255,255,.78);
}

.opaboutx-brand-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;

    margin-top:28px;
}

.opaboutx-brand-point{
    display:flex;
    gap:12px;

    padding:15px;

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

.opaboutx-brand-point-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;

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

    color:#111;
    background:var(--opx-gold);
    border-radius:3px;
}

.opaboutx-brand-point h4{
    margin:0 0 4px;
    color:#fff;
    font-size:1rem;
}

.opaboutx-brand-point p{
    margin:0;
    color:rgba(255,255,255,.65);
    font-size:.9rem;
}


/* =========================================================
   WHAT WE DO
========================================================= */

.opaboutx-solutions{
    padding:80px 0;
    background:#f7f9fc;
}

.opaboutx-heading{
    max-width:750px;
    margin:0 auto 40px;
    text-align:center;
}

.opaboutx-heading h2{
    margin:13px 0;

    color:var(--opx-navy);

    font-size:clamp(2rem,3.5vw,2.7rem);
    line-height:1.15;
}

.opaboutx-heading p{
    margin:0;
    color:var(--opx-muted);
}

.opaboutx-solution-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.opaboutx-solution-card{
    position:relative;

    min-height:275px;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--opx-border);
    border-radius:5px;

    transition:.3s ease;
}

.opaboutx-solution-card:hover{
    transform:translateY(-5px);

    border-color:#d5b34e;

    box-shadow:
        0 14px 30px rgba(0,38,82,.10);
}

.opaboutx-solution-image{
    width:100%;
    height:145px;

    object-fit:cover;
}

.opaboutx-solution-content{
    padding:15px;
}

.opaboutx-solution-icon{
    width:34px;
    height:34px;

    margin-top:-31px;
    margin-bottom:10px;

    position:relative;

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

    color:var(--opx-navy);
    background:var(--opx-gold);

    border-radius:3px;
    border:3px solid #fff;
}

.opaboutx-solution-card h3{
    margin:0 0 7px;

    color:var(--opx-navy);

    font-size:1rem;
}

.opaboutx-solution-card p{
    margin:0;
    color:var(--opx-muted);
    font-size:.95rem;
}


/* =========================================================
   NETWORK
========================================================= */

.opaboutx-network{
    padding:80px 0;
    background:#fff;
}

.opaboutx-network-grid{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:50px;
    align-items:center;
}

.opaboutx-network-intro h2{
    margin:14px 0 17px;

    color:var(--opx-navy);

    font-size:clamp(2rem,3.5vw,2.8rem);
    line-height:1.15;
}

.opaboutx-network-intro p{
    color:var(--opx-muted);
}

.opaboutx-network-btn{
    margin-top:10px;
}

.opaboutx-network-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.opaboutx-location-card{
    overflow:hidden;

    background:#fff;

    border:1px solid var(--opx-border);
    border-radius:5px;

    box-shadow:
        0 8px 22px rgba(0,38,82,.06);
}

.opaboutx-location-image{
    width:100%;
    height:135px;
    object-fit:cover;
}

.opaboutx-location-content{
    padding:16px;
}

.opaboutx-location-number{
    color:var(--opx-gold-dark);
    font-size:.8rem;
    font-weight:900;
}

.opaboutx-location-card h3{
    margin:7px 0 5px;

    color:var(--opx-navy);

    font-size:1rem;
}

.opaboutx-location-card strong{
    display:block;
    color:#37485c;
    font-size:.9rem;
}

.opaboutx-location-card p{
    margin:7px 0 0;
    color:var(--opx-muted);
    font-size:.9rem;
}


/* =========================================================
   PROJECT SUPPORT
========================================================= */

.opaboutx-support{
    background:var(--opx-navy);
}

.opaboutx-support-layout{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
}

.opaboutx-support-image{
    min-height:440px;

    background:
        linear-gradient(
            rgba(3,43,92,.05),
            rgba(3,43,92,.05)
        ),
        url("../img/solar.png") center/cover no-repeat;
}

.opaboutx-support-content{
    padding:70px 8%;
    color:#fff;
}

.opaboutx-support-content h2{
    margin:14px 0 17px;

    font-size:clamp(2rem,3.5vw,2.8rem);
    line-height:1.15;
}

.opaboutx-support-content > p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.74);
}

.opaboutx-support-items{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;

    margin-top:30px;
}

.opaboutx-support-item{
    padding:18px;

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

.opaboutx-support-item i{
    display:block;
    margin-bottom:12px;

    color:var(--opx-gold);
    font-size:20px;
}

.opaboutx-support-item h3{
    margin:0 0 6px;
    color:#fff;
    font-size:1rem;
}

.opaboutx-support-item p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:.9rem;
}


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

.opaboutx-industries{
    padding:80px 0;
    background:#f6f8fb;
}

.opaboutx-industry-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}

.opaboutx-industry{
    min-height:140px;

    padding:22px 15px;

    text-align:center;

    background:#fff;

    border:1px solid var(--opx-border);
    border-radius:4px;

    transition:.3s ease;
}

.opaboutx-industry:hover{
    border-color:var(--opx-gold);
    transform:translateY(-3px);
}

.opaboutx-industry i{
    width:48px;
    height:48px;

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

    margin:0 auto 13px;

    color:var(--opx-navy);
    background:#fff7d9;

    border-radius:50%;

    font-size:18px;
}

.opaboutx-industry h3{
    margin:0;

    color:var(--opx-navy);

    font-size:16px;
    line-height:1.35;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.opaboutx-why{
    padding:80px 0;
    background:#fff;
}

.opaboutx-why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
}

.opaboutx-why-image{
    position:relative;
}

.opaboutx-why-image img{
    width:100%;
    height:440px;
    object-fit:cover;
}

.opaboutx-why-image::before{
    content:"";

    position:absolute;

    left:-15px;
    top:-15px;

    width:80px;
    height:80px;

    border-left:6px solid var(--opx-gold);
    border-top:6px solid var(--opx-gold);

    z-index:1;
}

.opaboutx-why-title{
    margin:14px 0 25px;

    color:var(--opx-navy);

    font-size:clamp(2rem,3.5vw,2.8rem);
    line-height:1.15;
}

.opaboutx-why-title span{
    color:var(--opx-gold-dark);
}

.opaboutx-why-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 22px;
}

.opaboutx-why-item{
    display:flex;
    align-items:flex-start;
    gap:11px;
}

.opaboutx-why-check{
    width:27px;
    height:27px;
    flex:0 0 27px;

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

    color:#111;
    background:var(--opx-gold);

    border-radius:50%;

    font-size:.75rem;
}

.opaboutx-why-item h3{
    margin:1px 0 4px;

    color:var(--opx-navy);

    font-size:1rem;
}

.opaboutx-why-item p{
    margin:0;
    color:var(--opx-muted);
    font-size:.9rem;
}


/* =========================================================
   OUR APPROACH
========================================================= */

.opaboutx-approach{
    padding:75px 0;
    background:var(--opx-navy);
}

.opaboutx-approach-heading{
    max-width:780px;

    margin:0 auto 40px;

    text-align:center;
    color:#fff;
}

.opaboutx-approach-heading h2{
    margin:13px 0;

    font-size:clamp(2rem,3.5vw,2.8rem);
    line-height:1.15;
}

.opaboutx-approach-heading p{
    margin:0;
    color:rgba(255,255,255,.70);
}

.opaboutx-approach-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.opaboutx-approach-card{
    padding:30px 27px;

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

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

.opaboutx-approach-number{
    color:var(--opx-gold);

    font-size:2.2rem;
    font-weight:900;
    line-height:1;
}

.opaboutx-approach-card h3{
    margin:17px 0 9px;

    color:#fff;

    font-size:1.15rem;
}

.opaboutx-approach-card p{
    margin:0;

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

    font-size:.95rem;
}


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

.opaboutx-cta{
    position:relative;

    padding:60px 0;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(1,29,64,.97),
            rgba(3,43,92,.82)
        ),
        url("img/cta.jpg") center/cover no-repeat;
}

.opaboutx-cta-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.opaboutx-cta-label{
    display:block;

    margin-bottom:9px;

    color:var(--opx-gold);

    font-weight:800;
    letter-spacing:1.7px;
}

.opaboutx-cta h2{
    margin:0 0 10px;

    color:#fff;

    font-size:clamp(2rem,3.5vw,2.8rem);
    line-height:1.15;
}

.opaboutx-cta p{
    max-width:680px;
    margin:0;

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

.opaboutx-cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    flex-shrink:0;
}

.opaboutx-phone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:48px;

    padding:0 20px;

    color:#fff;

    border:1px solid rgba(255,255,255,.4);
    border-radius:4px;

    text-decoration:none;

    font-size:.95rem;
    font-weight:700;
}

.opaboutx-phone i{
    color:var(--opx-gold);
}


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

@media(max-width:1100px){

    .opaboutx-trust-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .opaboutx-trust-item:nth-child(3){
        border-right:0;
    }

    .opaboutx-trust-item:nth-child(n+4){
        border-top:1px solid var(--opx-border);
    }

    .opaboutx-solution-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .opaboutx-industry-grid{
        grid-template-columns:repeat(4,1fr);
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media(max-width:900px){

    .opaboutx-hero{
        min-height:540px;
    }

    .opaboutx-intro-grid,
    .opaboutx-network-grid,
    .opaboutx-why-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .opaboutx-brand-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .opaboutx-brand-visual{
        min-height:290px;
    }

    .opaboutx-network-cards{
        grid-template-columns:repeat(3,1fr);
    }

    .opaboutx-support-layout{
        grid-template-columns:1fr;
    }

    .opaboutx-support-image{
        min-height:340px;
    }

    .opaboutx-support-content{
        padding:60px 6%;
    }

    .opaboutx-industry-grid{
        grid-template-columns:repeat(3,1fr);
    }

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

}


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

@media(max-width:650px){

    .opaboutx-page{
        font-size:16px;
    }

    .opaboutx-container,
    .opaboutx-hero-container{
        width:91%;
    }


    /* HERO */

    .opaboutx-hero{
        min-height:570px;
    }

    .opaboutx-hero-bg{
        background:
            linear-gradient(
                90deg,
                rgba(1,29,64,.96),
                rgba(3,43,92,.78)
            ),
            url("../img/subbanner.png") center/cover no-repeat;
    }

    .opaboutx-hero-content{
        padding:55px 0;
    }

    .opaboutx-hero-title{
        font-size:2.35rem;
    }

    .opaboutx-hero-description{
        font-size:1rem;
    }

    .opaboutx-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .opaboutx-hero-actions .opaboutx-btn{
        width:100%;
    }


    /* TRUST */

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

    .opaboutx-trust-item{
        border-top:1px solid var(--opx-border);
        border-right:1px solid var(--opx-border);
    }

    .opaboutx-trust-item:nth-child(even){
        border-right:0;
    }

    .opaboutx-trust-item:last-child{
        grid-column:1/-1;
        border-right:0;
    }


    /* GENERAL SECTIONS */

    .opaboutx-intro,
    .opaboutx-solutions,
    .opaboutx-network,
    .opaboutx-industries,
    .opaboutx-why{
        padding:58px 0;
    }


    /* INTRO */

    .opaboutx-main-image,
    .opaboutx-why-image img{
        height:310px;
    }

    .opaboutx-intro-title,
    .opaboutx-network-intro h2,
    .opaboutx-why-title,
    .opaboutx-heading h2,
    .opaboutx-support-content h2,
    .opaboutx-approach-heading h2,
    .opaboutx-cta h2{
        font-size:2rem;
    }


    /* BRAND */

    .opaboutx-brand{
        padding:58px 0;
    }

    .opaboutx-brand-circle{
        width:225px;
        height:225px;
    }

    .opaboutx-brand-circle img{
        width:175px;
        height:175px;
    }

    .opaboutx-brand-badge{
        right:5%;
        bottom:8px;

        width:88px;
        height:88px;

        font-size:.62rem;
    }

    .opaboutx-brand-title{
        font-size:2.5rem;
    }

    .opaboutx-brand-tagline{
        font-size:1.15rem;
    }

    .opaboutx-brand-points{
        grid-template-columns:1fr;
    }


    /* SOLUTIONS */

    .opaboutx-solution-grid{
        grid-template-columns:repeat(2,1fr);
        gap:11px;
    }

    .opaboutx-solution-card{
        min-height:255px;
    }

    .opaboutx-solution-image{
        height:120px;
    }


    /* NETWORK */

    .opaboutx-network-cards{
        grid-template-columns:1fr;
    }


    /* SUPPORT */

    .opaboutx-support-items{
        grid-template-columns:repeat(2,1fr);
    }


    /* INDUSTRIES */

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


    /* WHY */

    .opaboutx-why-list{
        grid-template-columns:1fr;
    }


    /* APPROACH */

    .opaboutx-approach{
        padding:58px 0;
    }

    .opaboutx-approach-grid{
        grid-template-columns:1fr;
    }


    /* CTA */

    .opaboutx-cta{
        padding:50px 0;
    }

    .opaboutx-cta-actions{
        width:100%;
        flex-direction:column;
    }

    .opaboutx-cta-actions .opaboutx-btn,
    .opaboutx-phone{
        width:100%;
    }

}


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

@media(max-width:420px){

    .opaboutx-hero-title{
        font-size:2.15rem;
    }

    .opaboutx-trust-text strong{
        font-size:.9rem;
    }

    .opaboutx-trust-text span{
        font-size:.8rem;
    }

    .opaboutx-solution-grid{
        grid-template-columns:1fr 1fr;
    }

    .opaboutx-solution-card h3{
        font-size:.95rem;
    }

    .opaboutx-solution-card p{
        font-size:.88rem;
    }

    .opaboutx-support-items{
        grid-template-columns:1fr;
    }

    .opaboutx-industry-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media(max-width:350px){

    .opaboutx-hero-title{
        font-size:2rem;
    }

    .opaboutx-trust-grid{
        grid-template-columns:1fr;
    }

    .opaboutx-trust-item{
        border-right:0 !important;
    }

    .opaboutx-trust-item:last-child{
        grid-column:auto;
    }

    .opaboutx-solution-grid{
        grid-template-columns:1fr;
    }

    .opaboutx-industry-grid{
        grid-template-columns:1fr;
    }

}
 .opmvx-section {
    position: relative;
    padding: 35px 0;
    background: #f5f8fc;
    overflow: hidden;
 }

.opmvx-section *,
.opmvx-section *::before,
.opmvx-section *::after {
    box-sizing: border-box;
}

.opmvx-container {
    width: min(1180px, 92%);
    margin: 0 auto;
}

/* =========================================================
   BACKGROUND GRAPHICS
========================================================= */

.opmvx-bg-circle {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -270px;
    top: -210px;
    border: 1px solid rgba(3, 43, 92, 0.08);
    border-radius: 50%;
}

.opmvx-bg-circle::before {
    content: "";
    position: absolute;
    inset: 45px;
    border: 1px solid rgba(245, 181, 27, 0.15);
    border-radius: 50%;
}

.opmvx-bg-grid {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 320px;
    height: 220px;
    opacity: .35;
    background-image:
        linear-gradient(rgba(3, 43, 92, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 43, 92, .05) 1px, transparent 1px);
    background-size: 30px 30px;
}

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

.opmvx-heading {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto 48px;
    text-align: center;
}

.opmvx-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #c58d00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.opmvx-label::before,
.opmvx-label::after {
    content: "";
    width: 28px;
    height: 2px;
    background: #f5b51b;
}

.opmvx-heading h2 {
    margin: 14px 0 12px;
    color: #032b5c;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1px;
}

.opmvx-heading h2 span {
    color: #d89d00;
}

.opmvx-heading p {
    max-width: 690px;
    margin: 0 auto;
    color: #66758a;
    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   MAIN GRID
========================================================= */

.opmvx-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}


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

.opmvx-card {
    position: relative;
    min-height: 470px;
    padding: 42px;
    overflow: hidden;
    border-radius: 6px;
    transition: .35s ease;
}

.opmvx-card:hover {
    transform: translateY(-6px);
}


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

.opmvx-mission {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            rgba(1, 29, 64, .98),
            rgba(3, 43, 92, .95)
        );
    box-shadow: 0 20px 45px rgba(1, 29, 64, .16);
}

.opmvx-mission::before {
    content: "";
    position: absolute;
    right: -110px;
    top: -110px;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(245, 181, 27, .24);
    border-radius: 50%;
}

.opmvx-mission::after {
    content: "";
    position: absolute;
    right: -65px;
    top: -65px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}


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

.opmvx-vision {
    color: #26364a;
    background: #fff;
    border: 1px solid #e1e7ef;
    box-shadow: 0 18px 40px rgba(3, 43, 92, .07);
}

.opmvx-vision::before {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(3, 43, 92, .08);
    border-radius: 50%;
}

.opmvx-vision::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(245, 181, 27, .20);
    border-radius: 50%;
}


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

.opmvx-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}

.opmvx-card-number {
    color: #f5b51b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.opmvx-card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #101820;
    background: #f5b51b;
    box-shadow: 0 0 0 9px rgba(245, 181, 27, .10);
    font-size: 24px;
}


/* Vision icon */
.opmvx-vision .opmvx-card-icon {
    color: #032b5c;
    background: #fff5ce;
    border: 1px solid #f0ca57;
}


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

.opmvx-card-content {
    position: relative;
    z-index: 2;
}

.opmvx-card-content h3 {
    margin: 0 0 17px;
    font-size: 37px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.8px;
}

.opmvx-mission .opmvx-card-content h3 {
    color: #fff;
}

.opmvx-vision .opmvx-card-content h3 {
    color: #032b5c;
}

.opmvx-card-content h3 span {
    color: #f5b51b;
}

.opmvx-vision .opmvx-card-content h3 span {
    color: #d89d00;
}

.opmvx-main-statement {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}

.opmvx-mission .opmvx-main-statement {
    color: #fff;
}

.opmvx-vision .opmvx-main-statement {
    color: #032b5c;
}

.opmvx-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
}

.opmvx-mission .opmvx-description {
    color: rgba(255, 255, 255, .70);
}

.opmvx-vision .opmvx-description {
    color: #66758a;
}


/* =========================================================
   BOTTOM FEATURE
========================================================= */

.opmvx-bottom-feature {
    position: absolute;
    left: 42px;
    right: 42px;
    bottom: 35px;
    z-index: 3;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.opmvx-vision .opmvx-bottom-feature {
    border-top-color: #e5eaf1;
}

.opmvx-bottom-feature strong {
    display: block;
    margin-bottom: 5px;
    color: #f5b51b;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.opmvx-vision .opmvx-bottom-feature strong {
    color: #c58d00;
}

.opmvx-bottom-feature span {
    font-size: 11px;
    line-height: 1.5;
}

.opmvx-mission .opmvx-bottom-feature span {
    color: rgba(255, 255, 255, .65);
}

.opmvx-vision .opmvx-bottom-feature span {
    color: #66758a;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.opmvx-footer-message {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 45px auto 0;
    padding: 22px 28px;
    text-align: center;
    background: #fff;
    border-left: 4px solid #f5b51b;
    box-shadow: 0 10px 30px rgba(3, 43, 92, .06);
}

.opmvx-footer-message p {
    margin: 0;
    color: #032b5c;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .opmvx-section {
        padding: 70px 0;
    }

    .opmvx-grid {
        grid-template-columns: 1fr;
    }

    .opmvx-card {
        min-height: 430px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .opmvx-section {
        padding: 55px 0;
    }

    .opmvx-container {
        width: 91%;
    }

    .opmvx-heading {
        margin-bottom: 32px;
    }

    .opmvx-heading h2 {
        font-size: 31px;
    }

    .opmvx-heading p {
        font-size: 12px;
    }

    .opmvx-card {
        min-height: auto;
        padding: 30px 25px 125px;
    }

    .opmvx-card-top {
        margin-bottom: 28px;
    }

    .opmvx-card-icon {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }

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

    .opmvx-main-statement {
        font-size: 16px;
    }

    .opmvx-description {
        font-size: 12px;
        line-height: 1.75;
    }

    .opmvx-bottom-feature {
        left: 25px;
        right: 25px;
        bottom: 27px;
    }

    .opmvx-footer-message {
        margin-top: 30px;
        padding: 18px 20px;
    }

    .opmvx-footer-message p {
        font-size: 12px;
    }

}


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

@media (max-width: 400px) {

    .opmvx-card {
        padding-left: 21px;
        padding-right: 21px;
    }

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

    .opmvx-main-statement {
        font-size: 15px;
    }

    .opmvx-bottom-feature {
        left: 21px;
        right: 21px;
    }

}



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

.opcontactx-page{
    --opc-navy:#032b5c;
    --opc-navy-dark:#011d40;
    --opc-blue:#073b78;
    --opc-gold:#f5b51b;
    --opc-gold-dark:#d99b00;
    --opc-white:#ffffff;
    --opc-light:#f5f8fc;
    --opc-border:#e1e7ef;
    --opc-text:#26364a;
    --opc-muted:#69788b;

     color:var(--opc-text);
    background:#fff;
    overflow:hidden;
}

.opcontactx-page *,
.opcontactx-page *::before,
.opcontactx-page *::after{
    box-sizing:border-box;
}

.opcontactx-container{
    width:min(1180px,92%);
    margin:0 auto;
}

.opcontactx-page img{
    max-width:100%;
    display:block;
}


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

.opcontactx-hero{
    position:relative;
    min-height:430px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--opc-navy);
}

.opcontactx-hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,29,64,.97) 0%,
            rgba(3,43,92,.88) 42%,
            rgba(3,43,92,.42) 72%,
            rgba(3,43,92,.10) 100%
        ),
        url("../img/subbanner.png") center/cover no-repeat;
}

/* .opcontactx-hero-grid{
    position:absolute;
    right:0;
    top:0;
    width:48%;
    height:100%;
    opacity:.09;

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

    background-size:42px 42px;
} */

.opcontactx-hero-container{
    position:relative;
    z-index:2;
    width:min(1180px,92%);
    margin:auto;
}

.opcontactx-hero-content{
    max-width:700px;
    padding:70px 0;
}

.opcontactx-hero-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--opc-gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;

    margin-bottom:17px;
}

.opcontactx-hero-label::before{
    content:"";
    width:32px;
    height:3px;
    background:var(--opc-gold);
}

.opcontactx-hero-title{
    margin:0;

    color:#fff;
    font-size:clamp(39px,5vw,64px);
    line-height:1.04;
    font-weight:900;
    letter-spacing:-1.7px;
}

.opcontactx-hero-title span{
    color:var(--opc-gold);
}

.opcontactx-hero-description{
    max-width:610px;

    margin:20px 0 0;

    color:rgba(255,255,255,.78);
    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   QUICK CONTACT BAR
========================================================= */

.opcontactx-quick{
    background:#fff;
    border-bottom:1px solid var(--opc-border);
    box-shadow:0 7px 25px rgba(0,30,70,.06);
}

.opcontactx-quick-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.opcontactx-quick-item{
    min-height:92px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:15px 22px;

    border-right:1px solid var(--opc-border);
}

.opcontactx-quick-item:last-child{
    border-right:0;
}

.opcontactx-quick-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;

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

    color:var(--opc-navy);
    background:#fff8dc;

    border:1px solid #efcd67;
    border-radius:50%;

    font-size:17px;
}

.opcontactx-quick-content small{
    display:block;

    color:var(--opc-gold-dark);
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}

.opcontactx-quick-content strong{
    display:block;

    margin-top:4px;

    color:var(--opc-navy);
    font-size:13px;
}

.opcontactx-quick-content a{
    color:var(--opc-navy);
    text-decoration:none;
}


/* =========================================================
   MAIN CONTACT SECTION
========================================================= */

.opcontactx-main{
    padding:85px 0;
    background:#f6f8fb;
}

.opcontactx-main-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:45px;
    align-items:start;
}


/* =========================================================
   LEFT CONTACT INFORMATION
========================================================= */

.opcontactx-info-label{
    display:inline-flex;
    align-items:center;
    gap:9px;

    color:#c18b00;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
}

.opcontactx-info-label::before{
    content:"";
    width:28px;
    height:2px;
    background:var(--opc-gold);
}

.opcontactx-info-title{
    margin:13px 0 15px;

    color:var(--opc-navy);
    font-size:clamp(30px,3.4vw,45px);
    line-height:1.08;
    letter-spacing:-1px;
}

.opcontactx-info-title span{
    color:var(--opc-gold-dark);
}

.opcontactx-info-description{
    margin:0 0 25px;

    color:var(--opc-muted);
    font-size:13px;
    line-height:1.75;
}


/* =========================================================
   CONTACT INFO CARDS
========================================================= */

.opcontactx-info-list{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.opcontactx-info-card{
    display:flex;
    align-items:flex-start;
    gap:14px;

    padding:16px;

    background:#fff;
    border:1px solid var(--opc-border);
    border-radius:4px;

    transition:.3s ease;
}

.opcontactx-info-card:hover{
    transform:translateX(4px);
    border-color:#dfbb55;
    box-shadow:0 10px 25px rgba(0,35,75,.07);
}

.opcontactx-info-icon{
    width:43px;
    height:43px;
    flex:0 0 43px;

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

    color:var(--opc-navy);
    background:#fff7d8;

    border-radius:4px;
    border:1px solid #f0d477;
}

.opcontactx-info-card small{
    display:block;

    color:#b47d00;
    font-size:15px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}

.opcontactx-info-card h3{
    margin:4px 0 3px;

    color:var(--opc-navy);
    font-size:13px;
}

.opcontactx-info-card p{
    margin:0;

    color:var(--opc-muted);
    font-size:14px;
    line-height:1.55;
}

.opcontactx-info-card a{
    color:var(--opc-navy);
    text-decoration:none;
    font-weight:700;
    font-size:15px;
}


/* =========================================================
   LOCATIONS
========================================================= */

.opcontactx-locations{
    margin-top:24px;
}

.opcontactx-location-title{
    margin:0 0 11px;

    color:var(--opc-navy);
    font-size:17px;
}

.opcontactx-location-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.opcontactx-location{
    padding:15px;

    background:#fff;
    border:1px solid var(--opc-border);
    border-left:3px solid var(--opc-gold);
}

.opcontactx-location span{
    display:block;

    color:var(--opc-gold-dark);
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
}

.opcontactx-location h4{
    margin:5px 0 4px;

    color:var(--opc-navy);
    font-size:12px;
}

.opcontactx-location p{
    margin:0;

    color:var(--opc-muted);
    font-size:9px;
    line-height:1.45;
}


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

.opcontactx-form-card{
    position:relative;

    padding:38px;

    background:#fff;

    border:1px solid var(--opc-border);
    border-radius:5px;

    box-shadow:0 18px 45px rgba(0,32,70,.09);

    overflow:hidden;
}

.opcontactx-form-card::before{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        var(--opc-gold),
        var(--opc-navy)
    );
}

.opcontactx-form-label{
    color:#c18b00;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.7px;
}

.opcontactx-form-title{
    margin:8px 0 8px;

    color:var(--opc-navy);

    font-size:29px;
    line-height:1.15;
}

.opcontactx-form-intro{
    margin:0 0 25px;

    color:var(--opc-muted);
    font-size:11px;
    line-height:1.65;
}


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

.opcontactx-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.opcontactx-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.opcontactx-field-full{
    grid-column:1/-1;
}

.opcontactx-field label{
    color:var(--opc-navy);
    font-size:10px;
    font-weight:800;
}

.opcontactx-field label span{
    color:#d39b00;
}

.opcontactx-field input,
.opcontactx-field select,
.opcontactx-field textarea{
    width:100%;

    padding:13px 14px;

    color:#24364a;
    background:#fbfcfe;

    border:1px solid #dce3eb;
    border-radius:3px;

    outline:none;

     font-size:12px;

    transition:.25s ease;
    font-family: "Muli", sans-serif;
}

.opcontactx-field input:focus,
.opcontactx-field select:focus,
.opcontactx-field textarea:focus{
    background:#fff;
    border-color:var(--opc-gold);
    box-shadow:0 0 0 3px rgba(245,181,27,.10);
}

.opcontactx-field textarea{
    min-height:125px;
    resize:vertical;
}

.opcontactx-submit{
    grid-column:1/-1;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:50px;

    padding:0 22px;

    border:0;
    border-radius:3px;

    color:#111;
    background:var(--opc-gold);

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

    cursor:pointer;

    transition:.3s ease;
}

.opcontactx-submit:hover{
    background:var(--opc-navy);
    color:#fff;
    transform:translateY(-2px);
}


/* =========================================================
   PROJECT ENQUIRY BANNER
========================================================= */

.opcontactx-project{
    padding:70px 0;

    background:
        linear-gradient(
            100deg,
            rgba(1,29,64,.97),
            rgba(3,43,92,.91)
        ),
        url("img/contact-project.png") center/cover no-repeat;
}

.opcontactx-project-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.opcontactx-project-label{
    color:var(--opc-gold);

    font-size:10px;
    font-weight:800;
    letter-spacing:1.8px;
}

.opcontactx-project-title{
    margin:9px 0 9px;

    color:#fff;

    font-size:clamp(28px,3.4vw,44px);
    line-height:1.08;
}

.opcontactx-project-description{
    max-width:650px;

    margin:0;

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

    font-size:12px;
    line-height:1.65;
}

.opcontactx-project-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    flex-shrink:0;
}

.opcontactx-project-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:49px;

    padding:0 21px;

    text-decoration:none;

    border-radius:3px;

    font-size:11px;
    font-weight:900;
}

.opcontactx-project-primary{
    color:#111;
    background:var(--opc-gold);
}

.opcontactx-project-primary:hover{
    background:#fff;
}

.opcontactx-project-phone{
    color:#fff;

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

    background:rgba(255,255,255,.04);
}

.opcontactx-project-phone i{
    color:var(--opc-gold);
}


/* =========================================================
   NETWORK SECTION
========================================================= */

.opcontactx-network{
    padding:80px 0;
    background:#fff;
}

.opcontactx-network-heading{
    max-width:720px;
    margin:0 auto 38px;
    text-align:center;
}

.opcontactx-network-heading .opcontactx-info-label{
    justify-content:center;
}

.opcontactx-network-heading h2{
    margin:12px 0;

    color:var(--opc-navy);

    font-size:30px;
}

.opcontactx-network-heading p{
    margin:0;

    color:var(--opc-muted);

    font-size:12px;
    line-height:1.7;
}

.opcontactx-network-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.opcontactx-network-card{
    position:relative;

    padding:25px;

    background:#fff;

    border:1px solid var(--opc-border);
    border-radius:4px;

    box-shadow:0 9px 25px rgba(0,32,70,.05);
}

.opcontactx-network-number{
    color:var(--opc-gold-dark);

    font-size:10px;
    font-weight:900;
}

.opcontactx-network-icon{
    position:absolute;
    top:22px;
    right:22px;

    width:42px;
    height:42px;

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

    color:var(--opc-navy);
    background:#fff7d9;

    border-radius:50%;
}

.opcontactx-network-card h3{
    margin:17px 0 4px;

    color:var(--opc-navy);

    font-size:15px;
}

.opcontactx-network-card strong{
    display:block;

    color:#34475c;

    font-size:15px;
}

.opcontactx-network-card p{
    margin:8px 0 0;

    color:var(--opc-muted);

    font-size:13px;
    line-height:1.55;
}


/* =========================================================
   BUSINESS HOURS
========================================================= */

.opcontactx-hours{
    padding:65px 0;
    background:#f5f8fc;
}

.opcontactx-hours-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

    padding:32px 38px;

    background:#fff;

    border:1px solid var(--opc-border);
    border-left:5px solid var(--opc-gold);
}

.opcontactx-hours-content h2{
    margin:0 0 8px;

    color:var(--opc-navy);

    font-size:27px;
}

.opcontactx-hours-content p{
    margin:0;

    color:var(--opc-muted);

    font-size:11px;
    line-height:1.6;
}

.opcontactx-hours-time{
    display:flex;
    align-items:center;
    gap:12px;

    flex-shrink:0;
}

.opcontactx-hours-icon{
    width:46px;
    height:46px;

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

    color:#111;
    background:var(--opc-gold);

    border-radius:50%;
}

.opcontactx-hours-time strong{
    display:block;

    color:var(--opc-navy);

    font-size:14px;
}

.opcontactx-hours-time span{
    display:block;

    margin-top:3px;

    color:var(--opc-muted);

    font-size:9px;
}


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

@media(max-width:1000px){

    .opcontactx-quick-grid{
        grid-template-columns:1fr;
    }

    .opcontactx-quick-item{
        border-right:0;
        border-bottom:1px solid var(--opc-border);
    }

    .opcontactx-quick-item:last-child{
        border-bottom:0;
    }

    .opcontactx-main-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .opcontactx-network-cards{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:800px){

    .opcontactx-hero{
        min-height:470px;
    }

    .opcontactx-main{
        padding:60px 0;
    }

    .opcontactx-network{
        padding:60px 0;
    }

    .opcontactx-network-cards{
        grid-template-columns:1fr;
    }

    .opcontactx-project-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .opcontactx-hours-inner{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:600px){

    .opcontactx-container,
    .opcontactx-hero-container{
        width:91%;
    }

    .opcontactx-hero{
        min-height:520px;
    }

    .opcontactx-hero-bg{
        background:
            linear-gradient(
                90deg,
                rgba(1,29,64,.96),
                rgba(3,43,92,.82)
            ),
            url("../img/subbanner.png") center/cover no-repeat;
    }

    .opcontactx-hero-content{
        padding:55px 0;
    }

    .opcontactx-hero-title{
        font-size:38px;
    }

    .opcontactx-hero-description{
        font-size:13px;
    }

    .opcontactx-form-card{
        padding:25px 18px;
    }

    .opcontactx-form{
        grid-template-columns:1fr;
    }

    .opcontactx-field-full,
    .opcontactx-submit{
        grid-column:auto;
    }

    .opcontactx-location-grid{
        grid-template-columns:1fr;
    }

    .opcontactx-project-actions{
        width:100%;
        flex-direction:column;
    }

    .opcontactx-project-btn{
        width:100%;
    }

    .opcontactx-hours{
        padding:50px 0;
    }

    .opcontactx-hours-inner{
        padding:25px 20px;
    }

}

@media(max-width:420px){

    .opcontactx-hero-title{
        font-size:33px;
    }

    .opcontactx-info-title{
        font-size:31px;
    }

}




/* =========================================================
   ROOT
========================================================= */

.opproductx-page{
    --opp-navy:#032b5c;
    --opp-navy-dark:#011d40;
    --opp-blue:#073b78;
    --opp-gold:#f5b51b;
    --opp-gold-dark:#d89b00;
    --opp-white:#ffffff;
    --opp-light:#f5f8fc;
    --opp-border:#e0e7ef;
    --opp-text:#26364a;
    --opp-muted:#68788c;

     color:var(--opp-text);
    background:#fff;
    overflow:hidden;
}

.opproductx-page *,
.opproductx-page *::before,
.opproductx-page *::after{
    box-sizing:border-box;
}

.opproductx-container{
    width:min(1180px,92%);
    margin:0 auto;
}

.opproductx-page img{
    display:block;
    max-width:100%;
}


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

.opproductx-hero{
    position:relative;
    min-height:510px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--opp-navy);
}

.opproductx-hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,29,64,.98) 0%,
            rgba(3,43,92,.91) 38%,
            rgba(3,43,92,.48) 67%,
            rgba(3,43,92,.08) 100%
        ),
        url("../img/subbanner.png") center/cover no-repeat;
}

.opproductx-hero-pattern{
    position:absolute;
    right:0;
    top:0;
    width:43%;
    height:100%;
    opacity:.08;

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

    background-size:40px 40px;
}

.opproductx-hero-container{
    position:relative;
    z-index:2;

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

.opproductx-hero-content{
    max-width:700px;
    padding:75px 0;
}

.opproductx-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--opp-gold);

    font-size:13px;
    font-weight:800;
    letter-spacing:1.8px;
}

.opproductx-label::before{
    content:"";

    width:32px;
    height:3px;

    background:var(--opp-gold);
}

.opproductx-hero-title{
    margin:16px 0 18px;

    color:#fff;

    font-size:clamp(40px,5vw,64px);
    line-height:1.04;
    font-weight:900;
    letter-spacing:-1.7px;
}

.opproductx-hero-title span{
    color:var(--opp-gold);
}

.opproductx-hero-description{
    max-width:640px;

    margin:0;

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

    font-size:16px;
    line-height:1.75;
}

.opproductx-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:28px;
}

.opproductx-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:49px;

    padding:0 22px;

    text-decoration:none;

    border-radius:3px;

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

    transition:.3s ease;
}

.opproductx-btn-primary{
    color:#111;
    background:var(--opp-gold);
}

.opproductx-btn-primary:hover{
    color:var(--opp-navy);
    background:#fff;
    transform:translateY(-2px);
}

.opproductx-btn-outline{
    color:#fff;
    border:1px solid rgba(255,255,255,.5);
    background:rgba(255,255,255,.04);
}

.opproductx-btn-outline:hover{
    color:var(--opp-navy);
    background:#fff;
}


/* =========================================================
   CATEGORY NAVIGATION
========================================================= */

.opproductx-category-nav{
    position:relative;
    z-index:4;

    background:#fff;

    border-bottom:1px solid var(--opp-border);
    box-shadow:0 6px 22px rgba(0,35,75,.06);
}

.opproductx-category-list{
    display:flex;
    align-items:center;

    min-height:70px;

    overflow-x:auto;

    scrollbar-width:none;
}

.opproductx-category-list::-webkit-scrollbar{
    display:none;
}

.opproductx-category-list a{
    flex:0 0 auto;

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

    min-height:70px;

    padding:0 17px;

    color:var(--opp-navy);

    text-decoration:none;

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

    border-bottom:3px solid transparent;

    transition:.25s ease;
}

.opproductx-category-list a:hover,
.opproductx-category-list a.active{
    color:#b47b00;
    border-bottom-color:var(--opp-gold);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.opproductx-section-heading{
    max-width:760px;
    margin:0 auto 42px;

    text-align:center;
}

.opproductx-section-heading .opproductx-label{
    justify-content:center;
}

.opproductx-section-heading h2{
    margin:13px 0;

    color:var(--opp-navy);

    font-size:clamp(30px,3.5vw,44px);
    line-height:1.1;

    letter-spacing:-.8px;
}

.opproductx-section-heading p{
    margin:0;

    color:var(--opp-muted);

    font-size:14px;
    line-height:1.75;
}


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

.opproductx-intro{
    padding:80px 0 55px;
    background:#fff;
}

.opproductx-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
}

.opproductx-intro-image{
    position:relative;
}

.opproductx-intro-image img{
    width:100%;
    height:390px;

    object-fit:cover;

    border-radius:4px;

    box-shadow:0 18px 40px rgba(0,30,70,.13);
}

.opproductx-intro-image::after{
    content:"";

    position:absolute;

    width:80px;
    height:80px;

    right:-18px;
    bottom:-18px;

    border-right:6px solid var(--opp-gold);
    border-bottom:6px solid var(--opp-gold);
}

.opproductx-intro-content .opproductx-label{
    color:#b98000;
}

.opproductx-intro-title{
    margin:13px 0 17px;

    color:var(--opp-navy);

    font-size:clamp(30px,3.5vw,45px);
    line-height:1.08;
}

.opproductx-intro-title span{
    color:var(--opp-gold-dark);
}

.opproductx-intro-text{
    margin:0 0 13px;

    color:var(--opp-muted);

    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   PRODUCT RANGE
========================================================= */

.opproductx-products{
    padding:80px 0;

    background:#f5f8fc;
}

.opproductx-product-grid{
    display:grid;

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

    gap:18px;
}

.opproductx-product-card{
    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    background:#fff;

    border:1px solid var(--opp-border);
    border-radius:5px;

    text-decoration:none;

    box-shadow:0 8px 25px rgba(0,35,75,.045);

    transition:.3s ease;
}

.opproductx-product-card:hover{
    transform:translateY(-6px);

    border-color:#dfbc56;

    box-shadow:0 17px 35px rgba(0,35,75,.11);
}

.opproductx-product-image{
    position:relative;

    height:245px;

    overflow:hidden;

    background:#edf3f8;
}

.opproductx-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s ease;
}

.opproductx-product-card:hover
.opproductx-product-image img{
    transform:scale(1.045);
}

.opproductx-product-number{
    position:absolute;

    top:14px;
    left:14px;

    min-width:39px;
    height:30px;

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

    padding:0 8px;

    color:#111;
    background:var(--opp-gold);

    border-radius:2px;

    font-size:11px;
    font-weight:900;
}

.opproductx-product-content{
    padding:21px 21px 22px;
}

.opproductx-product-content h3{
    margin:0 0 8px;

    color:var(--opp-navy);

    font-size:20px;
    line-height:1.2;
}

.opproductx-product-content p{
    margin:0 0 15px;

    color:var(--opp-muted);

    font-size:13px;
    line-height:1.65;
}

.opproductx-product-link{
    display:inline-flex;
    align-items:center;
    gap:7px;

    color:#b57d00;

    font-size:12px;
    font-weight:900;
}


/* =========================================================
   FEATURED HIGH MAST
========================================================= */

.opproductx-featured{
    padding:85px 0;

    background:#fff;
}

.opproductx-featured-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:510px;

    background:var(--opp-navy);

    overflow:hidden;

    border-radius:5px;

    box-shadow:0 20px 45px rgba(0,35,75,.14);
}

.opproductx-featured-image{
    min-height:510px;

    background:
        linear-gradient(
            rgba(3,43,92,.08),
            rgba(3,43,92,.08)
        ),
        url("img/featured.png") center/cover no-repeat;
}

.opproductx-featured-content{
    display:flex;
    align-items:center;

    padding:55px;
}

.opproductx-featured-inner{
    max-width:570px;
}

.opproductx-featured-title{
    margin:13px 0 17px;

    color:#fff;

    font-size:clamp(30px,3.5vw,45px);
    line-height:1.08;
}

.opproductx-featured-description{
    margin:0;

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

    font-size:14px;
    line-height:1.75;
}

.opproductx-feature-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:27px;
}

.opproductx-feature-item{
    display:flex;
    align-items:flex-start;
    gap:10px;

    padding:13px;

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

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

.opproductx-feature-icon{
    width:33px;
    height:33px;

    flex:0 0 33px;

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

    color:#111;
    background:var(--opp-gold);

    border-radius:3px;
}

.opproductx-feature-item h4{
    margin:1px 0 3px;

    color:#fff;

    font-size:12px;
}

.opproductx-feature-item p{
    margin:0;

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

    font-size:10px;
    line-height:1.5;
}

.opproductx-feature-button{
    margin-top:25px;
}


/* =========================================================
   SOLAR FEATURE
========================================================= */

.opproductx-solar{
    padding:85px 0;

    background:
        linear-gradient(
            100deg,
            #011e43,
            #053d78
        );

    color:#fff;
}

.opproductx-solar-grid{
    display:grid;

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

    gap:60px;

    align-items:center;
}

.opproductx-solar-image{
    position:relative;
}

.opproductx-solar-image img{
    width:100%;
    height:390px;

    object-fit:cover;

    border-radius:4px;
}

.opproductx-solar-content .opproductx-label{
    color:var(--opp-gold);
}

.opproductx-solar-title{
    margin:13px 0 15px;

    color:#fff;

    font-size:clamp(30px,3.5vw,45px);
    line-height:1.08;
}

.opproductx-solar-description{
    margin:0;

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

    font-size:14px;
    line-height:1.75;
}

.opproductx-solar-cards{
    display:grid;

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

    gap:12px;

    margin-top:25px;
}

.opproductx-solar-card{
    padding:17px;

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

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

.opproductx-solar-card i{
    color:var(--opp-gold);

    font-size:20px;

    margin-bottom:13px;
}

.opproductx-solar-card h3{
    margin:0 0 5px;

    color:#fff;

    font-size:13px;
}

.opproductx-solar-card p{
    margin:0;

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

    font-size:10px;
    line-height:1.5;
}


/* =========================================================
   LIGHTING / ELECTRICAL
========================================================= */

.opproductx-lighting{
    padding:85px 0;

    background:#fff;
}

.opproductx-lighting-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}

.opproductx-lighting-card{
    position:relative;

    min-height:310px;

    padding:30px;

    overflow:hidden;

    border-radius:5px;

    background:#f5f8fc;

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

.opproductx-lighting-card-dark{
    color:#fff;

    background:var(--opp-navy);
}

.opproductx-lighting-card h3{
    margin:0 0 10px;

    color:var(--opp-navy);

    font-size:27px;
}

.opproductx-lighting-card-dark h3{
    color:#fff;
}

.opproductx-lighting-card p{
    max-width:500px;

    margin:0;

    color:var(--opp-muted);

    font-size:13px;
    line-height:1.7;
}

.opproductx-lighting-card-dark p{
    color:rgba(255,255,255,.67);
}

.opproductx-lighting-list{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:22px;
}

.opproductx-lighting-list span{
    padding:8px 11px;

    color:var(--opp-navy);

    background:#fff;

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

    border-radius:3px;

    font-size:11px;
    font-weight:700;
}

.opproductx-lighting-card-dark
.opproductx-lighting-list span{
    color:var(--opp-navy);
}

.opproductx-lighting-image{
    position:absolute;

    right:-20px;
    bottom:-20px;

    width:220px;
    height:170px;

    object-fit:cover;

    opacity:.82;

    border-radius:4px;
}


/* =========================================================
   ROAD SAFETY
========================================================= */

.opproductx-safety{
    padding:85px 0;

    background:#f5f8fc;
}

.opproductx-safety-grid{
    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:50px;

    align-items:center;
}

.opproductx-safety-image img{
    width:100%;
    height:390px;

    object-fit:cover;

    border-radius:4px;

    box-shadow:0 18px 40px rgba(0,30,70,.11);
}

.opproductx-safety-content .opproductx-label{
    color:#b98000;
}

.opproductx-safety-title{
    margin:13px 0 15px;

    color:var(--opp-navy);

    font-size:clamp(30px,3.5vw,44px);
    line-height:1.1;
}

.opproductx-safety-description{
    margin:0 0 20px;

    color:var(--opp-muted);

    font-size:14px;
    line-height:1.75;
}

.opproductx-safety-points{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;
}

.opproductx-safety-point{
    display:flex;
    align-items:center;
    gap:9px;

    color:var(--opp-navy);

    font-size:12px;
    font-weight:700;
}

.opproductx-safety-point i{
    width:27px;
    height:27px;

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

    flex:0 0 27px;

    color:#111;
    background:var(--opp-gold);

    border-radius:50%;

    font-size:10px;
}


/* =========================================================
   OTHER PRODUCTS
========================================================= */

.opproductx-other{
    padding:80px 0;

    background:#fff;
}

.opproductx-other-grid{
    display:grid;

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

    gap:14px;
}

.opproductx-other-card{
    padding:24px 20px;

    background:#fff;

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

    border-radius:4px;

    transition:.3s ease;
}

.opproductx-other-card:hover{
    transform:translateY(-4px);

    border-color:#dfbd5b;

    box-shadow:0 12px 25px rgba(0,35,75,.07);
}

.opproductx-other-icon{
    width:48px;
    height:48px;

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

    margin-bottom:16px;

    color:var(--opp-navy);

    background:#fff7d9;

    border:1px solid #f0d477;

    border-radius:4px;

    font-size:19px;
}

.opproductx-other-card h3{
    margin:0 0 7px;

    color:var(--opp-navy);

    font-size:17px;
}

.opproductx-other-card p{
    margin:0;

    color:var(--opp-muted);

    font-size:12px;
    line-height:1.6;
}


/* =========================================================
   CUSTOMIZED SOLUTIONS
========================================================= */

.opproductx-custom{
    position:relative;

    padding:85px 0;

    overflow:hidden;

    background:
        linear-gradient(
            100deg,
            rgba(1,29,64,.98),
            rgba(3,43,92,.90)
        ),
        url("img/custom-pole.png") center/cover no-repeat;
}

.opproductx-custom-content{
    max-width:690px;
}

.opproductx-custom-content .opproductx-label{
    color:var(--opp-gold);
}

.opproductx-custom-title{
    margin:13px 0 15px;

    color:#fff;

    font-size:clamp(32px,4vw,49px);
    line-height:1.08;
}

.opproductx-custom-description{
    margin:0;

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

    font-size:14px;
    line-height:1.75;
}

.opproductx-custom-points{
    display:grid;

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

    gap:12px;

    margin-top:27px;
}

.opproductx-custom-point{
    padding:15px;

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

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

.opproductx-custom-point i{
    color:var(--opp-gold);

    font-size:18px;

    margin-bottom:10px;
}

.opproductx-custom-point h4{
    margin:0 0 4px;

    color:#fff;

    font-size:12px;
}

.opproductx-custom-point p{
    margin:0;

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

    font-size:10px;
    line-height:1.5;
}

.opproductx-custom-button{
    margin-top:28px;
}


/* =========================================================
   PROJECT SUPPORT
========================================================= */

.opproductx-support{
    padding:80px 0;

    background:#fff;
}

.opproductx-support-heading{
    max-width:760px;

    margin:0 auto 38px;

    text-align:center;
}

.opproductx-support-heading h2{
    margin:12px 0;

    color:var(--opp-navy);

    font-size:clamp(29px,3.5vw,43px);
}

.opproductx-support-heading p{
    margin:0;

    color:var(--opp-muted);

    font-size:14px;
    line-height:1.7;
}

.opproductx-support-grid{
    display:grid;

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

    gap:12px;
}

.opproductx-support-card{
    padding:23px 18px;

    background:#f6f8fb;

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

    border-radius:4px;
}

.opproductx-support-icon{
    width:42px;
    height:42px;

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

    color:var(--opp-navy);

    background:#fff7d9;

    border:1px solid #f0d477;

    border-radius:4px;

    margin-bottom:14px;
}

.opproductx-support-card h3{
    margin:0 0 6px;

    color:var(--opp-navy);

    font-size:14px;
}

.opproductx-support-card p{
    margin:0;

    color:var(--opp-muted);

    font-size:11px;
    line-height:1.55;
}


/* =========================================================
   BRANDS
========================================================= */

.opproductx-brands{
    padding:70px 0;

    background:#f5f8fc;
}

.opproductx-brand-row{
    display:grid;

    grid-template-columns:190px 1fr;

    align-items:center;

    padding:20px 0;

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

.opproductx-brand-row:last-child{
    border-bottom:0;
}

.opproductx-brand-row-title{
    color:var(--opp-navy);

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

.opproductx-brand-items{
    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.opproductx-brand-items span{
    min-width:120px;

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

    min-height:43px;

    padding:0 18px;

    color:var(--opp-navy);

    background:#fff;

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

    border-radius:3px;

    font-size:12px;
    font-weight:800;
}


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

.opproductx-cta{
    position:relative;

    padding:62px 0;

    overflow:hidden;

    background:
        linear-gradient(
            100deg,
            rgba(1,29,64,.98),
            rgba(3,43,92,.88)
        ),
        url("img/products-cta.png") center/cover no-repeat;
}

.opproductx-cta-inner{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;
}

.opproductx-cta-label{
    color:var(--opp-gold);

    font-size:12px;
    font-weight:800;
    letter-spacing:1.7px;
}

.opproductx-cta-title{
    margin:10px 0 9px;

    color:#fff;

    font-size:clamp(29px,3.5vw,44px);
    line-height:1.08;
}

.opproductx-cta-description{
    max-width:650px;

    margin:0;

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

    font-size:13px;
    line-height:1.65;
}

.opproductx-cta-actions{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    flex-shrink:0;
}

.opproductx-phone{
    display:inline-flex;

    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:49px;

    padding:0 20px;

    color:#fff;

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

    text-decoration:none;

    border-radius:3px;

    font-size:13px;
    font-weight:800;
}

.opproductx-phone i{
    color:var(--opp-gold);
}


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

@media(max-width:1100px){

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

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

    .opproductx-support-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:900px){

    .opproductx-intro-grid,
    .opproductx-featured-grid,
    .opproductx-solar-grid,
    .opproductx-lighting-grid,
    .opproductx-safety-grid{
        grid-template-columns:1fr;
    }

    .opproductx-featured-image{
        min-height:380px;
    }

    .opproductx-solar-image{
        order:2;
    }

    .opproductx-solar-content{
        order:1;
    }

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

    .opproductx-cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:650px){

    .opproductx-container,
    .opproductx-hero-container{
        width:91%;
    }

    .opproductx-hero{
        min-height:540px;
    }

    .opproductx-hero-bg{
        background:
            linear-gradient(
                90deg,
                rgba(1,29,64,.96),
                rgba(3,43,92,.82)
            ),
            url("../img/subbanner.png") center/cover no-repeat;
    }

    .opproductx-hero-content{
        padding:55px 0;
    }

    .opproductx-hero-title{
        font-size:37px;
    }

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

    .opproductx-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .opproductx-btn{
        width:100%;
    }

    .opproductx-intro,
    .opproductx-products,
    .opproductx-featured,
    .opproductx-solar,
    .opproductx-lighting,
    .opproductx-safety,
    .opproductx-other,
    .opproductx-support{
        padding:55px 0;
    }

    .opproductx-intro-image img{
        height:300px;
    }

    .opproductx-product-grid{
        grid-template-columns:1fr;
    }

    .opproductx-product-image{
        height:230px;
    }

    .opproductx-featured-content{
        padding:35px 25px;
    }

    .opproductx-featured-image{
        min-height:300px;
    }

    .opproductx-feature-list{
        grid-template-columns:1fr;
    }

    .opproductx-solar-image img,
    .opproductx-safety-image img{
        height:300px;
    }

    .opproductx-solar-cards{
        grid-template-columns:1fr;
    }

    .opproductx-lighting-card{
        min-height:280px;
    }

    .opproductx-safety-points{
        grid-template-columns:1fr;
    }

    .opproductx-other-grid{
        grid-template-columns:1fr 1fr;
    }

    .opproductx-custom-points{
        grid-template-columns:1fr;
    }

    .opproductx-support-grid{
        grid-template-columns:1fr 1fr;
    }

    .opproductx-brand-row{
        grid-template-columns:1fr;
        gap:14px;
    }

    .opproductx-cta-actions{
        width:100%;
        flex-direction:column;
    }

    .opproductx-cta-actions .opproductx-btn,
    .opproductx-phone{
        width:100%;
    }

}

@media(max-width:420px){

    .opproductx-hero-title{
        font-size:32px;
    }

    .opproductx-section-heading h2{
        font-size:29px;
    }

    .opproductx-other-grid{
        grid-template-columns:1fr;
    }

    .opproductx-support-grid{
        grid-template-columns:1fr;
    }

    .opproductx-brand-items{
        gap:7px;
    }

    .opproductx-brand-items span{
        min-width:105px;
        font-size:11px;
    }

}




/* =========================================================
   PRODUCT DROPDOWN - DESKTOP + MOBILE FIX
========================================================= */

.ophm-product-dropdown{
    position:static;
}


/* PRODUCT BUTTON */

.ophm-product-trigger{
    display:flex !important;
    align-items:center;
    gap:7px;

    border:0;
    outline:none;

    background:transparent;

    cursor:pointer;

 
    appearance:none;
    -webkit-appearance:none;
}

.ophm-product-trigger i{
    font-size:8px;

    transition:transform .3s ease;
}

.ophm-product-dropdown.ophm-product-open
.ophm-product-trigger i{
    transform:rotate(180deg);
}


/* =========================================================
   DESKTOP MEGA MENU
========================================================= */

.ophm-product-mega{
        margin-top: -30px;
    position:absolute;

    left:0;
    right:0;

    top:100%;

    z-index:99999;

    display:block;

    background:#fff;

    border-top:3px solid #f5b51b;

    box-shadow:0 18px 45px rgba(1,29,64,.17);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


/* DESKTOP HOVER */

@media(min-width:901px){

    .ophm-product-dropdown:hover
    .ophm-product-mega,

    .ophm-product-dropdown.ophm-product-open
    .ophm-product-mega{

        opacity:1;
        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);
    }

}


/* =========================================================
   MEGA MENU INNER
========================================================= */

.ophm-product-mega-inner{
    width:min(1200px,92%);

    margin:0 auto;

    display:grid;

    grid-template-columns:235px 1fr;

    gap:30px;

    padding:25px 0 28px;
}


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

.ophm-product-mega-intro{
    position:relative;

    padding:22px 20px;

    background:
        linear-gradient(
            145deg,
            #011d40,
            #073b78
        );

    border-radius:4px;

    overflow:hidden;
}

.ophm-product-mega-intro::after{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-50px;
    bottom:-55px;

    border:20px solid rgba(245,181,27,.15);

    border-radius:50%;
}

.ophm-product-mini-label{
    display:block;

    margin-bottom:10px;

    color:#f5b51b;

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

    letter-spacing:1.4px;
}

.ophm-product-mega-intro h3{
    position:relative;
    z-index:2;

    margin:0 0 10px;

    color:#fff;

    font-size:23px;
    line-height:1.15;
}

.ophm-product-mega-intro p{
    position:relative;
    z-index:2;

    margin:0;

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

    font-size:11px;
    line-height:1.65;
}

.ophm-product-view-all{
    position:relative;
    z-index:2;

    display:inline-flex;

    align-items:center;
    gap:7px;

    margin-top:18px;

    padding:9px 12px;

    color:#111;

    background:#f5b51b;

    border-radius:3px;

    text-decoration:none;

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


/* =========================================================
   PRODUCT GRID
========================================================= */

.ophm-product-grid{
    display:grid;

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

    gap:10px;
}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.ophm-product-item{
    display:grid;

    grid-template-columns:74px 1fr;

    align-items:center;

    gap:12px;

    min-height:82px;

    padding:7px;

    background:#fff;

    border:1px solid #e4eaf1;

    border-radius:4px;

    text-decoration:none;

    transition:.25s ease;
}

.ophm-product-item:hover{
    border-color:#e2bd50;

    box-shadow:
        0 7px 20px rgba(0,35,75,.09);

    transform:translateY(-2px);
}


/* IMAGE */

.ophm-product-image{
    width:74px;
    height:68px;

    overflow:hidden;

    background:#f2f5f8;

    border-radius:3px;
}

.ophm-product-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;
}

.ophm-product-item:hover
.ophm-product-image img{
    transform:scale(1.07);
}


/* INFO */

.ophm-product-info{
    position:relative;

    min-width:0;

    padding-right:17px;
}

.ophm-product-info span{
    display:block;
   font-size:15px !important;
    margin-bottom:4px;

    color:#c28b00;

    font-size:8px;
    font-weight:900;
}

.ophm-product-info h4{
    margin:0;

    color:#032b5c;

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

    font-weight:800;
}

.ophm-product-info > i{
    position:absolute;

    right:1px;
    top:50%;

    transform:translateY(-50%);

    color:#c18a00;

    font-size:9px;

    opacity:0;

    transition:.25s ease;
}

.ophm-product-item:hover
.ophm-product-info > i{
    opacity:1;
}


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

@media(max-width:900px){

    .ophm-product-dropdown{

        position:relative;

        width:100%;

        display:block;
    }


    /* PRODUCT BUTTON */

    .ophm-product-trigger{

        width:100% !important;

        min-height:50px;

        padding:15px 0 !important;

        display:flex !important;

        align-items:center;

        justify-content:space-between;

        text-align:left;

        color:#032b5c;

        background:transparent !important;

        cursor:pointer;

        -webkit-tap-highlight-color:transparent;
    }


    /* IMPORTANT:
       DISABLE DESKTOP POSITIONING */

    .ophm-product-mega{

        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;

        width:100% !important;

        height:auto !important;

        max-height:0;

        overflow:hidden;

        display:block !important;

        padding:0 !important;

        margin:0 !important;

        background:#f6f8fb;

        border-top:0;

        box-shadow:none;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto;

        transform:none !important;

        transition:
            max-height .4s ease,
            padding .3s ease;
    }


    /* OPEN */

    .ophm-product-dropdown.ophm-product-open
    .ophm-product-mega{

        max-height:1600px;

        padding:10px 0 15px !important;
    }


    /* INNER */

    .ophm-product-mega-inner{

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        display:block !important;
    }


    /* HIDE INTRO ON MOBILE */

    .ophm-product-mega-intro{
        display:none !important;
    }


    /* PRODUCT GRID */

    .ophm-product-grid{

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:7px;

        width:100%;
    }


    /* PRODUCT ITEM */

    .ophm-product-item{

        width:100%;

        min-height:70px;

        grid-template-columns:62px 1fr;

        padding:6px;

        background:#fff;

        border:1px solid #e1e7ee;

        border-radius:4px;

        transform:none !important;
    }


    /* IMAGE */

    .ophm-product-image{

        width:62px;
        height:58px;
    }


    /* TEXT */

    .ophm-product-info h4{

        font-size:12px;

        color:#032b5c;
    }


    .ophm-product-info > i{

        opacity:1;

        right:4px;
    }

}












/* =========================================================
   ODISHA POLE & HIGHMAST
   HIGH MAST SYSTEM PRODUCT PAGE
   PREMIUM INDUSTRIAL DESIGN
   UNIQUE CLASS PREFIX: ophmx-
========================================================= */

.ophmx-page{

    --ophmx-navy:#032b5c;
    --ophmx-dark:#011d40;
    --ophmx-blue:#073f7c;

    --ophmx-gold:#f4b51b;
    --ophmx-gold-dark:#c99508;

    --ophmx-white:#ffffff;
    --ophmx-light:#f5f8fc;
    --ophmx-soft:#edf3f8;

    --ophmx-text:#26384d;
    --ophmx-muted:#68798b;

    --ophmx-border:#dfe6ee;

  

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

    color:var(--ophmx-text);
    background:#fff;

    overflow:hidden;
}

.ophmx-page *,
.ophmx-page *::before,
.ophmx-page *::after{
    box-sizing:border-box;
}

.ophmx-container{
    width:min(1180px,92%);
    margin:0 auto;
}

.ophmx-page img{
    display:block;
    width:100%;
    max-width:100%;
}

.ophmx-page a{
    text-decoration:none;
}


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

.ophmx-tag{

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

    color:var(--ophmx-gold-dark);

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

    letter-spacing:1.5px;
    text-transform:uppercase;
}

.ophmx-tag::before{

    content:"";

    width:28px;
    height:2px;

    background:var(--ophmx-gold);
}

.ophmx-heading{

    margin:10px 0 12px;

    color:var(--ophmx-navy);

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

    font-weight:800;

    letter-spacing:-.5px;
}

.ophmx-description{

    margin:0;

    color:var(--ophmx-muted);

    font-size:14px;
    line-height:1.75;
}

.ophmx-center-heading{

    max-width:720px;

    margin:0 auto 40px;

    text-align:center;
}

.ophmx-center-heading .ophmx-tag{

    justify-content:center;
}


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

.ophmx-btn{

    min-height:45px;

    display:inline-flex;

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

    gap:8px;

    padding:0 19px;

    border-radius:3px;

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

    transition:.25s ease;
}

.ophmx-btn-primary{

    color:#111;

    background:var(--ophmx-gold);
}

.ophmx-btn-primary:hover{

    color:var(--ophmx-navy);

    background:#fff;

    transform:translateY(-2px);
}

.ophmx-btn-outline{

    color:#fff;

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

    background:transparent;
}

.ophmx-btn-outline:hover{

    color:var(--ophmx-navy);

    background:#fff;
}


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

.ophmx-breadcrumb{

    background:#f6f8fb;

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

.ophmx-breadcrumb-inner{

    min-height:44px;

    display:flex;

    align-items:center;

    gap:8px;
}

.ophmx-breadcrumb a{

    color:var(--ophmx-navy);

    font-size:11px;
    font-weight:600;
}

.ophmx-breadcrumb span{

    color:#9ca7b4;

    font-size:10px;
}

.ophmx-breadcrumb strong{

    color:var(--ophmx-gold-dark);

    font-size:11px;
}


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

.ophmx-hero{

    position:relative;

    min-height:535px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--ophmx-dark);
}

.ophmx-hero-bg{

    position:absolute;

    inset:0;

    background:

        

        url("../img/high-mast-hero.png")
        center/cover no-repeat;
}

.ophmx-hero-circle{

    position:absolute;

    right:-130px;
    top:50%;

    width:460px;
    height:460px;

    transform:translateY(-50%);

    border-radius:50%;
/* 
    border:1px solid rgba(244,181,27,.20);

    box-shadow:

        0 0 0 40px rgba(244,181,27,.025),
        0 0 0 80px rgba(244,181,27,.018); */
}

.ophmx-hero-inner{

    position:relative;

    z-index:2;

    width:min(1180px,92%);

    margin:auto;
}

.ophmx-hero-content{

    width:62%;

    max-width:710px;

    padding:70px 0;
}

.ophmx-hero-tag{

    display:flex;

    align-items:center;

    gap:9px;

    color:var(--ophmx-gold);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.7px;
}

.ophmx-hero-tag::before{

    content:"";

    width:30px;
    height:2px;

    background:var(--ophmx-gold);
}

.ophmx-hero-title{

    margin:14px 0 17px;

    color:#fff;

    font-size:52px;

    line-height:1.04;

    font-weight:800;

    letter-spacing:-1.3px;
}

.ophmx-hero-title span{

    color:var(--ophmx-gold);
}

.ophmx-hero-text{

    max-width:640px;

    margin:0;

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

    font-size:14px;

    line-height:1.75;
}

.ophmx-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:25px;
}


/* =========================================================
   QUICK INFO
========================================================= */

.ophmx-quick{

    position:relative;

    z-index:4;

    background:#fff;

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

    box-shadow:0 7px 25px rgba(0,30,70,.07);
}

.ophmx-quick-grid{

    display:grid;

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

.ophmx-quick-item{

    min-height:88px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 18px;

    border-right:1px solid var(--ophmx-border);
}

.ophmx-quick-item:last-child{

    border-right:0;
}

.ophmx-quick-icon{

    width:40px;
    height:40px;

    flex:0 0 40px;

    display:flex;

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

    color:var(--ophmx-navy);

    background:#fff8dc;

    border:1px solid #efd16a;

    border-radius:3px;

    font-size:16px;
}

.ophmx-quick-item h4{

    margin:0 0 2px;

    color:var(--ophmx-navy);

    font-size:17px;

    line-height:1.3;
}

.ophmx-quick-item p{

    margin:0;

    color:var(--ophmx-muted);

    font-size:14px;

    line-height:1.4;
}


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

.ophmx-intro{

    padding:78px 0;

    background:#fff;
}

.ophmx-intro-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:60px;

    align-items:center;
}

.ophmx-image-box{

    position:relative;
}

.ophmx-image-box img{

    height:410px;

    object-fit:cover;

    border-radius:4px;

    box-shadow:
        0 18px 40px rgba(0,30,70,.13);
}

.ophmx-image-box::after{

    content:"";

    position:absolute;

    right:-14px;

    bottom:-14px;

    width:80px;
    height:80px;

    border-right:5px solid var(--ophmx-gold);

    border-bottom:5px solid var(--ophmx-gold);

    z-index:-1;
}

.ophmx-intro-title{

    margin:10px 0 16px;

    color:var(--ophmx-navy);

    font-size:39px;

    line-height:1.1;

    font-weight:800;
}

.ophmx-intro-title span{

    color:var(--ophmx-gold-dark);
}

.ophmx-intro-text{

    margin:0 0 11px;

    color:var(--ophmx-muted);

    font-size:14px;

    line-height:1.75;
}

.ophmx-check-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px 15px;

    margin:20px 0 0;

    padding:0;

    list-style:none;
}

.ophmx-check-grid li{

    display:flex;

    align-items:flex-start;

    gap:8px;

    color:var(--ophmx-navy);

    font-size:12px;

    line-height:1.5;

    font-weight:600;
}

.ophmx-check-grid i{

    margin-top:3px;

    color:var(--ophmx-gold-dark);

    font-size:10px;
}


/* =========================================================
   IMAGE FEATURE STRIP
========================================================= */

.ophmx-image-strip{

    padding:0 0 78px;

    background:#fff;
}

.ophmx-image-grid{

    display:grid;

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

    grid-template-rows:
        210px 210px;

    gap:12px;
}

.ophmx-image-card{

    position:relative;

    overflow:hidden;

    border-radius:4px;

    background:#ddd;
}

.ophmx-image-card:first-child{

    grid-row:1 / 3;
}

.ophmx-image-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.45s ease;
}

.ophmx-image-card:hover img{

    transform:scale(1.05);
}

.ophmx-image-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:25px 18px 16px;

    color:#fff;

    background:
        linear-gradient(
            transparent,
            rgba(0,20,45,.88)
        );
}

.ophmx-image-overlay strong{

    display:block;

    font-size:14px;
}

.ophmx-image-overlay span{

    display:block;

    margin-top:2px;

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

    font-size:10px;
}


/* =========================================================
   FEATURES
========================================================= */

.ophmx-features{

    padding:78px 0;

    background:var(--ophmx-light);
}

.ophmx-feature-grid{

    display:grid;

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

    gap:15px;
}

.ophmx-feature{

    padding:25px 22px;

    background:#fff;

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

    border-radius:4px;

    transition:.25s ease;
}

.ophmx-feature:hover{

    transform:translateY(-4px);

    border-color:#e3c75d;

    box-shadow:
        0 13px 28px rgba(0,30,70,.08);
}

.ophmx-feature-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;
}

.ophmx-feature-icon{

    width:46px;
    height:46px;

    display:flex;

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

    color:var(--ophmx-navy);

    background:#fff8dc;

    border:1px solid #efd474;

    border-radius:3px;

    font-size:18px;
}

.ophmx-feature-number{

    color:#aeb7c1;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;
}

.ophmx-feature h3{

    margin:0 0 7px;

    color:var(--ophmx-navy);

    font-size:16px;

    line-height:1.3;
}

.ophmx-feature p{

    margin:0;

    color:var(--ophmx-muted);

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   TECHNICAL SECTION
========================================================= */

.ophmx-technical{

    padding:78px 0;

    background:#fff;
}

.ophmx-technical-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:55px;

    align-items:center;
}

.ophmx-technical-image{

    position:relative;
}

.ophmx-technical-image img{

    height:420px;

    object-fit:cover;

    border-radius:4px;

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

.ophmx-technical-title{

    margin:10px 0 20px;

    color:var(--ophmx-navy);

    font-size:37px;

    line-height:1.1;

    font-weight:800;
}

.ophmx-spec-table{

    overflow:hidden;

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

    border-radius:4px;
}

.ophmx-spec-row{

    display:grid;

    grid-template-columns:
        40% 60%;

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

.ophmx-spec-row:last-child{

    border-bottom:0;
}

.ophmx-spec-label{

    padding:12px 14px;

    color:var(--ophmx-navy);

    background:#f5f7fa;

    font-size:12px;

    font-weight:700;
}

.ophmx-spec-value{

    padding:12px 14px;

    color:var(--ophmx-muted);

    font-size:12px;
}


/* =========================================================
   DETAIL IMAGE + TEXT
========================================================= */

.ophmx-detail{

    padding:78px 0;

    background:var(--ophmx-light);
}

.ophmx-detail-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:50px;

    align-items:center;
}

.ophmx-detail-content{

    order:1;
}

.ophmx-detail-image{

    order:2;
}

.ophmx-detail-image img{

    height:390px;

    object-fit:cover;

    border-radius:4px;

    box-shadow:
        0 18px 38px rgba(0,30,70,.11);
}

.ophmx-detail-title{

    margin:10px 0 14px;

    color:var(--ophmx-navy);

    font-size:36px;

    line-height:1.1;

    font-weight:800;
}

.ophmx-detail-text{

    margin:0 0 12px;

    color:var(--ophmx-muted);

    font-size:14px;

    line-height:1.75;
}

.ophmx-detail-list{

    margin:20px 0 0;

    padding:0;

    list-style:none;
}

.ophmx-detail-list li{

    display:flex;

    gap:10px;

    padding:9px 0;

    border-bottom:1px solid #dde5ed;

    color:var(--ophmx-text);

    font-size:12px;

    font-weight:600;
}

.ophmx-detail-list i{

    color:var(--ophmx-gold-dark);

    margin-top:4px;

    font-size:10px;
}


/* =========================================================
   CONFIGURATION
========================================================= */

.ophmx-config{

    padding:78px 0;

    background:
        linear-gradient(
            110deg,
            #011d40,
            #063d76
        );
}

.ophmx-config .ophmx-tag{

    color:var(--ophmx-gold);
}

.ophmx-config .ophmx-heading{

    color:#fff;
}

.ophmx-config .ophmx-description{

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

.ophmx-config-grid{

    display:grid;

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

    gap:13px;
}

.ophmx-config-card{

    padding:25px 20px;

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

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

    border-radius:4px;
}

.ophmx-config-number{

    color:var(--ophmx-gold);

    font-size:22px;

    font-weight:800;
}

.ophmx-config-card h3{

    margin:11px 0 6px;

    color:#fff;

    font-size:15px;
}

.ophmx-config-card p{

    margin:0;

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

    font-size:11px;

    line-height:1.65;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.ophmx-applications{

    padding:78px 0;

    background:#fff;
}

.ophmx-application-grid{

    display:grid;

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

    gap:13px;
}

.ophmx-application{

    min-height:175px;

    padding:22px 17px;

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

    border-radius:4px;

    background:#fff;

    transition:.25s ease;
}

.ophmx-application:hover{

    transform:translateY(-4px);

    border-color:#e1c45a;

    box-shadow:
        0 12px 27px rgba(0,30,70,.08);
}

.ophmx-application-icon{

    width:43px;
    height:43px;

    display:flex;

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

    margin-bottom:13px;

    color:var(--ophmx-navy);

    background:#fff8dc;

    border-radius:3px;

    font-size:16px;
}

.ophmx-application h3{

    margin:0 0 6px;

    color:var(--ophmx-navy);

    font-size:14px;

    line-height:1.3;
}

.ophmx-application p{

    margin:0;

    color:var(--ophmx-muted);

    font-size:11px;

    line-height:1.6;
}


/* =========================================================
   INSTALLATION
========================================================= */

.ophmx-installation{

    padding:78px 0;

    background:var(--ophmx-light);
}

.ophmx-install-grid{

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:50px;

    align-items:center;
}

.ophmx-install-image img{

    height:400px;

    object-fit:cover;

    border-radius:4px;

    box-shadow:
        0 18px 38px rgba(0,30,70,.11);
}

.ophmx-install-title{

    margin:10px 0 14px;

    color:var(--ophmx-navy);

    font-size:36px;

    line-height:1.1;

    font-weight:800;
}

.ophmx-install-text{

    margin:0 0 15px;

    color:var(--ophmx-muted);

    font-size:14px;

    line-height:1.75;
}

.ophmx-install-grid-list{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;

    margin-top:20px;
}

.ophmx-install-item{

    padding:12px;

    background:#fff;

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

    border-radius:3px;
}

.ophmx-install-item strong{

    display:block;

    margin-bottom:3px;

    color:var(--ophmx-navy);

    font-size:15px;
}

.ophmx-install-item span{

    color:var(--ophmx-muted);

    font-size:13px;

    line-height:1.5;
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.ophmx-gallery{

    padding:78px 0;

    background:#fff;
}

.ophmx-gallery-grid{

    display:grid;

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

    gap:12px;
}

.ophmx-gallery-item{

    height:220px;

    overflow:hidden;

    border-radius:4px;

    background:#ddd;
}

.ophmx-gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s ease;
}

.ophmx-gallery-item:hover img{

    transform:scale(1.06);
}


/* =========================================================
   PROJECT SUPPORT
========================================================= */

.ophmx-support{

    padding:78px 0;

    background:var(--ophmx-light);
}

.ophmx-support-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:17px;
}

.ophmx-support-card{

    padding:28px;

    background:#fff;

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

    border-radius:4px;
}

.ophmx-support-card h3{

    margin:0 0 8px;

    color:var(--ophmx-navy);

    font-size:19px;
}

.ophmx-support-card > p{

    margin:0 0 17px;

    color:var(--ophmx-muted);

    font-size:15px;

    line-height:1.7;
}

.ophmx-support-list{

    margin:0;
    padding:0;

    list-style:none;
}

.ophmx-support-list li{

    display:flex;

    gap:9px;

    padding:9px 0;

    border-top:1px solid #edf0f4;

    color:var(--ophmx-text);

    font-size:12px;
}

.ophmx-support-list li:first-child{

    border-top:0;
}

.ophmx-support-list i{

    margin-top:4px;

    color:var(--ophmx-gold-dark);

    font-size:10px;
}


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

.ophmx-cta{

    position:relative;

    padding:65px 0;

    overflow:hidden;

    background:

        linear-gradient(
            100deg,
            rgba(1,29,64,.98),
            rgba(3,43,92,.84)
        ),

        url("img/high-mast-cta.jpg")
        center/cover no-repeat;
}

.ophmx-cta-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;
}

.ophmx-cta-content{

    max-width:680px;
}

.ophmx-cta-tag{

    color:var(--ophmx-gold);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;
}

.ophmx-cta-title{

    margin:8px 0 9px;

    color:#fff;

    font-size:37px;

    line-height:1.1;

    font-weight:800;
}

.ophmx-cta-text{

    margin:0;

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

    font-size:13px;

    line-height:1.7;
}

.ophmx-cta-actions{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    flex-shrink:0;
}

.ophmx-phone{

    min-height:45px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:0 16px;

    color:#fff;

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

    border-radius:3px;

    font-size:11px;

    font-weight:700;
}

.ophmx-phone i{

    color:var(--ophmx-gold);
}


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

@media(max-width:1050px){

    .ophmx-hero-content{

        width:70%;
    }

    .ophmx-feature-grid{

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

    .ophmx-config-grid{

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

    .ophmx-application-grid{

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

    .ophmx-gallery-grid{

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

}


/* =========================================================
   900PX
========================================================= */

@media(max-width:900px){

    .ophmx-intro-grid,
    .ophmx-technical-grid,
    .ophmx-detail-grid,
    .ophmx-install-grid,
    .ophmx-support-grid{

        grid-template-columns:1fr;
    }

    .ophmx-detail-content{

        order:1;
    }

    .ophmx-detail-image{

        order:2;
    }

    .ophmx-quick-grid{

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

    .ophmx-quick-item:nth-child(2){

        border-right:0;
    }

    .ophmx-quick-item:nth-child(3),
    .ophmx-quick-item:nth-child(4){

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

    .ophmx-cta-inner{

        flex-direction:column;

        align-items:flex-start;
    }

}


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

@media(max-width:650px){

    .ophmx-container,
    .ophmx-hero-inner{

        width:91%;
    }

    .ophmx-hero{

        min-height:530px;
    }

    .ophmx-hero-bg{

        background:

            

            url("../img/high-mast-hero.png")
            center/cover no-repeat;
    }

    .ophmx-hero-content{

        width:100%;

        padding:55px 0;
    }

    .ophmx-hero-title{

        font-size:38px;
    }

    .ophmx-hero-text{

        font-size:13px;
    }

    .ophmx-hero-buttons{

        flex-direction:column;
    }

    .ophmx-btn{

        width:100%;
    }

    .ophmx-intro,
    .ophmx-features,
    .ophmx-technical,
    .ophmx-detail,
    .ophmx-config,
    .ophmx-applications,
    .ophmx-installation,
    .ophmx-gallery,
    .ophmx-support{

        padding:55px 0;
    }

    .ophmx-heading,
    .ophmx-intro-title{

        font-size:31px;
    }

    .ophmx-image-box img,
    .ophmx-technical-image img,
    .ophmx-detail-image img,
    .ophmx-install-image img{

        height:290px;
    }

    .ophmx-feature-grid{

        grid-template-columns:1fr;
    }

    .ophmx-config-grid{

        grid-template-columns:
            1fr 1fr;
    }

    .ophmx-application-grid{

        grid-template-columns:
            1fr 1fr;
    }

    .ophmx-check-grid{

        grid-template-columns:1fr;
    }

    .ophmx-image-grid{

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            190px 190px 190px;
    }

    .ophmx-image-card:first-child{

        grid-row:auto;

        grid-column:1 / 3;
    }

    .ophmx-install-grid-list{

        grid-template-columns:
            1fr 1fr;
    }

    .ophmx-gallery-grid{

        grid-template-columns:
            1fr 1fr;
    }

    .ophmx-gallery-item{

        height:170px;
    }

    .ophmx-cta-title{

        font-size:30px;
    }

    .ophmx-cta-actions{

        width:100%;

        flex-direction:column;
    }

    .ophmx-cta-actions .ophmx-btn,
    .ophmx-phone{

        width:100%;
    }

}


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

@media(max-width:430px){

    .ophmx-hero-title{

        font-size:33px;
    }

    .ophmx-quick-grid{

        grid-template-columns:1fr;
    }

    .ophmx-quick-item{

        border-right:0 !important;

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

    .ophmx-quick-item:first-child{

        border-top:0;
    }

    .ophmx-config-grid,
    .ophmx-application-grid{

        grid-template-columns:1fr;
    }

    .ophmx-spec-row{

        grid-template-columns:1fr;
    }

    .ophmx-spec-label{

        padding-bottom:5px;
    }

    .ophmx-spec-value{

        padding-top:5px;
    }

    .ophmx-image-grid{

        display:grid;

        grid-template-columns:1fr;

        grid-template-rows:
            230px 180px 180px 180px;
    }

    .ophmx-image-card:first-child{

        grid-column:auto;
    }

    .ophmx-install-grid-list{

        grid-template-columns:1fr;
    }

    .ophmx-gallery-grid{

        grid-template-columns:1fr;
    }

    .ophmx-gallery-item{

        height:210px;
    }

}


 

.ophmx3-section{
    width:100%;
    padding:75px 0;
    background:#f5f8fc;

 
    color:#26384d;
}

.ophmx3-container{
    width:min(1180px,92%);
    margin:0 auto;
}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.ophmx3-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:stretch;
}


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

.ophmx3-card{
    height:100%;

    padding:36px;

    background:#ffffff;

    border:1px solid #dfe6ee;
    border-radius:6px;

    box-shadow:0 8px 28px rgba(2,43,92,.055);

    position:relative;

    overflow:hidden;
}

.ophmx3-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:4px;
    height:100%;

    background:#f4b51b;
}


/* =========================================================
   LABEL
========================================================= */

.ophmx3-label{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:10px;

    color:#c99408;

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

    font-weight:700;

    letter-spacing:1.6px;
    text-transform:uppercase;
}

.ophmx3-label::before{
    content:"";

    width:30px;
    height:2px;

    background:#f4b51b;

    flex-shrink:0;
}


/* =========================================================
   HEADING
========================================================= */

.ophmx3-title{
    margin:0 0 18px;

    color:#032b5c;

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

    font-weight:800;

    letter-spacing:-.6px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ophmx3-text{
    margin:0 0 15px;

    color:#64778c;

    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   INSTALLATION FEATURES
========================================================= */

.ophmx3-features{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:25px;
}

.ophmx3-feature{
    padding:17px 16px;

    background:#f8fafc;

    border:1px solid #dce5ee;

    border-radius:5px;

    transition:all .25s ease;
}

.ophmx3-feature:hover{
    background:#fff;

    border-color:#e1c45a;

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(3,43,92,.07);
}

.ophmx3-feature-icon{
    width:38px;
    height:38px;

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

    margin-bottom:10px;

    color:#032b5c;

    background:#fff7d9;

    border:1px solid #efd477;

    border-radius:4px;

    font-size:15px;
}

.ophmx3-feature-title{
    margin:0 0 4px;

    color:#032b5c;

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

    font-weight:700;
}

.ophmx3-feature-text{
    margin:0;

    color:#6b7c8f;

    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   SPECIFICATION TABLE
========================================================= */

.ophmx3-specifications{
    margin-top:25px;

    overflow:hidden;

    border:1px solid #d8e1ea;

    border-radius:5px;

    background:#fff;
}

.ophmx3-spec-row{
    display:grid;

    grid-template-columns:42% 58%;

    border-bottom:1px solid #d8e1ea;
}

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

.ophmx3-spec-name{
    padding:13px 16px;

    display:flex;
    align-items:center;

    background:#f3f6f9;

    color:#032b5c;

    font-size:13px;
    line-height:1.4;

    font-weight:700;
}

.ophmx3-spec-value{
    padding:13px 16px;

    display:flex;
    align-items:center;

    background:#fff;

    color:#63778b;

    font-size:13px;
    line-height:1.4;
}


/* =========================================================
   NOTE
========================================================= */

.ophmx3-note{
    display:flex;

    gap:9px;

    margin:16px 0 0;

    padding:12px 14px;

    color:#64778c;

    background:#f7f9fb;

    border-left:3px solid #f4b51b;

    font-size:12px;
    line-height:1.6;
}

.ophmx3-note i{
    color:#c99408;

    margin-top:3px;
}


/* =========================================================
   BOTTOM BRAND STRIP
========================================================= */

.ophmx3-bottom{
    display:grid;

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

    gap:12px;

    margin-top:30px;
}

.ophmx3-bottom-item{
    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 16px;

    background:#032b5c;

    border-radius:5px;
}

.ophmx3-bottom-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:flex;

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

    color:#032b5c;

    background:#f4b51b;

    border-radius:50%;

    font-size:14px;
}

.ophmx3-bottom-item strong{
    display:block;

    margin-bottom:2px;

    color:#fff;

    font-size:13px;
}

.ophmx3-bottom-item span{
    color:rgba(255,255,255,.65);

    font-size:11px;
    line-height:1.4;
}


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

@media(max-width:950px){

    .ophmx3-section{
        padding:60px 0;
    }

    .ophmx3-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

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

}


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

@media(max-width:600px){

    .ophmx3-section{
        padding:48px 0;
    }

    .ophmx3-container{
        width:92%;
    }

    .ophmx3-card{
        padding:27px 21px;
    }

    .ophmx3-title{
        font-size:30px;
        letter-spacing:-.3px;
    }

    .ophmx3-text{
        font-size:15px;
        line-height:1.7;
    }

    .ophmx3-features{
        grid-template-columns:1fr;
        gap:10px;
    }

    .ophmx3-bottom{
        grid-template-columns:1fr;
    }

}


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

@media(max-width:420px){

    .ophmx3-card{
        padding:24px 17px;
    }

    .ophmx3-title{
        font-size:27px;
    }

    .ophmx3-spec-row{
        grid-template-columns:1fr;
    }

    .ophmx3-spec-name{
        padding:10px 13px 5px;
    }

    .ophmx3-spec-value{
        padding:5px 13px 11px;
    }

}





/* =========================================================
   ODISHA POLE LIGHTBOX GALLERY
========================================================= */

.odplbx-gallery-section {
    width: 100%;
    padding: 90px 20px;
    background: #f5f8fc;
    box-sizing: border-box;
}

.odplbx-gallery-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.odplbx-gallery-heading {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.odplbx-gallery-tag {
    display: inline-block;
    margin-bottom: 12px;

     font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.8px;

    color: #e4a900;
    text-transform: uppercase;
}

.odplbx-gallery-title {
    margin: 0;

     font-size: 42px;
    line-height: 1.15;
    font-weight: 800;

    color: #062d63;
}

.odplbx-gallery-title span {
    color: #e4a900;
}

.odplbx-gallery-description {
    max-width: 680px;
    margin: 18px auto 0;

     font-size: 16px;
    line-height: 1.7;

    color: #68788b;
}


/* =========================================================
   GALLERY GRID
========================================================= */

.odplbx-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* =========================================================
   GALLERY ITEM
========================================================= */

.odplbx-gallery-item {
    position: relative;

    height: 290px;

    overflow: hidden;

    background: #dce5ef;
    border-radius: 16px;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(6, 45, 99, 0.10);
}

.odplbx-gallery-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.odplbx-gallery-item:hover
.odplbx-gallery-image {
    transform: scale(1.07);
}


/* =========================================================
   OVERLAY
========================================================= */

.odplbx-gallery-overlay {
    position: absolute;
    inset: 0;

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

    padding: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 35%,
            rgba(2,20,45,0.90) 100%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.odplbx-gallery-item:hover
.odplbx-gallery-overlay {
    opacity: 1;
}


/* =========================================================
   OVERLAY CONTENT
========================================================= */

.odplbx-gallery-overlay-content {
    padding-right: 15px;
}

.odplbx-gallery-overlay-content span {
    display: block;

    margin-bottom: 5px;

     font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;

    color: #e4a900;
    text-transform: uppercase;
}

.odplbx-gallery-overlay-content h3 {
    margin: 0;

     font-size: 19px;
    line-height: 1.3;
    font-weight: 800;

    color: #ffffff;
}


/* =========================================================
   VIEW BUTTON
========================================================= */

.odplbx-gallery-view {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;

    background: #e4a900;

    color: #062d63;

    cursor: pointer;

    font-size: 15px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.odplbx-gallery-view:hover {
    transform: scale(1.08);
    background: #ffffff;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.odplbx-lightbox {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: none;

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

    padding: 30px;

    box-sizing: border-box;
}

.odplbx-lightbox.odplbx-lightbox-active {
    display: flex;
}


/* =========================================================
   BACKDROP
========================================================= */

.odplbx-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(1, 15, 35, 0.94);

    backdrop-filter: blur(8px);
}


/* =========================================================
   LIGHTBOX WRAPPER
========================================================= */

.odplbx-lightbox-wrapper {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1200px;

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


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.odplbx-lightbox-image-wrap {
    position: relative;

    width: min(100%, 1050px);

    overflow: hidden;

    border-radius: 12px;

    background: #071c36;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.45);
}

.odplbx-lightbox-image-wrap img {
    width: 100%;
    max-height: 78vh;

    display: block;

    object-fit: contain;

    background: #061a31;
}


/* =========================================================
   LIGHTBOX INFORMATION
========================================================= */

.odplbx-lightbox-info {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

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

    padding: 24px 28px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(2,15,35,0.95)
        );

    color: #ffffff;
}

.odplbx-lightbox-info span {
    display: block;

    margin-bottom: 5px;

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

    color: #e4a900;
}

.odplbx-lightbox-info h3 {
    margin: 0;

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

    color: #ffffff;
}

.odplbx-lightbox-counter {
    flex-shrink: 0;

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

    color: #ffffff;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.odplbx-lightbox-close {
    position: fixed;

    top: 25px;
    right: 28px;

    z-index: 10;

    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;

    background: #e4a900;

    color: #062d63;

    font-size: 20px;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.odplbx-lightbox-close:hover {
    transform: rotate(90deg);
    background: #ffffff;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.odplbx-lightbox-prev,
.odplbx-lightbox-next {
    position: absolute;

    z-index: 5;

    top: 50%;

    transform: translateY(-50%);

    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;

    background: rgba(6,45,99,0.90);

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.odplbx-lightbox-prev {
    left: -75px;
}

.odplbx-lightbox-next {
    right: -75px;
}

.odplbx-lightbox-prev:hover,
.odplbx-lightbox-next:hover {
    background: #e4a900;
    color: #062d63;
}


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

@media (max-width: 1100px) {

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

    .odplbx-lightbox-prev {
        left: 15px;
    }

    .odplbx-lightbox-next {
        right: 15px;
    }

}


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

@media (max-width: 767px) {

    .odplbx-gallery-section {
        padding: 60px 16px;
    }

    .odplbx-gallery-heading {
        margin-bottom: 35px;
    }

    .odplbx-gallery-tag {
        font-size: 11px;
    }

    .odplbx-gallery-title {
        font-size: 30px;
    }

    .odplbx-gallery-description {
        font-size: 14px;
    }

    .odplbx-gallery-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .odplbx-gallery-item {
        height: 250px;
    }

    /* Always show a subtle overlay on mobile */
    .odplbx-gallery-overlay {
        opacity: 1;
        padding: 18px;
    }

    .odplbx-gallery-overlay-content h3 {
        font-size: 17px;
    }

    .odplbx-gallery-view {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }


    /* Lightbox */

    .odplbx-lightbox {
        padding: 15px;
    }

    .odplbx-lightbox-image-wrap {
        border-radius: 9px;
    }

    .odplbx-lightbox-image-wrap img {
        max-height: 72vh;
    }

    .odplbx-lightbox-info {
        padding: 18px;
    }

    .odplbx-lightbox-info h3 {
        font-size: 17px;
    }

    .odplbx-lightbox-info span {
        font-size: 10px;
    }

    .odplbx-lightbox-counter {
        font-size: 11px;
    }

    .odplbx-lightbox-close {
        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;
    }

    .odplbx-lightbox-prev,
    .odplbx-lightbox-next {
        width: 42px;
        height: 42px;

        top: auto;
        bottom: 25px;

        transform: none;
    }

    .odplbx-lightbox-prev {
        left: 20px;
    }

    .odplbx-lightbox-next {
        right: 20px;
    }

}


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

@media (max-width: 480px) {

    .odplbx-gallery-section {
        padding: 50px 13px;
    }

    .odplbx-gallery-title {
        font-size: 27px;
    }

    .odplbx-gallery-item {
        height: 220px;
    }

    .odplbx-lightbox-image-wrap img {
        max-height: 65vh;
    }

}



/* =========================================================
   ROOT
========================================================= */

.opprojectx-page{
    --oppj-navy:#032b5c;
    --oppj-navy-dark:#011d40;
    --oppj-blue:#073b78;
    --oppj-gold:#f5b51b;
    --oppj-gold-dark:#d99d00;
    --oppj-white:#ffffff;
    --oppj-light:#f5f8fc;
    --oppj-border:#e0e7ef;
    --oppj-text:#26364a;
    --oppj-muted:#68788c;

     color:var(--oppj-text);
    background:#fff;

    overflow:hidden;
}

.opprojectx-page *,
.opprojectx-page *::before,
.opprojectx-page *::after{
    box-sizing:border-box;
}

.opprojectx-container{
    width:min(1180px,92%);
    margin:0 auto;
}

.opprojectx-page img{
    display:block;
    max-width:100%;
}


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

.opprojectx-hero{
    position:relative;

    min-height:520px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:var(--oppj-navy);
}

.opprojectx-hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,29,64,.98) 0%,
            rgba(3,43,92,.92) 38%,
            rgba(3,43,92,.50) 68%,
            rgba(3,43,92,.12) 100%
        ),
        url("img/subbanner.png") center/cover no-repeat;
}

.opprojectx-hero-pattern{
    position:absolute;

    right:0;
    top:0;

    width:42%;
    height:100%;

    opacity:.07;

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

    background-size:42px 42px;
}

.opprojectx-hero-container{
    position:relative;
    z-index:2;

    width:min(1180px,92%);

    margin:auto;
}

.opprojectx-hero-content{
    max-width:720px;

    padding:75px 0;
}

.opprojectx-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--oppj-gold);

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

    letter-spacing:1.8px;
}

.opprojectx-label::before{
    content:"";

    width:32px;
    height:3px;

    background:var(--oppj-gold);
}

.opprojectx-hero-title{
    margin:16px 0 18px;

    color:#fff;

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

    font-weight:900;

    letter-spacing:-1.7px;
}

.opprojectx-hero-title span{
    color:var(--oppj-gold);
}

.opprojectx-hero-description{
    max-width:650px;

    margin:0;

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

    font-size:16px;
    line-height:1.75;
}

.opprojectx-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:28px;
}

.opprojectx-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:49px;

    padding:0 22px;

    text-decoration:none;

    border-radius:3px;

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

    transition:.3s ease;
}

.opprojectx-btn-primary{
    color:#111;

    background:var(--oppj-gold);
}

.opprojectx-btn-primary:hover{
    color:var(--oppj-navy);

    background:#fff;

    transform:translateY(-2px);
}

.opprojectx-btn-outline{
    color:#fff;

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

    background:rgba(255,255,255,.04);
}

.opprojectx-btn-outline:hover{
    color:var(--oppj-navy);

    background:#fff;
}


/* =========================================================
   PROJECT NAV
========================================================= */

.opprojectx-nav{
    background:#fff;

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

    box-shadow:0 6px 22px rgba(0,35,75,.06);
}

.opprojectx-nav-list{
    display:flex;
    align-items:center;

    min-height:70px;

    overflow-x:auto;

    scrollbar-width:none;
}

.opprojectx-nav-list::-webkit-scrollbar{
    display:none;
}

.opprojectx-nav-list a{
    flex:0 0 auto;

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

    min-height:70px;

    padding:0 18px;

    color:var(--oppj-navy);

    text-decoration:none;

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

    border-bottom:3px solid transparent;

    transition:.25s ease;
}

.opprojectx-nav-list a:hover,
.opprojectx-nav-list a.active{
    color:#b47b00;

    border-bottom-color:var(--oppj-gold);
}


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

.opprojectx-intro{
    padding:82px 0 65px;

    background:#fff;
}

.opprojectx-intro-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:58px;

    align-items:center;
}

.opprojectx-intro-image{
    position:relative;
}

.opprojectx-intro-image img{
    width:100%;
    height:400px;

    object-fit:cover;

    border-radius:4px;

    box-shadow:0 18px 40px rgba(0,30,70,.13);
}

.opprojectx-intro-image::after{
    content:"";

    position:absolute;

    right:-17px;
    bottom:-17px;

    width:80px;
    height:80px;

    border-right:6px solid var(--oppj-gold);
    border-bottom:6px solid var(--oppj-gold);
}

.opprojectx-intro-content .opprojectx-label{
    color:#b98000;
}

.opprojectx-intro-title{
    margin:14px 0 17px;

    color:var(--oppj-navy);

    font-size:clamp(31px,3.5vw,46px);
    line-height:1.08;

    letter-spacing:-.8px;
}

.opprojectx-intro-title span{
    color:var(--oppj-gold-dark);
}

.opprojectx-intro-text{
    margin:0 0 13px;

    color:var(--oppj-muted);

    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.opprojectx-section-heading{
    max-width:760px;

    margin:0 auto 42px;

    text-align:center;
}

.opprojectx-section-heading .opprojectx-label{
    justify-content:center;
}

.opprojectx-section-heading h2{
    margin:13px 0;

    color:var(--oppj-navy);

    font-size:clamp(30px,3.5vw,44px);
    line-height:1.1;
}

.opprojectx-section-heading p{
    margin:0;

    color:var(--oppj-muted);

    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.opprojectx-applications{
    padding:82px 0;

    background:#f5f8fc;
}

.opprojectx-application-grid{
    display:grid;

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

    gap:18px;
}

.opprojectx-application-card{
    position:relative;

    min-height:470px;

    overflow:hidden;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    border-radius:5px;

    background:#032b5c;

    text-decoration:none;

    box-shadow:0 9px 28px rgba(0,35,75,.08);

    transition:.35s ease;
}

.opprojectx-application-card:hover{
    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,35,75,.15);
}

.opprojectx-application-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s ease;
}

.opprojectx-application-card:hover
.opprojectx-application-image{
    transform:scale(1.05);
}

.opprojectx-application-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(1,29,64,.02) 20%,
            rgba(1,29,64,.30) 48%,
            rgba(1,29,64,.97) 100%
        );
}

.opprojectx-application-content{
    position:relative;
    z-index:2;

    padding:25px;
}

.opprojectx-application-number{
    display:inline-flex;

    width:35px;
    height:28px;

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

    margin-bottom:12px;

    color:#111;

    background:var(--oppj-gold);

    border-radius:2px;

    font-size:10px;
    font-weight:900;
}

.opprojectx-application-content h3{
    margin:0 0 8px;

    color:#fff;

    font-size:22px;
    line-height:1.2;
}

.opprojectx-application-content p{
    margin:0;

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

    font-size:12px;
    line-height:1.65;
}


/* =========================================================
   SECTOR SECTION
========================================================= */

.opprojectx-sectors{
    padding:85px 0;

    background:#fff;
}

.opprojectx-sector-grid{
    display:grid;

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

    gap:13px;
}

.opprojectx-sector-card{
    padding:25px 20px;

    background:#fff;

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

    border-radius:4px;

    transition:.3s ease;
}

.opprojectx-sector-card:hover{
    transform:translateY(-4px);

    border-color:#dfbd5b;

    box-shadow:0 12px 28px rgba(0,35,75,.08);
}

.opprojectx-sector-icon{
    width:49px;
    height:49px;

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

    margin-bottom:15px;

    color:var(--oppj-navy);

    background:#fff7d9;

    border:1px solid #f0d477;

    border-radius:4px;

    font-size:19px;
}

.opprojectx-sector-card h3{
    margin:0 0 7px;

    color:var(--oppj-navy);

    font-size:16px;
}

.opprojectx-sector-card p{
    margin:0;

    color:var(--oppj-muted);

    font-size:11px;
    line-height:1.6;
}


/* =========================================================
   PRODUCT APPLICATION MATRIX
========================================================= */

.opprojectx-matrix{
    padding:82px 0;

    background:#f5f8fc;
}

.opprojectx-matrix-box{
    overflow:hidden;

    background:#fff;

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

    border-radius:5px;

    box-shadow:0 10px 30px rgba(0,35,75,.06);
}

.opprojectx-matrix-head{
    display:grid;

    grid-template-columns:1.2fr 1fr 1fr;

    padding:20px 25px;

    color:#fff;

    background:var(--oppj-navy);
}

.opprojectx-matrix-head div{
    font-size:12px;
    font-weight:800;
    letter-spacing:.5px;
}

.opprojectx-matrix-row{
    display:grid;

    grid-template-columns:1.2fr 1fr 1fr;

    padding:18px 25px;

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

.opprojectx-matrix-row:last-child{
    border-bottom:0;
}

.opprojectx-matrix-row div{
    color:var(--oppj-muted);

    font-size:12px;
    line-height:1.6;
}

.opprojectx-matrix-row div:first-child{
    color:var(--oppj-navy);

    font-weight:800;
}


/* =========================================================
   PROJECT DELIVERY
========================================================= */

.opprojectx-delivery{
    padding:85px 0;

    background:#fff;
}

.opprojectx-delivery-grid{
    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:55px;

    align-items:center;
}

.opprojectx-delivery-image img{
    width:100%;
    height:410px;

    object-fit:cover;

    border-radius:4px;

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

.opprojectx-delivery-content .opprojectx-label{
    color:#b98000;
}

.opprojectx-delivery-title{
    margin:13px 0 15px;

    color:var(--oppj-navy);

    font-size:clamp(31px,3.5vw,45px);
    line-height:1.08;
}

.opprojectx-delivery-description{
    margin:0 0 23px;

    color:var(--oppj-muted);

    font-size:14px;
    line-height:1.75;
}

.opprojectx-delivery-list{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:11px;
}

.opprojectx-delivery-item{
    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:13px;

    background:#f5f8fc;

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

    border-radius:3px;
}

.opprojectx-delivery-item i{
    width:29px;
    height:29px;

    flex:0 0 29px;

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

    color:#111;

    background:var(--oppj-gold);

    border-radius:3px;

    font-size:11px;
}

.opprojectx-delivery-item h4{
    margin:0 0 3px;

    color:var(--oppj-navy);

    font-size:12px;
}

.opprojectx-delivery-item p{
    margin:0;

    color:var(--oppj-muted);

    font-size:10px;
    line-height:1.5;
}


/* =========================================================
   PROJECT FLOW
========================================================= */

.opprojectx-flow{
    padding:82px 0;

    background:
        linear-gradient(
            100deg,
            #011d40,
            #053d78
        );
}

.opprojectx-flow .opprojectx-section-heading h2{
    color:#fff;
}

.opprojectx-flow .opprojectx-section-heading p{
    color:rgba(255,255,255,.68);
}

.opprojectx-flow-grid{
    display:grid;

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

    gap:12px;
}

.opprojectx-flow-card{
    position:relative;

    padding:25px 18px;

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

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

    border-radius:4px;
}

.opprojectx-flow-number{
    width:35px;
    height:35px;

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

    margin-bottom:16px;

    color:#111;

    background:var(--oppj-gold);

    border-radius:50%;

    font-size:11px;
    font-weight:900;
}

.opprojectx-flow-card h3{
    margin:0 0 7px;

    color:#fff;

    font-size:14px;
}

.opprojectx-flow-card p{
    margin:0;

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

    font-size:10px;
    line-height:1.6;
}


/* =========================================================
   SUPPORT STRIP
========================================================= */

.opprojectx-support{
    padding:72px 0;

    background:#fff;
}

.opprojectx-support-box{
    display:grid;

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

    gap:0;

    overflow:hidden;

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

    border-radius:5px;
}

.opprojectx-support-intro{
    padding:30px;

    background:var(--oppj-navy);
}

.opprojectx-support-intro .opprojectx-label{
    color:var(--oppj-gold);
}

.opprojectx-support-intro h2{
    margin:12px 0 8px;

    color:#fff;

    font-size:22px;
    line-height:1.15;
}

.opprojectx-support-intro p{
    margin:0;

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

    font-size:11px;
    line-height:1.6;
}

.opprojectx-support-item{
    padding:30px 20px;

    background:#fff;

    border-left:1px solid var(--oppj-border);
}

.opprojectx-support-item i{
    color:var(--oppj-gold-dark);

    font-size:22px;

    margin-bottom:14px;
}

.opprojectx-support-item h3{
    margin:0 0 6px;

    color:var(--oppj-navy);

    font-size:14px;
}

.opprojectx-support-item p{
    margin:0;

    color:var(--oppj-muted);

    font-size:11px;
    line-height:1.55;
}


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

.opprojectx-cta{
    padding:65px 0;

    background:
        linear-gradient(
            100deg,
            rgba(1,29,64,.98),
            rgba(3,43,92,.89)
        ),
        url("img/projects-cta.png") center/cover no-repeat;
}

.opprojectx-cta-inner{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:35px;
}

.opprojectx-cta-label{
    color:var(--oppj-gold);

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

    letter-spacing:1.7px;
}

.opprojectx-cta-title{
    margin:10px 0 9px;

    color:#fff;

    font-size:clamp(29px,3.5vw,44px);
    line-height:1.08;
}

.opprojectx-cta-description{
    max-width:650px;

    margin:0;

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

    font-size:13px;
    line-height:1.65;
}

.opprojectx-cta-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    flex-shrink:0;
}

.opprojectx-phone{
    display:inline-flex;

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

    gap:9px;

    min-height:49px;

    padding:0 20px;

    color:#fff;

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

    text-decoration:none;

    border-radius:3px;

    font-size:13px;
    font-weight:800;
}

.opprojectx-phone i{
    color:var(--oppj-gold);
}


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

@media(max-width:1100px){

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

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

    .opprojectx-flow-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .opprojectx-support-box{
        grid-template-columns:1fr 1fr;
    }

    .opprojectx-support-intro{
        grid-column:1 / -1;
    }

    .opprojectx-support-item:nth-child(2){
        border-left:0;
    }

}


@media(max-width:900px){

    .opprojectx-intro-grid,
    .opprojectx-delivery-grid{
        grid-template-columns:1fr;
    }

    .opprojectx-delivery-image{
        order:2;
    }

    .opprojectx-delivery-content{
        order:1;
    }

    .opprojectx-matrix{
        overflow-x:auto;
    }

    .opprojectx-matrix-box{
        min-width:760px;
    }

    .opprojectx-cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }

}


@media(max-width:650px){

    .opprojectx-container,
    .opprojectx-hero-container{
        width:91%;
    }

    .opprojectx-hero{
        min-height:550px;
    }

    .opprojectx-hero-bg{
        background:
            linear-gradient(
                90deg,
                rgba(1,29,64,.97),
                rgba(3,43,92,.83)
            ),
            url("img/projects-hero.png") center/cover no-repeat;
    }

    .opprojectx-hero-content{
        padding:55px 0;
    }

    .opprojectx-hero-title{
        font-size:36px;
    }

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

    .opprojectx-hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .opprojectx-btn{
        width:100%;
    }

    .opprojectx-intro,
    .opprojectx-applications,
    .opprojectx-sectors,
    .opprojectx-matrix,
    .opprojectx-delivery,
    .opprojectx-flow{
        padding:55px 0;
    }

    .opprojectx-intro-image img{
        height:300px;
    }

    .opprojectx-application-grid{
        grid-template-columns:1fr;
    }

    .opprojectx-application-card{
        min-height:320px;
    }

    .opprojectx-sector-grid{
        grid-template-columns:1fr 1fr;
    }

    .opprojectx-delivery-image img{
        height:300px;
    }

    .opprojectx-delivery-list{
        grid-template-columns:1fr;
    }

    .opprojectx-flow-grid{
        grid-template-columns:1fr 1fr;
    }

    .opprojectx-support-box{
        grid-template-columns:1fr;
    }

    .opprojectx-support-intro{
        grid-column:auto;
    }

    .opprojectx-support-item{
        border-left:0;
        border-top:1px solid var(--oppj-border);
    }

    .opprojectx-cta-actions{
        width:100%;
        flex-direction:column;
    }

    .opprojectx-cta-actions .opprojectx-btn,
    .opprojectx-phone{
        width:100%;
    }

}


@media(max-width:420px){

    .opprojectx-hero-title{
        font-size:32px;
    }

    .opprojectx-section-heading h2{
        font-size:29px;
    }

    .opprojectx-sector-grid{
        grid-template-columns:1fr;
    }

    .opprojectx-flow-grid{
        grid-template-columns:1fr;
    }

}



.ophm-hide-mobile {
    display: block;
}

@media (max-width: 767px) {
    .ophm-hide-mobile {
        display: none !important;
    }
}






/* ==========================================
   MOBILE EXTRA LOGO
   DESKTOP = HIDDEN
========================================== */

.ophm-mobile-extra-logo {
    display: none;
}


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

@media (max-width: 767px) {

    .ophm-navbar-inner {
        position: relative;
    }

    .ophm-mobile-extra-logo {
        display: flex;

        position: absolute;

        left: 58%;
        top: 50%;

        transform: translate(-50%, -50%);

        width: 135px;
        height: auto;

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

        z-index: 20;

        text-decoration: none;
    }

    .ophm-mobile-extra-logo img {
        display: block;
        margin-left: 20px;
        width: 100%;
        height: auto;

        max-width: 135px;

        object-fit: contain;
    }

}


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

@media (max-width: 480px) {

    .ophm-mobile-extra-logo {
        left: 58%;
        width: 110px;
    }

    .ophm-mobile-extra-logo img {
        max-width: 110px;
                margin-left: 20px;
    }

}