/*
 * Globals
 */

/* .material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
} */


.animated-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); /* semi-transparent white */
  color: black;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;

  /* Glassmorphism */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* soft drop shadow */
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border */
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Safari flex centering fix */
.safari-center-fix {
    display: flex !important;
    flex-direction: column;       /* keep children stacked vertically */
    align-items: center;          /* center horizontally */
    width: 100%;                  /* take full width of viewport */
    margin-left: auto !important;
    margin-right: auto !important;
}

.safari-center-fix .animated-section {
    width: 100%;                  /* ensure rows stretch full width */
    max-width: 1200px;            /* optional: match section max-width */
}

/* Expanding background dot */
.btn-dot-bg {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: black;
  --circle-color: rgb(60, 255, 0);
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  z-index: 0;
}

/* Small dot on top */
.btn-dot {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(0, 0, 0); /* changes to white on hover */
  transform: translateY(-50%);
  z-index: 1;
}

/* Button text */
.btn-text {
  position: relative;
  font-family:'helvetica', 'Arial Narrow', Arial, sans-serif !important;
  font-size: 1.5rem;
  z-index: 2;
  color: black;
  transition: color 0.2s ease;
  padding-left:20px;
}



/* PAGE TRANSISTION START*/

/* Transition Overlay Container */
#page-transition {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Columns Container */
.columns {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Each Column */
.column {
  flex: 1;
  background: black;
  transform: translateY(0); /* Starts covering the screen */
}

/* Center Loader */
.loader {
  position: absolute;
  z-index: 2;
}

.loader img {
  width: 300px;
}


/* PAGE TRANSISTION END*/


.spray {
    background-image: url("/Images/Spray8.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:cover; /* Resize the background image to cover the entire container */
}

.spray2 {
    background-image: url("/Images/Spray7.png");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size:cover; /* Resize the background image to cover the entire container */
}


.big-box {
  overflow: clip;
}

.box-hover-animate {
  display: inline-flex;
  align-items: center;
}

.big-box {
  color: rgb(255, 255, 255);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.box-left {
  overflow: hidden;
  /* padding-right: 3px; */
  max-width: 0;
  opacity: 0;
  transform: translate(-10px);
  transition:
    max-width 0.4s ease 0.0s, /* delay width expansion */
    opacity 0.4s ease 0.0s,
    transform 0.4s ease 0.0s; /* delay transform */
  white-space: nowrap; /* prevent wrapping */
  display: inline-block;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.box-right {
  transition: 
    transform 0.4s ease,
    margin-left 0.4s ease;
  display: inline-block;
  padding-right: 3px;
}

/* Hover effect on the whole container */
.box-hover-animate:hover .box-left {
  max-width: 40px; /* adjust based on content */
  transform: translateX(0px);
  opacity: 1;
}

.box-hover-animate:hover .box-right {
  transform: translateX(0px);
  margin-left: 4px;
}








span.material-symbols-outlined.ff {
  font-size: 25px;
  line-height: 0;
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 60;
}

a:link {
    text-decoration: none;
}

.svg-ff {
  display: inline-block;
  height: 40px;
  width: 40px;
  margin-left: 22px;
  margin-right: 25px;
  background-image: url('/Images/SVG-FF.svg');
  background-repeat: no-repeat;
  background-position: 0px 10px;
}

.svg-rr {
  display: inline-block;
  height: 40px;
  width: 40px;
  margin-left: 22px;
  margin-right: 25px;
  background-image: url('/Images/SVG-RR.svg');
  background-repeat: no-repeat;
  background-position: 0px 10px;
}


 ::-moz-selection { /* Code for Firefox */
  color: rgb(0, 0, 0);
  background: lawngreen;
}

::selection {
  color: rgb(0, 0, 0);
  background: lawngreen;
}


html, body {
    overflow-x: hidden;
  }


mark {
  color: rgb(0, 0, 0);
  background: lawngreen;
}

/* Fonts */
@font-face {
  font-family: 'Helvectica', 'Arial Unicode MS';
  src: url('Fonts/Helvetica.ttf') format('opentype');
}

@font-face {
  font-family: 'Segoe UI';
  src: url('../Fonts/SegoeUISymbol.woff') format('woff');
}


/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}



/*
 * Base structure
 */


body {
padding-top: 0px;
}

h1 {
  color: rgb(0, 0, 0);
  font-weight: 700;
  font-family: 'Helvetica', sans-serif; /* Use the defined font-family name */
}

h2 {
  color: rgb(0, 0, 0);
}

h4 {
  color: rgb(0, 0, 0);
}

p {
  text-align: left;
  font-size: 16px;
  letter-spacing: 0px;
  margin: 0;
  color: rgb(0, 0, 0);
}

.word {
  overflow: clip;
}

.large-text .word{
  padding-bottom: 1vi;
}

/* button {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 35px;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}

button:hover {
  background-color: rgb(0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  color: rgb(255, 255, 255);
} */

button {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 35px;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  width:200px;
}

button:hover {
  background-color: rgb(0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  color: rgb(255, 255, 255);
}

.button {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 35px;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  width:200px;
}

.button:hover {
  background-color: rgb(0, 0, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  color: rgb(255, 255, 255);
}

/*.cover-container {
  max-width: 42em;
}*/

.button-wht {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(255, 255, 255, 0);
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 35px;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  width:200px;
  opacity: 1;
}

.button-wht:hover {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

.plus-spline-row {
  display: flex !important;
  justify-content: space-between;
  max-width: 1000px;
  min-width: 300px;
  margin: 1.5rem auto 3rem auto; /* Centered with spacing below */
  color: white;
  font-size: 6rem;
  /* letter-spacing: 4.2rem; */
  text-align: center;
  font-weight: 200;
}

.animate-footer-contact {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.animate-footer-contact .text span {
  display: inline-block;
  will-change: transform, opacity;
  text-transform: uppercase;
}



/*
 * Header
 */

 .head-nav {
   position: fixed;
   width: 100%;
   z-index: 2;
   margin-top: 5px;
 }

 .menu-bar {
  position: absolute;
  z-index: 9950;
}

#hamburger{
  z-index: 3;
  mix-blend-mode: exclusion;
}

#hamburger h1{
  z-index: 3;
  color: rgb(255, 255, 255);
}

#dlBtn1 {
  width:50px;
  height:50px;
  cursor: pointer;
}

 
.box-nav {
  width: 710px;
  height: 90vh;
  min-height: 600px;
  background-color: rgb(0, 0, 0);
  right: 0px;
  position: absolute;
  border-radius: 15px;
  padding: 0px;
  padding-top: 85px;
  overflow: clip;
  transition-duration: 1s;
  transform: translateX(10px);
  margin-top: -5px;
}

.box-nav-close {
  width:0px;
  height: 90vh;
  background-color: rgb(0, 0, 0);
  right: 0px;
  position: fixed;
  border-radius: 15px;
  transform-origin: right center 0;
  transition-duration: 1s;
  transform-style: preserve-3d;
  overflow: clip;
  transform: translateX(10px);
  margin-top: -5px;
}

.nav-text-lg {
  /* height:600px; */
}


.nav-text-lg h1{
  font-size: 5rem;
  line-height: 70px;
  letter-spacing: -5px;
  font-family: 'Helvetica', sans-serif; /* Use the defined font-family name */
  font-weight: 700;
  white-space: nowrap;
  margin-bottom: 0px !important;
}

.menu-page-text {
  font-size: 10pt;
  margin-top: 37px;
  margin-right: 7px;
  line-height: 12px;
  letter-spacing: -0.5pt;
  text-transform: uppercase;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(0, 0, 0);
}

.menu-section-text p{
  font-size: 10pt;
  letter-spacing: -0.5pt;
  text-transform: uppercase;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  color: rgb(255, 255, 255);
  overflow: clip;
  white-space: pre;
}

.menu-section-text a{
  font-size: 10pt;
  letter-spacing: -0.5pt;
  text-transform: uppercase;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  color: rgb(255, 255, 255);
  overflow: clip;
  white-space: pre;
}

.border {
  border-color: rgb(255, 255, 255) !important;
  border-width: 1px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-bottom: 0px !important;
}

/* General link container */
.dclip {
  background-color: transparent;
  color: white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 5px;
  transition: all 0.5s ease;
  cursor: pointer;
}

/* Text inside general container */
.dclip h1 {
  color: white;
  margin: 5px 0 10px 0;
  padding-left: 0;
  transition: all 0.5s ease;
}

/* Hover effect for general container */
.dclip:hover {
  background-color: white;
  color: black;
  padding-left: 5px;
}

/* Text follows parent hover */
.dclip:hover h1 {
  color: black;
  padding-left: 5px;
}

/* Active link container */
.dclip-active {
  background-color: lawngreen;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 0;
  padding-left: 5px;
  transition: all 0.5s ease;
  cursor: pointer;
}

/* Hover effect for active container */
.dclip-active:hover {
  padding-left: 10px;
}

/* Text inside active link container */
.dclip-active h1 {
  color: black; /* Always black on lawn green */
  margin: 5px 0 10px 0;
  padding-left: 0;
  transition: all 0.5s ease;
}

/* When hovering the active container, text adjusts */
.dclip-active:hover h1 {
  padding-left: 5px;
}

/* Active state (for click or programmatic focus) */
.dclip:active {
  background-color: lawngreen;
  color: black;
  padding-left: 5px;
}

/* Text color when active is applied */
.dclip:active h1 {
  color: black;
}


.home-nav-button {
  width: 300px;
  height: 75px;
}

.case-studies-nav-button {
  width: 600px;
  height: 75px;
}
.galleries-nav-button {
  width: 490px;
  height: 75px;
}
.about-nav-button {
  width: 340px;
  height: 75px;
}
 

#menu-text {
transform: translateY(-38px);
margin-bottom: 0rem !important;
margin-left: -30px;
font-size: 5.25em;
letter-spacing: -5px;
}


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

.logo2 {
  position:relative;
  max-width:100%;
  max-height:100%;
  margin-top:-50%;
  margin-left:0%;
  margin-bottom: 20%;
}

/* .logo-svg {
  height: 100vw;
  width: 100%;
  background-color: darkblue;
  clip-path: polygon( 89.992% 37.799%,89.992% 37.799%,89.918% 37.756%,89.844% 37.726%,89.769% 37.707%,89.694% 37.696%,89.62% 37.693%,89.545% 37.694%,89.471% 37.698%,89.397% 37.703%,89.324% 37.708%,89.252% 37.71%,89.252% 37.71%,85.571% 37.707%,81.89% 37.705%,78.209% 37.703%,74.528% 37.701%,70.847% 37.7%,67.166% 37.699%,63.485% 37.698%,59.805% 37.697%,56.124% 37.696%,52.443% 37.695%,52.443% 37.695%,52.234% 37.706%,52.047% 37.74%,51.882% 37.796%,51.738% 37.875%,51.617% 37.977%,51.518% 38.101%,51.441% 38.248%,51.386% 38.417%,51.352% 38.609%,51.341% 38.823%,51.341% 38.823%,51.341% 40.927%,51.341% 43.031%,51.341% 45.135%,51.341% 47.24%,51.341% 49.344%,51.341% 51.448%,51.341% 53.552%,51.341% 55.656%,51.341% 57.761%,51.341% 59.865%,51.341% 59.865%,51.342% 60.136%,51.349% 60.353%,51.368% 60.522%,51.406% 60.649%,51.466% 60.741%,51.557% 60.802%,51.683% 60.839%,51.851% 60.859%,52.066% 60.866%,52.334% 60.867%,52.334% 60.867%,52.998% 60.866%,53.661% 60.864%,54.325% 60.862%,54.989% 60.859%,55.653% 60.857%,56.317% 60.856%,56.98% 60.857%,57.644% 60.86%,58.307% 60.865%,58.971% 60.874%,58.971% 60.874%,59.165% 60.871%,59.332% 60.852%,59.472% 60.817%,59.589% 60.764%,59.683% 60.69%,59.755% 60.596%,59.809% 60.479%,59.845% 60.338%,59.864% 60.171%,59.87% 59.977%,59.87% 59.977%,59.863% 58.469%,59.858% 56.96%,59.855% 55.452%,59.854% 53.944%,59.853% 52.436%,59.854% 50.927%,59.854% 49.419%,59.855% 47.911%,59.856% 46.402%,59.856% 44.894%,59.856% 44.894%,59.857% 44.6%,59.865% 44.364%,59.886% 44.181%,59.926% 44.042%,59.992% 43.943%,60.09% 43.877%,60.227% 43.836%,60.409% 43.815%,60.642% 43.807%,60.934% 43.806%,60.934% 43.806%,61.779% 43.806%,62.623% 43.806%,63.468% 43.806%,64.313% 43.806%,65.158% 43.805%,66.003% 43.806%,66.847% 43.806%,67.692% 43.807%,68.537% 43.808%,69.382% 43.809%,69.382% 43.809%,69.454% 43.807%,69.528% 43.803%,69.601% 43.797%,69.676% 43.794%,69.75% 43.794%,69.824% 43.799%,69.898% 43.812%,69.971% 43.836%,70.043% 43.871%,70.113% 43.92%,70.113% 43.92%,70.08% 44.012%,70.035% 44.092%,69.981% 44.163%,69.919% 44.225%,69.851% 44.281%,69.779% 44.332%,69.705% 44.38%,69.63% 44.427%,69.556% 44.474%,69.485% 44.524%,69.485% 44.524%,68.848% 44.994%,68.21% 45.464%,67.572% 45.933%,66.934% 46.402%,66.296% 46.871%,65.658% 47.34%,65.019% 47.809%,64.381% 48.277%,63.743% 48.746%,63.105% 49.215%,63.105% 49.215%,62.92% 49.352%,62.776% 49.466%,62.674% 49.563%,62.613% 49.647%,62.593% 49.727%,62.614% 49.806%,62.678% 49.893%,62.783% 49.991%,62.93% 50.108%,63.119% 50.249%,63.119% 50.249%,65.569% 52.059%,68.019% 53.87%,70.47% 55.68%,72.921% 57.49%,75.372% 59.3%,77.822% 61.11%,80.273% 62.92%,82.724% 64.731%,85.175% 66.541%,87.626% 68.352%,87.626% 68.352%,87.716% 68.419%,87.807% 68.487%,87.897% 68.556%,87.987% 68.625%,88.076% 68.694%,88.165% 68.763%,88.254% 68.833%,88.343% 68.902%,88.432% 68.972%,88.522% 69.041%,88.522% 69.041%,88.838% 69.286%,89.087% 69.491%,89.273% 69.669%,89.398% 69.831%,89.464% 69.991%,89.474% 70.161%,89.431% 70.355%,89.336% 70.586%,89.193% 70.865%,89.004% 71.206%,89.004% 71.206%,86.914% 74.627%,84.628% 77.794%,82.146% 80.701%,79.465% 83.343%,76.586% 85.717%,73.508% 87.816%,70.23% 89.638%,66.752% 91.176%,63.071% 92.427%,59.188% 93.385%,59.188% 93.385%,54.77% 94.093%,50.449% 94.397%,46.229% 94.3%,42.113% 93.801%,38.103% 92.901%,34.202% 91.602%,30.413% 89.903%,26.739% 87.806%,23.182% 85.312%,19.746% 82.42%,19.746% 82.42%,17.494% 80.212%,15.441% 77.897%,13.585% 75.476%,11.923% 72.951%,10.456% 70.323%,9.181% 67.594%,8.097% 64.766%,7.203% 61.841%,6.496% 58.82%,5.976% 55.706%,5.976% 55.706%,5.768% 53.867%,5.639% 52.034%,5.588% 50.208%,5.616% 48.387%,5.72% 46.571%,5.9% 44.762%,6.154% 42.958%,6.482% 41.16%,6.883% 39.367%,7.356% 37.58%,7.356% 37.58%,7.369% 37.536%,7.382% 37.493%,7.396% 37.45%,7.41% 37.407%,7.424% 37.364%,7.438% 37.32%,7.451% 37.277%,7.463% 37.234%,7.474% 37.19%,7.483% 37.146%,7.483% 37.146%,7.521% 36.987%,7.568% 36.856%,7.623% 36.752%,7.689% 36.676%,7.766% 36.628%,7.855% 36.608%,7.956% 36.617%,8.072% 36.654%,8.202% 36.72%,8.349% 36.815%,8.349% 36.815%,8.725% 37.081%,9.102% 37.344%,9.48% 37.605%,9.86% 37.865%,10.24% 38.124%,10.621% 38.383%,11.002% 38.641%,11.383% 38.899%,11.763% 39.158%,12.143% 39.417%,12.143% 39.417%,13.456% 40.316%,14.769% 41.215%,16.082% 42.114%,17.395% 43.014%,18.707% 43.913%,20.02% 44.812%,21.333% 45.712%,22.646% 46.611%,23.959% 47.51%,25.272% 48.41%,25.272% 48.41%,25.419% 48.522%,25.533% 48.636%,25.615% 48.75%,25.664% 48.865%,25.681% 48.981%,25.665% 49.097%,25.616% 49.215%,25.534% 49.333%,25.42% 49.452%,25.273% 49.572%,25.273% 49.572%,23.82% 50.639%,22.367% 51.705%,20.914% 52.772%,19.462% 53.839%,18.009% 54.906%,16.556% 55.973%,15.103% 57.039%,13.651% 58.106%,12.198% 59.173%,10.745% 60.24%,10.745% 60.24%,10.686% 60.284%,10.627% 60.329%,10.568% 60.375%,10.509% 60.421%,10.451% 60.468%,10.392% 60.514%,10.333% 60.562%,10.273% 60.609%,10.213% 60.657%,10.152% 60.705%,10.152% 60.705%,10.215% 60.767%,10.281% 60.811%,10.347% 60.84%,10.414% 60.857%,10.481% 60.864%,10.548% 60.864%,10.615% 60.859%,10.68% 60.853%,10.745% 60.847%,10.807% 60.844%,10.807% 60.844%,14.466% 60.846%,18.124% 60.846%,21.782% 60.847%,25.44% 60.848%,29.098% 60.848%,32.757% 60.848%,36.415% 60.848%,40.073% 60.848%,43.731% 60.848%,47.39% 60.847%,47.39% 60.847%,47.696% 60.846%,47.942% 60.838%,48.134% 60.816%,48.277% 60.775%,48.381% 60.707%,48.45% 60.606%,48.492% 60.466%,48.514% 60.28%,48.522% 60.041%,48.523% 59.744%,48.523% 59.744%,48.523% 57.655%,48.523% 55.566%,48.523% 53.477%,48.523% 51.388%,48.523% 49.299%,48.523% 47.21%,48.523% 45.121%,48.523% 43.032%,48.523% 40.943%,48.523% 38.854%,48.523% 38.854%,48.513% 38.665%,48.483% 38.496%,48.433% 38.346%,48.363% 38.217%,48.273% 38.107%,48.163% 38.017%,48.033% 37.947%,47.883% 37.897%,47.713% 37.867%,47.523% 37.856%,47.523% 37.856%,46.889% 37.856%,46.255% 37.856%,45.622% 37.855%,44.988% 37.855%,44.355% 37.855%,43.721% 37.855%,43.087% 37.855%,42.454% 37.856%,41.82% 37.856%,41.187% 37.856%,41.187% 37.856%,40.913% 37.857%,40.694% 37.865%,40.524% 37.884%,40.395% 37.92%,40.303% 37.981%,40.241% 38.071%,40.203% 38.197%,40.184% 38.363%,40.177% 38.577%,40.176% 38.844%,40.176% 38.844%,40.175% 40.338%,40.174% 41.831%,40.173% 43.324%,40.172% 44.817%,40.172% 46.31%,40.171% 47.804%,40.17% 49.297%,40.17% 50.79%,40.169% 52.283%,40.168% 53.776%,40.168% 53.776%,40.167% 54.084%,40.159% 54.331%,40.138% 54.524%,40.096% 54.668%,40.028% 54.772%,39.927% 54.842%,39.787% 54.884%,39.6% 54.906%,39.36% 54.914%,39.06% 54.916%,39.06% 54.916%,38.178% 54.916%,37.295% 54.915%,36.413% 54.915%,35.53% 54.915%,34.648% 54.914%,33.766% 54.913%,32.883% 54.911%,32.001% 54.91%,31.118% 54.908%,30.236% 54.905%,30.236% 54.905%,30.168% 54.908%,30.096% 54.914%,30.022% 54.922%,29.948% 54.928%,29.876% 54.93%,29.807% 54.926%,29.745% 54.912%,29.69% 54.887%,29.646% 54.847%,29.613% 54.79%,29.613% 54.79%,29.591% 54.706%,29.595% 54.633%,29.619% 54.57%,29.66% 54.515%,29.715% 54.466%,29.778% 54.423%,29.847% 54.382%,29.916% 54.344%,29.983% 54.306%,30.042% 54.266%,30.042% 54.266%,30.709% 53.772%,31.376% 53.278%,32.043% 52.785%,32.71% 52.293%,33.378% 51.8%,34.046% 51.308%,34.714% 50.816%,35.382% 50.325%,36.05% 49.833%,36.718% 49.341%,36.718% 49.341%,36.902% 49.205%,37.044% 49.093%,37.145% 48.999%,37.205% 48.917%,37.223% 48.841%,37.2% 48.764%,37.134% 48.681%,37.027% 48.585%,36.878% 48.47%,36.686% 48.33%,36.686% 48.33%,34.315% 46.603%,31.943% 44.877%,29.571% 43.15%,27.2% 41.423%,24.828% 39.696%,22.457% 37.969%,20.085% 36.242%,17.714% 34.515%,15.343% 32.788%,12.971% 31.06%,12.971% 31.06%,12.802% 30.935%,12.634% 30.807%,12.466% 30.678%,12.299% 30.548%,12.132% 30.419%,11.965% 30.29%,11.796% 30.163%,11.626% 30.039%,11.454% 29.917%,11.279% 29.8%,11.279% 29.8%,11.147% 29.707%,11.041% 29.613%,10.959% 29.517%,10.901% 29.419%,10.866% 29.316%,10.854% 29.207%,10.865% 29.092%,10.896% 28.968%,10.948% 28.834%,11.02% 28.688%,11.02% 28.688%,11.5% 27.83%,11.997% 26.983%,12.512% 26.149%,13.044% 25.327%,13.593% 24.518%,14.162% 23.721%,14.748% 22.938%,15.354% 22.168%,15.978% 21.412%,16.622% 20.669%,16.622% 20.669%,18.408% 18.757%,20.27% 16.962%,22.209% 15.288%,24.227% 13.737%,26.324% 12.314%,28.502% 11.023%,30.761% 9.866%,33.101% 8.849%,35.525% 7.973%,38.033% 7.245%,38.033% 7.245%,42.563% 6.278%,47.006% 5.728%,51.361% 5.596%,55.624% 5.884%,59.793% 6.595%,63.867% 7.731%,67.841% 9.294%,71.714% 11.287%,75.484% 13.711%,79.147% 16.57%,79.147% 16.57%,81.405% 18.628%,83.48% 20.798%,85.375% 23.077%,87.089% 25.464%,88.624% 27.956%,89.981% 30.551%,91.161% 33.248%,92.165% 36.043%,92.993% 38.936%,93.647% 41.924%,93.647% 41.924%,93.983% 43.977%,94.221% 46.028%,94.362% 48.075%,94.406% 50.119%,94.354% 52.159%,94.206% 54.195%,93.963% 56.226%,93.624% 58.253%,93.191% 60.274%,92.664% 62.29%,92.664% 62.29%,92.585% 62.561%,92.515% 62.773%,92.448% 62.931%,92.377% 63.035%,92.297% 63.088%,92.199% 63.092%,92.079% 63.05%,91.928% 62.963%,91.742% 62.835%,91.514% 62.666%,91.514% 62.666%,89.845% 61.422%,88.177% 60.178%,86.509% 58.934%,84.84% 57.69%,83.172% 56.445%,81.503% 55.201%,79.835% 53.957%,78.166% 52.713%,76.498% 51.469%,74.83% 50.224%,74.83% 50.224%,74.612% 50.061%,74.443% 49.926%,74.323% 49.813%,74.251% 49.713%,74.229% 49.621%,74.256% 49.528%,74.332% 49.427%,74.457% 49.312%,74.632% 49.175%,74.857% 49.008%,74.857% 49.008%,76.298% 47.95%,77.738% 46.892%,79.179% 45.835%,80.62% 44.777%,82.06% 43.719%,83.501% 42.661%,84.941% 41.602%,86.381% 40.544%,87.821% 39.485%,89.261% 38.426%,89.261% 38.426%,89.338% 38.372%,89.417% 38.319%,89.498% 38.267%,89.578% 38.214%,89.657% 38.159%,89.733% 38.1%,89.805% 38.035%,89.872% 37.964%,89.933% 37.886%,89.986% 37.797% );

} */

.logo-svg {
  margin-top: -6%;
  height: auto;
  width: 100vw; /* Max width to span full viewport width */
  aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
}

.cls-logo-stroke {
  fill: rgba(0, 0, 0, 0);
  stroke: rgb(136, 255, 0);        /* stroke color */
  stroke-width: 0.005;    /* tweak as needed depending on SVG units */
  stroke-linejoin: round; /* optional: smoother corners */
}


.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 110vh; /* 110% of viewport height */
  overflow: hidden;
  position: absolute;
  mix-blend-mode: difference;
}


.logo-invert {
  /* margin-top: 12px; */
  z-index: 5;
  height: 30px;
  color: #ffffff;
}

.logo-color {
  fill: currentColor;
}


.logo-text {
  margin-top: 12px;
  font-size: 2.5rem;
  letter-spacing: -1px;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

.marquee {
  width: 95%;
  max-width: 1920px;
  height: 50px;	
  grid-column-gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  overflow: hidden;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
  }

  @keyframes scroll2 {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(calc(0 - 1rem));
    }
    }

.scroll-marquee {
  animation: scroll 20s linear infinite;
}

.scroll2-marquee {
  animation: scroll2 20s linear infinite;
}

.marquee-content {
  min-width: 90%;
  grid-column-gap: 1rem;
  flex: none;
  justify-content: space-around;
  display: flex;
  position: relative;
}

.marquee-text-block {
  color: #000;
  text-transform: uppercase;
  font-size: 20pt;
  line-height: 0;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}

/* Canvas for Rapier Demo in Hero */
.canvas3d {
  position: absolute;
  z-index: -1;
  background-color: rgb(255, 255, 255);
}

.card-title {
  text-align: left;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 5px;

}

.home-titleL {
  text-align: left;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 5px;

}

.home-titleR {
  text-align: right;
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 5px;

}

.center-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 90px;
  /* height: 50vh; */
  width: 100dvw;  /* full viewport width */
  top: 0;
  left: 0;
  z-index: 1; /* optional */
}

.quater-page {
  height: 25dvh; /* 1/4 viewport height */
  width: 100dvw;  /* full viewport width */
  top: 0;
  left: 0;
}

.home-byline h1 {
  text-align: center;
  font-size: 9rem;
  letter-spacing: -5px;
  line-height: 120px;
  max-width: 1000px;
  text-transform: uppercase;
  hyphens: auto;
  color: rgb(255, 255, 255);
  font-family: 'Helvetica', 'Arial Unicode MS'; /* Use the defined font-family name */
}

.home-byline h1 .word{
  padding-left: .5rem;
  padding-right: .5rem !important;
}

.home-byline {
  display:flex;
  align-items:center;
  margin-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  /* height: 200px; */
}

.large-text {
  font-size: 8vw;
  color: rgb(0, 0, 0) ;
  letter-spacing: -.250rem;
  line-height: 7vw;
}

.large-text .word{
  padding-right:4px;
}

.small-text {
  font-size: 1vw;
  text-align: justify;
}

.line{
  /* width: 25vw;
  height: 3vw; */
  border-bottom: 2px solid rgb(0, 0, 0);
  margin-right: 4vw;
  align-content: center;
}

.vertical-line {
  border-left: 2px solid #000;
  height: 260%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}


.section1 {
 padding: 0rem;
}

.section2 {
 padding-top: 90px;
 justify-self: center;
 scroll-snap-type: both proximity;

}

.section4 {
  padding-left: 50px;
  padding-right: 50px;
 }


.section5 {
  width: 100%;
  height: 9000px;
  overflow: clip;
 }


 .sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.nosticky {
  position: relative;
  top: 0;
  left: 0;
  z-index: -1;
}

.fill-div {
  background: rgb(0, 0, 0);
  overflow: hidden;
}

.fill-div2 {
  background-color: rgb(255, 0, 0);
  overflow: hidden;
}

.bodymovinanim {
  width: 90%;
  max-width: 50px;
  margin-bottom: 30px;
  cursor: pointer;
}

.case-study-card {
  margin: 10px;
  cursor: pointer;
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 500px;
  height: 300px;
  overflow: clip;
  transition: 1s;
}

.case-study-card-2 {
  margin: 10px;
  cursor: pointer;
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 42vw;
  height: 25vw;
  overflow: clip;
  transition: 1s;
    background-image: url("Images/TestImage_CaseStudy.jpeg"); /* The image used */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}

.case-study-card-2:hover {
  scale: 1.02;
}

.img-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}

.case-title {
  text-align: left;
  font-size: 3vw;
  letter-spacing: -.22vi;
  text-transform: uppercase;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  text-overflow: ellipsis;
  color: rgb(0, 0, 0);
  font-weight: 700;
  cursor: pointer;
}

.gallery-row {
  width: 90%;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
}


.hoverText1 span{
 font-family: 'Segoe UI Symbol';
}


.case-title .word {
  padding-right: .13rem;
  overflow: visible;
}

#tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  margin-left: .5rem;
  position: fixed;
  bottom: 0;
  z-index: 1;
  left: 0%;
  width: 250px;
}

.tag-button {
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(0, 0, 0);
  cursor: pointer;
  font-size: 0.9rem;
  width: auto;
}

.tag-button.active {
  background-color: lawngreen;
  color: rgb(0, 0, 0);
  border: 1px solid rgba(0, 0, 0, 0);}

.tags {
  text-align: left;
  font-size: 0.80vw;
  letter-spacing: 0px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
  padding-right: 7px;
  margin-top: .0rem;
  color: rgb(0, 0, 0);
}

.tags:hover {
  color:lawngreen;
}


.case-study-block * {
  overflow: hidden;
  display: inline-block;
}

.case-study-block .cs-title .word{
  overflow: hidden;
  display: inline-block;
  padding-right: 10px;
}

Hide original inline since SplitType will wrap spans
.csdate *,
.cs-title *,
.cs-description *,
/* .chars *, */
.tags-container .tags {
  display: inline-block;
  padding-right: 3px;
  margin-top: 0px;
}

.cs-button {
  display: inline-block;
  /* transform: translateY(100%); */
  width: 200px;
  /* transform: translate(0px, 0px) !important; */
  /* margin-left: 400px; */
}


.csdate {
  text-align: left;
  font-size: 1.2vw;
  line-height: auto;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  margin-top: 13px;
  margin-bottom: 0px;
  width: 100%;
}

.case-study-card:hover {
  background: #3f21ad;
  scale: 1.02;
  animation: fadeIn 1s ease-in-out;
  overflow: clip;
}

.gallery-titles {
  font-family: 'Helvetica', sans-serif; /* Use the defined font-family name */
}

.hoverText1Hide {
  overflow: hidden;
}

.hoverText1 {
  width: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

@keyframes fadeIn {
  from {   background: #73AD21;   scale: 1; }
  to {   background: #3f21ad;   scale: 1.02; }
}


.tags a {
  display:inline-block;
  text-align: left;
  cursor: pointer;
}

a {
  display: table;
}


.hero-image {
  background-image: url("Images/TestImage_CaseStudy.jpeg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}



.cs-title {
  text-align: left;
  font-size: 130px;
  letter-spacing: -.50rem;
  line-height: 108px;
  text-transform: uppercase;
  margin-top: 7.7rem;
  margin-bottom: 7.5rem;
  word-wrap: break-word !important;
  word-break: normal;
  /* overflow-wrap: normal; */
  white-space: normal;
}

.cs-description {
  margin-top: 1rem;
  margin-bottom: 3rem;
  max-width: 500px;
}


.cs-page-year {
  font-size: 3.0vh;
  position: fixed;
  left: 0;
  top: 40%;
  scale: 6;
  rotate: 90deg;
  margin-left: 40px;
  z-index: -1;
  /* font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400; */
    -webkit-font-smoothing: antialiased; /* Safari: sharp text */
}

.plus-mark {
  font-size: 5rem;
  margin-left: -12px;
  margin-right: -12px;
  color: rgb(255, 255, 255);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 200;
  margin-bottom: 20px;
}

.plus-mark2{
  padding: 0px 30px 0px 30px;
  width: 100%;
  justify-self: center;
}

.plus-mark2 h1{
  font-size: 5rem;
  color: rgb(255, 255, 255);
  font-family: 'Helvetica', sans-serif; /* Use the defined font-family name */
  font-weight: 200;
}

.plus-mark-container {
  font-size: 10rem;
  position: absolute;
  bottom: -22px;
}

.heromarker {
  font-size: 18px;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-weight: 300;
}

.hero-marker-left,
.hero-marker-right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95px;
  width: 25px;
  text-align: center;
  text-orientation: mixed;
  font-size: 12px;
}

.hero-marker-left {
  writing-mode: vertical-rl;
  margin-left: -10px;
}

.hero-marker-right {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  margin-right: -10px;
}

.marker-space-t {
  margin-top: 15vh;
}

.marker-space-b {
  margin-top: 5vh;
}

.scroll-down {
  font-size: 18px;
  letter-spacing:0px;
  text-align: center;
  position: absolute;
  /* bottom: 0; */
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}

.scroll-down span{
  margin-left: 5px;
}

.scroll-down .symbol{
  font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
}

.preview-video {
  cursor: pointer;
  border-radius: 25px;
  background: #73AD21;
  overflow: hidden;           /* ensures video overflows are hidden */
  transition: 1s;
  aspect-ratio: 16 / 9;
  max-width: 1920px;
  position: relative;
  display: inline-block;
  margin-left: 150px;
  margin-right: 150px;
}

#myPreviewVideo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);     /* slight bleed for desktop */
  transform-origin: center center;
}




#playButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* font-size: 2rem; */
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  z-index: 1;
  background: rgb(124, 252, 0);
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 8px;
  width: auto;
}

#playButton:hover .play-symbol{
  opacity: 0.9;
  scale: 90%;
  transition: all ease 0.6s;
}

.play-symbol {
  fill: rgb(0, 0, 0);
  width: 100%;
  scale: 75%;
  transform-origin: center;
}

#volumeControlWrapper {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  z-index: 2;
}

/* Slider hidden by default */
#volumeSlider {
  width: 100px;
  height: 4px;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  appearance: none;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  position: absolute;
  bottom: 60px; /* positions it above the mute button */
  left: 50%;
  transform: translateX(-50%) scaleY(0); /* center horizontally */
  rotate: -90deg; /* make it vertical */
}

/* Show slider on hover */
#volumeControlWrapper:hover #volumeSlider.show {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
}

/* Thumb styling (Chrome/Safari) */
#volumeSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: limegreen;
  border: none;
  cursor: pointer;
}

/* Firefox */
#volumeSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: limegreen;
  border: none;
  cursor: pointer;
}


/* Show slider on hover */
#volumeControlWrapper:hover #volumeSlider.show {
  transform: scaleX(1);
  opacity: 1;
}

/* Slider thumb */
#volumeSlider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(124, 252, 0);
  border: none;
  cursor: pointer;
}

#muteButton {
  font-size: 1rem;
  padding: 0.5rem;
  cursor: pointer;
  background: rgb(124, 252, 0);
  border: none;
  border-radius: 600px;
  opacity: 50%;
  transition: opacity 0.2s ease;
  width: auto;
}

#muteButton:hover {
  opacity: 100%;
}

#muteIcon {
  width: 30px;
}

#videoOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0); /* Red overlay with transparency */
  mix-blend-mode: color; /* Change to 'multiply', 'overlay', 'soft-light', etc. */
  z-index: 1;
  transition-duration: 200ms;
  pointer-events: none; /* So clicks pass through */
  /* transition: opacity 0.5s ease; */
}

.preview-plus h1 {
  font-size: 70px;
  font-weight: 200;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1;
}

.preview-plus-container-top {
  margin-bottom: -65px;  
  margin-left: -30px !important;
  margin-right: -30px !important;
}

.preview-plus-container-bottom {
  margin-top: -75px; 
  margin-left: -30px !important;
  margin-right: -30px !important;
}

.marquee-text {
  text-align: center;
  width: 90%;
  max-width: 1920px;
}

.scroll-left {
  height: 50px;	
  overflow: hidden;
  position: relative;
  background: yellow;
 }
 .scroll-left p {
  font-size: 30px;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);	
  transform:translateX(100%);
  /* Apply animation to this element */	
  -moz-animation: scroll-left 15s linear infinite;
  -webkit-animation: scroll-left 15s linear infinite;
  animation: scroll-left 15s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-left {
  0%   { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
 }
 @-webkit-keyframes scroll-left {
  0%   { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
 }
 @keyframes scroll-left {
  0%   { 
  -moz-transform: translateX(100%); /* Browser bug fix */
  -webkit-transform: translateX(100%); /* Browser bug fix */
  transform: translateX(100%); 		
  }
  100% { 
  -moz-transform: translateX(-100%); /* Browser bug fix */
  -webkit-transform: translateX(-100%); /* Browser bug fix */
  transform: translateX(-100%); 
  }
 }
 
 .scroll-right {
  height: 50px;	
  overflow: hidden;
  position: relative;
  background: yellow;
 }
 .scroll-right p {
  font-size: 30px;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 40px;
  text-align: center;
  /* Starting position */
  -moz-transform:translateX(-100%);
  -webkit-transform:translateX(-100%);	
  transform:translateX(-100%);
  /* Apply animation to this element */	
  -moz-animation: scroll-right 15s linear infinite;
  -webkit-animation: scroll-right 15s linear infinite;
  animation: scroll-right 15s linear infinite;
 }
 /* Move it (define the animation) */
 @-moz-keyframes scroll-right {
  0%   { -moz-transform: translateX(-100%); }
  100% { -moz-transform: translateX(100%); }
 }
 @-webkit-keyframes scroll-right {
  0%   { -webkit-transform: translateX(-100%); }
  100% { -webkit-transform: translateX(100%); }
 }
 @keyframes scroll-right {
  0%   { 
  -moz-transform: translateX(-100%); /* Browser bug fix */
  -webkit-transform: translateX(-100%); /* Browser bug fix */
  transform: translateX(-100%); 		
  }
  100% { 
  -moz-transform: translateX(100%); /* Browser bug fix */
  -webkit-transform: translateX(100%); /* Browser bug fix */
  transform: translateX(100%); 
  }
 }

.footer-contact-form {
  width: 90%;
  height: 100%;
  font-size: 3em;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: 600;
  font-family: 'Helvetica', sans-serif; /* Use the defined font-family name */
  justify-self: center;
  text-transform: uppercase;
  margin: 0 auto;            /* Replaces margin-left/-bottom to center horizontally */
  display: flex;             /* Flex container for vertical stacking */
  flex-direction: column;    /* Stack span and link vertically */
  align-items: center;       /* Horizontal centering of children */
  justify-content: center;   /* Optional: vertical centering if height is fixed */
  margin-bottom: -35px;      /* Preserve your original vertical offset if needed */
}

 .footer-contact-form a{
  /* height: 180px; */
  /* position: absolute; */
  font-size: 3rem;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: 600;
  font-family: 'Helvetica', sans-serif !important; /* Use the defined font-family name */
  text-decoration: none;
  letter-spacing: -0.1rem;
}

.footer-contact-form-box {
  background-color: lawngreen;
  border-radius: 10px;
  font-size: 2rem;
  text-align: center;
  padding: 30px;
  width: 90%;
  /* max-width: 600px;           */
  color: rgb(0, 0, 0) !important;
  font-family: 'Helvetica', sans-serif;
  overflow: hidden;          /* Necessary for vertical animation to be visible */
  display: flex;             /* Change from inline-block to flex for consistent centering */
  align-items: center;       /* Vertical centering of inner span */
  justify-content: center;   /* Horizontal centering of inner span */
  line-height: 1.2em;        /* Ensure vertical space */
  position: relative;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
  margin: 0px 0;            /* Preserve spacing around box */
  transform: translateX(-4%);
}

.footer-contact-form-box:hover {
  background-color: rgb(255, 255, 255);
  width: 92%;
}

.footer-section{
  background-color: rgb(0, 0, 0);
  z-index: 1;
  position: absolute;
  width: 100%;
  }

.footer-section p{
  color: rgb(255, 255, 255);
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}

.footer-section a{
  color: rgb(255, 255, 255);
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}
  
.footer-section h1{
  font-size: 20px;
  color: rgb(255, 255, 255);
}

 .footer-bottom {
   padding-top: 70px;
   padding-bottom: 10px;
   padding-left: 10px;
    padding-right: 10px;
 }

 .footer-top {
  padding-top: 0px;
}

.footer-spacing {
  padding-top: 30px;
}

.ft h1 {
  font-size: 5vw;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.link-btn {
  overflow: hidden;
}

.btn-animate {
  transform: translateY(0px) translateX(-15px);
  width: 300px;
  will-change: transform; /* Optional, but good for performance */
  transition: transform 0.3s ease-in-out; /* Adjust duration and timing function as needed */
}

.btn-animate:hover {
  transform: translateY(0px) translateX(5px);
  overflow: hidden;
}

.btn-animate2 {
  transform: translateY(0px) translateX(-15px);
  width: 300px;
  will-change: transform; /* Optional, but good for performance */
  transition: transform 0.3s ease-in-out; /* Adjust duration and timing function as needed */
}

.btn-animate2:hover {
  transform: translateY(0px) translateX(5px);
  overflow: hidden;
}

.link-ul {
  color: rgb(0, 0, 0);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 255, 0, 0);
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
}

.link-ul:hover {
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-bottom: 1px solid rgb(179, 255, 0);
}

.arrow {
  padding-right: 4px;
  text-align: right;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.year-indicator {
  position: fixed;
  top: 0;
  left: 0;
  background: rgb(117, 117, 117);
  padding: 10px;
  border: 1px solid #ddd;
  z-index: 12;
}

.year-section {
  /* height: 100vh; */
  padding: 5px;
  border-bottom: 1px solid rgb(0, 0, 0);
  font-size: 2rem;
  transition-duration: 20ms;
  /* margin-top: -200px;  */
  padding-top: 120px;
}

/* .gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}
G5 Added 053125 
.gallery a {
  height: 200px;
  width: 300px;
  margin: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 0.12pc, solid,#000;
  margin-top: 25px;
}

.gallery a img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all .8s ease-out;
}
.gallery a img:hover {
  transform:scale(1.1)
  rotate(2deg);
}

.grid-sizer,
.grid-item { width: 20%; } */

.section3 {
  padding-top: 10rem;
}

.section-gallery {
  padding-top: 1rem;
  align-self: center;
}

.gallery-header {
  overflow: hidden;
}

.gallery-header-var {
  overflow: hidden;
}

/* Gallery Container */
.gallery {
  width: 90%;
  max-width: 2000px;
  margin: 0 auto;
  position: relative;
}

/* Grid Items */
.grid-sizer,
.grid-item {
  width: 20%; /* default: 5 columns */
  float: left;
  box-sizing: border-box;
}

.grid-item {
  /* margin-bottom: 20px; */
  /* border: 1px solid #000; */
  /* background: #fff; */
}

.grid-inner {
  margin: 10px;
  box-sizing: border-box;
    border: 1px solid #000;
    background: #ffffff;
}

.grid-item:hover .grid-inner {
      background: #59ff00;
      transition: all .5s ease;
}



/* Center Masonry using padding and auto margins */
.grid {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Images */
.grid-item img {
  width: 100%;
  height: auto; /* preserve aspect ratio */
  display: block;
  object-fit: cover;
  transition: all 0.8s ease-out;
}

.grid-item img:hover {
  transform: scale(1.1) rotate(2deg);
}

.image-wrapper {
  overflow: hidden;
  border: 1px solid #000;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

/* Responsive layout */
@media (max-width: 1024px) {
  .grid-sizer,
  .grid-item {
    width: 33.33%;
  }
}

@media (max-width: 768px) {
  .grid-sizer,
  .grid-item {
    width: 50%;
  }
}

@media (max-width: 480px) {
  .grid-sizer,
  .grid-item {
    width: 100%;
  }
}



.keyhole {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: #ffffff;
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
  z-index: -2;
}

.spline-path {
  z-index: -3;
}

.side-text {
  /* position: absolute; */
  color: black;
  font-size: 16px;
  padding-left: 5px;
  padding-right: 5px;
  /* width: 300px; */
  /* transform: translateY(-25px) translateX(-1px); */
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  z-index: 1;
  /* border: 0.12pc, solid,#000;
  border-bottom: 0; */
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  display: flex;
  position: relative;
}

/* Section transition for shrink/fade effect */
.cs-year-group {
  transition: max-height 200ms ease, opacity 200ms ease;
  max-height: 2000px; /* or large enough to fit content */
  opacity: 1;
  overflow: hidden;
}

.cs-year-group.hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.cs-card {
  margin-bottom: 4rem;
  transition: all 500ms ease;
  opacity: 1;
  transform: scale(1);
  /* width: 50%; */
  padding-left: 20px;
  padding-right: 20px;
}

.cs-card.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
  display: none;
}

.cs-card-hover {
  position: relative;
  overflow: hidden;
}

.pixelated-image-card {
  position: relative;
  z-index: 1;
}


.pixelated-image-card {
  background-color: var(--color-neutral-800);
  color: rgb(124, 252, 0);
  border-radius: 1em;
  width: 100%;
  cursor: pointer;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.before__100 {
  padding-top: 100%;
}

.pixelated-image-card__default, 
.pixelated-image-card__img,
.pixelated-image-card__active, 
.pixelated-image-card__pixels{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.pixelated-image-card__active {
  display: none;
}

.pixelated-image-card__pixel {
  background-color: currentColor;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.reveal-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.section5-text-overlay {
  height: 100vh;
  width: 99vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  position: absolute;
  /* padding: 5vh 10vw; */
  padding-left: 70px;
  padding-right: 70px;
}

.section5-line {
  font-size: 7vw;
  font-weight: bold;
  opacity: 1;
  line-height: 1.2;
  margin: 0.5em 0;
  position: fixed;
  display: inline-block;
}

.section5-line-1 {
  text-align: left;
  align-self: flex-start;
}

.section5-line-2 {
  text-align: center;
  align-self: center;
}

.section5-line-3 {
  text-align: right;
  align-self: flex-end;
}

.section5-highlight-line {
  background: lawngreen;
  color: black;
  padding: 0.25em 0.5em;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.4rem;
  margin-bottom: 20rem;
  align-self: center;
  opacity: 1;
}

.spline-subtext {
  /* background: lawngreen; */
  color: rgb(255, 255, 255);
  padding: 0.25em 0.5em 0.0em 0.5em;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.14rem;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.563);
}

.spline-subtext .word{
  overflow-x: visible;
}

/* CASE STUDIES PAGE CSS */

#head-style {
  font-size: 9vi;
  line-height: 100%;
  color: rgb(0, 0, 0);
  letter-spacing: -0.9vi;
  margin-top: .6vi;
  margin-right: 1.5vi;
  text-align: right;
}

#head-style2 {
  font-size: 11vi;
  line-height: 100%;
  color: rgb(0, 0, 0);
  letter-spacing: -0.9vi;
  margin-top: .6vi;
  margin-right: 1.5vi;
  text-align: right;
}

#head-num {
  font-size: 4.2vi;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  margin-top: 2px;
}

#head-arrow {
  font-size: 6.2vi;
  margin-top: -3.25vi;
  font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
}

#head-num2 {
  font-size: 4.2vi;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  margin-top: 5px;
}

#head-arrow2 {
  font-size: 6.2vi;
  margin-top: -3.5vi;
  font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
}

#head-num3 {
  font-size: 3.6vi;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  margin-top: 2px;
}

#head-arrow3 {
  font-size: 5.4vi;
  margin-top: -3.25vi;
  font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
}

.case-study-header {
  scale: 1.25; 
  margin-top: 100px;
}

.case-study-header {
  scale: 1.25; 
  margin-top: 100px;
}


.form-titles {
  /* font-family: 'Helvetica', sans-serif;
  font-size: 2rem;
  font-weight: 600; */
}

.form-titles span{
  font-family: 'roboto mono', sans-serif;
  font-size: 0.85rem;
}

.form-titles label{
  font-family: 'Helvetica', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -2px;
  text-transform:uppercase;
    color:rgb(0, 0, 0);
    border: 0px;
}

.form-titles input{
  font-family: 'roboto mono', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
    background-color: rgba(126, 252, 0, 0);
    border: solid 1px;
    padding: 0px 10px;
    border-radius: 10px;
    width: 600px;
    height: 50px;
}

.form-titles textarea{
  font-family: 'roboto mono', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgb(0, 0, 0);
  background-color: rgba(126, 252, 0, 0);
  border: solid 1px;
  padding: 10px;
  resize: none;
  height: 400px;
  width: 100%;
  border-radius: 10px;
}

input::placeholder{
  font-family: 'roboto mono', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  color:rgb(0, 0, 0);
    border: 0px;
}

textarea::placeholder{
  font-family: 'roboto mono', sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  color:rgb(0, 0, 0);
    border: 0px;
}

.return-home {
  justify-content: left;
  padding-bottom: 50px;
  padding-left: 50px;
  /* position: fixed; */
  bottom:0;
}

.contact-header {
  padding-top: 8%;
}

.modal-backdrop {
--bs-backdrop-opacity: 0.85;
}

.reveal-type3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

  .card-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.375rem;
  }

  .img-container {
    height: 450px; /* Or your preferred height */
    overflow: hidden;
  }

  .card {
    border-color: #00000000;
  }

  .lg-next{
    opacity: 1 !important;
    right: -30px !important;
  }

  .lg-prev{
    opacity: 1 !important;
    left: -30px !important;
  }
  

/* For Mobile ____________________________________________________________________*/
@media screen and (max-width: 540px) {
  .small-text {
    font-size: 14px;
    padding-top: 20px;
  }

  .large-text {
    font-size: 14vw;
    line-height: 13vw;
    letter-spacing: -.25rem;
  }

  .nav-text-lg {
    height: auto;
  }

  .nav-text-lg h1{
    font-size: 3rem;
    line-height: 70px;
    letter-spacing: -3px;
  }

  .menu-page-text {
    margin-top: 0px;
    /* margin-right: 420px; */
    font-size: 9pt;
  }

  .home-nav-button {
    width: 790px;
    height: 55px;
    padding-top: 0px;
  }
  
  .case-studies-nav-button {
    width: 790px;
    height: 55px;
  }
  .galleries-nav-button {
    width: 790px;
    height: 55px;
  }
  .about-nav-button {
    width: 790px;
    height: 55px;
  }

  .case-study-card-2 {
    padding: 0px;
    width: 85vw;
    height: 50vw;
  }

  .plus-mark {
    font-size: 12vw;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .plus-mark2{
    width: 100%;
  }  

  .plus-hide {
    position: absolute;
    font-size: 0px;
  }

  .plus-expand {
    width: 100%;
    text-align: center !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .marker-space-t {
  margin-top: 15vh;
}

  .marker-space-b {
    margin-top: 0vh;
  }


  .home-byline h1 {
    text-align: center;
    font-size: 18vw;
    letter-spacing: -5px;
    line-height: 17vw;
    hyphens: auto;
  }

  .line{
    width: 65vw;
    height: 3vw;
    border-bottom: 2px solid rgb(0, 0, 0);
    margin-left: 12px;
    }

  .preview-video {
    background: #2146ad;
    aspect-ratio: 9 / 16;
    width: 95%;
    transform: none;
  }

  #myPreviewVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.07);    /* larger scale for tall portrait */
    transform-origin: center center;
  }


.scroll-right {
  height: 30px;
}	

.scroll-right p {
  font-size: 20px;
  line-height: 125%;
}

.scroll-left {
  height: 30px;
}	

.scroll-left p {
  font-size: 20px;
  line-height: 125%;
}

.marquee {
  width: 85%;
  max-width: 1920px;
  height: 50px;	
  margin-top: -5px;
  margin-bottom: -5px;
  grid-column-gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  overflow: hidden;
}

.marquee-text-block {
  color: #000;
  text-transform: uppercase;
  font-size: 15pt;
  line-height: 0;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}

.preview-plus h1 {
  font-size: 45px;
  }

.preview-plus-container-top {
  margin-bottom: -55px; 
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.preview-plus-container-bottom {
  margin-top: -55px; 
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.footer-contact-form {
  width: 100%;
  position: relative;
  height: 200px;
  margin: 0px 0px 50px 0px;
}


.ft h1 {
  font-size: 15vw;
}

.footer-section p{
  font-size: 15px;
  color: rgb(255, 255, 255);
  }

.footer-section a{
  font-size: 15px;
  color: rgb(255, 255, 255);
 }

.footer-section{
   padding: 20px;
   }

.footer-contact-form a {
  font-size: 1.5rem;
  text-align: center;
}

  .footer-contact-form-box {
    width: 100%;
    transform: translateX(0%);
    min-width: 300px;
}

.cs-page-year {
  position: fixed;
  left: 0;
  top: 48%;
  scale: 0;
  rotate: 90deg;
  margin-left: 14vw;
  opacity: 0;
  font-size: 0px;
}

.pixelated-image-card {
  background-color: var(--color-neutral-800);
  color: rgb(124, 252, 0);
  border-radius: 1em;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.cs-card {
  width: 90vw;
  margin-bottom: 1rem;
}

.case-title {
  font-size: 6vw;
  margin-top: 0px;
  margin-left: 0px;
  letter-spacing: -.08em;
}


.tags {
  font-size: 2.5vw;
  overflow: hidden;
  padding-right: 0px;
  margin-top: 0px;
}

.csdate {
  font-size: 2.5vw;
  font-weight: 400;
  text-align: left;
  margin-bottom: 0px;
}

.vertical-line {
  border-left: 0px solid #000;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

#muteButton {
  padding: 0.25rem;
  border-radius: 600px;
}

#muteIcon {
  width: 20px;
  margin: 0.20rem;
}

#volumeSlider {
  width: 80px;
}

#dlBtn1 {
  width:50px;
  height:50px;
}

.box-nav {
  width: 103%;
  height: 100dvh;
  background-color: rgb(0, 0, 0);
  right: 0px;
  position: absolute;
  border-radius: 15px;
  padding: 0px;
  padding-top: 85px;
  overflow: clip;
  transition-duration: 1s;
}

.box-nav-close {
  width:0px;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  right: 0px;
  position: fixed;
  border-radius: 15px;
  transform-origin: right center 0;
  transition-duration: 1s;
  transform-style: preserve-3d;
  overflow: clip;
}

.center-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  /* height: 50dvh; full viewport height */
  width: 100vw;  /* full viewport width */
  top: 0;
  left: 0;
  z-index: 1; /* optional */
  /* padding-bottom: 30px; */
}

.section4 {
  padding-left: 10px;
  padding-right: 10px;
 }

.section5-line {
  font-size: 14vw;
  line-height: 1.2;
  margin: 0.5em 0;

}

.section5-line-1 {
  text-align: center;
  align-self: center;
  padding-bottom: 140px;
}

.section5-line-2 {
  text-align: center;
  align-self: center;
}

.section5-line-3 {
  text-align: center;
  align-self: center;
  padding-top: 140px;
}

.section5-highlight-line {
  background: lawngreen;
  color: black;
  padding: 0.25em 0.5em;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  font-size: .9rem;
  margin-bottom: 20rem;
  align-self: center;
  opacity: 1;
}

#tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0rem;
  margin-left: 0rem;
  margin-top: 1rem;
  position: relative;
  /* top: 18%;
  bottom: 87%; */
  justify-content: center;
  left: auto;
  width: 100%;
}

  .case-study-header {
    scale: 1.47; 
    margin-top: 20px;
    margin-right: 0%;
        /* transform: translate(-25px, 0px); */
  }

  .cs-title {
    font-size: 65px;
    letter-spacing: -.27rem;
    line-height: 55px;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .cs-title .char{
    padding-right: 5px;
    overflow: visible;
  }

  .csdate {
    text-align: left;
    font-size: 3vw;
    line-height: auto;
    letter-spacing: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
  }

  .cs-button {
    margin-top:40px !important;
    margin-bottom:0px;
    margin-left:-1px;
    transform: translate(0px, 0px) !important;
  }

  .cs-description {
    margin-top: 1rem;
    margin-bottom: 0rem;
    max-width: 500px;
  }

  .tags-container {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .svg-ff {
    height: 30px;
    width: 30px;
    margin-left: 10px;
    margin-right: 15px;
    background-position: 0px 7px;
  }

  .svg-rr {
    height: 30px;
    width: 30px;
    margin-left: 10px;
    margin-right: 15px;
    background-position: 0px 7px;
  }

  .year-section {
    /* margin-top: -200px;  */
    padding-top: 50px;
}


/* GALLERY PAGE CSS */

  .gallery-header {
    scale: 1; 
    margin-top: 100px;
  }

  .gallery-header-var {
    scale: 2; 
    margin-top: 100px;
  }  

  #head-style2 {
    font-size: 11vi;
    line-height: 100%;
    color: rgb(0, 0, 0);
    letter-spacing: -0.9vi;
    margin-top: .6vi;
    margin-right: 1.5vi;
    text-align: right;
  }

  .section3 {
    padding-top: 1rem;
  }

    #head-num2 {
    font-size: 4.2vi;
    margin-top: 2px;
  }

  #head-arrow2 {
    font-size: 6.2vi;
    margin-top: -5vi;
  }

  #head-num {
    font-size: 4vi;
    margin-top: 2px;
  }

  #head-arrow {
    font-size: 6.2vi;
    margin-top: -4vi;
  }

  #head-num3 {
  font-size: 3.6vi;
  font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  margin-top: 0px;
}

#head-arrow3 {
  font-size: 5.4vi;
  margin-top: -3.75vi;
  font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
}

.form-titles input{
    width: 100%;
    height: 50px;
}

.return-home {
  justify-content: center;
  padding-bottom: 50px;
  padding-top: 50px;
  padding-left: 0px;
  position: relative;
}

.contact-header {
  padding-top: 30%;
}

.plus-spline-row {
  margin: 3rem auto 3rem auto; /* Centered with spacing below */
  font-size: 3rem;
}


  .lg-next{
    opacity: 0 !important;
  }

  .lg-prev{
    opacity: 0 !important;
  }

}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 980px) {
  .small-text {
    font-size: 1rem;
    padding-top: 20px;
  }
  
  .large-text {
    font-size: 14vw;
    line-height: 13vw;
  }

  .case-study-card-2 {
    padding: 0px;
    width: 85vw;
    height: 50vw;
  }

  .plus-mark {
    font-size: 12vw;
    text-align: center;
    margin-bottom: 2rem;
  }

  .home-byline h1 {
    text-align: center;
    font-size: 11vw;
    letter-spacing: -5px;
    line-height: 10vw;
    hyphens: auto;
  }

  .line{
    border-bottom: 2px solid rgb(0, 0, 0);
    margin-left: 12px;
    }

  .preview-plus h1 {
  font-size: 50px;
  }

  .preview-plus-container-top {
    margin-bottom: -50px; 
    margin-left: -20px !important;
    margin-right: -20px !important;
  }

  .preview-plus-container-bottom {
    margin-top: -50px; 
    margin-left: -20px !important;
    margin-right: -20px !important;    
  }

  .scroll-down {
    font-size: 18px;
    letter-spacing:0px;
    text-align: center;
    position: absolute;
    /* bottom: 0; */
    font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  }

  .cs-page-year {
    position: fixed;
    left: 0;
    top: 48%;
    scale: 0;
    rotate: 90deg;
    margin-left: 35px;
    opacity: 0;
    font-size: 0px;    
  }

  .marquee {
    width: 90%;
    max-width: 1920px;
    height: 30px;	
    grid-column-gap: 1rem;
    margin-top: -10px;
    margin-bottom: -10px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    overflow: hidden;
  }

  .marquee-text-block {
    color: #000;
    text-transform: uppercase;
    font-size: 20pt;
    line-height: 0;
    font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  }

  .case-title {
    margin-top: 0px;
    letter-spacing: -.05em;
    font-size: 6vw;
  }

  .csdate {
    font-size: 2vw;
    margin-bottom: 2px;
  }

  .tags {
    text-align: left;
    font-size: 2vw;
    margin-top: 0px;
  }

  .preview-video {
    /* You can optionally adjust aspect ratio for tablets */
    aspect-ratio: 16 / 9;
  }

  #myPreviewVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);    /* intermediate bleed for tablets */
    transform-origin: center center;
  }




  .footer-contact-form {
  width: 100%;
  position: relative;
  height: 90px;
  font-size: 2rem;
  margin-left:0px;
  margin-bottom: 50px;
}

  .footer-contact-form-box {
    width: 100%;
    transform: translateX(0%);
}

 .footer-contact-form a{
  /* height: 180px; */
  /* position: absolute; */
  font-size:2rem;
  color: rgb(255, 255, 255);
  text-align: center;
  font-weight: 600;
  font-family: 'Helvetica', sans-serif !important; /* Use the defined font-family name */
  text-decoration: none;
  letter-spacing: -0.1rem;
  width: 100%;
  position: relative;  
}

/* CASE STUDIES PAGE CSS */

  #head-style {
    font-size: 10vi;
    line-height: 100%;
    letter-spacing: -.9vi;
    text-align: right;
    margin-top: .6vi;
    margin-right: 1.5vi;
  }

  #head-style2 {
    font-size: 9vi;
    line-height: 100%;
    color: rgb(0, 0, 0);
    letter-spacing: -0.9vi;
    margin-top: .6vi;
    margin-right: 1.5vi;
    text-align: right;
  }

  #head-num {
    font-size: 3.8vi;
    margin-top: 5%;
  }

  #head-arrow {
    font-size: 5.5vi;
    margin-top: -3.5vi;
  }

  #head-num2 {
  font-size: 3.6vi;
  margin-top: 1px;
}

  #head-arrow2 {
    font-size: 5.5vi;
    margin-top: -3.2vi;
  }

  #tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
    margin-top: 2rem;
    position: relative;
    /* bottom: 79vh; */
    justify-self: center;
  }

  .case-study-header {
    scale: 1.30; 
    margin-top: 50px;
    margin-right: 0%;
  }

  .year-section {
    /* margin-top: -200px;  */
    padding-top: 110px;
  }

  #tag-filters {
  display: flex;
  width: 90vw;
  justify-content: center;
}

.contact-header {
  padding-top: 20%;
}

    .img-container {
      height: 100%;
    }


.vertical-line {
  border-left: 0px solid #000;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}    
  
}


/* For Line thickness */
@media screen and (min-width: 980px) and (max-width: 1350px) {

  .line{
    border-bottom: 3px solid rgb(0, 0, 0);
    margin-left: 12px;
    } 
    
}