.Header-Images {
    position: relative;
    width: 100%;
    height: 594px; /* Adjust the height as needed */
    overflow: hidden;
  }
  
  /* Slideshow Images */
  .Header-Image {
    width: 100%;
    height: 594px; /* Adjust the height as needed */
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
  }
  
.Section2{
  margin-top: 50px;
    margin-bottom: 50px;
}
.About-Us{
  margin-left: 20px;
  margin-right: 20px;
  max-width: 66.66667%;
}
.Section2 h2 {
margin-top: 30px;
margin-bottom: 30px;
font-family: var(--Font-Norse);
color: var(--text);
text-align: center;
font-size: var(--Font-N-H1);
line-height: var(--Font-LH);
    }
.Section2 h3 {
color: var(--primary);
text-align: center;
font-family: var(--Font);
font-size: var(--Font-H1);
font-weight: bolder;
margin-bottom: 7px;
}
.Section2 p {
margin-top: 0px;
color: var(--text);
text-align: center;
font-family: var(--Font);
font-size: var(--Font-P);
font-weight: 441;
line-height: var(--Font-LH);
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 594px;
  overflow: hidden;
  margin-top: 20px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.slide-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  position: relative;
  max-height: 100%;
  display: flex;
  justify-content: center; /* Center the image horizontally */
  align-items: center; /* Center the image vertically */
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This ensures the images cover the entire fixed height */
}

.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 20% 20px;
  background-color: #33333301;
  color: var(--text);
  border: none;
  cursor: pointer;
  z-index: 1;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.prev-btn,
.next-btn {
background-color: #25465400;
cursor: pointer;
transition: background-color 0.4s;
}

.prev-btn:hover,
.next-btn:hover{
background-color: #254654d1;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.pagination-dot {
  width: 10px;
  height: 10px;
  background-color: #333;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.pagination-dot:hover{
background-color: var(--Lead);
}       
.pagination-dot.active {
  background-color: var(--Valkyrie);
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.Section2 h2,
.IndexTitle {font-family: 'Montserrat', sans-serif;}

  .IndexTitle{display: none;}

  .prev-btn,
.next-btn {
  display: none;

}
}