body {
      cursor: default;
      user-select: text;
      background: url("../img/background/bg.jpg") no-repeat center center fixed;
      background-size: cover;
    }

    .hero-section {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)),
    url('../img/banner/banner-hero-high.jpeg') center/cover no-repeat;
    }

    .hover-zoom {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-zoom:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }

    .fade {
    opacity: 0;
    transition: opacity 0.5s ease;
    }

    .fade.show {
    opacity: 1;
   }

    .fade.hide {
    opacity: 0;
    }

    .fade-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .fade-scroll.show {
    opacity: 1;
    transform: translateY(0);
    }

     .image-container {
    position: relative;
    overflow: hidden;
  }

  .image-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: black;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 0.875rem; /* text-sm */
  }

  .image-container:hover .image-description {
    opacity: 1;
  }

  .gallery-slide {
    transition: opacity 0.5s ease-in-out;
  }

  html {
    scroll-behavior: smooth;
  }