:root {
    /* Primary Brand Colors sampled from Logo */
    --brand-emerald: #00875a;   /* Darker side of logo */
    --brand-mint: #00d27f;      /* Lighter side of logo */
    --brand-glow: #00ff9d;      /* For hover effects/accents */
    
    /* Backgrounds & Text */
    --bg-dark: #060a08;         /* Deep forest black-green for dark sections */
    --bg-light: #ffffff;
    --text-main: #1a1e1c;       /* Off-black with a hint of green */
    --text-dim: #5c6660;
    
    /* Glassmorphism helpers */
    --glass-border: rgba(0, 210, 127, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.05);
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Navbar Styling Updated for Logo Theme --- */
header {
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: transparent; 
    border-bottom: 1px solid transparent; 
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

/* Scroll State (Desktop & Mobile) */
header.scrolled {
    background: #000000 !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; 
}

/* Ensure text remains explicitly white when scrolled */
header.scrolled .nav-links a {
    color: #ffffff !important; 
}

header.scrolled .nav-links a:hover, 
header.scrolled .nav-links a.active {
    color: #00d27f !important; 
}
header.menu-open {
    background: #000000 !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
}

.logo img {
    height: 50px; 
    width: auto;
    display: block;
}

/* --- Hamburger Icon Base --- */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    width: 30px; 
    height: 21px; 
    z-index: 1001;
}

.hamburger .bar {
    width: 100%;
    height: 3px;
    background-color: #ffffff; /* Hamburger lines are white */
    border-radius: 3px;
    transition: all 0.3s ease;
}

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

.nav-links a {
    text-decoration: none;
    color: #ffffff; /* Default white text */
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
    opacity: 0.8;
}
.nav-links a:hover, .nav-links a.active {
    opacity: 1;
    color: #00d27f; 
}

/* Navbar CTA Button - Gradient sampled from Logo */
.btn-nav-primary {
    background: linear-gradient(135deg, #00875a 0%, #00d27f 100%);
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: 0.3s;
    border: none;
    display: inline-block;
}

.btn-nav-primary:hover {
    background: #ffffff;
    color: #00875a; 
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 210, 127, 0.3);
}
/* --- Mobile Responsive Navbar --- */
@media (max-width: 992px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 30px 0 15px 0;
        display: none; 
    }

    .nav-cta {
        width: 100%;
        display: none; 
        justify-content: center;
        padding-bottom: 25px;
    }

    .nav-links.active, 
    .nav-cta.active {
        display: flex;
    }

    /* Professional 'X' Animation */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* --- Hero Section with Background --- */
.hero-banner {
    position: relative;
    min-height: 100vh;
    width: 100%; 
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #000; /* Fallback color */
}
.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Changed from 100vw to 100% to fill parent */
    height: 100%;
    z-index: 0; /* Behind everything */
}
.hero-slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;       /* Forces image to fill the space */
    background-position: center;  /* Centers the focus */
    background-repeat: no-repeat;
    opacity: 0;                   /* Hidden by default */
    z-index: 0;
    animation: slideAnimation 20s infinite; /* Starts the auto-slide */
}
/* Auto-Slide Logic: Stagger the start time */
.hero-slideshow .slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .slide:nth-child(2) { animation-delay: 5s; }
.hero-slideshow .slide:nth-child(3) { animation-delay: 10s; }
.hero-slideshow .slide:nth-child(4) { animation-delay: 15s; }
@keyframes slideAnimation {
    0% { opacity: 0; transform: scale(1); }
    5% { opacity: 1; }                    /* Fade in (1 second) */
    25% { opacity: 1; }                   /* Stay visible (4 seconds) */
    30% { opacity: 0; transform: scale(1.08); } /* Fade out + zoom (1 second) */
    100% { opacity: 0; }                  /* Hidden for rest of cycle */
}
/* Gradient overlay: Dark on the left for text, transparent on the right to show the image */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* Darker gradient to ensure text is readable over any image */
    background: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.5) 60%, 
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: 1; /* Above images, below text */
}
.hero-content-wrapper {
    position: relative;
    z-index: 2; /* Above overlay and images */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-text-col {
    max-width: 750px;
    color: #ffffff;
}

/* Responsive Typography: clamp(min, preferred, max) */
.hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important; 
    
font-size: clamp(1.6rem, 4.5vw, 3rem);
        line-height: 1.2;
        letter-spacing: -0.02em;
      margin: 15px 0 25px;
    
    margin: 15px 0 25px;
    color: #ffffff;
    text-transform: none;
}
.text-highlight {
    color: var(--brand-mint);
    font-weight: 500;
    /* Subtle glow refined for smaller size */
    text-shadow: 0 0 20px rgba(0, 210, 127, 0.3);
}
.hero-desc {
    max-width: 580px; /* Narrowed width to match smaller title */
    font-weight: 400; /* Dropped to 400 for a cleaner look */
    font-size: 1rem; /* Scaled down for mobile */
        line-height: 1.5;
        margin-bottom: 30px;
        opacity: 0.9;
    color: rgba(255, 255, 255, 0.85);
    
}
/* Glassmorphism Elements */
.pill-tag, .badge-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #ffffff;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 60px;
}

/* Buttons */
.btn-primary-green {
  background: linear-gradient(135deg, var(--brand-emerald), var(--brand-mint));
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 20px rgba(0, 135, 90, 0.2);
    padding: 16px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
}

.btn-primary-green:hover {
    background: var(--brand-glow);
    color: var(--bg-dark);
    transform: translateY(-3px);
   
}

.btn-outline-white {
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .hero-banner {
        text-align: center;
        background-position: 70% center; /* Adjusts image focus for tablets */
    }
    .hero-text-col {
        margin: 0 auto;
    }
    .hero-actions, .hero-badges {
        justify-content: center;
    }
    .hero-overlay {
        /* Darker, more uniform overlay for mobile readability */
        background: rgba(0, 0, 0, 0.65);
    }
}

@media (max-width: 576px) {
    .hero-banner {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    .hero-title {
        font-size: 2.2rem;
    }
    .hero-badges {
        margin-top: 40px;
    }
    .badge-item {
        font-size: 0.75rem;
        padding: 8px 14px;
    }
}
/* --- Enhanced Responsive Logic --- */

/* Tablets & Small Desktops (992px and down) */
@media (max-width: 992px) {
    .hero-banner {
        text-align: center;
        padding-top: 140px; /* More space for the header */
    }

    .hero-text-col {
        margin: 0 auto;
        max-width: 100%;
        padding: 0 15px;
    }

    .hero-overlay {
        /* Switch to a vertical gradient so the bottom image is visible behind text */
        background: linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0.9) 0%, 
            rgba(0, 0, 0, 0.6) 100%
        );
    }

    .hero-actions {
        flex-direction: column; /* Stack buttons vertically */
        gap: 15px;
        align-items: center;
    }

    .btn-primary-green, .btn-outline-white {
        width: 100%; /* Full width buttons for easy thumb tapping */
        max-width: 320px;
        justify-content: center;
    }

    .hero-badges {
        justify-content: center;
        margin-top: 40px;
    }
}

/* Mobile Phones (576px and down) */
@media (max-width: 576px) {
    .hero-banner {
        min-height: auto; /* Allow content to dictate height if it's long */
        padding-bottom: 80px;
    }

    .hero-title {
        /* Significantly smaller for mobile to prevent word breaking */
        font-size: 2.2rem; 
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin-bottom: 20px;
    }

    .hero-desc {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 30px;
        opacity: 0.9;
    }

    .pill-tag {
        font-size: 0.75rem;
        padding: 8px 14px;
        margin-bottom: 15px;
    }

    .badge-item {
        width: 100%; /* Each badge gets its own line on tiny screens */
        justify-content: center;
        font-size: 0.8rem;
    }

    /* Reduce the zoom effect on mobile to save processing power */
  @keyframes slideAnimation {
        0% { opacity: 0; transform: scale(1); }
        5% { opacity: 1; }                  /* Fade in (1 second) */
        25% { opacity: 1; }                 /* Stay visible (4 seconds) */
        30% { opacity: 0; transform: scale(1.03); } /* Fade out (1 second) with subtle zoom */
        100% { opacity: 0; }
    }
}
/* --- Comprehensive Mobile Fixes --- */

@media (max-width: 992px) {
    .hero-banner {
        /* Allow the section to expand vertically if content is long */
        height: auto;
        min-height: 100vh;
        padding: 120px 0 60px; 
        text-align: center;
    }

    .hero-content-wrapper {
        width: 100%;
        padding: 0 20px;
    }

    /* Fix for the Pill Tag at the top */
    .pill-tag {
        display: inline-flex;
        margin-bottom: 25px;
        font-size: 0.8rem;
        line-height: 1.4;
        padding: 10px 20px;
        height: auto; /* Ensures it doesn't squash text */
    }

    /* Fix for Overlapping Buttons */
    .hero-actions {
        display: flex;
        flex-direction: column; /* Stack buttons vertically */
        gap: 15px;              /* Creates space between buttons */
        margin-top: 30px;
        align-items: center;
    }

    .btn-primary-green, 
    .btn-outline-white {
        width: 100%;
        max-width: 300px;      /* Prevents buttons from being too wide */
        padding: 18px;         /* Larger touch target */
        margin: 0;             /* Reset margins to rely on gap */
        justify-content: center;
    }

    /* Fix for the Bottom Badges/Small Boxes */
    .hero-badges {
        display: grid;         /* Use grid for better alignment on mobile */
        grid-template-columns: 1fr; 
        gap: 10px;
        margin-top: 40px;
        width: 100%;
    }

    .badge-item {
        width: 100%;
        padding: 12px;
        font-size: 0.8rem;
        justify-content: center;
        backdrop-filter: blur(5px);
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Extra small screens fix */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important; /* Scale down title further */
        line-height: 1.1;
    }
    
    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }
}



/* --- Client Ticker Section --- */
.client-ticker {
    padding: 60px 0;
    background: #ffffff; /* Contrast against the dark hero */
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.ticker-title {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Slider Container */
.slider {
    width: 100%;
    height: auto;
    margin: auto;
    position: relative;
    display: grid;
    place-items: center;
}

/* Animation Track */
.slide-track {
    display: flex;
    width: calc(250px * 10); /* Width of slide * total number of slides */
    animation: scroll 30s linear infinite;
}

.slide-track:hover {
    animation-play-state: paused; /* Pause on hover for accessibility */
}

.slide {
    width: 250px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
}

.slide img {
    width: 100%;
    max-width: 180px;
    filter: grayscale(100%); /* Keeps it professional like the screenshot */
    opacity: 0.6;
    transition: 0.3s;
}

.slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Infinite Scroll Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 5)); } /* Move by half the total slides */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .slide {
        width: 180px;
        padding: 0 20px;
 
    }
    .slide-track {
        width: calc(250px * 10);
    }
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-250px * 5)); }
    }
}


/* --- Our Mission Section --- */
.our-mission-section {
    padding: 120px 0;
    position: relative;
    background: #ffffff; /* Contrast against the dark hero */
    overflow: hidden;
}

.mission-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* Mission Visuals (3D/Floating Elements like reference) */
.mission-visual {
    flex: 1;
    max-width: 500px;
    display: grid;
    place-items: center;
    position: relative;
}

.visual-stack {
    position: relative;
    width: 300px;
    height: 300px;
}

.mission-3d-asset {
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 5;
    position: relative;
}

.floating-ring {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    transition: transform 0.3s ease;
}
/* --- Earth Spin Animation --- */

.spinning-earth {
    width: 100%;
    height: auto;
    /* Adjust timing (20s) for a faster or slower spin */
    animation: rotateEarth 20s linear infinite;
    filter: drop-shadow(0 0 15px rgba(0, 210, 127, 0.2));
}

/* Pause animation when user hovers over the visual section */
.visual-stack:hover .spinning-earth {
    animation-play-state: paused;
}

@keyframes rotateEarth {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Optional: Subtle scale effect for the glass wrapper to add depth */
.glass-orb-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease;
}

.visual-stack:hover .glass-orb-wrapper {
    transform: scale(1.05);
}


/* --- Enlarged Mission Visuals --- */

.visual-stack {
    position: relative;
    /* Increased size from 300px to 450px */
    width: 450px; 
    height: 450px;
}

.mission-3d-asset {
    width: 100%; /* Now takes up the full 450px of the container */
    height: auto;
    object-fit: contain;
    z-index: 5;
    position: relative;
}

/* Adjust the rings to match the new larger Earth size */
.ring-1 {
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
}

.ring-2 {
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
}

/* Ensure the layout stays balanced on smaller screens */
@media (max-width: 1200px) {
    .visual-stack {
        width: 350px;
        height: 350px;
    }
}

@media (max-width: 576px) {
    .visual-stack {
        width: 280px;
        height: 280px;
    }
}

/* Mission Content */
.mission-content {
    flex: 1;
    max-width: 600px;
}

.section-tagline {
    font-size: 0.9rem;
    color: #00733e;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.section-tagline .dot {
    width: 8px;
    height: 8px;
    background-color: #00733e;
    border-radius: 50%;
}

.section-title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #01110a;
    margin-bottom: 30px;
}

.mission-text-large {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 25px;
    font-weight: 500;
}

.mission-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 50px;
}

.in-text-link {
    color: #00733e;
    font-weight: 600;
    text-decoration: underline;
}

.exact-services-section .section-header .subtitle {
    color: var(--text-main, #1a1e1c) !important; /* Nice off-black color */
    text-shadow: none !important; /* Removes the blurry shadow */
    font-weight: 500; /* Keeps it looking crisp */
}
/* Mission Highlights */

.mission-highlights {
    display: flex;
    flex-wrap: nowrap !important; /* Forces them to stay on one line */
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

.highlight-item {
    flex: 1; /* Forces each item to take up equal space on the line */
    text-align: left;
}

.highlight-value {
    font-size: clamp(1rem, 1.8vw, 1.4rem); /* Slightly smaller so it doesn't overflow */
    font-weight: 800;
    color: var(--brand-emerald, #00875a);
    display: block;
    margin-bottom: 5px;
    line-height: 1.2;
    white-space: nowrap; /* This is the rule that forces it to stay on one line */
}

.highlight-desc {
    font-size: 0.8rem;
    color: var(--text-dim, #5c6660);
    line-height: 1.4;
    margin: 0;
}

.vertical-divider {
    width: 1px;
    height: auto;
    min-height: 40px;
    background-color: rgba(0, 0, 0, 0.1);
    align-self: stretch; /* Makes the divider dynamically match the height of the text beside it */
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .our-mission-section {
        padding: 80px 0;
    }
    .mission-wrapper {
        flex-direction: column-reverse;
        gap: 50px;
        text-align: center;
    }
    .mission-visual {
        margin: 0 auto;
    }
    .mission-content {
        margin: 0 auto;
    }
    .section-tagline {
        justify-content: center;
    }
    .mission-highlights {
        justify-content: center;
    }
}

@media (max-width: 576px) {
.highlight-value {
        font-size: clamp(1rem, 4vw, 1.3rem); 
    }

    .highlight-desc {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}


/* --- Our Mission Section --- */
.our-mission-section {
    padding: clamp(60px, 10vw, 120px) 0; /* Dynamic vertical padding */
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.mission-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(30px, 5vw, 80px); /* Responsive gap */
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Mission Visuals */
.mission-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.visual-stack {
    position: relative;
    /* Responsive sizing using clamp (min, preferred, max) */
    width: clamp(260px, 35vw, 450px); 
    height: clamp(260px, 35vw, 450px);
}

.mission-3d-asset {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
    position: relative;
}


/* --- Earth Spin Animation --- */
.spinning-earth {
    animation: rotateEarth 20s linear infinite;
    filter: drop-shadow(0 0 15px rgba(0, 210, 127, 0.2));
}

@keyframes rotateEarth {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mission Content */
.mission-content {
    flex: 1;
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem); /* Smooth scaling text */
    font-weight: 800;
    line-height: 1.2;
    color: #01110a;
    margin-bottom: 25px;
}

.mission-text-large {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: #333333;
    margin-bottom: 20px;
}

.mission-text {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.7;
    color: #555555;
    margin-bottom: 40px;
}

.vertical-divider {
    width: 2px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.1);
}

/* --- Responsive Breakpoints --- */

/* Tablet (Switch to Column) */
@media (max-width: 992px) {
    .mission-wrapper {
        flex-direction: column-reverse; /* Image below text on tablets/phones */
        text-align: center;
    }

    .mission-content {
        max-width: 800px;
    }

    .section-tagline {
        justify-content: center;
    }

    .mission-highlights {
        justify-content: center;
        gap: clamp(15px, 5vw, 40px);
    }
}

/* Mobile (Small Phones) - Stacked Layout for Readability */
@media (max-width: 576px) {
    .mission-highlights {
        flex-direction: column; /* Stack items vertically on phones */
        align-items: center;
        gap: 25px; 
        width: 100%;
    }

    .highlight-item {
        width: 100%;
        text-align: center;
    }

    .highlight-value {
        font-size: 2rem; 
        margin-bottom: 8px;
        white-space: normal; /* Allows text to wrap naturally if needed */
    }

    .highlight-desc {
        font-size: 0.9rem; /* Slightly larger for easier reading on mobile */
        line-height: 1.4;
    }

 .vertical-divider {
        display: block;
        width: 60px;         
        height: 1px;         
        min-height: 1px;     /* ADD THIS: Forces it to ignore the desktop 40px rule */
        background-color: rgba(0, 0, 0, 0.15);
        margin: 0 auto;      
    }

    .mission-visual {
        margin-top: 20px;
    }

    .visual-stack {
        width: 250px; /* Constrain earth size on very small screens */
        height: 250px;
    }
}


/* --- Our Products Section --- */

.our-products-section {
    position: relative;
    padding: clamp(60px, 10vw, 120px) 0;
    /* Use your uploaded image here */
    background: url('../assets/images/services.png') center center / cover no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

/* Fix Visibility: Dark overlay to make white text pop on the light image */
.products-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(6, 10, 8, 0.85), rgba(6, 10, 8, 0.75)) !important;
    z-index: 1 !important;
}

.products-container {
    position: relative;
    z-index: 5 !important; /* Higher than overlay */
}
.section-header {
    text-align: center;
    margin-bottom: clamp(40px, 8vw, 70px);
}

.pre-title {
    color: var(--brand-mint);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
.section-header .title {
    /* 1. Fluid Size */
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    
    /* 2. Force Pure White & Remove Transparency */
    color: #ffffff !important; 
    opacity: 1 !important;
    visibility: visible !important;
    
    /* 3. Force to the very front layer */
    position: relative !important;
    z-index: 999 !important;
    
    /* 4. Sharp Dark Shadow for contrast against light image areas */
    text-shadow: 2px 3px 12px rgba(0, 0, 0, 0.95) !important;
    
    line-height: 1.1;
    margin-bottom: 20px;
    text-transform: none;
}

.section-header .subtitle {
    /* 1. Force Pure White/Off-White */
    color: #f8fafc !important; 
    opacity: 1 !important;
    
    /* 2. Layering */
    position: relative !important;
    z-index: 999 !important;
    
    /* 3. Shadow for clarity */
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8) !important;
    
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 500;
}
/* Specifically targeting the product section title to be white */
.our-products-section .section-header .title {
    color: #ffffff !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Optional: adds a shadow to make white text readable on light backgrounds */
}

/* Also ensuring the subtitle is clear */
.our-products-section .section-header .subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}
/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Product Cards */
.product-card {
    background: rgba(255, 255, 255, 0.05); /* Glass effect */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    transition: all 0.4s ease;
}
/* Responsive Hover Effect - Visible on desktop, clean on tap */
.product-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-mint);
    background: rgba(0, 210, 127, 0.08);
}

.card-visual {
    height: 180px;
   
    border-radius: 1px;
    overflow: hidden;
    background: #000; /* Dark base for images */
}


.product-3d-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content h4 {
    color: var(--brand-mint);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.product-card:hover .product-3d-asset {
    transform: scale(1.05);
}




/* Small visual element like reference image */
.product-card::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 12px;
    height: 12px;
    background-color: var(--brand-mint);
    border-radius: 50%;
    opacity: 0; /* Hidden by default */
    transition: 0.3s;
}
.product-card:hover::before {
    opacity: 1; /* Appears on hover */
}
.product-card.card-active::before {
    opacity: 1;
}

/* Content (Text) */
.card-content h4 {
    color: var(--brand-mint); /* Highlight title with brand color */
    font-size: 1.5rem;
    margin-bottom: 15px;
}
/* .card-content p {
    font-size: 0.95rem;
    color: #aaaaaa;
    line-height: 1.6;
} */
.card-content p {
    margin-bottom: 20px;
    min-height: 80px; /* Keeps cards aligned even with different text lengths */
}

.card-content p {
    color: #626568; /* Clearer light grey */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* --- Fix: Read More Link Visibility & Animation --- */
.read-more-link {
    color: var(--brand-emerald, #00875a); /* Changed from white to emerald green */
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Space between text and arrow */
    margin-top: 10px;
}

.read-more-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Hover Effect: Text brightens and arrow slides right */
.read-more-link:hover {
    color: var(--brand-mint, #00d27f);
}

.read-more-link:hover i {
    transform: translateX(4px);
}

/* Mobile Specific Optimizations */
@media (max-width: 576px) {
    .product-grid {
        grid-template-columns: 1fr;
        width: 95%;
    }

    .product-card {
        padding: 30px 20px;
    }

    .section-header .title {
        font-size: 1.8rem;
    }
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .our-products-section {
        padding: 80px 0;
    }
    
    .section-header .title {
        font-size: 2rem;
    }
    
    .product-card {
        padding: 30px 20px; /* Tighter padding for small screens */
    }

    .card-content p {
        min-height: auto; /* Remove fixed height on mobile for better flow */
    }
}
/* View All Button */
.product-actions {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.btn-view-all {
    background: var(--brand-mint);
    color: var(--bg-dark);
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-view-all:hover {
    background: var(--brand-glow);
    transform: scale(1.05);
}

.btn-view-all i {
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .our-products-section {
        background-attachment: scroll;
    }
    .section-header .title {
        font-size: 2rem;
    }
}
/* =========================================
   NEW PREMIUM PRODUCT ANIMATIONS & UI
   ========================================= */

/* Continuous floating effect for product images */
.floating-product {
    animation: float-img 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 30px rgba(0, 135, 90, 0.15));
    transition: filter 0.3s ease;
}

.floating-product:hover {
    filter: drop-shadow(0 25px 35px rgba(0, 210, 127, 0.25));
}

@keyframes float-img {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Gradient Text for Product Titles */
.featured-product-title {
    background: linear-gradient(135deg, var(--brand-emerald), var(--brand-mint));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Glassmorphism Table Wrapper */
.product-specs-table-wrapper {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-specs-table-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 135, 90, 0.08);
}

/* Enhanced Table Rows */
.product-specs-table tbody tr {
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.product-specs-table tbody tr:hover {
    background-color: rgba(0, 210, 127, 0.05);
    transform: scale(1.01);
}

/* Smooth Slide-In Animation for Table Rows */
.product-specs-table tbody tr {
    /* Using cubic-bezier for a sharp, professional snap into place */
    animation: slideInRow 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0;
}

.product-specs-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.product-specs-table tbody tr:nth-child(2) { animation-delay: 0.2s; }
.product-specs-table tbody tr:nth-child(3) { animation-delay: 0.3s; }
.product-specs-table tbody tr:nth-child(4) { animation-delay: 0.4s; }
.product-specs-table tbody tr:nth-child(5) { animation-delay: 0.5s; }
.product-specs-table tbody tr:nth-child(6) { animation-delay: 0.6s; }
.product-specs-table tbody tr:nth-child(7) { animation-delay: 0.7s; }

@keyframes slideInRow {
    from { 
        opacity: 0; 
        transform: translateX(-40px); /* Slides in from the left */
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}
/* =========================================
   RESPONSIVE CATEGORY TABS STYLING
   ========================================= */
.product-tabs-wrapper {
    display: flex;
    justify-content: center; /* Center tabs on desktop */
    margin-bottom: 50px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    
    /* Mobile scrolling setup */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar IE 10+ */
    padding-bottom: 2px;
}

/* Hide scrollbar Chrome/Safari/Edge */
.product-tabs-wrapper::-webkit-scrollbar { 
    display: none; 
}

.product-tabs {
    display: inline-flex;
    gap: 15px;
    /* Ensure items don't shrink or wrap on mobile */
    min-width: max-content;
    padding: 0 20px; /* Breathing room when scrolling to edges */
}

.tab-link {
    background: transparent;
    border: none;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dim, #5c6660);
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.tab-link:hover {
    color: var(--brand-emerald, #00875a);
    background: rgba(0, 210, 127, 0.05);
}

/* Active Tab State */
.tab-link.active {
    color: var(--brand-emerald, #00875a);
    background: #ffffff;
    box-shadow: 0 -8px 25px rgba(0,0,0,0.04);
}

/* Green underline indicator */
.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Overlaps the bottom border perfectly */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--brand-emerald, #00875a);
    border-radius: 3px 3px 0 0;
}

/* =========================================
   TAB CONTENT DISPLAY LOGIC
   ========================================= */
.tab-content {
    display: none; /* Hides all tabs by default */
    animation: fadeInTab 0.4s ease forwards; /* Smooth entry */
}

.tab-content.active {
    display: block; /* Shows only the active tab */
}

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

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */

/* Tablets */
@media (max-width: 992px) {
    .product-tabs-wrapper {
        justify-content: flex-start; /* Push to left so user knows they can scroll */
    }
    .tab-link {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* Phones */
@media (max-width: 576px) {
    .product-tabs-wrapper {
        margin-bottom: 30px;
    }
    .product-tabs {
        gap: 10px;
        padding: 0 15px; /* Adjust edge padding for smaller screens */
    }
    .tab-link {
        padding: 12px 16px;
        font-size: 0.95rem;
        gap: 8px; /* Tighter spacing between icon and text */
    }
    .tab-link i {
        font-size: 1rem;
    }
}
/* --- Product Grid Fixes --- */
@media (max-width: 992px) {
    .product-grid.categorized-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .product-grid.categorized-grid {
        grid-template-columns: 1fr; /* 1 column for phones */
        padding: 0 10px;
    }

    .product-card img {
        height: 200px; /* Adjust image height for smaller screens */
    }
}/* --- Modal Responsive Fixes --- */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        padding: 30px 20px; /* Reduce heavy padding on mobile */
        margin: 20px auto;
        border-radius: 16px;
        max-height: 90vh; /* Prevent modal from going off-screen */
        overflow-y: auto; /* Enable scrolling inside modal if content is long */
    }

    .modal-grid {
        grid-template-columns: 1fr; /* Stack Image and Content vertically */
        gap: 25px;
    }

    .modal-image-col img {
        max-width: 100%;
        height: auto;
    }

    .modal-content-col h2 {
        font-size: 1.8rem; /* Smaller title for mobile */
        text-align: center;
    }

    /* Stack specifications in 2 columns even on small screens, or 1 if very tight */
    .modal-specifications {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .modal-actions {
        flex-direction: column; /* Stack "Request Quote" and "WhatsApp" buttons */
        gap: 10px;
    }

    .modal-actions button {
        width: 100%;
    }

    .close-modal {
        top: 10px;
        right: 15px;
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .modal-specifications {
        grid-template-columns: 1fr; /* Single column specs for very small phones */
    }
}@media (max-width: 600px) {
    .product-tabs-wrapper {
        justify-content: flex-start;
        overflow-x: auto; /* Enable horizontal swipe for tabs */
        white-space: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .product-tabs {
        display: flex;
        min-width: max-content;
    }

    .tab-link {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}











/* --- Mission/Vision Section --- */
.exact-services-section {
    position: relative;
    padding: 80px 5%;
    background: #ffffff; /* Changed from Image to White */
}

/* We don't need the dark overlay anymore for a white background */
.services-overlay {
    display: none; 
}

.services-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header .title {
    font-size: clamp(1.8rem, 8vw, 3rem);
    /* CHANGE 1: Use your dark text variable or a solid dark color */
    color: var(--text-main, #1a1e1c) !important; 
    font-weight: 800;
    margin-top: 10px;
    text-align: center;
    
    /* CHANGE 2: Remove the heavy white/grey shadow that causes the blur */
    text-shadow: none !important; 
    
    /* Optional: Tighten letter spacing for a premium look */
    letter-spacing: -0.01em;
}

.pre-title {
    display: block;
    text-align: center;
    /* Ensure this is a darker green so it's readable on white */
    color: var(--brand-emerald, #00875a); 
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Changed from 3 to 4 to fit all on one line */
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05); /* Softer, more premium border */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother premium easing */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Subtle initial shadow */
    position: relative;
    overflow: hidden; /* Keeps the animated bottom line inside */
    z-index: 1;
}
/* Animated gradient bottom border */
.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-emerald, #00875a), var(--brand-mint, #00d27f));
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-card:hover::after {
    width: 100%; /* Line expands smoothly across the bottom */
}

.service-card:hover {
    border-color: transparent; /* Let the shadow and bottom line do the work */
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 210, 127, 0.12); /* Brighter, deeper shadow on hover */
}

/* Upgraded Icon Container */
.service-card .card-icon {
    width: 70px;
    height: 70px;
    background: rgba(0, 210, 127, 0.1); /* Soft mint background block */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.service-card .card-icon i {
    font-size: 2rem;
    color: var(--brand-emerald, #00875a);
    margin-bottom: 0; /* Reset previous margin */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
/* Icon Animation on Hover */
.service-card:hover .card-icon {
    background: var(--brand-emerald, #00875a); /* Container turns solid green */
}

.service-card:hover .card-icon i {
    color: #ffffff; /* Icon turns white */
    transform: scale(1.15) rotate(5deg); /* Playful premium pop and twist */
}
.service-card h4 {
    color: var(--text-main);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.service-card p {
    color: var(--text-dim); /* Greyish text for readability */
    line-height: 1.6;
    font-size: 0.95rem;
}

.card-number {
    position: absolute;
    top: 25px;
    right: 30px;
    font-weight: 800;
    color: #eeeeee; /* Light grey number */
    transition: color 0.3s ease;
}

.service-card:hover .card-number {
    color: var(--brand-mint);
}

/* --- MOBILE RESPONSIVENESS --- */

@media (max-width: 1024px) {
   .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Creates a neat 2x2 grid on tablets */
    }
    .service-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .exact-services-section {
        padding: 60px 20px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card:last-child {
        grid-column: span 1;
    }

    .service-card {
        padding: 35px 25px;
        text-align: center;
    }

    .section-header .title {
        font-size: 1.8rem;
    }
}


/* --- Auto-Scrolling Slider --- */
.image-slider-section {
    padding: 60px 0;
    background: var(--bg-light);
    overflow: hidden;
}

.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

.slider-track {
    display: flex;
    width: calc(250px * 14); /* 250px width per image * 14 images total */
    animation: scroll 30s linear infinite;
}

.slider-track:hover {
    animation-play-state: paused; /* Pause on hover for better UX */
}

.slide {
    width: 250px;
    height: 200px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    
    /* ADD THESE TWO LINES TO REMOVE FADING */
    opacity: 1 !important;
    filter: brightness(100%) contrast(100%) !important;
}
.slide img:hover {
    transform: scale(1.05);
}

/* The Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7)); } /* Moves back by half (the original set) */
}



/* --- Main Footer Styling --- */
.main-footer {
    margin-top: 0 !important; /* Forces the footer to pull up tight */
    background: var(--bg-dark);
    color: #ffffff;
    padding: 80px 0 20px;
    border-top: 1px solid var(--glass-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr; /* Organized 4-column layout */
    gap: 40px;
    margin-bottom: 50px;
}

.footer-logo {
    height: 60px;
    margin-bottom: 20px;
}

.footer-tagline {
    font-weight: 700;
    color: var(--brand-mint);
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.footer-heading {
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--brand-mint);
}

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

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

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

.footer-links a:hover {
    color: var(--brand-mint);
    padding-left: 5px;
}
.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.contact-info p {
    display: flex;
    gap: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
    line-height: 1.5;
}

.contact-info i {
    color: var(--brand-mint);
    margin-top: 4px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    transition: 0.3s;
    text-decoration: none;
}

.social-links a:hover {
    background: var(--brand-mint);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}
.footer-bottom p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 column for phones */
        text-align: center;
    }
    
    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .contact-info p {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .main-footer {
        padding-top: 60px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo, .social-links, .contact-item {
        justify-content: center;
    }
    .contact-item {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}


/* =========================================
   PREMIUM 3D CTA / CONTACT SECTION
   ========================================= */
.premium-cta-section {
    position: relative;
    padding: clamp(100px, 12vw, 150px) 20px;
    background: #060b11; /* Dark navy/black background matching image */
    overflow: hidden;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 3D Moving Animated Background Orbs */
.cta-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    animation: floatOrb 12s infinite alternate ease-in-out;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--brand-mint, #00d27f);
    top: -150px;
    left: -100px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: var(--brand-emerald, #00875a);
    bottom: -200px;
    right: -150px;
    animation-delay: -6s; /* Makes the orbs move out of sync */
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 60px) scale(1.2); }
}

/* Content Styling */
.cta-centered-container {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto;
}

.cta-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(0, 210, 127, 0.3);
}

.cta-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.cta-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 45px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* 3D Button Group Mechanics */
.cta-action-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    perspective: 1000px; /* Enables 3D space */
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
}

.cta-btn i {
    font-size: 1.1rem;
}

/* 1. Solid Green Button (Contact Us) */
.cta-btn-primary {
    background: var(--brand-emerald, #00875a);
    color: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 10px 20px rgba(0, 135, 90, 0.2);
}

.cta-btn-primary:hover {
    background: var(--brand-mint, #00d27f);
    color: #060a08;
    transform: translateZ(20px) translateY(-5px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(0, 210, 127, 0.3);
}

/* 2. Outline White/Grey Button (Download) */
.cta-btn-outline {
    background: rgba(255, 255, 255, 0.02);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.cta-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateZ(20px) translateY(-5px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* 3. Outline Green Button (Partner With Us) */
.cta-btn-outline-green {
    background: rgba(0, 210, 127, 0.02);
    color: var(--brand-mint, #00d27f);
    border: 1px solid rgba(0, 210, 127, 0.3);
    backdrop-filter: blur(10px);
}

.cta-btn-outline-green:hover {
    background: rgba(0, 210, 127, 0.1);
    border-color: var(--brand-mint, #00d27f);
    color: #ffffff;
    transform: translateZ(20px) translateY(-5px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(0, 210, 127, 0.2);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cta-action-group {
        flex-direction: column;
        gap: 15px;
    }
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
    .cta-title {
        font-size: 2.2rem;
    }
    .cta-btn:hover {
        transform: translateY(-3px); /* Soften 3D on mobile touchscreens */
    }
}
/* =========================================
   MOBILE RESPONSIVENESS (PREMIUM CTA)
   ========================================= */
@media (max-width: 768px) {
    .premium-cta-section {
        padding: 80px 15px; /* Tighter padding for mobile screens */
    }
    
    .cta-title {
        font-size: clamp(2rem, 8vw, 2.5rem); /* Smoother fluid scaling */
        line-height: 1.2;
        margin-bottom: 20px;
    }
    
    .cta-desc {
        font-size: 1rem; /* Smaller text for easier mobile reading */
        margin-bottom: 35px;
        padding: 0 10px; /* Prevents text from touching screen edges */
    }
    
    .cta-action-group {
        flex-direction: column;
        align-items: center; /* Forces perfect centering */
        gap: 15px;
        width: 100%;
    }
    
    .cta-btn {
        width: 100%;
        max-width: 350px; /* Prevents buttons from getting comically wide on tablets */
        justify-content: center;
        padding: 16px 20px;
        box-sizing: border-box; /* Ensures padding doesn't break screen width */
    }
    
    /* Disable the heavy 3D rotation on touch screens to prevent sticky hover states */
    .cta-btn-primary:hover,
    .cta-btn-outline:hover,
    .cta-btn-outline-green:hover {
        transform: translateY(-2px); 
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
    }

    /* Reduce blur processing load on mobile batteries */
    .cta-orb {
        filter: blur(60px); 
    }
}

@media (max-width: 480px) {
    .premium-cta-section {
        padding: 60px 15px; 
    }
    .cta-title {
        font-size: 1.8rem; /* Final size tweak for very small phones */
    }
}


/* =========================================
   PREMIUM COMPANY ROADMAP SECTION
   ========================================= */
.premium-roadmap-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* --- Header Styling --- */
.rm-header {
    max-width: 800px;
    margin: 0 auto 60px auto; /* This centers the 800px container itself */
    text-align: center;
}

.rm-pre-title {
    color: var(--brand-emerald, #00875a);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.rm-title {
    color: #0b1521;
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.rm-subtitle {
    color: #515b66;
    font-size: 1.15rem;
    line-height: 1.6;
}

/* --- Horizontal Animated Timeline --- */
.rm-timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto 60px auto;
    padding: 20px 0;
}

/* Background Track */
.rm-track-bg {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: #e2e8f0;
    transform: translateY(-50%);
    z-index: 1;
}

/* Animated Progress Line */
.rm-track-progress {
    position: absolute;
    top: 50%;
    left: 10%;
    height: 2px;
    background-color: var(--brand-emerald, #00875a);
    transform: translateY(-50%);
    z-index: 2;
    /* Animates the line drawing from Node 1 to halfway to Node 2 */
    width: 0%;
    animation: drawTimelineLine 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes drawTimelineLine {
    to { width: 35%; } /* Adjust this percentage to move the green line further */
}

/* Nodes Wrapper */
.rm-nodes-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}

.rm-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: #ffffff; /* Blocks the line behind it */
    padding: 0 10px;
}

/* Circle Indicators */
.rm-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    transition: all 0.4s ease;
}

.active-node .rm-circle {
    background-color: var(--brand-emerald, #00875a);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 135, 90, 0.2);
    position: relative;
}

/* Pulsing rings around active node */
.active-node .rm-circle::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(0, 135, 90, 0.2);
    animation: timelinePulse 2s infinite ease-in-out;
}

@keyframes timelinePulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.next-node .rm-circle {
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    color: #0b1521;
}

.future-node .rm-circle {
    background-color: #f8fafc;
    border: 2px solid #f1f5f9;
    color: #94a3b8;
}

/* Status Pills */
.rm-pill {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.pill-green { background: #ecfdf5; color: var(--brand-emerald, #00875a); }
.pill-slate { background: #f1f5f9; color: #475569; }
.pill-grey  { background: #f8fafc; color: #94a3b8; }

/* --- 3D Cards Grid --- */
.rm-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    perspective: 1200px;
}

/* Card Base & Physics */
.rm-3d-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease;
}

/* Continuous Subtle Floating */
.rm-3d-card {
    animation: gentleRoadmapFloat 6s ease-in-out infinite alternate;
}
.rm-3d-card:nth-child(2) { animation-delay: 1.5s; }
.rm-3d-card:nth-child(3) { animation-delay: 3s; }

@keyframes gentleRoadmapFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-6px); }
}

/* 3D Hover Effect */
.rm-3d-card:hover {
    animation-play-state: paused;
    transform: translateZ(30px) translateY(-10px) rotateX(4deg) rotateY(-2deg);
    border-color: rgba(0, 210, 127, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05), 0 10px 20px rgba(0, 210, 127, 0.08);
    z-index: 10;
}

/* Top Accent Highlight on Hover */
.rm-3d-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 4px;
    background: var(--brand-emerald, #00875a);
    transition: width 0.4s ease, left 0.4s ease;
    border-radius: 0 0 4px 4px;
}

.rm-3d-card:hover::after {
    width: 80px;
    left: calc(50% - 40px);
}

/* Card Inner Content */
.rm-card-inner {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.rm-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 25px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rm-3d-card:hover .rm-icon {
    transform: scale(1.15) rotate(-5deg) translateZ(10px);
}

/* Icon Colors Matching Image */
.bg-light-green { background: #ecfdf5; color: var(--brand-emerald, #00875a); }
.bg-light-mint  { background: #f0fdf4; color: var(--brand-mint, #00d27f); }
.bg-light-grey  { background: #f8fafc; color: #10b981; }

.rm-card-inner h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0b1521;
    margin-bottom: 15px;
}

.rm-card-inner p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1; /* Pushes the list down so cards align */
}

/* Feature Lists */
.rm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.rm-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
    word-break: break-word; /* Prevents long text from pushing outside the box */
}
.rm-list li:last-child { margin-bottom: 0; }

/* List Icon Specific Colors */
.list-active i { color: #10b981; } /* Green check */
.list-next i   { color: #f59e0b; } /* Orange clock */
.list-future i { color: #94a3b8; } /* Grey hourglass */

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */
@media (max-width: 1024px) {
    .rm-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Centers the 3rd card on tablet rows */
    .rm-cards-grid .rm-3d-card:nth-child(3) {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .premium-roadmap-section {
        padding: 60px 15px;
    }
    .rm-header {
        text-align: center;
        margin: 0 auto 40px auto;
    }
    
    /* Convert horizontal timeline to vertical for mobile */
    .rm-timeline-container {
        max-width: 100%;
        margin-bottom: 40px;
    }
    .rm-nodes-wrapper {
        flex-direction: column;
        align-items: flex-start; /* Aligns nodes to the left */
        gap: 30px;
        padding-left: 20px;
    }
    .rm-node {
        flex-direction: row; /* Circles and Pills side-by-side */
        background: transparent;
        padding: 0;
    }
    /* Change track lines to vertical */
    .rm-track-bg {
        top: 0; left: 55px; bottom: 0;
        width: 2px; height: 100%;
        transform: none;
    }
    .rm-track-progress {
        top: 0; left: 55px;
        width: 2px; height: 0%; /* Animates height instead of width */
        transform: none;
        animation: drawTimelineLineMobile 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    @keyframes drawTimelineLineMobile {
        to { height: 35%; }
    }

    /* Cards stacking */
    .rm-cards-grid {
        grid-template-columns: 1fr;
    }
    .rm-cards-grid .rm-3d-card:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }
    
    /* Soften 3D on mobile */
    .rm-3d-card:hover {
        transform: translateY(-5px);
    }
}

/* Product Page Layout Core */
.hero-static-container {
    position: relative;
    height: 45vh; /* Balanced height for product header */
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.hero-static-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay for text legibility */
    z-index: 2;
}

.hero-static-title {
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 800;
}

/* --- Engineering Commitment Section Styles --- */
.engineering-commitment {
    padding: 100px 0;
    background-color: #f2f7f2; /* Light mint/off-white background from image */
    text-align: center;
}

.engineering-wrapper {
    max-width: 900px; /* Constrained width like the reference */
    margin: 0 auto;
}

.engineering-header {
    margin-bottom: 40px;
}

.engineering-header .pre-title {
    color: #00875a; /* Brand Emerald */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.engineering-title {
    font-size: clamp(1.6rem, 4vw, 3.2rem);
    color: #1a1e1c; /* Deep off-black */
    font-weight: 550;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.engineering-body {
    max-width: 750px;
    margin: 0 auto;
}

.engineering-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #4a5550; /* Softer dark grey */
    margin-bottom: 25px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .engineering-commitment {
        padding: 60px 20px;
    }
    
    .engineering-title {
        font-size: 2.2rem;
    }

    .engineering-text {
        font-size: 1rem;
        text-align: left; /* Better readability on mobile */
    }
}

/* --- Featured Product Section Styles --- */
.featured-product-section {
    padding: 100px 0;
    background-color: white; /* Very soft off-white */
    overflow: hidden;
}

.featured-product-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* Left Content Column */
.featured-product-content {
    flex: 1;
    max-width: 550px;
}

.featured-product-content .pre-title {
    color: var(--brand-emerald, #00875a);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.featured-product-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--text-main, #1a1e1c);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.featured-product-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-dim, #5c6660);
    margin-bottom: 35px;
}

/* Minimalist Table Styling */
.product-specs-table-wrapper {
    margin-bottom: 30px;
    overflow-x: auto;
}

.product-specs-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.product-specs-table th {
    color: var(--brand-emerald, #00875a);
    font-weight: 600;
    padding: 12px 15px 12px 0;
    border-bottom: 2px solid rgba(0, 135, 90, 0.2);
}

.product-specs-table td {
    color: var(--text-dim, #5c6660);
    padding: 12px 15px 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product-specs-table tbody tr:hover td {
    color: var(--text-main, #1a1e1c);
    background-color: rgba(0, 210, 127, 0.03); 
}

.featured-product-footer {
    font-size: 0.9rem;
    color: #88928c;
    line-height: 1.5;
    margin-top: 20px;
}

/* Right Image Column */
.featured-product-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured-product-image img {
    width: 100%;
    max-width: 500px; /* Slightly constrained so it doesn't overwhelm the text */
    height: auto;
    object-fit: cover;
    border-radius: 16px; /* Soften the edges of the solid image */
    box-shadow: 0 15px 35px rgba(0,0,0,0.06); /* Subtle shadow for depth */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .featured-product-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .featured-product-content {
        max-width: 100%;
        text-align: center;
    }

    .product-specs-table-wrapper {
        margin: 0 auto 30px auto;
    }

    .product-specs-table th, 
    .product-specs-table td {
        padding: 12px 10px;
        text-align: center;
    }
}
/* --- Alternating Background for Product Sections --- */
.featured-product-section.bg-white {
    background-color: whitesmoke;
}

/* --- Mobile Fix for Left-Aligned Images --- */
@media (max-width: 992px) {
    /* This ensures that on mobile, the text still appears ABOVE the image, 
       even though the image is first in the HTML code. */
    .featured-product-wrapper.reverse-layout {
        flex-direction: column-reverse;
    }
}









/* About Page */
/* Sustainable Future Section */
        .sustainable-future-section {
            padding: 120px 0;
            background-color: #ffffff;
            overflow: hidden;
        }

        .section-main-title {
            text-align: center;
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 800;
            color: #00875a; /* Sampled from brand headings */
            margin-bottom: 20px;
            letter-spacing: -0.01em;
            text-transform: none; /* Reference is not all-caps */
        }

        .intro-content-wrapper {
            display: flex;
            align-items: center; /* Vertically center content */
            gap: 60px; /* Space between columns */
        }

        .intro-image-col {
            flex: 1;
            max-width: 50%;
        }

        .intro-image-col img {
            width: 100%;
            height: auto;
            object-fit: cover;
            /* Reference image has sharp corners. We can add rounding for visual consistency if needed, but the ref has sharp ones.
            border-radius: 20px;
            */
        }

        .intro-text-col {
            flex: 1;
            max-width: 50%;
        }

        .intro-heading {
            font-size: 2.2rem;
            font-weight: 700;
            color: #00875a; /* Sampled from brand headings */
            margin-bottom: 25px;
        }

        .intro-paragraph {
            font-size: 1rem;
            color: var(--text-main); /* Standard body text color from ref */
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .intro-paragraph:last-child {
            margin-bottom: 0;
        }

        /* Responsive Breakpoints for columns */
        @media (max-width: 992px) {
            .intro-content-wrapper {
                flex-direction: column;
                gap: 40px;
                text-align: center;
            }

            .intro-image-col, .intro-text-col {
                max-width: 100%;
                flex: none;
            }

            .intro-heading {
                font-size: 1.8rem;
            }
        }
   

/* --- Redefining Plastics (Vision Section) Styles --- */
.about-vision-section {
    padding: clamp(80px, 12vw, 150px) 0; /* Dynamic vertical padding */
    background-color: #ffffff; /* Explicit white background from image */
    overflow: hidden;
}

/* Scoped Header Styling */
.about-vision-section .section-header .title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #00875a; /* Sampled dark green from reference title */
    margin-bottom: clamp(40px, 8vw, 80px);
    line-height: 1.2;
    text-transform: none; /* Reference title is not all-caps */
}

/* Two-Column Row */
.vision-content-row {
    display: flex;
    align-items: center; /* Vertically center image and text */
    justify-content: space-between;
    gap: 60px; /* Space between columns */
    margin-bottom: clamp(60px, 10vw, 100px); /* Space before counters */
}

/* Text Column */
.vision-text-col {
    flex: 1;
    max-width: 550px;
}

.vision-text-col p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #5c6660; /* Sourced from text dim in reference */
    line-height: 1.8;
    margin-bottom: 25px;
}

.vision-text-col p:last-child {
    margin-bottom: 0;
}

/* Image Column */
.vision-image-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vision-image-col img {
    width: 100%;
    max-width: 550px;
    height: auto;
    object-fit: contain;
    /* Add optional border/shadow if consistency is needed */
    border-radius: 12px;
}

/* --- Counter Row Styles --- */
.counter-row {
    display: flex;
    justify-content: space-between; /* Evenly spaced */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.counter-item {
    flex: 1;
    text-align: center;
}

.counter-number {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1;
    color: #00875a; /* Sampled dark green */
    display: block;
}

.counter-label {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    font-weight: 700;
    color: #00d27f; /* Sourced lighter green */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 15px;
}

/* --- Mobile Breakpoints (Responsive Overrides) --- */

/* Tablets & Small Desktops (992px and down) */
@media (max-width: 992px) {
    .vision-content-row {
        flex-direction: column-reverse; /* Image above text on mobile */
        gap: 50px;
        text-align: center;
    }

    .vision-text-col, .vision-image-col {
        max-width: 100%;
        flex: none;
    }

    .counter-row {
        flex-wrap: wrap; /* Allow counters to wrap on phones */
        justify-content: center;
        gap: 30px;
    }

    .counter-item {
        width: 100%;
        max-width: 320px;
        flex: none;
    }
}

/* Phones (576px and down) */
@media (max-width: 576px) {
    .about-vision-section {
        padding: 60px 20px;
    }
    
    .about-vision-section .section-header .title {
        font-size: 1.8rem;
    }

    .counter-number {
        font-size: 2.8rem;
    }
}

/* --- Auto-Scrolling Team Slider Styles --- */
.team-section {
    width: 100%;
    max-width: 100vw; /* Ensures it never exceeds the screen width */
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* Ensure the track starts from the very left edge */


/* Base card layout */
.team-card {
    width: 280px; /* Fixed width to force single line */
    flex-shrink: 0; /* Prevents cards from squishing together */
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-mint, #00d27f);
    box-shadow: 0 15px 40px rgba(0, 210, 127, 0.1);
}

.team-img-wrapper {
    width: 140px;
    height: 140px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, var(--brand-emerald), var(--brand-mint));
    position: relative;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffffff;
}

.team-info h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: var(--text-main, #1a1e1c);
    font-weight: 700;
    margin: 0 0 5px 0;
}

.team-role {
    font-size: 0.95rem;
    color: var(--brand-emerald, #00875a);
    font-weight: 600;
    margin: 0 0 15px 0;
}

.team-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0, 135, 90, 0.1);
    color: var(--brand-emerald, #00875a);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.team-social:hover {
    background-color: var(--brand-emerald, #00875a);
    color: #ffffff;
    transform: scale(1.1);
}

/* --- Static Team Grid Styles (Responsive & Spaced) --- */
.team-section {
    width: 100%;
    overflow-x: hidden; /* Prevents accidental horizontal scrolling on mobile */
}

.team-grid {
    display: grid;
    /* Forces exactly 4 equal columns on desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 40px 30px; /* 40px vertical gap, 30px horizontal gap between cards */
    padding: 20px 15px 50px 15px; /* Added side padding so cards don't touch screen edges on mobile */
    max-width: 1200px; /* Keeps the grid aligned with your container */
    margin: 0 auto;
}

/* Base card layout */
.team-card {
    width: 100%; 
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content inside the card */
}

.team-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-mint, #00d27f);
    box-shadow: 0 15px 40px rgba(0, 210, 127, 0.1);
}

/* Make sure team images are responsive and uniform */
.team-img-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f2f7f2;
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the circle perfectly without stretching */
}


/* --- Responsive Adjustments --- */

/* For Tablets & Smaller Laptops: Show 2 cards per row */
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px; /* Slightly tighter gap for tablets */
    }
}

/* For Mobile Phones: Show 1 card per row */
@media (max-width: 600px) {
    .team-grid {
        grid-template-columns: repeat(1, 1fr); 
        gap: 25px; /* Stacked neatly with a standard gap */
        padding: 10px 20px 40px 20px; /* Safe padding for small screens */
    }
    
    .team-card {
        padding: 25px 15px; /* Slightly smaller padding inside the card for mobile */
    }
}
/* --- Full Width & Responsive Group Strength Section --- */

.group-strength-section {
    /* Fluid vertical padding: shrinks on mobile, grows on desktop */
    padding: clamp(60px, 10vw, 120px) 0; 
    position: relative;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* New Fluid Container for Edge-to-Edge feel */
.fluid-container {
    width: 100%;
    max-width: 1600px; /* Much wider than standard containers to cover large screens */
    margin: 0 auto;
    /* Responsive side padding: 15px on mobile, scales up to 60px on large desktops */
    padding: 0 clamp(15px, 5vw, 60px); 
    box-sizing: border-box;
}

/* --- Header & Typography --- */
.section-header-centered {
    text-align: center;
    margin-bottom: clamp(40px, 8vw, 70px);
}

.pre-title-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(15px, 3vw, 25px);
}

.pre-title.green-text {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.accent-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-emerald, #00875a), var(--brand-mint, #00d27f));
    margin-top: 10px;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.group-strength-section .title.white-text {
    color: #ffffff;
    /* Highly fluid font sizing: 2rem minimum, scales perfectly to 3.8rem */
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.description-area.light-gray-text {
    color: rgba(255,255,255,0.8);
    max-width: 800px;
    margin: 0 auto;
    font-size: clamp(1rem, 2.5vw, 1.15rem); /* Scales down for mobile readability */
    line-height: 1.7;
}

.highlight-desc {
    margin-top: 15px;
    font-weight: 500;
    color: #585858;
}

/* --- Ultimate Responsive Grid Layout --- */
.cards-grid-flex {
    display: grid;
    /* 
       min(100%, 300px) ensures that if a mobile screen is smaller than 300px, 
       the card shrinks to fit the screen rather than breaking out. 
    */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    /* Fluid gap between cards */
    gap: clamp(20px, 3vw, 40px);
}

/* --- Partnership Cards --- */
.partnership-card {
    background-color: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Stretches identical heights across the row */
    
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.4s ease,
                background-color 0.4s ease;
}

.card-inner-design {
    padding: clamp(25px, 4vw, 40px); /* Fluid padding inside the card */
    display: flex;
    flex-direction: column;
    flex: 1; /* Pushes the button to the bottom if cards have different text heights */
}

.partnership-card:hover {
    transform: translateY(-8px);
    background-color: rgba(0, 210, 127, 0.05);
    border-color: rgba(0, 210, 127, 0.3);
    box-shadow: 0 15px 35px rgba(0, 135, 90, 0.15);
}

.icon-accent-box {
    width: clamp(50px, 8vw, 60px);
    height: clamp(50px, 8vw, 60px);
    background-color: rgba(0, 135, 90, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-mint, #00d27f);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    margin-bottom: clamp(15px, 4vw, 25px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partnership-card:hover .icon-accent-box {
    transform: scale(1.1) rotate(-5deg);
    color: #ffffff;
    background-color: var(--brand-emerald, #00875a);
}

.card-title.white-text {
    font-size: clamp(1.3rem, 3vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.card-desc.light-gray-text {
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: clamp(0.95rem, 2vw, 1rem);
    flex-grow: 1; /* Pushes the 'VISIT' link to the bottom consistently */
}

/* --- Visit Link --- */
.visit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-mint, #00d27f);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    width: fit-content;
    transition: color 0.3s ease;
}

.visit-link:hover {
    color: #ffffff;
}

.visit-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--brand-mint, #00d27f);
    transition: width 0.3s ease;
}

.visit-link:hover::after {
    width: 100%;
}

.visit-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.visit-link:hover i {
    transform: translate(3px, -3px) scale(1.1);
}

/* --- Mobile Specific Tweaks --- */
@media (max-width: 576px) {
    .partnership-card:hover {
        /* Reduce the intense lifting animation on mobile touchscreens */
        transform: translateY(-4px); 
    }
    
    .section-header-centered {
        text-align: left; /* Optional: Left-aligning headers on mobile is a modern UI trend for better reading */
    }
    
    .pre-title-group {
        align-items: flex-start;
    }
}







/* --- Contact Page Specific Layout --- */
.contact-page-wrapper {
    padding: 100px 0;
    background: #ffffff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.contact-card-list {
    margin-top: 40px;
}

.contact-detail-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(0, 210, 127, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-emerald);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-detail-item h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--text-main);
}

.contact-detail-item p {
    margin: 0;
    color: var(--text-dim);
    line-height: 1.5;
}

/* --- Modern Form Styling --- */
.contact-form-panel {
    background: #f8fafc;
    padding: 50px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #ffffff;
    font-family: inherit;
    transition: 0.3s;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    border-color: var(--brand-mint);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 210, 127, 0.1);
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .contact-form-panel {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .modern-contact-form .form-row {
        grid-template-columns: 1fr;
    }
}















/* Blog Page Specific Styles */
.blog-page-wrapper {
    padding: 80px 20px;
}

/* Featured Card */
.featured-blog-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    margin-bottom: 60px;
    border: 1px solid rgba(0, 135, 90, 0.1);
}

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

.featured-content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-category {
    color: var(--brand-emerald);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    display: block;
}

.featured-content h2 {
    font-size: 2.5rem;
    color: var(--text-main);
    margin-bottom: 20px;
    line-height: 1.2;
}

.featured-content p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.blog-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #f0f0f0;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 135, 90, 0.1);
    border-color: var(--brand-mint);
}

.blog-card-img {
    height: 230px;
}

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

.blog-card-body {
    padding: 30px;
}

.blog-card-body h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--text-main);
}

.blog-card-body p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-link {
    text-decoration: none;
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s;
}

.blog-link:hover {
    gap: 10px;
    color: var(--brand-mint);
}

/* Responsive */
@media (max-width: 992px) {
    .featured-blog-card {
        grid-template-columns: 1fr;
    }
    .featured-content {
        padding: 30px;
    }
    .featured-content h2 {
        font-size: 1.8rem;
    }
}













/* Updated Innovation Content Styles */
.innovation-focus-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.innovation-content-card {
    background: #ffffff;
    padding: 80px 60px;
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0, 135, 90, 0.08);
    border: 1px solid rgba(0, 135, 90, 0.1);
    max-width: 900px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Decorative background glow */
.innovation-content-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 210, 127, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.innovation-content-card > * {
    position: relative;
    z-index: 1;
}

.innovation-content-card h2 {
    font-size: 3.2rem;
    color: var(--text-main);
    margin-bottom: 40px;
    line-height: 1.1;
    font-weight: 900;
}

.innovation-body h3 {
    color: var(--brand-emerald);
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.innovation-body p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-dim);
    margin-bottom: 40px;
}

/* Visual Chips for Reinventing Products */
.innovation-visual-elements {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.visual-chip {
    background: rgba(0, 135, 90, 0.05);
    color: var(--brand-emerald);
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 135, 90, 0.1);
    transition: 0.3s;
}

.visual-chip:hover {
    background: var(--brand-emerald);
    color: white;
    transform: translateY(-5px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .innovation-content-card {
        padding: 40px 25px;
    }
    .innovation-content-card h2 {
        font-size: 2.2rem;
    }
    .innovation-body h3 {
        font-size: 1.4rem;
    }
    .innovation-body p {
        font-size: 1.1rem;
    }
}

/* --- INNOVATION ECOSYSTEM SECTION STYLES --- */
        .innovation-ecosystem-wrapper {
            padding: 100px 0;
            background-color: #f6fbf8; /* Very soft mint/off-white background */
        }

        .ecosystem-section {
            display: grid;
            grid-template-columns: 1fr 1.1fr; /* Adjust ratios for text/diagram balance */
            gap: 60px;
            align-items: center; /* Vertically center content */
        }

        /* Left Content Column */
       
        .ecosystem-text .subtitle {
            color: var(--brand-emerald);
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            display: block;
            margin-bottom: 15px;
        }

        .ecosystem-text .title {
            font-size: clamp(2rem, 4.5vw, 3.2rem);
            color: var(--text-main);
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 30px;
            letter-spacing: -0.02em;
        }

        .ecosystem-text p {
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-dim);
            margin-bottom: 25px;
        }

        /* Ecosystem List Styling */
        .ecosystem-list {
            list-style: none;
            padding: 0;
            margin: 0 0 30px 0;
        }

        .ecosystem-list li {
            position: relative;
            padding-left: 25px;
            font-size: 1.05rem;
            color: var(--text-dim);
            margin-bottom: 15px;
            line-height: 1.6;
        }

        /* Custom bullet style using CSS */
        .ecosystem-list li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--brand-mint);
            font-weight: 800;
            font-size: 1.2rem;
            line-height: 1;
            top: 2px;
        }

        /* Make the final paragraph bold like in the reference image */
        .ecosystem-text p:last-child {
            font-weight: 500;
            color: var(--text-main);
            margin-bottom: 0;
        }

        /* Right Diagram Column */
        .ecosystem-diagram-view {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Make the image responsive and ensure it fits */
        .ecosystem-diagram-view img {
            width: 100%;
            height: auto;
            max-width: 600px;
            object-fit: contain;
            /* Optional subtle shadow for visual consistency */
            filter: drop-shadow(0 15px 35px rgba(0,0,0,0.06));
        }

        /* --- MOBILE RESPONSIVENESS --- */
        @media (max-width: 992px) {
            .ecosystem-section {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .ecosystem-diagram-view img {
                margin: 0 auto;
            }

            .ecosystem-list {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .ecosystem-list li {
                padding-left: 0;
                display: flex;
                gap: 10px;
                text-align: left;
            }

            .ecosystem-list li::before {
                position: relative;
                top: 0;
                left: 0;
            }
        }
        /* --- ADVANCED MANUFACTURING SECTION STYLES --- */
.manufacturing-wrapper {
    padding: 100px 0;
    background-color: #ffffff; /* White background to contrast with the previous section */
}

.manufacturing-section {
    display: grid;
    /* Image gets slightly less space (1fr) than text (1.1fr) for balance */
    grid-template-columns: 1fr 1.1fr; 
    gap: 60px;
    align-items: center; 
}

/* Left Diagram/Image Column */
.manufacturing-image-view {
    display: flex;
    justify-content: center;
    align-items: center;
}

.manufacturing-image-view img {
    width: 100%;
    height: auto;
    max-width: 600px;
    
    /* Increase this value for more curved edges */
    border-radius: 100px; 
    
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

/* Right Content Column */
.manufacturing-text .subtitle {
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.manufacturing-text .title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--text-main);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.manufacturing-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 25px;
}

/* Manufacturing List Styling */
.manufacturing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.manufacturing-list li {
    position: relative;
    padding-left: 25px;
    font-size: 1.05rem;
    color: var(--text-dim);
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Custom bullet style using CSS */
.manufacturing-list li::before {
    content: '✓'; /* Checkmark instead of bullet for features/technologies */
    position: absolute;
    left: 0;
    color: var(--brand-mint);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    top: 3px;
}

.manufacturing-text p:last-child {
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 0;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .manufacturing-section {
        /* Reverses the order on mobile so the image stays on top of the text */
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .manufacturing-image-view img {
        margin: 0 auto;
    }

    .manufacturing-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .manufacturing-list li {
        padding-left: 30px;
        display: flex;
        gap: 10px;
        text-align: left;
    }

    .manufacturing-list li::before {
        left: 0;
    }
}
.manufacturing-image-view img {
    width: 100%;
    height: auto;
    max-width: 600px;
    
    /* Increase this value for more curved edges */
    border-radius: 40px; 
    
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
/* --- RESEARCH & DEVELOPMENT SECTION STYLES --- */
.rnd-section-wrapper {
    padding: 100px 0;
    /* Soft off-white background to separate from the pure white section above */
    background-color: #f9fbf9; 
    overflow: hidden;
}

.rnd-grid-layout {
    display: grid;
    /* Text gets slightly more space for the process flow design */
    grid-template-columns: 1.1fr 1fr; 
    gap: 60px;
    align-items: center;
}

/* Left Content Column */
.rnd-content .pre-title {
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.rnd-content .title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--text-main);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.rnd-content > p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 30px;
}

/* R&D Tech Grid (The 4 Innovations) */
.rnd-tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.rnd-tech-item {
    background: #ffffff;
    border: 1px solid rgba(0, 135, 90, 0.1);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.rnd-tech-item:hover {
    transform: translateY(-3px);
    border-color: var(--brand-mint);
}

.rnd-tech-item i {
    color: var(--brand-emerald);
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.rnd-tech-item span {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

/* Outcomes Flow Box */
.rnd-outcomes-box {
    background: rgba(0, 210, 127, 0.04);
    border-left: 4px solid var(--brand-mint);
    padding: 25px 30px;
    border-radius: 0 16px 16px 0;
    margin-bottom: 25px;
}

.rnd-outcomes-box h4 {
    color: var(--brand-emerald);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 800;
}

.rnd-outcomes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rnd-outcomes-list li {
    position: relative;
    padding-left: 25px;
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.rnd-outcomes-list li:last-child {
    margin-bottom: 0;
}

.rnd-outcomes-list li::before {
    content: '\f058'; /* FontAwesome check-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--brand-mint);
    top: 2px;
}

/* Final Step Highlight */
.rnd-final-step {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, var(--brand-emerald), var(--brand-mint));
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(0, 135, 90, 0.2);
}

.rnd-final-step i {
    font-size: 1.3rem;
}

/* Right Image Column */
.rnd-image-view {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rnd-image-view img {
    width: 100%;
    height: auto;
    max-width: 600px;
    border-radius: 40px; /* Matching the curved borders from your request */
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .rnd-grid-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .rnd-content {
        text-align: center;
    }

    /* Adjust process flow for centered mobile view */
    .rnd-tech-grid {
        text-align: left;
    }

    .rnd-outcomes-box {
        text-align: left;
        border-left: none;
        border-top: 4px solid var(--brand-mint);
        border-radius: 16px;
    }

    .rnd-image-view img {
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .rnd-tech-grid {
        grid-template-columns: 1fr; /* Stack tech items on small phones */
    }
    
    .rnd-final-step {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* --- CIRCULAR ECONOMY SECTION STYLES --- */
.circular-impact-wrapper {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.circular-impact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Image on left, Content on right */
    gap: 60px;
    align-items: center;
}

/* Left Image Column */
.circular-impact-image {
    display: flex;
    justify-content: center;
}

.circular-impact-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: 40px; /* Matching the curved border of previous sections */
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Right Content Column */
.circular-impact-content .pre-title {
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.circular-impact-content .title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--text-main);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.loop-description {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 20px;
    font-weight: 600;
}

.impact-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.impact-list li {
    font-size: 1.05rem;
    color: var(--text-dim);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.impact-list li i {
    color: var(--brand-mint);
    font-size: 1.2rem;
}

/* Bottom Highlight Box */
.impact-status-box {
    background: rgba(0, 210, 127, 0.05);
    padding: 25px;
    border-radius: 20px;
    border: 1px solid rgba(0, 135, 90, 0.1);
}

.impact-status-box h4 {
    color: var(--brand-emerald);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.status-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.status-tag {
    background: #ffffff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    border: 1px solid rgba(0, 135, 90, 0.1);
}

.alignment-text {
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.5;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .circular-impact-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .circular-impact-grid {
        flex-direction: column-reverse; /* Text above image on mobile */
    }
    .status-tags {
        justify-content: center;
    }
    .impact-list li {
        justify-content: center;
    }
}

/* 1. Hide scrollbar for Chrome, Safari and Opera */
/* .product-specs-table-wrapper::-webkit-scrollbar {
    display: none;
} */

/* 2. Hide scrollbar for IE, Edge and Firefox */
/* .product-specs-table-wrapper {
    -ms-overflow-style: none; 
    scrollbar-width: none;  
    
    -webkit-overflow-scrolling: touch; 
} */

/* 3. Keep text on one line without the bar appearing */
.product-specs-table td, 
.product-specs-table th {
    white-space: nowrap;
    padding-right: 30px; /* Adds extra breathing room between columns */
}

/* --- BIO-MATERIALS SECTION STYLES --- */
.bio-materials-wrapper {
    padding: 100px 0;
    background-color: #f9fbf9; /* Soft background to separate from white section above */
    overflow: hidden;
}

.bio-materials-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* Content on left, Image on right */
    gap: 60px;
    align-items: center;
}

/* Left Content Column */
.bio-materials-content .pre-title {
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.bio-materials-content .title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--text-main);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.materials-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 30px;
}

/* Materials Feature Grid */
.materials-feature-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 35px;
}

.material-item {
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 15px;
    border-left: 4px solid var(--brand-mint);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.material-item strong {
    color: var(--brand-emerald);
    display: block;
    margin-bottom: 5px;
}

.material-item span {
    font-size: 0.95rem;
    color: var(--text-dim);
}

/* Goals List */
.goals-container {
    margin-top: 30px;
}

.goals-container h4 {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 15px;
}

.goals-list {
    list-style: none;
    padding: 0;
}

.goals-list li {
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.goals-list li i {
    color: var(--brand-mint);
}

/* Right Image Column */
.bio-materials-image {
    display: flex;
    justify-content: center;
}

.bio-materials-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: 40px; /* Matching the curved border of previous sections */
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .bio-materials-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .goals-list li {
        justify-content: center;
    }
}
/* --- INNOVATION ROADMAP SECTION STYLES --- */
.roadmap-wrapper {
    padding: 100px 0;
    background-color: #ffffff; /* Contrast against the soft background of the previous section */
    overflow: hidden;
}

.roadmap-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr; /* Image on left, Content on right */
    gap: 60px;
    align-items: center;
}

/* Left Image Column */
.roadmap-image {
    display: flex;
    justify-content: center;
}

.roadmap-image img {
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: 40px; /* Matching the curved border of previous sections */
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Right Content Column */
.roadmap-content .pre-title {
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.roadmap-content .title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--text-main);
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.roadmap-intro {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 30px;
}

/* Roadmap List Styling */
.roadmap-list {
    list-style: none;
    padding: 0;
    margin-bottom: 35px;
}

.roadmap-list li {
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 20px;
    padding: 15px 20px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s ease;
}

.roadmap-list li:hover {
    transform: translateX(10px);
    background: rgba(0, 210, 127, 0.05);
}

.roadmap-list li i {
    color: var(--brand-mint);
    font-size: 1.2rem;
}

.roadmap-footer {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-emerald);
    line-height: 1.4;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .roadmap-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .roadmap-grid {
        flex-direction: column-reverse; /* Keeps text above image on mobile */
    }
    .roadmap-list li {
        justify-content: flex-start;
    }
}










/* --- Cinematic Hero Background Zoom --- */
.hero-static-bg {
    /* Existing properties */
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* New Animation */
    transform: scale(1);
    animation: cinematicZoom 20s ease-in-out infinite alternate;
}

@keyframes cinematicZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* --- Premium Value Card Hover Physics --- */
.value-card {
    /* Existing transitions can be overridden by this smoother cubic-bezier */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.value-card:hover {
    transform: translateY(-12px);
    border-color: var(--brand-mint); /* Uses your existing mint variable */
    box-shadow: 0 20px 40px rgba(0, 210, 127, 0.12) !important;
}

.value-card .card-icon i {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.value-card:hover .card-icon i {
    transform: scale(1.15) rotate(5deg);
    color: var(--brand-glow);
}

/* --- Enhanced Lifecycle Step Interaction --- */
.lifecycle-step {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    overflow: hidden;
}

.lifecycle-step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-emerald), var(--brand-mint));
    transition: width 0.4s ease;
}

.lifecycle-step:hover::after {
    width: 100%;
}

.lifecycle-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 135, 90, 0.1) !important;
}
/* --- Image Curving and Continuous Floating Animation --- */
.animated-curved-image {
    border-radius: 40px !important; /* Curves the image borders */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Adds premium depth */
    animation: float-image-soft 6s ease-in-out infinite; /* Moving animation */
    /* Ensure the image doesn't overflow its curved container */
    overflow: hidden; 
}

@keyframes float-image-soft {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Ensure mobile layout handles the slide-in gracefully without horizontal scrolling */
body {
    overflow-x: hidden;
}
















/* --- Root Styling Extensions --- */
:root {
    /* Sampled from reference tag colors */
    --tag-home-loop: #e7f7ef;
    --tag-home-loop-text: #008a47;
    --tag-eco-loop: #e7eff7;
    --tag-eco-loop-text: #00478a;
    
    --modal-spec-bg: #f8fafc;
    --modal-spec-border: rgba(0,0,0,0.05);
}

/* Re-ensure pill-tag is reusable from hero styles */
.pill-tag {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* HomeLoop specific pill style based on reference image */
.pill-tag.HomeLoop {
    background-color: var(--tag-home-loop) !important;
    color: var(--tag-home-loop-text) !important;
    border-color: transparent !important;
}

/* EcoLoop specific pill style based on reference image */
.pill-tag.EcoLoop {
    background-color: var(--tag-eco-loop) !important;
    color: var(--tag-eco-loop-text) !important;
    border-color: transparent !important;
}

/* =========================================
   NEW CATEGORIZED PRODUCT PAGES LAYOUT
   ========================================= */
.categorized-products {
    padding: clamp(60px, 10vw, 100px) 0;
    background-color: var(--modal-spec-bg); /* Soft light gray background */
}

.category-section {
    margin-bottom: 80px;
}
.category-section:last-child {
    margin-bottom: 0;
}

.category-header {
    margin-bottom: 50px;
    position: relative;
}

.category-header h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
}

.category-header p {
    color: var(--text-dim);
    font-size: 1.05rem;
    margin-bottom: 0;
    max-width: 700px;
}

.category-tags {
    position: absolute;
    top: 5px;
    right: 0;
    display: flex;
    gap: 10px;
}

/* --- Responsive Grid --- */
.product-grid.categorized-grid {
    display: grid;
    /* Reduced min-width from 300px to 260px to fit more items per row */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px; /* Tighter gap for a more compact look */
    max-width: 1100px; /* Slightly narrower container */
    margin: 0 auto;
}
/* --- Improved Product Cards for the Grid --- */
.product-card {
    display: flex;
    flex-direction: column;
    padding: 0; /* Remove padding from card as items stack from edge to edge */
    overflow: hidden;
    height: 100%;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(28, 151, 1, 0.02); /* Fainter initial shadow */
    transition: all 0.3s ease;
     border-color: rgba(0, 0, 0, 0.1);
    
}

.product-card:hover {
    transform: none; /* Reference image has very flat, prioritized items. No hover lift. */
    border-color: rgba(0, 255, 72, 0.895);
    box-shadow: 0 10px 25px rgba(32, 167, 2, 0.05); /* Faint shadow on hover */
    background: #ffffff;
}

.product-card img {
    width: 100%;
   height: 180px;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

.card-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.card-tag {
    font-size: 0.7rem;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: inline-block;
}

.card-content h4 {
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 800;
   margin-bottom: 5px;
}

.sizes {
    color: var(--brand-mint);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.card-description {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
    flex: 1;
}

.btn-view-all.view-details-btn {
    width: 100%;
    background-color: var(--modal-spec-bg);
    color: var(--tag-eco-loop-text);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--modal-spec-border);
    margin-bottom: 15px;
    justify-content: center;
    gap: 8px;
}
.btn-view-all.view-details-btn:hover {
    background-color: rgba(0, 135, 90, 0.05);
}

.card-cert {
    color: var(--tag-home-loop-text);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .category-header h3 {
        font-size: 1.8rem;
        padding-right: 180px; /* Space for the floating tags */
    }
}
@media (max-width: 768px) {
    .category-header {
        text-align: center;
        margin-bottom: 40px;
    }
    .category-header h3 {
        padding-right: 0;
    }
    .category-header p {
        margin: 0 auto;
    }
    .category-tags {
        position: relative;
        justify-content: center;
        margin-top: 15px;
        top: 0;
    }
}

/* --- Responsive Fixes --- */
@media (max-width: 768px) {
    .categorized-products-container {
        padding: 40px 0; /* Reduced section padding */
    }

    .product-grid.categorized-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
        gap: 12px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .product-grid.categorized-grid {
        grid-template-columns: 1fr; /* 1 column for small phones */
    }

    .product-card img {
        height: 220px; /* Slightly taller on mobile for better visibility */
    }

    .prioritized-header .title {
        font-size: 1.8rem; /* Smaller header for mobile */
    }
}



/* =========================================
   MODAL POPUP STYLING (Based on images)
   ========================================= */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity overlay */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    visibility: hidden;
}

/* Visible state */
.modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #fefefe;
    border-radius: 24px;
    width: 90%;
    max-width: 1000px; /* Based on image wide layout */
    padding: 60px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

.modal.open .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #aaa;
    font-size: 2.5rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
}
.close-modal:hover {
    color: var(--brand-emerald);
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.modal-image-col img {
    width: 100%;
    max-width: 450px;
    border-radius: 16px;
    height: auto;
    object-fit: cover;
}

.modal-content-col h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-main);
    margin: 8px 0 15px 0;
}

#modal-tags {
    margin-bottom: 25px;
}

#modal-product-desc {
    color: var(--text-dim);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 40px;
}

/* --- Modal Specifications Grid --- */
.modal-specifications {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 50px;
}

.spec-box {
    background-color: var(--modal-spec-bg);
    border: 1px solid var(--modal-spec-border);
    padding: 15px 20px;
    border-radius: 12px;
}

.spec-label {
    display: block;
    color: var(--text-dim);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 8px;
}

.spec-box span:not(.spec-label) {
    color: var(--text-main);
    font-weight: 700;
    font-size: 1rem;
}

/* --- Modal Action Buttons --- */
.modal-actions {
    display: flex;
    gap: 15px;
}

.modal-actions button {
    flex: 1;
    justify-content: center;
    gap: 10px;
}

.whatsapp-btn {
    background: #ffffff;
    color: var(--tag-home-loop-text);
    border: 1px solid var(--modal-spec-border);
}
.whatsapp-btn:hover {
    background-color: rgba(0, 135, 90, 0.05);
}

/* --- Responsive Modal --- */
@media (max-width: 992px) {
    .modal-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .modal-image-col {
        display: flex;
        justify-content: center;
    }
    .modal-image-col img {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .modal-content {
        padding: 40px 25px;
        width: 95%;
    }
    .close-modal {
        right: 20px;
    }
    .modal-actions {
        flex-direction: column;
    }
    .modal-specifications {
        grid-template-columns: 1fr;
    }
}  /* Specialized Innovation Cards */
.innovation-card {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.innovation-card:hover {
    transform: translateY(-10px) !important;
    border-color: var(--brand-mint) !important;
    box-shadow: 0 20px 40px rgba(0, 135, 90, 0.08) !important;
}

.innovation-card .card-visual {
    height: 180px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.innovation-card .ecosystem-list li {
    list-style: none;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.innovation-card .ecosystem-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--brand-mint);
    font-weight: 900;
}





/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366; /* Official WhatsApp Green */
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.float-label {
    position: absolute;
    right: 75px;
    background: white;
    color: #333;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(20px);
    transition: 0.3s ease;
    pointer-events: none;
}

.whatsapp-float:hover .float-label {
    opacity: 1;
    transform: translateX(0);
}

/* Chat Window */
.whatsapp-chat-window {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 320px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    z-index: 9998;
    display: none; /* Hidden by default */
    overflow: hidden;
    animation: slideUp 0.4s ease;
}

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

.chat-header {
    background: #075e54;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-info h4 { margin: 0; font-size: 1rem; }
.header-info p { margin: 0; font-size: 0.8rem; opacity: 0.8; }

.online-dot {
    height: 8px;
    width: 8px;
    background-color: #25d366;
    border-radius: 50%;
    display: inline-block;
}

.close-chat {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.chat-body {
    padding: 20px;
    background-color: #e5ddd5; /* Classic WhatsApp Background */
    min-height: 100px;
}

.bot-msg {
    background: white;
    padding: 10px 15px;
    border-radius: 0 15px 15px 15px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #333;
    max-width: 85%;
}

.chat-footer {
    padding: 15px;
    text-align: center;
    background: white;
}

.whatsapp-link-btn {
    display: block;
    background: #25d366;
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 30px;
    font-weight: 700;
    transition: background 0.3s;
}

.whatsapp-link-btn:hover {
    background: #128c7e;
}



/* =========================================
   INSTITUTIONS SECTION STYLES
   ========================================= */
.institutions-section {
    padding: clamp(60px, 10vw, 100px) 0;
    background-color: var(--bg-light, #ffffff);
    position: relative;
    overflow: hidden;
}

.institutions-header {
    margin-bottom: clamp(40px, 8vw, 60px);
    text-align: center; /* Centers the text inside */
}

/* --- New Group Wrapper --- */
.institutions-header .pre-title-group {
    display: flex; 
    flex-direction: column;
    align-items: center; /* Centers the line exactly under the text */
    margin: 0 auto 15px auto; /* Centers the whole group horizontally on the page */
    width: fit-content; /* Ensures the group stays tight around the text */
}

.institutions-header .pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.institutions-header .accent-line {
    display: block;
    width: 40px;
    height: 4px;
    background-color: var(--brand-emerald, #00875a);
    margin-top: 8px;
    border-radius: 2px;
}

.institutions-header .title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    color: var(--text-main, #1a1e1c);
    font-weight: 800;
    margin: 20px 0 15px;
    line-height: 1.1;
}

.institutions-header .subtitle {
    color: var(--text-dim, #5c6660);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto; /* Centers the 700px paragraph block itself */
}

/* --- Responsive Grid Layout --- */
.institutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 16px; /* Softened corners for a premium feel */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* --- Individual Institution Cards --- */
.institution-card {
    padding: clamp(30px, 4vw, 40px) 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #e1e1e1;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    background: transparent;
    z-index: 1;
}

/* Remove right border on the absolute last item */
.institution-card:last-child {
    border-right: none;
}

/* Card Hover Background Animation */
.institution-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 210, 127, 0.03); /* Faint mint highlight */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 16px; 
}

/* Lift Effect on Hover */
.institution-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 135, 90, 0.1);
    z-index: 2; /* Brings shadow above adjacent borders */
}

.institution-card:hover::before {
    opacity: 1;
}

/* --- Icon & Text Animations --- */
.institution-icon {
    width: 80px;
    height: 80px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Black icon ring pops out with a mint glow */
.institution-card:hover .institution-icon {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 210, 127, 0.3);
}

.institution-icon span {
    color: var(--brand-mint, #00d27f);
    font-weight: 800;
    font-size: 0.9rem;
}

.institution-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main, #1a1e1c);
    margin: 0 0 10px;
    transition: color 0.3s ease;
}

.institution-card:hover h4 {
    color: var(--brand-emerald, #00875a);
}

.institution-card p {
    font-size: 0.9rem;
    color: var(--text-dim, #5c6660);
    line-height: 1.5;
    margin: 0;
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */

/* Tablets (Switch to 2 columns) */
@media (max-width: 992px) {
    .institutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .institution-card {
        border-bottom: 1px solid #e1e1e1;
    }

    /* Remove right borders dynamically so the grid stays clean */
    .institution-card:nth-child(2n) {
        border-right: none; 
    }
    
    /* Remove bottom borders on the last row */
    .institution-card:nth-child(3),
    .institution-card:nth-child(4) {
        border-bottom: none; 
    }
}

/* Phones (Switch to 1 column and center headers) */
@media (max-width: 576px) {
    .institutions-header {
        text-align: center;
    }

    .institutions-header .accent-line {
        margin: 10px auto;
    }

    .institutions-grid {
        grid-template-columns: 1fr;
    }

    .institution-card {
        border-right: none !important;
        border-bottom: 1px solid #e1e1e1;
        padding: 35px 20px;
    }

    .institution-card:last-child {
        border-bottom: none;
    }
    .institutions-header .pre-title-group {
        width: 100%;
        align-items: center; 
    }
}

/* =========================================
   INDUSTRIES SERVED SECTION (3D Animated)
========================================= */
/* --- Fix for Industries Section Text Visibility & Alignment --- */
.industries-section .industries-header {
    text-align: center !important;
}

.industries-section .industries-header .pre-title {
    display: block;
    text-align: center;
    margin: 0 auto 15px auto;
}

/* Forces the title to be dark instead of white */
.industries-section .industries-header .title {
    color: var(--text-main, #1a1e1c) !important;
    text-shadow: none !important;
}

/* Forces the subtitle to be dark grey instead of white */
.industries-section .industries-header .subtitle {
    color: var(--text-dim, #5c6660) !important;
    text-shadow: none !important;
    margin: 0 auto !important;
}
.industries-section {
    padding: clamp(60px, 10vw, 100px) 0;
    background-color: var(--bg-light); /* Keeps it seamlessly integrated */
    overflow: hidden;
}

/* 5 Column Grid Layout matching Screenshot */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 50px;
    /* Adds perspective to the container to enable child 3D transforms */
    perspective: 1200px; 
}

/* The 3D Card Base */
.industry-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the 3D transform */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s ease, 
                border-color 0.4s ease;
                
    /* Initial state flat, but hardware accelerated */
    transform: rotateX(0deg) rotateY(0deg) translateZ(0);
    transform-style: preserve-3d;
}

/* The Moving 3D Hover Animation */
.industry-card:hover {
    /* Lifts the card up and tilts it slightly forward on the X-axis */
    transform: translateY(-15px) rotateX(4deg) rotateY(-2deg) translateZ(20px);
    box-shadow: 0 25px 50px rgba(0, 135, 90, 0.15);
    border-color: rgba(0, 210, 127, 0.3);
}

/* Image Container */
.industry-image {
    height: 160px;
    overflow: hidden;
    position: relative;
    background: #111a22; /* Fallback matching the dark placeholder in your image */
}

.industry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.8; /* Slight dimming to match the moody style in your reference */
}

.industry-card:hover .industry-image img {
    transform: scale(1.1) rotate(1deg); /* Subtle zoom inside the frame */
    opacity: 1; /* Brightens on hover */
}

/* Content Area */
.industry-content {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #ffffff;
}

/* Green Icon Box */
.industry-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 210, 127, 0.1);
    color: var(--brand-emerald);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.industry-card:hover .industry-icon {
    background: var(--brand-emerald);
    color: #ffffff;
    transform: scale(1.15) rotate(-5deg); /* Playful icon pop */
}

.industry-content h3 {
    font-size: 1.25rem;
    color: var(--text-main);
    margin-bottom: 12px;
    font-weight: 800;
}

.industry-content p {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Links */
.industry-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-emerald);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.industry-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.industry-link:hover {
    color: var(--brand-mint);
}

.industry-link:hover i {
    transform: translateX(4px);
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
========================================= */
@media (max-width: 1200px) {
    .industries-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 cards on medium screens */
    }
}

@media (max-width: 992px) {
    .industries-section .section-header {
        text-align: center !important;
    }
    .industries-section .pre-title {
        text-align: center !important;
        margin: 0 auto 10px auto;
    }
}

@media (max-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards on tablets */
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .industries-grid {
        grid-template-columns: 1fr; /* 1 card on phones */
    }
    .industry-card:hover {
        /* Disables heavy 3D rotation on mobile to prevent scrolling weirdness */
        transform: translateY(-8px); 
    }
}


/* =========================================
   SOLUTIONS PAGE HERO SECTION
   ========================================= */
.solutions-hero {
    /* Navy slate background matching the image with a subtle grid pattern */
    background-color: #2c3440;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
    
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px; /* Accounts for transparent header */
    color: #ffffff;
}

.solutions-content {
    max-width: 900px;
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
    font-weight: 500;
}

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

.breadcrumbs a:hover {
    color: var(--brand-mint);
}

.breadcrumbs span {
    color: #ffffff;
}

/* Pre-Title */
.solutions-pre-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.solutions-pre-title .dot {
    color: var(--brand-mint);
    font-size: 1.2rem;
    line-height: 0;
    margin-right: 8px;
}

/* Main Title */
.solutions-title {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.solutions-title .highlight {
    color: var(--brand-mint);
    display: block;
}

/* Description */
.solutions-desc {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin-bottom: 40px;
}

/* Industry Tags */
.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.industry-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.02);
}

.industry-tag:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.industry-tag i {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Scroll Down Button */
.scroll-down-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.3s ease;
}

.scroll-down-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Mobile Adjustments for Solutions Hero */
@media (max-width: 768px) {
    .solutions-hero {
        padding-top: 120px; /* More space for mobile navbar */
        padding-bottom: 80px;
    }
    
    .solutions-title {
        font-size: 2.5rem;
    }
    
    .solutions-desc {
        font-size: 1rem;
    }
    
    .industry-tags {
        gap: 10px;
    }
    
    .industry-tag {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
}

/* =========================================
   CORE-TO-LOOP SYSTEM SECTION
========================================= */
.core-to-loop-section {
    padding: clamp(80px, 10vw, 120px) 0;
    /* Deep navy/slate background to match the reference */
    background-color: #0b111a; 
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 210, 127, 0.05) 0%, transparent 70%);
    overflow: hidden;
    color: #ffffff;
}

.dark-mode-header {
    text-align: center;
    margin-bottom: 60px;
}

.dark-mode-header .pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}

.dark-mode-header .title {
    color: #ffffff !important;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 15px;
}

.dark-mode-header .subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Flow Wrapper --- */
.system-flow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    perspective: 1200px; /* Enables 3D space */
}

.flow-step {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.branch-step {
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* --- System Cards (3D & Glassmorphism) --- */
.system-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px 20px;
    width: 220px;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Animation & 3D base */
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    animation: floatCard 6s ease-in-out infinite;
}

/* Stagger floating animations slightly so they don't move entirely in sync */
.flow-step:nth-child(2) .system-card { animation-delay: 1s; }
.flow-step:nth-child(3) .system-card { animation-delay: 2s; }
.flow-step:nth-child(4) .system-card { animation-delay: 3s; }
.flow-step:nth-child(5) .system-card { animation-delay: 4s; }

@keyframes floatCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 3D Hover Effect */
.system-card:hover {
    animation-play-state: paused;
    transform: translateY(-15px) scale(1.05) rotateX(5deg) rotateY(-5deg);
    border-color: rgba(0, 210, 127, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 210, 127, 0.1);
}

/* Internal Card Glow on Hover */
.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 210, 127, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}
.system-card:hover .card-glow { opacity: 1; }

/* Card Content Layering */
.system-card > * { position: relative; z-index: 1; }

.step-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 210, 127, 0.1);
    color: var(--brand-mint, #00d27f);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 20px auto;
    transition: transform 0.3s ease;
}

.step-icon.blue-icon {
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
}

.step-icon.grey-icon {
    background: rgba(255, 255, 255, 0.05);
    color: #8b949e;
}

.system-card:hover .step-icon {
    transform: scale(1.1) translateZ(10px);
}

.step-phase {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.step-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 60px; /* Keeps cards uniform */
}

.step-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Animated Arrows --- */
.animated-arrow {
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.2rem;
    margin: 0 10px;
    animation: pulseArrow 2s infinite;
}

@keyframes pulseArrow {
    0% { transform: translateX(0); opacity: 0.2; }
    50% { transform: translateX(5px); opacity: 0.8; color: var(--brand-mint, #00d27f); }
    100% { transform: translateX(0); opacity: 0.2; }
}

/* --- Branching "OR" Logic --- */
.branch-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.branch-divider::before, 
.branch-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, 0.1);
}
.branch-divider::before { top: -15px; }
.branch-divider::after { bottom: -15px; }

.or-badge {
    background: #111a25;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
    position: relative;
    z-index: 2;
}

.branch-arrow {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
}

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

@media (max-width: 1200px) {
    .system-card { width: 180px; padding: 25px 15px; }
    .step-desc { font-size: 0.75rem; }
    .animated-arrow { margin: 0 5px; }
    .branch-arrow { right: -15px; }
}

@media (max-width: 992px) {
    .system-flow-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .flow-step {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .system-card {
        width: 100%;
        min-height: auto;
    }

    /* Rotate arrows to point downwards on mobile */
    .animated-arrow {
        margin: 20px 0 0 0;
        transform: rotate(90deg);
    }
    
    @keyframes pulseArrow {
        0% { transform: translateY(0) rotate(90deg); opacity: 0.2; }
        50% { transform: translateY(5px) rotate(90deg); opacity: 0.8; color: var(--brand-mint, #00d27f); }
        100% { transform: translateY(0) rotate(90deg); opacity: 0.2; }
    }

    .branch-step {
        width: 100%;
        max-width: 320px;
    }

    .branch-arrow {
        position: relative;
        right: auto;
        top: auto;
        transform: rotate(90deg);
        margin-top: 20px;
    }
    
    .step-desc { min-height: auto; }
}

/* =========================================
   HOW WE THINK SECTION (SOLUTIONS PAGE)
   ========================================= */
.how-we-think-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #f8fafc; /* Very soft light grey/blue from reference */
    overflow: hidden;
}

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

/* --- Left Column: Text --- */
.think-text-content .pre-title {
    color: var(--brand-emerald, #00875a);
    font-weight: 700;
  
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
   font-size: 0.75rem !important;
    margin-bottom: 10px !important;
}

.think-title {
   
    font-weight: 900;
    color: #0b1521; /* Dark navy/black from image */
    font-size: clamp(2rem, 4vw, 2.8rem) !important; /* Reduced from 3.5rem */
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em;
}

.think-text-content .accent-line {
    width: 50px;
    height: 3px;
    background-color: var(--brand-emerald, #00875a);
    margin-bottom: 30px;
}

.think-description {
  font-size: 1rem !important; /* Reduced from 1.15rem */
    line-height: 1.6 !important;
    color: #515b66; /* Slate grey from image */
    max-width: 90%;
}

/* --- Right Column: 3D Cards --- */
.think-cards-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* Cards touch each other like in the image */
    perspective: 1200px; /* Enables 3D space */
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.think-card {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 30px 40px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
    
    /* 3D and Animation Setup */
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-radius 0.3s ease;
}

/* Remove bottom border from last card */
.think-card:last-child {
    border-bottom: none;
}

/* Top and bottom card border radius for hover spillover */
.think-card:first-child:hover { border-radius: 12px 12px 0 0; }
.think-card:last-child:hover { border-radius: 0 0 12px 12px; }

/* 3D Hover Effect */
.think-card:hover {
    transform: translateZ(30px) translateY(-5px) rotateX(2deg);
    box-shadow: 0 20px 40px rgba(0, 135, 90, 0.1);
    z-index: 10; /* Pops out over other cards */
    border-bottom-color: transparent;
}

/* Continuous Floating Animation inside the container */
.float-anim {
    animation: gentle-float 6s ease-in-out infinite alternate;
}

@keyframes gentle-float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-4px); }
}

/* Stop floating when hovering to allow 3D effect to take over */
.think-card:hover.float-anim {
    animation-play-state: paused;
}

/* --- Card Typography & Icons --- */
.think-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.think-card:hover .think-icon {
    transform: scale(1.15) rotate(-5deg);
}

/* Icon Specific Colors from Image */
.icon-red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.icon-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.icon-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.icon-grey { background: rgba(100, 116, 139, 0.1); color: #64748b; }

.think-card-text h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0b1521;
    margin-bottom: 5px;
}

.think-card-text p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .think-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .think-text-content {
        text-align: center;
    }

    .think-description {
        margin: 0 auto;
    }

    .think-text-content .accent-line {
        margin: 0 auto 30px auto;
    }
}

@media (max-width: 576px) {
    .how-we-think-section {
        padding: 60px 20px;
    }

    .think-title {
        font-size: 2.2rem;
    }

    .think-card {
        padding: 25px 20px;
        gap: 15px;
    }

    .think-card:hover {
        /* Reduce extreme 3D effects on mobile touch screens */
        transform: translateZ(10px) translateY(-2px); 
    }
}

/* =========================================
   ULTRA-PREMIUM TABLE DESIGN
   ========================================= */
.product-specs-table-wrapper {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04), 
                inset 0 0 0 1px rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 135, 90, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow-x: auto;
    margin-bottom: 30px;
}

.product-specs-table-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 135, 90, 0.1),
                inset 0 0 0 1px rgba(255, 255, 255, 1);
    border-color: rgba(0, 210, 127, 0.3);
}

/* Custom Premium Scrollbar for horizontal scrolling */
.product-specs-table-wrapper::-webkit-scrollbar {
    height: 6px;
}
.product-specs-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    margin: 0 20px;
}
.product-specs-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 210, 127, 0.4);
    border-radius: 10px;
}
.product-specs-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--brand-emerald);
}

/* Table Structure */
.product-specs-table {
    width: 100%;
    border-collapse: separate; /* Allows for space between rows */
    border-spacing: 0 10px; /* Creates the floating row effect */
    text-align: left;
    min-width: 600px; /* Ensures table doesn't squish too much on mobile */
}

/* Headers */
.product-specs-table th {
    color: var(--brand-emerald, #00875a);
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 20px 5px 20px;
}

/* Floating Rows */
.product-specs-table tbody tr {
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* Cell Styling */
.product-specs-table td {
    color: var(--text-dim, #5c6660);
    padding: 18px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    border-top: 1px solid rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.02);
    vertical-align: middle;
}

/* Row End-Caps (Rounded Corners) */
.product-specs-table td:first-child {
    border-radius: 12px 0 0 12px;
    border-left: 4px solid transparent; /* Placeholder for hover accent */
    color: var(--text-main, #1a1e1c);
    font-weight: 700;
}

.product-specs-table td:last-child {
    border-radius: 0 12px 12px 0;
    border-right: 1px solid rgba(0,0,0,0.02);
}

/* Interactive Hover Physics */
.product-specs-table tbody tr:hover {
    transform: scale(1.01) translateX(5px);
    box-shadow: 0 10px 25px rgba(0, 210, 127, 0.08);
    background: linear-gradient(90deg, rgba(0, 210, 127, 0.03), #ffffff);
}

.product-specs-table tbody tr:hover td {
    color: var(--brand-emerald, #00875a);
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.product-specs-table tbody tr:hover td:first-child {
    border-left: 4px solid var(--brand-mint, #00d27f); /* Green indicator bar slides in */
}


/* =========================================
   INDUSTRY SOLUTION SECTION (3D / Animated)
   ========================================= */
.industry-solution-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

.ind-sol-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Image takes slightly less width to balance text */
    gap: 70px;
    align-items: flex-start;
}

/* --- Left Column: Clean Stacked Image Composition --- */
.ind-image-col {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between the two images */
    position: relative;
}

/* Main Image (Top) */
.ind-main-img-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.ind-main-img-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 135, 90, 0.15);
}

.ind-main-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease;
}

.ind-main-img-wrapper:hover img {
    transform: scale(1.05); /* Slight internal zoom on hover */
}

/* Glassmorphism Tag on Image */
.ind-img-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 20, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px; /* Pill shape matching your image */
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}
.ind-img-tag i { color: var(--brand-mint, #00d27f); }

/* Secondary Image (Bottom) */
.ind-sec-img-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    background: #0b1521; /* Dark fallback matching your screenshot */
    min-height: 250px; /* Ensures the dark box shows up even if the image link is broken */
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.ind-sec-img-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 135, 90, 0.15);
}

.ind-sec-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Continuous Subtle Floating Animations */
.float-primary { animation: float-vertical-soft 6s ease-in-out infinite; }
.float-secondary { animation: float-vertical-soft 8s ease-in-out infinite alternate-reverse; }

@keyframes float-vertical-soft {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* Pause floating on hover so the hover effect takes over */
.ind-main-img-wrapper:hover.float-primary,
.ind-sec-img-wrapper:hover.float-secondary { 
    animation-play-state: paused; 
}


/* --- Right Column: Content --- */
.ind-content-col {
    position: relative;
    padding-top: 20px;
}

.ind-bg-number {
    position: absolute;
    top: -30px;
    left: -10px;
    font-size: clamp(6rem, 10vw, 9rem);
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03); /* Extremely faint */
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.ind-content-col > * { 
    position: relative; 
    z-index: 1; 
}

.ind-pre-title {
    color: var(--brand-emerald, #00875a);
   font-size: 0.75rem !important;
    margin-bottom: 10px !important;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;

    display: block;
}

.ind-title {
 font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important; /* Reduced from 3.2rem */
    margin-bottom: 30px !important; /* Tighter spacing */
    color: #0b1521;
    font-weight: 900;
    line-height: 1.1;
 
    letter-spacing: -0.02em;
}

/* --- Problem / Solution 3D Cards Grid --- */
.ind-ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  gap: 20px !important;
    margin-bottom: 35px !important;
    perspective: 1000px; /* Prepares for 3D card tilt */
}

.ind-card {
    padding: 30px 25px;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
}

.ind-card:hover {
    transform: translateY(-8px) rotateX(4deg);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

.card-problem {
    background-color: #fffafb;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.card-solution {
    background-color: #f6fcf9;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.ind-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.ind-card-header h4 {
font-size: 1.05rem !important;
    font-weight: 800;
    margin: 0;
}

.card-problem .ind-card-header { color: #dc2626; }
.card-solution .ind-card-header { color: #059669; }

.ind-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ind-list li {
    
    color: #64748b;
  font-size: 0.88rem !important; 
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    position: relative;
    padding-left: 20px;
}

.ind-list li:last-child { margin-bottom: 0; }

/* Custom dashes matching the design */
.card-problem .ind-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #fca5a5;
    font-weight: 700;
}

.card-solution .ind-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #6ee7b7;
    font-weight: 700;
}

/* --- Tags Sections --- */
.ind-tags-wrapper {
    margin-bottom: 25px;
}

.ind-tags-title {
   font-size: 0.7rem !important;
    margin-bottom: 10px !important;
    color: #94a3b8;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;

}

.ind-tags-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.tag-product i, 
.tag-outcome i {
    font-size: 0.85rem !important;
}

.ind-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
padding: 8px 14px !important;
    font-size: 0.8rem !important;
    border-radius: 8px;
  
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Product Tags Style */
.tag-product {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.tag-product i { color: var(--brand-emerald, #00875a); font-size: 1rem; }
.tag-product:hover {
    border-color: var(--brand-mint, #00d27f);
    box-shadow: 0 4px 15px rgba(0, 210, 127, 0.1);
    transform: translateY(-2px);
}

/* Outcome Tags Style */
.tag-outcome {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    color: #166534;
}
.tag-outcome i { color: #22c55e; font-size: 1rem; }
.tag-outcome:hover {
    background: #dcfce7;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.15);
}

/* --- Call to Action Link --- */
.ind-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-emerald, #00875a);
    font-weight: 800;
    font-size: 0.95rem !important;
    margin-top: 10px !important;
    text-decoration: none;
    transition: all 0.3s ease;
  
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.ind-link:hover {
    color: var(--brand-mint, #00d27f);
    gap: 12px;
    border-bottom-color: var(--brand-mint, #00d27f);
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */
@media (max-width: 1024px) {
    .ind-sol-grid {
        grid-template-columns: 1fr;
        gap: 100px;
    }
    
    .ind-sec-img-wrapper {
        display: none; /* Hide secondary overlapping image on smaller screens to save space */
    }

    .ind-bg-number {
        left: 0;
        top: -50px;
    }
}

@media (max-width: 768px) {
    .ind-ps-grid {
        grid-template-columns: 1fr; /* Stack problem/solution cards vertically */
    }
    
    .ind-card:hover {
        transform: translateY(-4px); /* Reduce 3D tilt on mobile */
    }
}

@media (max-width: 576px) {
    .industry-solution-section {
        padding: 60px 20px;
    }
    
    .ind-img-tag {
        bottom: 15px;
        left: 15px;
        font-size: 0.85rem;
        padding: 10px 16px;
    }
}


/* =========================================
   INDUSTRY SOLUTION SECTION (3D / Animated)
   ========================================= */
.industry-solution-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

.ind-sol-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: stretch; /* FIX 1: This forces both columns to have the exact same total height */
}

/* --- Left Column: Clean Stacked Image Composition --- */
.ind-image-col {
    display: flex;
    flex-direction: column;
    gap: 30px; 
    position: relative;
    height: 100%; /* FIX 2: Takes the full height of the stretched grid cell */
}

/* Main Image (Top) and Secondary Image (Bottom) */
.ind-main-img-wrapper,
.ind-sec-img-wrapper {
    flex: 1; /* FIX 3: Makes both images share the vertical space equally to match the text */
    width: 100%;
    min-height: 250px; /* Prevents them from collapsing on smaller screens */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Base states & shadows */
.ind-main-img-wrapper {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    z-index: 2;
}

.ind-sec-img-wrapper {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    background: #0b1521; 
}

/* Hover effects */
.ind-main-img-wrapper:hover,
.ind-sec-img-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 135, 90, 0.15);
}

/* Force Images to fill the new flexible height */
.ind-main-img-wrapper img,
.ind-sec-img-wrapper img {
    width: 100%;
    height: 100%; /* FIX 4: Forces images to crop perfectly to the new container height */
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.ind-main-img-wrapper:hover img {
    transform: scale(1.05);
}

/* Glassmorphism Tag on Image */
.ind-img-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 20, 15, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px; 
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}
.ind-img-tag i { color: var(--brand-mint, #00d27f); }

/* --- Right Column: Content --- */
.ind-content-col {
    position: relative;
    padding-top: 0; /* FIX 5: Removed top padding so the text aligns perfectly with the top image */
    display: flex;
    flex-direction: column;
}


/* =========================================
   CROSS-INDUSTRY DELIVERY SECTION (DARK 3D)
   ========================================= */
.cross-industry-delivery {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #0b121c; /* Deep navy background matching image */
    background-image: radial-gradient(circle at top center, rgba(0, 210, 127, 0.03) 0%, transparent 60%);
    position: relative;
    overflow: hidden;
}

.delivery-header {
    text-align: center;
    margin-bottom: 60px;
}

.delivery-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.delivery-title {
    color: #ffffff;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.delivery-accent-line {
    width: 60px;
    height: 3px;
    background: var(--brand-emerald, #00875a);
    margin: 0 auto 25px auto;
    border-radius: 3px;
}

.delivery-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 3D Grid & Cards --- */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    perspective: 1200px; /* Enables 3D tilting */
    margin-bottom: 60px;
}

.delivery-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 40px 30px;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Continuous subtle float animation */
    animation: float-card-dark 6s ease-in-out infinite;
}

/* Staggered float animation so they move organically */
.delivery-card:nth-child(2) { animation-delay: 1s; }
.delivery-card:nth-child(3) { animation-delay: 2s; }
.delivery-card:nth-child(4) { animation-delay: 3s; }

@keyframes float-card-dark {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* Top Green Accent line (animates on hover) */
.delivery-card-accent {
    position: absolute;
    top: -1px;
    left: 30px;
    width: 0;
    height: 3px;
    background: var(--brand-mint, #00d27f);
    transition: width 0.5s ease;
    border-radius: 0 0 3px 3px;
}

/* 3D Hover Physics */
.delivery-card:hover {
    animation-play-state: paused; /* Stop floating to prioritize 3D tilt */
    transform: translateY(-15px) rotateX(5deg);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 210, 127, 0.3);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 210, 127, 0.08);
}

.delivery-card:hover .delivery-card-accent {
    width: 60px; /* Slides the green accent line out */
}

/* Icon Styles */
.delivery-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 210, 127, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: transform 0.4s ease, background 0.4s ease;
}

.delivery-icon i {
    color: var(--brand-mint, #00d27f);
    font-size: 1.3rem;
    transition: color 0.4s ease;
}

.delivery-card:hover .delivery-icon {
    transform: scale(1.15) rotate(-5deg) translateZ(10px); /* 3D pop out */
    background: var(--brand-emerald, #00875a);
}
.delivery-card:hover .delivery-icon i {
    color: #ffffff;
}

.delivery-card h4 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.3;
}

.delivery-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Stats Bar --- */
.delivery-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 35px 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.delivery-stats-bar:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 210, 127, 0.1);
    border-color: rgba(0, 210, 127, 0.2);
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    display: block;
    color: var(--brand-mint, #00d27f);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    margin-bottom: 5px;
    text-shadow: 0 0 20px rgba(0, 210, 127, 0.2);
}

.stat-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .delivery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .delivery-stats-bar {
        flex-wrap: wrap;
        gap: 30px;
        padding: 30px;
    }
    .stat-divider {
        display: none;
    }
    .stat-item {
        min-width: 40%;
    }
}

@media (max-width: 576px) {
    .delivery-grid {
        grid-template-columns: 1fr;
    }
    .delivery-card:hover {
        transform: translateY(-5px); /* Tone down the 3D tilt on mobile for smoother scrolling */
    }
    .stat-item {
        min-width: 100%;
    }
}


/* =========================================
   MATERIAL INTELLIGENCE SYSTEM (Light Theme)
========================================= */
.material-intelligence-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

.mi-header {
    text-align: center;
    margin-bottom: 60px;
}

.mi-header .pre-title {
    color: var(--brand-emerald, #00875a);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 15px;
}

.mi-header .title {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: #1a1e1c;
    font-weight: 800;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.mi-header .text-highlight {
    color: var(--brand-mint, #00d27f);
}

.mi-header .subtitle {
    color: #5c6660;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Main Card Panel --- */
.mi-flow-container {
    background: #f8fafc; /* Crisp off-white sheet layer matching your reference images */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 80px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    position: relative;
    margin-bottom: 40px;
}

.mi-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.mi-row:first-child {
    margin-bottom: 40px;
}

/* --- Stable Fixed Nodes --- */
.mi-node {
    text-align: center;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 0; /* Starts hidden for sequential timeline reveals */
    transform: translateY(20px);
    animation: revealSequence 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* --- Completely Static & Structured Icon Frame --- */
.mi-icon-container {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #ffffff;
    margin-bottom: 15px;
    position: relative;
    
    /* Strict dimensions to keep it perfectly aligned */
    flex-shrink: 0; 
    
    /* High premium 3D layered shadow effects */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

/* Specific Node Background Tinting */
.bg-green-light { background-color: #00b368; }
.bg-blue-bright { background-color: #2563eb; }
.bg-slate-grey  { background-color: #475569; }
.bg-navy-dark   { background-color: #1e3a8a; }
.bg-charcoal    { background-color: #374151; }

/* Subtle Pop on Mouse Over */
.mi-node:hover .mi-icon-container {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.mi-node h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a1e1c;
    margin: 0 0 6px 0;
}

.mi-node p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

/* --- Minimalist Clean Arrows --- */
.mi-arrow {
    color: #cbd5e1;
    font-size: 1rem;
    width: 35px;
    text-align: center;
    opacity: 0;
    animation: arrowReveal 0.4s ease forwards;
}

/* --- Timeline Stagger Sequence Logic --- */
.step-seq-1 { animation-delay: 0.1s; }
.arrow-seq-1 { animation-delay: 0.4s; }
.step-seq-2 { animation-delay: 0.6s; }
.arrow-seq-2 { animation-delay: 0.9s; }
.step-seq-3 { animation-delay: 1.1s; }
.arrow-seq-3 { animation-delay: 1.4s; }
.step-seq-4 { animation-delay: 1.6s; } /* Top branch shows */

/* Lower branch pipeline reveals smoothly next */
.step-seq-5 { animation-delay: 1.9s; } 
.arrow-seq-4 { animation-delay: 2.2s; }
.step-seq-6 { animation-delay: 2.4s; }

/* Bottom banner loads up absolute last */
.step-seq-7 { 
    opacity: 0;
    animation: revealSequence 0.8s ease forwards;
    animation-delay: 2.8s; 
}

@keyframes revealSequence {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes arrowReveal {
    to { opacity: 1; }
}

/* --- Clean Branching "or" Layout Line (Desktop only) --- */
.or-vertical-divider {
    position: absolute;
    right: 14.5%;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.or-vertical-divider span {
    background-color: #f8fafc;
    padding: 8px 0;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- Bottom Green Message Board --- */
.mi-info-banner {
    background-color: #ecfdf5;
    border: 1px solid #d1fae5;
    border-radius: 50px;
    padding: 15px 30px;
    color: #065f46;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 4px 12px rgba(6, 95, 70, 0.02);
}

.mi-info-banner i {
    color: #10b981;
    font-size: 1.1rem;
}

/* =========================================
   RESPONSIVE DESIGN BREAKPOINTS
========================================= */
@media (max-width: 1100px) {
    .mi-node { width: 140px; }
    .mi-node p { font-size: 0.8rem; }
    .or-vertical-divider { right: 11%; }
}

@media (max-width: 992px) {
    .mi-flow-container {
        padding: 50px 20px;
    }
    .or-vertical-divider {
        display: none; /* Hide wire frame elements on tablet/mobile views */
    }
    .mi-row {
        flex-direction: column;
        gap: 15px;
    }
    .mi-row:first-child {
        margin-bottom: 15px;
    }
    .mi-arrow {
        transform: rotate(90deg); /* Flip step directions layout vertically */
        margin: 5px 0;
    }
    .mi-node {
        width: 100%;
        max-width: 280px;
    }
    .mi-info-banner {
        border-radius: 16px;
        flex-direction: column;
        padding: 20px;
    }
}
/* --- Core-to-Loop Flowchart Clean Alignment & Spacing --- */

/* =========================================
   VALUE CHAIN OPERATION SECTION (3D CARDS)
   ========================================= */
.value-chain-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

.chain-header {
    text-align: center;
    margin-bottom: 50px;
}

.chain-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.chain-title {
    color: var(--text-main, #1a1e1c);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.chain-accent-line {
    width: 50px;
    height: 3px;
    background: var(--brand-emerald, #00875a);
    margin: 0 auto 20px auto;
    border-radius: 3px;
}

.chain-desc {
    color: var(--text-dim, #5c6660);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}

/* --- Grid & Card Engine --- */
.chain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch; /* Forces all columns and cards to have matching structural height */
    perspective: 1400px; /* Setup for 3D physics tilt room */
    margin-top: 20px;
}

.chain-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease;
                
    /* Continuous gentle organic floating physics */
    animation: gentleCardFloat 7s ease-in-out infinite alternate;
}

/* Stagger animations so cards float offset from one another */
.chain-grid .chain-card:nth-child(2) { animation-delay: 1.2s; }
.chain-grid .chain-card:nth-child(3) { animation-delay: 2.4s; }

@keyframes gentleCardFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

/* Color Highlight Bands on Top Edge */
.chain-card-top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 10;
}
.border-blue { background: #3b82f6; }
.border-green { background: var(--brand-mint, #00d27f); }
.border-dark-blue { background: var(--brand-emerald, #00875a); }

/* Card Image Optimization */
.chain-img-frame {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.chain-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover Physics */
.chain-card:hover {
    animation-play-state: paused; /* Halts float physics to let 3D take precedence safely */
    transform: translateZ(25px) translateY(-10px) rotateX(3deg) rotateY(-1.5deg);
    border-color: rgba(0, 210, 127, 0.25);
    box-shadow: 0 20px 45px rgba(0, 135, 90, 0.08);
}

.chain-card:hover .chain-img-frame img {
    transform: scale(1.06);
}

/* --- Body Text Formatting --- */
.chain-card-body {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Pushes child items evenly layout-wise */
}

/* Styled Micro-Pills */
.chain-pill {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}
.pill-blue { background: #eff6ff; color: #1e40af; }
.pill-green { background: #f0fdf4; color: #166534; }
.pill-dark-blue { background: #f0fdfa; color: #115e59; }

.chain-card-body h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main, #1a1e1c);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.chain-card-body p {
    font-size: 0.9rem;
    color: var(--text-dim, #5c6660);
    line-height: 1.55;
    margin-bottom: 25px;
}

/* --- Refined Structural Sub-Tags Array --- */
.chain-sub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto; /* Aligns sub-tags to bottom cleanly across different text lengths */
}

.chain-sub-tags .sub-tag {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Individual tag micro-interactions */
.chain-card:hover .chain-sub-tags .sub-tag {
    background: #ffffff;
    border-color: #e2e8f0;
}

.chain-sub-tags .sub-tag:hover {
    background: var(--brand-emerald, #00875a) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */
@media (max-width: 1024px) {
    .chain-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    /* Stretch the 3rd element cleanly inside tablet layout */
    .chain-grid .chain-card:nth-child(3) {
        grid-column: span 2;
        max-width: calc(50% - 12.5px);
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .chain-grid {
        grid-template-columns: 1fr;
    }
    .chain-grid .chain-card:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }
    .chain-card:hover {
        transform: translateY(-5px); /* Softens 3D tip axis behavior on touchpads */
    }
}

@media (max-width: 576px) {
    .value-chain-section {
        padding: 60px 0;
    }
    .chain-card-body {
        padding: 25px 20px;
    }
    .chain-img-frame {
        height: 180px;
    }
}
/* =========================================
   POLYMER VALUE CHAIN MOVEMENT TIMELINE
   ========================================= */
.value-chain-timeline-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #060b11; /* Moody dark theme matching reference images */
    background-image: radial-gradient(circle at center, rgba(0, 135, 90, 0.04) 0%, transparent 75%);
    overflow: hidden;
}

.timeline-header {
    text-align: center;
    margin-bottom: 70px;
}

.timeline-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.timeline-title {
    color: #ffffff !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-shadow: none !important;
}

.timeline-accent-line {
    width: 50px;
    height: 3px;
    background: var(--brand-emerald, #00875a);
    margin: 0 auto 25px auto;
    border-radius: 3px;
}

.timeline-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto;
}

/* --- Flow Engine Layout --- */
.timeline-flow-map {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 50px;
    perspective: 1200px; /* Prepares 3D coordinate space matrix */
}

/* --- Node Architecture --- */
.timeline-stage-node {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    
    /* Reveal Timeline Step Animation Trigger */
    opacity: 0;
    transform: translateY(20px);
    animation: timelineRevealStep 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: calc(var(--stage-delay) * 0.4s);
}

@keyframes timelineRevealStep {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Interactive 3D Circles --- */
.timeline-icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 25px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                border-color 0.4s ease, 
                color 0.4s ease, 
                box-shadow 0.4s ease;
}

.circle-internal-glow {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 210, 127, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Micro 3D Rotational Hover Effect */
.timeline-stage-node:hover .timeline-icon-circle {
    transform: translateZ(15px) rotateX(8deg) rotateY(-8deg);
    border-color: rgba(0, 210, 127, 0.4);
    color: var(--brand-mint, #00d27f);
    box-shadow: 0 10px 25px rgba(0, 210, 127, 0.15);
}

.timeline-stage-node:hover .circle-internal-glow {
    opacity: 1;
}

/* --- Metadata / Typography --- */
.timeline-stage-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stage-number-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--brand-mint, #00d27f);
    margin-bottom: 12px;
    text-transform: uppercase;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.timeline-stage-node:hover .stage-number-tag {
    opacity: 1;
}

.timeline-stage-meta h3 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: -0.01em;
}

.timeline-stage-meta p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 10px;
    max-width: 200px;
}

/* --- Custom Staggered Connectors (Arrows) --- */
.timeline-flow-arrow {
    display: flex;
    align-items: center;
    height: 70px; /* Aligns arrows perfectly to cross horizontally with the circles */
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
    
    opacity: 0;
    animation: arrowFadeReveal 0.6s ease forwards;
    animation-delay: calc(var(--stage-delay) * 0.4s);
}

@keyframes arrowFadeReveal {
    to { opacity: 1; }
}

/* Wave-like continuous lighting pulse moving down the arrows */
.timeline-flow-arrow i {
    animation: kineticArrowPulse 2.5s infinite ease-in-out;
    animation-delay: calc(var(--stage-delay) * 0.3s);
}

@keyframes kineticArrowPulse {
    0%, 100% { transform: translateX(0); color: rgba(255, 255, 255, 0.15); }
    50% { transform: translateX(4px); color: var(--brand-mint, #00d27f); }
}

/* --- Stage 05: Active Circularity Glow (The Terminal State) --- */
.active-circular-node .timeline-icon-circle {
    background: var(--brand-emerald, #00875a);
    border-color: var(--brand-mint, #00d27f);
    color: #ffffff;
    box-shadow: 0 0 25px rgba(0, 210, 127, 0.25);
}

.highlight-pulse {
    opacity: 1 !important;
    background: radial-gradient(circle, rgba(0, 255, 157, 0.3) 0%, transparent 75%);
    animation: pulseCircularBase 3s infinite alternate;
}

@keyframes pulseCircularBase {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.1); opacity: 1; }
}

.active-circular-node:hover .timeline-icon-circle {
    background: var(--brand-mint, #00d27f);
    box-shadow: 0 0 35px rgba(0, 210, 127, 0.45);
    color: #060b11;
}

/* =========================================
   TIMELINE LAPTOP & MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 1024px) {
    .timeline-flow-map {
        gap: 5px;
    }
    .timeline-stage-meta p {
        font-size: 0.8rem;
        padding: 0;
    }
}

@media (max-width: 850px) {
    /* Pivot architecture from a horizontal line into a clean vertical track room */
    .timeline-flow-map {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 40px;
    }

    .timeline-stage-node {
        width: 100%;
        max-width: 400px;
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 25px;
    }

    .timeline-icon-circle {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .timeline-stage-meta {
        align-items: flex-start;
    }

    .timeline-stage-meta p {
        max-width: 100%;
    }

    /* Transform arrow indicator to drop down sequentially instead of rightwards */
    .timeline-flow-arrow {
        height: auto;
        padding: 5px 0;
        transform: rotate(90deg);
        margin-left: -150px; /* Shifts arrow center column offset under vertical stack circles */
    }

    @keyframes kineticArrowPulse {
        0%, 100% { transform: translateY(0) rotate(90deg); color: rgba(255, 255, 255, 0.15); }
        50% { transform: translateY(4px) rotate(90deg); color: var(--brand-mint, #00d27f); }
    }
}

@media (max-width: 480px) {
    .timeline-flow-arrow {
        margin-left: 0; /* Fallback baseline alignments for slim mobile screens */
        align-self: center;
    }
    .timeline-stage-node {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .timeline-stage-meta {
        align-items: center;
    }
}

/* =========================================
   DESIGNED FOR REAL-WORLD SYSTEMS (3D)
   ========================================= */
.real-world-systems-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff; /* Bright pristine layout from image */
    overflow: hidden;
}

.systems-header {
    text-align: center;
    margin-bottom: 60px;
}

.systems-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.systems-title {
    color: var(--text-main, #1a1e1c);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.systems-accent-line {
    width: 50px;
    height: 3px;
    background: var(--brand-emerald, #00875a);
    margin: 0 auto 20px auto;
    border-radius: 3px;
}

.systems-desc {
    color: var(--text-dim, #5c6660);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 740px;
    margin: 0 auto;
}

/* --- 4-Column Structural Rigid Alignment --- */
.systems-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: stretch; /* Forces all cards to snap to uniform row height */
    perspective: 1400px; /* Prepares structural 3D canvas layer matrix */
    margin-top: 20px;
}

.systems-3d-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease;
}

/* --- Continuous Floating Physics Matrix --- */
.float-node {
    animation: systemsFluidFloat 5s ease-in-out infinite alternate;
    animation-delay: var(--node-stagger);
}

@keyframes systemsFluidFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-7px); }
}

/* 3D Kinetic Hover State */
.systems-3d-card:hover {
    animation-play-state: paused; /* Drops layout floats to emphasize clean 3D tilt tracking */
    transform: translateZ(20px) translateY(-10px) rotateX(4deg) rotateY(-2deg);
    border-color: rgba(0, 210, 127, 0.3);
    box-shadow: 0 15px 35px rgba(0, 135, 90, 0.08);
}

/* --- Core Card Inner Formatting --- */
.systems-card-inner {
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2;
}

/* Faint Watermark Background Structural Placement Numbers */
.systems-watermark-num {
    position: absolute;
    top: 15px;
    left: 25px;
    font-size: 3.5rem;
    font-weight: 900;
    color: rgba(0, 135, 90, 0.04); /* Translucent, faint layout weight matching image */
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    transition: color 0.4s ease, transform 0.4s ease;
    transform: translateZ(5px);
}

.systems-3d-card:hover .systems-watermark-num {
    color: rgba(0, 210, 127, 0.12);
    transform: translateZ(10px) scale(1.05);
}

/* --- Icon Framework --- */
.systems-icon-shield {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background-color: rgba(0, 210, 127, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 1.1rem;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease, color 0.4s ease;
}

.systems-icon-shield.text-green {
    color: var(--brand-emerald, #00875a);
}

.systems-3d-card:hover .systems-icon-shield {
    transform: scale(1.1) translateZ(15px);
    background-color: var(--brand-emerald, #00875a);
    color: #ffffff;
}

/* --- Card Typography --- */
.systems-card-inner h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #1a1e1c);
    margin: 0 0 12px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.systems-card-inner p {
    font-size: 0.88rem;
    color: var(--text-dim, #5c6660);
    line-height: 1.55;
    margin: 0;
}

/* =========================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES
   ========================================= */
@media (max-width: 1100px) {
    .systems-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 650px) {
    .systems-cards-grid {
        grid-template-columns: 1fr;
    }
    .systems-3d-card:hover {
        transform: translateY(-5px); /* Softens rotation parameters smoothly over small handheld targets */
    }
}
/* =========================================
   REAL-WORLD SYSTEMS SECTION UPDATES
   ========================================= */

/* 1. Completely hide the large background numbers */
.systems-watermark-num {
    display: none !important;
}

/* 2. Fix the 4th icon to make it visible */
.systems-3d-card:nth-child(4) .systems-icon-shield i::before {
    content: "\f201"; /* Hex code for Font Awesome 6 fa-chart-line */
}

/* 3. Prepare the card container for the border popup animation */
.systems-3d-card {
    position: relative !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: #ffffff !important;
    overflow: hidden; /* Keeps the animating border edge clean */
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Create the hidden top accent border line */
.systems-3d-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-emerald, #00875a), var(--brand-mint, #00d27f));
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), left 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
    border-radius: 0 0 3px 3px;
}

/* 4. Trigger the 3D tilt and expand the top border on hover */
.systems-3d-card:hover {
    border-color: rgba(0, 210, 127, 0.2) !important;
    box-shadow: 0 20px 40px rgba(0, 135, 90, 0.08) !important;
}

.systems-3d-card:hover::after {
    width: 80px; /* Expands to a clean premium accent block */
    left: calc(50% - 40px); /* Keeps it perfectly centered while expanding */
}

/* Tighten inner padding slightly since the numbers are removed */
.systems-card-inner {
    padding: 35px 25px !important;
}

/* =========================================
   STRATEGIC DIRECTION ROADMAP SECTION
   ========================================= */
.strategic-roadmap-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #ffffff;
    overflow: hidden;
}

.roadmap-layout-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr; /* Content column is given dominant space layout-wise */
    gap: 75px;
    align-items: stretch; /* Forces image stack column height parameters to snap evenly to text metrics */
}

/* --- Left Column Core Elements --- */
.roadmap-tagline {
    color: var(--brand-emerald, #00875a);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.roadmap-main-title {
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    color: var(--text-main, #1a1e1c);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 20px 0;
}

.roadmap-main-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dim, #5c6660);
    max-width: 680px;
    margin-bottom: 45px;
}

/* --- Vertical Step Track System Container --- */
.vertical-step-track {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 20px;
}

/* Continuous background connector track line */
.vertical-step-track::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 36px;
    width: 2px;
    height: calc(100% - 70px);
    background-color: #e2e8f0;
    z-index: 1;
}

/* Individual Node Stream Panels */
.step-timeline-node {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 35px;
    position: relative;
    z-index: 2;
}

.step-timeline-node:last-child {
    margin-bottom: 0;
}

/* Marker Circle Ring Foundations */
.node-marker-frame {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    transition: all 0.4s ease;
}

.node-number {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    transition: color 0.4s ease;
}

.node-content-panel {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

/* Target Stage Phase Color Parameters */
.node-status {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}

.status-active { color: var(--brand-emerald, #00875a); }
.status-dev { color: #2563eb; }
.status-planned { color: #d97706; }
.status-vision { color: #64748b; }

.node-content-panel h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #1a1e1c);
    margin: 0 0 8px 0;
}

.node-content-panel p {
    font-size: 0.9rem;
    color: var(--text-dim, #5c6660);
    line-height: 1.55;
    margin: 0;
    max-width: 580px;
}

/* --- State Active Node Specific Upgrades --- */
.active-phase .node-marker-frame {
    border-color: var(--brand-emerald, #00875a);
    background-color: var(--brand-emerald, #00875a);
}

.active-phase .node-number {
    color: #ffffff;
}

/* Kinetic Pulse Glow Loop Indicator around Node 1 */
.node-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(0, 135, 90, 0.25);
    animation: timelineGlowPulse 2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes timelineGlowPulse {
    0% { transform: scale(0.95); opacity: 1; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* Hover Interactive Mechanics */
.step-timeline-node:hover .node-marker-frame {
    border-color: var(--brand-mint, #00d27f);
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(0, 210, 127, 0.2);
}

.step-timeline-node:hover .node-number {
    color: var(--brand-mint, #00d27f);
}

.active-phase:hover .node-number {
    color: #ffffff; /* Preserves text readability rule on active marker */
}

/* --- Right Column: Balanced Stacked Media Layout --- */
.roadmap-image-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    height: 100%;
}

.roadmap-media-frame {
    flex: 1;
    width: 100%;
    min-height: 240px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.roadmap-media-frame:nth-child(2) {
    background-color: #0b1521; /* Fallback baseline frame weight color */
}

.roadmap-media-frame:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(0, 135, 90, 0.12);
}

.roadmap-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.roadmap-media-frame:hover img {
    transform: scale(1.04);
}

/* --- Glassmorphic Overlay Box Badge Overlay --- */
.roadmap-glass-indicator {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(11, 21, 33, 0.85); /* Premium matching deep translucent slate fallback overlay */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px 20px;
    z-index: 5;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    transform: translateZ(10px);
    transition: border-color 0.4s ease;
}

.roadmap-media-frame:hover .roadmap-glass-indicator {
    border-color: rgba(0, 210, 127, 0.25);
}

.indicator-header {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--brand-mint, #00d27f);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.indicator-flow-text {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.indicator-flow-text i {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Continuous Fluid Soft Floats */
.float-primary { animation: roadmapSoftFloat 6s ease-in-out infinite; }
.float-secondary { animation: roadmapSoftFloat 8s ease-in-out infinite alternate-reverse; }

@keyframes roadmapSoftFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.roadmap-media-frame:hover.float-primary,
.roadmap-media-frame:hover.float-secondary {
    animation-play-state: paused;
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */
@media (max-width: 1024px) {
    .roadmap-layout-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .roadmap-image-col {
        flex-direction: row; /* Wraps images side by side on tablets */
        height: auto;
    }
    .roadmap-media-frame {
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    .roadmap-image-col {
        flex-direction: column; /* Stack vertically on small phone panels */
    }
    .roadmap-media-frame {
        min-height: 220px;
    }
    .vertical-step-track::before {
        height: calc(100% - 90px); /* Adjust vertical alignment line sizing space safely */
    }
}

@media (max-width: 480px) {
    .step-timeline-node {
        gap: 15px;
    }
    .vertical-step-track {
        padding-left: 5px;
    }
    .vertical-step-track::before {
        left: 21px;
    }
    .roadmap-glass-indicator {
        padding: 12px 15px;
        left: 15px;
        right: 15px;
    }
    .indicator-flow-text {
        font-size: 0.75rem;
    }
}


/* =========================================
   OUR FOCUS AREAS SECTION (DARK 5-COLUMN)
   ========================================= */
.focus-areas-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #060a0f; /* Deep dark slate background from image */
    background-image: radial-gradient(circle at center, rgba(0, 210, 127, 0.03) 0%, transparent 70%);
    overflow: hidden;
}

.focus-header {
    text-align: center;
    margin-bottom: 60px;
}

.focus-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.focus-main-title {
    color: #ffffff !important;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-shadow: none !important;
}

.focus-accent-line {
    width: 50px;
    height: 3px;
    background: var(--brand-emerald, #00875a);
    margin: 0 auto 20px auto;
    border-radius: 3px;
}

.focus-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
}

/* --- 5-Column Grid Layout Engine --- */
.focus-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 clean columns matching image layout */
    gap: 20px;
    align-items: stretch; /* Forces row alignment continuity */
    perspective: 1400px; /* Prepares structural 3D canvas matrix space */
    margin-top: 20px;
}

/* --- The 3D Card Architecture --- */
.focus-3d-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease,
                background-color 0.4s ease;
}

/* --- Fluid Continuous Floating Engine --- */
.float-focus-node {
    animation: focusFluidFloat 6s ease-in-out infinite alternate;
    animation-delay: var(--focus-stagger);
}

@keyframes focusFluidFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

/* Hidden Top Border Edge Pop-up Indicator line */
.focus-3d-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 25px;
    width: 0;
    height: 3px;
    background: var(--brand-mint, #00d27f);
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 0 0 2px 2px;
    z-index: 10;
}

/* Active 3D Mouseover State */
.focus-3d-card:hover {
    animation-play-state: paused; /* Stops fluid float track to yield to 3D matrix space orientation */
    transform: translateZ(25px) translateY(-12px) rotateX(5deg) rotateY(-2deg);
    border-color: rgba(0, 210, 127, 0.25);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 210, 127, 0.06);
}

.focus-3d-card:hover::after {
    width: 50px; /* Slides custom top color bar marker outwards smoothly */
}

/* --- Card Content Structuring --- */
.focus-card-inner {
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 2;
}

.focus-card-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    display: block;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.focus-3d-card:hover .focus-card-num {
    color: var(--brand-mint, #00d27f);
}

/* Icons Matrix */
.focus-card-icon {
    font-size: 1.5rem;
    color: var(--brand-mint, #00d27f);
    margin-bottom: 30px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.focus-3d-card:hover .focus-card-icon {
    transform: scale(1.15) translateZ(15px);
}

/* Titles and Typography blocks */
.focus-card-inner h3 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px 0;
    letter-spacing: -0.01em;
}

.focus-card-inner p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 35px 0;
}

/* Lower Section Labels Array placement metadata indicators */
.focus-card-footer {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: auto; /* Aligns footer label directly to card floor boundary */
    transition: color 0.3s ease;
}

.focus-3d-card:hover .focus-card-footer {
    color: rgba(255, 255, 255, 0.5);
}

/* =========================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES
   ========================================= */
@media (max-width: 1200px) {
    .focus-cards-grid {
        grid-template-columns: repeat(3, 1fr); /* Collapses to clean 3x2 on standard laptops */
        gap: 15px;
    }
    /* Balanced offset for the lower orphaned cards inside the grid layout row */
    .focus-cards-grid .focus-3d-card:nth-child(4),
    .focus-cards-grid .focus-3d-card:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .focus-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 480px) {
    .focus-cards-grid {
        grid-template-columns: 1fr; /* 1 uniform stack on mobile panels */
    }
    .focus-3d-card:hover {
        transform: translateY(-6px); /* Disables X-axis rotation vectors safely on small viewport touches */
    }
}

/* =========================================
   VISUAL STAGES SECTION (3D IMAGE CARDS)
   ========================================= */
.visual-stages-section {
    /* No top padding so it seamlessly attaches to the dark section above it */
    padding: 0 0 clamp(80px, 10vw, 120px) 0; 
    background-color: #060b11; /* Matches previous dark section background */
    overflow: hidden;
}

.visual-stages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    perspective: 1200px; /* Prepares 3D coordinate space */
}

/* --- Base Card Styling --- */
.visual-stage-card {
    background: #0d131a; /* Dark navy/slate base for the label area */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease;
}

/* Continuous Floating Physics */
.float-stage {
    animation: stageFluidFloat 6s ease-in-out infinite alternate;
    animation-delay: var(--stage-delay);
}

@keyframes stageFluidFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

/* 3D Hover Mechanics */
.visual-stage-card:hover {
    animation-play-state: paused;
    transform: translateZ(20px) translateY(-10px) rotateX(4deg) rotateY(-2deg);
    border-color: rgba(0, 210, 127, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 210, 127, 0.1);
}

/* --- Image Frame & Filters --- */
.v-stage-img {
    width: 100%;
    height: 220px; /* Fixed height for consistent panoramic look */
    overflow: hidden;
    position: relative;
    background: #111820;
}

.v-stage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Muted cinematic look matching your reference image */
    filter: grayscale(40%) brightness(0.8); 
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

.visual-stage-card:hover .v-stage-img img {
    transform: scale(1.06);
    /* Bursts into full color and brightness on hover */
    filter: grayscale(0%) brightness(1); 
}

/* --- Bottom Label Bar --- */
.v-stage-label {
    padding: 18px 25px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4); /* Faint slate text matching reference */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.3s ease, background 0.3s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.visual-stage-card:hover .v-stage-label {
    color: var(--brand-mint, #00d27f);
    background: rgba(0, 210, 127, 0.05); /* Very slight green tint on hover */
}

/* =========================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================= */
@media (max-width: 1024px) {
    .visual-stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Centers the 3rd card beautifully on tablet screens */
    .visual-stage-card:nth-child(3) {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .visual-stages-grid {
        grid-template-columns: 1fr;
    }
    .visual-stage-card:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }
    .visual-stage-card:hover {
        transform: translateY(-5px); /* Soften 3D tilt on mobile devices */
    }
    .v-stage-img {
        height: 180px;
    }
}

/* =========================================
   TECHNOLOGY & INFRASTRUCTURE SECTION (3D)
   ========================================= */
.tech-infra-section {
    padding: clamp(80px, 10vw, 120px) 0;
    background-color: #0b1521; /* Deep navy industrial background */
    background-image: radial-gradient(circle at top left, rgba(0, 210, 127, 0.03) 0%, transparent 60%);
    overflow: hidden;
}

.tech-header {
    text-align: center;
    margin-bottom: 60px;
}

.tech-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.tech-title {
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.tech-accent-line {
    width: 60px;
    height: 3px;
    background: var(--brand-emerald, #00875a);
    margin: 0 auto 20px auto;
    border-radius: 3px;
}

.tech-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 4-Column 3D Grid Layout --- */
.tech-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: stretch;
    perspective: 1400px; /* Prepares structural 3D canvas layer */
}

/* Base Card Architecture */
.tech-3d-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s ease,
                background-color 0.4s ease;
}

/* Continuous Floating Physics Matrix */
.float-tech-node {
    animation: techFluidFloat 6s ease-in-out infinite alternate;
    animation-delay: var(--tech-delay);
}

@keyframes techFluidFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

/* Hidden Top Border Edge Pop-up Indicator */
.tech-3d-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 30px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-emerald, #00875a), var(--brand-mint, #00d27f));
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 0 0 3px 3px;
    z-index: 10;
}

/* 3D Kinetic Hover State */
.tech-3d-card:hover {
    animation-play-state: paused;
    transform: translateZ(25px) translateY(-10px) rotateX(4deg) rotateY(-2deg);
    border-color: rgba(0, 210, 127, 0.25);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 210, 127, 0.08);
}

.tech-3d-card:hover::after {
    width: 60px; /* Slides custom top color bar marker outwards smoothly */
}

/* --- Card Content --- */
.tech-card-inner {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tech-icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background-color: rgba(0, 210, 127, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--brand-mint, #00d27f);
    margin-bottom: 25px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s ease, color 0.4s ease;
}

.tech-3d-card:hover .tech-icon-wrapper {
    transform: scale(1.1) translateZ(15px) rotate(-5deg);
    background-color: var(--brand-emerald, #00875a);
    color: #ffffff;
}

.tech-card-inner h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: -0.01em;
}

/* Custom Bullet List */
.tech-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tech-feature-list li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: color 0.3s ease;
}

.tech-3d-card:hover .tech-feature-list li {
    color: rgba(255, 255, 255, 0.8);
}

.tech-feature-list li i {
    color: var(--brand-emerald, #00875a);
    font-size: 0.75rem;
    margin-top: 5px;
}

/* =========================================
   RESPONSIVE OVERRIDES
   ========================================= */
@media (max-width: 1100px) {
    .tech-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 650px) {
    .tech-cards-grid {
        grid-template-columns: 1fr;
    }
    .tech-3d-card:hover {
        transform: translateY(-5px); /* Soften rotation on touch devices */
    }
}

/* =========================================
   SOLUTIONS PAGE: COMPREHENSIVE MOBILE FIXES
   ========================================= */

@media (max-width: 1024px) {
    /* 1. Fix the massive gaps in the Industry sections */
    .ind-sol-grid {
        grid-template-columns: 1fr !important;
        gap: 50px !important; /* Reduced from 100px/70px */
    }

    /* 2. Force consistent "Image First, Text Second" stacking on mobile */
    #logistics .ind-sol-grid,
    #fisheries .ind-sol-grid {
        display: flex;
        flex-direction: column-reverse;
    }

    /* 3. Stop images from stretching wildly when stacked */
    .ind-image-col {
        height: auto !important;
        flex-direction: row !important; /* Put images side-by-side on tablets */
        gap: 20px !important;
    }

    .ind-main-img-wrapper,
    .ind-sec-img-wrapper {
        flex: 1;
        min-height: 250px !important;
        height: 250px !important; /* Lock height for neat tablet row */
    }

    /* 4. Ensure the secondary image is visible on tablets to fill space */
    .ind-sec-img-wrapper {
        display: block !important;
    }
}

@media (max-width: 768px) {
    /* 5. Fix Hero Section (Overrides the inline HTML styles) */
    .hero-static-container {
        height: auto !important;
        padding: 140px 20px 80px !important;
    }
    
    .hero-static-title {
        font-size: 2.2rem !important;
    }
    
    .industry-tags {
        flex-direction: column; /* Stack tags on mobile */
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .industry-tag {
        width: 100%;
        justify-content: center; /* Center icon and text */
        padding: 12px 18px !important;
    }

    /* 6. Fix "How We Think" section spacing */
    .think-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .think-title {
        font-size: 2.2rem !important;
    }
    .think-card {
        padding: 20px 25px !important;
        gap: 15px !important;
    }

    /* 7. Stack Problem/Solution cards neatly */
    .ind-ps-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .ind-card {
        padding: 25px 20px !important;
    }

    /* 8. Scale down titles and tags */
    .ind-title {
        font-size: 2rem !important;
        margin-bottom: 25px !important;
    }
    .ind-tags-group {
        gap: 10px;
    }
    .ind-tag {
        width: 100%; /* Full width tags for easier tapping */
        justify-content: center;
    }
}

@media (max-width: 576px) {
    /* 9. Final tweaks for very small phones */
    .industry-solution-section {
        padding: 60px 15px !important;
    }

    .ind-image-col {
        flex-direction: column !important; /* Stack images vertically on phones */
    }

    .ind-main-img-wrapper,
    .ind-sec-img-wrapper {
        height: 220px !important;
        min-height: 220px !important;
    }

    /* Hide the secondary image entirely on phones to prevent endless scrolling */
    .ind-sec-img-wrapper {
        display: none !important; 
    }
}

/* --- Institutions Auto-Scroll Marquee --- */
.institutions-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.institutions-track {
    display: flex;
    gap: 30px;
    width: max-content;
    /* 25s controls the speed. Lower = faster */
    animation: scroll-institutions 25s linear infinite;
}

/* Pause the scrolling when the user hovers over the cards */
.institutions-track:hover {
    animation-play-state: paused;
}

.institution-card {
    width: 280px; /* Fixed width so the cards don't shrink */
    flex-shrink: 0;
    /* Your existing card styles will still apply perfectly to this class */
}

/* Style the new logos to fit perfectly inside your existing icon circles/boxes */
.institution-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff; /* White background makes logos pop */
}

.institution-icon img {
    width: 95%;   /* Increased from 70% to fill the space */
    height: 95%;  /* Increased from 70% to fill the space */
    object-fit: contain; 
    transform: scale(1.1); /* Adds an extra slight zoom if needed */
}

/* The Infinite Scroll Animation */
@keyframes scroll-institutions {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Scrolls exactly half the width of the track (the 4 original cards + gaps) */
        transform: translateX(calc(-50% - 15px)); 
    }
}

/* --- Modal Action Buttons --- */
.modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.modal-actions button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px; /* Smooth rounded corners like the image */
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Primary Green Button (Matches 'View Catalogue') */
.btn-modal-primary {
    background-color: #00d27f; /* Bright green matching your brand/image */
    color: #ffffff;
    border: 2px solid #00d27f;
    font-weight: 800;
}

.btn-modal-primary:hover {
    background-color: #00b86f;
    border-color: #00b86f;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 210, 127, 0.3);
}

/* Secondary Outline Button (Matches 'Inquire Now') */
.btn-modal-outline {
    background-color: transparent;
    color: var(--text-main, #333); /* Dark text since your modal background is white */
    border: 1px solid var(--text-dim, #888);
    font-weight: 500;
}

.btn-modal-outline:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: var(--text-main, #333);
    transform: translateY(-2px);
}

/* --- Responsive Modal Buttons --- */
@media (max-width: 768px) {
    .modal-actions {
        flex-direction: column;
    }
    .modal-actions button {
        width: 100%;
    }
}
/* =========================================
   B2B SUPPLY SOLUTIONS SECTION
   ========================================= */
.b2b-supply-section {
    padding: 100px 0;
    background-color: var(--bg-dark); /* Replaced navy with your theme's deep forest dark */
    background-image: radial-gradient(circle at center, rgba(0, 210, 127, 0.05) 0%, transparent 60%);
    color: #ffffff;
    text-align: center;
}

.b2b-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.b2b-pill {
    background: rgba(0, 210, 127, 0.1);
    border: 1px solid rgba(0, 210, 127, 0.2);
    color: var(--brand-mint); /* Synced to theme mint */
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.b2b-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.text-highlight-green {
    color: var(--brand-mint); /* Synced to theme mint */
}

.b2b-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin: 0 auto 40px auto;
}

/* --- Features Layout --- */
.b2b-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    margin-bottom: 50px;
}

.b2b-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.b2b-feature i {
    color: var(--brand-mint); /* Synced to theme mint */
    font-size: 1.1rem;
}

/* --- Action Buttons --- */
.b2b-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 60px;
    width: 100%;
}

.btn-b2b-primary {
    background: var(--brand-emerald); /* Synced to theme emerald */
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid var(--brand-emerald);
}

.btn-b2b-primary:hover {
    background: var(--brand-mint); /* Brightens on hover */
    border-color: var(--brand-mint);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 210, 127, 0.2);
    color: var(--bg-dark); /* Dark text for contrast on bright hover */
}

.btn-b2b-outline {
    background: transparent;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-b2b-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* --- Bottom Certifications --- */
.b2b-certifications {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.cert-item {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}

.cert-item i {
    color: var(--brand-mint); /* Synced to theme mint */
    font-size: 1.1rem;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .b2b-supply-section {
        padding: 80px 20px;
    }
    .b2b-actions {
        flex-direction: column;
    }
    .btn-b2b-primary, .btn-b2b-outline {
        width: 100%;
        justify-content: center;
    }
    .b2b-features {
        flex-direction: column;
        align-items: flex-start;
        width: fit-content;
        margin: 0 auto 40px auto;
    }
    .b2b-certifications {
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }
}/* =========================================
   PREMIUM STATS & CTA SECTION
   ========================================= */
.premium-stats-cta {
    background-color: #060b11; /* Matches your existing deep dark theme */
    background-image: radial-gradient(circle at 50% 100%, rgba(0, 210, 127, 0.08) 0%, transparent 70%);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Top Stats Bar */
.stats-top-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px 0;
}

.stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-box {
    text-align: center;
    flex: 1;
    min-width: 150px;
}

.stat-number, .stat-plus, .stat-text, .stat-icon {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--brand-mint, #00d27f);
    display: inline-block;
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 0 0 25px rgba(0, 210, 127, 0.25);
    font-family: 'Inter', sans-serif;
}

.stat-icon i {
    font-size: clamp(2rem, 3.5vw, 2.8rem); /* Slightly smaller than text */
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.stat-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* Bottom CTA Content */
.cta-bottom-content {
    padding: clamp(80px, 10vw, 120px) 0;
    text-align: center;
}

.cta-pre-title {
    color: var(--brand-mint, #00d27f);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 25px;
}

.cta-main-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 35px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.highlight-mint {
    color: var(--brand-mint, #00d27f);
}

.cta-desc {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 750px;
    margin: 0 auto 50px auto;
}

/* Custom Action Buttons */
.cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cta-actions a {
    min-width: 220px;
    justify-content: center;
    border-radius: 8px; /* Sharper corners to match image */
}

/* New Blue Button matching the image layout */
.btn-cta-blue {
    background: #25406a; /* Deep professional blue */
    color: #ffffff;
    border: 1px solid transparent;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-cta-blue:hover {
    background: #2c4a7c;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 64, 106, 0.3);
}

/* Mobile Overrides */
@media (max-width: 992px) {
    .stat-divider { display: none; }
    .stats-grid { gap: 40px; }
    .stat-box { min-width: 45%; }
}

@media (max-width: 768px) {
    .cta-actions { flex-direction: column; width: 100%; align-items: center; gap: 15px;}
    .cta-actions a { width: 100%; max-width: 350px; }
}

@media (max-width: 576px) {
    .stat-box { min-width: 100%; }
    .cta-main-title { font-size: 2.2rem; }
    .cta-desc { font-size: 1rem; padding: 0 15px; }
}

/* --- Global Responsive Foundation --- */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrollbar */
    -webkit-text-size-adjust: 100%; /* Prevents text inflation on mobile */
}

/* --- Fluid Container System --- */
.container, .mission-wrapper, .products-container, .fluid-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* --- Grid System Cleanup --- */
/* This handles 1 column on mobile, 2 on tablets, and 4+ on desktop automatically */
.responsive-grid {
    display: grid;
    gap: clamp(15px, 3vw, 30px);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --- Mobile-Specific Layout Overrides --- */
@media (max-width: 992px) {
    /* Stack hero content */
    .hero-banner {
        min-height: 80vh;
        padding-top: 100px;
    }

    /* Force all grid sections to stack vertically on tablets/phones */
    .services-grid, .product-grid, .team-grid, .delivery-grid {
        grid-template-columns: 1fr !important;
    }

    /* Prevent overly large text on tablets */
    h1, .hero-title, .cta-title {
        font-size: clamp(2rem, 5vw, 2.5rem) !important;
    }
}

@media (max-width: 576px) {
    /* Tighter padding for small phone screens */
    section {
        padding: 60px 15px !important;
    }

    /* Ensure buttons fill the width for better mobile interaction */
    .btn-nav-primary, .btn-primary-green, .cta-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Adjust navbar height for mobile */
    header {
        padding: 10px 0;
    }
}


/* --- B2B Supply Solutions Section Responsive Fixes --- */

.b2b-supply-section {
    padding: clamp(60px, 8vw, 100px) 20px; /* Added side padding for mobile */
    background-color: var(--bg-dark);
    color: #ffffff;
    text-align: center;
}

.b2b-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Feature grid: Centered and responsive */
.b2b-features {
    display: grid;
    /* This creates a 2-column grid on mobile, 4-column on desktop */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
    width: 100%;
    max-width: 800px;
}

.b2b-feature {
    display: flex;
    align-items: center;
    justify-content: center; /* Ensures text stays centered in the column */
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Responsive Button Wrapper */
.b2b-actions {
    display: flex;
    justify-content: center; /* Centers buttons horizontally */
    align-items: center;
    gap: 15px; /* Spacing between buttons */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    margin-bottom: 60px;
    width: 100%;
}

/* Base button styles */
.b2b-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; /* Keeps button text on one line */
    min-width: 200px; /* Ensures buttons have a consistent look */
}

/* Mobile & Tablet Overrides */
@media (max-width: 600px) {
    .b2b-actions {
        flex-direction: column; /* Force vertical stacking on phones */
        align-items: center;
        gap: 12px;
    }

    .b2b-actions a {
        width: 100%; /* Force full-width buttons for thumb-friendly tapping */
        max-width: 320px; /* Keeps them from looking too stretched */
    }
}
/* Certifications: Grid layout for better mobile alignment */
.b2b-certifications {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.cert-item {
    justify-content: center; /* Centers text/icon in grid cell */
    font-size: 0.85rem;
}

/* Tablet & Mobile Overrides */
@media (max-width: 768px) {
    .b2b-title {
        font-size: 1.8rem; /* Smaller title for better mobile fit */
    }

    .b2b-features {
        grid-template-columns: 1fr 1fr; /* Force 2 columns on tablets */
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .b2b-features {
        grid-template-columns: 1fr; /* Force 1 column on small phones */
    }
    
    .b2b-actions {
        flex-direction: column; /* Stack buttons vertically */
    }
    
    .b2b-actions a {
        width: 100%;
    }
}/* Ensure the actions container manages button flow gracefully */
.b2b-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* CRITICAL: Allows buttons to wrap to the next line on small screens */
    margin-bottom: 60px;
    width: 100%;
    padding: 0 10px; /* Prevents buttons from touching screen edges */
    box-sizing: border-box;
}

/* Ensure buttons have uniform behavior */
.b2b-actions a {
    flex: 0 1 auto; /* Allows buttons to maintain their size or shrink if needed */
    min-width: 220px; /* Ensures buttons remain readable and clickable */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; /* Keeps button text on one line */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .b2b-actions {
        flex-direction: column; /* Force vertical stacking on small phones */
        align-items: center;
        gap: 12px;
    }

    .b2b-actions a {
        width: 100%; /* Force full width on phones */
        max-width: 320px; /* Keep them from being comically wide */
        min-width: unset; /* Reset min-width for mobile */
    }
}.b2b-actions {
    display: flex;
    justify-content: center; /* This centers buttons horizontally */
    align-items: center;     /* This centers buttons vertically if they have different heights */
    gap: 15px;
    flex-wrap: wrap; 
    margin-bottom: 60px;
    width: 100%;
}

/* Ensure individual buttons do not have left/right margins that push them off-center */
.b2b-actions a {
    margin: 0 !important; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: Stack them in the center */
@media (max-width: 600px) {
    .b2b-actions {
        flex-direction: column;
        align-items: center; /* This keeps stacked buttons centered horizontally */
    }
}
/* --- Material Intelligence Responsive Fixes --- */

/* Ensure the main container handles the flow */
.mi-flow-container {
    width: 100%;
    padding: clamp(30px, 5vw, 60px) 20px;
}

/* Base horizontal line structure */
.mi-trunk-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* Tablet/Desktop: Maintain standard flow */
@media (min-width: 993px) {
    .mi-trunk-line {
        flex-wrap: nowrap; /* Forces them to stay in one line on large screens */
    }
}

/* Tablet & Mobile: Stack the flow vertically */
@media (max-width: 992px) {
    .mi-trunk-line {
        flex-direction: column; /* Stacks everything vertically */
        gap: 15px;
    }

    /* Rotate arrows to point downwards */
    .mi-arrow {
        transform: rotate(90deg);
        margin: 5px 0;
    }

    /* Adjust the "OR" branch logic for mobile */
    .mi-node {
        width: 100% !important;
        max-width: 300px;
    }
    
    /* Ensure the "OR" separator fits in the vertical stack */
    .mi-node + div {
        transform: rotate(90deg); /* Rotate the "OR" badge */
        margin: 10px 0;
    }
}

/* Fine-tuning for tiny mobile screens */
@media (max-width: 480px) {
    .mi-header .title {
        font-size: 1.8rem;
    }
    .mi-info-banner {
        padding: 15px;
        font-size: 0.85rem;
        text-align: center;
    }
}/* Ensure the text container is responsive */
.hero-text-col {
    max-width: 750px;
}

/* Update badges to use a flexible grid instead of fixed basis */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 60px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-banner {
        text-align: center;
    }
    
    .hero-text-col {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-badges {
        justify-content: center; /* Centers badges on tablets/mobile */
        margin-top: 40px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2.2rem !important; /* Smaller title for narrow screens */
    }
    
    .hero-badges {
        gap: 10px; /* Tighter gap for mobile */
    }
    
    .badge-item {
        font-size: 0.75rem; /* Slightly smaller text for mobile */
        padding: 8px 12px;
    }
}/* --- Premium Stats & CTA Responsive Overrides --- */

@media (max-width: 992px) {
    /* Stack the stats box on tablets/medium screens */
    .stats-grid { 
        gap: 40px; 
        flex-wrap: wrap; 
        justify-content: center;
    }
    
    .stat-box { 
        min-width: 40%; /* Allows 2 items per row */
    }
    
    .stat-divider { 
        display: none; /* Hide dividers for cleaner stacking */
    }
}

@media (max-width: 768px) {
    /* CTA Content adjustments */
    .cta-bottom-content {
        padding: 60px 20px;
    }

    .cta-actions { 
        flex-direction: column; 
        width: 100%; 
        align-items: center; 
        gap: 15px;
    }

    .cta-actions a { 
        width: 100%; 
        max-width: 350px; /* Keeps buttons contained */
    }

    .cta-main-title { 
        font-size: 2.2rem !important; 
    }
}

@media (max-width: 576px) {
    /* Final mobile stacking for stats */
    .stat-box { 
        min-width: 100%; /* Force 1 item per row on phones */
    }

    .cta-desc { 
        font-size: 1rem; 
        padding: 0 15px; 
    }
}/* --- Premium Stats & CTA Responsive Overrides --- */

/* 1. Stats Grid: Responsive Layout */
@media (max-width: 992px) {
    .stats-grid { 
        gap: 30px; 
        flex-wrap: wrap; 
        justify-content: center;
    }
    
    .stat-box { 
        min-width: 40%; /* 2 items per row on tablets */
    }
    
    .stat-divider { 
        display: none; /* Hide dividers to prevent layout clutter */
    }
}

@media (max-width: 576px) {
    .stat-box { 
        min-width: 100%; /* 1 item per row on phones */
    }
}

/* 2. CTA Actions: Centering & Stacking Fix */
.cta-actions {
    display: flex;
    justify-content: center; /* Centering */
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Allows buttons to wrap instead of overflowing */
    width: 100%;
}

.cta-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Centers icon/text inside */
    min-width: 220px;
    padding: 16px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- Mobile Stacking for Buttons --- */
@media (max-width: 768px) {
    .cta-actions { 
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;    /* Perfect horizontal centering */
        gap: 12px;
    }

    .cta-actions a { 
        width: 100%; 
        max-width: 320px; /* Comfortable width on mobile */
        min-width: unset;
    }

    .cta-main-title { 
        font-size: 2.2rem !important; 
    }
    
    .cta-desc { 
        font-size: 1rem !important; 
        padding: 0 15px; 
    }
}/* --- Innovation Ecosystem Responsive Fixes --- */

/* Tablet & Mobile: Stack everything vertically */
@media (max-width: 992px) {
    .ecosystem-section {
        grid-template-columns: 1fr !important; /* Force single column */
        gap: 40px !important;
        text-align: center;
    }

    /* Center the text elements */
    .ecosystem-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Align the numbered list to the left, but keep it centered in the column */
    .ecosystem-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Keeps bullets aligned left */
        max-width: 400px;        /* Limits list width for better reading */
        margin: 0 auto 30px auto;
    }

    /* Adjust diagram for mobile */
    .ecosystem-diagram-view {
        order: -1; /* Moves image above text on mobile */
    }
    
    .ecosystem-diagram-view img {
        max-width: 100%;
        border-radius: 20px !important; /* Slightly smaller radius on mobile */
    }
}

/* Mobile specific font scaling */
@media (max-width: 576px) {
    .ecosystem-text .title {
        font-size: 1.8rem !important;
    }
    
    .ecosystem-list li {
        margin-bottom: 15px !important;
    }
}