@font-face {
  font-family: 'SegUIVar';
  src: url('SegUIVar.ttf') format('truetype');
}

@font-face {
  font-family: 'SegUIVar';
  src: url('SegUIVar.ttf') format('truetype');
}

:root {
  --primary-color: #ffffff;
  --background-color: #000000;
  --font-family-default: 'SegUIVar';
  --font-family-sans-serif: 'SegUIVar';
  --vh: 100vh; /* Initialize custom property */
}

#particleCanvas {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  max-width: 100%;
  max-height: 100%;
  display: block;
  z-index: -1;
  margin-bottom: -270px; /* Negative value to reduce space */
  margin-top: 50px;
  transform: scaleX(-1); /* Flips the canvas horizontally */
}

body {
  font-family: var(--font-family-default);
  color: var(--primary-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  padding-bottom: 0px; /* Adjust this value based on the footer's height */
  overflow-x: hidden;
}

.header-image {
  background-size: cover;
  position: fixed;
  top: 5px;
  left: 0px;
  height: 140px;
  width: 80%; /* Full width */
  background-image: url('header3.png');
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden; /* Ensures nothing spills outside the header */
  z-index: 11;
}

.header-fade {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px; /* Adjust the height for the fade effect */
  top: 15vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0), var(--background-color));
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 30; /* Ensure it's above the content */
}

.projects-page .header-fade {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0), var(--background-color));
  z-index: 30;
  height: 350px; /* Adjust the height for the fade effect */
  top: 15vh;
  }

  /* Centered Quote */
.centered-quote {
  position: absolute;
  top: 3%;
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 2em; /* Adjust size as needed */
  padding-top: 0px; /* Adjust padding to position the text */
}

.brain-mod-quote {
  position: absolute;
  top: 5%;
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 2em; /* Adjust size as needed */
  padding-top: 20px; /* Adjust padding to position the text */
}

.brain-mod-quote2 {
  position: absolute;
  top: 5%;
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 2em; /* Adjust size as needed */
  padding-top: 20px; /* Adjust padding to position the text */
}

.below-quote {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 2em; /* Adjust size as needed */
  padding-top: 0px; /* Adjust padding to position the text */
  margin-bottom: -40px;
}

#BCI-projects {
  margin-top: 180px; /* Adjust the margin-top value as needed to move the content down */
}

#EEG-projects {
  margin-top: 180px; /* Adjust the margin-top value as needed to move the content down */
}

#sexual-therapy {
  margin-top: 180px; /* Adjust the margin-top value as needed to move the content down */
}

/* Panels (Blue, Green) */
  .blue-panel, .dark-purple-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -3;
  width: 100%; /* Full width of the container */
  height: 100%; /* Maintain aspect ratio */
  background-size: cover; /* Cover the area of the panel */
}

.dark-purple-panel {
  top: 0; /* Start at the top of the container or section */
  width: 100%;
  height: 100%;
}

.blue-panel {
  top: 0%; /* Adjust as needed */
  width: 100%;
  height: 100%;
}

.green-new {
  position: absolute;
  z-index: -3;
  top: 0%;
  width: 85%;
  height: 100%; /* Maintain aspect ratio */
  transform: translateX(-50%);
}

.brain-mod-panel-new {
  position: absolute;
  z-index: -3;
  top: 0%;
  width: 78%;
  height: 100%; /* Maintain aspect ratio */
  transform: translateX(14%);
}

.mod-panel{
  position: absolute;
  z-index: -3;
  top: 0%;
  width: 78%;
  height: 100%; /* Maintain aspect ratio */
  transform: translateX(14%);
}

.about-us-content {
  position: relative;
  text-align: center;
  z-index: 4;
}

.about-us-content2 {
  position: relative;
  text-align: right;
  z-index: 4;
}

.about-us-content3 {
  position: relative;
  text-align: left;
  z-index: 4;
}

.about-text {
  font-family: var(--font-family-sans-serif);
  position: relative;
  margin: auto;
  padding: 0px 15px;
  color: #ffffff;
  z-index: 4; /* Bring it to a higher stacking context if needed */
  max-width: 78vw; /* Maximum width relative to viewport width */
  font-size: 1.5vw; /* Font size scales with viewport width */
}

/* Our Vision Section Styles */
#our-vision {
  padding: 180px 15px;
  text-align: center;
}

/* About Us Section Styles */
#about-us {
  text-align: center;
  /* Add more styles as needed */
}

.Boonie-Sign-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 50vh; /* Adjust the height as needed */
  background-image: url('projects/Boonie/Boonie-Sign4.png');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */

}

.boonie-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 30vh; /* Adjust the height as needed */
  background-image: url('projects/Boonie/boonie.png');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
  margin-bottom: 20px;
}

.boonie-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.boonie-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.the-line-group-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.the-line-group-video iframe {
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 100%;
}

.smart-service-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.smart-service-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.smart-service-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 50vh; /* Adjust the height as needed */
  background-image: url('projects/Smart-Service/smart-service.png');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.brain-mod-panel-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.brain-mod-panel-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Cover {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 50vh; /* Adjust the height as needed */
  background-image: url('projects/Brain-Modulation/Cover.png');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
  margin-top: 5%;
}

.Cover2 {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 50vh; /* Adjust the height as needed */
  background-image: url('projects/Brain-Modulation/Cover2.png');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.Cover3 {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 42.5vh; /* Adjust the height as needed */
  background-image: url('projects/Consciousness/Cover3.webp');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.Cover4 {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 43.5vh; /* Adjust the height as needed */
  background-image: url('projects/Consciousness/Cover4.webp');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.Cover5 {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 43.5vh; /* Adjust the height as needed */
  background-image: url('projects/Consciousness/Cover5.webp');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.orgasms-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.orgasms-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.foundation-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('Foundations.jpg');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.sinsmain-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('sinsmain2.png');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: 3; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.headgear1-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('projects/BCI-projects/headgear1.jpg');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.headgear2-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('projects/BCI-projects/headgear2.jpg');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.se2-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('projects/Sexual-Therapy/se2.jpg');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.eeg1-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('projects/EEG-projects/eeg1.jpg');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.eeg2-image {
  position: relative;
  width: 100%; /* Scales with the parent container */
  height: 45vh; /* Adjust the height as needed */
  background-image: url('projects/EEG-projects/eeg2.jpg');
  background-size: contain; /* Ensures the image fits within the container */
  background-repeat: no-repeat;
  background-position: center center; /* Keeps the image centered */
  z-index: -1; /* Position it behind the content */
  float: left; /* or right, depending on where you want the image */
}

.project-image {
  position: relative;
  cursor: pointer;
  width: 300px;
  height: 350px;
  object-fit: cover;
  display: block; /* This removes any additional space under the image */
  padding: 0; /* Example padding value, adjust as needed */
  z-index: 9;
}

.project-container {
  display: inline-block;
  width: 300px; /* Match the image width */
  height: 350px; /* Match the image height */
  padding: 10px; /* Example padding value, adjust as needed */
}

.project-container2 {
  display: block; /* Change to block to center the image */
  text-align: center; /* Center content inside this container */
  width: 100%; /* Use the full width of the parent container */
  padding: 0px;
  margin-bottom: 10px; /* Adjust the vertical spacing between project containers */
  margin-top: 10px;
}

.project-container3 {
  display: inline-block;
  width: 150px; /* Match the image width */
  height: 175px; /* Match the image height */
  padding: 20px; /* Example padding value, adjust as needed */
}

.project-image3 {
  position: relative;
  cursor: pointer;
  width: auto;
  height: 170px;
  margin: 0 auto; /* Center the image inside the container */
  object-fit: cover;
  display: block; /* This removes any additional space under the image */
  padding: 0; /* Example padding value, adjust as needed */
  z-index: 9;
}

.project-image2 {
  position: relative;
  width: auto; /* Set the width as required */
  height: 125px;
  object-fit: cover;
  margin: 0 auto; /* Center the image inside the container */
  display: block;
  z-index: 9;
}

.project-image4 {
  position: relative;
  width: 180px;
  height: auto;
  object-fit: cover;
  z-index: 9;
  margin: 5px 25px; /* Centers the image within the project-container */
}

.project-container4 {
  display: inline-block;
  width: auto; /* Set a fixed width */
  margin-bottom: 0px; /* Reduce the right margin to decrease the gap between images */
  /* Remove or reduce padding if it's also creating additional space */
  padding: 0; /* Adjust as necessary */
} 

.black-header-shape {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 15vh; /* Adjust the height */
  background-color: black;
  z-index: 10; /* Below the header image */
}

main {
  padding: 80px 0;
  flex: 1;
}

footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  color: white;
  text-align: center;
}

nav {
  position: fixed;
  top: 0;
  right: 0px;
  z-index: 30; /* Highest, to ensure nav is above all */
  /* Other nav styles */
}

nav ul {
  list-style: none;
  text-align: right;
  margin: 10;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin: 5px 10px;
  padding-bottom: 5px; /* Adjust the value as needed */
}

nav ul li a {
  position: relative;
  text-decoration: none;
  color: var(--primary-color);
  padding: 5px 10px;
  transition: color 1s;
  font-size: 1.2em;
}

nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: rgb(207, 159, 255);
  transition: width 1s ease;
}

nav ul li a:hover::after {
  width: 100%;
}

nav ul li a:hover {
  color: rgb(207, 159, 255);
}


.contact-about-text {
  font-family: var(--font-family-sans-serif);
  margin: auto;
  padding: 0px 15px;
  color: #ffffff;
  z-index: 8; /* Bring it to a higher stacking context if needed */
  max-width: 79vw; /* Maximum width relative to viewport width */
  font-size: 1.5vw; /* Font size scales with viewport width */
  margin-top: 150px; /* Adjust this value to lower the text */
}

.our-vision-link {
  margin-left: 20px; /* Adjust as needed */
  margin-right: 0px; /* Adjust as needed */
}

.fade-out-text {
  transition: opacity 1.5s ease-in-out;
  opacity: 0;
}

.special-text {
  font-family: var(--font-family-default); /* Replace 'YourSpecialFont' with your desired font */
  margin: auto;
  padding: 0px 15px;
  line-height: 1.6;
  top: 50%;
  color: #ffffff;
  z-index: 8; /* Bring it to a higher stacking context if needed */
  max-width: 79vw; /* Maximum width relative to viewport width */
  font-size: 1.5vw; /* Font size scales with viewport width */
  margin-top: 20vh; /* Adjust negative value to move the text higher */
}

.privacy-link {
  text-decoration: none; /* Removes underline */
  color: #ffffff;
  font-size: 1em; /* Adjust the font size */
  text-align: left;
  background-color: transparent;
  /* Add more styling as needed */
}

.term-link {
  text-decoration: none; /* Removes underline */
  color: #ffffff;
  font-size: 1em; /* Adjust the font size */
  text-align: left;
  background-color: transparent;
  /* Add more styling as needed */
}

.privacy-link, .term-link {
  text-decoration: none; /* Removes underline */
  color: #ffffff;
  font-size: 1em; /* Adjust the font size */
  position: relative; /* Required for absolute positioning of pseudo-elements */
  display: inline-block; /* Ensures the link behaves correctly with the pseudo-element */
  transition: color 1s ease; /* Transition for color change */
}

.privacy-link::after, .term-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: rgb(207, 159, 255); /* Color of the underline */
  transition: width 1s ease; /* Transition for the underline effect */
}

.privacy-link:hover, .term-link:hover {
  color: rgb(207, 159, 255); /* Color change on hover */
}

.privacy-link:hover::after, .term-link:hover::after {
  width: 100%; /* Underline expands to full width on hover */
}

#email-link {
  color: var(--primary-color); /* Initial color (white) */
  text-decoration: none; /* Removes the underline */
  position: relative; /* Required for absolute positioning of pseudo-elements */
  display: inline-block; /* Ensures the link behaves correctly with the pseudo-element */
  transition: color 1s ease; /* Transition for color change */
  z-index: 25; /* Ensure the link is above other elements */
}

#email-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: rgb(207, 159, 255); /* Color of the underline */
  transition: width 1s ease; /* Transition for the underline effect */
}

#email-link:hover {
  color: rgb(207, 159, 255); /* Color change on hover */
}

#email-link:hover::after {
  width: 100%; /* Underline expands to full width on hover */
}

@media screen and (max-width: 720px) {
  .header-image {
    background-size: cover;
    position: fixed;
    top: 10px;
    left: 0px;
    height: 40px;
    width: 70%; /* Full width */
    background-image: url('header3.png');
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden; /* Ensures nothing spills outside the header */
    z-index: 11;
  }

  .black-header-shape {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(13vh + env(safe-area-inset-top)); /* Adjust for safe area insets */
    background-color: black;
    z-index: 10;
    transform: translateZ(0); /* Force hardware acceleration */
  }
  
  .header-fade {
    content: '';
    position: fixed;
    top: calc(13vh + env(safe-area-inset-top)); /* Ensure alignment with .black-header-shape height */
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.0), var(--background-color));
    pointer-events: none;
    z-index: 20;
    transform: translateZ(0); /* Force hardware acceleration */
  }

  .Boonie-Sign-image {
    position: relative;
    width: 100%; /* Scales with the parent container */
    height: 20vh; /* Adjust the height as needed */
    background-image: url('projects/Boonie/Boonie-Sign4.png');
    background-size: contain; /* Ensures the image fits within the container */
    background-repeat: no-repeat;
    background-position: center center; /* Keeps the image centered */
    z-index: -1; /* Position it behind the content */
    float: left; /* or right, depending on where you want the image */
  }
  
  .boonie-image {
    position: relative;
    width: 100%; /* Scales with the parent container */
    height: 30vh; /* Adjust the height as needed */
    background-image: url('projects/Boonie/boonie.png');
    background-size: contain; /* Ensures the image fits within the container */
    background-repeat: no-repeat;
    background-position: center center; /* Keeps the image centered */
    z-index: -1; /* Position it behind the content */
    float: left; /* or right, depending on where you want the image */
    margin-bottom: 20px;
  }

  #BCI-projects {
    margin-top: 40px; /* Adjust the margin-top value as needed */
  }

  #EEG-projects {
    margin-top: 40px; /* Adjust the margin-top value as needed to move the content down */
  }

  #sexual-therapy {
    margin-top: 40px; /* Adjust the margin-top value as needed to move the content down */
  }

  #boonie {
    margin-top: 30px; /* Adjust the margin-top value as needed to move the content down */
  }

  #brain-modulation {
    margin-top: 0px; /* Adjust the margin-top value as needed to move the content down */
  }

  .smart-service-video {
    padding-bottom: 75%; /* Adjust for mobile aspect ratio if needed */
    background-position: center center; /* Keeps the image centered */
    left: 0;
    height: 0vh;
  }

  .orgasms-video {
    padding-bottom: 75%; /* Adjust for mobile aspect ratio if needed */
    background-position: center center; /* Keeps the image centered */
    left: 0;
    height: 25vh;
  }

  .boonie-video {
    padding-bottom: 75%; /* Adjust for mobile aspect ratio if needed */
    background-position: center center; /* Keeps the image centered */
    left: 0;
    height: 0vh;
  }

  .the-line-group-video {
    padding-bottom: 75%; /* Adjust for mobile aspect ratio if needed */
    background-position: center center; /* Keeps the image centered */
    left: 0;
    height: 0vh;
  }

  /* Our Vision Section Styles */
#our-vision {
  padding: 40px 15px;
  text-align: center;
}

/* Panels (Blue, Green) */
.blue-panel, .dark-purple-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: -3;
  width: 100%; /* Full width of the container */
  height: auto; /* Maintain aspect ratio */
  background-size: cover; /* Cover the area of the panel */
}

.green-new {
  position: absolute;
  z-index: -3;
  width: 89%;
  transform: translateX(-50%);
}

.brain-mod-panel-new {
  position: absolute;
  z-index: -3;
  top: 0%;
  width: 80%;
  height: 100%; /* Maintain aspect ratio */
  transform: translateX(12.5%);
}

.mod-panel {
  position: absolute;
  z-index: -3;
  top: 0%;
  width: 80%;
  height: 100%; /* Maintain aspect ratio */
  transform: translateX(12.5%);
}

.dark-purple-panel{
  top: 0%; /* Adjust based on content */
  width: 100%;
  height: 100%;
}

.about-us-content {
  position: relative;
  text-align: center;
  z-index: 2;
}

.blue-panel {
  top: 0; /* Adjust as needed */
  width: 100%;
  height: 100%;
}

    .project-container {
      display: inline-block;
      width: 150px; /* Set a fixed width */
      margin-bottom: -180px; /* Adjust the vertical spacing between project containers */
    }
    
    .project-image {
      display: block;
      cursor: pointer;
      width: 150px;
      height: auto;
      object-fit: cover;
      z-index: 9;
      margin: 0 auto; /* Centers the image within the project-container */
      left: 0px;
    }

    .project-container2 {
      display: inline-block;
      width: 150px; /* Set a fixed width */
      margin-bottom: 10px; /* Adjust the vertical spacing between project containers */
      margin-top: 10px;
    }
    
    .project-image2 {
      display: block;
      cursor: pointer;
      width: auto;
      height: auto;
      object-fit: cover;
      z-index: 9;
      margin: 0 auto; /* Centers the image within the project-container */
      left: 0px;
    }
    
    .project-image3 {
      display: block;
      cursor: pointer;
      width: 100px;
      height: auto;
      object-fit: cover;
      z-index: 9;
      margin: 5px 0px; /* Centers the image within the project-container */
    }
    
    .project-container3 {
      display: inline-block;
      width: 100px; /* Set a fixed width */
      margin-bottom: -30px; /* Reduce the right margin to decrease the gap between images */
      /* Remove or reduce padding if it's also creating additional space */
      padding: 10px; /* Adjust as necessary */
    } 

    .project-image4 {
      display: block;
      width: 100px;
      height: auto;
      object-fit: cover;
      z-index: 9;
      margin: 5px 25px; /* Centers the image within the project-container */
    }
    
    .project-container4 {
      display: inline-block;
      width: 150px; /* Set a fixed width */
      margin-bottom: 10px; /* Reduce the right margin to decrease the gap between images */
      /* Remove or reduce padding if it's also creating additional space */
      padding: 0; /* Adjust as necessary */
    } 

    .foundation-image {
      height: 24vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .sinsmain-image {
      height: 25vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .headgear1-image {
      height: 25vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .headgear2-image {
      height: 25vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .se2-image {
      height: 25vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .eeg1-image {
      height: 25vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .eeg2-image {
      height: 25vh; /* Smaller height on smaller screens */
      /* Additional responsive adjustments as needed */
    }

    .Cover {
      height: 39vh;
      margin-top: -20%;
    }

  .fade-out-text {
    transition: opacity 1.5s ease-in-out;
    opacity: 0;
  }  

  .about-text {
    font-size: 3vw; /* Increases font size for smaller screens */
    max-width: 80vw; /* Maximum width relative to viewport width */
    margin-top: 0vh; /* Adjust negative value to move the text higher */
    padding: 0 0vw; /* Add horizontal padding */
  }

  .contact-about-text {
    font-size: 3vw; /* Increases font size for smaller screens */
    max-width: 80vw; /* Maximum width relative to viewport width */
    margin-top: 0vh; /* Adjust negative value to move the text higher */
    padding: 0 0vw; /* Add horizontal padding */
  }

    /* Centered Quote */
.centered-quote {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 1.1em; /* Adjust size as needed */
  padding-top: 0px; /* Adjust padding to position the text */
}

.brain-mod-quote {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 0.8em; /* Adjust size as needed */
  padding-top: 0px; /* Adjust padding to position the text */
}

.brain-mod-quote2 {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
  width: 100%;
  color: #fff; /* Change color as needed */
  font-size: 0.6em; /* Adjust size as needed */
  padding-top: 0px; /* Adjust padding to position the text */
}

.below-quote {
  position: relative;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  text-align: center;
  width: 90%; /* Adjusted to leave some space on the sides */
  padding: 0 5%; /* Added horizontal padding */
  color: #fff; /* Change color as needed */
  font-size: 1.0em; /* Adjust size as needed */
}

#particleCanvas {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  max-width: 100%;
  max-height: 100%;
  display: block;
  z-index: -1;
  margin-bottom: -150px; /* Negative value to reduce space */
}

  .special-text {
    font-size: 3vw; /* Increases font size for smaller screens */
    max-width: 80vw; /* Maximum width relative to viewport width */
    margin-top: 5vh; /* Adjust negative value to move the text higher */
    padding: 0 0vw; /* Add horizontal padding */
  }

  .privacy-link, .term-link {
    font-size: 3vw; /* Same as footer paragraph for consistent scaling */
    /* Other styles for privacy and terms links */
  }

  nav ul li a {
    font-size: 3vw; /* Increase if links are too small */
    padding: 2px; /* Add padding for touch targets */
    margin: 0px 4px; /* Adjust space between links */
    right: 0px;
  }

  /* Remove the <br> tags from your HTML to control spacing via CSS */
  nav ul li {
    margin: 0; /* Removes space between list items */
    z-index: 40; /* Ensure navigation stays on top */
  }
  footer {
    width: 100%;
    text-align: left center;
  }

  footer p {
    font-size: 3vw; /* Adjust this value as needed */
  }
}