* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

:root {
  --p-font-size: 1.2vw;
  --h1-font-size: 4vw;
  --yellow-bg-color-one: #f9e79b;
  --yellow-bg-color-two: #ffdc9d;
  --pink-color: #e68387;
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 50px;
  margin-top: 5%;
}
.hero .image {
  position: relative;
  width: 50%;
  height: 100%;
}
.hero .image .skyline-image {
  width: 50vw;
}
.hero .image .circle-wheel {
  position: absolute;
  bottom: 39%;
  right: 3.5%;
  width: 18%;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.hero .image .lines {
  position: absolute;
  bottom: 37%;
  right: 2%;
  width: 21%;
  z-index: 1;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.hero .image .poles {
  position: absolute;
  bottom: 27%;
  right: 9%;
  width: 7%;
}
.hero .image .animation-dots {
  position: absolute;
  bottom: 34%;
  right: 0.7%;
  width: 24%;
  z-index: 1;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.swiper-slide {
  -webkit-box-shadow: -1px 0px 14px 0px rgba(77, 77, 77, 1);
  -moz-box-shadow: -1px 0px 14px 0px rgba(77, 77, 77, 1);
  box-shadow: -1px 0px 14px 0px rgba(77, 77, 77, 1);
}

.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  position: relative;
}

.dots .dot {
  content: "" !important;
  border-radius: 50% !important;
  border: 1px solid var(--pink-color) !important;
  width: 12px !important;
  height: 12px !important;
}

.dots .dot.selected {
  background-color: var(--pink-color) !important;
}

/* Hide Swiper navigation arrows on mobile to prevent blocking content */
/* On mobile, users can swipe and use pagination dots instead */
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
}

/* Show navigation arrows on larger screens (1024px and up, matching Tailwind's lg breakpoint) */
@media only screen and (min-width: 1024px) {
  .swiper-button-prev,
  .swiper-button-next {
    display: flex !important;
  }
}

@media only screen and (max-width: 769px) {
  :root {
    --p-font-size: 4vw;
    --h1-font-size: 6vw;
    --yellow-bg-color-one: #f9e79b;
    --yellow-bg-color-two: #ffdc9d;
    --pink-color: #e68387;
  }

  .hero {
    gap: 10px;
    font-size: var();
  }
  /* .hero .image .skyline-image {
    width: 65vw;
  } */
  
}

/* Voucher System - Center prose content */
.prose-center, .prose-center p {
  text-align: center !important;
}

/* Force center alignment for voucher description */
#voucher-description {
  text-align: center !important;
}

/* Ensure spinner animation works */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ensure spinner animation works properly */
.animate-spin {
  animation: spin 1s linear infinite !important;
}

/* Make sure spinner is visible with proper color */
#submit-spinner {
  color: white !important;
}

/* Button should be properly centered */
#voucher-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}