/* ===== Global Reset ===== */
* {
  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;
  overflow-y: scroll;
}

/* ===== 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;
}
html, body {
  overflow-x: hidden;
}
html, body {
  overscroll-behavior: none;
}

/* Animated Neon Gradient */
@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;
}

/* ===== Sparkles ===== */
.sparkles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
}

.sparkle {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: float 8s linear infinite;
  pointer-events: none;
}

@keyframes float {
  0% {transform: translateY(0);}
  50% {transform: translateY(-50px);}
  100% {transform: translateY(0);}
}

/* ===== Contact Card ===== */
.contact-section {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 20px;
  min-height: 80vh;
}

.contact-card {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #ff6ec4;
  padding: 40px 30px;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 30px rgba(255, 110, 196, 0.7), 0 0 60px rgba(0, 255, 234, 0.5);
  backdrop-filter: blur(5px);
  transition: transform 0.3s ease;
}

.contact-card:hover {
  transform: scale(1.03);
}

.contact-card h5 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fffc00;
}

.contact-info p {
  font-size: 1.5rem;
  margin: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info i {
  margin-right: 10px;
  color: #ff6ec4;
}

.contact-info a {
  color: #00ffea;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

/* ===== 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);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .contact-card {
    padding: 30px 20px;
  }

  .contact-info p {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .contact-card {
    padding: 20px 15px;
  }

  .contact-info p {
    font-size: 1.1rem;
  }

  #menu-bars {
    display: block;
  }


  /* ===== Mobile Responsive Adjustments ===== */
@media (max-width: 1024px) {
  /* Hero Text */
  .hero-text h2 {
    font-size: 2.6rem; /* Slightly smaller on tablets */
  }

  /* Hero Booking Form */
  .hero-booking .contactus {
    width: 85%;
    padding: 25px;
  }

}

}
.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: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;
    }
}