/* Lightbox container */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9); /* dark overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
}

/* Show state */
.lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

/* Enlarged image */
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  transform: scale(0.8);
  transition: transform 0.4s ease;
}

.lightbox.show img {
  transform: scale(1);
}header {
  width: 90%;/* header width relative to screen */
  height: 90px;/* fixed header height */
  margin: 10px auto;/* center horizontally with margin*/
  background: linear-gradient(to right, rgb(35,43,43), rgb(65,74,76)); /* dark gradient header */
  border-radius: 50px;/* pill-shaped rounded corners */
  border: solid 3px #E5e4e2;/* silver border */
  display: flex;/* flex layout para madaling i-align elements */
  align-items: center;/* vertically center content */
  justify-content: space-between;/* space-between logo at nav links */
  padding: 0 20px;/* space sa left at right */
}
/*LOGO*/
#logo {
  height: 70px;/* logo fixed height */
  width: auto;   
  align-self: center;
}
/*NAVIGATION*/
nav{
  display: flex;
  justify-content: center;
  gap: 10px;
  
}
.nav-item {
  padding: 5px 10px;   
  width: auto;      /*width mag auto  */
  text-align: center;/* text center */
  border-radius: 10px;/* rounded button shape */
    cursor: pointer;/* show pointer cursor */
  transition: background 0.3s;/* smooth hover effect */
}

.nav-item:hover {
  background: #CBC3E3;/* light purple hover effect */
}
a {
  color: #e5e4e2; /* light gray text color */
  text-decoration: none; /* tanggal underline ng link */
}
  /* GENERAL STYLES */
body {
margin: 0;
background: linear-gradient(to right, #4b0082, #E5e4e2);
font-family: sans-serif;
}
article {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
background: linear-gradient(to right, rgb(35,43,43), rgb(65,74,76));
border-radius: 20px;
color: white;
display: flex;
flex-wrap: wrap;
gap: 20px;
border: 1px solid white;
}
aside {
flex: 1 1 250px;
background: rgba(255, 255, 255, 0.05);
padding: 10px;
border-radius: 10px;
}
#services {
flex: 1 1 300px;
}

/* TEXT STYLING */
.highlight {
text-decoration: underline;
}

p {
color: #e5e4e2;
}

.price-tag {
color: violet;
font-weight: bold;
}
.gallery-container {
  overflow-x: auto;   /* enable horizontal scroll */
  overflow-y: hidden; 
  background: purple;/* prevent vertical overflow */
  white-space: nowrap; /* keep items in one row */
  -webkit-overflow-scrolling: touch; /* smooth scroll on mobile */
}
.galla.bay {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.galla,.mendez{
  max-width:  100%;
  padding: 10px;
  border-radius: 20px;
  background: purple;
  display:none;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.gallery-list {
  display: flex;
  gap: 10px; /* spacing between items */
  padding: 0;
  margin: 0;
  list-style: none;
}

.gallery-list li {
  flex: 0 0 auto;   /* prevents shrinking */
  width: 100%;      /* one item per screen width */
  max-width: 280px; /* optional: fixed card size */
  height: 280px;
  overflow: hidden;
}
.gallery-list img {
  width: 100%;
  height: 100%;
  aspect-ratio:5/9;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  flex: 0 0 100%;
  transition: transform 0.3s ease, z-index 0.3s ease;
  position: relative;
}
.bay{
  display: block;
  transition: opacity 0.8s linear;
}
.gallery-list img:hover{
  transform: scale(2);
  z-index: 1;
  width: 100%;
}
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  flex-wrap: wrap;
}

#loading-screen span {
  display: inline-block;
  font-size: 120px;
  margin: 0 2px;
  font-weight: bold ;
  color: white;
  -webkit-transform-origin: 70%;
  transform-origin: 70%;
  animation: flipFade 3s linear infinite;
}

/* Even letters different color */
#loading-screen span:nth-child(even) {
  color: blueviolet;
  font-family: cursive;
}

/* Stagger the animation delays */
#loading-screen span:nth-child(2) { animation-delay: 0.3s; }
#loading-screen span:nth-child(3) { animation-delay: 0.6s; }
#loading-screen span:nth-child(4) { animation-delay: 0.9s; }
#loading-screen span:nth-child(5) { animation-delay: 1.2s; }
#loading-screen span:nth-child(6) { animation-delay: 1.5s; }
#loading-screen span:nth-child(7) { animation-delay: 1.8s; }
#loading-screen span:nth-child(8) { animation-delay: 2.1s; }
#loading-screen span:nth-child(9) { animation-delay: 2.3s; }
#loading-screen span:nth-child(10){ animation-delay: 2.7s; }

/* Combined flip + fade animation */
@keyframes flipFade {
  35%  { transform: rotateX(360deg); opacity: 0.5; }
  100% { transform: rotateX(360deg); opacity: 1; }
}
#loading-screen{
  font-size: clamp(40px, 8vw, 120px);
}
.logo {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    background-image: url('logo.png');
    background-repeat: no-repeat;
    animation: logo-spin 20s ease forwards;
  }
 @keyframes logo-spin {
    0% { transform: rotate(0deg) scale(0); opacity: 0; }
    50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
  }
  .description {
    font-size: 1.5rem;
    color: #790945;
    margin-top: 20px;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
    animation-delay: 6s; /* show after logo animation */
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }
  .glarey {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    gap: 15px;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
    animation-delay: 5s;
  }

  .glarey img {
    width: 222px;
    height: 220px;
    border-radius: 10px;
    object-fit: cover;
  }
  .container{
    text-align: center;
    border-radius: 20%;
    padding: 20px ;

    height: 100vh;
    background: blueviolet;
  }
  button{
    padding: 15px 30px;
    font-size: 30px;
    background: #4b0082;
    border: none;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
  }
  button:hover {
    background: #790945;
  }


/* RESPONSIVE */
@media (max-width: 600px) {
header {
flex-direction: column;
height: auto;
padding: 10px;
text-align: center;
}

.nav-links {
margin-top: 10px;
flex-wrap: wrap;
justify-content: center;
}

article {
flex-direction: column;
}

aside, #services {
flex: 1 1 100%;
}
#loading-screen span {
    font-size: 50px; /* smaller letters for mobile */
    margin: 0 1px;   /* tighter spacing */
  }
}
.glarey img{
  width: 90px;
  height: 90px;
}
.container{
  height: 100vh;
  padding: 10px;
} button{
  width: auto;
  height: auto; 
  margin-top:  60px  ;
  font-size: 20px;
}
  

/*galerh*/