/* Full Page Banner Styles */
#fullpage-banner {
  scroll-snap-type: x mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.banner-section {
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  scroll-snap-align: start;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 80%;
  max-width: 800px;
}

/* Smooth scrolling behavior */
html {
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#fullpage-banner::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#fullpage-banner {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Fade-in animation */
.fade-in {
  animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-outline-custom {
  color: #FFF;
  border: 1px solid #fff;
  background-color: #254b6b;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.375rem;
/*  transition: all 0.15s ease-in-out;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.btn-outline-custom:hover,
.btn-outline-custom:focus {
  background-color: #254b6b;
  color: #ffb13e;
  text-decoration: none;
  border-color: #ffb13e;
}

.bg-layer{
  background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black background */
  padding: 2px 4px;
  border-radius: 10px;
  display: inline-block;
}


    .img-thumbnail {
      cursor: pointer;
    }
    .modal-dialog {
      max-width: 800px;
    }
    .modal-body {
      position: relative;
    }
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2rem;
      cursor: pointer;
      color: #fff;
      z-index: 2;
    }
    .arrow.left {
      left: 10px;
    }
    .arrow.right {
      right: 10px;
    }
    .modal-header {
      border-bottom: none;
    }
    .btn-close {
      margin-left: auto;
    }

    #modalImage {
      opacity: 0;
      transform: scale(0.98);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #modalImage.visible {
      opacity: 1;
      transform: scale(1);
    }