@tailwind base;
  @tailwind components;
  @tailwind utilities;

  .slider {
    position: relative;        /* Allows us to position buttons on top */
    overflow: hidden;          /* Hides the slides that are not currently visible */
    width: 100%;
    max-width: 600px;          /* You can change this to any size you like */
    margin: auto;              /* Centers the slider on the page */
  }
  
  .slides {
    display: flex;             /* Places the slides in a row */
    transition: transform 0.5s ease;  /* Makes the sliding smooth */
    list-style: none;          /* Removes bullet points from the list */
    padding: 0;
    margin: 0;
  }
  
  .slide {
    min-width: 100%;           /* Each slide takes up the full width of the container */
    box-sizing: border-box;    /* Makes padding and border count in the width */
    /* Optional: add background, text styling, etc. */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    background: #f0f;
    height: 300px;            /* Adjust the height as needed */
  }
  
  .carousel {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
  }
  
  .carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-slide {
    width: 60%;
    display: block;
    object-fit: cover;
  }
  
  
  .prev {
    left: 10px;
    transform: translateY(-50%);
  }
  
  .next {
    right: 10px;
    transform: translateY(-50%);
  }

  /* Modal styles */
  .modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000 !important;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
      background-color: #fff;
      padding: 20px;
      max-width: 600px;
      width: 90%;
      top: 10%;
      margin: auto;
      position: relative;
      border-radius: 5px;
  }

  /* Close button */
  .close-btn {
    position: absolute;
    top: 10px;
    right: 24px;
    font-size: 40px;
    color: #333;
    cursor: pointer;
    z-index: 1000;
    font-weight: lighter;
  }

  .close-btn:hover {
    color: red;
  }

  .sale-video{
    z-index: 10;
  }

  .header-featured-image img{
    width: 100%;
  }

  /* Fullscreen menu overlay */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Ensure it spans the entire viewport width */
    height: 100vh; /* Ensure it spans the entire viewport height */
    background-size: cover; /* Make background image cover the whole overlay */
    background-position: center center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent background image tiling */
    z-index: 9999 !important; /* Ensure it appears above everything */
    display: none; /* Initially hidden */
    opacity: 0; /* Make it invisible */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
  }

  /* Active state to show overlay */
  .menu-overlay.active {
    display: block; /* Show the overlay */
    opacity: 1; /* Fade in */
  }


  .mobile-nav {
  background: #0a1b2a;
  color: white;
  padding: 1rem;
  position: relative;
}

.menu-toggle {
  font-size: 1.5rem;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  background-color: #0a1b2a;
  border-radius: 5px;
}

.dropdown-menu li {
  border-top: 1px solid #4bbdc5;
}

.dropdown-menu li a {
  display: block;
  padding: 1rem;
  color: white;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background: #4bbdc5;
}

/* Optional: show on small screens only */
@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}