.kotak-pesan {
  margin: 0 15px;
  padding: 20px;
 
  overflow: auto;
  height: 400px;
}
.gbg{
  background-color: #AAC8A724; color: #a28042;
}
.banner-content{
  height: 100%;
  color: white;
  justify-content: center;
  display: flex;
  
}
.bantu{
  
  
  border: solid;
  color: rgb(251, 247, 247);
  
}
.t{
  font-family: 'i Inspiring Angel', sans-serif;                                                                                  
}
h1{
  font-family: 'italiana';
  
}
.display-1{
  font-family: 'Italiana', sans-serif;
}
.fs-1{
  font-family: 'Vanilla', sans-serif;
                                            
}

@media (max-width: 991.98px) {
  #main-navbar {
    background-color: #fff;
  }

  .nav-link,
  .navbar-toggler-icon {
    color: #4f4f4f !important;
  }
}
@media (min-width: 992px) {
  .rotate-lg {
    transform: rotate(6deg);
  }
  .rotate-lg2 {
    transform: rotate(-6deg);
  }
}
@media (max-width:768px){
  .sTd{
    width: 25%;
  }
  .lightboxmari{
    width: 25%;
  }
  
}

.dyv-dark{
  background-color: rgb(47, 41, 41); 
  color: rgb(31, 29, 29);
}
p{
font-family: 'Quicksand', sans-serif;
}

/* BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}
.gallery-item {
  flex-basis: 32.7%;
  margin-bottom: 6px;
  opacity: .85;
  cursor: pointer;
}
.gallery-item:hover {
  opacity: 1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-content {
  font-size: .8em;
}

.lightbox {
  position: fixed;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;              
  overflow: auto;
  top: 0;
  left: 0;
}
.lightbox-content {
  position: relative;
  width: 25%;
 
  margin: 5% auto;
}
.lightbox-content img {
  border-radius: 7px;
  box-shadow: 0 0 3px 0 rgba(225, 225, 225, .25);
  width: 75%;
 
  object-fit: cover;
   margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 7px;
  top: 45%;
  cursor: pointer;
}
.lightbox-prev {
  left: 0;
}
.lightbox-next {
  right: 0;
}
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: .8;
}

@media (max-width: 767px) {
  .gallery-container {
      width: 100%;
  }
  .gallery-item {
      flex-basis: 49.80%;
      margin-bottom: 3px;
  }
  .lightbox-content {
      width: 50%;
   
      margin: 15% auto;
  }
}
@media (max-width: 480px) {
  .gallery-item {
      flex-basis: 25%;
      margin-bottom: 1px;
  }
  .lightbox-content {
      width: 90%;
      margin: 20% auto;
  }
}