section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 80vh;
 
}

.content {
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  gap: 30px;

  background: linear-gradient(
    180deg,
    rgba(39, 38, 38, 0.366) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(30px);
  border-radius: 20px;
  width: min(900px, 100%);
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.info {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
}


.info p{
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

#imgmain {
    position: relative; /* Ensure the parent container has a positioning context for pseudo-elements */
    background-image: url("/img/main_image.jpg"); /* Replace with your image path */
    background-size: auto 100%; /* Allow horizontal movement by setting auto width and 100% height */
    padding: 10%;
    margin-bottom: 5%;
    background-repeat: repeat-x;
    animation: slideBackground 10s linear infinite; /* Adjust animation duration as needed */

  }

  
  #imgmain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: slideBackground 40s linear infinite; /* Increased animation duration */
  }
  
  @keyframes slideBackground {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 70% 0;
    }
  }
  

li{
    color: #fff;
    font-size: 10pt;
}

.GalleryIntro {
  font-size: 2em;
  text-align: center;
color: #fff;
}
.GalleryIntro a{
color: #FF0000;
}


/* <!-- second slider -->  */
.carousel {
  padding: .3em .3em 0;
  background: rgba(98, 98, 98, 0.252);
  text-align: center;
  border: 2px solid;
 
}
.carousel div {
  position: relative;
  margin-bottom: .3em;
  padding-top: 56.25%;
}
.carousel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.carousel span {
  display: inline-block;
  word-spacing: 1em; 

  overflow: auto;
  white-space: nowrap;
  word-wrap: normal;

}
.carousel a {
  position: relative;
  display: inline-block;
  max-width: 120px;  
  width: 25%; 
  border: 1px solid blue; 
  opacity: .7;  
  text-decoration: none;
}
.carousel a:visited,
.carousel a:nth-of-type(1) {
  border-color: #555; 
}
.carousel a:hover { 
  opacity: 1;
}
.carousel a:not(:active):focus {
  pointer-events: none;
}
.carousel a::before {
  content: "";
  position: absolute;
  top: 0em;
  right: 0em;
  bottom: 0em;
  left: 0em;
  background: rgba(0,0,1,.1);
  transition: background 0s 9999999s;
}
.carousel a:nth-of-type(1)::before {
  background: rgba(255,255,254,.7);
}
.carousel span:active a::before {
  background: rgba(0,0,0,0);
  transition: background 0s;
}
.carousel span:active a:active::before {
  background: rgba(255,255,255,.7);
  transition: background 0s;
}
.carousel img {
  max-width: 100%;
  vertical-align: middle;  
}

.section-header {
  text-align: center;
  margin: 60px auto 20px auto;

  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}

.section-header-underline {
  border: 1px solid #ffffff;
  width: 3rem;
  margin: 0 auto;
  margin-bottom: 30px;
}