/* =========================================================
   GLOBAL BRAND MASTER (Uniform across all pages)
   ========================================================= */
:root {
    /* Brand Foundation */
    --bg-dark: #08111f;
    --bg-panel: rgba(15, 23, 42, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.03); /* Added for About/Career cards */
     --border-color: rgba(255, 255, 255, 0.1); /* Added for consistency */
    
    /* Background Gradients */
    --bg-gradient: linear-gradient(135deg, #08111f 0%, #050a14 100%);

     
    /* Accents & Gold */
    --accent-gold: #d4af37; 
    --accent-primary: #fbbf24;
    --accent-blue: #3b82f6;
    --gold-gradient: linear-gradient(135deg, #8b6914 0%, #cfa93a 25%, #f7e27c 50%, #d4af37 75%, #7a5c10 100%);
    
    /* Data UI tokens */
    --data-accent: #3b82f6;
    --data-glow: rgba(59, 130, 246, 0.2);
    
    --z-bg:1;
    --z-content:10;
    --z-header:100;
    --z-dropdown:200;
    --z-modal:500;
    
    /* Typography */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Effects & Borders */
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --shadow-premium: 0 20px 40px rgba(0,0,0,0.5);
    
    --container-width:1200px;
}


body, main, section, div {
    color: var(--text-primary);
}


/* 1. MASTER RESET: Authority for all elements */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box !important; 
}

html, body {
    overflow-x: hidden; /* This hides the horizontal scrollbar */
    width: 100%;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box !important;
    max-width: 100vw !important; /* Forces all elements to fit the viewport */
}

/* 1. Reset everything to clear legacy backgrounds */
.hero1, .ml-dashboard, .main-header, .qh-dynamic-businesses {
    background-color: transparent !important; /* Force children to be transparent */
}

/* 2. Set the Body as the sole background authority */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    background-color: #08111f !important;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        var(--bg-gradient) !important;
    background-size: 60px 60px, cover;
    background-attachment: fixed !important;
}

main {
   flex: 1 !important; /* This is the key: it consumes all empty space */
    width: 100%;
    display: block;
    overflow-y: visible;
}

/* =========================================================
   MEDIA
========================================================= */

img {

    max-width: 100%;

    display: block;
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection {

    background: rgba(251, 191, 36, 0.2);

    color: #ffffff;
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {

    outline: 2px solid #fbbf24;

    outline-offset: 3px;
}

/* Global Mouse Light Effect */
.mouse-light {
     position: fixed; /*Ensures it floats over the entire viewport */
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 70%);
    pointer-events: none; /* Crucial: Allows clicking through the light */
    z-index: 9999; /* Forces it to stay on top of everything */
    transform: translate(-50%, -50%); /* Centers the bubble on your cursor */
    will-change: transform; /* Optimizes browser performance */
}

.video-background, .particles, .hero-particles {
    pointer-events: none !important; /* Stops these from stealing clicks */
}


.tech-panel {
    background: rgba(15, 23, 42, 0.8); /* Dark Semi-transparent */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Unified Card/Panel Style */
.panel, .about-card {
    background: var(--bg-panel) !important;
    border: var(--glass-border) !important;
    backdrop-filter: blur(12px);
    border-radius: 18px;
}

.container,
.main-layout,
.about-layout,
.insights-layout,
.page-container {
    width: min(1200px, 100%);
    margin: 0 auto;
    padding-inline: 14px;
}


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

header {
    /* Required for sticky behavior */
    position: sticky; 
    top: 0;           /* This tells the browser to pin it to the very top */
    
    /* Layout */
    width: 100%;
    z-index: 1000;    /* Ensures it stays above all other page content */
    
    /* Aesthetics (Keep these to maintain your design) */
    background: rgba(11, 17, 32, 0.92);
    backdrop-filter: blur(12px);
    
    /* The "Etched Glass" border we applied earlier */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}



#header-placeholder{
    min-height: 60px; /* Set this to your header's actual height */
    width: 100%;
    background: #0f172a; /* Same color as your header background */
     display:block !important;
}

header,
.main-header,
.main-nav{
    margin:0 !important;
    padding-top:0;
    padding-bottom:0;
}


/* =========================================
   HERO SECTION  27.05.2026
========================================= */

.hero-left {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-badge {
    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    border-radius: 999px;

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

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

    backdrop-filter: blur(12px);

    font-size: 13px;
    letter-spacing: 0.4px;

    margin-bottom: 12px;

    color: #dbeafe;
}

.hero-title {
      font-size:58px;
    line-height:1;
    font-weight: 800;
    max-width: 720px;
    margin-bottom: 12px;
}

.typing-text {
    background: linear-gradient(
        90deg,
        #ffffff,
        #93c5fd
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 620px;

    font-size: 18px;
    line-height: 1.9;

    color: var(--text-secondary);

    margin-bottom: 20px;
}

/* BLUE LIGHT */

.hero::before {

    content: "";

    position: absolute;

    top: -200px;
    left: -200px;

    width: 600px;
    height: 600px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,0.22) 0%,
            transparent 70%
        );

    filter: blur(40px);

    pointer-events: none;
}


/* =========================================
   HERO ACTIONS - PREMIUM GOLD STYLE
========================================= */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 50px;
}

/* =========================================
   STATS PANEL
========================================= */

.stats-panel {
    display: flex;
    flex-wrap: wrap;

    gap: 20px;
}

.stat-box {

    min-width: 140px;

   flex:1 1 180px;
    min-width:180px;
    padding: 16px;

    border-radius: 24px;

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

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

    backdrop-filter: blur(20px);

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

    transition: 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-4px);
}

.stat-box h3 {
    font-size: 34px;
    margin-bottom: 8px;

    color: #ffffff;
}

.stat-box p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* =========================================
   RIGHT DASHBOARD
========================================= */

.hero-right {
    position: relative;
}

.dashboard-panel {
    min-height: 430px;
    position: relative;
    border-radius: 36px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        );

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

    backdrop-filter: blur(22px);

    box-shadow:
        0 20px 80px rgba(0, 0, 0, 0.45);
}

/* =========================================
   GRAPH LINES
========================================= */

.graph-lines {
    position: absolute;
    inset: 0;
}

.graph-lines svg {
    width: 100%;
    height: 100%;
}

.graph-path {
    fill: none;

    stroke: #3b82f6;

    stroke-width: 4;

    stroke-linecap: round;

    filter: drop-shadow(0 0 12px #3b82f6);

    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;

    animation: drawGraph 5s linear infinite;
}

@keyframes drawGraph {
    0% {
        stroke-dashoffset: 1400;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

/* =========================================
   FLOATING CARDS
========================================= */

.floating-card {
    position: absolute;

    min-width: 180px;

    padding: 20px 22px;

    border-radius: 22px;

    background: rgba(15, 23, 42, 0.75);

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

    backdrop-filter: blur(18px);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35);

    animation: floatCard 5s ease-in-out infinite;
}

.floating-card span {
    font-size: 13px;
    color: #cbd5e1;
}

.floating-card strong {
    display: block;

    margin-top: 10px;

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

    color: #ffffff;
}

/* CARD POSITIONS */

.card-1 {
    top: 70px;
    left: 40px;
}

.card-2 {
    top: 210px;
    right: 35px;

    animation-delay: 1s;
}

.card-3 {
    bottom: 70px;
    left: 80px;

    animation-delay: 2s;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }
}


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

.grid-bg {
    position: absolute;
    inset: 0;

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

    background-size: 60px 60px;

    z-index: 0;
}


/* =========================
   BIO SECTION
========================= */

.bio-section {
    width: 100%;
    padding: 60px 40px;
    margin: 60px auto;
    border-radius: 18px;

    background: var(--glass-bg);
    border: 1px solid var(--border-color);
}

.bio-flex {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.avatar-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;

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

     background: var(--gold-gradient);
    color: #111;
    font-weight: 800;
}

/* =========================================
   CONTACT & LAYOUT CLEANUP
   ========================================= */

.contact-master-panel {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 5%;
}

.form-panel {
    /* 1. Fix the syntax error */
    /* Ensure it behaves naturally */
    
    /* 2. Height and Overflow fix for the scrollbar */
    overflow-y: visible !important; 
    height: auto !important;
    
    /* 3. Spacing Control */
    padding: 20px !important; /* Added 20px back; 0 padding might break form input spacing */
    margin-top: 0 !important; 
    
    /* 4. Alignment */
    align-self: start !important; 
}


.form-panel textarea {
    min-height: 150px; /* Reduce from whatever it is currently set to */
    resize: vertical;
}
/* Ensure the title inside the form panel doesn't have a huge top margin */
.form-panel h3 {
    margin-top: 0 !important;
}
.form-panel p {
    margin-top: 0 !important;
     margin-bottom: 10px !important;
}


/* Ensure the video doesn't cover your background grid */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Pushes the video behind the body */
    pointer-events: none;
    overflow: hidden;
}

/* Make the overlay transparent so the Master Grid shows through */
.video-overlay {
    background: rgba(8, 17, 31, 0.4); /* Reduced opacity from 0.9 to 0.4 */
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* =========================================================
MAIN LAYOUT
========================================================= */

.main-layout {
       margin: 0 auto;
    padding: 0 24px 80px;
    width: 100%; /* Ensure it fills available space up to 1200px */
}

/* If this class is on your Hero, override it like this: */
.hero.main-layout {
      padding: 0;
}


.article-body {
    width: 100%;
}


/* add ons only */

.nav-container {
    height: 60px;
    padding: 0 40px;
}



.brand-title-area {
    padding: 30px 20px 20px 20px;
}

.brand-title-area h1 {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.brand-title-area p {
    font-size: 0.8rem;
    margin-top: 2px;
}

/* =========================================================
   Surgical Override - Place this below your ROOT variables
   ========================================================= */




.hero-left, .hero-right {
    width: 100% !important;
    display: block !important;
}


/* adding now about, career,busness */

.page-container {
    max-width: 1200px;
    margin: 80px auto; /* Adds breathing room from header/footer */
    padding: 0 20px;
}

/* =========================================
   ABOUT PAGE LAYOUT
   ========================================= */

.about-layout {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.about-panel {
    width: 100%;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.about-card {
    padding: 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

/* =========================================
   INSIGHTS PAGE LAYOUT
   ========================================= */
.container-insights {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    min-width: 320px;
}
.insights-layout {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 20px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.insight-panel h2 {
    font-size: 2rem;
    color: var(--text-white);
    margin-bottom: 1rem;
}

.insight-panel > p {
    color: var(--text-muted);
    max-width: 600px;
    line-height: 1.6;
}

/* Grid Layout */
.insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Base Card Style - High-Tech Glassmorphism */
.insight-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}

/* Hover Interaction - Subtle Glow & Elevation */
.insight-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background: rgba(30, 41, 59, 0.6);
}

/* Text & Typography */
.insight-card h3 {
    color: var(--accent-gold);
    font-size: 1.25rem;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

/* Link List Styling */
.insight-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-card ul li {
    margin: 0;
    padding: 0;
}

.insight-card ul li a {
    display: flex;
    align-items: center;
    padding: 8px 0; /* Increase the hit area for fingers/mouse */
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s ease;
}
.insight-card ul li a:hover {
    color: var(--accent-gold);
}

.insight-card ul li a::before {
    content: "→";
    margin-right: 10px;
    color: var(--accent-gold);
    font-weight: bold;
}

/* Careers html.*/


.content-panel {
    margin-bottom: 30px;
    padding: 10px;
}


/* Ensure the grid inside your career sections aligns */

.message-box {
    margin: 20px; /* Ensures it doesn't touch the edges of a phone screen */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 10px;
       border: 1px solid rgba(255, 255, 255, 0.1);
}
.container-contact {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
     overflow: visible;
    position: relative;
    z-index: 1; /* Keep this low so the nav stays on top */
}
.contact-card:hover {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--accent-primary);
}

.contact-icon {
    font-size: 1.5rem; /* Makes the emoji/icon stand out */
}

.contact-content h5 {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.contact-content p {
    margin: 2px 0 0 0;
}

/* Reset the cards so they stack properly */
.info-panel {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between each card */
    width: 100%;
}

.contact-card {
    display: flex !important;
    align-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* Fix the content inside the card */
.contact-content {
    margin-left: 15px; /* Adds space between icon and text */
}

/* Ensure the grid respects the width */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Splits form and info side-by-side */
    gap: 50px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 5%;
}


/* Find your video-background or particles and add this: */

.ticker-and-news-section {
     display: flex;
    flex-direction: column;

    width: 100%;

    margin-top:30px;
     margin-bottom:20px;
    padding: 0;
}


.newsletter-container {
    display: flex;
    justify-content: flex-end; /* This forces the content to the right */
    width: 100%;
}



/*  changes on 27.05  */

/* 1. The wrapper that handles the 30% layout slot */

.brand-slot {
    flex: 0 0 30%;
    display: flex;
    justify-content: flex-start; /* Pins the logo to the left side */
    align-items: center;
}


/* =========================================
   PERFECT HEADER ALIGNMENT
========================================= */

.top-hero-bar {

    text-align: center !important;
    gap: 12px !important;
   grid-template-columns: 120px 1fr auto !important;
       display: grid !important;
  padding-right: 4px !important;
    align-items: center;
    width: 100%;
    padding: 0 12px 0 20px !important;
}

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

.top-left-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 250px;

    height: auto;

    overflow: hidden;
}

.top-left-logo span {

    color: var(--accent-primary);
}

.logo-area {
     display: flex;
    align-items: center;
} 


/* 1. Scale the container and internal elements */
.brand-container {
   display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* Changed to transparent as you requested */
    background: transparent !important; 
    border-radius: 7px !important;
    
    /* Padding: Adjusted for the image's edges */
    padding: 2px 4px !important; 
    
    width: auto !important; 
    min-width: 38px !important;
    margin-top: 5px;
    
    /* Golden Outline */
    border: .8px solid #d4af37 !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2) !important;
    
}


/* Restore proper logo size */
.brand-logo {
  width: 28px !important;    /* Adjust this width to fit nicely */
    height: auto !important;
    display: block !important; /* Removes default image spacing */
    margin: 0 !important;
    
    /* Ensures the image doesn't look blurry */
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges
}


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

.top-right-action {
    justify-self: end !important;
    margin-left: auto !important;
    
    /* Increase padding-right to 15px if the button feels too close to the edge */
    padding-right: 15px !important; 
    
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    z-index: 5;
}

.logo-area.brand-container a, 
.brand-container a {
    text-decoration: none !important;
}


/* =========================================================
   CENTER BRANDING: FINALIZED LAYOUT
   ========================================================= */

.top-center-branding {
    flex: 1; 
    text-align: center;
    color: white;
    display: block !important; /* Ensure it is always visible */
}

.top-center-branding h1 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 1.3rem;
    margin: 0;
}

.top-center-branding p {
    font-family: 'Inter', sans-serif;
    font-size: 0.70rem; /* Slightly smaller for a more refined look */
    font-weight: 600;   /* Medium-bold to add presence to small text */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.15em; /* Increased spacing makes uppercase text elegant */
    opacity: 0.95;
    line-height: 1;     /* Ensures tight vertical alignment */
    transition: opacity 0.3s ease;
}
.top-center-branding p:hover {
    opacity: 1;
    cursor: default;
}
    
/* NEXT BLOCK FIXING NAV MENU DROP DOWN */

.mega-link {
    text-decoration: none !important;
    color: inherit !important; /* Forces the link to match your H3 styling */
    transition: color 0.3s ease !important;
}

.mega-link:hover {
    color: #d4af37 !important; /* Gold hover effect consistent with your CTA */
}

/*  working block of 28.05  */

/* =========================================================
   FIXED NAVIGATION LAYOUT (Consolidated)
   ========================================================= */
.nav-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    /* FIX: Ensure it doesn't push width */
    width: 100%;
    max-width: 100%; 
    /* Keep your gap, but use a more flexible one */
    gap: 20px; 
    flex-wrap: wrap; /* Allows items to wrap instead of pushing width */
}

/* 3. Each Menu Item (Parent) */
.menu-item { 
    position: relative; 
}

/* 4. Top-level Link Styling */
.nav-list > li > a {
    padding: 3px 0 !important;
    font-size: 0.83rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    
    /* CHANGE THIS COLOR for the main menu */
    color: #dbe4f0; 
    
    display: block;
    transition: color 0.2s ease;
}
.nav-list > li > a:hover {
     color: #fbbf24;
}

/* 5. Dropdown Container (Must NOT be flex) */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 200px;
    padding: 10px 0;
    
    /* CHANGE THIS COLOR for dropdown background */
    background: #0f172a; 
    
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    z-index: 1100;
}

/* 6. Trigger on Hover */
.menu-item:hover > .dropdown {
    display: block; /* Show dropdown */
}

/* 7. Dropdown Links (Stacked Vertically) */
.dropdown li {
    display: block; /* Forces vertical stacking */
    width: 100%;
}

.dropdown li a {
   display: block;
    padding: 7px 18.4px;
    
    /* CHANGE THIS COLOR for dropdown text */
    color: #cbd5e1; 
    
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.dropdown li a:hover {
    /* CHANGE THIS COLOR for dropdown hover background */
    background: rgba(255, 255, 255, 0.05);
    
    /* CHANGE THIS COLOR for dropdown hover text */
    color: #fbbf24;
}



/* Merged Hero CSS */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding:15px 30px 0;

    box-sizing: border-box;
    overflow-x: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at top left,
            rgba(37,99,235,0.16) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(15,23,42,0.95) 0%,
            rgba(2,6,23,1) 55%
        ),

        linear-gradient(
            135deg,
            #050b18 0%,
            #071120 30%,
            #081528 60%,
            #030712 100%
        );
}



/* 2. Unified Hero Control */
.hero > :first-child {
    margin-top: 0 !important; 
    padding-top: 0 !important;
}

 

/* 1. Relative Alignment (Keeps it in the page flow)  29.05  */

.cta-newsletter-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
    gap: 35px;
    /* Reduced top and bottom padding from 30px to 24px */
    padding: 20px 45px; 
    box-sizing: border-box;
    margin-left: 15px;
    
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.4);
}

/* LEFT SIDE */

.bottom-cta {

    width: 100%;

    max-width: 650px;

    justify-self: start;

    text-align: left;

    padding: 0;
      transform: translateX(-40px);
}



/* =========================================
   TICKER STRIP
========================================= */

.ticker-wrap {
    width: 100%;
    margin: 0 !important;   /* Reset margin */
    overflow: hidden;
    background: rgba(6,12,28,0.95);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 9px 0;
}

/* MOVING TRACK */

.ticker-track {

    display: flex;

    white-space: nowrap;

    /* REDUCED GAP */
    gap: 55px;

    animation: ticker-scroll 20s linear infinite;

    will-change: transform;
}

/* ANIMATION */

@keyframes ticker-scroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* HOVER PAUSE */

.ticker-wrap:hover .ticker-track {

    animation-play-state: paused;
}

/* TEXT */

.ticker-track span {

    /* REDUCED SIZE */
    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;

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

    flex-shrink: 0;
}

.insight-card ul li a {
    display: inline-block;
    padding: 8px 16px;
    margin: 5px 0;
    background: rgba(255, 255, 255, 0.03);     /* Subtle glass background */
    border: var(--glass-border);
    border-radius: 8px;
     color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.insight-card ul li a:hover {
    background: var(--accent-gold);
     color: var(--accent-gold);          /* Dark text for gold background */
}


/* Clean icon styling */
.icon-placeholder {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.5), transparent);
    border: 1px solid var(--accent-gold);
    border-radius: 4px;
    transform: rotate(45deg); /* Turns the square into a diamond */
    margin-right: 15px;
    vertical-align: middle;
}
/* Add a hover effect to make it interactive */
.icon-placeholder:hover {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--accent-gold);
}
/* System Status & Bar */
.system-status { color: var(--data-accent); font-size: 0.7rem; }
.enterprise-title { font-family: var(--font-mono); color: white; margin: 10px 0; }
.progress-bar { height: 4px; background: #1e293b; width: 100%; margin-top:10px; }
.progress-fill { width: 100%; height: 100%; background: var(--data-accent); box-shadow: 0 0 10px var(--data-accent); }

/* Mosaic Header Fix */
.section-header-block { text-align: center; margin-bottom: 60px; padding-top: 5px; }
.section-header-block h3 { font-size: 2rem; color: var(--text-primary); }
.section-header-block p { color: var(--text-secondary); max-width: 600px; margin: 10px auto; }



/* data services & digital marketing css 29.05 */

.qh-dynamic-services{
    position:relative;
    width:100%;
    padding:10px 3%;
    overflow:hidden;
}

.qh-dynamic-businesses{    /* marketing page */
    position: relative;
    width: 100%;
    padding: 10px 3%;
    overflow: hidden;
}

/* Container for the text block combine */

/* Apply this to your root or main wrapper to force consistency */
body, .qh-mini-title, .qh-description, .qh-service-item {
    font-family: 'Inter', system-ui, -apple-system, sans-serif; /* Update 'Inter' to your site's font */
}

.qh-mini-title p {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    font-size: 0.75rem;
     color: var(--text-white);
    margin-bottom: 10px;
    font-family: inherit; /* Inherits the site font */
}

.qh-mini-title h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-white);
    margin: 0;
    line-height: 1.2;
    font-family: inherit; /* Inherits the site font */
}

.qh-description {
    line-height: 1.7;
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
    font-family: inherit; /* Inherits the site font */
}

.qh-services-wrapper {
    animation: fadeIn 1s ease-out;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    align-items: start !important;
    position: relative;
    /* Alignment */
    align-items: start !important; /* Keeps the sticky panel at the top */
    min-height: 600px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.qh-businesses-wrapper {
    animation: fadeIn 1s ease-out;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    align-items: start !important;
    position: relative;
    /* Alignment */
    align-items: start !important; /* Keeps the sticky panel at the top */
    min-height: 600px;

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

/* LEFT PANEL CONTAINER */
/* LEFT PANEL CONTAINER */
.qh-left-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* SERVICE LIST */
.qh-service-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* SERVICE ITEM - Using your specific theme variables */
.qh-service-item {
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    background: var(--bg-panel); 
    padding: 22px 28px;
    border-radius: 16px;
    cursor: pointer;
    color: #94a3b8; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Subtle Gold Glow */
.qh-service-item:hover {
    transform: translateX(6px);
    border-color: var(--accent-gold);
    background: rgba(15, 23, 42, 0.8);
}

/* Active State: Premium Gold Accent */
.qh-service-item.active {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.05); /* Slight gold tint */
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* The Gold Accent Indicator */
.qh-service-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    /* Using your gold gradient for a high-end feel */
    background: var(--gold-gradient);
    border-radius: 0 4px 4px 0;
}


/* RIGHT PANEL CONTAINER for marketing and data page */
.qh-right-panel {
    position: relative; /* Changed to relative so children align properly */
    height: 460px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* This keeps elements stacked vertically */
}

/* Let the canvas grow, but don't let it cover the text */
#qhDataCanvas, #qhMarketingCanvas {
    width: 100%;
    height: 380px;
    display: block;      /* Ensure it's not inline */
    background: #0f172a; /* Ensure the background matches your drawBase color */
}

.qh-visual-overlay {
    height: 80px; /* Fixed height for text area */
    background: rgba(8, 17, 31, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;     /* Horizontal center */
    padding: 5px;
}
#qhVisualTitle {
    color: var(--accent-gold);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase; /* Adds a premium "data dashboard" feel */
    letter-spacing: 0.05em;
}

#qhVisualDesc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
    line-height: 1.5;
    max-width: 80%; /* Keeps text block readable */
}

/* CONTENT WRAPPER */
.right-panel-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* Ecom page Container Wrapper */
/* Hub Container */
.intelligence-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 10px;
    /* CHANGE THIS: Ensure it doesn't clip children */
    overflow: visible;
    position: relative;
    z-index: 1; /* Keep this low so the nav stays on top */
}
/* Header */
.hub-header {
    text-align: center;
    margin-bottom: 30px;
}

.hub-header h2 {
    font-size: 1.7rem;
    color: var(--text-white);
    margin-bottom: 10px;
}
.hub-header p {
    font-size: 1.1rem;
    color: var(--text-white);
    margin-bottom: 10px;
}

/* Grid Layout */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 25px;
}

/* Card Style */
.hub-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 35px;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.hub-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-gold);
}

.hub-card h4 {
    color: var(--accent-gold);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.hub-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* List Style */
.hub-card ul {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.hub-card li {
    padding: 8px 0;
    color: #e2e8f0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.hub-card li::before {
    content: "→";
    color: var(--accent-gold);
    margin-right: 12px;
}

/* Scale Operation  page Container Wrapper */

/* Base Layout */
.scale-hub { max-width: 1200px;
margin: 0 auto; 
padding: 20px 20px; 
overflow: visible;
    position: relative;
    z-index: 1; /* Keep this low so the nav stays on top */
    }
.scale-hub__header { text-align: center; margin-bottom: 30px; }
.scale-hub__header h2 {
    font-size: 1.7rem;
    color: var(--text-white);
    margin-bottom: 10px;
}
.scale-hub__header p {
    font-size: 1.1rem;
    color: var(--text-white);
    margin-bottom: 10px;
}

.scale-hub__grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
     padding: 20px;
}

/* Card Styling - The "DRY" Core */
.scale-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 35px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.scale-card:hover { 
    transform: translateY(-8px); 
    border-color: var(--accent-gold); 
}

/* Text & Typography */
.scale-card h4 { color: var(--accent-gold); margin-bottom: 15px; font-size: 1.25rem; }
.scale-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6; }

/* List Styling */
.scale-card ul { list-style: none; padding: 20px 0 0 0; border-top: 1px solid var(--border-color); }
.scale-card li { 
    padding: 6px 0; 
    color: #e2e8f0; 
    font-size: 0.9rem; 
    display: flex; 
    align-items: center; 
}

.scale-card li::before { 
    content: "→"; 
    color: var(--accent-gold); 
    margin-right: 10px; 
}

/* Ensure the parent container forces children to match heights */
.services-mosaic {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
    margin-bottom: 60px; /* This increases space between the mosaic and the next section */
    /* Force children to stretch to the tallest one in the row */
    align-items: stretch !important; 
}

.mosaic-card {
    /* 1. Backgrounds & Borders */
    background: var(--bg-panel) !important;
    border: var(--glass-border) !important;
    
    /* 2. Spacing & Shape */
    border-radius: 20px !important;
    padding: 24px 24px 40px 24px;
    /* 3. Text & Transitions */
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    
    /* 4. Effects */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
}

.mosaic-card:hover {
    transform: translateY(-10px) !important;
    background: linear-gradient(135deg, rgba(45, 60, 85, 0.8), rgba(20, 30, 50, 0.6)) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(212, 175, 55, 0.2) !important;
}

/* This is your "Master Grid" rule */
.grid-container {
    display: grid;
    /* Desktop: 3 columns, Mobile: 1 column */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Update these rules in your style.css * 30.05 changes*/

.mosaic-card h4 {
    color: #ffffff !important; /* Forces title to solid white */
    font-size: 1.6rem !important;
    margin-bottom: 15px !important;
}

.mosaic-card p {
    color: #cbd5e1 !important; /* Brighter, readable light-slate grey */
    line-height: 1.6 !important;
    font-weight: 400;
}

.mosaic-card:hover h4 {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}



/* =========================================================
   MASTER CONTAINER SETTINGS  comment out for try
   ========================================================= */

/* 1. Reset the container so it doesn't force the padding */
.portfolio-container {
    padding-top: 20px !important; /* Minimal clearance for the header*/ 
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. Pull the Hero up into that space*/ 
.page-hero {
    margin-top: -20px !important; /* Pulls the hero up toward the top */
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


.content-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 80px; 
}

/* =========================================================
   MASTER BUTTON SYSTEM (Use ONLY this block)
   ========================================================= */

/* 1. The Foundation: Shared styles for all buttons */
    .btn-base {
    background: var(--gold-gradient) !important;
    color: #08111f !important;
    border: 1px solid rgba(255, 223, 120, 0.55) !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}
    
    .btn-base:hover {
        transform: translateY(-2px);
        filter: brightness(1.1);
        box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);
    }

.btn-trial {
    padding: 4px 18px !important;
    font-size: 0.75rem !important;
    margin: 4% 0 3% 0 !important;
}

.btn-form-submit {
   display: block;      /* Makes it a block element to handle margins correctly */
    margin-top: 25px;    /* Sets the gap between textarea and button */
    margin-bottom: 20px; /* Sets the gap between button and disclaimer */
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: #d4af37 !important;
    transform: translateY(-3px);
}

/* 2. Primary/Explore Button (Size & Spacing) */
.btn-primary {
    padding: 12px 24px !important;
    letter-spacing: 1.2px;
    font-weight: 700 !important;
}

/* 3. Audit Button (Combines primary size + top margin) */
.btn-audit {
   margin-top: 30px;
    padding: 15px 30px;
    border-radius: 50px; /* Rounded buttons feel more organic */
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    transition: transform 0.2s ease;
}
.btn-audit:hover {
    transform: translateY(-2px); /* A small "lift" makes the button feel alive */
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}

/* Inherits from .btn-base automatically */

#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;

    /* Circular shape */
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;

    /* Brand styling */
    background: var(--gold-gradient);
    color: #111827;
    border: none;
    box-shadow: var(--shadow-premium);

    /* Typography */
    font-size: 20px;
    font-weight: bold;

    /* Interaction */
    cursor: pointer;
    transition: transform 0.3s ease;
}

#scrollToTopBtn:hover {
    transform: translateY(-5px);
}




/* =========================================================
   REFINED "CONNECT NOW" BUTTON (15% Reduced)
   ========================================================= */
.top-right-action .btn-primary {
    /* Dimensions & Scaling - Horizontal padding reduced by 30% */
    padding: 8px 8px !important; 
    font-size: 0.8rem !important;
    letter-spacing: 0.3px !important;
    margin-top: 2%;
    
    /* Typography */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #08111f !important;
    
    /* Aesthetics & Interaction */
    background: var(--gold-gradient) !important;
    border: 1px solid rgba(255, 223, 120, 0.55) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3) !important;
    
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

/* Add a hover state to make the gold gradient feel interactive */
.top-right-action .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.45) !important;
}


/* =========================
   HERO SECTION
   ========================= */

.hero-description {
    font-size: 15px !important;
}

.hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
}
/* =========================
   STATS PANEL
   ========================= */

.stats-panel {
    flex-direction: column !important;
    gap: 12px !important;
}



/* =========================
   DASHBOARD
   ========================= */


/* Disable heavy animations on mobile */
.floating-card {
    position: relative !important;
    animation: none !important;
    margin-bottom: 12px;
}

/* =========================
   BUTTONS
   ========================= */

.btn-base,
.btn-primary,
.btn-secondary {
    width: 100% !important;
    text-align: center !important;
}

.insight-grid,
.about-grid {
    grid-template-columns: 1fr !important;
}

/* =========================
   CTA / NEWSLETTER
   ========================= */
/* 1. Sync the Newsletter Panel with the CTA Section look */
.newsletter-panel-side {
    margin-left: 1%;
    max-width: 99%;
    padding: 0;           /* Sync with bottom-cta padding */
    background: transparent; /* Makes it match the CTA section's flow */
    border: none !important; /* Ensures it feels part of the section */
}

/* 2. Ensure both use the same text alignment */
.newsletter-panel-side h4 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}


/* =========================================================
   QUANT HILL: ENHANCED FORM SYSTEM
   ========================================================= */

/* 1. Base Field Styling */
.form-control-field, 
input:not([type="checkbox"]):not([type="radio"]), 
textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1.5px solid #d4af37 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Focus State (Gold Glow) */
.form-control-field:focus, 
input:focus, 
textarea:focus {
    border-color: #f7ef8a !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6) !important;
}

/* 3. Validation Fixes (Prevents default browser styles) */
input:invalid, 
textarea:invalid {
    border: 1.5px solid #d4af37 !important;
    box-shadow: none !important;
}

/* 4. Textarea & Placeholder Adjustments */
textarea.form-control-field {
    min-height: 150px;
    resize: vertical;
    margin-top: 15px;
}

.form-control-field::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 5. Browser Autofill Correction */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.form-disclaimer {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4; /* Declared only once */
    margin-top: 15px; /* Perfect spacing between button and text */
    margin-bottom: 0; /* Ensures it doesn't push against the bottom of the container */
    max-width: 400px; /* Keeps the text block readable and prevents excessive stretching */
}
/* 6. Utility Overrides */
.newsletter-panel .form-control-field { margin-bottom: 10px; }
.btn-trial:focus { outline: none !important; box-shadow: none !important; }


/* =========================
   TICKER FIX
   ========================= */


.ticker-track span {
    font-size: 9px !important;
}

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

.form-grid {
    grid-template-columns: 1fr !important;
}

.contact-card {
    flex-direction: row !important;
}


/* =========================
   HERO SCALING
   ========================= */

.hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}


.hero-description {
    font-size: 16px !important;
}

/* =========================
   HERO ACTIONS
   ========================= */

.hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px;
}

/* =========================
   STATS PANEL
   ========================= */

.stats-panel {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}



/* =========================
   DASHBOARD / RIGHT PANEL
   ========================= */

.floating-card {
    position: absolute !important;
    animation: floatCard 5s ease-in-out infinite;
    min-width: 150px;
}


/* =========================
   NAVIGATION
   ========================= */
/* Apply this to your navigation menu block */
.main-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 3px 4.6%;
    background: #0b1120;
    position: relative;
    
    /* Creating the 5% vertical gap */
    margin-top: 0.5% !important; 
    
    /* Retaining your Etched Glass borders */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.main-nav::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Positions it slightly below the bottom border */
    left: 20%;    /* Starts the glow inset from the edges */
    width: 60%;   /* Ensures it centers nicely */
    height: 1px;
    
    /* A soft golden gradient glow that fades into the dark theme */
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(212, 175, 55, 0.6), 
        transparent
    );
}

/* =========================
   BUTTONS
   ========================= */

.btn-base,
.btn-primary,
.btn-secondary {
    width: auto !important;
    padding: 10px 18px !important;
}

/* =========================
   INSIGHTS / ABOUT GRID
   ========================= */

.insight-grid,
.about-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

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

.form-grid {
    grid-template-columns: 1fr 1fr !important;
}

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

.floating-card {
    position: absolute;
}



/* =========================================================
   DATA TECH PAGES: Dashboard & Analysis Styling
   ========================================================= */
.tech-container {
    max-width: 1000px;
    margin: 60px auto;
    padding: 40px;
    background: rgba(8, 17, 31, 0.95); /* Deep dark background */
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    color: #e2e8f0;
}

.tech-container h1 { color: #d4af37; font-size: 2.2rem; }
.tech-container h2 { color: #f7e27c; margin-top: 30px; }

/* Grid for Data Cards */
/* Container for the Grid */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Slightly wider base */
    gap: 30px; /* Increased gap for better negative space */
    margin: 40px auto;
    padding: 20px;
    max-width: 1200px;
}

.main-header{
    display:block !important;
    width:100%;
    min-height:60px;
    background:#0f172a;
}

/* 1. Hero Container for reports.html */
.hero1 {
    position: relative;
    padding: 20px 5% 100px 5% !important; 
    overflow: hidden;

}

.hero1-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* 2. Badge & Typography */
.hero1-badge {
    display: inline-block;
    padding: 6px 16px;

    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #d4af37;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.hero1-content h2 {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 25px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero1-content p {
    font-size: 1.2rem;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}

/* 3. KPI Grid & Glass Effect */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Added the missing hover effect */
.glass-card:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.kpi-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #d4af37;
}

/* 4. Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }



/* =========================================================
   QUANT HILL: UNIFIED ML PIPELINE CONSOLE Deployment Page css 
   ========================================================= */

/* 1. Dashboard Base Container */
.ml-dashboard {
    background: #050a14;
    border: 1px solid #1e293b;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    margin-top: 2.5vh;
}

/* 2. Header & Status Indicators */
.monitor-header { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 30px; 
}

.status-indicator { 
    color: #00ff64; 
    font-size: 0.7rem; 
    font-family: monospace; 
    text-shadow: 0 0 8px rgba(0, 255, 100, 0.5); 
}

/* 3. Pipeline Progress Flow */
.pipeline-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 10px;
    flex-wrap: wrap; /* NEW: Allows stages to wrap on smaller screens */
}

.stage {
    flex: 1;
    min-width: 120px; /* NEW: Prevents stages from becoming unreadable */
    text-align: center;
    padding: 10px;
    color: #475569;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    border-bottom: 2px solid #334155;
    transition: all 0.3s ease;
}

.stage.active {
    color: #d4af37;
    border-color: #d4af37;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.stage.complete {
    color: #00ff64;
    border-color: #00ff64;
}

.stage span { font-size: 0.7rem; margin-left: 5px; }

/* 4. Data Metrics Grid */
.metrics-grid {
    display: grid;
    /* NEW: This automatically stacks columns from 4 down to 2 or 1 as space shrinks */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    background: rgba(15, 23, 42, 0.5);
    padding: 20px;
    border-top: 1px solid #1e293b;
}

.metric {
    display: flex;
    flex-direction: column;
    font-family: 'Courier New', monospace;
    color: #64748b;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric span {
    color: #ffffff;
    font-size: 1.5rem;
    margin-top: 5px;
    font-family: sans-serif;
}

/* 5. Live Console Log */
.live-log {
    background: #000;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: #00ff64;
    margin-top: 20px;
    
    /* NEW: Ensures long logs wrap instead of expanding the dashboard width */
    word-break: break-all; 
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
}
.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* =========================================================
   LEGAL PAGE STYLING (Themed for Dark Mode)  01.06 work
   ========================================================= */
/* Heavy-Duty Override: Placed at the bottom of your CSS file */
body .legal-container {
    /* 1. Force the background to be your dark theme, not white */
    background: #08111f !important; 
    
    /* 2. Force the width and center alignment */
    display: block !important;
    width: 90% !important;
    max-width: 800px !important;
    margin: 60px auto !important;
    
    /* 3. Padding and Border */
    padding: 40px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 16px !important;
    
    /* 4. Ensure it respects layout */
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}
/* Rest of your styles remain the same */
.legal-container h1 {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.legal-container h2 {
    color: var(--accent-primary);
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 15px;
}

.legal-container p, 
.legal-container li {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 20px;
}

.legal-container a {
    color: var(--accent-blue);
    text-decoration: underline;
}

.legal-container a:hover {
    color: var(--accent-primary);
}
.disclaimer {
    margin-top: 40px;
    padding: 20px;
    
    /* Subtle background and border to separate from main text */
    background: rgba(212, 175, 55, 0.05); /* Very light gold tint */
    border-left: 3px solid var(--accent-gold);
    
    /* Typography */
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.6;
    
    /* Spacing */
    border-radius: 0 8px 8px 0;
}

.disclaimer em {
    opacity: 0.8;
}


/* 03.06.26 work */

/* --- Operational Pillars Grid (High Specificity) --- */
.operational-pillars {
        /* Reduced from 80px/50px to 12px to cut top space by 75% */
  padding: 35px 20px 15px 20px !important;
 width: 100% !important;
    background: transparent !important; /* Forces it to respect body background */
}

/* --- The Flip Container (Replaces previous .pillar-card) --- */
/* Ensure the grid respects the card size */
.pillars-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    max-width: 1200px !important;
    margin: 40px auto !important;
}

/* The card parent */
.pillar-card {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 12px !important;
    perspective: 1000px !important;
    height: 220px !important;
    cursor: pointer;
}

/* The flip wrapper */
.card-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.6s !important;
    transform-style: preserve-3d !important;
}

.pillar-card:hover .card-inner {
    transform: rotateY(180deg) !important;
}

/* The Faces */
.card-front, .card-back {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    border-radius: 12px !important;
    border: var(--glass-border) !important;
    background: var(--glass-bg) !important;
}

/* Fix text alignment */
.card-front h3 { margin: 0 !important; color: var(--accent-gold) !important; }
.card-back p { margin: 0 !important; color: var(--text-primary) !important; line-height: 1.5; }

.card-back {
    transform: rotateY(180deg) !important;
}

.how-we-work {
      /* Reduced from 80px to 40px to cut top space by 50% */
    padding: 10px 20px 10px 20px !important;
    max-width: 1200px;
    margin: 0 auto;
}

.tag {
    display: table; /* Allows auto-margins to center the element */
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 1.2rem;
    margin: 0 auto 20px auto; /* Centers the tag horizontally */
    text-align: center; /* Centers the text inside the tag */
}
.description {
    font-size: 1.4rem;
    margin-bottom: 50px;
    max-width: 800px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.step-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.step-card h3 {
    font-size: 2.5rem;
    color: #d4af37;
    margin-bottom: 10px;
}

.step-card h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.tech-cert-section {
    padding: 10px 25px 10px 25px !important;
    max-width: 1200px;
    margin: 0 auto;
    /* Properly closed with a semicolon, and only one margin-bottom */
    margin-bottom: 0 !important; 
    padding-bottom: 0 !important;
}

.tech-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Technology Chips */
.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.tech-chips span {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cert-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.cert-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    color: var(--text-secondary);
}

.cert-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    font-weight: bold;
}

/* 1. Container & Item Layout */

.faq-section {
padding: 10px 20px 30px 20px;
    margin-top: 0;
    max-width: 800px;
    margin: -20px auto 0 auto;
    text-align: center;
}

.faq-container {
    /* Reduced margin-top to tighten the gap between H2 and the list */
    margin-top: 12px; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
}

.faq-section h2 {
    font-size: 2.0rem;
    margin-bottom: 40px;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item:last-child { border-bottom: none; }

/* 2. Trigger Area */
.summary {
    padding: 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    transition: background 0.2s;
}

.summary:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* 3. The Animated Content Area */
.content {
    max-height: 0;
    overflow: hidden;
    /* Use a standard ease-in-out transition for better reliability */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease;
    padding: 0 24px; 
}
/* 4. Toggled State (Applied via your script.js toggle) */
/* 4. Toggled State */
/* Force the content to be visible to test if the JS is working */
.faq-item.active .content {
    max-height: 500px !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.05); /* Add a light background so you can see the box */
}
.content p {
    margin: 0; /* Remove margins from the paragraph inside */
    padding: 0;
}
.icon {
    display: inline-block;
    transition: transform 0.3s ease;
    pointer-events: none;
    font-size: 1.5rem; /* Make sure it's big enough to see */
    color: white;      /* Ensure it matches your text color */
}

/* This is the key: rotate when parent is active */
.faq-item.active .icon {
    transform: rotate(90deg);
}


.cta-banner {
    padding: 20px 20px;
    margin: 10px auto;
    max-width: 1200px;
}

.cta-content {
     padding: 40px;
     /* ... previous styles ... */
    border: 2px solid rgba(255, 255, 255, 0.25);
    /* Soft glow outline */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    text-align: center;
    color: white;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


 .cta-buttons {
    display: flex;
    justify-content: center; /* This centers the group */
    align-items: center;
    gap: 30px; /* This controls the exact space between buttons */
    width: 100%;
}
/* =========================
   FOOTER STRUCTURE
   ========================= */
footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #020617;
}

/* 1. TOP SECTION 
(Links) */
.site-footer {
    padding: 24px 5% 16px 5% !important;
}

.footer-grd {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
}

.footer-col h4 {
    color: white;
    margin-bottom: 20px;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 12px; font-size: 0.9rem; cursor: pointer; }

/* Unified link colors */
.footer-col ul li, .footer-col ul li a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-col ul li:hover, .footer-col ul li a:hover { color: #3b82f6; }


/* Logo in footer */
/* Force the specific branding column to center */

.footer-grd .footer-col:nth-child(1) {
    display: flex;
    margin-left: -15%; /* Pulls the entire block 15% to the left */
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    text-align: center;
    padding-top: 0;      /* Ensure no top margin */
    margin-top: 0;
}
/* Target the column containing your branding */
.branding-col {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures the column fills the footer height */
}

/* Tighten the block internally */
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
/* Remove default margins from the elements inside */
.footer-logo h4, 
.footer-logo p {
    margin: 0 !important; /* Force override of any other margins */
    padding: 0 !important;
}

/* Ensure logo container is centered */
.logo-containerf {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    margin-bottom: 4px;
}

.brand-logo {
    width: 60px;
    height: auto;
}

.brand-name {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}
/* Push the contact div to the bottom of the flex container */
.footer-contact {
   padding-top: 5px;
}

.tagline {
    margin: 0 0 10px 0; /* Tight spacing before contact */
    font-size: 0.70rem;
    margin-bottom: 8px !important;
    font-weight: 700;
        letter-spacing: 0.15em;
    text-transform: uppercase;
}

.footer-contact p {
    margin: 2px 0;
    font-size: 0.85rem;
    color: #a0aec0;
}

/* 2. BOTTOM SECTION (Social & Legal) */
.footer-content {
   width: 100%;
    background: #020617;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 5% !important; /* Forces a tight 10px top/bottom */
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Keeps it responsive */
}

/* 3. Keep branding/social together */
.footer-branding-block {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 3. Strip all internal spacing from children */
.footer-branding-block, 
.footer-legal-links, 
.footer-copyright-container {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.footer-branding-block { justify-self: start; }
.footer-branding-block strong { color: var(--text-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }

/* 4. Ensure icons don't force height */
.footer-social-cluster {
    display: flex;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.25s ease;
}

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

.footer-copyright {
    justify-self: end;
    color: var(--text-muted); 
    font-size: 11.5px;
}

/* Icon Styles */
.social-icon-box {
    width: 20px !important; 
    height: 20px !important;
    display: flex; justify-content: center; align-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}
.social-icon-box svg { width: 15px; height: 15px; fill: currentColor; }
.social-icon-box.fb { background: rgba(24,119,242,0.12); color: #1877f2; }
.social-icon-box.ln { background: rgba(10,102,194,0.12); color: #0a66c2; }
.social-icon-box.ig { background: rgba(225,48,108,0.12); color: #e1306c; }

.social-icon-box:hover {
    background: var(--gold-gradient);
    color: #08111f;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212,175,55,0.35);
}

/* Sets the space between lines of text within the paragraph */
.intelligence-text {
    line-height: 1.6; 
    margin-bottom: 24px; /* This creates the 1-line gap before the form */
}

/* Optional: Ensures the form itself doesn't have conflicting margins */
.subscription-form {
    margin-top: 0;
}


.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: 60px 7%;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-card {
    position: relative; /* Essential for the absolute link */
    background: var(--bg-panel) !important;
    border: var(--glass-border) !important;
    backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.blog-card:hover {
    border-color: var(--accent-gold) !important;
    transform: translateY(-8px);
}

.blog-card h3 {
    color: #ffffff;
    margin: 15px 0;
    font-size: 1.3rem;
}

.blog-card p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    flex-grow: 1;
}

.read-more {
    color: var(--accent-gold);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
}
/* Change .tag to .blog-tag */
.blog-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 15px 0; /* Left-aligned for blog cards */
}

/* Update specific color modifiers */
.data-tag { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.marketing-tag { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.ecommerce-tag { background: rgba(212, 175, 55, 0.15); color: #fbbf24; border: 1px solid rgba(212, 175, 55, 0.3); }

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between text and arrow */
    
    color: var(--accent-gold); /* Using your gold theme */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    
    transition: color 0.3s ease;
    margin-top: 15px;
}

.blog-read-more:hover {
    color: #ffffff; /* Turns white on hover */
}

.blog-read-more .arrow {
    transition: transform 0.3s ease;
}

/* The "Slide" effect */
.blog-read-more:hover .arrow {
    transform: translateX(5px); /* Arrow moves to the right on hover */
}
.blog-read-more::after {
    content: '';
    position: absolute;
    inset: 0; /* Stretches the link over the entire card */
}


.insights-engagement-section {
    padding: 80px 5% 40px 5%;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.sub-heading {
    color: var(--accent-gold);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
}

.engagement-header h2 {
    font-size: 3rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.engagement-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
}


.breadcrumb-container {
    padding: 5px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
} 

.breadcrumb-list a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.breadcrumb-list a:hover {
    color: var(--accent-gold);
}

.breadcrumb-list .separator {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.breadcrumb-list .current-page {
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.85rem;
}


/* 04.06 work  */

.sitemap-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
    margin-left: 40px;
}

.sitemap-columns h3 {
    font-size: 0.9rem;
        letter-spacing: 1px;
    margin-bottom: 20px;
}

.sitemap-columns ul {
    list-style: none;
    padding: 0;
}

.sitemap-columns ul li {
    margin-bottom: 12px;
}

.sitemap-columns ul li a {
    text-decoration: none;
    /* Change the color code below to your desired brand color */
    color: #D4AF37; /* This is the gold accent color we used earlier */
    font-weight: 500;
    transition: color 0.3s ease; /* Adds a smooth transition effect */
}

/* Optional: Add a hover effect so the user knows it's a link */
.sitemap-columns ul li a:hover {
    color: #ffffff; /* Changes to white when hovered */
    text-decoration: underline;
}


/* 1. Main Layout & Container */
.testimonial-main-wrapper {
    padding: 40px 0;
    background-color: #0a0e14; /* Dark theme base */
    color: #ffffff;
}

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

/* 2. Header Area */
.testimonial-header-area {
    text-align: center;
    margin-bottom: 60px;
}

.sub-heading-brand {
    color: #D4AF37; /* Gold accent */
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.main-title-brand {
    font-size: 2rem;
    margin: 15px 0;
}

.disclaimer-text {
    color: #94a3b8;
    font-size: 0.95rem;
}

/* 3. Outcomes Section Header */
.outcomes-header-wrapper {
    text-align: center;
    margin: 20px 20px 20px 40px;
}

.tag-label {
    background: rgba(212, 175, 55, 0.1);
    color: #D4AF37;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
}

/* 4. The Card Grid */
.outcomes-card-grid {
    display: grid;
    /* This creates a 2-column layout on desktop, 1-column on mobile */
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
}

.outcome-card-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 20px 20px 20px 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.outcome-card-item:hover {
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-5px);
}

/* 5. Card Content Alignment */
.quote-mark {
    font-size: 2.5rem;
    color: rgba(212, 175, 55, 0.4);
    margin-bottom: 15px;
}

.quote-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Pushes author info to the bottom */
}

.author-meta {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-top: auto;
}

.star-rating-box {
    color: #fbbf24;
    font-size: 1.2rem;
    margin-top: 10px;
}



.job-card {
       border: 1px solid #e5e7eb;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.job-meta {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 5px 0 15px 0;
}

/* Pill-shaped tags */
.job-tags span {
    background: #f3f4f6;
    color: #374151;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    margin-right: 8px;
}

.cta-panel-careers {
    padding-top: 20px;
}

/* =========================================================
   SHARED SERVICE PAGE MODULES (Common CSS)
   ========================================================= */

/* The main container that centers your content */
.page-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 5px;
    min-height: 60vh;
}

/* Service Page Header */
.content-panel {
    margin-bottom: 30px;
    text-align: center;
}

.sub-heading {
    color: var(--accent-gold);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
}

/* Service Page Grid */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 0;
}

/* Service Page Card Styling */
.data-card {
    background: var(--glass-bg);
    border: var(--glass-border);
    padding: 40px;
    border-radius: 16px;
    transition: transform 0.3s ease;
} 

.data-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-5px);
}

.data-card h3 {
    color: var(--text-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.data-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}


/* added to test */

#header-placeholder, #footer-placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* =========================================================
MATRIX VISUAL for data science/dashboard Page
========================================================= */
/* --- 2. Shared Layout Components --- */
.qha-dashboard-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 20px;
}
.qha-column-left { flex: 1; }
.qha-column-right { flex: 1; }

.qha-data-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.qha-data-card {
    background: rgba(10, 15, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 16px;
    transition: transform 0.3s ease;
}
.qha-data-card:hover { border-color: var(--accent-primary); transform: translateY(-5px); }
.qha-data-card h3 { color: var(--text-primary); margin-bottom: 10px; font-weight: bold; }
.qha-data-card p { color: var(--text-secondary); line-height: 1.2; }

/* --- 3. Matrix Container (The "Command Center" Visual) --- */
.qha-matrix-container {
    position: relative;
    height: 425px;
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient(circle at center, rgba(37,99,235,0.12) 0%, rgba(15,23,42,0.7) 45%, rgba(2,6,23,0.96) 100%);
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

/* Live Badge & Scanlines */
.qha-matrix-container::before {
    content: "● LIVE DATA";
    position: absolute; top: 15px; right: 15px;
    color: var(--accent-primary);
    font-size: 0.7rem; font-weight: bold; letter-spacing: 2px;
    z-index: 10;
}
.qha-matrix-container::after {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none; z-index: 2;
}

.qha-matrix-container canvas { display: block; width: 100%; height: 100%; opacity: 0.6; }

/* --- 4. Dashboard Widgets & Overlay --- */
.qha-matrix-overlay {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    text-align: center; width: 100%; z-index: 5;
}

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

.dash-widget {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
    padding: 10px; margin: 10px; border-radius: 8px;
    display: inline-block; width: 100px;
    animation: pulse 4s infinite;
}
.dash-widget .val { font-size: 1.2rem; font-weight: bold; color: var(--accent-primary); }
.dash-widget .label { font-size: 0.6rem; letter-spacing: 1px; color: #fff; }

/* --- Insight Highlight Section --- */
.insight-highlight {
    margin-top: 20px;
    padding: 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(10, 15, 25, 0.4) 0%, rgba(2, 6, 23, 0.8) 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.insight-highlight h2 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.insight-highlight p {
    max-width: 700px;
    margin: 0 auto 10px auto;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* --- CTA Banner Component --- */
.qha-cta-banner {
    margin-top: 60px;
    margin-bottom: 25px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    background: rgba(10, 15, 25, 0.5);
    transition: all 0.3s ease;
}

.qha-cta-banner:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
}

.qha-cta-banner h2 {
    margin-bottom: 5px;
    color: var(--text-primary);
}

.qha-cta-banner p {
    margin-bottom: 10px;
    color: var(--text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
} 


/* case studies page Layout Wrapper */
.cs-dashboard-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
    max-width: 1100px;
    margin: 40px auto;
}

/* Header */
.cs-header-wrapper { text-align: center; margin-bottom: 40px; }
.cs-eyebrow { display: block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.cs-subtext { font-size: 1.1rem; max-width: 700px; margin: 0 auto; color: #a0aec0; }

/* Cards */
/* If your cards are inside the grid */
.cs-data-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Increase this value (e.g., 30px, 40px, or 50px) */
}


.cs-data-card {   background: rgba(10, 15, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 16px;
    transition: transform 0.3s ease; }
    
    .cs-data-card:hover { border-color: var(--accent-primary); transform: translateY(-5px); }
.cs-card-title { margin-bottom: 10px; color: #ffffff; }
.cs-card-text { color: #a0aec0; }
.cs-link { color: #d4af37; font-size: 0.9rem; text-decoration: none; }

/* KPI Box */

.cs-column-right { 
  position: sticky; 
  top: 100px; 
  height: 450px; /* Define a fixed height for the container so 30% has a reference */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns content toward the top */
  background: rgba(212, 175, 55, 0.05); 
  border: 1px solid rgba(212, 175, 55, 0.2); 
  padding: 30px 20px; 
  border-radius: 8px; 
  text-align: center; 
  margin-right: 5%;
}

/* Canvas styling: Takes 30% of the parent height */
.cs-column-right canvas {
  height: 30%; 
  width: 100%; /* Keeps it responsive */
  margin-bottom: 20px; /* Space between canvas and the matrix content */
}
.cs-matrix-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers items top-to-bottom */
  align-items: center;    /* Centers items left-to-right */
  height: 100%;           /* Ensures it uses the full height of the sidebar */
  padding: 20px;
}

.cs-kpi-value {
  font-size: 2.5rem;
  color: #d4af37;
  margin: 0;
  line-height: 1.1;     /* Tighter line height for large numbers */
}

.cs-kpi-label {
  font-size: 0.9rem;
  color: #a0aec0;
  margin-top: 5px;      /* Slight gap between number and label */
  margin-bottom: 25px;  /* Space before the HR or next number */
}

.cs-divider {
  width: 100%;          /* Ensures the line spans the width of the box */
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 10px 0 25px 0; /* Balanced spacing */
}


/* Mobile optimization */
@media (max-width: 768px) {
    .cs-dashboard-wrapper { grid-template-columns: 1fr; }
    .cs-column-right { position: static; }
}

/* Container & Grid Setup */
.ecs-page-container { 
  max-width: 1100px; 
  margin: 40px auto; 
  padding: 0 20px; 
}

.ecs-content-panel { 
  text-align: center; 
  margin-bottom: 50px; 
}

.ecs-dashboard-wrapper {
  display: grid;
  grid-template-columns: 1fr 320px; /* 1fr for left cards, 320px fixed for sidebar */
  gap: 60px;
  align-items: start;
}

/* Typography & Labels */
.ecs-sub-heading { 
  display: block; 
  font-size: 0.75rem; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  font-weight: 700; 
  margin-bottom: 10px; 
}

.ecs-content-panel h1 { 
  font-size: 2.5rem; 
  color: #ffffff; 
  margin-bottom: 15px; 
}

.ecs-intelligence-text { 
  font-size: 1.1rem; 
  color: #a0aec0; 
  max-width: 600px; 
  margin: 0 auto; 
  line-height: 1.6; 
}

/* Left Column Cards */
.ecs-column-left { 
  display: flex; 
  flex-direction: column; 
  gap: 30px; 
}

.ecs-data-card {   background: rgba(10, 15, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 16px;
    transition: transform 0.3s ease;
}
.ecs-data-card:hover { border-color: var(--accent-primary); transform: translateY(-5px); }

.ecs-data-card h3 { 
  color: #ffffff; 
  margin-top: 0; 
}

.ecs-data-card p { 
  color: #a0aec0; 
}

/* Right Column (Metrics Sidebar) */
/* Sidebar Container: Matches CS aesthetics */
.ecs-column-right { 
  position: sticky; 
  top: 100px; 
  height: fit-content;
  background: rgba(212, 175, 55, 0.05); 
  border: 1px solid rgba(212, 175, 55, 0.2); 
  padding: 30px; 
  border-radius: 8px; 
  text-align: center; 
}

/* Metrics Value (h2): Matches CS font and spacing */
.ecs-matrix-overlay h2 { 
  font-size: 2.5rem; /* Increased to match the 2.5rem CS style */
  color: #d4af37; 
  margin: 0; 
  line-height: 1.1;
}

/* Metrics Label (p): Matches CS font and spacing */
.ecs-matrix-overlay p { 
  color: #a0aec0; 
  font-size: 0.9rem; 
  margin-top: 5px;   /* Added to separate from h2 */
  margin-bottom: 25px; 
}

/* Divider: Matches CS subtle styling */
.ecs-matrix-overlay hr { 
  border: 0; 
  border-top: 1px solid rgba(255, 255, 255, 0.1); 
  margin: 20px 0; 
}
/* Responsive adjustment for tablets/mobile */
@media (max-width: 900px) {
  .ecs-dashboard-wrapper { 
    grid-template-columns: 1fr; 
  }
  .ecs-column-right { 
    position: static; 
  }
}




/* =========================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES
   ========================================================= */

/* 1. MOBILE ONLY (Devices smaller than 768px) */
@media only screen and (max-width: 767px) {
    /* Example: Stack navigation vertically on mobile */
    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* Example: Reduce font sizes for better readability on small screens */
    .hero-title {
        font-size: 36px !important;
    }
    
    /* Example: Remove side padding that pushes elements off-screen */
    .container, .main-layout {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 2. IPAD / TABLET ONLY (Screens between 768px and 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Example: Adjust grid layouts to 2 columns instead of 3 */
    .insight-grid, .data-grid, .scale-hub__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Example: Increase padding for comfortable touch interaction */
    .about-layout, .contact-layout {
        padding: 40px 8% !important;
    }

    /* Example: Fix sticky sidebar behavior for iPad landscape */
    .ecs-column-right {
        padding: 20px !important;
    }
}

@media only screen and (max-width: 767px) {
    /* 1. Force the dropdown to stack or be full width */
    .dropdown {
        position: static !important; /* Removes it from the flow so it doesn't overlap */
        width: 100% !important;
        background: rgba(15, 23, 42, 0.95) !important;
        box-shadow: none !important;
        padding-top: 10px;
    }

    /* 2. Hide the desktop flex items if they are overlapping */
    .main-nav {
        flex-direction: column !important;
        height: auto !important;
    }
}