* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  text-transform: capitalize;
  transition: all 0.3s ease;
}
html {
  font-size: 80.5%;
  scroll-behavior: smooth;
}
/* ===== Body & Background ===== */
/* ===== Body & Background ===== */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(-45deg, #ff6ec4, #7873f5, #00ffea, #fffc00);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: white;
  overflow-x: hidden;
  line-height: 1.6;
}


@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* ===== Header ===== */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: rgba(0, 0, 0, 0.85);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}

.header img {
  width: 120px;
}
.header img:hover {
  transform: scale(1.1) rotate(-5deg);
}
.navbar a {
  margin-left: 25px;
  font-size: 1.6rem;
  color: #fff;
  font-weight: 600;
  position: relative;
}

.navbar a::after {
  content: '';
  height: 3px;
  width: 0;
  background: #ffc61a;
  position: absolute;
  left: 0;
  bottom: -5px;
  border-radius: 5px;
  transition: width 0.3s;
}
.navbar a:hover::after {
  width: 100%;
}

#menu-bars {
  display: none;
  font-size: 2.4rem;
  color: white;
  cursor: pointer;
}

/* ===== Gallery Section ===== */
.gallery-section {
  position: relative;
  padding: 120px 20px 50px 20px;
  z-index: 2;
  text-align: center;
}

.gallery-section h1 {
  font-size: 3rem;
  margin-bottom: 10px;
  color: #fffc00;
}

.gallery-section p {
  font-size: 1.6rem;
  margin-bottom: 40px;
  color: #00ffea;
}

/* ===== Gallery Grid ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255, 110, 196, 0.5), 0 0 60px rgba(0, 255, 234, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
  border-radius: 20px;
}

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

.gallery-item::after {
  content: attr(data-title);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ===== Fade-in Animation ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}



/* Mobile View Gallery Adjustments: 3 images per row, fully visible */
@media (max-width: 768px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 images per row */
        gap: 5px; /* space between images */
        padding: 5px;
    }

    .gallery-item img {
        width: 100%;     /* fit the grid cell */
        height: auto;    /* maintain aspect ratio */
        object-fit: contain; /* no cropping */
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .gallery-item img:hover {
        transform: scale(1.05);
    }
}
/* Mobile Lightbox */
@media (max-width: 768px) {
    .lightbox {
        display: none; /* hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.9);
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .lightbox-img {
        max-width: 95%;
        max-height: 95%;
        border-radius: 10px;
    }

    .lightbox .close,
    .lightbox .prev,
    .lightbox .next {
        position: absolute;
        color: #fff;
        font-size: 2rem;
        cursor: pointer;
        user-select: none;
        padding: 10px;
        background: rgba(0,0,0,0.3);
        border-radius: 5px;
        transition: 0.3s;
    }

    .lightbox .close:hover,
    .lightbox .prev:hover,
    .lightbox .next:hover {
        background: rgba(255,255,255,0.2);
    }

    .lightbox .close {
        top: 10px;
        right: 10px;
    }

    .lightbox .prev {
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
    }

    .lightbox .next {
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

    /* Hide caption */
    .lightbox .caption {
        display: none;
    }
}
/* Mobile lightbox button adjustments */
@media (max-width: 768px) {
    .lightbox .prev,
    .lightbox .next,
    .lightbox .close {
        font-size: 1.5rem;        /* smaller buttons for mobile */
        padding: 6px 8px;         /* smaller padding */
    }

    .lightbox .prev {
        left: 5px;                /* closer to edge */
    }

    .lightbox .next {
        right: 5px;               /* closer to edge */
    }

    .lightbox .close {
        top: 5px;
        right: 5px;
    }
}

/* ===== Header Container ===== */
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.4);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Logo ===== */
.logo-wrapper img {
    width: 130px;
    transition: transform 0.3s ease;
}

.logo-wrapper img:hover {
    transform: scale(1.1) rotate(-5deg);
}


.navbar a { margin-left:25px; font-size:1.6rem; color:#fff; font-weight:600; position:relative; }
.navbar a::after { content:''; height:3px; width:0; background:#ffc61a; position:absolute; left:0; bottom:-5px; border-radius:5px; transition:width 0.3s; }
.navbar a:hover::after { width:100%; }
.header {
  padding: 5px 20px;   /* smaller top/bottom padding reduces header box */
  /* or you can use: min-height */
  min-height: 50px;    /* sets the minimum height of the header */
}


@media screen and (max-width: 768px) {
    /* Reduce header padding to make it shorter */
    .header {
        padding: 5px 10px;          /* Less top/bottom padding */
        height: auto;                /* Let content determine height */
    }

    /* Make logo smaller but keep text readable */
    .header #logo img {
        width: 80px;                 /* Smaller logo width */
        height: auto;
    }

    /* Navbar links: reduce spacing between them */
    .header .navbar a {
        padding: 5px 8px;            /* Less spacing between links */
    }

    /* Hamburger menu icon position and size */
    #menu-bars {
        font-size: 1.4rem;           /* Slightly smaller menu icon */
    }
}

@media screen and (max-width: 768px) {
    .hero-text {
        margin-top: 0;           /* Remove default top margin */
        padding-top: 0;          /* Remove top padding */
        position: relative;
        top: -100px;              /* Pull text up by 20px, adjust as needed */
        text-align: center;      /* Keep text centered */
    }

    /* Optional: adjust spacing between headings */
    .hero-text h1 {
        margin-bottom: 5px;
    }

    .hero-text h2 {
        margin-top: 5px;
    }
}



@media screen and (max-width: 768px) {
    /* Move hero text up */
    .hero-text {
        margin-top: 0;        /* Remove top margin */
        padding-top: 0;       /* Remove padding */
        position: relative;
        top: -20px;           /* Pull text upward, increase value if needed */
        text-align: center;
    }

    /* Move booking form closer to hero text */
    .booking-form {
        margin-top: -15px;    /* Pull form upward */
        padding: 10px 10px;   /* Optional: smaller padding */
        width: 90%;           /* Fit mobile screen */
        box-sizing: border-box;
    }

    /* Reduce spacing between input fields */
    .booking-form input[type="text"],
    .booking-form input[type="tel"],
    .booking-form input[type="date"] {
        margin-bottom: 8px;
        padding: 8px 10px;
        font-size: 0.95rem;
    }

    /* Adjust button size */
    .booking-form button.booknow {
        padding: 8px 12px;
        font-size: 0.95rem;
        width: 100%;
        margin-top: 5px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 62.5%;
        scroll-behavior: smooth;
    }
}