@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
/* <weight>: Use a value from 200 to 800 */

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.selected {
  animation: fadeIn 1s ease forwards;
}
.hidden {
  animation: fadeOut 0.3s ease forwards;
}

.title {
  font-family: "Plus Jakarta Sans", sans-serif;
  text-align: center;
  max-width: 530px;
  /* margin-top: 1.75rem; */
  margin-bottom: 20px;
}

.title h1 {
  margin-bottom: 5px;
}

.subtitle {
  color: grey
}

/* SLIDESHOW */
.slideshow-container {
  position: relative;
  --scwidth: 100%;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media screen and (min-width: 1350px) {
    .slideshow-container {
        width: 60%; /* Width for screens wider than 1350px */
    }
    .image-indicator {
      width: calc(60% - 7.6vw);
    }
    .image-indicator span {
      width: calc(((21 / 60) * 60%) - 7.6vw);
    }
}

.arrow {
  height: 2vw;
  transition: transform 0.4s ease-in-out;
}

.arrow:hover {
  cursor: pointer;
}

.image-left {
  margin-right: 1.8vw;
}

.image-left:hover {
  transform: translateX(-8px);
}

.image-right {
  margin-left: 1.8vw;
}

.image-right:hover {
  transform: translateX(8px);
}

.image-collection {
  position: relative;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 4px 2px #e6e6e6;
  overflow: hidden;
  background-color: #000;
}

.image-collection img {
  object-fit: cover;
  width: 100%;
}

.selected {
  display: block;
}

.hidden {
  display: none;
}

.image-indicator {
  width: calc(100% - 7.6vw);
  height: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 1350px) {
    .image-indicator {
      width: calc(60% - 7.6vw);
    }
}

.image-indicator span {
  width: calc(((21 / 60) * 100%) - 7.6vw);
  height: 5px;
  background-color: #c7c7c7;
  border-radius: 2px;
  margin-left: 2px;
}

@media screen and (min-width: 1350px) {
    .image-indicator span {
      width: calc(((21 / 60) * 100%) - 7.6vw);
    }
}

.image-indicator span.active {
  background-color: #0c236e;
}

/* B Items */
.bitem {
  max-width: 750px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bitem .img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
  gap: 4px;
  /* background-color: rgb(157, 157, 201); */
}
.bitem .img-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  /* overflow: hidden; */
}
.bitem:hover .img-grid img {
  opacity: 0.95;
}
.bitem .txt {
  flex: 1;
  margin-left: 3em;
  /* background-color: rgb(148, 218, 148); */
}

.bitem .txt a {
  display: flex;
  align-items: center;
  width: fit-content;
  color: #fff;
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: #000;
}
.bitem .txt a img {
  width: 1em;
  aspect-ratio: 1 / 1;
  margin-left: 4px;
}
.bitem:hover .txt a {
  padding-right: 22px;
  background-color: #292929;
}
.bitem .txt:hover a {
  background-color: #3f3f3f;
}
.bitem .txt a:hover {
  background-color: #5b5b5b;
}
.bitem:hover .txt a img {
  transform: translateX(10px);
}