/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #0a0f1e;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column; /* Stack logo and nav vertically */
    align-items: center; /* Center items horizontally */
}

/* Updated primary accent color */
:root {
    --primary-accent: #007bff; /* True Blue */
    --secondary-accent: #FD7E14; /* Orange */
    --highlight-green: #98FB98; /* Light Earthy Green */
    --dark-bg: #0a0f1e;
    --medium-bg: #1a233a;
    --light-text: #e0e0e0;
    --dark-text: #333;
}

header.site-header { /* More specific selector */
    background: var(--medium-bg); /* Darker background for header */
    color: var(--light-text);
    padding: 1rem 0;
    border-bottom: var(--primary-accent) 3px solid;
}

header.site-header a { /* More specific selector */
    color: var(--light-text);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500; /* Roboto medium weight */
}

header.site-header .logo {
    margin-bottom: 15px; /* Add some space below the logo */
    text-align: center; /* Ensure the anchor/image within is centered if it's inline-block */
}

header.site-header .logo a { /* More specific selector */
    display: inline-block; /* Ensure the anchor wraps the image correctly */
}

#site-logo {
    height: 45px; /* Restored original height */
    width: auto;
    vertical-align: middle; /* Align with nav text if needed */
    transition: transform 0.3s ease;
}

#site-logo:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

header.site-header nav {
    width: 100%; /* Allow nav to take full width for centering its content */
    margin-top: 10px; /* Space above the nav */
}

header.site-header nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center; /* Center the list items */
}

header.site-header nav ul li {
    display: inline-block; /* Keep them inline but centered by parent's text-align */
    padding: 0 15px;
}

header.site-header nav ul li a:hover { /* More specific selector */
    color: var(--primary-accent);
}

/* Make all links orange by default across the site */
a, a:visited, a:active, a:focus {
    color: var(--secondary-accent) !important;
    text-decoration: underline;
    transition: color 0.2s;
}
a:hover {
    color: #ffa94d !important; /* lighter orange on hover */
}

/* Mega Menu */
.mega-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0; /* Full width */
    background-color: #1f2a47; /* Darker mega menu background */
    padding: 20px;
    z-index: 1000;
    border-top: 1px solid #303f60;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    margin-top: 10px; /* Space from parent nav item */
}

.dropdown:hover .mega-menu,
.dropdown .mega-menu.show { /* .show class for JS control */
    display: flex; /* Use flexbox for columns */
    justify-content: space-around;
}

.mega-menu-column {
    flex: 1; /* Distribute space equally */
    padding: 0 15px;
    min-width: 200px; /* Minimum width for columns */
}

.mega-menu-column h4 { /* Changed from h3 to h4 for consistency if needed, or style h3 */
    color: var(--primary-accent);
    font-size: 1.1em;
    margin-top: 0;
    border-bottom: 1px solid #303f60;
    padding-bottom: 5px;
    font-weight: 500;
}
.mega-menu-column h4 a {
    color: var(--primary-accent);
    text-decoration: none;
}
.mega-menu-column h4 a:hover {
    text-decoration: underline;
}

.mega-menu-column ul {
    list-style: none; /* Remove default bullets */
    padding: 0;       /* Remove default padding */
    margin: 10px 0 0 0; /* Add some margin above the list if it follows an h4 */
}

.mega-menu-column ul li a {
    display: block;
    padding: 8px 0;
    color: #b0c4de; /* Lighter blue-grey for links */
    text-decoration: none;
    font-size: 0.95em;
    text-transform: none; /* Override header link style */
    font-weight: 400;
}

.mega-menu-column ul li a:hover {
    color: var(--primary-accent);
    background-color: #2a3858; /* Slight hover effect */
}

/* Additional styles for multi-column mega menu content */
.mega-menu-column > img + p,
.mega-menu-column > .mega-menu-image-wrapper + p { /* Handles direct img or wrapped img */
    font-size: 0.9em;
    color: #b0c4de; /* Consistent with other lighter text */
    margin-top: 10px;
    line-height: 1.4;
}

/* General styling for paragraphs in columns if not the first child, to catch descriptions */
.mega-menu-column > p:not(:first-child) {
    font-size: 0.9em;
    color: #b0c4de;
    margin-top: 10px;
    line-height: 1.4;
}

/* Adjust h4 margin if it's followed by another h4 (like in Products menu) */
.mega-menu-column h4 + h4 {
    margin-top: 15px; /* Add some space between consecutive h4s */
}

/* Ensure the image in the mega menu column is responsive and has some margin */
.mega-menu-column img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px; /* Optional: slightly rounded corners for the image */
    margin-bottom: 10px; /* Space between image and paragraph */
    display: block; /* Ensure it behaves as a block for margin handling */
}

/* Hero Section */
.hero-section {
    /* background: url('../images/hero_background_placeholder.jpg') no-repeat center center/cover; */ /* Will be replaced */
    /* background: linear-gradient(rgba(10, 15, 30, 0.8), rgba(10, 15, 30, 0.95)), var(--dark-bg); */ /* Gradient is now part of particleground setup or can be layered if needed */
    background-color: var(--dark-bg); /* Base background for particleground */
    color: var(--light-text);
    min-height: 80vh; /* Increased height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    position: relative; /* For particleground canvas and content stacking */
    overflow: hidden; /* For animations that might go outside bounds */
}

.hero-section .pg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* Override inline styles from particleground */
    height: 100% !important; /* Override inline styles from particleground */
    z-index: 0; /* Behind the content */
}

.hero-section .container { /* Ensure container within hero is also full-width for text alignment */
    position: relative; /* For z-index stacking if needed */
    z-index: 1; /* Content above particleground canvas */
}

.hero-section h1 {
    font-size: 3.5em; /* Larger */
    margin-bottom: 0.5em;
    font-weight: 700; /* Roboto Bold */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); /* Subtle cyan glow */
    animation: subtle-slide-up 1s ease-out forwards;
}

.hero-section p {
    font-size: 1.6em; /* Larger */
    margin-bottom: 1.5em;
    max-width: 700px; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
    font-weight: 300; /* Roboto Light */
    animation: subtle-slide-up 1s ease-out 0.3s forwards; /* Delayed start */
    opacity: 0; /* Start hidden for animation */
}

.cta-button {
    display: inline-block;
    background: var(--primary-accent);
    color: var(--dark-bg); /* Dark text on bright button */
    padding: 15px 35px; /* Larger padding */
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: 700; /* Bold text */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: 2px solid var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse-glow 2.5s infinite ease-in-out; /* Subtle background pulse */
}

.cta-button:hover {
    background: transparent;
    color: var(--primary-accent);
    transform: translateY(-3px) scale(1.05); /* Added scale */
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.4); /* Enhanced glow on hover */
    animation-play-state: paused; /* Pause pulsing on hover to emphasize direct interaction */
}

.cta-button-secondary {
    display: inline-block;
    background: transparent;
    color: var(--primary-accent);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: 2px solid var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta-button-secondary:hover {
    background: var(--primary-accent);
    color: var(--dark-bg);
    transform: translateY(-2px) scale(1.03); /* Added scale */
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3); /* Enhanced glow */
}

/* Section Styling */
.section-padding {
    padding: 60px 0;
}

.alt-background {
    background-color: var(--medium-bg); /* Use medium dark for alternating sections */
}

.section-title {
    font-size: 2.5em;
    color: var(--primary-accent);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}

.section-intro {
    font-size: 1.1em;
    color: var(--light-text);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
    font-weight: 300;
}

/* Solutions Section (Homepage) */
.solutions-section .solution-item {
    background-color: #121a2f; /* Slightly lighter than main dark bg */
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #2a3858; /* Subtle border */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Added border-color transition */
}

.solutions-section .solution-item:hover {
    transform: translateY(-8px); /* Increased lift */
    box-shadow: 0 12px 25px rgba(0, 255, 255, 0.15); /* Enhanced shadow */
    border-color: var(--primary-accent); /* Highlight border on hover */
}

.solutions-section .solution-item img.solution-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    /* Consider SVG filter for color theming if icons are single color */
    animation: icon-subtle-pulse 2.5s infinite ease-in-out;
    transition: transform 0.3s ease, filter 0.3s ease; /* Added filter transition */
}

.solutions-section .solution-item:hover img.solution-icon {
    animation-play-state: paused;
    transform: scale(1.2);
    filter: brightness(130%); /* Slightly brighter on direct hover focus */
}

.solutions-section .solution-item h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: var(--primary-accent);
    font-weight: 500;
}

.solutions-section .solution-item p {
    font-size: 0.95em;
    color: #b0c4de; /* Lighter text for readability */
    line-height: 1.5;
    margin-bottom: 15px;
}

.solutions-section .learn-more-link {
    color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.solutions-section .learn-more-link:hover {
    color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    text-decoration: underline;
}

/* Certifications Section (Homepage) */
.certifications-section {
    /* background-color: var(--dark-bg); */ /* Using default dark background */
    padding: 60px 0; /* Ensure padding is consistent */
}

.certifications-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px; /* Increased gap */
}

.certifications-display img {
    height: 180px; /* Increased for readability */
    max-width: 100%;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: grayscale(30%) brightness(110%); /* Techy feel, adjust as needed */
}

.certifications-display img:hover {
    opacity: 1;
    transform: scale(1.1);
    filter: grayscale(0%) brightness(100%);
}

/* About Us - Certifications Page */
.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.certification-item {
    background-color: var(--medium-bg);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #2a3858;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certification-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.1);
}

.certification-logo {
    max-height: 80px;
    margin-bottom: 15px;
    filter: brightness(1.1); /* Make logos slightly brighter if they are dark */
}

.certification-item h4 {
    color: var(--primary-accent);
    font-size: 1.3em;
    margin-bottom: 10px;
    font-weight: 500;
}

.certification-item p {
    color: #b0c4de;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.cta-link {
    color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    text-decoration: none;
    font-weight: 500;
}

.cta-link:hover {
    text-decoration: underline;
}

/* About Us - Manufacturing Page */
.image-gallery-section .image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.image-gallery-section .gallery-item {
    background-color: var(--dark-bg);
    border: 1px solid #2a3858;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

.image-gallery-section .gallery-item img {
    max-width: 100%;
    height: auto;
    max-height: 200px; /* Control image height */
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 10px;
}

.image-gallery-section .gallery-item p {
    color: #b0c4de;
    font-size: 0.9em;
    margin-bottom: 0;
}

.feature-list ul {
    list-style-type: none;
    padding-left: 0;
}

.feature-list li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    color: #b0c4de;
    font-weight: 300;
    line-height: 1.7;
}

.feature-list li::before {
    content: '\272A'; /* Techy star/sparkle */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    font-size: 1.2em;
}

/* About Us - Careers Page */
.culture-perks .perks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.culture-perks .perk-item {
    background-color: var(--medium-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #2a3858;
    text-align: center;
}

.culture-perks .perk-item img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    /* Consider filter: invert(1) if icons are dark and need to be light */
}

.culture-perks .perk-item h4 {
    color: var(--primary-accent);
    font-size: 1.2em;
    margin-bottom: 8px;
}

.culture-perks .perk-item p {
    color: #b0c4de;
    font-size: 0.9em;
}

.open-positions .job-listing-filter {
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap; /* Allow filters to wrap on smaller screens */
}

.open-positions .job-listing-filter label {
    color: var(--light-text);
    font-weight: 500;
}

.open-positions .job-listing-filter select,
.open-positions .job-listing-filter input[type="text"] {
    padding: 10px;
    border: 1px solid #303f60;
    border-radius: 4px;
    background-color: #0f172a;
    color: var(--light-text);
    min-width: 200px; /* Ensure decent width */
}

.open-positions .job-listings .job-item {
    background-color: var(--medium-bg);
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #2a3858;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
}

.open-positions .job-listings .job-item:hover {
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1);
}

.open-positions .job-listings .job-item h4 {
    color: var(--primary-accent);
    margin-top: 0;
    margin-bottom: 5px;
}

.open-positions .job-listings .job-item .job-location {
    font-size: 0.9em;
    color: #8a9ac0; /* Muted color for location */
    margin-bottom: 10px;
}

.open-positions .job-listings .job-item .job-summary {
    color: #b0c4de;
    font-size: 0.95em;
    margin-bottom: 15px;
}

.hiring-process-steps {
    list-style-type: none;
    padding-left: 0;
    counter-reset: process-counter;
}

.hiring-process-steps li {
    margin-bottom: 15px;
    padding-left: 45px;
    position: relative;
    color: #b0c4de;
    font-size: 1.05em;
}

.hiring-process-steps li::before {
    counter-increment: process-counter;
    content: counter(process-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background-color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    color: var(--dark-bg);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
}

/* General Content Section Styling */
.content-section {
    margin-bottom: 40px;
    padding: 20px;
    background-color: #121a2f; /* Slightly lighter than main dark bg for sections */
    border-radius: 8px;
    border: 1px solid #1f2a47; /* Subtle border for sections */
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    font-size: 2em;
    color: var(--primary-accent);
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 500;
    border-bottom: 1px solid #2a3858;
    padding-bottom: 10px;
}

.content-section h3 {
    font-size: 1.5em;
    color: var(--secondary-accent); /* Now Orange, was Tech Green */
    margin-top: 25px;
    margin-bottom: 15px;
    font-weight: 500;
}

.content-section p,
.content-section ul,
.content-section ol {
    color: #b0c4de;
    line-height: 1.7;
    margin-bottom: 15px;
}

.content-section ul li,
.content-section ol li {
    margin-bottom: 8px;
}

.content-section ul {
    list-style-type: disc; /* Default to disc for unordered lists in content */
    padding-left: 20px;
}

.content-section ol {
    padding-left: 20px;
}

.cta-section {
    text-align: center;
    padding: 30px;
    background-color: var(--medium-bg);
}

.cta-section h3 {
    color: var(--primary-accent);
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary-accent);
    color: var(--dark-bg);
    border: 2px solid var(--primary-accent);
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-accent);
    border: 2px solid var(--primary-accent);
}

.btn-secondary:hover {
    background: var(--primary-accent);
    color: var(--dark-bg);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.logo.large-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.logo.large-logo #site-logo {
    height: 180px;
    max-width: 100%;
    width: auto;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .logo.large-logo #site-logo {
        height: 120px;
    }
}

.site-header.enhanced-header {
    padding-top: 30px;
    padding-bottom: 30px;
    background: var(--medium-bg);
    border-bottom: 4px solid var(--primary-accent);
}

.site-header.enhanced-header .main-navigation ul {
    margin-top: 10px;
}

/* Active Submenu Item Styling */
.mega-menu-column ul li a.active-submenu {
    color: var(--primary-accent);
    font-weight: bold;
    background-color: #2a3858; /* Highlight background */
}

/* Hero Inner (for subpages) */
.hero-inner {
    background-color: var(--medium-bg); /* Or a specific gradient/image */
    padding: 3rem 0;
    text-align: center;
    border-bottom: 2px solid var(--primary-accent);
}

.hero-inner h1 {
    font-size: 2.8em;
    color: var(--primary-accent);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.hero-inner .breadcrumb {
    justify-content: center; /* Center breadcrumbs */
    margin-bottom: 0;
}

/* Page Content Wrapper */
.page-content {
    padding: 40px 0;
}

/* Footer Styling (ensure it's using the new structure) */
footer {
    background: #05080f; /* Even darker for footer */
    color: #a0a0a0; /* Muted light text */
    padding: 40px 0 20px 0;
    margin-top: 40px; /* Ensure space from content */
    border-top: 2px solid var(--primary-accent);
    font-size: 0.9em;
}

footer .container {
    display: block; /* Override flex for footer container to allow columns to work naturally */
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.footer-column {
    flex: 1;
    min-width: 220px; /* Adjust min-width for 4 columns */
    padding: 0 15px;
    margin-bottom: 20px;
}

.footer-column h4 {
    color: var(--primary-accent);
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: 500;
}

.footer-column p,
.footer-column ul {
    margin-bottom: 10px;
    font-size: 0.95em;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a,
.footer-column p a {
    color: #a0a0a0;
    text-decoration: none;
    text-transform: none;
    font-weight: 400;
}

.footer-column ul li a:hover,
.footer-column p a:hover {
    color: var(--primary-accent);
    text-decoration: underline;
}

.social-media a {
    margin-right: 10px;
    display: inline-block;
}

.social-media img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.social-media img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Ensure the copyright is centered if it's in the first column or its own row */
.footer-column:first-child p:last-child {
    /* If copyright is here and needs centering, adjust its parent or itself */
    /* text-align: center; /* Or ensure its container allows for centering */
}

/* Responsive adjustments for footer columns */
@media (max-width: 992px) {
    .footer-column {
        min-width: calc(50% - 30px); /* Two columns on medium screens */
        margin-bottom: 30px; /* Add more bottom margin for spacing */
    }
}

@media (max-width: 767px) {
    .footer-column {
        min-width: 100%; /* Stack columns on small screens */
        text-align: center; /* Center text in stacked columns */
        margin-bottom: 25px; /* Adjust margin for stacked items */
    }
}

/* Header and Nav specific styles (ensure these are correctly placed and not overridden by general styles if not intended) */
header {
    background: var(--medium-bg);
    color: var(--light-text);
    padding: 1rem 0;
    border-bottom: var(--primary-accent) 3px solid;
    position: sticky; /* Make header sticky */
    top: 0;
    z-index: 1020; /* Ensure header is above other content */
    width: 100%; /* Ensure header takes full width */
}

header .container {
    display: flex;
    justify-content: space-between; /* Logo on left, nav on right */
    align-items: center;
    flex-direction: row; /* Override general .container if it\'s column */
    width: 90%; /* Consistent width */
    max-width: 1200px; /* Consistent max-width */
    padding: 0 20px; /* Add horizontal padding */
}

header .logo {
    margin: 0; /* Remove margin if it was for vertical stacking */
    flex-shrink: 0; /* Prevent logo from shrinking too much */
}

header .logo img {
    height: 45px; /* Slightly adjust logo size for sticky header */
    width: auto;
    transition: height 0.3s ease;
}

header nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex; /* Align nav items horizontally */
}

header nav ul li {
    position: relative; /* For mega menu positioning */
    margin-left: 20px; /* Spacing between nav items */
}

header nav ul li:first-child {
    margin-left: 0;
}

header nav ul li a {
    color: var(--light-text);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 500;
    padding: 15px 0; /* Vertical padding for clickable area */
    display: block;
    position: relative;
}

header nav ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 10px; /* Adjust position of underline */
    left: 50%;
    background-color: var(--primary-accent);
    transition: width 0.3s ease, left 0.3s ease;
}

header nav ul li a:hover::after,
header nav ul li a.active::after { /* Style for active page link */
    width: 100%;
    left: 0;
}

header nav ul li a:hover,
header nav ul li a.active {
    color: var(--primary-accent);
}

/* Mega Menu (re-check positioning and display) */
.has-megamenu:hover .mega-menu {
    display: flex; /* Use flex for columns */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below the nav item */
    left: 0;
    width: auto; /* Auto width based on content or set a specific one */
    min-width: 600px; /* Example minimum width for a larger mega menu */
    background-color: #1f2a47;
    padding: 20px;
    z-index: 1000;
    border-top: 1px solid #303f60;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Slight animation */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    justify-content: space-around;
}

/* Adjust left positioning for mega menus that might go off-screen */
header nav ul li:nth-last-child(-n+2) .mega-menu { /* Target last two items, adjust as needed */
    left: auto;
    right: 0;
}

/* Mobile Navigation (Hamburger Menu) */
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 1.8em;
    cursor: pointer;
}

@media (max-width: 992px) { /* Breakpoint for mega menu to switch to simpler dropdown or stacked */
    header nav ul li {
        margin-left: 15px; /* Reduce spacing on medium screens */
    }
    .mega-menu {
        min-width: auto;
        width: 280px; /* Adjust for smaller screens */
    }
    .mega-menu-column {
        min-width: auto; /* Allow columns to shrink */
        flex-basis: 100%; /* Stack columns if needed */
    }
    .has-megamenu:hover .mega-menu {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    header .container {
        flex-wrap: wrap; /* Allow logo and nav to wrap */
        justify-content: space-between; /* Space out logo and toggle */
        padding: 0 15px; /* Adjust padding for smaller screens */
    }
    header .logo {
        /* Potentially take full width or stay on left */
        margin-bottom: 0; /* Remove bottom margin if nav wraps below */
    }
    header .logo img {
        height: 40px; /* Adjust logo for smaller screens */
    }
    .menu-toggle {
        display: block; /* Show hamburger */
        order: 1; /* Ensure toggle is on the right */
    }
    header nav {
        width: 100%;
        order: 2; /* Ensure nav is below logo/toggle line */
        margin-top: 10px; /* Add space if nav wraps */
    }
    header nav ul {
        display: none; /* Hide nav links by default */
        flex-direction: column;
        width: 100%;
        background-color: var(--medium-bg); /* Background for mobile nav dropdown */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        padding: 10px 0;
    }
    header nav ul.active {
        display: flex; /* Show when active */
    }
    header nav ul li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    header nav ul li a {
        padding: 10px 15px;
        border-bottom: 1px solid #2a3858; /* Separator for mobile nav items */
    }
    header nav ul li a::after {
        display: none; /* Remove underline effect for mobile */
    }
    header nav ul li:last-child a {
        border-bottom: none;
    }
    .mega-menu {
        position: static; /* Make mega menu part of the flow */
        width: 100%;
        box-shadow: none;
        border-top: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 10px 0;
        background-color: #121a2f; /* Slightly different bg for nested mobile menu */
    }
    .has-megamenu:hover .mega-menu {
        display: none; /* Controlled by JS/click on mobile */
    }
    .has-megamenu .mega-menu.show-mobile {
        display: flex; /* Or block if stacking columns */
        flex-direction: column;
        border-top: 1px solid #2a3858; /* Add a separator for mobile mega menu */
    }
    .mega-menu-column {
        padding: 0 15px; /* Padding for mobile mega menu items */
        border-bottom: 1px solid #2a3858; /* Separator for columns in mobile */
    }
    .mega-menu-column:last-child {
        border-bottom: none;
    }
    .mega-menu-column h4 {
        padding-top: 10px;
        font-size: 1em; /* Adjust font size for mobile */
    }
    .mega-menu-column ul li a {
        font-size: 0.9em; /* Adjust font size */
        padding: 8px 10px; /* Adjust padding */
    }
    .mega-menu-column img {
        display: none; /* Hide images in mega menu on small mobile to save space */
    }
    .mega-menu-column p {
        display: none; /* Hide descriptive paragraphs in mega menu on small mobile */
    }

    /* Product Detail Page Responsive Adjustments */
    .product-detail-page .product-grid {
        grid-template-columns: 1fr; /* Stack image and summary */
    }
    .product-detail-page .product-image-gallery {
        margin-bottom: 20px;
    }
    .product-detail-page .product-summary .cta-button,
    .product-detail-page .product-summary .cta-button-secondary {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    .product-detail-page .tabs-container .tab-buttons {
        display: flex;
        flex-direction: column; /* Stack tab buttons */
    }
    .product-detail-page .tabs-container .tab-button {
        width: 100%;
        margin-bottom: 5px;
        text-align: left;
    }

    /* Solutions Section (Homepage) Responsive */
    .solutions-grid { /* Assuming you have a grid container for solution items */
        grid-template-columns: 1fr; /* Stack solution items */
    }

    /* Certifications Grid (About Us) Responsive */
    .certifications-grid {
        grid-template-columns: 1fr; /* Stack certification items */
    }

    /* Manufacturing Page Gallery & Features Responsive */
    .image-gallery-section .image-gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Smaller items */
    }

    /* Careers Page Responsive */
    .culture-perks .perks-grid {
        grid-template-columns: 1fr; /* Stack perks */
    }
    .open-positions .job-listing-filter {
        flex-direction: column;
        align-items: stretch;
    }
    .open-positions .job-listing-filter select,
    .open-positions .job-listing-filter input[type="text"] {
        width: 100%;
    }

    /* Contact Page Responsive */
    .contact-grid {
        grid-template-columns: 1fr; /* Stack form and details */
    }
    .contact-form-container, .contact-details-container {
        padding: 0; /* Remove padding if stacked */
    }
    .contact-form-container h2, .contact-details-container h2 {
        font-size: 1.8em;
    }
}

/* Hybrid Transformer Tabbed Section Styles */
.hybrid-tabs-section {
    background: var(--medium-bg);
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.hybrid-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--primary-accent);
}
.hybrid-tab-button {
    background: none;
    border: none;
    color: var(--primary-accent);
    font-size: 1.2em;
    font-weight: 700;
    padding: 18px 36px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 10px 10px 0 0;
    outline: none;
}
.hybrid-tab-button.active {
    background: var(--primary-accent);
    color: var(--dark-bg);
    border-bottom: 2px solid var(--medium-bg);
    z-index: 2;
}
.hybrid-tab-content {
    display: none;
    background: var(--medium-bg);
    padding: 32px 24px 24px 24px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-top: -2px;
}
.hybrid-tab-content.active {
    display: block;
}
.hybrid-tab-content ul {
    margin: 0 0 18px 0;
    padding-left: 20px;
    color: #b0c4de;
}
.hybrid-tab-content h2 {
    color: var(--primary-accent);
    margin-top: 0;
    font-size: 1.5em;
}
.learn-more-link {
    color: var(--highlight-green);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.learn-more-link:hover {
    color: var(--secondary-accent);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .hybrid-tabs {
        flex-direction: column;
        align-items: stretch;
    }
    .hybrid-tab-button {
        width: 100%;
        border-radius: 10px 10px 0 0;
        padding: 14px 0;
        font-size: 1em;
    }
    .hybrid-tab-content {
        padding: 20px 10px 16px 10px;
    }
}

/* Product Image Gallery Enhancements */
.product-image-gallery .main-image-container {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden; /* Ensures zoom icon doesn't overflow oddly if image is small */
    border-radius: 8px; /* Match other elements */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

.product-image-gallery .main-image-container img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners for the main image */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover if desired */
}

.product-image-gallery .image-zoom-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 10px;
    border-radius: 50%;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 10; /* Ensure it's above the image */
}

.product-image-gallery .image-zoom-icon:hover {
    background-color: rgba(0, 255, 255, 0.8);
    color: var(--dark-bg);
}

.product-image-gallery .thumbnail-container {
    display: flex;
    gap: 10px; /* Spacing between thumbnails */
    justify-content: center; /* Center thumbnails if they don't fill the space */
    flex-wrap: wrap; /* Allow thumbnails to wrap on smaller screens */
}

.product-image-gallery .thumbnail-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.7;
}

.product-image-gallery .thumbnail-image:hover {
    border-color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    transform: scale(1.05);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(40, 200, 200, 0.3); /* Consider adjusting shadow color if it clashes */
}

.product-image-gallery .thumbnail-image.active-thumb {
    border-color: var(--primary-accent);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.4);
}

/* Image Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1050; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 90vw;
    max-width: 900px;
    max-height: 90vh;
    animation-name: zoomInModal;
    animation-duration: 0.4s;
}

@keyframes zoomInModal {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 50px; /* Fixed height to prevent layout shift */
}

.close-modal-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: var(--primary-accent);
    text-decoration: none;
    cursor: pointer;
}

/* Product Detail Page Specifics */
.product-detail-page .product-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Image side by side with details */
    gap: 30px;
    margin-bottom: 40px;
}

.product-detail-page .product-image {
    width: 100%;
    max-width: 500px; /* Limit max width */
    margin: 0 auto; /* Center image */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.product-detail-page .product-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.product-detail-page .product-image:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.product-detail-page .product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-detail-page .product-info h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
    color: var(--primary-accent);
    font-weight: 700;
}

.product-detail-page .product-info h2 {
    font-size: 2em;
    margin-bottom: 0.3em;
    color: #e0e0e0;
    font-weight: 500;
}

.product-detail-page .product-info p {
    font-size: 1.1em;
    color: #b0c4de;
    line-height: 1.6;
    margin-bottom: 1.2em;
}

.product-detail-page .product-info .price {
    font-size: 1.5em;
    color: var(--primary-accent);
    margin-bottom: 1em;
    font-weight: 600;
}

.product-detail-page .product-info .btn {
    align-self: flex-start;
    padding: 12px 25px;
    font-size: 1.1em;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.product-detail-page .product-info .btn-primary {
    background: var(--primary-accent);
    color: var(--dark-bg);
    border: 2px solid var(--primary-accent);
}

.product-detail-page .product-info .btn-primary:hover {
    background: transparent;
    color: var(--primary-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.product-detail-page .product-info .btn-secondary {
    background: transparent;
    color: var(--primary-accent);
    border: 2px solid var(--primary-accent);
}

.product-detail-page .product-info .btn-secondary:hover {
    background: var(--primary-accent);
    color: var(--dark-bg);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.product-detail-page .tabs-container {
    margin-top: 30px;
}

.product-detail-page .tabs-container .tab {
    padding: 15px 25px;
    border: 1px solid #2a3858;
    border-radius: 5px;
    background-color: #121a2f;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.product-detail-page .tabs-container .tab:hover {
    background-color: #1f2a47;
    transform: translateY(-2px);
}

.product-detail-page .tabs-container .tab.active {
    background-color: var(--medium-bg);
    border-color: var(--primary-accent);
    font-weight: 500;
}

.product-detail-page .tabs-container .tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #2a3858;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #121a2f;
}

.product-detail-page .tabs-container .tab-content.active {
    display: block;
}

.product-detail-page .tabs-container .tab-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.product-detail-page .tabs-container .tab-content ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.product-detail-page .tabs-container .tab-content ul li::before {
    content: \'\\272A\'; /* Techy star/sparkle */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--highlight-green); /* Changed from var(--secondary-accent) */
    font-size: 1.1em;
    line-height: 1.6;
}

/* About Bottom Tabs Section */
.about-bottom-tabs-section {
    margin-top: 40px;
    background: var(--medium-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.about-bottom-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}
.about-tab-button {
    background: var(--primary-accent);
    color: var(--dark-bg);
    border: none;
    padding: 12px 32px;
    border-radius: 5px 5px 0 0;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.about-tab-button:not(.active) {
    background: #23305a;
    color: #b0c4de;
}
.about-tab-button.active {
    background: var(--secondary-accent);
    color: var(--dark-bg);
}
.about-tab-content {
    display: none;
    background: var(--medium-bg);
    padding: 30px 20px;
    border-radius: 0 0 8px 8px;
    color: #e0e0e0;
}
.about-tab-content.active {
    display: block;
}

@media (max-width: 600px) {
    .about-bottom-tabs {
        flex-direction: column;
        gap: 10px;
    }
    .about-tab-button {
        width: 100%;
        border-radius: 5px 5px 0 0;
    }
}

/* Highlight Frames Section */
.highlight-frames-section {
    background: linear-gradient(90deg, #0a0f1e 60%, #1a233a 100%);
    padding-top: 40px;
    padding-bottom: 40px;
}
.highlight-frames-grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}
.highlight-frame {
    background: #121a2f;
    border: 3px solid var(--primary-accent);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,255,255,0.08);
    padding: 32px 28px 28px 28px;
    max-width: 350px;
    min-width: 260px;
    flex: 1 1 300px;
    text-align: center;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    margin-bottom: 20px;
}
.highlight-frame:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 12px 32px rgba(0,255,255,0.18);
    border-color: var(--secondary-accent);
}
.highlight-frame h3 {
    color: var(--primary-accent);
    font-size: 1.35em;
    margin-bottom: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.highlight-frame .highlight-icon {
    font-size: 1.5em;
    vertical-align: middle;
}
.highlight-frame p {
    color: #b0c4de;
    font-size: 1.08em;
    font-weight: 400;
    margin-bottom: 0;
}
.demand-frame {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 4px rgba(0,123,255,0.08);
}
.earthquake-frame {
    border-color: var(--secondary-accent);
    box-shadow: 0 0 0 4px rgba(253,126,20,0.08);
}
.roi-frame {
    border-color: var(--highlight-green);
    box-shadow: 0 0 0 4px rgba(152,251,152,0.08);
}
@media (max-width: 900px) {
    .highlight-frames-grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .highlight-frame {
        max-width: 100%;
        min-width: 0;
    }
}

/* ...existing code... */
.certifications-display img {
    height: 180px; /* Increased for readability */
    max-width: 100%;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: grayscale(30%) brightness(110%); /* Techy feel, adjust as needed */
}

.feature-visual img,
.product-image-gallery .main-image-container img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 16px auto;
}

.product-image-gallery .thumbnail-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.modal-content {
    margin: auto;
    display: block;
    width: 90vw;
    max-width: 900px;
    max-height: 90vh;
}

@media (max-width: 600px) {
    .certifications-display img {
        height: 90px;
    }
    .feature-visual img,
    .product-image-gallery .main-image-container img {
        max-height: 220px;
    }
    .modal-content {
        max-width: 98vw;
        max-height: 70vh;
    }
}