/* styles.css */

/* WhatsApp Group Banner */
.whatsapp-banner {
  background-color: #25D366; /* WhatsApp Green */
  padding: 15px 0;
  margin-bottom: 20px; /* Adds space below the banner */
}

.whatsapp-banner .whatsapp-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
  display: flex; /* Changed from inline-flex to flex */
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* Prevent text from wrapping */
}

.whatsapp-banner .whatsapp-icon {
  margin-right: 10px;
  font-size: 1.5em;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.whatsapp-banner .whatsapp-text {
  flex-shrink: 1; /* Allow text to shrink if necessary */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Responsive Adjustments for Mobile */
@media only screen and (max-width: 600px) {
  .whatsapp-banner {
      padding: 10px 0;
  }

  .whatsapp-banner .whatsapp-link {
      font-size: 1em; /* Reduced font size */
  }

  .whatsapp-banner .whatsapp-icon {
      font-size: 1.2em; /* Reduced icon size */
      margin-right: 8px;
  }

  .whatsapp-banner .whatsapp-text {
      font-size: 0.9em; /* Further reduce text size */
  }
}

/* Initially hide the short text */
.whatsapp-banner .whatsapp-text-short {
  display: none;
}

/* Show short text and hide full text on small screens */
@media only screen and (max-width: 600px) {
  .whatsapp-banner .whatsapp-text-full {
      display: none;
  }

  .whatsapp-banner .whatsapp-text-short {
      display: inline;
      font-size: 0.9em; /* Ensure it fits well */
  }
}



/* Set the default font to Roboto */
body {
  font-family: 'Roboto', sans-serif;
  background-image: url('background.jpeg'); /* Use background.jpeg */
  background-size: cover;
  background-position: center;
  background-color: #000; /* Black background if image is not available */
  color: #ffffff;
  position: relative;
  min-height: 100vh;
}

/* Bring particles to the top */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999; /* Bring particles above content */
  top: 0;
  left: 0;
  pointer-events: none; /* Ensure particles don't block interactions */
}
/* Buy Tickets Now with Price */

/* Buy Tickets Now with Integrated $25 */
.buy-tickets-button {
  display: flex;
  align-items: center;
  /* Justify content to the start to align items to the left */
  justify-content: flex-start;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
  width: fit-content; /* Adjust width based on content */
}

/* Ensure the button takes full width on mobile */
@media only screen and (max-width: 600px) {
  .buy-tickets-button {
      justify-content: center; /* Center align on mobile if needed */
  }
}

/* $25 Price Label */
.ticket-price {
  background-color: #ffffff; /* White background */
  color: #ff1744; /* Red text */
  padding: 8px 12px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px 0 0 5px; /* Rounded left corners */
  border: 1px solid #ff1744; /* Red border for definition */
  margin-right: 0; /* Remove right margin to eliminate gaps */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevent shrinking */
  height: 100%; /* Match the height of the button */
  box-sizing: border-box; /* Include padding and border in height */
}

/* Buy Tickets Now with Integrated $25 */
.buy-tickets-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  box-sizing: border-box;
  width: fit-content; /* Adjusts based on content */
  /* Optional: Set a minimum width if needed */
  min-width: 200px;
}

/* $25 Price Label */
.ticket-price {
  background-color: #ffffff; /* White background */
  color: #ff1744; /* Red text */
  padding: 8px 12px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 5px 0 0 5px; /* Rounded left corners */
  border: 1px solid #ff1744; /* Red border for definition */
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevent shrinking */
  height: 100%; /* Match the height of the button */
  box-sizing: border-box; /* Include padding and border in height */
}

/* Buy Tickets Now Text */
.buy-tickets-text {
  color: #ffffff; /* White text */
  font-size: 1.2em;
  font-weight: bold;
  display: flex;
  align-items: center;
}

/* Hover Effects */
.buy-tickets-button:hover {
  background-color: #d50000; /* Darker red on hover */
  transform: translateY(-2px); /* Slight upward movement on hover */
}

/* Responsive Adjustments for Mobile Devices */
@media only screen and (max-width: 600px) {
  .buy-tickets-button {
      flex-direction: row; /* Keep items in a row */
      padding: 12px 16px; /* Adjust padding for better tap targets */
      justify-content: center; /* Center the content on mobile */
  }

  .ticket-price {
      padding: 6px 10px;
      font-size: 1em;
      margin-right: 8px;
      /* Remove border on the right to prevent double borders if needed */
  }

  .buy-tickets-text {
      font-size: 1em;
      padding-left: 0; /* Remove padding if needed */
  }
}

/* Ensure smooth scrolling behavior */
html {
  scroll-behavior: smooth;
}





@media only screen and (max-width: 600px) {
  .buy-tickets-button {
      padding: 15px 20px; /* Increase padding for better tap targets */
      font-size: 1.1em; /* Slightly reduce font size to fit */
  }

  .ticket-price {
      padding: 8px 12px; /* Adjust padding for smaller screens */
      font-size: 1em; /* Slightly reduce font size */
  }
}


/* Responsive Adjustments for Mobile Devices */
@media only screen and (max-width: 600px) {
  .buy-tickets-container {
      flex-direction: column;
      align-items: stretch;
  }

  .ticket-price,
  .buy-tickets-button {
      margin-left: 0;
  }

  .buy-tickets-button {
      margin-bottom: 0; /* Remove bottom margin from button */
  }
}


/* Halloween font for specific elements */
.event-title,
.venue-name,
.brand-logo {
  font-family: 'Bangers', cursive;
}

/* Glowing red effect for event title */
.event-title {
  text-shadow: 0 0 10px #ff1744, 0 0 20px #ff1744, 0 0 30px #ff1744;
  animation: glow 2s infinite alternate;
}

/* Contest Mention beneath event title */
.contest-mention {
  font-family: 'Bangers', cursive;
  text-shadow: 0 0 5px #ff1744, 0 0 10px #ff1744;
  color: #ffffff; /* Changed to white for better readability */
  margin-top: 10px;
}

/* Increase font size for venue name */
.venue-name {
  font-size: 2.5em;
  margin-top: 10px;
  color: #ff1744;
}

/* Glowing text for complimentary drink */
.complimentary-drink {
  font-size: 1.2em;
  color: #ffffff;
  text-shadow: 0 0 10px #ff1744, 0 0 20px #ff1744;
  animation: glow 2s infinite alternate;
  margin-bottom: 20px;
}

/* Hero Section */
.hero-section {
  position: relative;
  /* padding-top: 80px; */ /* Removed as per request */
  padding-bottom: 80px;
  z-index: 1;
}

.hero-section .row {
  margin-bottom: 0;
}

.hero-section .valign-wrapper {
  display: flex;
  align-items: flex-start;
}

.hero-image {
  margin-top: 20px; /* Move hero image slightly lower */
}

.hero-image img {
  /* Removed border and box-shadow as per request */
  border-radius: 10px;
}

/* Event Date Time */
.event-date-time {
  font-size: 1.5em;
  margin-top: 10px;
  color: #ffffff;
  animation: pulse 2s infinite;
}

/* Event Description */
.event-description {
  margin: 20px 0;
  font-size: 1.1em;
}

/* Countdown Timer */
.countdown {
  margin: 20px 0;
}

.countdown #timer {
  font-size: 2em;
  color: #ff1744;
  animation: pulse 2s infinite;
}

/* Navigation */
.nav-wrapper .brand-logo {
  font-size: 2em;
  font-family: 'Bangers', cursive;
}

/* Features Section */
.features-section {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 60px 0;
}

.features-section h2 {
  font-size: 2.5em;
  margin-bottom: 40px;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff; /* White glow */
}

.feature-card {
  background-color: rgba(255, 255, 255, 0.1);
  transition: transform 0.3s;
  margin: 0; /* Removed margin */
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-card .material-icons {
  color: #ff1744;
}

/* Contest Section */
.contest-section {
  position: relative;
  background-image: url('contest-background.jpg'); /* Replace with your contest background image */
  background-size: cover;
  background-position: center;
  padding: 60px 0;
  color: #ffffff;
}

.contest-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dimmed overlay */
  z-index: 1;
}

.contest-container {
  position: relative;
  z-index: 2; /* Ensure content is above the overlay */
}

/* Make the row flex and align items */
.contest-section .row {
  display: flex;
  align-items: stretch; /* Ensures both columns are same height */
}

/* Contest Title */
.contest-title {
  font-size: 2.5em;
  margin-bottom: 40px;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff; /* White glow */
}

/* Contest Card */
.contest-card {
  background-color: rgba(0, 0, 0, 0.6); /* Made less dark */
  transition: none; /* Removed hover effect */
  padding: 20px;
  height: 100%; /* Ensure it stretches */
  font-family: 'Montserrat', sans-serif; /* Changed font */
  font-size: 1.2em; /* Larger text */
  border-radius: 10px; /* Soft corners */
  margin: 0; /* Removed margin */
}

.contest-card h5 {
  color: #ff1744;
  margin-bottom: 15px;
}

/* List with Font Awesome Icons */
.contest-card ul {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
}

.contest-card ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.contest-card ul li::before {
  content: "\f058"; /* Font Awesome check-circle icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #ff1744;
}

/* Adjust Contest Image */
.contest-image img {
  width: 100%;
  height: 100%; /* Make image take full height */
  object-fit: cover; /* Ensure image covers the container */
  /* Removed border and box-shadow as per request */
  border-radius: 10px; /* Soft corners */
}

/* Tickets Section */
.tickets-section {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 60px 0;
}

.tickets-section h2 {
  font-size: 2.5em;
  margin-bottom: 40px;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff; /* White glow */
}

.ticket-card {
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0; /* Removed margin */
  border-radius: 10px; /* Soft corners */
}

.ticket-card .price {
  font-size: 2em;
  font-weight: bold;
  color: #ff1744;
}

.ticket-card .availability {
  font-size: 1em;
  color: gray;
}

.ticket-card .included {
  font-size: 1em;
  color: #ffffff;
  margin-top: 10px;
}

.ticket-card .btn {
  width: 100%;
}

.btn.red.accent-4 {
  background-color: #ff1744 !important;
}

.btn.red.accent-4:hover {
  background-color: #d50000 !important;
}

/* Disabled Ticket Card */
.disabled-card {
  opacity: 0.6;
  background-color: rgba(255, 255, 255, 0.1); /* Maintain consistency */
  cursor: not-allowed;
}

/* Disabled Button */
.disabled-button {
  background-color: #cccccc !important;
  cursor: not-allowed;
}

/* FAQ Section */
.faq-section {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 60px 0;
}

.faq-section h2 {
  font-size: 2.5em;
  margin-bottom: 40px;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff; /* White glow */
}

.collapsible-header {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: bold;
}

.collapsible-body {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
}

/* Contact Section */
.contact-section {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 60px 0;
}

.contact-section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #ffffff;
  text-shadow: 0 0 10px #ffffff; /* White glow */
}

.social-links a {
  margin: 0 10px;
}

.social-links a i {
  font-size: 1.5em;
}

/* Footer */
.page-footer {
  background-color: #000000;
  padding: 20px 0;
}

.page-footer p {
  margin: 5px 0;
  font-size: 0.9em;
}

/* Back to Top Button */
.fixed-action-btn {
  bottom: 40px;
  right: 40px;
}

.fixed-action-btn a {
  background-color: #ff1744 !important;
}

/* Included in Ticket Purchase */
.included {
  font-style: italic;
}

/* Responsive Adjustments */
@media only screen and (max-width: 600px) {
  /* Hero Section */
  .hero-section .row {
    flex-direction: column;
  }

  .hero-section .valign-wrapper {
    align-items: center;
  }

  .hero-image {
    margin-top: 20px; /* Adjust margin as needed */
  }

  /* Contest Section */
  .contest-section h2,
  .features-section h2,
  .tickets-section h2,
  .faq-section h2,
  .contact-section h2,
  .contest-mention {
    font-size: 2em;
  }

  .contest-card {
    margin-bottom: 20px;
  }

  /* Adjust Contest Content for Mobile */
  .contest-container {
    padding: 20px;
  }

  /* Contest Background Image */
  .contest-background {
    position: relative;
  }

  /* Adjust Contest Image */
  .contest-image img {
    margin-top: 20px;
    height: auto; /* Remove fixed height on mobile */
  }

  /* Ensure the contest card and image stack correctly */
  .contest-section .row {
    flex-direction: column;
  }

  /* Section Headers */
  .features-section h2,
  .contest-title,
  .tickets-section h2,
  .faq-section h2,
  .contact-section h2 {
    text-shadow: 0 0 10px #ffffff; /* White glow */
  }
}

/* Pulse Animation */
@keyframes pulse {
  0% {
      text-shadow: 0 0 10px #ff1744, 0 0 20px #ff1744, 0 0 30px #ff1744;
  }
  50% {
      text-shadow: 0 0 20px #ff1744, 0 0 30px #ff1744, 0 0 40px #ff1744;
  }
  100% {
      text-shadow: 0 0 10px #ff1744, 0 0 20px #ff1744, 0 0 30px #ff1744;
  }
}

/* Glow Animation */
@keyframes glow {
  from {
      text-shadow: 0 0 10px #ff1744, 0 0 20px #ff1744, 0 0 30px #ff1744;
  }
  to {
      text-shadow: 0 0 20px #ff1744, 0 0 30px #ff1744, 0 0 40px #ff1744;
  }
}