@charset "UTF-8";
/* Import Open Sans for improved readability across testimonials and other body copy */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Anton', sans-serif;
  background-color: #111;
  color: #fff;
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
}




/* Sticky Header */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  /* Transition for smooth shrinking effect on scroll */
  transition: all 0.3s ease;
}

.navbar {
  /* Align header items without pushing the logo around when it shrinks.
     Removing justify-content: space-between and pushing the nav list to the
     right ensures the logo stays anchored in the top left. */
  display: flex;
  align-items: center;
  padding: 1.5rem 3rem;
}

/* Logo container: keep fixed dimensions but scale down on scroll.
   Using transform instead of changing width/height prevents the
   logo from shifting position when the header shrinks. */
.logo {
  position: relative;
  width: 200px;
  height: 60px;
  /* Only transition transforms to avoid unintended shifts */
  transition: transform 0.3s ease;
  /* Anchor scaling to the top left so the logo shrinks in place */
  transform-origin: top left;
}

.logo img {
  /* Make the images fill the container; using width:100% ensures
     both the color and white logo fill the same area. This prevents
     the white logo from appearing smaller or shifted when toggled. */
  width: 100%;
  height: 100%;
  /* Preserve the aspect ratio and center the image within the container. Using
     object-fit: contain ensures both the color and white versions scale
     proportionally to the container without distortion. */
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 0.3s ease;
  position: absolute; /* stack both logos in the same spot */
}

/* Shrink header and logo when user scrolls down */
.main-header.shrink {
  padding: 0.5rem 3rem;
}

.main-header.shrink .logo {
  /* Scale the entire logo container rather than changing its size */
  transform: scale(0.75);
}

.main-header.shrink .logo img {
  height: 100%;
}

.logo-color.hidden,
.logo-white.hidden {
  opacity: 0;
  pointer-events: none;

}

.logo-white {
  opacity: 0;
  pointer-events: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  /* Push the navigation items to the right side of the header */
  margin-left: auto;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #3399ff;
}

.nav-links a.book-now-link:hover {
  color: #e53935;
}

/* Book Online link in the header: style it as a button but smaller than the CTA */
.navbar .book-now-link {
  background-color: #3399ff;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-left: 1rem;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.navbar .book-now-link:hover {
  background-color: #e53935;
  transform: scale(1.05);
}

/* Hamburger menu button for mobile navigation */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  margin-left: auto;
}

.menu-toggle span {
  height: 3px;
  width: 25px;
  background: #fff;
  margin: 4px 0;
  transition: all 0.3s ease;
}

/* Mobile navigation styles */
@media (max-width: 768px) {
  .navbar {
    padding: 1rem 1.5rem;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: rgba(0, 0, 0, 0.95);
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    display: none;
    /* Ensure the expanded mobile menu sits above content */
    z-index: 1001;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    margin: 0;
  }
  .nav-links a {
    font-size: 1.1rem;
  }
  .menu-toggle {
    display: flex;
  }
  /* Ensure the Book Online button remains visible on mobile */
  .navbar .book-now-link {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

/* Further reduce hero text sizes for smaller screens */
@media (max-width: 768px) {
  .slide h1 {
    font-size: 2.5rem;
  }
  .slide p {
    font-size: 1.2rem;
  }

  /* Reduce horizontal padding for slides so text doesn't wrap awkwardly on small screens */
  .slide {
    padding: 0 2rem 30%;
  }
}

@media (max-width: 480px) {
  .slide h1 {
    font-size: 1.8rem;
  }
  .slide p {
    font-size: 0.9rem;
  }

  .slide {
    padding: 0 1rem 35%;
  }
}

/* Extra small phones (e.g., 320–360px width): further reduce hero font sizes */
@media (max-width: 360px) {
  .slide h1 {
    font-size: 1.4rem;
  }
  .slide p {
    font-size: 0.8rem;
  }

  .slide {
    padding: 0 0.5rem 40%;
  }
}

/* Ensure slideshow doesn't hide behind header */
.hero-slideshow {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  color: #fff;
  text-align: center;
  margin-top: 80px; /* Offset for sticky header */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keeps text in bottom third */
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  padding: 0 8rem 20%; /* increased horizontal padding and adjust bottom padding as needed */
}



.slide-1 { background-image: url("../images/hero-01.png"); }
.slide-2 { background-image: url("../images/hero-02.png"); }
.slide-3 { background-image: url("../images/hero-03.png"); }
.slide-4 { background-image: url("../images/hero-04.png"); }
.slide-5 { background-image: url("../images/hero-05.png"); }
.slide-6 { background-image: url("../images/hero-06.png"); }

.slide h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
  color: #fff;
  font-family: 'Black Ops One', sans-serif;
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 2px 2px 6px rgba(0,0,0,0.8);
  z-index: 1;
}

.slide p {
  font-size: 1.8rem;
  color: #FFFFFF;
  position: relative;
  z-index: 1;
}

.slide-1 h1 { color: #FFFFFF; }
.slide-1 p { 
	color: #7DB8F1;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

}

.slide-2 h1 { color: #ffcc00; }
.slide-2 p { color: #ffe680; }

.slide-3 h1 { color: #3399ff; }
.slide-3 p { color: #80c1ff; }



.slide.active {
  opacity: 1;
}

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}





/* Features */
.features {
  display: flex;
  justify-content: space-around;
  padding: 4rem 2rem;
  background-color: #000;
  flex-wrap: wrap;
  gap: 2rem; /* optional for spacing between feature cards */
}

.feature {
  text-align: center;
  padding: 1rem;
  max-width: 250px;
  text-decoration: none; /* remove underline from anchor */
  color: #fff; /* default text color */
  transition: background-color 0.3s ease;
}



.feature-icon {
  width: 64px;
  height: auto;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.feature:hover .feature-icon {
  transform: scale(1.2);
}

.feature h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.feature:hover h3 {
  color: #3399ff; /* brand blue on hover */
}

.feature p {
  font-size: 1rem;
  color: #ccc;
  transition: color 0.2s ease;
}

.feature:hover p {
  /* Turn both the heading and subtitle blue on hover for consistency */
  color: #3399ff;
}


/*Testimonials Section */
.testimonials {
  width: 100%;
  background-color: #111;
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
}

.testimonials h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.review-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  height: 200px; /* increased for avatar */
}

.review {
  opacity: 0;
  position: absolute;
  width: 100%;
  transition: opacity 1s ease-in-out;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.review.active {
  opacity: 1;
}

.review-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 2px solid #fff;
}

.review-text {
  font-size: 1.25rem;
  line-height: 1.6;
  padding: 0 1rem;
  /* Use a lighter, highly readable font for review text */
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.review-author {
  font-size: 0.9rem;
  color: #bbb;
  margin-top: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}



/*CTA Button */
.cta-book-online {
  background-color: #000;
  text-align: center;
  padding: 4rem 2rem;
}

.book-online-btn {
  display: inline-block;
  /* Base colour switched to blue to match the brand palette */
  background-color: #3399ff;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem 3rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.book-online-btn:hover {
  /* On hover the button turns red to stand out */
  background-color: #e53935;
  transform: scale(1.05);
}


/* Footer */
.site-footer {
  background-color: #000;
  color: #ccc;
  padding: 3rem 2rem 1rem;
  text-align: center;
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
}

/* The footer now displays the logo as an image. Remove font styling and center it. */
.footer-logo {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Image styling for the footer logo */
.footer-logo img {
  /* Reduce size of footer logo further (~50% smaller than earlier design) for a more balanced footer */
  max-width: 35px;
  width: 100%;
  height: auto;
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.footer-links li a {
  color: #ccc;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.footer-links li a:hover {
  color: #e53935;
}

.footer-bottom {
  font-size: 0.9rem;
  color: #777;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.social-icons img {
  width: 28px;
  height: 28px;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.social-icons img:hover {
  opacity: 1;
  transform: scale(1.1);
}