.credit {
   position: absolute;
   bottom: 20px;
   left: 20px;
   color: inherit;
}

 .options {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   overflow: hidden;
   min-width: 100%; /* Changed from 600px */
   max-width: 100%; /* Changed from 900px */
   width: calc(100% - 100px);
   height: 400px;
}

@media screen and (max-width: 718px) {
   .options {
      min-width: 520px;
   }
   .options .option:nth-child(5) {
      display: none;
   }
}

@media screen and (max-width: 638px) {
   .options {
      min-width: 440px;
   }
   .options .option:nth-child(4) {
      display: none;
   }
}

@media screen and (max-width: 558px) {
   .options {
      min-width: 360px;
   }
   .options .option:nth-child(3) {
      display: none;
   }
}

@media screen and (max-width: 478px) {
   .options {
      min-width: 280px;
   }
   .options .option:nth-child(2) {
      display: none;
   }
   .main-menu__logo img{
      width: 100%;
   }
}

.options .option {
   position: relative;
   overflow: hidden;
   min-width: 60px;
   margin: 10px;
   background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
   background-size: auto 120%;
   background-position: center;
   cursor: pointer;
   transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

/* Set custom background colors for each option */
.options .option:nth-child(1) {
   --defaultBackground: #ed5565;
}
.options .option:nth-child(2) {
   --defaultBackground: #fc6e51;
}
.options .option:nth-child(3) {
   --defaultBackground: #ffce54;
}
.options .option:nth-child(4) {
   --defaultBackground: #2ecc71;
}
.options .option:nth-child(5) {
   --defaultBackground: #5d9cec;
}
.options .option:nth-child(6) {
   --defaultBackground: #ac92ec;
}

.options .option.active {
   flex-grow: 10000;
   transform: scale(1);
   max-width: 600px;
   margin: 0px;
   border-radius: 40px;
   background-size: auto 100%;
}

.options .option.active .shadow {
   box-shadow: inset 0 -120px 120px -120px black,
               inset 0 -120px 120px -100px black;
}

.options .option.active .label {
   bottom: 20px;
   left: 20px;
}

.options .option.active .label .info > div {
   left: 0px;
   opacity: 1;
}

.options .option:not(.active) {
   flex-grow: 1;
   border-radius: 30px;
}

.options .option:not(.active) .shadow {
   bottom: -40px;
   box-shadow: inset 0 -120px 0px -120px black,
               inset 0 -120px 0px -100px black;
}

.options .option:not(.active) .label {
   bottom: 10px;
   left: 10px;
}

.options .option:not(.active) .label .info > div {
   left: 20px;
   opacity: 0;
}

.option .shadow {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   height: 120px;
   transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.option .label {
   display: flex;
   position: absolute;
   right: 0px;
   height: 40px;
   transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.option .label .icon {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   min-width: 40px;
   max-width: 40px;
   height: 40px;
   border-radius: 100%;
   background-color: white;
   color: var(--defaultBackground);
}

.option .label .info {
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-left: 10px;
   color: white;
   white-space: pre;
}

.option .label .info > div {
   position: relative;
   transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}

.option .label .info .main {
   font-weight: bold;
   font-size: 1.2rem;
}

.option .label .info .sub {
   transition-delay: 0.1s;
}


@media screen and (max-width: 600px) {
   .page-wrapper {
      overflow: hidden;
   }
   #gallery{
      display: none;
   }
       .options {
        min-width: 100%;
    }
}





/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity .4s ease;
  color: #fff;
  text-align: center;
}

.gallery-item:hover .overlay {
  opacity: 1;
}
.overlay h3{
   color:#fff;
   font-weight: 700 ;
}
.overlay p{
   color:#fff;
   font-size:13px;
}
/* Lightbox Overlay */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox-img {
  max-width: 90%;
  max-height: 70%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.lightbox .caption {
  color: #fff;
  text-align: center;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}