#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100vw;
    gap: 100px;
    background-image: linear-gradient(to top, rgb(255, 209, 193), white);
}

    @media (max-width: 2000px) {
      #gallery {
        gap: 0px;
     }
   }

#galleryTxt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

#galleryTxt p {
    font-family: 'Heebo', sans-serif;
    font-weight: 100;
    font-size: clamp(18px, 3vw, 24px);
}

#ctaGallery {
    display: block;
    text-align: center;
    border: none;
    border-radius: 10px;
    padding: 15px 70px;
    font-size: clamp(16px, 3vw, 24px);
    font-family: 'Assistant', sans-serif;
    font-weight: 200;
    cursor: pointer;
    color: white;
    background-image: linear-gradient(to right, rgb(111, 39, 13), rgb(160, 56, 19));
}

#ctaGallery:hover {
    background-image: linear-gradient(to right, rgb(160, 56, 19), rgb(160, 56, 19));
}

#gallery h2 {
    font-family: 'Secular_One', sans-serif;
    font-weight: 200;
    color: rgb(111, 39, 13);
    font-size: clamp(24px, 3vw, 50px);
    /* background-color: rgb(12, 83, 87); */
    /* background-image: linear-gradient(to top, rgb(30, 146, 152), rgb(20, 95, 99)); */
    /* width: 100%; */
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.gallery-wrapper {
     position: relative; 
     width: 1200px; 
     height: 800px; 
     overflow: hidden;
    }

    @media (max-width: 1100px) {
      .gallery-wrapper {
      width: 100vw;
       height: 600px; 
     }
   }

    @media (max-width: 800px) {
      .gallery-wrapper {
        width: 100vw;
       height: 500px; 
     }
   }

       @media (max-width: 700px) {
      .gallery-wrapper {
        width: 100vw;
       height: 400px; 
     }
   }

       @media (max-width: 600px) {
      .gallery-wrapper {
        width: 100vw;
       height: 300px; 
     }
   }

       @media (max-width: 500px) {
      .gallery-wrapper {
        width: 100vw;
       height: 300px; 
     }
   }

   @media (max-width: 400px) {
      .gallery-wrapper {
       height: 250px; 
     }
   }

.gallery-wrapper img {
     position: absolute;
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      top: 0; 
      left: 0; 
      opacity: 0; 
      transition: opacity 1s ease; 
    }

.gallery-wrapper img.active {
     opacity: 1; 
    }

.arrow {
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     background: rgba(255,255,255,0.7); 
     border: none; 
     padding: 10px; 
     cursor: pointer; 
     border-radius: 50%; 
     font-size: 18px; 
     user-select: none; 
    }

.arrow.left {
     left: 30px; 
    }

.arrow.right {
     right: 10px; 
    }

.dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  direction: rtl;
}

.dots span {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dots span.active {
  background: rgba(255, 255, 255, 1);
}