html, body{
  height: 100%; /* fit to the screen */
  padding-top: 0px;
}

/* -------------------- Header & Footer -------------------- */

.navbar { 
  background-color: transparent; 
}

.navbar .container-contrain {
  background-color: transparent; 
}

.navbar-brand, 
.nav-link, 
.nav-icon { 
  color: white !important; 
}

.bar1, 
.bar2, 
.bar3 { 
  background-color: white !important; 
}

.navbar-collapse {
  background-color: transparent !important;
}

.navbar-background { 
  display: block; 
}

.footer { 
  display: none; 
}

/* -------------------- Swiper -------------------- */

.swiper {
  width: 100%;
  height: 100%;
  z-index: 1
}

.swiper-slide {
  background: #ffffff; /* hides everything behind */
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination-bullet {
  background: white !important; /* Makes bullets white */
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 1)); /* Soft glow effect */
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #337ab7 !important;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); /* Stronger glow */
}