body {
      font-family: Arial, sans-serif;
      /*   background: url('images/bg_brown.png') no-repeat center center fixed;
      background-size: cover; */
      margin: 0;
     /*  padding: 20px; 
       text-align: center;
      color:maroon;
      font-style:oblique;
      font-weight:bold;*/
    
 
 text-align: center;
} 
    h1 {
      margin-bottom: 1px;
      
    }

    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
     gap: 15px;
      font-family: sans-serif;
      font-size:12px;
      font-weight:bold;
    }

    .thumbnail {
      width: 150px;
      height: 200px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
       margin-bottom: 10px;
      margin-bottom:10px;
      
    }

    /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 100;
      padding-top: 60px;
      left: 0; top: 0;
      width: 100%; height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.7); /* ← 50% opacity black */
    }

.modal-content {
  position: relative;
  /*  background: url('images/bg_brown.png') no-repeat center center fixed; */
  background-size: cover;
  margin: auto;
  padding: 30px 20px;
  border-radius: 10px;
  width: 350px;
  height: 500px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.modal-img {
  width: 270px;
  height: 360px;
  /* margin: 0 30px; */ /* extra space left/right */
  object-fit: cover;
  border: 5px solid white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 1;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: white;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  padding: 0px;
  transition: transform 0.2s, color 0.2s;
}

.nav-arrow.left {
  left: 5px;
}

.nav-arrow.right {
  right: 5px;
}

.nav-arrow:hover {
  transform: translateY(-50%) scale(1.2);
  color:maroon;
}

 
.close {
  color: white;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}


.close:hover {
  color:maroon; /* Color on hover */
}

    .modal-info {
      margin-top: 10px;
      font-size: 18px;
    }

#muteToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
 /* background-color: white; */
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  user-select: none;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 22px;
 /* color: #0200ab; */
}

#muteToggle:hover {
 /* background-color: #f3d80b; */
  transform: scale(1.1);
  color: black;
}