.carousel-container{
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

/* Styles for individual slides */
.carousel-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: transform 0.3s ease;
}

/* Styles for the images */
.carousel-image {
    width: 100%;
    height: auto;
}

/* Styles for the text descriptions */
.slide-description {
    text-align: center;
    margin-top: 10px;
}
.centered-nav{
    justify-content: center;
}
.small-media-nav{
    align-items: center;
}
.logo{
    max-width: 100px;
}
.navbar-nav{
    align-items: center;
}
.navbar-nav a{
    margin: 0 10px;
}
.small-media-logo{
    display: none;
}
@media screen and (max-width: 1000px) {
    .centered-nav{
        justify-content: flex-end;
    }
    .small-media-nav{
        justify-content: space-between;
    }
    .logo{
        display: none;
    }
    .small-media-logo{
        display: block;
        max-width: 100px;
    }
    
}
.navbar{
  position: fixed;
  width: 100%;
  background-color: #252424;
  z-index: 1000;
}

.nav-link{
  font-size: 1.2rem;
  font-weight: 500;
  font-family: "Bebas Neue", sans-serif;
}

.nav-item:hover .nav-link{
  color: orange;
}

.active .nav-link{
  color: orange;
}



.video-header {
    position: relative;
    height: 80vh; /* Set the desired height for your header */
    overflow: hidden; /* Hide any video overflow */
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio */
    z-index: -1; /* Place video behind the text */
}

h1 {
  position: absolute;
  z-index: 1;
  font-size: 5vw;
  color: white;
  text-align: center;
  width: 90%;
  text-align: center;
  margin-left: 5%;
  top: 50%;
  font-family: "Bebas Neue", sans-serif;
  transform: translateY(-50%);
  /* Add a text shadow for better visibility */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adjust for vertical alignment */
}

.heading-text{
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: "Bebas Neue", sans-serif;
  text-align: center;
  text-decoration: underline orange;
  text-decoration-skip-ink: none; /* Prevent the underline from affecting descenders (like the tail of 'g') */
  margin-bottom: 5px;
}

.heading-text-white{
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: "Bebas Neue", sans-serif;
  text-align: center;
  text-decoration: underline orange;
  text-decoration-skip-ink: none; /* Prevent the underline from affecting descenders (like the tail of 'g') */
  margin-bottom: 5px;
  color: orange;
  margin-top: 2vh;
}

.about-us-p{
  font-size: 1rem;
  color: white;
  margin: 10px 0;
  text-align: center;
}

.about-us-h3{
  font-size: 1.5rem;
  color: white;
  margin: 10px 0;
  text-align: center;
}

.card-body {
    width: 60%;
    text-align: center;
    background-color: #252424;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Adjust the shadow properties as desired */
    margin: 20px auto;
}

.card-body h3 {
    font-size: 1.5rem;
    color: white;
    margin: 10px 0;
}

.card-body p {
    font-size: 1rem;
    color: white;
    margin: 10px 0;
}

img {
  display: block;
  max-width: 100%;
}

.project-h3{
  font-size: 1.5rem;
  margin: 10px 0;
  text-align: center;
  color: orange;
  text-decoration: underline black;
  text-decoration-skip-ink: none;
  font-weight: 500;
  font-family: "Bebas Neue", sans-serif;
}

.project-p{
  font-size: 1.2rem;
  margin: 10px 0;
  text-align: center;

}

.project-h4{
  font-size: 1.8rem;
  margin: 10px 0;
  text-align: center;
  color: orange;
  font-family: "Bebas Neue", sans-serif;
  margin-left: 1.5vw;
  margin-right: 1.5vw;

}
.project-h5{
  font-size: 1.4rem;
  margin: 10px 0;
  text-align: center;
  color: orange;
  font-family: "Bebas Neue", sans-serif;
  margin-left: 1.5vw;
  margin-right: 1.5vw;

}
.footer{
  margin-top: 2vh;
  background-color: #252424;
  color: white;
  width:  100%;
  padding: 20px 0;
}

.footer-h6{
  font-size: 1rem;
  margin: 10px 0;
  margin-left: 1.5vw;
}



.container {
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%;
  display: grid;
  place-items: center;
  max-height: 67vh;
  width: 32vw;
}

.image-container {
  width: 32vw;
}
@media  (max-width: 768px) {
  .container {
    width: 80vw;
  }
  .image-container {
    width: 80vw;
  }
  
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  height: 100%;
}

.image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
  filter: grayscale(100%)
}

.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  /* for Firefox */
  width: 100%;
  height: 100%;
}

.slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.slider-line {
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  /* z-index: 10; */
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-button {
  position: absolute;
  background-color: #fff;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* z-index: 100; */
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
.project{
  display: none;
}

.image{
  display: none;
  justify-content: center;
}