/* 
Author:  Syncresia
Date:    2025-05-22
Version: 1.0

What is this: 
This is the Visual Style for the Syncresia website.


DONE: V1
This is my standard responsive Web CSS style sheet.
It is designed to be used with the Syncresia website.
It is designed to be responsive and to work on a variety of screen sizes.


TODO:
Do a different bakcground for each page (using repeated patterns or whatnot)
Refactor this style sheet for simpler media queries or leverage a great one



What I learned:
- You can do most of the different devices sizing with properly crafted calcs
- You just need one media query for the mobile (DPR).... It seems preferable to roll tablets into it
- I learned to handle fonts betters (debugging wrong font display)
- I learned to let go of problems that are not in front of me (tablets, 4k on the right ....)
Those are low value problems for my site, for now.                                                                                  
TODO For Great Completion:
- Logo sized automatically (right now it's MQ breakpointed)

*/


:root {
    --primary-color: #39ff14;    /* Brightest neon green */ 
    --secondary-color:#b0e52d ;  /* Yellowish green */
    --tertiary-color: #82ee90;   /* Light mint green */
    --quaternary-color: #0BCC8D; /* Teal accent */
    --quinary-color: #4a9b0c;    /* Dark Forest green */

    /* Consider adding these complementary colors for contrast */
    --accent-light: #14ff9d;     /* Mint accent */
    --accent-dark: #088558;      /* Dark teal */


    --dark-bg: #000000;

    --nav-height: 60px;
    /*
    --font-nav: 'Major Mono Display', monospace;
    This one acts unpredictably (default to another one without the cool lettering . 
    LEt's be careful in using it
    */
    --font-nav: 'Orbitron', sans-serif;
    --font-body: 'Chakra Petch', sans-serif;
    --grid-gap: 1.5rem;
}

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

.label-text 
{
    color: #1AA44A;
    font-family: var(--font-body);  /* Using Chakra Petch instead of Inter */
    font-weight: 600;
}


.major-mono-display-regular {
    font-family: "Major Mono Display", monospace;
    font-weight: 400;
    font-style: normal;
  }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    background: var(--dark-bg);
    color: white;
    height: 100dvh;
    overflow-x: hidden;
    /*TODO understand the DVH 80% problem. This might be a problem we need to solve 
    when we run off the page*/
   
    overflow-y: auto;  /* Shows scrollbar only when needed */
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%2329e617' fill-opacity='0.12' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
    /*TODO: Maybe don't store the background in there*/
}


/* Content Styles */
.content-section 
{
    margin-top: var(--nav-height);
    padding: 2rem;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    -height: calc(100dvh - var(--nav-height));  /* Changed from 100vh */
   
}


/* Mobile/Tablets Styles*/
/*TODO: Clean this up when we insert content */
@media (max-width: 1210px), (orientation: portrait) and (max-height: 1000px) 
{
    
body
 {
    height: 100svh; /* Smallest Viewport Height - accounts for browser UI */
}
.nav-wrapper 
{
    max-width: 100%;
    padding: 0 1rem;
}

.nav-link 
{
    font-size: 1rem; /* Smaller font size for older phones */
    /*TODO: Use Clamped font-size, Make sure we get javascript hamburger back*/
    padding: 0.3rem 1rem;  /* Added padding to links in mobile only */
}

.nav-menu {
    gap: 1rem; /* Reduce gap for tighter spacing */
}

/* Optimize logo size for smaller screens */
.logo {
    height: calc(var(--nav-height) * 0.5);
}


/* Add hamburger button */
.mobile-menu-btn 
{
    display: block; /*block when media query hit*/
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    padding: 0.5rem;
}

.nav-menu 
{
    position: fixed;
    top: var(--nav-height);
    left: -100%;
    width: 100%;
    height: calc(100svh - var(--nav-height));
    flex-direction: column;
    background: rgba(0, 0, 0, 0.95);
    transition: left 0.3s ease;
    padding: 2rem;  /* Added padding */
    gap: 2rem;      /* Maintain consistent gap */
}

.nav-menu.active {
    left: 0;
}


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




/* Submenu styling */
.has-submenu {
    position: relative;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 200px;
    border: 1px solid var(--quaternary-color);
    border-radius: 4px;
    padding: 0.5rem 0;
    z-index: 1000;
}

.has-submenu:hover .submenu {
    display: block;
}

.submenu li {
    padding: 0.5rem 1rem;
}

.submenu a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.submenu a:hover {
    color: var(--quaternary-color);
}

.submenu i {
    width: 20px;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .submenu {
        position: static;
        background: transparent;
        border: none;
        padding-left: 1rem;
        display: none;
    }

    .has-submenu.active .submenu {
        display: block;
    }
   
}



/* Home Page Coolios */

.services-section {
    display: flex;
    flex-direction: column;
    gap: 1vh;  /* Reduced gap */
    padding: 2rem;
    height: calc(100vh - var(--nav-height) - 2rem);  /* Full viewport minus nav and padding */
    max-width: 1800px;
    margin: 0 auto;
}

.service-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.service-row:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: translateX(10px);
}

.service-concept {
    width: 200px;  /* Fixed width for consistency */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.service-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
}

.service-title {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    color: var(--primary-color);
    margin: 0;
}

.connector {
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-10deg); /* Slight tilt for dynamic feel */
}

.connector-car {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(157, 0, 255, 0.5)); /* Neon glow effect */
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}
.connector-line {
    width: 100%;
    height: 100%;
}

.connector-line path {
    fill: none;
    stroke: var(--secondary-color);
    stroke-width: 2;
}

.connector-line polygon {
    fill: var(--secondary-color);
}

.service-solution {
    flex: 1;
    position: relative; /* For absolute positioning of brand */
}

.solution-brand {
    color: var(--primary-color);
    font-family: var(--font-nav);
    font-size: clamp(0.9rem, 1.2vw, 1.3rem);
    text-align: center;
}

.solution-image-wrapper {
    width: 100%;
    height: calc((100vh - var(--nav-height) - 10rem) / 5);
    min-height: 100px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.solution-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.solution-image-wrapper:hover img {
    transform: scale(1.05);
}
.solution-brand {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    color: var(--primary-color);
    font-family: var(--font-nav);
    font-size: clamp(0.9rem, 1.2vw, 1.3rem);
    z-index: 2;
}
/* Add emboss effect */
.solution-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.1);
    z-index: 1;
    pointer-events: none;
}

/* Isolate hover effect to image only */
.solution-image-wrapper:hover img {
    transform: scale(1.05);
}

/* Remove row hover transform */
.service-row:hover {
    background: rgba(0, 0, 0, 0.3);
    transform: none;
}

/* Maintain car animation on row hover */
.service-row:hover .connector-car {
    filter: drop-shadow(0 0 12px rgba(157, 0, 255, 0.8));
}




.home-container {
    padding: 2rem;
    max-width: 1800px;
    margin: 0 auto;
}
/* Adjustments for the vision content layout */
.vision-content {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 2rem;
}

.vision-image {
    max-width: 28%;
    flex: 1;
    margin-top: 150px;
    z-index: 5000;
}

.vision-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 20px var(--primary-color);
}


#RWReflow {
    position: relative;
    top: 20px; /* Adjust as needed */
    width: 100%;
    margin-left: 0;
}

/* Right side content container */
.vision-right-content {
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Introduction text */
.vision-story {
    margin-bottom: 1rem;
}


/*--------------- Services Page ------------------*/




.service-wrapper {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-bottom: 2rem;
    margin-top:-50px;
}
/* Service Content */
.service-content 
{
    flex: 1; /* Takes remaining space */
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}


/* Grid for Services */
.services-subsections-grid 
{
       flex: 1 1 0;
      min-height: 0;
      min-width: 0;
      /* The magic: exactly fills remaining viewport area */
      display: grid;
      grid-template-columns: 1fr; 
      grid-template-rows: repeat(5, 1fr);   
      gap: 16px;
      padding: 18px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      /* fallback: */
   
      overflow: visible;
      transition: grid-template-columns 0.2s cubic-bezier(.26,.51,.65,1.1);
}


/* Service Big Highlighter */
.service-big-highlighter
{
    /*font-size: 4rem;*/

    font-size:  calc(0.5rem + 3 * 100vw/100 );
    margin-left: 40px;
    margin-top: 10px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(90deg, #32FF7A 0%, #00F3FF 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* Individual subsection card */
.service-subsection {
  
    display: flex;           /* Simple vertical stack */
    flex-direction: column; 
    gap: 0.1rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem;
    border-radius: 8px;
    width: 100%;
}

.service-subsection:hover {
    background: rgba(50, 255, 122, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* ----------------------------------end of service page ------------------------------*/



/* Grid for vision subsections */
.vision-subsections-grid 
{
       flex: 1 1 0;
      min-height: 0;
      min-width: 0;
      /* The magic: exactly fills remaining viewport area */
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* THIS CREATES 3 EQUAL COLUMNS */
      grid-template-rows: repeat(3, auto);   /* THIS CREATES 2 ROWS */
      gap: 16px;
      padding: 18px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      /* fallback: */
   
      overflow: visible;
      transition: grid-template-columns 0.2s cubic-bezier(.26,.51,.65,1.1);
}

/* Add this where your other vision-related styles are defined */
.vision-link {
    color: var(--primary-color);
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

.vision-link:hover {
    color: var(--secondary-color);
}

/* Optional: Add an animated underline effect */
.vision-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

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

.vision-title 
{
    font-size: 1.5rem; /* Reduced by 1/3 from original 2.5rem */
    text-align: center;
    color: var(--primary-color);
    font-family: var(--font-nav);

    margin-bottom: 10px; /* Adjust bottom margin to keep proper spacing */
}


/* Individual subsection card */
.vision-subsection {
    display: flex;           /* Simple vertical stack */
    flex-direction: column; 
    gap: 0.1rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    width: 100%;
}

.vision-subsection:hover {
    background: rgba(50, 255, 122, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Subtitle styling */
.vision-subtitle {
    font-size:calc(0.49rem + 0.6 * 100vw/100 );
    margin-top: -10px;
    margin-bottom: calc(0.1rem + 0.2 * 100vw/100 );

    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
}

.vision-subtitle i {
    color: #32FF7A;
    font-size: calc(0.50rem + 0.6 * 100vw/100 );
}

/* Make subsection paragraphs more compact */
.vision-subsection p {
    /*font-size: 0.9rem;*/
    font-size:  calc(0.5rem + 0.4 * 100vw/100 ); /* JDC_Responsive: Font Size  */
    line-height: 1.4;
    margin: 0;
}

/* Commitment section full-width at bottom */

.vision-commitment-subtitle
 {
     font-size:  calc(0.6rem + 0.6 * 100vw/100 );
    margin-top: -10px;
    margin-bottom: 0.5rem;

    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
}

.vision-commitment-subtitle i 
{
    color: #32FF7A;
     font-size:  calc(0.6rem + 0.6 * 100vw/100 );
}

.vision-commitment {
    font-size: calc(0.55rem + 0.6 * 100vw/100); /* JDC_Responsive: Font Size */
    margin-top: 2rem;
    width: calc(100% - 16vw); /* Subtract margins from both sides */
    background: rgba(0, 243, 255, 0.05);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 3px solid #00F3FF;
    position: fixed;
    bottom: 12vh;
    margin-left: 13vw;
    box-sizing: border-box; /* Ensure padding is included in width */
}

@media (max-width: 1410px) 
{

    
    .vision-image
    {
        display: none;
    }
    
    
    
    @keyframes pulse {
        0% { box-shadow: 0 0 8px var(--primary-color); }
        100% { box-shadow: 0 0 12px var(--secondary-color); }
    }

     .vision-subsections-grid 
    {

        grid-template-columns: 1fr; 
         gap: 8px; /* Reduced from 16px */
        padding: 10px; /* Reduced from 18px */

    } 

  /* Show the mobile commitment panel */
    .mobile-commitment-panel
     {
        display: flex !important;
        background: rgba(0, 243, 255, 0.05);
        border-left: 3px solid #00F3FF;
        grid-column: 1 / -1; /* Make it span all columns */
        order: 999; /* Ensure it appears at the end */
    }
    
   


    #DefaultVisionCommitment
    {
        /* TODO. Find a way to to do this*/
        display:none;

    }

    
 
}

.main-content-no-sidenav {
    padding-top: 3vh; /*JDC_Responsive: Padding Top */
    margin-left: 5vw; /*JDC_Responsive: Margin Left */
    padding-left: 32px; /*needs Viewport Cleanup*/

    min-height: calc(97vh - var(--nav-height)); /* Ensure content area can fill screen below top nav */
    box-sizing: border-box;
}

/* Responsive adjustments */





/* ... existing code ... */
/* ... existing CSS ... */



.quantum-wave {
    display: block;
    position: relative; /* Use relative positioning instead of absolute */
    left: auto;
    top: auto;
    
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-color) 20%,
        var(--primary-color) 80%,
        transparent 100%);
    animation: wavePulse 4s infinite ease-in-out;
    z-index: 1;
}

@keyframes wavePulse {
    0% { transform: translateX(-100%); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 900px) {



    /*untested */

    .side-nav {
        width: 56px; /* Collapsed sidebar width */
        /* top: var(--nav-height); and bottom: 0; from base rule still apply */
    }
    .main-content-with-sidenav {
        margin-left: 56px; /* Adjust margin for collapsed sidebar */
        padding-left: 16px;
        padding-right: 16px;
    }
    .side-nav-item a {
        padding: 16px 10px;
        justify-content: center;
    }
    .side-nav-item a .nav-text { /* Assuming you wrap text in <span class="nav-text"> */
        display: none;
    }
    
}



/* ... rest of your CSS ... */