body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  min-height: 100vh;
  position: relative;
  color: #fff;
  overflow-x: hidden;
  width: 100%; /* Ensure full width */
  max-width: 1920px;
  max-height: 1080px;
  height: auto;
  /* Remove background-image from here */
}

main {
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: 1920px;
  max-height: 1080px;
  margin: 0 auto;
  overflow: hidden;
  background-size: 100% 100%; /* Stretches image to exactly 1920x1080 */
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Ensure it's at the back */
  pointer-events: none; /* Prevents interaction */
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 1s ease;
  z-index: 0; /* Also at the back */
}

/* Make sure your content is above the slider */
main > *:not(#bg-slider) {
  position: relative;
  z-index: 1;
}
.navbar {
  display: grid;
  grid-template-columns: 20% 55% 20%;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 2rem;
  align-items: center;
  z-index: 1000000; /* Make sure this is higher than #bg-slider and .bg-slide */
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.85) 40%,
      rgba(0, 0, 0, 0.5) 65%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("../03.IMAGES/NAVIGATION/NAV-TOP.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 150px;
  margin: 0 auto;
}
.navbar > a {
  justify-self: start;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.navbar .get-in-touch {
  justify-self: end;
  margin-left: 0;
  margin-right: 2rem;
}
.navbar .logo {
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-decoration: none;
}
.navbar .nav-links {
  display: flex;
  gap: 24px;
  margin-left: 32px;
}
.navbar .nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: bold; /* Add this line */
  transition: color 0.2s, text-decoration-thickness 0.2s,
    text-underline-offset 0.2s;
}
.navbar .nav-links a:hover {
  color: #d5af35;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
.navbar .get-in-touch {
  margin-left: 32px;
  padding: 1rem 2rem;
  background: #d5af35;
  color: #222;
  border: none;
  border-radius: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.navbar .get-in-touch:hover {
  background: #fff;
  color: #d5af35;
  transform: scale(1.08);
}
.navbar img {
  height: 8rem;
  display: block;
}

.cb-highlight {
  color: #d5af35; /* Or any color you want */
  font-weight: bold;
}

.first-name {
  color: #d5af35; /* Example: gold color */
  font-size: 5rem; /* Example: larger font */
  letter-spacing: 2px; /* Example: more spacing */
}

.last-name {
  color: #fff; /* Example: gold color */
  font-size: 4.4rem; /* Example: larger font */
  letter-spacing: 2px; /* Example: more spacing */
}

main p {
  font-size: 2rem;
  line-height: 1.6;
  margin-top: 1rem;
  color: #fff; /* Ensure text is readable */
  width: 30%;
}

main .read-more-btn {
  margin-top: 2rem;
  padding: 1rem 2.5rem;
  background: #d5af35;
  color: #222;
  border: none;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
main .read-more-btn:hover {
  background: #fff;
  color: #d5af35;
  transform: scale(1.08);
}

.read-more-btn:hover {
  background: #fff;
  color: #d5af35;
  transform: scale(1.08);
}

.sub-content {
  padding: 12rem 4rem;
  width: 100%;
}

.sub-content p {
  width: 30%;
}

.sub-content button {
  margin-top: 2rem;
  padding: 1.5rem 2.5rem;
  background: #d5af35;
  color: #222;
  border: none;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  width: 35%;
}

.home-content {
  width: 100%;
  height: 100%;
  padding: 5rem 0;
}

.image-grid {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 2rem;
  justify-items: center;
  align-items: center;
  margin-top: 2rem;
  margin: 4rem auto; /* Center the grid */
}

.image-grid img {
  width: 60%;
  height: 25rem;
  object-fit: cover;
  border-radius: 3rem;
  margin-bottom: 2rem;
  margin-top: 5rem;
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically */
  height: 100%; /* Fill grid cell for vertical centering */
}

.image-item h3 {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: #fff;
}
.image-item img,
.image-item h3 {
  width: 60%;
  align-self: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.image-item .grid-nav-link,
.image-desc,
.read-more-btn {
  width: 60%;
  align-self: center;
  text-align: left;
  margin-left: 0;
}

.grid-nav-link {
  width: 60%;
  margin-top: 0.5rem;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.image-desc {
  margin: 1rem 0 0.5rem 0;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  width: 60%;
  text-align: left;
}

.read-more-btn {
  width: 35%;
  margin-top: 2rem;
  padding: 1rem 2.5rem;
  background: #d5af35;
  color: #222;
  border: none;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.read-more-btn:hover {
  background: #fff;
  color: #d5af35;
  transform: scale(1.08);
}

.read-more-btn,
.read-more-btn-home,
.home-read {
  margin-top: 2rem;
  padding: 1rem 2.5rem;
  background: #d5af35;
  color: #222;
  border: none;
  border-radius: 2rem;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  width: 30%;
}
.read-more-btn:hover,
.read-more-btn-home:hover,
.home-read:hover {
  background: #fff;
  color: #d5af35;
  transform: scale(1.08);
}

.read-more-btn a {
  color: #222;
}

.read-more-btn a:hover {
  color: #d5af35;
}

.image-item img,
.image-item h3,
.image-item .grid-nav-link {
  width: 60%;
  align-self: center;
}

.image-item .read-more-btn {
  width: 30%; /* Or use 'auto' for natural width */
  min-width: 8rem; /* Optional: set a minimum width */
  align-self: flex-start;
  text-align: left;
  margin-left: 20%;
  padding: 1rem 1rem;
  text-align: center;
  font-size: 0.8rem;
}

.image-item .read-more-btn a {
  font-size: 0.8rem;
  color: #222;
}

.image-item .read-more-btn a:hover {
  color: #d5af35;
}

.home-read button {
  width: 10%;
}

#bottom-footer {
  border-top: 1px solid #d5af35; /* Yellow border for separation */
  color: #fff;
  padding: 2rem 0;
  text-align: center;
  margin-top: 1rem;
}

.site-footer {
  color: #fff;
  width: 90%;
  margin: 0 auto;
  text-align: left;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.footer-content {
  width: 100%;
  text-align: left;
  font-size: 12px;

  width: 50%;
}

.footer-content h3,
#cb-more h3,
#get-in-touch h3 {
  color: #d5af35;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  margin-top: 0;
}

.footer-nav,
.footer-nav-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0rem;
  gap: 0rem 4rem; /* vertical and horizontal gap */
  justify-content: center;
  align-items: start;
  margin: 0;
  max-width: 500px; /* optional: controls overall width */
  height: 100px;
  padding-top: 12px;
  width: 80%;
}

.footer-nav a,
.footer-nav-about a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s;
  text-align: left;
  line-height: 0;
}

.footer-nav a:hover,
.footer-nav-about a:hover {
  color: #d5af35;
  font-weight: bolder;
  text-decoration: underline;
}

#get-in-touch {
  text-align: left;
  font-size: 12px;
  width: 70%;
}

#get-in-touch a {
  color: #d5af35;
  text-decoration: none;
}

#get-in-touch a:hover {
  text-decoration: underline;
}

.image-desc button {
  font-size: 0rem;
}

.image-item a {
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
}

#about-container,
.drive-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 2rem;
  width: 80%;
  margin: 13rem auto;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

.drive-container-incubator {
  display: block;
  margin-top: 20rem;
  width: 70%;
  margin: 20rem auto 10rem auto;
  font-size: 1.2rem;
  text-align: justify;
}

.drive-container-incubator .drive-img img {
  border-radius: 2rem;
  width: 100%;
}

.drive-container-incubator .read-more-btn {
  margin: 2rem;
  width: 8rem;
  border-radius: 1rem 0.2rem 0.2rem 1rem;
}

#about-container section h1,
#about-container-2 section h1,
.drive-container section h1 {
  margin: 0;
  font-size: 1rem;
}

#about-container #about-img,
#about-container #about-img-2,
#about-container #about-img-3,
.drive-container .drive-img,
.drive-container .drive-img-2,
.drive-container .drive-img-3 {
  width: 80%;
  height: 90%;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: block;
  margin: 0 auto;
  background-image: url("../03.IMAGES/GALLERY/9-scaled.jpg");
  background-size: cover;
  background-position: center;
}

#about-container #about-img-2 {
  background-image: url("../03.IMAGES/GALLERY/11-scaled.jpg");
}
#about-container #about-img-3 {
  background-image: url("../03.IMAGES/GALLERY/8-scaled.jpg");
}

.drive-container .drive-img {
  background-image: url(../03.IMAGES/GALLERY/slider-22.jpg);
  background-position: -30rem;
  background-size: cover;
}

.drive-container .drive-img-2 {
  background-image: url(../03.IMAGES/GALLERY/slider-33.jpg);
  background-position: -10rem;
  background-size: cover;
}

.drive-container .drive-img-3 {
  background-image: url(../03.IMAGES/GALLERY/slider-44.jpg);
  background-position: -10rem;
  background-size: cover;
}

.drive-img-2 .text-container {
  width: 50%;
}

.drive-img-2 #about-container #text-container,
#about-container #text-container-2,
.drive-container .text-container,
.drive-container .text-container-2 {
  width: 85%; /* or any fixed width like 400px */
  max-width: 600px; /* optional */
  white-space: normal; /* allows text to wrap */
  overflow-wrap: break-word;
  word-break: break-word;
  color: white; /* assuming dark background */
  font-size: 1.2rem; /* or adjust as needed */
  line-height: 1.6;
  text-align: justify;
}

#about-container #text-container-2,
.drive-container .text-container-2 {
  width: 90%; /* Full width for the second text container */
}

#about-container p {
  font-size: 1.6rem;
}

#text-container-2 {
  font-size: 1.4rem;
}

#text-container p,
#text-container-2 p {
  font-size: 1.4rem;
}

#about-container p,
#about-container-2 p,
.drive-container p {
  word-break: break-word;
  overflow-wrap: break-word;
  /* Optional: limit width for text */
  max-width: 100%;
}

#about-container section,
#about-container-2 section {
  width: 90%;
}

#about-container .first-name {
  font-size: 4rem;
}
#about-container .first-name .last-name {
  font-size: 3.6rem;
}

.drive-container-incubator .last-name {
  font-size: 3.2rem;
}
#email svg,
#call svg {
  transition: fill 0.2s;
  cursor: pointer;
}

#email svg:hover,
#call svg:hover {
  fill: #ffd700; /* bright yellow */
}

#email:hover,
#call:hover {
  color: #ffd700; /* bright yellow */
  text-decoration: underline;
}

.footer-nav-about a[href="about.html"] {
  color: #d5af35 !important;
  font-weight: bold;
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 3px;
}

.nav-links a[href="#cbdrive"] {
  text-decoration: underline;
  border-bottom: #d5af35;
  color: #d5af35 !important;
  font-weight: bold;
  text-decoration: none;
  text-underline-offset: 8px;
  text-decoration-thickness: 3px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 80%;
  margin: 0 auto 4rem auto;
}
.project-video {
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#projects-copy {
  text-align: justify;
  font-size: 1.2rem;
}

.bottom-projects {
  width: 80%;
  margin: 5rem auto;
  text-align: left;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.bottom-projects p {
  text-align: justify;
  font-size: 1.2rem;
  width: 80%;
}

.projects-image {
  background-image: url("../03.IMAGES/GALLERY/24-scaled.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  width: 80%;
  margin: 15rem auto 8rem auto;
  align-items: stretch;
}
.gallery-text {
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  text-align: justify;
}

.gallery-text h2 {
  color: #d5af35;
  margin-bottom: 1rem;
  font-size: 2.6rem;
  margin: 0;
}

.gallery-text span {
  color: #fff; font-size: 2.6rem; font-weight: lighter"
}
.gallery-img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 1rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.gallery-img img {
  display: none; /* Hide the <img> tag, use only background-image */
}

/* Assign background images for each gallery-img */
.gallery-img-landscape-1 {
  background-image: url("../03.IMAGES/GALLERY/20250122_104100-scaled.jpg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0), 0.1;
  opacity: 0.2;
}

.gallery-img-landscape-1:hover,
.gallery-img-portrait-1:hover,
.gallery-img-landscape-2:hover,
.gallery-img-portrait-2:hover,
.gallery-img-landscape-3:hover {
  opacity: 1; /* Show the image on hover */
  cursor: pointer;
}
.gallery-img-portrait-1 {
  background-image: url("../03.IMAGES/GALLERY/03.WhatsApp-Image-2025-06-20-at-21.28.47.jpeg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0), 0.1;
  opacity: 0.2;
}
.gallery-img-landscape-2 {
  background-image: url("../03.IMAGES/GALLERY/02.numerisation0007-copy.jpg");
  width: 100%;
  height: 100%;
  min-height: 280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0), 0.1;
  opacity: 0.2;
}
.gallery-img-portrait-2 {
  background-image: url("../03.IMAGES/GALLERY/03.IMG-20240514-WA0056.jpg");
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0), 0.1;
  opacity: 0.2;
}
.gallery-img-landscape-3 {
  background-image: url("../03.IMAGES/GALLERY/01.WhatsApp-Image-2025-06-20-at-21.28.47-4.jpeg");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0), 0.1;
  opacity: 0.2;
}

.arrow-container {
  position: relative;
  width: 90%;
  height: 100%;
  margin: -27rem auto 30rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(24, 24, 24, 0.7);
  border: none;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}

.incu-arrow {
  background: rgba(24, 24, 24, 0.7);
  border: none;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}

.gallery-arrow:hover,
.incu-arrow:hover {
  background: #fff;
}
.gallery-arrow-left {
  left: -2.5rem;
}
.gallery-arrow-right {
  right: -2.5rem;
}

#gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.gallery-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
}
.gallery-modal-content {
  position: relative;
  z-index: 2;
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rem; /* Keeps the modal content below the navbar */
}
.gallery-modal-image {
  width: 70vw;
  height: calc(
    100vh - 10rem
  ); /* Subtract the top margin to avoid nav overlap */
  max-height: calc(100vh - 10rem);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: background-image 0.3s;
}

.gallery-modal-arrow {
  background: rgba(24, 24, 24, 0.7);
  border: none;
  border-radius: 50%;
  padding: 0.5rem;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.gallery-modal-arrow-left {
  left: 1.5rem;
}
.gallery-modal-arrow-right {
  right: 1.5rem;
}
.gallery-modal-arrow:hover {
  background: #d5af35;
}

.gallery-modal-close {
  position: absolute;
  top: 2rem;
  right: 2rem; /* Move further right */
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(24, 24, 24, 0.7);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}

.gallery-modal-close span {
  color: #d5af35;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
  display: block;
  pointer-events: none;
}

.gallery-modal-close:hover {
  background: #d5af35;
  color: #222;
}

.gallery-modal-close:hover span {
  color: #181818;
}

.gallery-modal-arrow:hover {
  background: #d5af35;
}
.gallery-modal-arrow:hover svg {
  fill: #181818 !important;
}

.gallery-img-landscape-1:hover,
.gallery-img-portrait-1:hover,
.gallery-img-landscape-2:hover,
.gallery-img-portrait-2:hover,
.gallery-img-landscape-3:hover {
  opacity: 1 !important;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* Add this to your main.css */
.home-read:hover a {
  color: #d5af35 !important;
  transition: color 0.2s;
}

.links-columns {
  display: flex;
  gap: 3rem;
  max-width: 900px;
  margin: 14rem auto 2rem auto;
  padding: 2rem;
}

.links-form-col {
  flex: 1;
  display: flex;
  align-items: center;
}
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  border: 1px solid #fff; /* Thin yellow outline */
  padding: 4rem;
  border-radius: 1rem;
}
.contact-form label {
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.contact-form input,
.contact-form textarea {
  padding: 1rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #fff; /* Thin yellow outline */
  background: transparent; /* Remove white background */
  color: #fff;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  outline: none;
  resize: none;
}

/* Optional: yellow border on focus */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #fff;
  background: transparent;
}

/* Style placeholder text */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #d5af35;
  opacity: 1;
  font-weight: 500;
}

.send-btn {
  background: #d5af35;
  color: #181818;
  border: none;
  border-radius: 0.5rem;
  padding: 0.8rem 2.5rem;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
.send-btn:hover {
  color: #d5af35;
  border: 1px solid #d5af35;
}
.links-image-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../03.IMAGES/GALLERY/11-scaled.jpg);
  background-size: cover;
  background-position: 0 -40px;
  border-radius: 1rem;
}
.contact-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  object-fit: cover;
}

.sub-content .home-read {
  width: 13%;
}

@media (max-width: 900px) {
  body,
  html {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  main {
    display: block;
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 38vh;
    margin: 0 auto;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }


   main h1 {
    margin-bottom: 0;
    font-size: 1.4rem;
   }
  .home-content {
    display: block;
    width: 80vw;
    max-width: 80vw;
    min-width: 80vw;
    margin: 0 auto;
  }
  .navbar {
    display: block;
    grid-template-columns: 1fr;
    height: auto;
    padding: 1rem 1rem;
    background-size: cover;
    width: 100%;
    z-index: 1000000;
  }
  .navbar img {
    height: 4rem;
  }
  .nav-links {
    flex-direction: column;
    gap: 12px;
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
  }
  .navbar .get-in-touch {
    margin: 1rem 0 0 0;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }
  .sub-content {
    padding: 8rem 1rem 2rem 1rem;
  }
  .sub-content p,
  main p {
    width: 100%;
    font-size: 1.2rem;
  }
  .sub-content button,
  .read-more-btn,
  .read-more-btn-home,
  .home-read {
    width: 100%;
    font-size: 1rem;
    padding: 1rem 1rem;
  }
  .home-content {
    padding: 2rem 0;
  }
  .image-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1.5rem;
    margin: 2rem auto;
    width: 95%;
  }
  .image-item img {
    width: 100%;
    height: 12rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .image-item .grid-nav-link,
  .image-desc,
  .read-more-btn {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .image-item {
    margin: 2rem 0;
  }

  .image-item .read-more-btn {
    min-width: unset;
    margin-left: 0;
    padding: 1rem 0.5rem;
    font-size: 1rem;
    width: 8rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 80%;
    margin: 10rem auto 4rem auto;
  }
  .gallery-text {
    width: 100%;
    padding: 1rem;
  }
  .links-columns {
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    margin: 8rem auto 2rem auto;
    max-width: 80vw;
  }
  .links-form-col {
    padding: 0;
  }
  .contact-form {
    padding: 1.5rem;
    gap: 0.8rem;
  }
  .links-image-col {
    min-height: 180px;
    border-radius: 1rem;
    margin-top: 1rem;
  }
  .contact-image {
    max-height: 180px;
  }
  .site-footer {
    grid-template-columns: 1fr;
    width: 98vw;
    padding: 1rem 0;
    gap: 2rem;
    text-align: left;
  }
  .footer-content,
  #cb-more,
  #get-in-touch {
    width: 80%;
    padding: 0 1rem;
    margin: 0 auto;
  }
  #bottom-footer {
    padding: 1rem 0;
    font-size: 0.9rem;
    margin: 1rem 0;
  }

  .nav-links,
  .get-in-touch {
    display: none !important;
  }
  .menu-icon {
    display: flex !important;
  }

  #about-container,
  .drive-container {
    display: block !important;
    width: 80%;
    margin: 6rem auto;
  }

  #about-container p,
  .drive-container p {
    font-size: 1rem;
  }

  #about-container #about-img,
  #about-container #about-img-2,
  #about-container #about-img-3,
  .drive-container .drive-img,
  .drive-container .drive-img-2,
  .drive-container .drive-img-3,
  .bottom-projects .projects-image {
    display: grid;
    height: 14rem;
    width: 100%;
    background-position: 0 -2rem;
  }

  #about-container section,
  #about-container-2 section,
  .drive-container section {
    margin: 2rem auto;
    width: 100%;
  }

  #about-container .first-name,
  .drive-container .first-name {
    font-size: 2rem;
  }

  .drive-container .first-name,
  .drive-container-incubator .first-name,
  .bottom-projects .first-name {
    font-size: 1.5rem;
  }

  #about-container .last-name,
  .drive-container .last-name {
    font-size: 2rem;
  }

  .drive-container .last-name,
  .drive-container-incubator .last-name,
  .bottom-projects .last-name {
    font-size: 1.5rem;
  }

  #about-container .first-name .last-name,
  .drive-container .first-name .last-name {
    font-size: 2rem;
  }

  #about-container #text-container,
  #about-container #text-container-2,
  .drive-container .text-container,
  .drive-container .text-container-2,
  .drive-container-incubator .text-container,
  .drive-container-incubator .text-container-2,
  .bottom-projects .text-container,
  .bottom-projects .text-container-2,
  .gallery-grid .gallery-text {
    width: 100%;
  }

  .drive-container-incubator .text-container,
  .drive-container-incubator .text-container-2,
  .bottom-projects .text-container,
  .bottom-projects .text-container-2 {
    font-size: 1rem;
  }

  #projects-copy p {
    font-size: 1rem;
  }

  .read-more-btn {
    width: 35%;
  }

  .bottom-projects {
    display: block;
  }

  .bottom-projects p {
    width: 100%;
  }

  .gallery-text h2 {
    font-size: 2rem;
  }

  .gallery-text span {
    font-size: 2rem;
  }

   .gallery-grid .gallery-text {
    width: 90%;
    margin: 0 auto;
   }
  .drive-container-incubator {
    margin-top: 6rem;
  }
  .sub-content {
    padding-top: 5rem;
    margin-left: 1rem;
  }

  .sub-content .first-name,
  .sub-content .last-name {
    font-size: 1.4rem;
  }

  .sub-content p,
  main p {
    font-size: 14px;
    width: 50%;
    margin-top: 0;
  }
  .sub-content .home-read {
    font-size: 12px;
    width: 30%;
    margin-top: 0;
  }

  .footer-content h3,
  #cb-more h3,
  #get-in-touch h3 {
    font-size: 1.5rem;
  }
}