/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    background-color: #ffffff;
    color: #22282a;
    line-height: 1.5;
    overflow-x: hidden;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* Hero Section */
.hero-section {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.hero-background {
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg-image {
    object-fit: contain;
    object-position: center;
}

/* Main Navigation */
.main-nav {
    z-index: 10;
    width: 100%;
}

/* Top Row: Logo and LinkedIn on white background */
.nav-top-row {
    padding: 14px 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.nav-bottom-row {
    padding: 0;
    width: 100%;
    position: relative;
    margin-top: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.logo-container {
    width: 300px;
    height: 48px;
}

.logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-menu {
    gap: 8px;
    padding: 0 16px;
    justify-content: center;
    height: 40px;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: rgba(188, 237, 255, 0);
    color: white;
    text-decoration: none;
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.nav-link:hover {
    background-color: rgba(188, 237, 255, 0.1);
}

.nav-dropdown-wrapper .nav-link:hover {
    background-color: #bcf2ff;
    color: #22282a;
}

.nav-link.dropdown {
    padding-right: 6px;
}

.dropdown-icon {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    transform: scaleY(-1);
}

/* Navigation Dropdown Menu */
.nav-dropdown-wrapper {
    position: relative;
}

/* Invisible bridge to prevent gap - extends hover area */
.nav-dropdown-wrapper::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -50%;
    right: -50%;
    height: 12px;
    background: transparent;
    z-index: 999;
    pointer-events: none;
}

.nav-dropdown-wrapper:hover::before {
    pointer-events: auto;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border-radius: 10px;
    padding: 24px;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    margin-top: 0;
}

.nav-dropdown-wrapper:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}


.nav-dropdown-item {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #22282a;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: block;
}

.nav-dropdown-item:hover {
    color: #00bbe0;
}

.nav-right {
    gap: 30px;
    padding: 0 10px;
    justify-content: flex-end;
}

.linkedin-icon {
    width: 32px;
    height: 32px;
    display: block;
    cursor: pointer;
}

.linkedin-icon img {
    width: 100%;
    height: 100%;
}


/* Hero Content */
.hero-content {
    z-index: 5;
    padding-bottom: 75px;
}

.hero-title {
    
    font-size: 60px;
    line-height: 1.058;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    letter-spacing: -1.2px;
    max-width: 788px;
    white-space: pre-wrap;
    margin-bottom: 30px;
}

.hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 718px;
    white-space: pre-wrap;
    margin-bottom: 30px;
}

.cta-button {
    background-color: #00bbe0;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 26px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    font-weight: 600;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
    margin-bottom: 30px;
}


/* Carousel Arrows */
.carousel-arrow {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    padding: 0 70px;
}

.carousel-arrow.left img {
    transform: rotate(180deg) scaleY(-1);
}

.carousel-arrow.right img {
    transform: scaleY(-1);
}

.carousel-arrow img {
    width: 100%;
    height: 100%;
}

/* Sticky Navigation */
.sticky-nav-container {
    z-index: 100;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.sticky-nav-container.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-nav {
    backdrop-filter: blur(10px);
    background-color: rgba(12, 24, 28, 0.6);
    border-radius: 10px;
    padding: 12px 14px 12px 12px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.sticky-logo {
    width: 74px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.sticky-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sticky-nav-menu {
    padding: 0 26px;
    gap: 8px;
    display: flex;
    align-items: center;
}

.sticky-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: rgba(188, 237, 255, 0);
    color: white;
    text-decoration: none;
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sticky-nav-link:hover {
    background-color: rgba(188, 237, 255, 0.1);
}

.sticky-nav-dropdown-wrapper .sticky-nav-link:hover {
    background-color: #bcf2ff;
    color: #22282a;
}

.sticky-nav-link.dropdown {
    padding-right: 6px;
}

.sticky-nav-link .dropdown-icon {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    transform: scaleY(-1);
    filter: brightness(0) invert(1);
}

/* Sticky Navigation Dropdown Menu */
.sticky-nav-dropdown-wrapper {
    position: relative;
}

/* Invisible bridge to prevent gap - extends hover area */
.sticky-nav-dropdown-wrapper::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -50%;
    right: -50%;
    height: 12px;
    background: transparent;
    z-index: 1000;
    pointer-events: none;
}

.sticky-nav-dropdown-wrapper:hover::before {
    pointer-events: auto;
}

.sticky-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border-radius: 10px;
    padding: 24px;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1001;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    margin-top: 0;
}

.sticky-nav-dropdown-wrapper:hover .sticky-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}


.sticky-nav-dropdown-item {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #22282a;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: block;
}

.sticky-nav-dropdown-item:hover {
    color: #00bbe0;
}


/* About Section */
.about-section {
    background-color: white;
    padding: 96px 0;
    min-height: 582px;
    position: relative;
    overflow: hidden;
}

.about-pattern {
    top: -24px;
    left: -157px;
    width: 1920px;
    height: 1587px;
    overflow: hidden;
    z-index: 0;
}

.pattern-image {
    top: -47px;
    left: 0;
    width: 1920px;
    height: 1634px;
    mask-image: url('https://www.figma.com/api/mcp/asset/a1b516a2-8f15-4ce7-a738-c3d112560db2');
    mask-size: 1920px 1634px;
    mask-position: 0px 0px;
    mask-repeat: no-repeat;
}

.about-left {
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.years-display {
    gap: 0;
    
    font-weight: 600;
}

.years-number {
    font-size: 140px;
    line-height: 0.929;
    color: #00445b;
    background: linear-gradient(to right, #00445b, #00445b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.years-text {
    font-size: 100px;
    line-height: 0.929;
    color: #00445b;
    background: linear-gradient(to right, #00445b, #00445b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.about-heading {
    
    font-weight: 400;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    max-width: 596px;
    white-space: pre-wrap;
    margin: 0;
}

.about-card {
    background: linear-gradient(to bottom, #4a5c6a, #242b38);
    border-radius: 16px;
    padding: 60px;
    width: 100%;
    max-width: 600px;
    min-height: 390px;
    gap: 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.about-card-bg {
    top: -13px;
    left: 0;
    width: 100%;
    height: calc(100% + 13px);
    z-index: 0;
}

.about-card-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.about-card-label {
   
    font-size: 28px;
    line-height: 1.2;
    color: #bcf2ff;
    opacity: 0.3;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 1;
}

.about-card-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: white;
    width: 100%;
    min-height: 172px;
    position: relative;
    z-index: 1;
}

.about-card-text p {
    margin-bottom: 10px;
    font-weight: normal;
}

.about-card-text p:last-child {
    margin-bottom: 0;
}

.about-card-text strong {
    
    font-weight: 700;
}

.about-card .cta-button {
    align-self: baseline;
    margin-top: auto;
    text-decoration: none;
    z-index: 1;
}

/* Systems Section */
.systems-section {
    width: 100%;
    padding: 96px 40px;
}

.systems-header {
    gap: 20px;
    align-items: center;
    text-align: center;
    width: 100%;
}

.systems-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    width: 100%;
}

.systems-subtitle {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    max-width: 800px;
    width: 100%;
}

.bento-container {
    background-color: #8acbdd;
    border-radius: 20px;
    padding: 5px;
    max-width: 1320px;
    width: 100%;
}

.bento-card {
    background-color: #bcf2ff;
    border-radius: 16px;
    padding: 40px 20px;
    height: 270px;
    gap: 20px;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bento-card:hover {
    background-color: #00445B;
}

.bento-content {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    transition: gap 0.3s ease;
}

.bento-card:hover .bento-content {
    gap: 10px;
}

.bento-icon {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    overflow: hidden;
}

.bento-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.bento-card:hover .bento-icon img {
    filter: brightness(1.5);
}

.bento-title {
    
    font-size: 26px;
    line-height: 1.09;
    color: #00445b;
    text-align: center;
    margin: 0;
    transition: color 0.3s ease;
}

.bento-card:hover .bento-title {
    color: white;
}

.bento-arrow {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
}

.bento-arrow img {
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease;
}

.bento-card:hover .bento-arrow img {
    filter: brightness(0) invert(1);
}

/* Services Section */
.services-section {
    width: 100%;
    min-height: 1086px;
    padding: 200px 0;
    position: relative;
    overflow: hidden;
}

.services-bg {
    z-index: 0;
}

.services-bg-image {
    object-fit: cover;
}

.services-header {
    gap: 30px;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 64px;
}

.services-label {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(188, 242, 255, 0.5);
    letter-spacing: 3.6px;
    width: 100%;
    white-space: pre-wrap;
    margin: 0;
}

.services-title-row {
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

.services-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #bcf2ff;
    white-space: pre-wrap;
    margin: 0;
}

.services-description {
    gap: 30px;
    align-items: flex-start;
    min-height: 146px;
}

.services-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: white;
    width: 100%;
    white-space: pre-wrap;
    margin: 0;
}

.services-grid {
    gap: 4px;
    align-items: center;
    justify-content: center;
    max-width: 1740px;
    padding: 4px;
    background-color: #145970;
    border-radius: 24px;
    width: 100%;
}

.service-card {
    background-color: #00445b;
    border-radius: 20px;
    padding: 40px;
    width: 310px;
    height: 360px;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

.service-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    flex-shrink: 0;
}

.service-icon.design {
    background-color: #d7ffc4;
}

.service-icon.installation {
    background-color: #9afff3;
}

.service-icon.maintenance {
    background-color: #83c3ff;
}

.service-icon.testing {
    background-color: #e2c9fb;
}

.service-icon.security {
    background-color: #ffdeeb;
}

.service-icon img {
    width: 36px;
    height: 36px;
}

.service-icon.testing img {
    width: 40px;
    height: 40px;
}

.service-icon.security img {
    width: 50px;
    height: 50px;
}

.service-title {
    
    font-size: 34px;
    line-height: normal;
    color: white;
    width: 100%;
    white-space: pre-wrap;
    margin: 0;
}

/* References Section */
.references-section {
    width: 100%;
    background-color: white;
    padding: 40px 0 180px 0;
}

.logo-wall {
    width: 100%;
    padding: 90px 70px 150px 70px;
    border-radius: 10px;
    overflow: hidden;
}

.logos-container {
    gap: 76px;
    align-items: center;
    justify-content: center;
}

.client-logo {
    mix-blend-mode: luminosity;
    opacity: 0.6;
    flex-shrink: 0;
    position: relative;
}

.client-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-logo:nth-child(1) {
    width: 89px;
    height: 70px;
}

.client-logo:nth-child(2) {
    width: 133px;
    height: 70px;
}

.client-logo:nth-child(3) {
    width: 251px;
    height: 57px;
    opacity: 1;
}

.client-logo:nth-child(4) {
    width: 192px;
    height: 60px;
}

.client-logo:nth-child(5) {
    width: 68px;
    height: 68px;
    opacity: 1;
}

.client-logo:nth-child(6) {
    width: 304px;
    height: 66px;
    opacity: 1;
}

.references-content {
    max-width: 1740px;
    width: 100%;
    min-height: 700px;
    padding: 60px 40px 100px 40px;
    border-radius: 20px;
    margin: 0 auto;
}

.references-bg {
    top: calc(50% + 25px);
    left: -70px;
    transform: translateY(-50%);
    width: 1880px;
    height: 1684px;
    z-index: 0;
}

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

.references-header {
    gap: 20px;
    align-items: center;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.references-label {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #00445b;
    opacity: 0.5;
    letter-spacing: 3.6px;
    width: 100%;
    margin: 0;
}

.references-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    width: 100%;
    margin: 0;
}

.references-subtitle {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    max-width: 808px;
    width: 100%;
    margin: 0;
}

.reference-card {
    gap: 29px;
    width: 100%;
    max-width: 650px;
    min-height: 568px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.reference-image {
    border-radius: 15px;
    overflow: hidden;
    min-height: 400px;
    position: relative;
    width: 100%;
    aspect-ratio: 650 / 400;
}

.reference-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 15px;
}

.reference-overlay {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    z-index: 1;
}


.reference-title {
    
    font-size: 40px;
    line-height: 1.09;
    color: #00445b;
    width: 100%;
    white-space: pre-wrap;
    margin: 0;
}

/* Footer */
.footer {
    background: linear-gradient(90deg, rgba(0, 66, 91, 1) 0%, rgba(0, 66, 91, 1) 100%), linear-gradient(90deg, rgba(127, 143, 148, 1) 0%, rgba(127, 143, 148, 1) 100%);
    padding: 70px 0 60px 0;
    min-height: 407px;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    position: relative;
    left: 0;
    right: 0;
}

.footer .container-fluid {
    max-width: 1920px;
    margin: 0 auto;
    padding-left: 90px;
    padding-right: 90px;
}

.footer-left {
    align-items: flex-start;
    justify-content: space-between;
}

.footer-logo {
    width: 470px;
    height: 66px;
    flex-shrink: 0;
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-links {

    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    color: rgba(188, 237, 255, 0.5);
    gap: 2px;
}

.footer-links p {
    margin: 0;
}

.footer-copyright {

    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    color: rgba(188, 237, 255, 0.5);
    margin: 0;
}

.footer-right {
    gap: 152px;
}

.footer-contact {
    gap: 13px;
    align-items: flex-start;
    flex-shrink: 0;
}

.footer-contact-title {

    font-weight: 500;
    font-size: 18px;
    line-height: 1.15;
    color: rgba(188, 237, 255, 0.5);
    width: 100%;
    white-space: pre-wrap;
    margin: 0;
}

.footer-linkedin {
    gap: 10px;
    align-items: center;
}

.footer-linkedin a {
    display: block;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.footer-linkedin a img {
    width: 100%;
    height: 100%;
}

.linkedin-link {
  
    font-weight: 500;
    font-size: 18px;
    line-height: 0;
    color: #bcedff;
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
    width: auto !important;
    height: auto !important;
}

.footer-emails {
    
    font-weight: 500;
    font-size: 18px;
    line-height: 0;
    color: #bcedff;
    white-space: nowrap;
}

.footer-emails p {
    line-height: 1.15;
    margin-bottom: 10px;
}

.footer-emails p:last-child {
    margin-bottom: 0;
}

.footer-emails a {
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #bcedff;
    cursor: pointer;
}

.footer-emails span {
    color: rgba(188, 237, 255, 0.5);
}


/* Active Nav Link */
.nav-link.active,
.sticky-nav-link.active {
    background-color: rgba(188, 237, 255, 0.2);
    color: #bcf2ff;
}

/* Bootstrap Overrides */
.container-fluid {
    max-width: 1920px;
}

.container {
    max-width: 1600px;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }
}

/* ============================================
   ABOUT PAGE STYLES
   ============================================ */

/* About Hero Section */
.about-hero-section {
    width: 100%;
    height: 1080px;
    overflow: hidden;
    position: relative;
}

.about-hero-background {
    z-index: 0;
}

.about-hero-bg-image {
    object-fit: contain;
}

.about-main-nav {
    z-index: 10;
    padding: 12px 14px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.about-nav-content {
    backdrop-filter: blur(10px);
    background-color: white;
    border-radius: 10px;
    padding: 12px 14px;
    gap: 0;
}

.about-nav-logo {
    width: 74px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.about-nav-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-nav-menu {
    gap: 8px;
    padding: 0 16px;
    display: flex;
    align-items: center;
}

.about-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: rgba(188, 237, 255, 0);
    color: #22282a;
    text-decoration: none;
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.about-nav-link:hover {
    background-color: rgba(188, 237, 255, 0.1);
}

.about-nav-link.active {
    background-color: #bcf2ff;
    color: #22282a;
}

.about-nav-link.dropdown {
    padding-right: 6px;
}

.about-nav-link .dropdown-icon {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    transform: scaleY(-1);
}

/* About Navigation Dropdown Menu */
.about-nav-dropdown-wrapper {
    position: relative;
}

.about-nav-dropdown-wrapper::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -50%;
    right: -50%;
    height: 12px;
    background: transparent;
    z-index: 999;
    pointer-events: none;
}

.about-nav-dropdown-wrapper:hover::before {
    pointer-events: auto;
}

.about-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border-radius: 10px;
    padding: 24px;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    margin-top: 0;
}

.about-nav-dropdown-wrapper:hover .about-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.about-nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.about-nav-dropdown-item {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #22282a;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: block;
}

.about-nav-dropdown-item:hover {
    color: #00bbe0;
}

.about-nav-dropdown-item.active {
    color: #00bbe0;
    font-weight: 700;
}

.about-sticky-nav-dropdown-item.active {
    color: #00bbe0;
    font-weight: 700;
}

.about-nav-dropdown-wrapper .about-nav-link:hover {
    background-color: #bcf2ff;
    color: #22282a;
}

/* About Sticky Navigation */
.about-sticky-nav-container {
    z-index: 100;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.about-sticky-nav-container.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.about-sticky-nav {
    backdrop-filter: blur(10px);
    background-color: rgba(12, 24, 28, 0.6);
    border-radius: 10px;
    padding: 12px 14px;
    gap: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.about-sticky-logo {
    width: 74px;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.about-sticky-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.about-sticky-nav-menu {
    padding: 0 26px;
    gap: 8px;
    display: flex;
    align-items: center;
}

.about-sticky-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: rgba(188, 237, 255, 0);
    color: white;
    text-decoration: none;
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.about-sticky-nav-link:hover {
    background-color: rgba(188, 237, 255, 0.1);
}

.about-sticky-nav-link.active {
    background-color: rgba(188, 237, 255, 0.2);
    color: #bcf2ff;
}

.about-sticky-nav-link.dropdown {
    padding-right: 6px;
}

.about-sticky-nav-link .dropdown-icon {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    transform: scaleY(-1);
    filter: brightness(0) invert(1);
}

/* About Sticky Navigation Dropdown Menu */
.about-sticky-nav-dropdown-wrapper {
    position: relative;
}

.about-sticky-nav-dropdown-wrapper::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -50%;
    right: -50%;
    height: 12px;
    background: transparent;
    z-index: 1000;
    pointer-events: none;
}

.about-sticky-nav-dropdown-wrapper:hover::before {
    pointer-events: auto;
}

.about-sticky-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border-radius: 10px;
    padding: 24px;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1001;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    margin-top: 0;
}

.about-sticky-nav-dropdown-wrapper:hover .about-sticky-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.about-sticky-nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.about-sticky-nav-dropdown-item {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #22282a;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    display: block;
}

.about-sticky-nav-dropdown-item:hover {
    color: #00bbe0;
}

.about-sticky-nav-dropdown-wrapper .about-sticky-nav-link:hover {
    background-color: #bcf2ff;
    color: #22282a;
}

.about-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-hero-title-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 30px;
}

.about-hero-title-main {
    
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    white-space: pre-wrap;
}

.about-hero-title {
    
    font-size: 60px;
    line-height: 1.058;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    letter-spacing: -1.2px;
    max-width: 788px;
    white-space: pre-wrap;
    margin: 0;
}

.about-hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 650px;
    white-space: pre-wrap;
    margin: 0 auto;
}

/* About Timeline Section */
.about-timeline-section {
    width: 100%;
    padding: 90px 40px;
    background-color: white;
}

.about-timeline-header {
    gap: 20px;
    margin-bottom: 40px;
}

.about-section-label {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #00bbe0;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    margin: 0;
}

.about-section-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.about-timeline-intro {
    
    font-size: 20px;
    line-height: normal;
    color: #64607d;
    letter-spacing: -0.4px;
    max-width: 491px;
    white-space: pre-wrap;
    margin: 0;
}

.about-timeline-container {
    height: 281px;
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.about-timeline-line {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%) scaleY(-1);
    width: 2521px;
    height: 93px;
    background: url('https://www.figma.com/api/mcp/asset/e826ff41-6ab2-413b-afab-5e81cefb20ab') no-repeat center;
    background-size: contain;
}

.about-timeline-items {
    position: absolute;
    top: 196px;
    left: 50%;
    transform: translateX(-50%);
    width: 1320px;
    max-width: calc(100% - 600px);
    display: flex;
    gap: 90px;
}

.about-timeline-item {
    flex: 1 0 0;
    min-width: 0;
    position: relative;
}

.about-timeline-point {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background-color: rgba(226, 240, 245, 0.5);
    top: -162px;
    left: 50%;
    transform: translateX(-50%);
}

.about-timeline-point::after {
    content: '';
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 100px;
    background-color: #89adba;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about-timeline-item:nth-child(1) .about-timeline-point {
    left: 20px;
    top: -105px !important;
}

.about-timeline-item:nth-child(2) .about-timeline-point {
    left: calc(33.33% - 32px);
    top: -190px;
}

.about-timeline-item:nth-child(3) .about-timeline-point {
    left: calc(33.33% - 32px);
    top: -168px;
}

.about-timeline-item:nth-child(4) .about-timeline-point {
    left: calc(33.33% - 32px);
    top: -135px;
}

.about-timeline-connector {
    position: absolute;
    width: 130px;
    height: 0;
    top: -130px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    background: url('https://www.figma.com/api/mcp/asset/0aaa41ad-abec-4572-b9f8-2589e9e19c87') no-repeat center;
    background-size: contain;
}

.about-timeline-item:nth-child(1) .about-timeline-connector {
    left: -31px;
}

.about-timeline-item:nth-child(2) .about-timeline-connector {
    width: 42px;
    top: -52px;
    left: calc(33.33% - 21px);
}

.about-timeline-item:nth-child(3) .about-timeline-connector {
    left: calc(66.66% - 31px);
}

.about-timeline-item:nth-child(4) .about-timeline-connector {
    left: calc(100% - 31px);
}

.about-timeline-content {
    gap: 8px;
    white-space: pre-wrap;
    margin-top: 0;
}

.about-timeline-year {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #22282a;
    letter-spacing: -0.66px;
    margin: 0;
}

.about-timeline-text {
    
    font-size: 20px;
    line-height: normal;
    color: #64607d;
    letter-spacing: -0.4px;
    margin: 0;
}

/* About Mission Section */
.about-mission-section {
    width: 100%;
    padding: 90px 40px;
    background-color: white;
}

.about-mission-content {
    gap: 20px;
    max-width: 1320px;
}

.about-mission-text {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    max-width: 1038px;
    white-space: pre-wrap;
    margin: 0;
}

/* About Engineering Divisions Section */
.about-divisions-section {
    width: 100%;
    padding: 200px 40px;
    background-color: white;
    position: relative;
}

.about-divisions-section::before {
    content: '';
    position: absolute;
    top: calc(50% + 6px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1880px;
    height: 774px;
    background: url('https://www.figma.com/api/mcp/asset/cb0dbe43-2630-4c39-950c-4d613200da5d') no-repeat center;
    background-size: contain;
    z-index: 0;
}

.about-divisions-section .container {
    position: relative;
    z-index: 1;
}

.about-divisions-content {
    gap: 30px;
    max-width: 1320px;
}

.about-divisions-title {
    
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
}

.about-divisions-description {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    margin: 0;
}

.about-divisions-description strong {
    
    font-weight: 700;
}

.about-divisions-cards {
    width: 634px;
    height: 369px;
    background-color: #8acbdd;
    border-radius: 24px;
    padding: 5px 4px;
    display: flex;
    gap: 4px;
}

.about-division-card {
    flex: 1;
    background-color: #bcf2ff;
    border-radius: 20px;
    padding: 40px;
    height: 360px;
    justify-content: space-between;
}

.about-division-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: #d7ffc4;
    flex-shrink: 0;
}

.about-division-card.electrical .about-division-icon {
    background: #00445B;
}

.about-division-icon img {
    width: 36px;
    height: 36px;
}

.about-division-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.about-division-text {
    
    font-size: 16px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

/* About Expertise Section */
.about-expertise-section {
    width: 100%;
    padding: 200px 40px;
    background-color: white;
    position: relative;
}

.about-expertise-image {
    border-radius: 0;
    overflow: hidden;
}

.about-expertise-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
}


.about-expertise-content {
    gap: 20px;
    max-width: 660px;
}

.about-expertise-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.about-expertise-subtitle {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    max-width: 660px;
    white-space: pre-wrap;
    margin: 0;
}

.about-expertise-subtitle strong {
    
    font-weight: 700;
}

.about-expertise-list {
    list-style: none;
    padding: 0;
    margin: 22px 0 0 0;
    gap: 0;
}

.about-expertise-item {
    margin-bottom: 20px;
    gap: 0;
    align-items: flex-start;
}

.about-expertise-item:last-child {
    margin-bottom: 0;
}

.about-expertise-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 10px;
    margin-top: -2px;
}

.about-expertise-check-icon img {
    width: 100%;
    height: 100%;
}

.about-expertise-item-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    margin: 0;
    flex: 1;
}

.about-expertise-item-text strong {
    
    font-weight: 700;
}

/* About What We Do Section */
.about-what-we-do-section {
    width: 100%;
    padding: 200px 40px;
    background-color: white;
    position: relative;
}

.about-what-we-do-content {
    gap: 20px;
    max-width: 660px;
}

.about-what-we-do-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.about-what-we-do-subtitle {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    max-width: 660px;
    white-space: pre-wrap;
    margin: 0;
}

.about-what-we-do-list {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.about-what-we-do-item {
    margin-bottom: 20px;
    gap: 0;
    align-items: flex-start;
}

.about-what-we-do-item:last-child {
    margin-bottom: 0;
}

.about-what-we-do-check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 10px;
    margin-top: -2px;
}

.about-what-we-do-check-icon img {
    width: 100%;
    height: 100%;
}

.about-what-we-do-item-text {
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    margin: 0;
    flex: 1;
}

.about-what-we-do-item-text .fw-normal {
    font-weight: 400;
}

.about-what-we-do-image {
    border-radius: 0;
    overflow: hidden;
}

.about-what-we-do-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
}


/* About Integrated Solutions Section */
.about-integrated-solutions-section {
    width: 100%;
    padding: 40px 40px 180px 40px;
    background-color: white;
    min-height: 810px;
    overflow: hidden;
}

.about-integrated-bg {
    width: 1880px;
    height: 810px;
    background: url('https://www.figma.com/api/mcp/asset/7d30327e-4d55-4b3f-8318-9a6d5fad2c7e') no-repeat center;
    background-size: contain;
    z-index: 0;
}

.about-integrated-solutions-section .container {
    position: relative;
    z-index: 1;
}

.about-integrated-content {
    gap: 30px;
    max-width: 1740px;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
}

.about-integrated-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #bcf2ff;
    margin: 0;
}

.about-integrated-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: white;
    max-width: 730px;
}

.about-integrated-text h2 {
    
    font-size: 18px;
    line-height: 1.2;
    color: white;
    margin: 0 0 10px 0;
}

.about-integrated-text h2:last-child {
    margin-bottom: 0;
}

.about-integrated-text strong {
    
    font-weight: 700;
}

.about-integrated-diagram {
    width: auto;
    margin: 0 auto;
    overflow: hidden;
    position: absolute !important;
    top: -60px;
    left: 0;
    right: 0;
    height: 600px;
}

.about-integrated-diagram img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   SECURITY SYSTEMS PAGE STYLES
   ============================================ */

/* Security Hero Section */
.security-hero-section {
    width: 100%;
    height: 670px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.security-hero-background {
    z-index: 0;
}

.security-hero-bg-image {
    object-fit: contain;
    border-radius: 0;
}

.security-main-nav {
    z-index: 10;
    padding: 17px 20px;
}

.security-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
}

.security-hero-title {
    
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    white-space: pre-wrap;
}

.security-hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 650px;
    white-space: pre-wrap;
    margin: 0 auto;
}

/* Security Main Content */
.security-main-content {
    width: 100%;
    position: relative;
    background-color: white;
}

.security-pattern {
    position: absolute;
    bottom: 0;
    height: 448px;
    left: 50%;
    pointer-events: none;
    top: 632px;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
}

.security-pattern::before {
    content: '';
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 1634px;
    background: url('https://www.figma.com/api/mcp/asset/bc225da7-55df-4bec-8747-bf433b9c0fb5') no-repeat center;
    background-size: 1920px 1634px;
    mask-image: url('https://www.figma.com/api/mcp/asset/bc225da7-55df-4bec-8747-bf433b9c0fb5');
    mask-size: 1920px 1634px;
    mask-position: 0px 0px;
    mask-repeat: no-repeat;
    overflow: hidden;
}

/* Security Intro Section */
.security-intro-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.security-intro-section .container {
    max-width: 1320px;
}

.security-intro-section .row.gx-5 {
    gap: 0;
}

.security-intro-section .row.gx-5 > * {
}

.security-intro-content {
    max-width: 640px;
    flex: 1 0 0;
}

.security-eyebrow {
    gap: 10px;
}

.security-eyebrow-text {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: #00bbe0;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    margin: 0;
}

.security-intro-text {
    
    font-size: 22px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.security-intro-text strong {
    
    font-weight: 700;
}

.security-intro-image {
    max-width: 558px;
    height: 415px;
    flex: 1 0 0;
    display: flex;
    align-items: center;
}

.security-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.security-image-right {
    margin-left: auto;
    justify-content: flex-end;
}

/* Security System Section */
.security-system-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.security-system-section .container {
    max-width: 1320px;
}

.security-system-section .row.gx-5 {
    gap: 0;
}

.security-system-section .row.gx-5 > * {
}

.security-system-content {
    padding: 40px 0 60px 0;
    flex: 1 0 0;
}

.security-system-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.security-system-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.security-system-text strong {
    
    font-weight: 700;
}

/* Security Features Grid */
.security-features-grid {
    background-color: #e2f0f5;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
}

.security-feature-card {
    background-color: #f5fbfc;
    border-radius: 20px;
    padding: 30px;
    flex: 1 0 0;
    min-width: 330px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.security-feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.security-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.security-feature-content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.security-feature-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
}

.security-feature-text {
    
    font-size: 16px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

/* ============================================
   INDUSTRIAL AUTOMATION PAGE STYLES
   ============================================ */

/* Industrial Hero Section */
.industrial-hero-section {
    width: 100%;
    height: 670px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.industrial-hero-background {
    z-index: 0;
}

.industrial-hero-bg-image {
    object-fit: contain;
    border-radius: 0;
}

.industrial-main-nav {
    z-index: 10;
    padding: 17px 20px;
}

.industrial-main-nav .nav-link {
    color: #22282a;
}


.industrial-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
}

.industrial-hero-title {
    
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    white-space: pre-wrap;
}

.industrial-hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 650px;
    white-space: pre-wrap;
    margin: 0 auto;
}

/* Industrial Main Content */
.industrial-main-content {
    width: 100%;
    position: relative;
    background-color: white;
}

/* Industrial Intro Section */
.industrial-intro-section {
    width: 100%;
    padding: 40px 0 100px 0;
    position: relative;
    z-index: 1;
}

.industrial-intro-section .container {
    max-width: 1320px;
}

.industrial-intro-section .row {
    gap: 0;
}

.industrial-intro-section .row > * {
    padding-left: 0;
    padding-right: 0;
}

.industrial-intro-content {
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.industrial-eyebrow {
    gap: 10px;
    align-items: center;
}

.industrial-bracket {
    
    font-size: 18px;
    line-height: 1;
    color: #00bbe0;
    display: inline-block;
}

.industrial-eyebrow-text {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: #00bbe0;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    margin: 0;
}

.industrial-intro-text {
    
    font-size: 22px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
    min-height: 160px;
}

.industrial-intro-text strong {
    
    font-weight: 700;
}

.industrial-intro-subtitle {
    
    font-size: 22px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
    font-weight: normal;
}

.industrial-intro-subtitle strong {
    
    font-weight: 700;
}

.industrial-intro-image {
    position: relative;
}

.industrial-intro-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}

/* Industrial Services Section */
.industrial-services-section {
    width: 100%;
    padding: 0 0 100px 0;
    position: relative;
    z-index: 1;
}

.industrial-services-section .container {
    max-width: 1320px;
}

.industrial-services-title {
    
    font-weight: 600;
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 30px;
    white-space: pre-wrap;
}

.industrial-services-grid {
    background-color: #b0e0ed;
    border-radius: 24px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    max-width: 1740px;
    width: 100%;
}

@media (max-width: 1400px) {
    .industrial-services-grid {
        grid-template-columns: 1fr;
    }
}

.industrial-service-card {
    background-color: #d8f7ff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 21px;
    min-height: 300px;
}

.industrial-service-header {
    display: flex;
    gap: 21px;
    width: 100%;
    align-items: center;
}

.industrial-service-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.industrial-service-icon img {
    width: 39px;
    height: 40px;
    object-fit: contain;
}

.industrial-service-icon[style*="#009999"] img,
.industrial-service-icon[style*="#97ede2"] img {
    width: 42px;
    height: 42px;
}

.industrial-service-icon[style*="#00445b"] img {
    width: 36px;
    height: 36px;
}

.industrial-service-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    flex: 1 0 0;
}

.industrial-service-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    flex: 1 0 0;
    justify-content: center;
}

.industrial-service-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0 0 10px 0;
    white-space: pre-wrap;
}

.industrial-service-text:last-child {
    margin-bottom: 0;
}

.industrial-service-text strong {
    
    font-weight: 700;
}

/* ============================================
   FIRE & GAS DETECTION PAGE STYLES
   ============================================ */

/* Fire & Gas Hero Section */
.fire-gas-hero-section {
    width: 100%;
    height: 670px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.fire-gas-hero-background {
    z-index: 0;
}

.fire-gas-hero-bg-image {
    object-fit: contain;
    border-radius: 0;
}

.fire-gas-main-nav {
    z-index: 10;
    padding: 17px 20px;
}

.fire-gas-main-nav .nav-link {
    color: #22282a;
}


.fire-gas-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
}

.fire-gas-hero-title {
    
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    white-space: pre-wrap;
    max-width: 788px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.fire-gas-hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 650px;
    white-space: pre-wrap;
    margin: 0 auto;
}

/* Fire & Gas Main Content */
.fire-gas-main-content {
    width: 100%;
    position: relative;
    background-color: white;
}

.fire-gas-pattern {
    position: absolute;
    bottom: 0;
    height: 448px;
    left: 50%;
    pointer-events: none;
    top: 632px;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
}

.fire-gas-pattern::before {
    content: '';
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 1634px;
    background: url('https://www.figma.com/api/mcp/asset/97f5f573-1a1a-4180-a7cb-31fac7434e9e') no-repeat center;
    background-size: 1920px 1634px;
    mask-image: url('https://www.figma.com/api/mcp/asset/97f5f573-1a1a-4180-a7cb-31fac7434e9e');
    mask-size: 1920px 1634px;
    mask-position: 0px 0px;
    mask-repeat: no-repeat;
    overflow: hidden;
}

/* Fire & Gas Section */
.fire-gas-section {
    width: 100%;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.fire-gas-section .container {
    max-width: 1320px;
}

.fire-gas-section .row.gx-5 {
    gap: 0;
}

.fire-gas-section .row.gx-5 > * {
}

.fire-gas-content {
    max-width: 640px;
    flex: 1 0 0;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fire-gas-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.fire-gas-subtitle {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.fire-gas-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-gas-text .fw-bold {
    
    font-weight: 700;
}

.fire-gas-image {
    max-width: 490px;
    height: 430px;
    flex: 1 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-gas-image-right {
    margin-left: auto;
    justify-content: flex-end;
}

.fire-gas-image-wrapper {
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scaleY(-1);
}

.fire-gas-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.fire-gas-section-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

/* Fire & Gas Cards Container */
.fire-gas-cards-container {
    background-color: #b0e0ed;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    gap: 5px;
    max-width: 1740px;
    width: 100%;
}

.fire-gas-card {
    background-color: #d8f7ff;
    border-radius: 20px;
    padding: 40px;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.fire-gas-card-image {
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.fire-gas-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 10px;
}

.fire-gas-card-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.fire-gas-card-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
}

.fire-gas-card-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-gas-card-text .fw-bold {
    
    font-weight: 700;
}

.fire-gas-card-divider {
    height: 1px;
    width: 100%;
    background: url('https://www.figma.com/api/mcp/asset/e51882de-811c-4815-aad1-d0aea05dcaac') no-repeat center;
    background-size: contain;
}

.fire-gas-card-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fire-gas-card-detail {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0 0 10px 0;
    white-space: pre-wrap;
}

.fire-gas-card-detail:last-child {
    margin-bottom: 0;
}

.fire-gas-card-detail .fw-bold {
    
    font-weight: 700;
}

/* Fire & Gas Detection Cards */
.fire-gas-detection-cards {
    background-color: #e2f0f5;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    gap: 5px;
    max-width: 1740px;
    width: 100%;
}

.fire-gas-detection-card {
    background-color: #f5fbfc;
    border-radius: 20px;
    padding: 40px;
    flex: 1 0 0;
    display: flex;
    gap: 20px;
    align-items: center;
    min-height: 160px;
}

.fire-gas-detection-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fire-gas-detection-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.fire-gas-detection-content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fire-gas-detection-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-gas-detection-text {
    
    font-size: 18px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

/* Fire & Gas Why Choose Section */
.fire-gas-why-choose {
    padding: 20px 0;
    position: relative;
    max-width: 1320px;
}

.fire-gas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    max-width: 1320px;
}

.fire-gas-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding-left: 27px;
    position: relative;
    min-height: 20px;
}

.fire-gas-benefit-item:last-child {
    margin-bottom: 0;
}

.fire-gas-check-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.fire-gas-benefit-item span {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
}

.fire-gas-benefit-item .fw-bold {
    
    font-weight: 700;
}

.fire-gas-benefit-item .fw-normal {
    
    font-weight: 400;
}

/* ============================================
   FIRE PROTECTION SYSTEMS PAGE STYLES
   ============================================ */

/* Fire Protection Hero Section */
.fire-protection-hero-section {
    width: 100%;
    height: 670px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.fire-protection-hero-background {
    z-index: 0;
}

.fire-protection-hero-bg-image {
    object-fit: contain;
    border-radius: 0;
}

.fire-protection-main-nav {
    z-index: 10;
    padding: 17px 20px;
}

.fire-protection-main-nav .nav-link {
    color: #22282a;
}


.fire-protection-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
}

.fire-protection-hero-title {
    
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    white-space: pre-wrap;
}

.fire-protection-hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 650px;
    white-space: pre-wrap;
    margin: 0 auto;
}

/* Fire Protection Main Content */
.fire-protection-main-content {
    width: 100%;
    position: relative;
    background-color: white;
}

.fire-protection-pattern {
    position: absolute;
    bottom: 0;
    height: 448px;
    left: 50%;
    pointer-events: none;
    top: 632px;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
}

.fire-protection-pattern::before {
    content: '';
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 1634px;
    background: url('https://www.figma.com/api/mcp/asset/006a9011-9254-45a0-9110-4f85a209c3cd') no-repeat center;
    background-size: 1920px 1634px;
    mask-image: url('https://www.figma.com/api/mcp/asset/006a9011-9254-45a0-9110-4f85a209c3cd');
    mask-size: 1920px 1634px;
    mask-position: 0px 0px;
    mask-repeat: no-repeat;
    overflow: hidden;
}

/* Fire Protection Intro Section */
.fire-protection-intro-section {
    width: 100%;
    padding: 90px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-intro-section .container {
    max-width: 1320px;
}

.fire-protection-intro-section .row.gx-5 {
    gap: 0;
}

.fire-protection-intro-section .row.gx-5 > * {
}

.fire-protection-intro-content {
    max-width: 640px;
    flex: 1 0 0;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.fire-protection-eyebrow {
    gap: 10px;
    align-items: center;
}

.fire-protection-eyebrow-text {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    color: #00bbe0;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    margin: 0;
}

.fire-protection-intro-text {
    
    font-size: 22px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-intro-text strong {
    
    font-weight: 700;
}

.fire-protection-intro-image {
    max-width: 550px;
    height: 400px;
    flex: 1 0 0;
    display: flex;
    align-items: center;
}

.fire-protection-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.fire-protection-image-right {
    margin-left: auto;
    justify-content: flex-end;
}

/* Fire Protection Get More Section */
.fire-protection-get-more-section {
    width: 100%;
    padding: 40px 70px;
    position: relative;
    z-index: 1;
}

.fire-protection-get-more-section .container {
    max-width: 1320px;
}

.fire-protection-get-more-section .row.gx-5 {
    gap: 0;
}

.fire-protection-get-more-section .row.gx-5 > * {
}

.fire-protection-get-more-content {
    max-width: 691px;
    padding: 80px 0 20px 0;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.fire-protection-get-more-image {
    max-width: 550px;
    height: 400px;
    flex: 1 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-protection-get-more-image.fire-protection-image-right {
    justify-content: flex-end;
}

.fire-protection-get-more-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* Fire Protection System Section */
.fire-protection-system-section {
    width: 100%;
    padding: 80px 0 40px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-system-section .container {
    max-width: 1320px;
}

.fire-protection-system-section .row.gx-5 {
    gap: 0;
}

.fire-protection-system-section .row.gx-5 > * {
}

.fire-protection-system-content {
    padding: 20px 0;
    flex: 1 0 0;
}

.fire-protection-system-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.fire-protection-system-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fire-protection-system-subtitle {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-system-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-system-text strong {
    
    font-weight: 700;
}

.fire-protection-system-image {
    max-width: 550px;
    height: 400px;
    flex: 1 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-protection-system-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* Fire Protection Types Section */
.fire-protection-types-section {
    width: 100%;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-types-section .container {
    max-width: 1320px;
}

.fire-protection-types-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 30px;
    white-space: pre-wrap;
}

.fire-protection-types-grid {
    background-color: #e2f0f5;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 1740px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.fire-protection-type-card {
    background-color: #f5fbfc;
    border-radius: 20px;
    padding: 30px;
    flex: 1 0 0;
    min-width: 330px;
    min-height: 160px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.fire-protection-type-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fire-protection-type-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.fire-protection-type-content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fire-protection-type-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
}

.fire-protection-type-text {
    
    font-size: 16px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

/* Fire Protection Benefits Section */
.fire-protection-benefits-section {
    width: 100%;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-benefits-section .container {
    max-width: 1320px;
}

.fire-protection-benefits-container {
    padding: 40px 0;
}

.fire-protection-benefits-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.fire-protection-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.fire-protection-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding-left: 27px;
    position: relative;
    min-height: 20px;
}

.fire-protection-benefit-item:last-child {
    margin-bottom: 0;
}

.fire-protection-check-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: contain;
}

.fire-protection-benefit-item span {
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
}

/* Fire Protection Gas Section */
.fire-protection-gas-section {
    width: 100%;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-gas-section .container {
    max-width: 1320px;
}

.fire-protection-gas-section .row.gx-5 {
    gap: 0;
}

.fire-protection-gas-section .row.gx-5 > * {
}

.fire-protection-gas-content {
    max-width: 640px;
    flex: 1 0 0;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.fire-protection-gas-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-gas-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-capabilities {
    padding: 40px 0;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.fire-protection-capabilities-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-capabilities-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-gas-image {
    max-width: 560px;
    height: 482px;
    flex: 1 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-protection-gas-image.fire-protection-image-right {
    justify-content: flex-end;
}

.fire-protection-gas-image-wrapper {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}

.fire-protection-gas-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.fire-protection-gas-types-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin: 40px 0 30px 0;
    white-space: pre-wrap;
}

.fire-protection-gas-types-grid {
    background-color: #b0e0ed;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 1740px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.fire-protection-gas-type-card {
    background-color: #d8f7ff;
    border-radius: 20px;
    padding: 40px;
    flex: 1 0 0;
    min-width: 310px;
    min-height: 160px;
    height: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.fire-protection-gas-type-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fire-protection-gas-type-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.fire-protection-gas-type-content {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fire-protection-gas-type-title {
    
    font-weight: 600;
    font-size: 22px;
    line-height: normal;
    color: #00445b;
    margin: 0;
}

.fire-protection-gas-type-text {
    
    font-size: 16px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-gas-benefits-container {
    padding: 20px 0;
}

.fire-protection-gas-benefits-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.fire-protection-gas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.fire-protection-gas-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding-left: 27px;
    position: relative;
    min-height: 20px;
}

.fire-protection-gas-benefit-item:last-child {
    margin-bottom: 0;
}

.fire-protection-gas-benefit-item span {
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
}

/* Fire Protection Micro Systems Section */
.fire-protection-micro-section {
    width: 100%;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-micro-section .container {
    max-width: 1320px;
}

.fire-protection-micro-grid {
    background-color: #b0e0ed;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    gap: 4px;
    max-width: 1740px;
    width: 100%;
}

.fire-protection-micro-content-card {
    background-color: #d8f7ff;
    border-radius: 20px;
    padding: 60px;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fire-protection-micro-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fire-protection-micro-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-micro-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-micro-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 460px;
}

.fire-protection-micro-features-title {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-micro-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.fire-protection-micro-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding-left: 27px;
    position: relative;
    min-height: 20px;
}

.fire-protection-micro-feature-item:last-child {
    margin-bottom: 0;
}

.fire-protection-micro-feature-item span {
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #22282a;
}

.fire-protection-micro-image-card {
    background-color: white;
    border-radius: 20px;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.fire-protection-micro-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 20px;
}

/* Fire Protection Kitchen Section */
.fire-protection-kitchen-section {
    width: 100%;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.fire-protection-kitchen-section .container {
    max-width: 1320px;
}

.fire-protection-kitchen-grid {
    background-color: #00445b;
    border-radius: 24px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 4px;
    max-width: 1740px;
    width: 100%;
}

.fire-protection-kitchen-content-card {
    background-color: #00445b;
    border-radius: 20px;
    padding: 40px 60px;
    grid-column: 1;
    grid-row: 1;
    height: 387px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.fire-protection-kitchen-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #bcf2ff;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-kitchen-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #bcf2ff;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-kitchen-image-card {
    background-color: white;
    border-radius: 20px;
    grid-column: 2;
    grid-row: 1;
    height: 390px;
    overflow: hidden;
}

.fire-protection-kitchen-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 20px;
}

.fire-protection-kitchen-features-card {
    background-color: #2a6e85;
    border-radius: 20px;
    padding: 34px 40px;
    grid-column: 1;
    grid-row: 2;
    height: 276px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fire-protection-kitchen-features-title {
    
    font-size: 32px;
    line-height: normal;
    color: #bcf2ff;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-kitchen-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.fire-protection-kitchen-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 27px;
    position: relative;
    min-height: 20px;
}

.fire-protection-kitchen-feature-item span {
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: white;
}

.fire-protection-kitchen-feature-item .fw-normal {
    
    font-weight: 400;
}

.fire-protection-kitchen-ideal-card {
    background-color: #2a6e85;
    border-radius: 20px;
    padding: 34px 40px;
    grid-column: 2;
    grid-row: 2;
    height: 276px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fire-protection-kitchen-ideal-title {
    
    font-size: 32px;
    line-height: normal;
    color: #bcf2ff;
    margin: 0;
    white-space: pre-wrap;
}

.fire-protection-kitchen-ideal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.fire-protection-kitchen-ideal-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 27px;
    position: relative;
    min-height: 20px;
}

.fire-protection-kitchen-ideal-item span {
    
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: white;
}

/* ============================================
   REFERENCES PAGE STYLES
   ============================================ */

/* References Hero Section */
.references-hero-section {
    width: 100%;
    height: 670px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.references-hero-background {
    z-index: 0;
}

.references-hero-bg-image {
    object-fit: contain;
    border-radius: 0;
}

.references-main-nav {
    z-index: 10;
    padding: 17px 20px;
}

.references-main-nav .nav-link {
    color: #22282a;
}


.references-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
    gap: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.references-hero-title {
    
    font-weight: 600;
    font-size: 60px;
    line-height: 1.058;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    max-width: 788px;
    margin: 0;
}

.references-hero-subtitle {
    
    font-size: 20px;
    line-height: 1.5;
    color: white;
    text-align: center;
    max-width: 650px;
    margin: 0;
}

/* References Stats Section */
.references-stats-container {
    width: 100%;
    max-width: 1024px;
    margin-top: 20px;
}

.references-stats-border {
    border: 1px solid white;
    border-radius: 24px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 1024px;
}

.references-stats-portfolio {
    height: 68px;
    background-color: transparent;
    border-radius: 20px 0 0 20px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 468px;
    margin-right: -230px;
    overflow: hidden;
}

.references-stats-portfolio-text {
    
    font-weight: 600;
    font-size: 21px;
    line-height: normal;
    color: white;
    text-transform: uppercase;
    margin: 0;
    padding-left: 37px;
}

.references-stats-items {
    gap: 84px;
    padding: 0 270px 0 0;
    margin-right: -230px;
    flex: 1;
    justify-content: center;
}

.references-stat-item {
    gap: 6px;
    align-items: flex-end;
}

.references-stat-numbers-wrapper {
    height: 40px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.references-stat-numbers {
    
    font-size: 48px;
    line-height: 1.09;
    color: #e2f0f5;
    text-align: center;
    position: relative;
    white-space: nowrap;
}

#stat-projects-wrapper {
    width: 103px;
}

#stat-countries-wrapper {
    width: 28px;
}

#stat-industries-wrapper {
    width: 28px;
}

.references-stat-label {
    
    font-weight: 600;
    font-size: 21px;
    line-height: normal;
    color: #e2f0f5;
    text-align: center;
    letter-spacing: 1.6538px;
    text-transform: uppercase;
    margin: 0;
}

/* References Main Content */
.references-main-content {
    width: 100%;
    padding: 88px 0 0 0;
    background-color: white;
    position: relative;
    min-height: calc(100vh - 640px);
}

.references-main-content .container {
    max-width: 1600px;
    padding: 0 160px;
}

.references-tabs-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* References Tabs */
.references-tabs {
    border: none;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    max-width: 1539px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.references-tab-item {
    flex: 1 0 0;
    min-width: 0;
}

.references-tab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px;
    border: 1px solid #edeff0 !important;
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 60px;
    justify-content: flex-start;
}

.references-tab:hover:not(.active) {
    border-color: rgba(66, 86, 96, 0.1) !important;
    background-color: rgba(109, 116, 119, 0.06) !important;
}

.references-tab.active {
    background-color: rgba(188, 242, 255, 0.3) !important;
    border-color: transparent;
}

.references-tab.active .references-tab-title {
    opacity: 1;
}

.references-tab-icon-wrapper {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: transparent !important;
    flex-shrink: 0;
    padding: 6px;
}

.references-tab.active .references-tab-icon-wrapper {
    background-color: #bcf2ff !important;
}

.references-tab-icon-wrapper.active {
    background-color: #bcf2ff !important;
}

.references-tab-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    transform: scaleY(-1);
}

.references-tab-icon-wrapper .references-tab-icon {
    width: 100%;
    height: 100%;
}

.references-tab-title {
    
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5;
    color: #22282a;
    margin: 0;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.references-tab.active .references-tab-title {
    opacity: 1;
}

/* All Tab Special Styling */
.references-tab-item-all {
    flex: 0 0 auto;
}

.references-tab-all {
    justify-content: center;
    padding: 6px;
    width: 60px;
    flex: 0 0 60px;
    min-height: 60px;
    border-color: rgba(66, 86, 96, 0.1);
    min-height: 60px;
    height: auto;
}

.references-tab-all .references-tab-title {
    opacity: 1;
}

.references-tab-all:hover:not(.active) {
    background-color: rgba(109, 116, 119, 0.06);
}

/* References Tab Content */
.references-tab-content {
    width: 100%;
}

.references-table-container {
    background-color: rgba(226, 240, 245, 0.5);
    border-radius: 34px;
    padding: 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.references-table-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 52px;
    width: 100%;
    gap: 0;
}

.references-table-header-item {
    
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #22282a;
    margin: 0;
    flex-shrink: 0;
}

.references-table-divider {
    height: 1px;
    width: 100%;
    background: url('https://www.figma.com/api/mcp/asset/64678770-086e-4bae-baa9-b6e6a2789736') no-repeat center;
    background-size: contain;
    margin: 0;
}

.references-table-body {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 52px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.references-table-body::-webkit-scrollbar {
    width: 8px;
}

.references-table-body::-webkit-scrollbar-track {
    background: rgba(226, 240, 245, 0.3);
    border-radius: 4px;
}

.references-table-body::-webkit-scrollbar-thumb {
    background: rgba(0, 68, 91, 0.3);
    border-radius: 4px;
}

.references-table-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 68, 91, 0.5);
}

.references-table-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    min-height: auto;
    gap: 0;
}

.references-table-cell {
    
    font-size: 16px;
    line-height: 1.5;
    color: #22282a;
    margin: 0;
    flex-shrink: 0;
}

.references-table-cell-client {
    font-weight: 400;
}

.references-table-cell-industry {
    font-weight: 300;
    opacity: 0.8;
}

.references-table-cell-location {
    font-weight: 300;
    opacity: 0.8;
}

.references-table-row-divider {
    height: 1px;
    width: 100%;
    background: url('https://www.figma.com/api/mcp/asset/dadc29bb-a5e4-4f4e-a614-7fb7629bf9b6') no-repeat center;
    background-size: contain;
    margin: 0;
    flex-shrink: 0;
}

.references-table-empty {
    
    font-size: 16px;
    color: #22282a;
    opacity: 0.6;
    text-align: center;
    padding: 40px 0;
    margin: 0;
}

/* Responsive adjustments for References */
@media (max-width: 1400px) {
    .references-main-content .container {
        padding: 0 40px;
    }
    
    .references-tabs {
        flex-wrap: wrap;
    }
    
    .references-tab-item {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 992px) {
    .references-hero-title {
        font-size: 40px;
        letter-spacing: 3px;
    }
    
    .references-hero-subtitle {
        font-size: 18px;
    }
    
    .references-stats-border {
        flex-direction: column;
        padding: 20px;
    }
    
    .references-stats-portfolio {
        width: 100%;
        border-radius: 20px;
        margin: 0;
        min-width: auto;
    }
    
    .references-stats-items {
        flex-direction: column;
        gap: 20px;
        padding: 0;
        margin: 0;
    }
    
    .references-tabs {
        flex-direction: column;
    }
    
    .references-tab-item {
        flex: 1 0 0;
        width: 100%;
    }
    
    .references-table-header,
    .references-table-body {
        padding: 0 20px;
    }
    
    .references-table-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 0;
    }
    
    .references-table-cell {
        width: 100% !important;
    }
}

/* ============================================
   BMS (BUILDING MANAGEMENT SYSTEM) PAGE STYLES
   ============================================ */

/* BMS Hero Section */
.bms-hero-section {
    width: 100%;
    height: 670px;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.bms-hero-background {
    z-index: 0;
}

.bms-hero-bg-image {
    object-fit: contain;
    border-radius: 0;
}

.bms-main-nav {
    z-index: 10;
    padding: 17px 20px;
}

.bms-main-nav .nav-link {
    color: #22282a;
}


.bms-hero-content {
    z-index: 5;
    width: 100%;
    max-width: 1880px;
    padding: 0 20px;
}

.bms-hero-title {
    
    font-weight: 600;
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: 5.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    white-space: pre-wrap;
    text-shadow: 0px 4px 4px #00445b;
}

.bms-hero-subtitle {
    
    font-size: 22px;
    line-height: 1.09;
    color: white;
    text-align: center;
    max-width: 650px;
    white-space: pre-wrap;
    margin: 0 auto;
}

/* BMS Main Content */
.bms-main-content {
    width: 100%;
    position: relative;
    background-color: white;
}

/* BMS Intro Section */
.bms-intro-section {
    width: 100%;
    padding: 204px 0 40px 0;
    position: relative;
    z-index: 1;
}

.bms-intro-section .container {
    max-width: 1320px;
}

.bms-intro-content {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
    position: relative;
    left: calc(45% - 263px);
    transform: translateX(-50%);
    width: 705px;
}

.bms-intro-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.bms-intro-subtitle {
    
    font-size: 32px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.bms-intro-subtitle strong {
    
    font-weight: 700;
}

.bms-intro-text {
    
    font-size: 18px;
    line-height: 1.2;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.bms-intro-text strong {
    
    font-weight: 700;
}

/* BMS Feature Section */
.bms-feature-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.bms-feature-section .container {
    max-width: 1320px;
}

.bms-feature-section .row {
    gap: 0;
    align-items: flex-start;
}

.bms-feature-section .row > * {
    padding-left: 0;
    padding-right: 0;
}

.bms-feature-content {
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 160px;
    position: relative;
}

.bms-feature-icon-container {
    display: flex;
    align-items: flex-start;
}

.bms-feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bms-feature-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.bms-feature-icon[style*="d4f2f8"] img {
    width: 42px;
    height: 42px;
}

.bms-feature-icon[style*="255, 224, 192"] img {
    width: 36px;
    height: 36px;
}

.bms-feature-icon[style*="240, 248, 139"] img {
    width: 50px;
    height: 50px;
}

.bms-feature-title {
    
    font-weight: 600;
    font-size: 50px;
    line-height: normal;
    color: #00445b;
    margin: 0;
    white-space: pre-wrap;
}

.bms-feature-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    position: relative;
    padding-left: 0;
    margin-top: 4px;
}

.bms-feature-details::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;
    width: 8px;
    min-height: 98px;
    background-image: url('https://www.figma.com/api/mcp/asset/05db1b02-1d6c-473c-84ac-2bacac9be37d');
    background-repeat: no-repeat;
    background-size: 8px 100%;
    background-position: top left;
    z-index: 0;
}

/* Energy Management and later sections use different divider */
.bms-feature-section:nth-of-type(3) .bms-feature-details::before,
.bms-feature-section:nth-of-type(4) .bms-feature-details::before,
.bms-feature-section:nth-of-type(5) .bms-feature-details::before,
.bms-feature-section:nth-of-type(6) .bms-feature-details::before,
.bms-feature-section:nth-of-type(7) .bms-feature-details::before {
    width: 10px;
    min-height: 166px;
    background-image: url('https://www.figma.com/api/mcp/asset/b3a46b52-f97f-4536-bdef-af7b77f1088e');
    top: 29px;
}

.bms-feature-detail {
    background-color: transparent;
    border-radius: 20px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.bms-feature-detail-title {

    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #22282a;
    margin: 0;
}

.bms-feature-detail-text {
    
    font-size: 16px;
    line-height: 1.2;
    color: #22282a;
    margin: 0;
    white-space: pre-wrap;
}

.bms-feature-image {
    max-width: 898px;
    height: auto;
    padding-right: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.bms-feature-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    max-height: 931px;
}

/* Responsive adjustments for BMS */
@media (max-width: 1400px) {
    .bms-intro-content {
        padding: 0 40px;
    }
    
    .bms-feature-content {
        padding-left: 40px;
    }
    
    .bms-feature-image {
        padding-right: 40px;
    }
}

@media (max-width: 992px) {
    .bms-hero-title {
        font-size: 40px;
        letter-spacing: 3px;
    }
    
    .bms-hero-subtitle {
        font-size: 18px;
        height: auto;
    }
    
    .bms-intro-content {
        left: 50%;
        width: calc(100% - 40px);
        max-width: 525px;
        padding: 0 20px;
    }
    
    .bms-intro-title {
        font-size: 40px;
    }
    
    .bms-intro-subtitle {
        font-size: 28px;
    }
    
    .bms-feature-section {
        padding: 60px 0;
    }
    
    .bms-feature-content {
        padding-left: 20px;
        max-width: 100%;
        margin-bottom: 40px;
    }
    
    .bms-feature-image {
        padding-right: 20px;
        max-width: 100%;
    }
    
    .bms-feature-title {
        font-size: 40px;
    }
}