/* CSS Variables */
:root {
    /* Brand Palette from Logo */
    --deep-blue: #08508A;
    --industrial-blue: #10416D;
    --cobalt-blue: #2A68AA;
    --blue: #277DBC;
    --blue-violet: #2B3C88;
    --dark: #080B12;
    --black: #111111;
    --white-color: #ffffff;
    --neutral-gray: #000;

    /* Theme Variables */
    --primary-color: var(--deep-blue);
    --primary-color-dark: var(--industrial-blue);
    --dark-bg: var(--dark);
    --light-grey: #f0f2f5;
    --text-light: #cccccc;
    --text-dark: #222222;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --font-family: 'Poppins', sans-serif;

    /* Brand Gradient */
    --brand-gradient: linear-gradient(135deg, #08508A, #277DBC, #2B3C88);
    --brand-gradient-hover: linear-gradient(135deg, #2B3C88, #277DBC, #08508A);
}

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

body {
    font-family: var(--font-family);
    background-color: var(--light-grey);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Animation Trigger */
body.loaded .hero-content {
    opacity: 1;
    transform: translateY(0);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    width: 100%;
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1000;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Utility Bar */
.utility-bar {
    background-color: var(--dark-bg);
    color: var(--text-light);
    font-size: 13px;
    font-weight: 400;
    border-bottom: 1px solid var(--border-color);
}

.utility-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    letter-spacing: 0.5px;
}

.utility-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.utility-right .separator {
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.15);
}

.utility-right .contact-link {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.utility-right .contact-link:hover {
    color: var(--white-color);
}

.social-icons {
    display: flex;
    gap: 8px;
}

.social-icons a {
    color: var(--text-light);
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: transparent;
    transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.social-icons a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Main Navigation */
.main-nav {
    transition: height 0.4s ease, padding 0.4s ease;
}

.main-nav .container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Stretch items for underline effect */
    height: 90px;
    transition: height 0.4s ease;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 65px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: scale(1.03);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;    position: relative;
    padding: 16px 0;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--deep-blue);
    transition: width 0.4s ease;
}

.nav-links a:hover {
    color: var(--deep-blue);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links .dropdown > a i {
    font-size: 12px;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.nav-links .dropdown:hover > a i {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
    padding: 12px 0 12px 12px;
    min-width: 250px;
    opacity: 0;
    list-style: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    visibility: hidden;
}

/* Only show direct child dropdown-menu, not sub-menus */
.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Reset the inner list of the 1st level dropdown */
.dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* `.nav-links li` styles cascade into the dropdown - neutralise them */
.dropdown-menu li {
    display: block;
    align-items: stretch;
    width: 100%;
}

.dropdown-menu > ul > li {
    margin: 0;
    padding: 0;
}

.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    color: var(--text-dark);
    font-weight: 400;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item-content {
    display: flex;
    flex-direction: column;
}

.dropdown-item-content .item-title {
    font-weight: 500;
    font-size: 15px;
    color: var(--black);
}

.dropdown-item-content .item-desc {
    font-size: 13px;
    color: var(--neutral-gray);
    margin-top: 2px;
}

.dropdown-menu a:hover {
    background-color: var(--light-grey);
}

.dropdown-menu a:hover .item-title {
     color: var(--deep-blue);
}

.dropdown-menu a::after {
    display: none; /* No underline for dropdown items */
}

/* Submenu Dropdown */
.dropdown-submenu {
    position: relative;
    display: block;
}

/* The nav list styles (li) also apply inside the dropdown - reset them here */
.dropdown-menu .dropdown-submenu {
    display: block;
    position: relative;
    align-items: stretch;
}

.dropdown-submenu > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    color: inherit;
    padding: 10px 12px;
    margin: 2px 0;
    border-radius: 6px;
    background: none;
    border: none;
    transition: background-color 0.25s ease;
}

.dropdown-submenu > a:hover {
    background-color: var(--light-grey);
}

/* Sub-menu should be hidden by default - more specific selector */
.dropdown-submenu .sub-menu {
    display: none !important;
    position: absolute;
    top: 0;
    /* Flush with the right edge of the 1st level item so the pointer can
       travel straight into the flyout without the hover being lost.
       The small translateX is only the entrance animation; the invisible
       bridge below covers that offset while it animates. */
    left: 100%;
    margin-left: 0;
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
    padding: 8px;
    min-width: 220px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    visibility: hidden;
    list-style: none;
    z-index: 1001;
}

/* Invisible bridge so the pointer can travel from the 1st level item
   into the flyout without the hover being lost (this is what made the
   2nd level menu disappear before it could be clicked).
   The bridge is a child of the item, so hovering it keeps the item
   hovered. It sits behind the flyout (z-index) so it never blocks a
   click on a 2nd level link. */
.dropdown-submenu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 10px;
    height: 100%;
    display: none;
    z-index: 1000;
}

.dropdown-submenu.has-submenu::after {
    display: block;
}

/* Show sub-menu only when hovering directly over the dropdown-submenu item */
.dropdown-submenu:hover > .sub-menu {
    display: block !important;
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

/* Keyboard / JS-driven open state */
.dropdown-submenu.submenu-open > .sub-menu {
    display: block !important;
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

/* Category item inside the 1st level dropdown */
.dropdown-submenu > a .dropdown-item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.dropdown-submenu .item-hint {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--cobalt-blue);
    opacity: 0.75;
}

.dropdown-submenu .submenu-arrow {
    font-size: 11px;
    color: var(--neutral-gray);
    opacity: 0.5;
    margin-left: 12px;
    flex-shrink: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;
}

.dropdown-submenu:hover > a .submenu-arrow,
.dropdown-submenu.submenu-open > a .submenu-arrow {
    transform: translateX(3px);
    opacity: 1;
    color: var(--deep-blue);
}

/* Ensure sub-menu links don't trigger parent dropdown */
.dropdown-submenu .sub-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-submenu .sub-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--text-dark);
    font-weight: 400;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    width: 100%;
}

/* No underline animation on flyout items */
.dropdown-submenu .sub-menu a::after {
    display: none !important;
}

.dropdown-submenu .sub-menu a:hover {
    background-color: var(--light-grey);
    color: var(--deep-blue);
}

/* CTA Button */
.main-nav .container .cta-button {
    align-self: center; /* Center vertically */
}

.cta-button {
    background: var(--brand-gradient);
    color: var(--white-color);
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(43, 60, 136, 0.2);
}

.cta-button i {
    transition: transform 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(43, 60, 136, 0.3);
}

.cta-button:hover i {
    transform: translateX(3px);
}

/* Sticky Header State */
#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px var(--shadow-color);
}

#main-header.scrolled .main-nav .container {
    height: 70px;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--black);
    margin: 5px 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.mobile-nav-panel {
    display: none;
}
/* Mobile Menu — 2-level Products accordion (mirrors the desktop dropdown) */
.mobile-nav-panel .mobile-submenu-viewall {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--deep-blue);
    text-decoration: none;
}

.mobile-nav-panel .mobile-submenu-viewall i {
    font-size: 12px;
}

.mobile-nav-panel .mobile-submenu-link {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--neutral-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-panel .mobile-submenu-group {
    border-bottom: none;
}

.mobile-nav-panel .mobile-submenu-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-nav-panel .mobile-submenu-toggle-name {
    flex: 1;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-panel .mobile-submenu-toggle-name:hover {
    color: var(--deep-blue);
}

.mobile-nav-panel .mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    transition: color 0.3s ease;
}

.mobile-nav-panel .mobile-submenu-toggle i {
    font-size: 12px;
    color: var(--neutral-gray);
    transition: transform 0.3s ease, color 0.3s ease;
}

.mobile-nav-panel .mobile-submenu-group.open .mobile-submenu-toggle {
    color: var(--deep-blue);
}

.mobile-nav-panel .mobile-submenu-group.open .mobile-submenu-toggle i {
    transform: rotate(180deg);
    color: var(--deep-blue);
}

.mobile-nav-panel .mobile-submenu-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    padding-left: 14px;
    margin: 0 0 8px 2px;
    border-left: 2px solid var(--light-grey);
}

.mobile-nav-panel .mobile-submenu-list a {
    display: block;
    position: relative;
    padding: 9px 0 9px 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--neutral-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-panel .mobile-submenu-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cobalt-blue);
    opacity: 0.55;
}

.mobile-nav-panel .mobile-submenu-list a.cat-all {
    color: var(--deep-blue);
    font-weight: 600;
}

.mobile-nav-panel .mobile-submenu-list a:hover,
.mobile-nav-panel .mobile-submenu-link:hover,
.mobile-nav-panel .mobile-submenu-list a.cat-all:hover {
    color: var(--deep-blue);
}


/* Responsive Design */
@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }
    .cta-button {
        display: none;
    }
    .hamburger {
        display: block;
    }

    .mobile-nav-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 999;
        padding-top: 120px;
    }

    .mobile-nav-panel.open {
        transform: translateX(0);
    }

    body.no-scroll {
        overflow: hidden;
    }

    .mobile-nav-panel nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 32px;
        height: 100%;
        overflow-y: auto;
    }

    .mobile-nav-panel ul {
        list-style: none;
        width: 100%;
        padding-bottom: 40px;
    }

    .mobile-nav-panel ul li {
        border-bottom: 1px solid #e0e0e0;
    }

    .mobile-nav-panel .mobile-link {
        color: var(--black);
        text-decoration: none;
        font-size: 22px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
    }

    .mobile-dropdown > a i {
        transition: transform 0.3s ease;
        font-size: 16px;
    }

    .mobile-dropdown.open > a i {
        transform: rotate(180deg);
    }

    .mobile-submenu {
        list-style: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        padding-left: 20px !important;
        padding-bottom: 0 !important;
    }

    .mobile-submenu li {
        border: none;
    }

    .mobile-submenu a {
        font-size: 18px;
        font-weight: 500;
        padding: 10px 0;
        display: block;
    }

    .cta-button-mobile {
        background: var(--brand-gradient);
        color: var(--white-color);
        padding: 15px 30px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        margin-top: 20px;
    }

    /* Hamburger to Close Icon Animation */
    .hamburger.open .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .hamburger.open .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .hamburger.open .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: calc(100vh - 130px);
    min-height: 600px;
    color: var(--white-color);
    overflow: hidden;
    background-color: var(--dark);
    margin-top: 130px; /* Account for fixed header */
}

.hero-section .container {
    padding: 0;
}

/* --- Hero Slider Section --- */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slider-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1),
                opacity 0.6s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 2;
}

.hero-slide.prev {
    transform: translateX(-100%);
}

.hero-slide .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-slide .hero-background .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.0);
}

.hero-slide.active .hero-background .hero-image {
    opacity: 1;
    animation: kenBurns 8s ease-out forwards;
}

/* Ken Burns animations per slide */
.hero-slide[data-slide="0"].active .hero-background .hero-image {
    animation: kenBurnsZoomIn 8s ease-out forwards;
}

.hero-slide[data-slide="1"].active .hero-background .hero-image {
    animation: kenBurnsPanRight 8s ease-out forwards;
}

.hero-slide[data-slide="2"].active .hero-background .hero-image {
    animation: kenBurnsPanLeft 8s ease-out forwards;
}

.hero-slide[data-slide="3"].active .hero-background .hero-image {
    animation: kenBurnsZoomOut 8s ease-out forwards;
}

/* Hero Overlay - darkens the image so text stays clearly readable */
.hero-slide .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Left-side darkening (behind the text) + subtle top/bottom shading */
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.55) 45%,
            rgba(0, 0, 0, 0.15) 100%),
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.15) 40%,
            rgba(0, 0, 0, 0.45) 100%);
}

/* Hero Content */
.hero-slide .container {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 40px 60px;
    background: transparent;
    border: none;
}

.hero-slide .hero-content {
    max-width: 650px;
}

.hero-slide .hero-label,
.hero-slide .hero-headline,
.hero-slide .hero-description,
.hero-slide .hero-cta-group {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-slide.active .hero-label,
.hero-slide.active .hero-headline,
.hero-slide.active .hero-description,
.hero-slide.active .hero-cta-group {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide.active .hero-label { transition-delay: 0.5s; }
.hero-slide.active .hero-headline { transition-delay: 0.7s; }
.hero-slide.active .hero-description { transition-delay: 0.9s; }
.hero-slide.active .hero-cta-group { transition-delay: 1.1s; }

.hero-slide .hero-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.hero-slide .hero-headline {
    font-size: 64px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 24px;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

.hero-slide .hero-headline span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-slide .hero-description {
    font-size: 18px;
    line-height: 1.6;
    max-width: 580px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hero-slide .hero-cta-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-slide .cta-button-primary {
    background: var(--brand-gradient);
    color: var(--white-color);
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    box-shadow: 0 5px 20px rgba(43, 60, 136, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-slide .cta-button-primary:hover {
    box-shadow: 0 10px 30px rgba(43, 60, 136, 0.35);
    transform: translateY(-3px);
}

.hero-slide .cta-button-primary i {
    transition: transform 0.3s ease;
}

.hero-slide .cta-button-primary:hover i {
    transform: translateX(4px);
}

.hero-slide .cta-button-secondary {
    color: var(--white-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    position: relative;
    padding: 16px 0;
}

.hero-slide .cta-button-secondary::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--white-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

/* Slide content animations */
.hero-slide.active .hero-label,
.hero-slide.active .hero-headline,
.hero-slide.active .hero-description,
.hero-slide.active .hero-cta-group {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide .hero-label,
.hero-slide .hero-headline,
.hero-slide .hero-description,
.hero-slide .hero-cta-group {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
                transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-slide .hero-label { transition-delay: 0.5s; }
.hero-slide .hero-headline { transition-delay: 0.7s; }
.hero-slide .hero-description { transition-delay: 0.9s; }
.hero-slide .hero-cta-group { transition-delay: 1.1s; }

.hero-floating-element {
    position: absolute;
    bottom: 60px;
    right: 32px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 24px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-slide.active .hero-floating-element {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.3s;
}

.hero-floating-element .element-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white-color);
}

.hero-floating-element .element-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
}

.hero-slide.active .scroll-indicator {
    opacity: 0.7;
    animation: fadeInScroll 1s 2s forwards;
}

@keyframes fadeInScroll {
    to { opacity: 0.7; }
}

.scroll-indicator span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white-color);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background-color: var(--white-color);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--white-color), transparent);
    animation: scroll-down 2.5s infinite ease-in-out;
}

@keyframes scroll-down {
    0% { transform: translateY(0); }
    100% { transform: translateY(200%); }
}

/* Slider Navigation */
.hero-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 10;
    pointer-events: none;
}

.hero-slider-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

.hero-slider-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.hero-slider-dots {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.hero-dot.active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.2);
}

/* --- Hero Responsive --- */
@media (max-width: 1280px) {
    .hero-slide .hero-headline { font-size: 56px; }
}

@media (max-width: 1024px) {
    .hero-section { height: auto; min-height: 0; padding-top: 180px; padding-bottom: 100px; }
    .hero-section .container {
        padding: 40px 60px;
    }
    .hero-slide .container {
        padding: 40px 30px;
        flex-direction: column;
        justify-content: center;
    }
    .hero-slide .hero-content { max-width: 100%; text-align: center; }
    .hero-slide .hero-description { margin-left: auto; margin-right: auto; }
    .hero-slide .hero-cta-group { justify-content: center; }
    .hero-floating-element { display: none; }
}

@media (max-width: 768px) {
    .utility-left span {
        display: none;
    }
    .utility-bar .container {
        justify-content: flex-end;
    }
    .utility-right .contact-link:first-of-type {
        display: none;
    }
    .container {
        padding: 0 24px;
    }
}

@media (max-width: 480px) {
    .utility-right .contact-link {
        display: none;
    }
    .utility-bar .container {
        justify-content: center;
    }
    .logo {
        font-size: 24px;
    }
    .container {
        padding: 0 16px;
    }
}

/* --- Capabilities Section --- */
.capabilities-section {
    background-color: var(--white-color);
    background-image: radial-gradient(circle at 10% 10%, rgba(230, 230, 250, 0.3), transparent 30%),
                      radial-gradient(circle at 90% 80%, rgba(230, 240, 255, 0.3), transparent 40%);
    padding: 60px 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.capabilities-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neutral-gray);
    margin-bottom: 12px;
}

.section-title {
    font-size: 36px;
    font-weight: 600;
    color: var(--text-dark);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.3;
}

.section-title span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.capabilities-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}

.capability-item {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    padding: 40px 32px;
    background-color: var(--white-color);
    border-radius: 16px;
    border: 1px solid var(--light-grey);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.capability-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(43, 60, 136, 0.1);
    border-color: rgba(43, 60, 136, 0.2);
}

.item-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background-color: var(--light-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
    transition: background-color 0.35s ease, transform 0.35s ease;
}

.item-icon-wrapper i {
    font-size: 24px;
    color: var(--deep-blue);
    transition: color 0.35s ease, transform 0.35s ease;
}

.capability-item:hover .item-icon-wrapper {
    transform: scale(1.05);
}

.capability-item:hover .item-icon-wrapper i {
    color: var(--white-color);
    transform: rotate(-5deg) scale(1.1);
}

.item-number {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 80px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.04);
    z-index: 0;
    transition: color 0.35s ease;
}

.item-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    transition: color 0.35s ease;
}

.capability-item:hover .item-title {
    color: var(--deep-blue);
}
.capability-item:hover .item-number {
    color: rgba(43, 60, 136, 0.1);
}
.capability-item:hover .item-icon-wrapper {
    background: var(--brand-gradient);
}
.capability-item:hover .item-arrow {
    color: var(--deep-blue);
}

.item-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    min-height: 72px; /* Ensure consistent height */
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.item-arrow {
    position: absolute;
    bottom: 40px;
    right: 40px;
    font-size: 18px;
    color: #ccc;
    transform: translateX(0);
    transition: color 0.35s ease, transform 0.35s ease;
}

.capability-item:hover .item-arrow {
    transform: translateX(6px);
}

/* --- Capabilities Responsive --- */
@media (max-width: 1200px) {
    .item-title { font-size: 18px; }
    .item-description { font-size: 14px; }
}

@media (max-width: 1024px) {
    .capabilities-section { padding: 80px 0; }
    .capabilities-strip {
        grid-template-columns: 1fr; /* Fallback for no flex */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px; /* Space for scrollbar */
        margin-bottom: -20px;
        gap: 24px;
        /* Hide scrollbar */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .capabilities-strip::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .capability-item {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    .section-title { font-size: 32px; }
    .capability-item {
        flex-basis: 280px;
    }
}

@media (max-width: 480px) {
    .capabilities-section { padding: 60px 0; }
    .section-heading { margin-bottom: 40px; }
}

/* --- About Section --- */
.about-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.about-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 64px;
}

.about-visuals {
    grid-column: 1 / span 6;
    position: relative;
    height: 550px;
}

.about-image-primary, .about-image-secondary {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(43, 60, 136, 0.15);
    transition: transform 0.4s ease;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-section.in-view .about-image-primary {
    clip-path: inset(0 0 0 0);
    transition-delay: 0.2s;
}
.about-section.in-view .about-image-secondary {
    clip-path: inset(0 0 0 0);
    transition-delay: 0.4s;
}

.about-image-primary img, .about-image-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-image-primary:hover img, .about-image-secondary:hover img {
    transform: scale(1);
}

.about-image-primary {
    width: 80%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.about-image-secondary {
    width: 50%;
    height: 60%;
    bottom: -10%;
    right: -5%;
    z-index: 2;
    border: 6px solid var(--white-color);
}

.about-floating-card {
    position: absolute;
    top: 40px;
    left: -40px;
    z-index: 3;
    background: var(--brand-gradient);
    color: var(--white-color);
    padding: 20px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(43, 60, 136, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
}

.about-section.in-view .about-floating-card {
    opacity: 1;
    transform: translateY(0);
}

.card-year {
    font-size: 32px;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.card-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
}

.about-content {
    grid-column: 8 / span 5;
}

.about-content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-section.in-view .about-content .section-label { transition-delay: 0.5s; }
.about-section.in-view .about-content .section-headline { transition-delay: 0.6s; }
.about-section.in-view .about-content p:nth-of-type(1) { transition-delay: 0.7s; }
.about-section.in-view .about-content p:nth-of-type(2) { transition-delay: 0.75s; }
.about-section.in-view .about-content .about-facts { transition-delay: 0.8s; }
.about-section.in-view .about-content .cta-button-secondary-alt { transition-delay: 0.9s; }
 
.about-section.in-view .about-content > * {
    opacity: 1;
    transform: translateY(0);
}

.section-headline {
    font-size: 36px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 24px;
}

.about-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--neutral-gray);
    margin-bottom: 24px;
}

.about-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 32px 0;
}

.fact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.fact-item:hover {
    background-color: #f0f2f5;
}

.fact-item i {
    font-size: 18px;
    color: var(--deep-blue);
    width: 24px;
    text-align: center;
}

.fact-text {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.fact-text span {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: var(--neutral-gray);
}

.cta-button-secondary-alt {
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 50px;
    background-color: var(--white-color);
    border: 2px solid #e0e0e0;
    gap: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.cta-button-secondary-alt i {
    transition: transform 0.3s ease;
}

.cta-button-secondary-alt:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    color: var(--white-color);
}

.cta-button-secondary-alt:hover i {
    transform: translateX(5px);
}

/* --- About Section Responsive --- */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .about-visuals {
        grid-row: 2;
        height: 450px;
        margin-top: 40px;
    }
    .about-content {
        grid-column: 1 / -1;
        text-align: center;
    }
    .about-facts {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .about-section { padding: 80px 0; }
    .about-visuals { height: 350px; }
    .about-image-secondary { display: none; }
    .about-image-primary { width: 100%; }
    .about-floating-card { top: -20px; left: 50%; transform: translateX(-50%); }
    .about-section.in-view .about-floating-card { transform: translateX(-50%) translateY(0); }
    .section-headline { font-size: 32px; }
}

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

/* --- Solutions Section --- */
.solutions-section {
    padding: 60px 0;
    background-color: var(--white-color);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.solutions-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.solutions-section .section-intro-text {
    font-size: 18px;
    color: var(--neutral-gray);
    max-width: 600px;
    margin: 16px auto 0;
    line-height: 1.6;
}

.solutions-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 32px;
}

.solution-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(43, 60, 136, 0.05);
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(43, 60, 136, 0.15);
}

.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.5s ease;
}

.solution-card:hover .card-bg-image {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 11, 18, 0.85) 0%, transparent 60%);
    z-index: 1;
    transition: background 0.4s ease;
}

.solution-card:hover .card-overlay {
    background: linear-gradient(to top, rgba(8, 11, 18, 0.95) 0%, transparent 70%);
}

.card-content {
    position: relative;
    z-index: 2;
    color: var(--white-color);
}

/* Featured Card Specifics */
.solution-card.featured {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.featured-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.featured-subtitle {
    font-size: 16px;
    opacity: 0.8;
    margin: 8px 0 24px;
}

/* Supporting Cards Specifics */
.solution-card:not(.featured) h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.solution-card:not(.featured):hover h4 {
    color: var(--blue);
}

.card-cta {
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white-color);
    opacity: 0.8;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.solution-card:hover .card-cta {
    opacity: 1;
}

.solution-card:hover .card-cta i {
    transform: translateX(5px);
}

.solution-card:not(.featured) .card-cta {
    position: absolute;
    bottom: 32px;
    right: 32px;
    font-size: 24px;
    opacity: 0;
}

.solution-card:not(.featured):hover .card-cta {
    opacity: 1;
}

/* Section Animations */
.solutions-section.in-view .solution-card {
    animation: pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.solutions-section.in-view .featured { animation-delay: 0.2s; }
.solutions-section.in-view .solution-card:nth-of-type(2) { animation-delay: 0.3s; }
.solutions-section.in-view .solution-card:nth-of-type(3) { animation-delay: 0.4s; }
.solutions-section.in-view .solution-card:nth-of-type(4) { animation-delay: 0.5s; }
.solutions-section.in-view .solution-card:nth-of-type(5) { animation-delay: 0.6s; }

/* --- Solutions Responsive --- */
@media (max-width: 1024px) {
    .solutions-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 400px repeat(2, 250px);
    }
    .solution-card.featured {
        grid-column: 1 / -1;
        grid-row: 1 / span 1;
    }
}

@media (max-width: 768px) {
    .solutions-section { padding: 80px 0; }
    .solutions-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 400px repeat(4, 250px);
    }
}

@media (max-width: 480px) {
    .solutions-section .section-intro-text { font-size: 16px; }
}

/* --- Industries Section --- */
.industries-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.industries-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.industries-grid-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 64px;
    min-height: 700px;
}

.industries-visual-pane {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
}

.industries-background-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.industry-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 6s cubic-bezier(0.4, 0, 0.2, 1);
}

.industry-bg-image.active {
    opacity: 1;
    transform: scale(1);
}

.industries-visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(8, 11, 18, 0.85) 0%, rgba(8, 11, 18, 0.5) 40%, transparent 70%);
    z-index: 1;
}

.industry-details-content {
    position: relative;
    z-index: 2;
    color: var(--white-color);
    animation: content-fade-in 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes content-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.industry-details-content .detail-number {
    font-size: 100px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
}

.industry-details-content .detail-title {
    font-size: 40px;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.2;
}

.industry-details-content .detail-desc {
    font-size: 16px;
    color: var(--text-light);
    max-width: 450px;
    line-height: 1.6;
    margin-top: 16px;
}

.industry-details-content .detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    color: var(--white-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
}

.industry-details-content .detail-cta i {
    transition: transform 0.3s ease;
}

.industry-details-content .detail-cta:hover i {
    transform: translateX(5px);
}

.industries-navigation-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.industries-header .section-label {
    text-align: left;
    color: var(--neutral-gray);
}

.industries-header .section-title {
    text-align: left;
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    margin: 12px 0 0 0;
    max-width: none;
}

.industries-nav {
    position: relative;
    margin-top: 48px;
}

.industries-nav-list {
    list-style: none;
}

.industries-nav-item {
    padding: 16px 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #e0e0e0;
}

.nav-item-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--neutral-gray);
    transition: color 0.3s ease;
}

.industries-nav-item:hover .nav-item-title {
    color: var(--deep-blue);
}

.industries-nav-item.active .nav-item-title {
    color: var(--black);
    font-weight: 600;
}

.nav-active-indicator {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--deep-blue);
    z-index: 1;
    transform-origin: left;
    transition: top 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* --- Industries Responsive --- */
@media (max-width: 1200px) {
    .industries-grid-container { gap: 48px; }
    .industry-details-content .detail-title {
        font-size: 40px;
    }
    .industry-details-content .detail-number {
        font-size: 100px;
    }
}

@media (max-width: 1024px) {
    .industries-grid-container {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .industries-visual-pane {
        min-height: 500px;
        padding: 32px;
    }
    .industries-navigation-pane { padding: 64px 0; }
    .industries-header { text-align: center; }
    .industries-header .section-label,
    .industries-header .section-title { text-align: center; margin-left: auto; margin-right: auto; }
    .industries-nav {
        margin-top: 40px;
    }
    .industries-nav-list {
        display: flex;
        overflow-x: auto;
        padding-bottom: 20px;
        scroll-snap-type: x mandatory;
        border-bottom: 1px solid #e0e0e0;
        -ms-overflow-style: none; scrollbar-width: none;
    }
    .industries-nav-list::-webkit-scrollbar {
        display: none;
    }
    .industries-nav-item {
        flex: 0 0 auto;
        scroll-snap-align: center;
        padding: 12px 24px;
        border-bottom: none;
    }
    .industries-nav-item.active .nav-item-title {
        color: var(--deep-blue);
    }
    .nav-active-indicator {
        bottom: 0;
        top: auto;
        height: 2px;
        transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1), width 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
}

@media (max-width: 768px) {
    .industries-section { padding: 80px 0; }
    .industries-grid-container { padding: 0 24px; }
    .industries-header .section-title {
        font-size: 32px;
    }
}

/* --- Why Growsys Section Redesign --- */
.why-growsys-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    overflow: hidden;
}

.why-growsys-section.in-view {
    opacity: 1;
    transform: translateY(0);
}
.why-growsys-section .section-heading {
    margin-bottom: 80px;
}
.why-growsys-section .section-title {
    font-size: 40px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    max-width: 600px;
}

.why-growsys-grid {
    /* This is now just a container for the heading and system */
}

.benefits-system {
    position: relative;
    height: 600px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.benefits-connector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connector-path {
    stroke: #e0e0e0;
    stroke-dasharray: 10 5;
    animation: dash-flow 30s linear infinite;
}

@keyframes dash-flow {
    to { stroke-dashoffset: -1000; }
}

.benefit-card {
    position: absolute;
    width: 280px;
    padding: 32px;
    background-color: var(--white-color);
    border-radius: 12px;
    border: 1px solid var(--light-grey);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(43, 60, 136, 0.1);
    border-color: var(--deep-blue);
}

/* Card Positioning */
.card-1 { top: 0; left: 0; }
.card-2 { top: 0; right: 0; }
.card-3 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.card-4 { bottom: 0; left: 20%; }
.card-5 { bottom: 0; right: 20%; }

.card-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: var(--light-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    transition: background-color 0.3s ease;
}

.card-icon-wrapper i {
    font-size: 22px;
    color: var(--deep-blue);
    transition: transform 0.3s ease;
}

.benefit-card:hover .card-icon-wrapper {
    background: var(--brand-gradient);
}
.benefit-card:hover .card-icon-wrapper i {
    color: var(--white-color);
    transform: scale(1.1);
}

.card-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 48px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05);
    transition: color 0.3s ease;
}

.benefit-card:hover .card-number {
    color: rgba(43, 60, 136, 0.1);
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 8px;
}

.card-description {
    font-size: 14px;
    color: var(--neutral-gray);
    line-height: 1.6;
    min-height: 45px;
}

.card-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 16px;
    color: #ccc;
    transition: transform 0.3s ease, color 0.3s ease;
}

.benefit-card:hover .card-arrow {
    transform: translateX(5px);
    color: var(--deep-blue);
}

/* --- Why Growsys Responsive --- */
@media (max-width: 1200px) {
    .benefits-system {
        max-width: 960px;
    }
    .benefit-card {
        width: 260px;
    }
}

@media (max-width: 1024px) {
    .benefits-system {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .benefit-card {
        position: static;
        width: 100%;
        max-width: 450px;
        transform: none !important; /* Reset absolute positioning transforms */
    }
    .benefits-connector {
        display: none; /* Hide complex SVG on mobile */
    }
    .benefit-card:not(:last-child) {
        margin-bottom: 24px;
    }
    /* Simple vertical connector for mobile */
    .benefit-card {
        position: relative;
    }
    .benefit-card:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 24px;
        background-color: #e0e0e0;
        background-image: linear-gradient(to bottom, #e0e0e0 50%, transparent 50%);
        background-size: 100% 8px;
    }
}

@media (max-width: 768px) {
    .why-growsys-section { padding: 80px 0; }
    .why-growsys-section .section-title { font-size: 32px; }
    .card-title { font-size: 18px; }
}

@media (max-width: 480px) {
    .benefit-card {
        padding: 24px;
    }
    .card-title {
        font-size: 17px;
    }
    .card-description {
        font-size: 13px;
    }
}

  .why-growsys {
    --purple: var(--blue-violet);
    --purple-light: var(--cobalt-blue);
    --text: #111125;
    --muted: var(--neutral-gray);
    --border: #e7e7ed;
    --bg: var(--white-color);

    position: relative;
    overflow: hidden;
    padding: 70px 20px 55px;
    background:
      radial-gradient(circle at 50% 20%, rgba(40, 29, 110, .035), transparent 35%),
      var(--bg);
    color: var(--text);
  }

  .why-growsys::after {
    content: "";
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: -75px;
    height: 170px;
    pointer-events: none;
    opacity: .55;
    background:
      radial-gradient(ellipse at 20% 40%, transparent 0 55%, #e8e8ef 56% 56.5%, transparent 57%),
      radial-gradient(ellipse at 65% 70%, transparent 0 55%, #e8e8ef 56% 56.5%, transparent 57%);
  }

  .why-growsys__container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
  }

  .why-growsys__heading {
    text-align: center;
    margin-bottom: 52px;
  }

  .why-growsys__eyebrow {
    display: inline-block;
    color: #25234b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 9px;
  }

  .why-growsys__line {
    display: block;
    width: 45px;
    height: 2px;
    margin: 0 auto 13px;
    background: var(--purple);
  }

  .why-growsys__heading h2 {
    margin: 0;
    font-size: clamp(28px, 3.25vw, 36px);
    line-height: 1.18;
    letter-spacing: -1.2px;
    font-weight: 750;
  }

  .why-growsys__heading h2 span {
    color: var(--purple);
  }

  .why-growsys__heading p {
    margin: 17px auto 0;
    max-width: 700px;
    color: #5f6070;
    font-size: 13px;
    line-height: 1.7;
  }

  .why-growsys__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 38px;
    position: relative;
  }

  .growsys-card {
    position: relative;
    min-height: 268px;
    padding: 24px 18px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow:
      0 5px 15px rgba(24, 22, 65, .055),
      0 1px 2px rgba(24, 22, 65, .03);
    transition:
      transform .35s cubic-bezier(.2,.8,.2,1),
      box-shadow .35s ease,
      border-color .35s ease;
  }

  .growsys-card:hover {
    transform: translateY(-9px);
    border-color: rgba(40, 29, 110, .25);
    box-shadow:
      0 18px 35px rgba(35, 26, 91, .13),
      0 4px 10px rgba(35, 26, 91, .06);
  }

  .growsys-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(90deg, var(--purple), #5547aa);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
  }

  .growsys-card:hover::after {
    transform: scaleX(1);
  }

  .growsys-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 17px;
  }

  .growsys-card__icon {
    width: 53px;
    height: 53px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid #dedee8;
    background: linear-gradient(145deg, #f7f7fa, #eeeeF5);
    color: var(--purple);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.8);
    transition:
      background .35s ease,
      color .35s ease,
      transform .35s ease;
  }

  .growsys-card:hover .growsys-card__icon {
    color: #fff;
    background: var(--purple);
    transform: rotate(-5deg) scale(1.06);
  }

  .growsys-card__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .growsys-card__number {
    color: #e5e5eb;
    font-size: 27px;
    line-height: 1;
    font-weight: 700;
    transition: color .3s ease;
  }

  .growsys-card:hover .growsys-card__number {
    color: #c9c5df;
  }

  .growsys-card h3 {
    min-height: 42px;
    margin: 0;
    color: #15132d;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.2px;
  }

  .growsys-card__mini-line {
    width: 25px;
    height: 1px;
    margin: 13px 0 13px;
    background: var(--purple);
    transition: width .35s ease;
  }

  .growsys-card:hover .growsys-card__mini-line {
    width: 42px;
  }

  .growsys-card p {
    margin: 0;
    max-width: 150px;
    color: var(--neutral-gray);
    font-size: 13px;
    line-height: 1.65;
  }

  .growsys-card__arrow {
    position: absolute;
    right: 17px;
    bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--purple);
    text-decoration: none;
    font-size: 23px;
    line-height: 1;
    transition: transform .3s ease, color .3s ease;
  }

  .growsys-card:hover .growsys-card__arrow {
    color: #40318b;
    transform: translateX(5px);
  }

  /* Connecting dots / lines */
  .why-growsys__cards::before {
    content: "";
    position: absolute;
    top: 126px;
    left: -18px;
    right: -18px;
    height: 1px;
    border-top: 1px dashed rgba(37, 25, 104, .8);
    z-index: -1;
  }

  .growsys-card {
    z-index: 1;
  }

  .growsys-card:nth-child(-n+4)::before {
    content: "";
    position: absolute;
    z-index: 5;
    width: 23px;
    height: 23px;
    right: -12px;
    top: 114px;
    border: 1px solid #dddde7;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(30,25,80,.08);
  }

  .growsys-card:nth-child(-n+4)::after {
    content: "";
    position: absolute;
    z-index: 6;
    width: 7px;
    height: 7px;
    right: -4px;
    top: 122px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 3px rgba(43,31,117,.06);
    transform: none;
    height: 7px;
  }

  .growsys-card:nth-child(-n+4):hover::after {
    transform: scale(1.35);
  }

  /* Bottom system connection */
  .why-growsys__connection {
    position: relative;
    height: 125px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .connection-line {
    position: absolute;
    top: -35px;
    width: 21%;
    height: 72px;
    border-top: 1px dashed var(--purple);
  }

  .connection-line--left {
    left: 34%;
    border-left: 1px dashed var(--purple);
    border-radius: 0 0 0 45px;
    transform: skewX(-18deg);
  }

  .connection-line--right {
    right: 34%;
    border-right: 1px dashed var(--purple);
    border-radius: 0 0 45px 0;
    transform: skewX(18deg);
  }

  .connection-node {
    position: relative;
    z-index: 2;
    width: 66px;
    height: 66px;
    margin-top: 45px;
    display: grid;
    place-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    background: var(--purple);
    box-shadow:
      0 0 0 1px #cbc9dc,
      0 0 0 7px rgba(255,255,255,.8),
      0 7px 18px rgba(35,25,95,.16);
    color: white;
  }

  .connection-node svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .connection-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 11px;
    font-size: 14px;
    line-height: 1.5;
    color: #333344;
  }

  .connection-text strong {
    color: var(--purple);
    font-size: 14px;
  }

  @media (max-width: 900px) {
    .why-growsys {
      padding: 55px 18px 45px;
    }

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

    .why-growsys__cards::before,
    .growsys-card:nth-child(-n+4)::before,
    .growsys-card:nth-child(-n+4)::after,
    .connection-line {
      display: none;
    }

    .why-growsys__connection {
      height: auto;
      margin-top: 45px;
    }

    .connection-node {
      margin-top: 0;
    }
  }

  @media (max-width: 600px) {
    .why-growsys {
      padding: 45px 14px 40px;
    }

    .why-growsys__heading {
      margin-bottom: 32px;
    }

    .why-growsys__eyebrow {
      font-size: 9px;
      letter-spacing: 3px;
    }

    .why-growsys__heading h2 {
      font-size: 27px;
      line-height: 1.2;
      letter-spacing: -.8px;
    }

    .why-growsys__heading p {
      font-size: 12px;
      line-height: 1.65;
    }

    .desktop-only {
      display: none;
    }

    .why-growsys__cards {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .growsys-card {
      min-height: 225px;
      padding: 20px;
      border-radius: 13px;
    }

    .growsys-card__top {
      margin-bottom: 14px;
    }

    .growsys-card__icon {
      width: 49px;
      height: 49px;
    }

    .growsys-card__number {
      font-size: 25px;
    }

    .growsys-card h3 {
      font-size: 15px;
    }

    .growsys-card p {
      max-width: 80%;
      font-size: 12px;
    }

    .growsys-card__arrow {
      right: 18px;
      bottom: 18px;
    }

    .why-growsys__connection {
      margin-top: 35px;
    }

    .connection-node {
      width: 60px;
      height: 60px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .growsys-card,
    .growsys-card *,
    .connection-node {
      transition: none !important;
    }
  }

/* --- Metrics Section Redesign --- */
.metrics-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    overflow: hidden;
}

.metrics-section.in-view {
    opacity: 1;
    transform: translateY(0);
}
.metrics-section .section-heading {
    margin-bottom: 80px;
}

.achievement-strip {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.achievement-connector {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    z-index: 0;
    overflow: visible;
}

.connector-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.metrics-section.in-view .connector-path {
    stroke-dashoffset: 0;
}

.achievement-point {
    position: relative;
    display: flex;
    flex-direction: column-reverse; /* Reverses order to fix alignment */
    align-items: center;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
    justify-content: flex-end; /* Aligns content to the bottom */
}

.achievement-point:hover {
    transform: scale(1.05);
}

.achievement-point::before {
    /* content: ''; */
    position: absolute;
    bottom: 50%; /* Aligns with the horizontal connector line */
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 2px solid #ccc;
    transform: translate(-50%, 50%); /* Center the circle on the line */
    z-index: 1;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.achievement-point:hover::before {
    border-color: var(--deep-blue);
    background-color: var(--light-grey);
}

.point-icon {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background-color: var(--white-color);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(43, 60, 136, 0.05);
    margin-top: -25px; /* Overlap the line */
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.point-icon i {
    font-size: 20px;
    color: var(--deep-blue);
}

.achievement-point:hover .point-icon {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(43, 60, 136, 0.1);
}

.point-content {
    padding-bottom: 45px; /* Space for icon */
}

.point-number {
    font-size: 40px;
    font-weight: 700;
    color: var(--black);
    line-height: 1;
}

.point-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-gray);
    margin-top: 8px;
    letter-spacing: 0.5px;
}

/* --- Metrics Responsive --- */
@media (max-width: 1024px) {
    .point-number {
        font-size: 36px;
    }
    .point-label {
        font-size: 13px;
    }
}

/* --- How We Work Section --- */
.how-we-work-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    overflow: hidden;
}

.how-we-work-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.how-we-work-section .section-heading {
    text-align: center;
    margin-bottom: 80px;
}

.how-we-work-section .section-title {
    font-size: 40px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    max-width: 600px;
    margin: 12px auto 0;
}

.how-we-work-section .section-intro-text {
    font-size: 18px;
    color: var(--neutral-gray);
    max-width: 650px;
    margin: 16px auto 0;
    line-height: 1.7;
}

.process-journey {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.process-connector {
    position: absolute;
    top: 60px; /* Vertically center on the marker */
    left: 5%;
    width: 90%;
    height: 2px;
    z-index: 0;
}

.process-connector path {
    stroke-width: 2;
}

.connector-path-bg {
    stroke: #e9e9e9;
}

.connector-path-animated {
    stroke: var(--deep-blue);
    stroke-dasharray: 1100;
    stroke-dashoffset: 1100;
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.how-we-work-section.in-view .connector-path-animated {
    stroke-dashoffset: 0;
}

.process-stage {
    position: relative;
    width: 22%;
    text-align: center;
    padding-top: 80px; /* Space for marker */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.how-we-work-section.in-view .process-stage:nth-child(1) { transition-delay: 0.4s; }
.how-we-work-section.in-view .process-stage:nth-child(2) { transition-delay: 0.6s; }
.how-we-work-section.in-view .process-stage:nth-child(3) { transition-delay: 0.8s; }
.how-we-work-section.in-view .process-stage:nth-child(4) { transition-delay: 1.0s; }

.how-we-work-section.in-view .process-stage {
    opacity: 1;
    transform: translateY(0);
}

.stage-marker {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--white-color);
    border: 2px solid #e0e0e0;
    color: #ccc;
    font-size: 18px;
    font-weight: 600;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.process-stage:hover .stage-marker {
    border-color: var(--deep-blue);
    color: var(--deep-blue);
    transform: translateX(-50%) scale(1.1);
}

.stage-icon {
    font-size: 28px;
    color: var(--deep-blue);
    margin-bottom: 16px;
}

.stage-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 8px;
}

.stage-description {
    font-size: 14px;
    color: var(--neutral-gray);
    line-height: 1.6;
}

/* --- How We Work Responsive --- */
@media (max-width: 1024px) {
    .stage-title { font-size: 18px; }
    .stage-description { font-size: 13px; }
}

@media (max-width: 768px) {
    .how-we-work-section { padding: 80px 0; }
    .process-journey {
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
        padding-left: 40px;
    }
    .process-connector {
        top: 0;
        left: 25px;
        width: 2px;
        height: 100%;
    }
    .connector-path-bg, .connector-path-animated {
        d: path("M 0 0 V 1000");
    }
    .process-stage {
        width: 100%;
        text-align: left;
        padding-top: 0;
        padding-left: 40px;
    }
    .stage-marker {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
    }
    .process-stage:hover .stage-marker {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* --- Quality & Reliability Section --- */
.quality-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.quality-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.quality-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.quality-visual-pane {
    position: relative;
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(43, 60, 136, 0.1);
}

.quality-visual-pane img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.quality-visual-pane:hover img {
    transform: scale(1);
}

.quality-content-pane .section-heading {
    text-align: left;
    margin-bottom: 48px;
}

.quality-content-pane .section-title {
    text-align: left;
    margin: 12px 0 0 0;
    max-width: none;
}

.quality-content-pane .section-intro-text {
    text-align: left;
    margin: 16px 0 0 0;
    max-width: none;
}

.quality-principles-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.quality-principles-list::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #e9e9e9;
}

.principle-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 0;
    position: relative;
}

.principle-number {
    font-size: 16px;
    font-weight: 600;
    color: #ccc;
    background-color: var(--white-color);
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    display: grid;
    place-items: center;
    z-index: 1;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.principle-item:hover .principle-number {
    border-color: var(--deep-blue);
    color: var(--deep-blue);
}

.principle-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 6px;
}

.principle-description {
    font-size: 15px;
    color: var(--neutral-gray);
    line-height: 1.6;
}

/* --- Quality Section Responsive --- */
@media (max-width: 1024px) {
    .quality-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .quality-visual-pane {
        height: 450px;
    }
    .quality-content-pane .section-heading {
        text-align: center;
    }
    .quality-content-pane .section-title,
    .quality-content-pane .section-intro-text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .quality-section { padding: 80px 0; }
}

/* --- Testimonials Section --- */
.testimonials-section {
    padding: 60px 0;
    background-color: var(--white-color);
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.testimonials-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

.testimonials-section .section-heading {
    margin-bottom: 60px;
}

.testimonial-slider {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    background-color: var(--white-color);
    border-radius: 16px;
    padding: 64px;
    border: 1px solid #e9e9e9;
}

.testimonial-slides-container {
    position: relative;
    min-height: 250px;
    overflow: hidden;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 48px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s;
}

.testimonial-slide.active {
    position: relative; /* Take up space in the flow */
    opacity: 1;
    visibility: visible;
}

.testimonial-content {
    position: relative;
}

.decorative-quote {
    position: absolute;
    top: -40px;
    left: -40px;
    font-size: 120px;
    color: rgba(43, 60, 136, 0.05);
    z-index: 0;
}

.testimonial-quote {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.6;
    z-index: 1;
}

/* Testimonial star rating */
.testimonial-stars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 16px;
    font-size: 16px;
    color: #f4b400;
}

.testimonial-stars .far {
    color: rgba(0, 0, 0, 0.2);
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
    border-left: 3px solid var(--deep-blue);
    padding-left: 24px;
}

.author-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.author-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
}

.author-company {
    font-size: 14px;
    color: var(--neutral-gray);
}

.testimonial-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 40px;
    gap: 24px;
}

.nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background-color: var(--white-color);
    color: #888;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.nav-arrow:hover {
    background-color: var(--deep-blue);
    color: var(--white-color);
    border-color: var(--deep-blue);
}

.testimonial-pagination {
    font-size: 16px;
    font-weight: 500;
    color: #888;
}

.testimonial-pagination .current-slide {
    color: var(--black);
    font-weight: 600;
}

/* --- Testimonials Responsive --- */
@media (max-width: 768px) {
    .testimonials-section { padding: 80px 0; }
    .testimonial-slider { padding: 48px 32px; }
    .testimonial-slide {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .testimonial-author {
        border-left: none;
        padding-left: 0;
        align-items: center;
        text-align: center;
    }
    .testimonial-quote { font-size: 20px; text-align: center; }
    .decorative-quote { top: -20px; left: 50%; transform: translateX(-50%); }
    .testimonial-navigation { justify-content: center; }
}

@media (max-width: 768px) {
    .metrics-section { padding: 80px 0; }
    .achievement-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15%;
        gap: 40px;
    }
    .achievement-connector {
        top: 0;
        left: 50px; /* Aligns with icon center */
        width: 2px;
        height: 100%;
        transform: translateX(-50%);
    }
    .connector-path {
        d: path("M 0 0 L 0 1200");
    }
    .achievement-point {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 0;
        gap: 20px;
    }
    .achievement-point::before { display: none; }
    .point-icon { margin-bottom: 0; margin-top: 0; }
    .point-content { padding-bottom: 0; }
}

/* ============================================
   FINAL CTA / CONTACT SECTION
   ============================================ */
.final-cta {
    position: relative;
    padding: 60px 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(43, 60, 136, 0.06), transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(8, 80, 138, 0.04), transparent 35%),
        linear-gradient(180deg, #fdfdff 0%, #ffffff 60%, #f9f9fc 100%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.final-cta.in-view {
    opacity: 1;
    transform: translateY(0);
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 60, 136, 0.12), transparent);
}

.final-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

/* --- Left: CTA Content --- */
.final-cta__content {
    max-width: 520px;
}

.final-cta__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.final-cta__eyebrow-text {
    color: var(--deep-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.final-cta__line {
    width: 40px;
    height: 2px;
    background: var(--deep-blue);
}

.final-cta__title {
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.final-cta__desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--neutral-gray);
    margin-bottom: 36px;
}

.final-cta__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.final-cta__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-gradient);
    color: var(--white-color);
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.final-cta__btn-primary i {
    transition: transform 0.3s ease;
}

.final-cta__btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(43, 60, 136, 0.3);
}

.final-cta__btn-primary:hover i {
    transform: translateX(4px);
}

.final-cta__btn-secondary {
    display: inline-flex;
    align-items: center;
    color: var(--deep-blue);
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 50px;
    border: 2px solid #e0e0e0;
    font-weight: 600;
    font-size: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.final-cta__btn-secondary:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    color: var(--white-color);
}

.final-cta__contact {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 32px;
    border-top: 1px solid #e8e8ee;
}

.final-cta__contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
}

.final-cta__contact-item i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2f7;
    color: var(--deep-blue);
    font-size: 14px;
    flex-shrink: 0;
}

/* --- Right: Madhya Pradesh Map --- */
.final-cta__map {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-map {
    position: relative;
    width: 100%;
    max-width: 560px;
}

.mp-map__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Map State Animation */
.mp-map__state {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.final-cta.in-view .mp-map__state {
    stroke-dashoffset: 0;
}

.mp-map__districts {
    opacity: 0;
    transition: opacity 0.8s ease 2.2s;
}

.final-cta.in-view .mp-map__districts {
    opacity: 0.12;
}

/* Connection Lines */
.mp-connection {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mp-line--base {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp-line--flow {
    stroke-dasharray: 0.06 0.94;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.final-cta.in-view .mp-connection:nth-of-type(1) { transition-delay: 0.7s; opacity: 1; }
.final-cta.in-view .mp-connection:nth-of-type(1) .mp-line--base { transition-delay: 0.7s; stroke-dashoffset: 0; }
.final-cta.in-view .mp-connection:nth-of-type(1) .mp-line--flow { transition-delay: 1.7s; opacity: 1; animation: flow-along 2.2s linear infinite 1.7s; }

.final-cta.in-view .mp-connection:nth-of-type(2) { transition-delay: 0.9s; opacity: 1; }
.final-cta.in-view .mp-connection:nth-of-type(2) .mp-line--base { transition-delay: 0.9s; stroke-dashoffset: 0; }
.final-cta.in-view .mp-connection:nth-of-type(2) .mp-line--flow { transition-delay: 1.9s; opacity: 1; animation: flow-along 2.4s linear infinite 1.9s; }

.final-cta.in-view .mp-connection:nth-of-type(3) { transition-delay: 1.1s; opacity: 1; }
.final-cta.in-view .mp-connection:nth-of-type(3) .mp-line--base { transition-delay: 1.1s; stroke-dashoffset: 0; }
.final-cta.in-view .mp-connection:nth-of-type(3) .mp-line--flow { transition-delay: 2.1s; opacity: 1; animation: flow-along 2.0s linear infinite 2.1s; }

.final-cta.in-view .mp-connection:nth-of-type(4) { transition-delay: 1.3s; opacity: 1; }
.final-cta.in-view .mp-connection:nth-of-type(4) .mp-line--base { transition-delay: 1.3s; stroke-dashoffset: 0; }
.final-cta.in-view .mp-connection:nth-of-type(4) .mp-line--flow { transition-delay: 2.3s; opacity: 1; animation: flow-along 1.8s linear infinite 2.3s; }

.final-cta.in-view .mp-connection:nth-of-type(5) { transition-delay: 1.5s; opacity: 1; }
.final-cta.in-view .mp-connection:nth-of-type(5) .mp-line--base { transition-delay: 1.5s; stroke-dashoffset: 0; }
.final-cta.in-view .mp-connection:nth-of-type(5) .mp-line--flow { transition-delay: 2.5s; opacity: 1; animation: flow-along 2.6s linear infinite 2.5s; }

.final-cta.in-view .mp-connection:nth-of-type(6) { transition-delay: 1.7s; opacity: 1; }
.final-cta.in-view .mp-connection:nth-of-type(6) .mp-line--base { transition-delay: 1.7s; stroke-dashoffset: 0; }
.final-cta.in-view .mp-connection:nth-of-type(6) .mp-line--flow { transition-delay: 2.7s; opacity: 1; animation: flow-along 1.6s linear infinite 2.7s; }

/* Data flow animation along lines */
@keyframes flow-along {
    0% { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
}

/* Service Nodes */
.mp-map__nodes .mp-node-group {
    opacity: 0;
    transform: scale(0.3);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.final-cta.in-view .mp-map__nodes .mp-node-group:nth-of-type(1) { transition-delay: 2.0s; opacity: 1; transform: scale(1); }
.final-cta.in-view .mp-map__nodes .mp-node-group:nth-of-type(2) { transition-delay: 2.2s; opacity: 1; transform: scale(1); }
.final-cta.in-view .mp-map__nodes .mp-node-group:nth-of-type(3) { transition-delay: 2.4s; opacity: 1; transform: scale(1); }
.final-cta.in-view .mp-map__nodes .mp-node-group:nth-of-type(4) { transition-delay: 2.6s; opacity: 1; transform: scale(1); }
.final-cta.in-view .mp-map__nodes .mp-node-group:nth-of-type(5) { transition-delay: 2.8s; opacity: 1; transform: scale(1); }
.final-cta.in-view .mp-map__nodes .mp-node-group:nth-of-type(6) { transition-delay: 3.0s; opacity: 1; transform: scale(1); }

.mp-node-label {
    font-size: 9px;
    font-weight: 600;
    fill: rgba(43, 60, 136, 0.75);
    letter-spacing: 0.8px;
    font-family: 'Poppins', sans-serif;
}

.mp-node-ring {
    opacity: 0;
}

/* Node Pulse Animation after appearing */
@keyframes node-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.45); }
}

.final-cta.in-view .mp-node {
    animation: node-pulse 2s ease-in-out 3.5s infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.final-cta.in-view .mp-node-group:nth-of-type(2) .mp-node { animation-delay: 3.7s; }
.final-cta.in-view .mp-node-group:nth-of-type(3) .mp-node { animation-delay: 3.9s; }
.final-cta.in-view .mp-node-group:nth-of-type(4) .mp-node { animation-delay: 4.1s; }
.final-cta.in-view .mp-node-group:nth-of-type(5) .mp-node { animation-delay: 4.3s; }
.final-cta.in-view .mp-node-group:nth-of-type(6) .mp-node { animation-delay: 4.5s; }

/* Node ring expansion */
@keyframes ring-expand {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.2); opacity: 0; }
}

.final-cta.in-view .mp-node-ring {
    animation: ring-expand 2.2s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.final-cta.in-view .mp-node-group:nth-of-type(2) .mp-node-ring { animation-delay: 0.2s; }
.final-cta.in-view .mp-node-group:nth-of-type(3) .mp-node-ring { animation-delay: 0.4s; }
.final-cta.in-view .mp-node-group:nth-of-type(4) .mp-node-ring { animation-delay: 0.6s; }
.final-cta.in-view .mp-node-group:nth-of-type(5) .mp-node-ring { animation-delay: 0.8s; }
.final-cta.in-view .mp-node-group:nth-of-type(6) .mp-node-ring { animation-delay: 1.0s; }

/* HQ Marker */
.mp-map__hq {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.final-cta.in-view .mp-map__hq {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s;
}

@keyframes hq-pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.4); opacity: 0; }
}

.mp-hq-ring {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.final-cta.in-view .mp-hq-ring {
    animation: hq-pulse-ring 2.2s ease-out infinite 1.2s;
}

.final-cta.in-view .mp-hq-ring--2 {
    animation-delay: 1.6s;
    animation-duration: 2.2s;
}

/* Light Sweep */
.mp-light-sweep {
    opacity: 0;
    transform: translateX(0);
}

.final-cta.in-view .mp-light-sweep {
    animation: light-sweep 4.5s ease-in-out infinite 3.5s;
}

@keyframes light-sweep {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 1; }
    45% { opacity: 0.8; }
    90% { opacity: 0; }
    100% { transform: translateX(720px); opacity: 0; }
}

/* Map Labels */
.mp-map__label {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(43, 60, 136, 0.12);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mp-map__label--hq {
    top: 66%;
    left: 34%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
}

.mp-map__label--region {
    top: 6%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
}

.final-cta.in-view .mp-map__label--hq {
    transition-delay: 2.4s;
}

.final-cta.in-view .mp-map__label--region {
    transition-delay: 2.6s;
}

.final-cta.in-view .mp-map__label {
    opacity: 1;
    transform: translate(-50%, 0);
}

.final-cta.in-view .mp-map__label--hq {
    transform: translateX(-50%) translateY(-50%);
}

.final-cta.in-view .mp-map__label--region {
    transform: translateX(-50%) translateY(0);
}

.mp-map__label-main {
    font-size: 12px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: 1px;
}

.mp-map__label-sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--neutral-gray);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* --- Final CTA Responsive --- */
@media (max-width: 1200px) {
    .final-cta__grid {
        gap: 48px;
    }
}

@media (max-width: 1024px) {
    .final-cta {
        padding: 60px 0;
    }
    .final-cta__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .final-cta__content {
        max-width: 100%;
        text-align: center;
    }
    .final-cta__eyebrow {
        justify-content: center;
    }
    .final-cta__buttons,
    .final-cta__contact {
        justify-content: center;
    }
    .mp-map {
        max-width: 440px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .final-cta {
        padding: 80px 0;
    }
    .final-cta__title {
        font-size: 30px;
    }
    .final-cta__desc {
        font-size: 15px;
    }
    .mp-map {
        max-width: 100%;
    }
    .mp-map__svg {
        width: 90%;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .final-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .final-cta__btn-primary,
    .final-cta__btn-secondary {
        justify-content: center;
        text-align: center;
    }
    .final-cta__contact {
        gap: 14px;
        text-align: left;
    }
    .mp-map__svg {
        width: 100%;
    }
}

/* ============================================
   PRODUCTS & SOLUTIONS SHOWCASE
   ============================================ */
.products-showcase {
    position: relative;
    padding: 60px 0;
    background:
        radial-gradient(circle at 90% 10%, rgba(43, 60, 136, 0.04), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.products-showcase.in-view {
    opacity: 1;
    transform: translateY(0);
}

.products-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(43, 60, 136, 0.12), transparent);
}

/* --- Header --- */
.products-showcase__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 72px;
}

.products-showcase__eyebrow {
    display: block;
    color: var(--deep-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.products-showcase__title {
    font-size: clamp(30px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--black);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.products-showcase__intro {
    font-size: 16px;
    line-height: 1.7;
    color: var(--neutral-gray);
    max-width: 560px;
    margin: 0 auto;
}

/* --- Grid --- */
.products-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
}

.products-showcase.in-view .product-card {
    animation: product-card-in 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0;
}

@keyframes product-card-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.products-showcase.in-view .product-card:nth-child(1) { animation-delay: 0.15s; }
.products-showcase.in-view .product-card:nth-child(2) { animation-delay: 0.3s; }
.products-showcase.in-view .product-card:nth-child(3) { animation-delay: 0.45s; }
.products-showcase.in-view .product-card:nth-child(4) { animation-delay: 0.6s; }
.products-showcase.in-view .product-card:nth-child(5) { animation-delay: 0.75s; }
.products-showcase.in-view .product-card:nth-child(6) { animation-delay: 0.9s; }

/* --- Product Card --- */
.product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--white-color);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--light-grey);
    box-shadow: 0 4px 20px rgba(43, 60, 136, 0.04);
    transition:
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(43, 60, 136, 0.12);
    border-color: rgba(43, 60, 136, 0.2);
}

/* --- Card Image --- */
.product-card__image {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    margin: 0;
}

.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

.product-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(8, 11, 18, 0.1) 0%,
        rgba(8, 11, 18, 0.2) 50%,
        rgba(8, 11, 18, 0.55) 100%
    );
    transition: background 0.4s ease;
}

.product-card:hover .product-card__overlay {
    background: linear-gradient(
        to bottom,
        rgba(8, 11, 18, 0.15) 0%,
        rgba(8, 11, 18, 0.3) 50%,
        rgba(8, 11, 18, 0.7) 100%
    );
}

.product-card__number {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    background: rgba(10, 10, 20, 0.35);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
    transition: background 0.3s ease, transform 0.3s ease;
}

.product-card:hover .product-card__number {
    background: rgba(43, 60, 136, 0.7);
    transform: translateY(-2px);
}

/* --- Card Body --- */
.product-card__body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 12px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.product-card:hover .product-card__title {
    color: var(--deep-blue);
    transform: translateX(4px);
}

.product-card__desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--neutral-gray);
    margin-bottom: 24px;
    flex: 1;
}

.product-card__category {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--deep-blue);
    margin-bottom: 10px;
}

/* --- CTA --- */
.product-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--deep-blue);
    transition: color 0.3s ease;
}

.product-card__cta i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--light-grey);
    color: var(--deep-blue);
    font-size: 14px;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.product-card:hover .product-card__cta {
    color: var(--black);
}

.product-card:hover .product-card__cta i {
    background: var(--deep-blue);
    color: var(--white-color);
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(43, 60, 136, 0.3);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .products-showcase__grid {
        gap: 28px;
    }
    .product-card__image {
        height: 260px;
    }
}

@media (max-width: 1024px) {
    .products-showcase {
        padding: 60px 0;
    }
    .products-showcase__grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
        gap: 32px;
    }
    .product-card__image {
        height: 320px;
    }
}

@media (max-width: 768px) {
    .products-showcase {
        padding: 80px 0;
    }
    .products-showcase__header {
        margin-bottom: 48px;
    }
    .products-showcase__title {
        font-size: 30px;
    }
    .product-card__image {
        height: 280px;
    }
    .product-card__body {
        padding: 24px 24px 28px;
    }
    .product-card__title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .products-showcase__grid {
        gap: 24px;
    }
    .product-card__image {
        height: 240px;
    }
    .product-card__body {
        padding: 20px 20px 24px;
    }
    .product-card__title {
        font-size: 19px;
    }
    .product-card__desc {
        font-size: 13px;
    }
}

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
    background-color: var(--dark);
    color: var(--text-light);
    font-size: 15px;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.footer-main {
    padding: 80px 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 64px;
    border-bottom: 1px solid var(--border-color);
}

.footer-col {
    display: flex;
    flex-direction: column;
}

/* Brand Column */
.footer-brand .footer-logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-brand .footer-logo:hover img {
    opacity: 1;
}

.footer-brand .footer-logo {
    color: var(--white-color);
    text-decoration: none;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: inline-block;
}

.footer-brand .footer-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-light);
    max-width: 320px;
    margin-bottom: 24px;
}

.footer-brand .footer-social {
    display: flex;
    gap: 12px;
    margin-top: auto; /* Pushes to bottom */
}

.footer-brand .footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.footer-brand .footer-social a:hover {
    background-color: var(--deep-blue);
    color: var(--primary-color-dark);
    transform: translateY(-3px);
}

/* Navigation Column */
.footer-nav {
    flex-direction: row;
    gap: 64px;
}

.footer-nav-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--white-color);
    margin-bottom: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-nav-group ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-nav-group a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    position: relative;
}

.footer-nav-group a:hover {
    color: var(--white-color);
    padding-left: 8px;
}

.footer-nav-group a::before {
    content: '>';
    position: absolute;
    left: -10px;
    opacity: 0;
    transition: opacity 0.3s ease, left 0.3s ease;
}

.footer-nav-group a:hover::before {
    opacity: 1;
    left: -4px;
}

/* Contact Column */
.contact-info-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

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

.contact-info-item i {
    font-size: 14px;
    color: var(--blue);
}

.contact-info-item a, .contact-info-item address {
    color: var(--text-light);
    text-decoration: none;
    font-style: normal;
    transition: color 0.3s ease;
}

.contact-info-item a:hover {
    color: var(--white-color);
}

.footer-region {
    margin-top: auto; /* Pushes to bottom */
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
}

.mini-map {
    width: 50px;
    height: auto;
    position: relative;
}

.mini-map svg path {
    stroke: var(--blue);
}

.mini-map-dot {
    fill: var(--white-color);
}

.mini-map-pulse {
    fill: var(--blue);
    transform-origin: center;
    animation: mini-pulse 2s infinite ease-out;
}

@keyframes mini-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3); opacity: 0; }
}

.region-text {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.4;
}

.region-text span {
    color: var(--text-light);
    opacity: 0.8;
}

.region-text strong {
    color: var(--white-color);
    font-weight: 600;
}

/* Footer Bottom */
.footer-bottom {
    padding: 24px 0;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--white-color);
}

.legal-separator {
    margin: 0 12px;
}

/* --- Footer Responsive --- */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
    .footer-brand {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }
    .footer-brand .footer-desc {
        max-width: 500px;
    }
    .footer-brand .footer-social {
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 60px 0;
    }
    .footer-nav {
        gap: 48px;
        justify-content: space-around;
        text-align: center;
    }
    .footer-nav-group ul {
        align-items: center;
    }
    .footer-contact {
        align-items: center;
    }
    .footer-bottom .container {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}
/* ============================================
   INNER PAGES
   ============================================ */

/* Active navigation state */
.nav-links a.active {
    color: var(--deep-blue);
}

.nav-links a.active::after {
    width: 100%;
}

.mobile-nav-panel .mobile-link.active {
    color: var(--deep-blue);
}

/* --- Inner Page Hero (Breadcrumb Hero) --- */
.page-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 210px 0 110px;
    background-color: var(--dark);
    color: var(--white-color);
}

.page-hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
}

.page-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(8, 11, 18, 0.58) 0%, rgba(8, 11, 18, 0.42) 55%, rgba(8, 11, 18, 0.82) 100%),
        linear-gradient(135deg, rgba(8, 80, 138, 0.4), rgba(43, 60, 136, 0.3));
    z-index: 1;
}

.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}

.page-hero__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;
    margin-bottom: 24px;
    animation: pageHeroIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.15s both;
}

.page-hero__title {
    font-size: 52px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 28px;
    animation: pageHeroIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s both;
}

.page-hero__title span {
    background: linear-gradient(135deg, #9cc7ea 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-hero__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 11px 28px;
    border-radius: 50px;
    font-size: 14px;
    animation: pageHeroIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.45s both;
}

.page-hero__breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.page-hero__breadcrumb a:hover {
    color: var(--white-color);
}

.page-breadcrumb__separator {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    display: flex;
    align-items: center;
}

.page-breadcrumb__current {
    color: var(--white-color);
    font-weight: 500;
}

@keyframes pageHeroIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Shared Inner Page Section Shells --- */
.pg-section {
    padding: 50px 0;
    background-color: var(--white-color);
}

.pg-section--grey {
    background-color: var(--light-grey);
}

.pg-section--gradient {
    background:
        radial-gradient(circle at 90% 10%, rgba(43, 60, 136, 0.05), transparent 40%),
        linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
}

/* --- Product Detail Page --- */
.product-detail {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.product-detail__image {
    max-width: 640px;
    margin: 0 auto 40px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(43, 60, 136, 0.12);
}

.product-detail__image img {
    display: block;
    width: 100%;
    height: auto;
}

.product-detail__title {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: var(--black);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 28px;
}

.product-detail__description {
    text-align: left;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
}

.product-detail__description img {
    max-width: 100%;
    height: auto;
}

.product-detail__description ul {
    margin: 16px 0;
    padding-left: 24px;
}

.product-detail__description p {
    margin-bottom: 16px;
}

.product-detail__brands {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--light-grey);
}

.product-detail__brands-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--neutral-gray);
    margin-bottom: 28px;
}

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

.product-detail__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 14px;
    padding: 20px 16px;
    min-height: 110px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-detail__brand:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(43, 60, 136, 0.1);
    border-color: rgba(43, 60, 136, 0.2);
}

.product-detail__brand img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0%);
}

.product-detail__brand-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

/* --- Category Products Empty State --- */
.category-products__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: var(--white-color);
    border: 1px dashed var(--light-grey);
    border-radius: 20px;
}

.category-products__empty p {
    font-size: 16px;
    color: var(--neutral-gray);
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .product-detail__brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-detail__image {
        max-width: 100%;
    }
}

.page-intro {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.page-intro .section-title {
    max-width: 650px;
}

.page-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--neutral-gray);
    margin-top: 20px;
}

/* Reveal on scroll utility */
.animate-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-in.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- Safety Fallback: if JavaScript fails to load, keep all content visible --- */
html:not(.js) section:not(.hero-section),
html:not(.js) .animate-in,
html:not(.js) .hero-content,
html:not(.js) .hero-slide:first-child {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
/* --- About Page: Mission & Vision --- */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mv-card {
    position: relative;
    padding: 48px 40px;
    border-radius: 16px;
    background-color: var(--white-color);
    border: 1px solid var(--light-grey);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(43, 60, 136, 0.12);
}

.mv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-gradient);
}

.mv-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--brand-gradient);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(43, 60, 136, 0.25);
}

.mv-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 14px;
}

.mv-card p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--neutral-gray);
}

/* --- About Page: Timeline --- */
.timeline {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    list-style: none;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--deep-blue), rgba(43, 60, 136, 0.15));
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 0 48px 56px;
    text-align: right;
}

.timeline-item:nth-child(even) {
    margin-left: 50%;
    text-align: left;
}

.timeline-item::after {
    content: '';
    position: absolute;
    top: 6px;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--white-color);
    border: 4px solid var(--deep-blue);
    box-shadow: 0 0 0 4px rgba(8, 80, 138, 0.12);
}

.timeline-item:nth-child(even)::after {
    right: auto;
    left: -7px;
}

.timeline-year {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--deep-blue);
    background: rgba(8, 80, 138, 0.08);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.timeline-item h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 8px;
}

.timeline-item p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--neutral-gray);
}

/* --- Values grid (reuses capability items) --- */
.values-section .capabilities-strip {
    grid-template-columns: repeat(4, 1fr);
}
/* --- Solutions Page: Detail Rows --- */
.detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.detail-row + .detail-row {
    margin-top: 100px;
}

.detail-row__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(43, 60, 136, 0.15);
}

.detail-row__media img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

.detail-row__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--white-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 8px 16px;
    border-radius: 50px;
}

.detail-row__content .section-label {
    text-align: left;
}

.detail-row__content h2 {
    font-size: 36px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.3;
    margin-bottom: 20px;
}

.detail-row__content h2 span {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.detail-row__content p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--neutral-gray);
    margin-bottom: 20px;
}

.detail-feature-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 24px 0 32px;
}

.detail-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    background-color: #f8f9fa;
    padding: 12px 14px;
    border-radius: 8px;
}

.detail-feature-list li i {
    color: var(--deep-blue);
    font-size: 15px;
}

.detail-row--reverse .detail-row__media {
    order: 2;
}
/* --- Industries Page: Cards --- */
.industry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.industry-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.industry-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    z-index: 0;
}

.industry-card:hover .industry-card__image {
    transform: scale(1.06);
}

.industry-card__body {
    position: relative;
    z-index: 2;
    padding: 28px;
    color: var(--white-color);
    background: linear-gradient(180deg, transparent 0%, rgba(8, 11, 18, 0.92) 100%);
}

.industry-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--white-color);
}

.industry-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.industry-card p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 12px;
}

.industry-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white-color);
}

.industry-card__cta i {
    transition: transform 0.3s ease;
}

.industry-card:hover .industry-card__cta i {
    transform: translateX(5px);
}
/* --- Gallery Page --- */
.gallery-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 56px;
}

.gallery-filter__btn {
    background: var(--white-color);
    border: 2px solid #e0e0e0;
    color: var(--text-dark);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 24px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.gallery-filter__btn:hover {
    border-color: var(--deep-blue);
    color: var(--deep-blue);
    transform: translateY(-2px);
}

.gallery-filter__btn.active {
    background: var(--brand-gradient);
    border-color: transparent;
    color: var(--white-color);
    box-shadow: 0 6px 18px rgba(43, 60, 136, 0.25);
}

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

.gallery-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 280px;
    cursor: pointer;
    display: block;
    background-color: var(--dark);
}

.gallery-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.92;
}

.gallery-item:hover .gallery-item__image {
    transform: scale(1.06);
    opacity: 1;
}

.gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(8, 11, 18, 0.85));
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    color: var(--white-color);
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__overlay span {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-item__overlay i {
    font-size: 15px;
    opacity: 0.8;
}

.gallery-item__caption {
    display: none;
}

/* Gallery Lightbox */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8, 11, 18, 0.92);
    padding: 40px;
}

.gallery-lightbox.open {
    display: flex;
}

.gallery-lightbox__content {
    position: relative;
    max-width: 1000px;
    width: 100%;
    text-align: center;
}

.gallery-lightbox__image {
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox__caption {
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
}

.gallery-lightbox__close {
    position: absolute;
    top: -54px;
    right: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.gallery-lightbox__close:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.gallery-lightbox__nav {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white-color);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.gallery-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.gallery-lightbox__prev {
    left: -72px;
}

.gallery-lightbox__next {
    right: -72px;
}

/* --- Product Detail Image Gallery (3 per row + click to zoom) --- */
.product-detail__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.product-detail__gallery-item {
    height: 240px;
    background: var(--white-color);
    border: 1px solid var(--light-grey);
    box-shadow: 0 10px 30px rgba(43, 60, 136, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.product-detail__gallery-item:hover {
    transform: translateY(-4px);
    border-color: rgba(43, 60, 136, 0.2);
    box-shadow: 0 16px 36px rgba(43, 60, 136, 0.14);
}

.product-detail__gallery-item .gallery-item__image {
    object-fit: contain;
    padding: 16px;
    background: var(--white-color);
    opacity: 1;
}

.product-detail__gallery-item .gallery-item__overlay {
    background: linear-gradient(180deg, transparent 45%, rgba(8, 11, 18, 0.75));
}

body.lightbox-open {
    overflow: hidden;
}
/* --- News & Events Page --- */
.news-media {
    margin-bottom: 48px;
}

.news-media__heading {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--deep-blue);
    margin-bottom: 28px;
}

.news-media__gallery {
    margin-bottom: 20px;
}

.news-media__description {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-muted, #5a6474);
    font-size: 16px;
    line-height: 1.7;
}

.news-media__separator {
    border: 0;
    height: 1px;
    margin: 48px 0;
    background: linear-gradient(90deg, transparent, rgba(43, 60, 136, 0.25), transparent);
}
/* --- Contact Page --- */
.contact-info-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 80px;
}

.contact-info-card {
    background-color: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.contact-info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(43, 60, 136, 0.1);
}

.contact-info-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(8, 80, 138, 0.08);
    color: var(--deep-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.contact-info-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 10px;
}

.contact-info-card p,
.contact-info-card a {
    font-size: 14px;
    line-height: 1.7;
    color: var(--neutral-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-card a:hover {
    color: var(--deep-blue);
}

.contact-section {
    background: var(--light-grey);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: start;
}

.contact-form {
    background-color: var(--white-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    padding: 48px;
}

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

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    letter-spacing: 0.4px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark);
    background-color: #f8f9fa;
    border: 1px solid #e4e6ea;
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--deep-blue);
    background-color: var(--white-color);
    box-shadow: 0 0 0 4px rgba(8, 80, 138, 0.08);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.form-submit {
    background: var(--brand-gradient);
    color: var(--white-color);
    border: none;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    padding: 15px 36px;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 20px rgba(43, 60, 136, 0.25);
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(43, 60, 136, 0.35);
}

.form-submit i {
    transition: transform 0.3s ease;
}

.form-submit:hover i {
    transform: translateX(4px);
}

.form-success {
    display: none;
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 10px;
    background: rgba(34, 160, 90, 0.1);
    border: 1px solid rgba(34, 160, 90, 0.3);
    color: #16864d;
    font-size: 14px;
    font-weight: 500;
}

.form-success.show {
    display: block;
}
.contact-aside {
    background: var(--brand-gradient);
    border-radius: 16px;
    color: var(--white-color);
    padding: 44px 36px;
    position: sticky;
    top: 120px;
}

.contact-aside h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.35;
}

.contact-aside p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 28px;
}

.contact-aside__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-aside__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.contact-aside__list li i {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.contact-aside__list a {
    color: var(--white-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-aside__list a:hover {
    opacity: 0.85;
}

/* Map embed */
.map-section {
    padding: 0 0 100px;
    background: var(--light-grey);
}

.map-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    border: 4px solid var(--white-color);
    line-height: 0;
}

.map-wrap iframe {
    width: 100%;
    height: 460px;
    border: 0;
    display: block;
}

/* Final CTA centered variant */
.final-cta__grid--centered {
    grid-template-columns: 1fr;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.final-cta__grid--centered .final-cta__content {
    max-width: 100%;
    margin: 0 auto;
}

.final-cta__grid--centered .final-cta__eyebrow {
    justify-content: center;
}

.final-cta__grid--centered .final-cta__buttons,
.final-cta__grid--centered .final-cta__contact {
    justify-content: center;
}

/* ============================================
   BLOG LISTING & DETAIL (tiles + sidebar)
   ============================================ */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
    align-items: start;
}

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

/* Blog tile reuses .product-card look */
.blog-card .product-card__image {
    height: 220px;
}

.product-card__category {
    display: inline-block;
    color: var(--deep-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.blog-card .product-card__title {
    font-size: 18px;
    line-height: 1.4;
}

.blog-empty {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--neutral-gray);
    background: var(--white-color);
    border: 1px dashed rgba(43, 60, 136, 0.25);
    border-radius: 16px;
}

/* --- Sidebar --- */
.blog-sidebar__widget {
    background: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(43, 60, 136, 0.04);
}

.blog-sidebar__widget + .blog-sidebar__widget {
    margin-top: 24px;
}

.blog-sidebar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--light-grey);
    position: relative;
}

.blog-sidebar__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: var(--brand-gradient);
}

/* Search */
.blog-search {
    display: flex;
    border: 1px solid #dcdfe4;
    border-radius: 50px;
    overflow: hidden;
    background: var(--white-color);
}

.blog-search input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 18px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark);
    min-width: 0;
}

.blog-search input:focus {
    border-color: var(--deep-blue);
}

.blog-search button {
    border: none;
    background: var(--brand-gradient);
    color: var(--white-color);
    width: 48px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.blog-search button:hover {
    opacity: 0.9;
}

/* Categories */
.blog-categories {
    list-style: none;
}

.blog-categories li + li {
    border-top: 1px solid var(--light-grey);
}

.blog-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 4px;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.blog-categories a:hover {
    color: var(--deep-blue);
    padding-left: 8px;
}

.blog-categories a.active {
    color: var(--deep-blue);
    font-weight: 600;
}

.blog-cat-count {
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--light-grey);
    color: var(--industrial-blue);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.blog-categories a.active .blog-cat-count {
    background: var(--brand-gradient);
    color: var(--white-color);
}

/* Recent posts */
.blog-recent {
    list-style: none;
}

.blog-recent li + li {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--light-grey);
}

/* Testimonials slider: 3 cards in a row */
.testimonials-section {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--light-grey) 0%, var(--white-color) 100%);
}

.testimonials-section .container {
    max-width: 1200px;
}

.testimonials-slider {
    position: relative;
    overflow: hidden;
    padding: 40px 0 32px;
}

.testimonials-track {
    display: flex;
    gap: 32px;
    width: 100%;
    transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.testimonials-card {
    flex: 0 0 calc((100% - 64px) / 3);
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 20px;
    padding: 40px 32px 32px;
    box-shadow: 0 4px 20px rgba(43, 60, 136, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.testimonials-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(43, 60, 136, 0.12);
    border-color: rgba(43, 60, 136, 0.18);
}

.testimonials-card-image {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--white-color);
    box-shadow: 0 0 0 2px var(--deep-blue), 0 6px 18px rgba(43, 60, 136, 0.15);
    flex-shrink: 0;
    margin-bottom: 22px;
}

.testimonials-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonials-card-body {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
}

.testimonials-stars {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 17px;
    color: #f4b400;
}

.testimonials-stars .far {
    color: rgba(0, 0, 0, 0.2);
}

.testimonials-card-content {
    position: relative;
    font-size: 15px;
    line-height: 1.75;
    color: #3f4654;
    margin: 0 0 22px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex: 1 1 auto;
}

.testimonials-card-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-top: 1px solid var(--light-grey);
    padding-top: 18px;
    margin-top: auto;
    width: 100%;
}

.testimonials-card-name {
    font-weight: 600;
    color: var(--deep-blue);
    font-size: 18px;
}

.testimonials-card-position {
    font-size: 14px;
    color: var(--neutral-gray);
}

.testimonials-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 28px;
}

.testimonials-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--light-grey);
    background: var(--white-color);
    color: var(--deep-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(43, 60, 136, 0.08);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.testimonials-arrow:hover {
    background: var(--deep-blue);
    color: var(--white-color);
    border-color: var(--deep-blue);
    transform: translateY(-2px);
}

.testimonials-arrow:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 39, 70, 0.15);
}

.testimonials-dots {
    display: flex;
    gap: 10px;
}

.testimonials-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #cfd6e0;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease;
}

.testimonials-dot:hover {
    background: #9aa5b4;
}

.testimonials-dot.active {
    background: var(--deep-blue);
    transform: scale(1.3);
}

.testimonials-dot:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 39, 70, 0.15);
}

.testimonials-empty {
    text-align: center;
    color: #6b7280;
    padding: 40px 0;
}

.blog-recent a {
    display: block;
    padding: 12px 4px;
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-recent a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--deep-blue);
    margin-right: 8px;
    font-size: 12px;
}

.blog-recent a:hover {
    color: var(--deep-blue);
}

/* --- Blog Detail --- */
.blog-detail {
    background: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(43, 60, 136, 0.04);
}

.blog-detail__meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.blog-detail__category {
    color: var(--deep-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blog-detail__date {
    color: var(--neutral-gray);
    font-size: 14px;
}

.blog-detail__date i {
    margin-right: 6px;
    color: var(--deep-blue);
}

.blog-detail__image {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 28px;
    max-height: 460px;
}

.blog-detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rich content from admin editor */
.blog-detail__content {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-dark);
}

.blog-detail__content p {
    margin-bottom: 18px;
}

.blog-detail__content h2,
.blog-detail__content h3,
.blog-detail__content h4 {
    color: var(--black);
    margin: 28px 0 12px;
    line-height: 1.3;
}

.blog-detail__content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.blog-detail__content ul,
.blog-detail__content ol {
    padding-left: 24px;
    margin-bottom: 18px;
}

.blog-detail__content li {
    margin-bottom: 8px;
}

.blog-detail__content a {
    color: var(--deep-blue);
}

/* Contact form block at end of article */
.blog-detail__contact {
    margin-top: 40px;
    padding: 32px;
    background: var(--light-grey);
    border-radius: 16px;
}

.blog-detail__contact .section-label {
    display: block;
    color: var(--deep-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.blog-detail__contact h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 20px;
}

.blog-detail__contact .form-group {
    margin-bottom: 16px;
}

.blog-detail__contact input,
.blog-detail__contact textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark);
    background: var(--white-color);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    resize: vertical;
}

.blog-detail__contact input:focus,
.blog-detail__contact textarea:focus {
    border-color: var(--deep-blue);
    box-shadow: 0 0 0 3px rgba(8, 80, 138, 0.1);
}

.blog-detail__contact textarea {
    min-height: 110px;
}

.blog-detail__contact .form-submit {
    background: var(--brand-gradient);
    color: var(--white-color);
    border: none;
    padding: 13px 28px;
    border-radius: 50px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blog-detail__contact .form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(43, 60, 136, 0.3);
}

.blog-detail__contact .form-success {
    display: none;
    margin-top: 16px;
    padding: 14px 18px;
    background: #e8f6ee;
    border: 1px solid #bfe6cf;
    color: #1e7a46;
    border-radius: 10px;
    font-size: 14px;
}

.blog-detail__contact .form-success.show {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Blog Responsive --- */
@media (max-width: 991.98px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        order: 2;
    }
}

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

    .blog-detail {
        padding: 24px;
    }

    .blog-detail__contact {
        padding: 24px;
    }
}

/* ============================================
   REQUEST A QUOTE POPUP MODAL
   ============================================ */
.quote-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.quote-modal.open {
    opacity: 1;
    visibility: visible;
}

.quote-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 11, 18, 0.7);
    backdrop-filter: blur(4px);
}

.quote-modal__box {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--white-color);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    padding: 36px;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.quote-modal.open .quote-modal__box {
    transform: translateY(0) scale(1);
}

.quote-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--light-grey);
    color: var(--text-dark);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.quote-modal__close:hover {
    background: var(--deep-blue);
    color: var(--white-color);
    transform: rotate(90deg);
}

.quote-modal__head {
    text-align: center;
    margin-bottom: 24px;
}

.quote-modal__eyebrow {
    display: block;
    color: var(--deep-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.quote-modal__head h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 6px;
}

.quote-modal__head p {
    font-size: 14px;
    color: var(--neutral-gray);
}

.quote-modal__form .quote-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quote-modal__form .quote-modal__row + .quote-modal__row {
    margin-top: 16px;
}

.quote-modal__field {
    display: flex;
    flex-direction: column;
}

.quote-modal__field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.quote-modal__field label em {
    color: #d43f3f;
    font-style: normal;
}

.quote-modal__field input,
.quote-modal__field select,
.quote-modal__field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-dark);
    background: var(--white-color);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.quote-modal__field input:focus,
.quote-modal__field select:focus,
.quote-modal__field textarea:focus {
    border-color: var(--deep-blue);
    box-shadow: 0 0 0 3px rgba(8, 80, 138, 0.1);
}

.quote-modal__field textarea {
    min-height: 100px;
    resize: vertical;
}

.quote-modal__submit {
    width: 100%;
    margin-top: 20px;
    background: var(--brand-gradient);
    color: var(--white-color);
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.quote-modal__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(43, 60, 136, 0.3);
}

.quote-modal__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.quote-modal__success {
    display: none;
    margin-top: 16px;
    padding: 13px 16px;
    background: #e8f6ee;
    border: 1px solid #bfe6cf;
    color: #1e7a46;
    border-radius: 10px;
    font-size: 14px;
}

.quote-modal__success.show {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quote-modal__error {
    display: none;
    margin-top: 16px;
    padding: 13px 16px;
    background: #fdeeee;
    border: 1px solid #f3c4c4;
    color: #b02a2a;
    border-radius: 10px;
    font-size: 14px;
}

.quote-modal__error.show {
    display: block;
}

/* --- Quote Modal Responsive --- */
@media (max-width: 575.98px) {
    .quote-modal {
        padding: 16px;
        align-items: flex-end;
    }

    .quote-modal__box {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .quote-modal__form .quote-modal__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .quote-modal__form .quote-modal__row + .quote-modal__row {
        margin-top: 0;
    }

    .quote-modal__form .quote-modal__row .quote-modal__field + .quote-modal__field,
    .quote-modal__form .quote-modal__field {
        margin-bottom: 14px;
    }
}

/* --- Brands & Partners Strip (Home) --- */
.brands-strip-section {
    padding: 80px 0;
    background-color: #fff;
}

.brands-strip-section .section-heading {
    margin-bottom: 48px;
}

.brands-strip-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.brands-strip-item {
    background-color: var(--light-grey, #f8f9fa);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.brands-strip-item img {
    max-width: 100%;
    max-height: 66px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.brands-strip-item:hover {
    transform: translateY(-5px);
    background-color: #fff;
    box-shadow: 0 18px 40px rgba(13, 27, 62, 0.1);
}

.brands-strip-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 991.98px) {
    .brands-strip-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575.98px) {
    .brands-strip-section { padding: 60px 0; }
    .brands-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .brands-strip-item { height: 92px; padding: 16px; }
    .brands-strip-item img { max-height: 52px; }
}

/* --- Company Tagline (Home About + About Hero) --- */
.about-tagline {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--deep-blue);
    margin-bottom: 24px;
}

.page-hero__tagline {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 26px;
    border-radius: 50px;
    margin-bottom: 28px;
    animation: pageHeroIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.35s both;
}

@media (max-width: 575px) {
    .page-hero__tagline { font-size: 12px; letter-spacing: 1.5px; padding: 8px 16px; }
    .about-tagline { font-size: 12px; letter-spacing: 1.5px; }
}
/* --- About Page: What We Deal In --- */
.deal-section {
    background: linear-gradient(180deg, var(--white-color) 0%, #f6f8fb 100%);
}

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

.deal-card {
    position: relative;
    background-color: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 16px;
    padding: 38px 24px 32px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.deal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.deal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(43, 60, 136, 0.12);
}

.deal-card:hover::before {
    opacity: 1;
}

.deal-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--brand-gradient);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 18px;
    box-shadow: 0 8px 20px rgba(43, 60, 136, 0.22);
}

.deal-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.45;
}

.deal-tags-block {
    margin-top: 60px;
    text-align: center;
}

.deal-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neutral-gray);
}

.deal-tags-label::before,
.deal-tags-label::after {
    content: '';
    width: 48px;
    height: 1px;
    background: rgba(43, 60, 136, 0.25);
}

.deal-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1060px;
    margin: 28px auto 0;
}

.deal-tag {
    display: inline-block;
    padding: 9px 20px;
    background: var(--white-color);
    border: 1px solid var(--light-grey);
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--deep-blue);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.deal-tag:hover {
    background: var(--brand-gradient);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(43, 60, 136, 0.25);
}

@media (max-width: 1024px) {
    .deal-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .deal-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .deal-tags-block { margin-top: 44px; }
}

@media (max-width: 480px) {
    .deal-grid { grid-template-columns: 1fr; }
    .deal-tag { font-size: 12.5px; padding: 8px 14px; }
}

/* Floating Action Buttons (WhatsApp / Call / Back to Top) */
.floating-actions {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.floating-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    color: var(--white-color);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.floating-btn:hover,
.floating-btn:focus-visible {
    transform: translateY(-4px) scale(1.06);
    color: var(--white-color);
    text-decoration: none;
}

/* Hover label tooltip */
.floating-btn-label {
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--industrial-blue);
    color: var(--white-color);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.floating-btn:hover .floating-btn-label,
.floating-btn:focus-visible .floating-btn-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* WhatsApp */
.floating-btn-whatsapp {
    background: #25D366;
}

.floating-btn-whatsapp:hover {
    background: #1DA851;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
}

/* Call */
.floating-btn-call {
    background: var(--brand-gradient);
    background-size: 150% 150%;
    background-position: center;
}

.floating-btn-call:hover {
    background: var(--brand-gradient-hover);
    box-shadow: 0 10px 24px rgba(8, 80, 138, 0.45);
}

/* Back to Top */
.floating-btn-top {
    background: var(--industrial-blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
}

.floating-btn-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-btn-top:hover {
    background: var(--deep-blue);
    box-shadow: 0 10px 24px rgba(8, 80, 138, 0.45);
}

/* Back to top button pulse ring (visible only when shown) */
.floating-btn-top::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(8, 80, 138, 0.35);
    opacity: 0;
    pointer-events: none;
}

.floating-btn-top.is-visible::after {
    animation: floating-btn-pulse 2.4s ease-out infinite;
}

@keyframes floating-btn-pulse {
    0%   { opacity: 0.8; transform: scale(0.9); }
    70%  { opacity: 0;   transform: scale(1.25); }
    100% { opacity: 0;   transform: scale(1.25); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-btn-top::after {
        animation: none;
    }
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .floating-actions {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .floating-btn {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    /* Labels are awkward on touch devices: hide them */
    .floating-btn-label {
        display: none;
    }
}