body {
  margin: 0 0;
}

/*────────────────────────────────────────────────────────────────────────────
  Cell & Grid Styles (flex‑based)
─────────────────────────────────────────────────────────────────────────────*/
.grid { 
  display:flex; 
  /*flex-direction: row;*/
  flex-wrap: wrap;
  gap:1rem; 
}

.grid > * { min-width: 0; }


@media (min-width: 1000px) {
  .grid > * {
    flex: 1 0 0%;
  }

  .grid.items-centered {
    align-items: center;
    justify-content: center;
  }
}

div.slogan {
  justify-content: center;
  img {
    height:75px;
  }
}

@media (max-width: 700px) {
  div.slogan {
    text-align: center;
  }
}

@media (min-width: 700px) {
  div.slogan {

    img {
      margin-left:auto;
    }
    
    h1 {
      flex:2;
      margin-right:auto;
    }
  }
}
/*
@media (max-width: 850px) {
  .grid {
    flex-direction: column;
  }
}
*/
.row  { display:flex; gap:1rem; }

.column { flex-direction:column; }

.cell {

  background:var(--cell-bg);
  border:1px solid var(--cell-border);
  padding:8px; 
  flex:1 1 0;
  display:flex; flex-direction:column;

}

.cell-content {
  flex:1; min-height:40px;
  padding:4px; border:1px solid #888;
  background:#fff; overflow:auto;
}

.cell-content.placeholder { color:#888; font-style:italic; }

.controls, .replacer-controls {
  margin-top:6px; display:flex; flex-wrap:wrap; gap:4px;
  font-size:.8em;
}

.replacer-controls input[type="file"] { flex:1 1 100%; }


/*────────────────────────────────────────────────────────────────────────────
  Cell & Grid Styles (CSS Grid)
─────────────────────────────────────────────────────────────────────────────*/
.grid_
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.container1 > section > * {

    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

@media print {
  .grid {
    display: grid;
    
    grid-template-columns: auto auto auto;
    
    /*
    grid-auto-columns: 200px;
    grid-gap: 10px;
    */
    gap: 1rem;
    align-items: start;
  }

  .container1 > section > * {

      max-width: 1123px;
      margin: 2rem auto;
      padding: 0 1rem;
  }

  .vl {
    height: 100%;
  }

}

section {
  padding: 1rem;
}

.header {
  min-height: 6.5rem;
}

.controls {
  text-align: center;
}

.phase {
  padding-left: 1.5rem;
}

.controls button{
  max-width:70px;
}

.logo {
  font-size:1.5rem;
  font-weight:700;
}

/* Basic table styling preserves semantic layout for reader mode */
table {
  width: 100%;
  border-collapse: collapse;
 /* min-width: 600px;  keeps columns from collapsing; adjust as needed */
}


.table-wrap {
  overflow-x: auto;                 /* horizontal scroll fallback on small screens */
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

form > * {
  display: block;
  background-color: transparent;
  font-size: var(--font-size-std);
  border-radius: 5px;
  outline: none;
  width: 100%;
  margin: 15px 0;
  span {  
    color: var(--text-heading-color)!important;
  }
} 

form > button {
  cursor: pointer;
}

form > input, textarea {
  border-style: solid;
}

form > textarea {
  resize: vertical;
}

form > input:focus, textarea:focus {
  border-color: var(--text-heading-color);
}

@media (min-width:1000px) {
  .contact-profile {
    text-align: center;
  }
}

.contact {
  button {
    padding: 0.35rem; 
    margin:0.35rem 0;
  }
}

.themes {
  font-size: var(--font-size-sm);
  border: 1px solid;
  border-radius: 50px;
  ul { list-style-type:none; }
  li {
    flex: auto;
 }
}
.nav-container {

  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  padding: 1rem;
}

.nav-mobile {
  display: none;
}


@media screen and (min-width: 500px) {
  .nav-container {
    gap:2rem;

    ul {
      display:flex; 
      list-style-type: none; 
      align-items:center;
      flex-direction: column;
    }
  } 

  .nav-items {
    gap:2rem;
    display: flex;
  }

  .nav-mobile-container {
    .switch-mobile { display: none; }
  }
}

@media screen and (max-width: 500px) {
  .nav-container {
    gap:1rem;
    flex-direction: row !important;
    align-content: flex-start;
    align-items: flex-start !important;
    .nav-mobile-container {

      flex-direction: column;
      align-items: flex-end;
      display:flex;

      .nav-wrapper {
        display: none;  
      }

      .switch-mobile {
        width: 60px;
        height: 40px;
        border-radius:5px;
        margin-right:0px;
      }
    }

    .nav-mobile-container:focus-within {
    .nav-wrapper {
        display: block;  
      }
    }
    .nav-logo {
      flex:auto;
    }

    ul {
      list-style-type: none; 
      text-align: right;

    }
  }  

  .nav-items {
    flex:none;
    gap:0.5rem;
    a {
      display: block;
    }
  }

  .nav-desktop { display: flex; }
  .nav-mobile {
    display:flex;
    flex-direction: column;
    cursor: pointer;
    align-items: end;
    a {
      display: inline-block;
      text-decoration: none;
      color: var(--text-nav-h-color);
    }
  }
}

@media screen and (min-width: 1020px) {
  .nav-container {
    ul {
      flex-direction:row;
    }
  }
}

@media screen and (max-width: 1020px) {
  .nav-container {
    flex-direction:column;
    align-items: center;

    li{

    }
  }
}

.nav-items a {
  color: var(--text-nav-h-color);
  text-decoration: none;
  font-weight: 500;
}

.dropdown-content {
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.link {
  display: inline-flex;
  align-items: flex-start;
}

.link img {
  vertical-align: top;
  margin-top:-5px;
}

.footer-container {
  max-width: 1200px;
  min-height: 60px;
  padding: 1rem;
  margin: auto;
}

.footer {
  p {
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
    /*color: #a00;*/
  }
  span {
    color: var(--text-nav-h-color);
  }
  a {
    text-decoration: none;
  }
  li {
    list-style-type: none;
  }
}

.footer-nav a {
  color: var(--text-nav-h-color);
} 

html {
  scroll-behavior: smooth;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--text-nav-h-color);
}

.contact {

  a {
    display: inline-block; 
    padding: 0.35rem;
    margin: 0.35rem 0;
    text-decoration: none;     
    background-color: var(--bg-button);         
    border-radius: 5px;   
    border-width: 2px;
    border-style: outset;
    border-color: rgb(143, 143, 157);
  }

  a:hover {
    border-color: rgb(103, 103, 116);

  }

}
.card-static {
    border: 1px solid #E2E8F0;
    padding: 0 1rem; /*2rem;*/
    border-radius: 8px;
    transition: transform 0.3s ease;
    margin: 2rem 0;
    /*max-width: 100%;*/
    flex: 1 1 300px;
}

.card-static.highlighted {
    border-color:var(--text-heading-color-lane1);
}

.card {
    border: 1px solid #E2E8F0;
    padding: 2rem;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.card.highlighted {
    border-color:var(--text-heading-color-lane1);
}

.card:hover {
  transform: translateY(-5px);
}

/* Service Card Hover Effect */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,255,255,0.2);
}


.accordion-trigger {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion-trigger:hover {
  background-color: #ccc;
}

.accordion-panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
} 


.accordion {
  /*max-width: 500px;*/
  /* font-family: Arial, sans-serif; */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.accordion.fixed {
    max-width: 500px;
  }

.accordion details {
  border-bottom: 1px solid #ddd;
}

.accordion details:last-of-type {
  border-bottom: none;
}

.accordion summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  /* background-color: #f7f7f7; */
  /* list-style: none; */
}

.accordion summary:hover {

  /*  background-color: #eaeaea; */
}

.accordion details[open] summary {

  /*background-color: #e2e2e2;*/
}

.accordion details p {
  padding: 12px 16px;
  margin: 0;
  /* background-color: #fff; 
  */
}


/* Utility */
.kicker {
  display:inline-block;
  padding:6px 10px;
  background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:20%;
  color:var(--text-heading-color-lane1) !important;
  font-size:13px
}


caption { text-align: left; padding: 8px; font-weight: 600; }

.component-table-wrap {
  border:1px solid var(--glass-border);
  border-radius:12px;
  padding:18px;
  overflow-x: auto;

  table {
    width:100%;
    border-collapse:collapse;
    color:inherit;
  }

  thead {
    text-align:left;
    color:var(--color-text);

  }
  th {
    padding:8px;
    border-bottom:1px solid var(--glass-border); 
  }
  td:first-child{

  }
  td {
    padding:8px;
  }
}

button.icon {
  border:none;
  background-color: transparent;
  cursor: pointer;
}

button.icon:hover {
  background-color: #aaa;
}

:root {

/* Color Sets */

/* == dark == */
  --col-bg-dark-primary-1 : #1f1f1f; /* 0f1316 1f1f1f */ /* invert = e0e0e0*/
  --col-bg-dark-primary-2 : #242424;
  --col-bg-dark-primary-3 : var(--col-bg-dark-primary-1);

  --col-bg-dark-secondary-1 : #0b0e12;
  --col-bg-dark-secondary-2 : #323a4c;
  --col-bg-dark-secondary-3 : #15191d;

  --col-bg-dark-header: #212529; /* 212529 121a2c 1f1f1f */ /* invert = dedad6 */
  --col-bg-dark-footer: var(--col-bg-dark-header);

/** font **/
  --col-h-dark-primary-1 : #d23a3a; /* f93c1a d23a3a a00 */
  --col-h-dark-primary-2 : #c92f2f;

  --col-h-dark-nav-1 : #f93c1a; /* ff6b6 */

  --col-txt-dark-primary-1 : #f6f7f9;
  --col-txt-dark-secondary-1 : #f6f7f9;

/** panel / card **/

  --col-card-dark-primary-1 : #14171a;
  --col-card-dark-secondary-1 : #15191d;

/** glass looks **/

  --glass-border: #ffffffaa;
  --glass-1: #ffffff15;
  --glass-2: #ffffff88;

/* == light == */

  --col-bg-light-primary-1 : #f7f7f8; /* e0e0e0 f7f7f8 */
  --col-bg-light-primary-2 : #fefefe;
  --col-bg-light-primary-3 : var(--col-bg-light-primary-1);

  --col-bg-light-secondary-1 : #eeeeee; /* dedad6 eeeeee f0f0f3 fff5f2 */
  --col-bg-light-secondary-2 : #fdf6f4;
  --col-bg-light-secondary-3 : #f6f9fb;

  --col-bg-light-header: var(--col-bg-light-primary-1); /* 212529 121a2c 1f1f1f */ /* invert = dedad6 */
  --col-bg-light-footer: var(--col-bg-light-header);

/** font **/
  --col-h-light-primary-1 : var(--col-h-dark-primary-1);
  --col-h-light-secondary-1 :var(--col-h-light-primary-1);

  --col-h-light-nav-1 : #a00;

  --col-txt-light-primary-1 : #111217;
  --col-txt-light-secondary-1 : #111217;


/** panel / card **/

  --col-card-light-primary-1 : #ffffff;
  --col-card-light-secondary-1 : #f0f1f3;



/* Light Theme */

  --bg-lane1-color: var(--col-bg-light-primary-2); 
  --bg-lane2-color: var(--col-bg-light-secondary-1);


  --bg-cell1-color: var(--col-card-light-primary-1);
  --bg-cell2-color: var(--col-card-light-secondary-1);
  --bg-cell3-color: #cbd;
  --bg-cell4-color: #dcb;

  --text-color-lane1: var(--col-txt-light-primary-1);
  --text-color-lane2: var(--col-txt-light-secondary-1);
  --text-color: var(--col-txt-light-primary-1);

  --text-nav-h-color: var(--col-h-light-nav-1);
  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-light-primary-1);
  --cd-text-color-lane2: var(--col-txt-light-primary-1);


  /* --bg-header2: #f0f0f0; */
  --bg-button: #e0e0e0;

  --link-color: #1a0dab;
  --text-color-button: #333333;


  --bg-header-color: var(--col-bg-light-header);
  --bg-footer-color: var(--col-bg-light-footer);

  --primary-dark: #121A2C;

  --gradient-primary1-lane1 : #ECECECFF;
  --gradient-secondary1-lane1 : #DADADA44;

  --gradient-primary1-lane2 : #242424FF;
  --gradient-secondary1-lane2 : #64646444;

  --gradient-primary-dark-black : #00000011;
  --gradient-secondary-dark-red : #aa000044;

  --gradient-secondary-dark-red : #aa000044;

  --accent-cyan: #00FFFF;
  --text-light: #E0E0E0;


  --bg-lane3-color: #eee;
  --bg-lane4-color: #ddd;
}

[data-theme="dark"] {

  --bg-lane1-color: var(--col-bg-dark-primary-1); 
  --bg-lane2-color: var(--col-bg-dark-header);


  --bg-cell1-color: var(--col-card-dark-primary-1);
  --bg-cell2-color: var(--col-card-dark-secondary-1);
  --bg-cell3-color: #657;
  --bg-cell4-color: #765;

  --text-color-lane1: var(--col-txt-dark-primary-1);
  --text-color-lane2: var(--col-txt-dark-secondary-1);
  --text-color: var(--col-txt-dark-primary-1);

  --text-nav-h-color: var(--col-h-dark-nav-1);
  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-dark-primary-1);
  --cd-text-color-lane2: var(--col-txt-dark-primary-1);


  --gradient-primary1-lane1 : #242424FF;
  --gradient-secondary1-lane1 : #64646444;

  --gradient-primary1-lane2 : #ECECECFF;
  --gradient-secondary1-lane2 : #DADADA44;

  --bg-header-color: var(--col-bg-dark-secondary-1);
  --bg-footer-color: var(--col-bg-dark-secondary-1);

  --bg-button: #333333;

  --link-color: #8ab4f8;
  --text-color-button: #e0e0e0;



  --bg-lane3-color: #444;
  --bg-lane4-color: #666;
}

[data-theme="light-dark"] {
  --bg-header-color: var(--col-bg-light-header);
  --bg-footer-color: var(--col-bg-light-footer);

  --bg-lane1-color: var(--col-bg-light-primary-2); 
  --bg-lane2-color: var(--col-bg-dark-secondary-1);

  --text-color-lane1: var(--col-txt-light-primary-1);
  --text-color-lane2: var(--col-txt-dark-secondary-1);
  --text-color: var(--col-txt-light-primary-1);

  --text-nav-h-color: var(--col-h-light-nav-1);
  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-dark-primary-1);
  --cd-text-color-lane2: var(--col-txt-light-primary-1);

  --bg-cell1-color: var(--col-card-dark-primary-1);
  --bg-cell2-color: var(--col-card-light-secondary-1);

  --bg-button: #e0e0e0;
}

[data-theme="dark-light"] {

  --bg-header-color: var(--col-bg-dark-secondary-1);
  --bg-footer-color: var(--col-bg-dark-secondary-1);

  --bg-lane1-color: var(--col-bg-dark-primary-1); 
  --bg-lane2-color: var(--col-bg-light-primary-1);

  --text-color-lane1: var(--col-txt-dark-primary-1);
  --text-color-lane2: var(--col-txt-light-secondary-1);
  --text-color: var(--col-txt-dark-primary-1);

  --text-nav-h-color: var(--col-h-dark-nav-1);
  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-light-primary-1);
  --cd-text-color-lane2: var(--col-txt-dark-primary-1);

  --bg-cell1-color: var(--col-card-light-primary-1);
  --bg-cell2-color: var(--col-card-dark-secondary-1);

  --bg-button: #333333;
  --text-color-button: #e0e0e0;
}


.lanes2 div:nth-child(2n+1 of .lane)
,.lanes3 div:nth-child(3n+1 of .lane) 
,.lanes4 div:nth-child(4n+1 of .lane)

,.lanes2 section:nth-child(2n+1 of .lane)
,.lanes3 section:nth-child(3n+1 of .lane)
,.lanes4 section:nth-child(4n+1 of .lane)

,.lanes2 article:nth-child(2n+1 of .lane)
,.lanes3 article:nth-child(3n+1 of .lane)
,.lanes4 article:nth-child(4n+1 of .lane)
{
  background-color: var(--bg-lane1-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell1-color);
  }

 
  * { color: var(--text-color-lane1); }

  h1, h2 { color : var(--text-heading-color-lane1); }
  .card > * { color : var(--cd-text-color-lane1); }

  /*
        --c1-0: hsl(from var(--col0-hsla) h s l);
        --c1-1: hsl(from var(--col1-hsla) h s l);
        --c1-2: hsl(from var(--col2-hsla) h s l);
        --c1-3: hsl(from var(--col3-hsla) h s l);

        --x1-0 : 85%;
        --x1-1 : 60%;
        --x1-2 : 13%;
        --x1-3 : 24%;

        --y1-0 : 80%;
        --y1-1 : 24%;
        --y1-2 : 82%;
        --y1-3 : 7%;

        --s1-start-0 : 9%;
        --s1-start-1 : 5%;
        --s1-start-2 : 5%;
        --s1-start-3 : 13%;

        --s1-end-0 : 55%;
        --s1-end-1 : 72%;
        --s1-end-2 : 52%;
        --s1-end-3 : 68%;
*/

/*
    background-image: 
      radial-gradient(circle at calc(var(--x1-0)) calc(var(--y1-0)), var(--c1-0) calc(var(--s1-start-0)), transparent calc(var(--s1-end-0)))
     ,radial-gradient(circle at calc(var(--x1-1)) calc(var(--y1-1)), var(--c1-1) calc(var(--s1-start-1)), transparent calc(var(--s1-end-1)))
     ,radial-gradient(circle at calc(var(--x1-2)) calc(var(--y1-2)), var(--c1-2) calc(var(--s1-start-2)), transparent calc(var(--s1-end-2)))
     ,radial-gradient(circle at calc(var(--x1-3)) calc(var(--y1-3)), var(--c1-3) calc(var(--s1-start-3)), transparent calc(var(--s1-end-3)));

    animation: fluid-gradient-animation-1 20s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
*/

/*
  background: linear-gradient(
    45deg, 
    var(--gradient-primary1-lane1), 
    var(--gradient-secondary1-lane1)
  );

  background-size: 400% 400%;

  animation: subtle-movement 20s infinite alternate; 
*/

}

.lanes2 div:nth-child(2n of .lane)
,.lanes3 div:nth-child(3n+2 of .lane)
,.lanes4 div:nth-child(4n+2 of .lane)

,.lanes2 section:nth-child(2n of .lane) 
,.lanes3 section:nth-child(3n+2 of .lane)
,.lanes4 section:nth-child(4n+2 of .lane)

,.lanes2 article:nth-child(2n of .lane) 
,.lanes3 article:nth-child(3n+2 of .lane)
,.lanes4 article:nth-child(4n+2 of .lane)

{
  background-color: var(--bg-lane2-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell2-color);
  }

  * { color: var(--text-color-lane2); }

  h1, h2 { color : var(--text-heading-color-lane2); }
  .card > * { color : var(--cd-text-color-lane2); }

/*
        --c2-0: hsl(from var(--col0-hsla-2) h s l);
        --c2-1: hsl(from var(--col1-hsla-2) h s l);
        --c2-2: hsl(from var(--col2-hsla-2) h s l);
        --c2-3: hsl(from var(--col3-hsla-2) h s l);

    background-image: 
      radial-gradient(circle at var(--x2-0) var(--y2-0), var(--c2-0) var(--s2-start-0), transparent var(--s2-end-0))
     ,radial-gradient(circle at var(--x2-1) var(--y2-1), var(--c2-1) var(--s2-start-1), transparent var(--s2-end-1))
     ,radial-gradient(circle at var(--x2-2) var(--y2-2), var(--c2-2) var(--s2-start-2), transparent var(--s2-end-2))
     ,radial-gradient(circle at var(--x2-3) var(--y2-3), var(--c2-3) var(--s2-start-3), transparent var(--s2-end-3));

    animation: fluid-gradient-animation-2 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
*/
  /*
    background-image: 
       radial-gradient(circle at var(--x2-0) var(--y2-0), var(--c2-0) var(--s2-start-0), transparent var(--s2-end-0))
      ,radial-gradient(circle at var(--x2-1) var(--y2-1), var(--c2-1) var(--s2-start-1), transparent var(--s2-end-1))
      ,radial-gradient(circle at var(--x2-2) var(--y2-2), var(--c2-2) var(--s2-start-2), transparent var(--s2-end-2))
      ,radial-gradient(circle at var(--x2-3) var(--y2-3), var(--c2-3) var(--s2-start-3), transparent var(--s2-end-3))
      ,radial-gradient(circle at var(--x2-4) var(--y2-4), var(--c2-4) var(--s2-start-4), transparent var(--s2-end-4))
      ,radial-gradient(circle at var(--x2-5) var(--y2-5), var(--c2-5) var(--s2-start-5), transparent var(--s2-end-5))
      ,radial-gradient(circle at var(--x2-6) var(--y2-6), var(--c2-6) var(--s2-start-6), transparent var(--s2-end-6))
      ,radial-gradient(circle at var(--x2-7) var(--y2-7), var(--c2-7) var(--s2-start-7), transparent var(--s2-end-7))
      ,radial-gradient(circle at var(--x2-8) var(--y2-8), var(--c2-8) var(--s2-start-8), transparent var(--s2-end-8))
      ,radial-gradient(circle at var(--x2-9) var(--y2-9), var(--c2-9) var(--s2-start-9), transparent var(--s2-end-9));

    animation: gradient-animation-2 15s linear infinite alternate-reverse;
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
*/

/*
  background: linear-gradient(
    45deg, 
    var(--gradient-primary1-lane2), 
    var(--gradient-secondary1-lane2)
  );

  background-size: 400% 400%;

  animation: subtle-movement 20s infinite alternate; 
*/

}

.lanes3 div:nth-child(3n of .lane)
,.lanes4 div:nth-child(4n+3 of .lane)

,.lanes3 section:nth-child(3n of .lane)
,.lanes4 section:nth-child(4n+3 of .lane)

,.lanes3 article:nth-child(3n of .lane)
,.lanes4 article:nth-child(4n+3 of .lane)

{
  background-color: var(--bg-lane3-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell3-color);
  }
}

.lanes4 div:nth-child(4n of .lane)

,.lanes4 section:nth-child(4n of .lane)

,.lanes4 article:nth-child(4n of .lane)
{
  background-color: var(--bg-lane4-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell4-color);
  }
}



* {
  color: var(--text-color);
}

h1, h2 {
  color: var(--text-heading-color);  /*var(--col-h-dark-nav-1);*/
}


.phase {
  border-left: 3px solid blue;
}

.header, .footer {
    background-color: var(--bg-header-color);
}

button {
  background-color: var(--bg-button);
  color : var(--text-color-button);
}

.component-table-wrap {
  background:var(--glass-1); /*--color-surface */
  color:var(--color-muted);
}

/* Hero Section Styling */
.hero-section {
/*
  background: var(--primary-dark);
*/
  color: var(--text-light);

  position: relative;

  overflow: hidden;
}

/* Animated Background */
.hero-background {

/*
  position: absolute;
  width: 100%;
  height: 100%;
*/

  background: linear-gradient(
    45deg, 
    var(--primary-dark), 
    var(--gradient-primary-dark-red)
  );

  background-size: 400% 400%;

  animation: subtle-movement 20s infinite alternate; 
  /*
    infinite alternate
    ease infinite
  */
}

@keyframes subtle-movement {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.sidebar-fixed 
{
   i {
    color: var(--text-heading-color-lane1);
  }
}

section > hr { opacity:0.3; }
:root {

  --font-size-sm: 1.15em;
  --font-size-std: 1.25em;

  --font-size-xs: 0.8em;
  --font-size-s: 1.0em;
  --font-size-l: 1.35em;
  --font-size-xl: 1.5em;


  --font-line-height-sm : 1.25;
  --font-line-height-std : 1.5;
  --font-line-height-l : 1.65;
  --font-line-height-xl : 1.85;

  --font-family-1: "Georgia", serif;
  --font-family-2: "Garamond", serif;
  --font-family-3: "Courier New", serif;
  --font-family-4: "Courier New", monospace;
  --font-family-5: "Open Sans", monospace;

}

body {
  word-wrap: break-word;
  font-family: var(--font-family-5);
}

h1 {
  font-size:2em;
}

@media (max-width:500px){
  p {
    font-size : var(--font-size-s);
    line-height: var(--font-line-height-sm);
  }

  .services {
    ul {
      font-size : var(--font-size-s);
      line-height: var(--font-line-height-sm);
    }
  }
}

@media (min-width:500px){
  p {
    font-size : var(--font-size-sm);
    line-height: var(--font-line-height-sm);
  }

  .services {
    ul {
      font-size : var(--font-size-sm);
      line-height: var(--font-line-height-sm);
    }
  }
}

@media (min-width:1080px){
  p {
    font-size : var(--font-size-std);
    line-height: var(--font-line-height-std);
  }
  .services {
    ul {
      font-size : var(--font-size-std);
      line-height: var(--font-line-height-std);
    }
  }
}

@media (min-width:1600px){
  p {
    font-size : var(--font-size-l);
    line-height: var(--font-line-height-l);
  }

  .services {
    ul {
      font-size : var(--font-size-l);
      line-height: var(--font-line-height-l);
    }
  }
}

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

.summary-h2 {
  font-size : var(--font-size-l);
}

.summary-h3 {
  font-size : var(--font-size-std);
}

.sidebar-fixed {
  font-size : var(--font-size-l);
}

div.card-static > p {
  font-size : var(--font-size-s);
}

.accordion details p {
  font-size: var(--font-size-s);
  line-height: 1.5;
}

p.contact {
 a {
  font-size: 0.8em;
 }
 i {
  display: inline-block;
 }
}

.contact-head {
  font-size: var(--font-size-std);
}
:root {

  --bg-img1 : url("../img/general/backgrounds/dlts_banner_new.jpg");
  --bg-img2 : url("../img/general/hex1_inv.jpg");
  --bg-img3 : url("../img/general/ori/grid-3230205_dark_LN.jpg");

  --bg-banner-1 : url("../img/promo/DLTS_IT_Services.svg");
  --bg-banner-2 : url("../img/bg/banner_2.jpeg");
  --bg-banner-3 : url("../img/bg/banner_3.jpeg");
  --logo : url("../img/Logo_2D.svg");
}

[data-theme="light"]
{
  --logo : url("../img/Logo_2D.svg");
}
[data-theme="light-dark"]
{
  --logo : url("../img/Logo_2D.svg");
}

[data-theme="dark"], 
[data-theme="dark-light"] {
  --logo : url("../img/Logo_2D_inv.svg");
}


.img-logo {
    content : var(--logo);
    display: block;
  }

.lanes2 div:nth-child(2n+1 of .bg-img)
,.lanes3 div:nth-child(3n+1 of .bg-img) 
,.lanes4 div:nth-child(4n+1 of .bg-img) {
  background-image: var(--bg-img1);
}

.lanes2 div:nth-child(2n+2 of .bg-img)
,.lanes3 div:nth-child(3n+2 of .bg-img)
,.lanes4 div:nth-child(4n+2 of .bg-img) {
  background-image: var(--bg-img2);
}

.lanes3 div:nth-child(3n of .bg-img) 
,.lanes4 div:nth-child(4n+3 of .bg-img) {
  background-image: var(--bg-img3);
}

.bg-img {
  background-attachment: fixed;
  background-size: cover;
}

.thumb {

  img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5%;
  }

  p{
    text-align: center;  
    margin-top:auto;
  }
}

.grid > .left-img {
  order: -1;
}

.grid > .right-img {
  order: 99;
}

@media (max-width: 1000px) {
.grid > .right-img {
  order: -1;
}
}

/* 2. Each “card” */
.gallery-item {
  /* base width, will shrink/grow */
  flex: 1 1 200px;    
  display: flex;
  flex-direction: column;
  /* border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fafafa;
  */
}

/* 3. Wrapper for the image to enforce a fixed aspect-ratio */
.gallery-item {
  /* 
       position: relative;
  */


  p{
  text-align: center;  
  /*margin-top: auto; */
      padding: 0.5rem;
  }
}

/* 4. The actual image—fills the wrapper, keeps aspect, crops if necessary */
.img-wrap img {
  width: 100%;
  height: 300px; /*100 %*/
  object-fit: cover;
    border-radius: 5%;
}

.banner {
  
  background-image: var(--bg-banner-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height:150px;
}
 
@media(min-width: 700px){
  .banner {
    height: 350px;
  }
} 

@media(max-width: 350px){
  .banner {
    height: 100px;
  }
} 

 /*
.showcase { 
  div.thumb:hover {
    flex:5 !important;
    background: white;
  } 
}
*/

.card-static .thumb > img {
  /*max-width: 128px;*/
} 
.sidebar-fixed {
  position: fixed;
  top:90%;
  right:7%;
  /*margin-top: -192px;*/
  /*opacity:0.15;*/
  opacity:0.7;
  list-style-type: none;
}

@media (max-width: 1500px) {
  .sidebar-fixed {
    right:1%;
  }
}

@media (max-width: 500px) {
  .sidebar-fixed {
    right:0%;
  }
}

/*
@media (max-width: 1150px) {
  .sidebar-fixed {
    right:10%;
  }
}

@media (max-width: 600px) {
  .sidebar-fixed {
    right:12%;
  }
}
*/

.teaser-list {
  padding-left: 0;
  li {
    margin: 10px 0;
  }
}