/* Custom Hamburger Menu Styling */
      .navbar-toggler {
        border: none;
        outline: none;

      }

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        background-color: red;
      }
      .h4{
         font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  color: white;
  text-decoration: none;
      }

      .mobile-menu {
        display: none;
        flex-direction: column;
        gap: 10px;
        background-color: #000;
        position: absolute;
        top: 70px;
        right: 20px;
        padding: 20px;
        border-radius: 10px;
        z-index: 1000;
      }

      .mobile-menu a {
        color: white;
        text-decoration: none;
        font-size: 16px;
        font-weight: 300;
        display: block;
        margin: 10px 0;
      }

      .mobile-menu a:hover {
        text-decoration: underline;
      }

      @media (max-width: 768px) {
        .desktop-menu {
          display: none;
        }
      }
      

      /* FAQ Accordion Styling */
      #faqAccordion {
        background-color: #1a1a1a; /* Dark background for the accordion */
        color: #ffffff; /* White text for better contrast */
        border-radius: 15px; /* Rounded corners */
        overflow: hidden; /* Prevent content overflow */
      }

      .accordion-item {
        border: none; /* Remove default borders */
        margin-bottom: 10px; /* Add spacing between items */
      }

      .accordion-header {
        background-color: #2a2a2a; /* Slightly lighter background for headers */
        padding: 15px 20px; /* Add padding for better spacing */
        border-radius: 10px; /* Rounded corners for headers */
        transition: background-color 0.3s ease; /* Smooth hover effect */
      }

      .accordion-header:hover {
        background-color: #333333; /* Darker background on hover */
      }

      .accordion-button {
        color: #ffffff; /* White text for buttons */
        font-size: 18px; /* Slightly larger font size */
        font-weight: 400; /* Normal font weight */
        text-align: left; /* Align text to the left */
        padding: 10px 15px; /* Add padding for better spacing */
        background: none; /* Remove default background */
        border: none; /* Remove default border */
        outline: none; /* Remove focus outline */
        box-shadow: none; /* Remove default shadow */
        transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
      }

      .accordion-button:hover {
        color: #ff6600; /* Highlight text color on hover */
      }

      .accordion-button:focus {
        box-shadow: none; /* Remove focus shadow */
      }

      .accordion-button::after {
        content: '\f078'; /* Font Awesome chevron-down icon */
        font-family: 'Font Awesome 5 Free'; /* Use Font Awesome */
        font-weight: 900; /* Bold icon */
        color: #ffffff; /* White icon */
        margin-left: auto; /* Push icon to the right */
        transition: transform 0.3s ease; /* Smooth rotation */
      }

      .accordion-button[aria-expanded="true"]::after {
        transform: rotate(180deg); /* Rotate icon when expanded */
      }

      .accordion-collapse {
        background-color: #1a1a1a; /* Match background with accordion */
        padding: 15px 20px; /* Add padding for content */
        border-radius: 10px; /* Rounded corners for content */
      }

      .accordion-body {
        font-size: 16px; /* Standard font size */
        font-weight: 300; /* Light font weight */
        line-height: 1.6; /* Improve readability */
        color: #cccccc; /* Light gray text for better contrast */
      }

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.carousel-slide {
  min-width: 280px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-slide video {
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide:hover video {
  transform: scale(1.1); /* Zoom-in effect on hover */
}

.swiper-container {
  width: 100%;
  height: auto;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide video {
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease-in-out;
}

.swiper-slide:hover video {
  transform: scale(1.1); /* Zoom-in effect on hover */
}
body.dark {
  background-color: #121212;
  color: #e0e0e0;
}

/* Styling for input fields */
input {
  background-color: var(--background, #000); /* Default background color */
  color: var(--text-color, #fff); /* Default text color */
  border: 1px solid rgba(255, 0, 0, 0.2); /* Red border with transparency */
  border-radius: 12px; /* Rounded corners */
  padding: 12px; /* Padding inside the input */
  font-size: 14px; /* Font size */
  font-family: 'Arial', sans-serif; /* Font family */
  outline: none; /* Remove default outline */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Fix placeholder styling */
input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* Focus state for input fields */
input:focus {
  border-color: #ff0000; /* Red border on focus */
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); /* Red glow effect */
}

input:hover {
  border-color: #ff6666; /* Softer red for hover */
}

.content {
  padding: 2rem;
  margin: auto;
}

div.relative {
  border-radius: 10px;
  overflow: hidden;
}

div.-z-1 {
  transition: all 0.3s ease;
}

div.-z-1:hover {
  opacity: 1;
  blur: 200px;
}

img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Styling for buttons */
button {
  background-color: transparent;
  color: #fff;
  border: 1px solid #ff0000;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Improve button hover effect */
button:hover {
  background-color: rgba(255, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  transform: scale(1.02); /* Slight scaling effect */
}

@media (max-width: 768px) {
  .content {
    padding: 1rem;
  }

  img {
    display: block;
    width: 100%;
  }

  div.-z-1 {
    height: 50%;
    width: 60%;
  }

  .relative {
    flex-direction: column;
    padding: 1rem;
  }

  h2 {
    font-size: 2rem;
  }

  input {
    font-size: 0.9rem;
    padding: 0.8rem;
  }

  button {
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
  }
}

/* Ensure consistent spacing */
.form-group {
  margin-bottom: 1rem;
}

/* Styling for SVG icons */
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease; /* Smooth transition for stroke color */
}

/* Styling for error messages */
.text-destructive {
  color: #ff4d4d; /* Red color for error messages */
  font-size: 12px; /* Smaller font size */
  font-weight: bold; /* Bold text */
  margin-top: 4px; /* Space above the error message */
}

/* Correct class name */
.space-y-10 {
  margin-top: 2.5rem;
}

.input-error {
  border-color: red;
  background-color: #ffe6e6;
}

[data-state="active"] {
    background-color: #fff;
    color: #000;
    border: 1px solid #00cc99;
}

[data-state="inactive"] {
    background-color: #000;
    color: #fff;
    border: none;
}
[data-melt-tabs-trigger] {
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-melt-tabs-trigger][data-state="active"] {
  background-color: #ff1100; /* Active tab background */
  color: #ffffff; /* Active tab text color */
  border: 2px solid #ff1100; /* Active tab border */
}

[data-melt-tabs-trigger][data-state="inactive"] {
  background-color: #000000; /* Inactive tab background */
  color: #ffffff; /* Inactive tab text color */
  border: 2px solid transparent; /* Inactive tab border */
}

[data-melt-tabs-list] {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

/* Desktop Menu Styling */
.desktop-menu {
  display: flex;
  gap: 1.5rem; /* Space between menu items */
  align-items: center;
}

.desktop-menu a {
  color: white; /* White text color */
  text-decoration: none; /* Remove underline */
  font-size: 1rem; /* Font size */
  transition: color 0.3s ease; /* Smooth hover effect */
}

.desktop-menu a:hover {
  color: #ffc107; /* Highlight color on hover */
}

/* Button Styling for "Sign Up" */
.btn {
  color: #ffffff; /* White text */
  background-color: transparent; /* Transparent background */
  border: 2px solid #ffffff; /* White border */
  border-radius: 25px ; /* Rounded corners */
  padding: 8px 20px; /* Padding for button */
  font-size: 14px; /* Font size */
  font-weight: bold; /* Bold text */
  text-transform: uppercase; /* Uppercase text */
  transition: all 0.3s ease-in-out; /* Smooth hover effect */
}

.btn:hover {
  background-color: #ffffff; /* White background on hover */
  color: #000000; /* Black text on hover */
  text-decoration: none; /* Remove underline */
  transform: scale(1.05); /* Slight zoom effect */
}