html {
  scroll-behavior: smooth;
}
#Finishes {
  margin-top: 5rem;
}
#filter-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 24px;
  padding: 1rem;
}

#filter-buttons .five:after {
  bottom: -2px;
}

#filterable-cards .finish.hide {
  display: none;
}

.gallery-tabs {
  color: black;
  text-decoration: none;
  border: none;
  padding: 1rem 0.5rem 0 0.5rem;
  padding-top: 1rem;
  transition: box-shadow 800ms;
  background-color: transparent;
}
.gallery-tabs.active {
  box-shadow: 0px 2px 0px 0px var(--lightGold);
  color: var(--lightGold);
  font-weight: 700;
}
.gallery-tabs:before {
  display: block;
  content: attr(title);
  font-weight: 700;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: auto auto auto;
  grid-auto-rows: 1fr;
  gap: 1rem;
  padding: 2rem 8vw 8vw;
  justify-content: center;
}
.finish {
  background-color: rgb(151, 103, 0);
  position: relative;
  max-height: 250px;
  max-width: 400px;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}

.finish img {
  width: 100%;
  object-fit: unset;
  height: 100%;
  height: -webkit-fill-available;
}
.card-body {
  opacity: 0;
  position: absolute;
  bottom: 0;
  /* left: 1rem; */
  width: 100%;
  text-align: bottom;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.07) 0%,
    rgba(40, 34, 31, 0.7) 100%
  );
  color: white;
}
figure:hover .card-body {
  opacity: 1;
  /* transition: all 1s; */
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .card-body {
    opacity: 1;
  }
}
figure {
  margin: 0 0 0;
}
.card-info {
  position: absolute;
  bottom: 0;
  padding: 2rem;
  letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
    padding: 2rem 6vw 8vw;
  }
  .gallery h4 {
    font-size: 18px;
  }
  #filter-buttons {
    font-size: 18px;
  }
}
@media screen and (max-width: 426px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  #filter-buttons {
    gap: 0.75rem;
    font-size: 14px;
  }
}

/*  */
/* .modal {
  --bs-modal-bg: transparent;
  --bs-modal-width: 60vw;
}
.modal-body {
  display: flex;
  gap: 2rem;
}
.modal-header {
  border-bottom: none;
}
.modal-content {
  border: none;
}
.modal-info {
  width: 80%;
  background: white;
  padding: 1rem;
}
.carousel-item img {
  width: 60vw;
} */
.modal {
  --bs-modal-footer-border-color: #000;
  --bs-modal-border-radius: 0;
}
.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  height: 100%;
  margin: inherit;
}
.modal-body .row {
  align-items: stretch !important;
}

.modal-content {
  background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
  border: none;
}
.carousel-container {
  align-self: CENTER;
}
/* Adjust carousel images for all screen sizes */
.carousel-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure the entire image is visible */
}

/* White background and padding for the information section */
#info-section {
  background-color: white;
  padding: 20px;
  /* border-radius: 10px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* Make the height match the carousel */
}

/* Flex container to make carousel and info section responsive */
.modal-body .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* gap: 1rem; */
}

/* Make the carousel take more space on larger screens */
@media (min-width: 768px) {
  .carousel-container {
    flex: 2;
  }

  .info-container {
    flex: 1;
  }
}

/* Adjust the image height for smaller screens */
@media (max-width: 769px) {
  .modal-body .row {
    gap: 1rem;
  }
  .carousel-inner img {
    max-height: 300px; /* Limit height to ensure full image display on small screens */
    height: fit-content !important;
    object-fit: contain; /* Ensure the full image is shown without cropping */
  }
}
@media (max-width: 768px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }
}
@media (min-width: 769px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: auto;
    margin-left: 10vw;
    margin-right: 10vw;
  }
}

@media (min-width: 1025px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: auto;
    margin-left: 18vw;
    margin-right: 18vw;
  }
}
/* @media (min-width: 576px) {
  .modal-dialog {
    max-width: inherit;
  }
} */
.carousel-control-next-icon,
.carousel-control-prev-icon {
  background-color: var(--darkBrown);
}

.carousel-item {
  display: none;
}
.carousel-item.active {
  display: block;
}
@media only screen and (max-height: 575.98px) and (orientation: landscape) {
  .modal-content {
    transform: translateY(160px);
  }
}

#Finishes {
  background-image: url(../Images/marble.webp);
}