* {
    margin: 0;
    padding: 0;
    font-family: calibri;
    box-sizing: border-box;
    text-transform: capitalize;
  }
  :root {
    --bg: lightgray;
  }
  
  .gallery h3 {
    opacity: 0;
    animation: fadeIn 2.7s forwards;
  }
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

#Famous .image-container {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 20px;
}
#Famous .image-container figure {
  margin: 0;
  overflow: hidden;
  position: relative;
  transition: transform 0.6s ease;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#Famous .image-container figure:hover {
  background-color: #fff;
  box-shadow: 0px 0px 10px 2px var(--bg);
  transform: scale(1.1) translateY(-10px);
}
#Famous .image-container img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  transition: transform 0.3s ease;
}
#Famous .image-container figcaption {
  text-align: center;
  margin-top: 5px;
  font-size: 20px;
  transition: opacity 0.3s ease;
}
#Famous  figure .text-center a {
  text-align: center;
  margin-top: 5px;
  text-decoration: none;
}
#Famous  figure:hover figcaption {
  opacity: 1;
}
.hidden-images {
  display: none;
}
/* Additional styles for the "See More" button */
.text-center a.btn-primary {
  display: block;
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
.text-center a.btn-primary:hover {
  background-color: #0056b3;
}
.text-center .btn-success{
  display: block;
  background-color: #0056b3;
}


/* Photo Gallery */

.text-center .btn-danger {
  background-color: #0056b3;
  border: 0;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
.gallery-container img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.gallery-container figcaption {
  text-align: center;
  font-size: 18px;
  padding: 5px;
}
.gallery-container .gallery-item {
  margin: 0;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
  transition: transform 0.6s ease;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  }
.gallery-container .gallery-item:hover {
  background-color: #fff;
  box-shadow: 0px 0px 10px 2px var(--bg);
  transform: scale(1.1) translateY(-10px);
}
@media (max-width: 991px) {
  .container .gallery-container {
  grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 581px) {
  .container .gallery-container {
  grid-template-columns: repeat(1, 1fr);
  }
}