* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden; /* Prevent scrolling on the body */
  width: 100%;
}

.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

#center-logo img {
  width: 250px;
  background-color: #f7f4f3;
  border: 5px solid black;
  border-radius: 10px;
  padding: 10px;
}

#center-logo .welcome {
  margin-top: 70px;
  font-size: 45px;
  color: white;
  text-align: center;
}

/* Swiper container and slides */
.swiper {
  height: 100vh;
}

.swiper-wrapper {
  width: 100%;
}

.swiper-slide {
  height: 100vh;
  overflow: hidden;
}

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

.swiper-fade .swiper-slide {
  pointer-events: none; /* disable interaction */
  transition-property: opacity;
}

.swiper-button-next,
.swiper-button-prev {
  color: white !important; /* the arrows were still blue, so I had to put important */
}