/* Fonts */
@font-face {
  font-family: 'PF Bague Sans Pro';
  src:
    local('PF Bague Sans Pro Thin'),
    local('PF-Bague-Sans-Pro-Thin'),
    url('./assets/fonts/PFBagueSansPro-Thin.woff2') format('woff2'),
    url('./assets/fonts/PFBagueSansPro-Thin.woff') format('woff'),
    url('./assets/fonts/PFBagueSansPro-Thin.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'PF Bague Sans Pro';
  src:
    local('PF Bague Sans Pro Regular'),
    local('PF-Bague-Sans-Pro-Regular'),
    url('./assets/fonts/PFBagueSansPro.woff2') format('woff2'),
    url('./assets/fonts/PFBagueSansPro.woff') format('woff'),
    url('./assets/fonts/PFBagueSansPro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PF Bague Sans Pro';
  src:
    local('PF Bague Sans Pro Medium'),
    local('PF-Bague-Sans-Pro-Medium'),
    url('./assets/fonts/PFBagueSansPro-Medium.woff2') format('woff2'),
    url('./assets/fonts/PFBagueSansPro-Medium.woff') format('woff'),
    url('./assets/fonts/PFBagueSansPro-Medium.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'PF Bague Sans Pro';
  src:
    local('PF Bague Sans Pro Bold'),
    local('PF-Bague-Sans-Pro-Bold'),
    url('./assets/fonts/PFBagueSansPro-Bold.woff2') format('woff2'),
    url('./assets/fonts/PFBagueSansPro-Bold.woff') format('woff'),
    url('./assets/fonts/PFBagueSansPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* CSS Variables */
:root {
  --desktop-container: 1300px;
  --bague-sans-pro: 'PF Bague Sans Pro';
  --brand-active-background: linear-gradient(135deg, #e94e1b, #fbbf24);
  --brand-hover-background: linear-gradient(270deg, #e94e1b, #fb923c);
  --primary-200: #FFF7ED;
  --primary-500: #E94E1B;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --red-600: #dc2626;
  --yellow-400: #facc15;
  --orange-400: #fb923c;
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: var(--bague-sans-pro), Helvetica, Arial, sans-serif;
  background-color: #646464;
  background-image: url("./assets/png/bg.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 68px;
  color: #333;
}

/* Container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 360px) {
  .container {
    max-width: 576px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 992px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 1350px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* Header */
.header {
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  display: inline-flex;
  text-decoration: none;
}

.logo {
  height: 60px;
  width: 180px;
}

/* Banner Carousel */
.image-gallery-section {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.image-gallery {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  max-width: 100%;
}

.carousel-track {
  display: flex;
  width: 400%;
  animation: carousel-slide 20s infinite;
  will-change: transform;
}

.carousel-slide {
  width: 25%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

@keyframes carousel-slide {
  0% {
    transform: translateX(0%);
  }
  18% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-25%);
  }
  43% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  68% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  93% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Responsive styles */
@media (max-width: 576px) {
  .image-gallery-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .carousel-image {
    max-height: 250px;
    width: 100%;
    object-fit: cover;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .carousel-image {
    max-height: 300px;
    width: 100%;
    object-fit: cover;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .carousel-image {
    max-height: 400px;
    width: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1025px) {
  .image-gallery-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  
  .carousel-image {
    max-height: 500px;
    width: 100%;
    object-fit: cover;
  }
}

/* Main */
.main {
  padding-top: 1rem;
}

.main-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Section */
.section {
  margin-bottom: 1.5rem;
}

/* Coming Soon Section */
.coming-soon-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}


.deco-dot.dot-1 {
  top: 10%;
  left: 10%;
}

.deco-dot.dot-2 {
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.deco-dot.dot-3 {
  bottom: 15%;
  right: 10%;
}

.deco-dot::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--primary-500) 0,
    var(--primary-500) 5px,
    transparent 5px,
    transparent 10px
  );
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  opacity: 0.5;
}

.coming-soon-content {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 100%;
  max-width: 800px;
}

.coming-soon-title,
.coming-soon-subtitle {
  color: white;
  font-size: 2rem;
  font-weight: 500;
  position: relative;
  display: inline-block;
}

@media (max-width: 768px) {
  .coming-soon-title,
  .coming-soon-subtitle {
    font-size: 1.5rem;
  }
}

.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.timer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-item {
  position: relative;
}

.timer-separator {
  color: var(--primary-600);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  margin-bottom: 2.25rem;
}

.timer-value {
  color: var(--primary-600);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  position: relative;
  min-width: 80px;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.timer-number-wrapper {
  position: relative;
  display: inline-block;
  height: 4rem;
  line-height: 4rem;
  width: 100%;
}

.timer-number {
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  opacity: 0;
}

/* First number is visible by default */
.timer-number-wrapper.seconds .timer-number:nth-child(1),
.timer-number-wrapper.minutes .timer-number:nth-child(1),
.timer-number-wrapper.hours .timer-number:nth-child(1) {
  opacity: 1;
}

.timer-number-wrapper.days .timer-number:nth-child(1) {
  opacity: 1;
}

.timer-number-wrapper.seconds .timer-number:nth-child(1) { animation: show-number 60s steps(60, end) infinite -59s; }
.timer-number-wrapper.seconds .timer-number:nth-child(2) { animation: show-number 60s steps(60, end) infinite -58s; }
.timer-number-wrapper.seconds .timer-number:nth-child(3) { animation: show-number 60s steps(60, end) infinite -57s; }
.timer-number-wrapper.seconds .timer-number:nth-child(4) { animation: show-number 60s steps(60, end) infinite -56s; }
.timer-number-wrapper.seconds .timer-number:nth-child(5) { animation: show-number 60s steps(60, end) infinite -55s; }
.timer-number-wrapper.seconds .timer-number:nth-child(6) { animation: show-number 60s steps(60, end) infinite -54s; }
.timer-number-wrapper.seconds .timer-number:nth-child(7) { animation: show-number 60s steps(60, end) infinite -53s; }
.timer-number-wrapper.seconds .timer-number:nth-child(8) { animation: show-number 60s steps(60, end) infinite -52s; }
.timer-number-wrapper.seconds .timer-number:nth-child(9) { animation: show-number 60s steps(60, end) infinite -51s; }
.timer-number-wrapper.seconds .timer-number:nth-child(10) { animation: show-number 60s steps(60, end) infinite -50s; }
.timer-number-wrapper.seconds .timer-number:nth-child(11) { animation: show-number 60s steps(60, end) infinite -49s; }
.timer-number-wrapper.seconds .timer-number:nth-child(12) { animation: show-number 60s steps(60, end) infinite -48s; }
.timer-number-wrapper.seconds .timer-number:nth-child(13) { animation: show-number 60s steps(60, end) infinite -47s; }
.timer-number-wrapper.seconds .timer-number:nth-child(14) { animation: show-number 60s steps(60, end) infinite -46s; }
.timer-number-wrapper.seconds .timer-number:nth-child(15) { animation: show-number 60s steps(60, end) infinite -45s; }
.timer-number-wrapper.seconds .timer-number:nth-child(16) { animation: show-number 60s steps(60, end) infinite -44s; }
.timer-number-wrapper.seconds .timer-number:nth-child(17) { animation: show-number 60s steps(60, end) infinite -43s; }
.timer-number-wrapper.seconds .timer-number:nth-child(18) { animation: show-number 60s steps(60, end) infinite -42s; }
.timer-number-wrapper.seconds .timer-number:nth-child(19) { animation: show-number 60s steps(60, end) infinite -41s; }
.timer-number-wrapper.seconds .timer-number:nth-child(20) { animation: show-number 60s steps(60, end) infinite -40s; }
.timer-number-wrapper.seconds .timer-number:nth-child(21) { animation: show-number 60s steps(60, end) infinite -39s; }
.timer-number-wrapper.seconds .timer-number:nth-child(22) { animation: show-number 60s steps(60, end) infinite -38s; }
.timer-number-wrapper.seconds .timer-number:nth-child(23) { animation: show-number 60s steps(60, end) infinite -37s; }
.timer-number-wrapper.seconds .timer-number:nth-child(24) { animation: show-number 60s steps(60, end) infinite -36s; }
.timer-number-wrapper.seconds .timer-number:nth-child(25) { animation: show-number 60s steps(60, end) infinite -35s; }
.timer-number-wrapper.seconds .timer-number:nth-child(26) { animation: show-number 60s steps(60, end) infinite -34s; }
.timer-number-wrapper.seconds .timer-number:nth-child(27) { animation: show-number 60s steps(60, end) infinite -33s; }
.timer-number-wrapper.seconds .timer-number:nth-child(28) { animation: show-number 60s steps(60, end) infinite -32s; }
.timer-number-wrapper.seconds .timer-number:nth-child(29) { animation: show-number 60s steps(60, end) infinite -31s; }
.timer-number-wrapper.seconds .timer-number:nth-child(30) { animation: show-number 60s steps(60, end) infinite -30s; }
.timer-number-wrapper.seconds .timer-number:nth-child(31) { animation: show-number 60s steps(60, end) infinite -29s; }
.timer-number-wrapper.seconds .timer-number:nth-child(32) { animation: show-number 60s steps(60, end) infinite -28s; }
.timer-number-wrapper.seconds .timer-number:nth-child(33) { animation: show-number 60s steps(60, end) infinite -27s; }
.timer-number-wrapper.seconds .timer-number:nth-child(34) { animation: show-number 60s steps(60, end) infinite -26s; }
.timer-number-wrapper.seconds .timer-number:nth-child(35) { animation: show-number 60s steps(60, end) infinite -25s; }
.timer-number-wrapper.seconds .timer-number:nth-child(36) { animation: show-number 60s steps(60, end) infinite -24s; }
.timer-number-wrapper.seconds .timer-number:nth-child(37) { animation: show-number 60s steps(60, end) infinite -23s; }
.timer-number-wrapper.seconds .timer-number:nth-child(38) { animation: show-number 60s steps(60, end) infinite -22s; }
.timer-number-wrapper.seconds .timer-number:nth-child(39) { animation: show-number 60s steps(60, end) infinite -21s; }
.timer-number-wrapper.seconds .timer-number:nth-child(40) { animation: show-number 60s steps(60, end) infinite -20s; }
.timer-number-wrapper.seconds .timer-number:nth-child(41) { animation: show-number 60s steps(60, end) infinite -19s; }
.timer-number-wrapper.seconds .timer-number:nth-child(42) { animation: show-number 60s steps(60, end) infinite -18s; }
.timer-number-wrapper.seconds .timer-number:nth-child(43) { animation: show-number 60s steps(60, end) infinite -17s; }
.timer-number-wrapper.seconds .timer-number:nth-child(44) { animation: show-number 60s steps(60, end) infinite -16s; }
.timer-number-wrapper.seconds .timer-number:nth-child(45) { animation: show-number 60s steps(60, end) infinite -15s; }
.timer-number-wrapper.seconds .timer-number:nth-child(46) { animation: show-number 60s steps(60, end) infinite -14s; }
.timer-number-wrapper.seconds .timer-number:nth-child(47) { animation: show-number 60s steps(60, end) infinite -13s; }
.timer-number-wrapper.seconds .timer-number:nth-child(48) { animation: show-number 60s steps(60, end) infinite -12s; }
.timer-number-wrapper.seconds .timer-number:nth-child(49) { animation: show-number 60s steps(60, end) infinite -11s; }
.timer-number-wrapper.seconds .timer-number:nth-child(50) { animation: show-number 60s steps(60, end) infinite -10s; }
.timer-number-wrapper.seconds .timer-number:nth-child(51) { animation: show-number 60s steps(60, end) infinite -9s; }
.timer-number-wrapper.seconds .timer-number:nth-child(52) { animation: show-number 60s steps(60, end) infinite -8s; }
.timer-number-wrapper.seconds .timer-number:nth-child(53) { animation: show-number 60s steps(60, end) infinite -7s; }
.timer-number-wrapper.seconds .timer-number:nth-child(54) { animation: show-number 60s steps(60, end) infinite -6s; }
.timer-number-wrapper.seconds .timer-number:nth-child(55) { animation: show-number 60s steps(60, end) infinite -5s; }
.timer-number-wrapper.seconds .timer-number:nth-child(56) { animation: show-number 60s steps(60, end) infinite -4s; }
.timer-number-wrapper.seconds .timer-number:nth-child(57) { animation: show-number 60s steps(60, end) infinite -3s; }
.timer-number-wrapper.seconds .timer-number:nth-child(58) { animation: show-number 60s steps(60, end) infinite -2s; }
.timer-number-wrapper.seconds .timer-number:nth-child(59) { animation: show-number 60s steps(60, end) infinite -1s; }
.timer-number-wrapper.seconds .timer-number:nth-child(60) { animation: show-number 60s steps(60, end) infinite -0s; }

@keyframes show-number {
  0% { opacity: 1; }
  1.67% { opacity: 1; }
  1.68% { opacity: 0; }
  100% { opacity: 0; }
}

.timer-number-wrapper.minutes .timer-number:nth-child(1) { animation: show-number 3600s steps(60, end) infinite -3540s; }
.timer-number-wrapper.minutes .timer-number:nth-child(2) { animation: show-number 3600s steps(60, end) infinite -3480s; }
.timer-number-wrapper.minutes .timer-number:nth-child(3) { animation: show-number 3600s steps(60, end) infinite -3420s; }
.timer-number-wrapper.minutes .timer-number:nth-child(4) { animation: show-number 3600s steps(60, end) infinite -3360s; }
.timer-number-wrapper.minutes .timer-number:nth-child(5) { animation: show-number 3600s steps(60, end) infinite -3300s; }
.timer-number-wrapper.minutes .timer-number:nth-child(6) { animation: show-number 3600s steps(60, end) infinite -3240s; }
.timer-number-wrapper.minutes .timer-number:nth-child(7) { animation: show-number 3600s steps(60, end) infinite -3180s; }
.timer-number-wrapper.minutes .timer-number:nth-child(8) { animation: show-number 3600s steps(60, end) infinite -3120s; }
.timer-number-wrapper.minutes .timer-number:nth-child(9) { animation: show-number 3600s steps(60, end) infinite -3060s; }
.timer-number-wrapper.minutes .timer-number:nth-child(10) { animation: show-number 3600s steps(60, end) infinite -3000s; }
.timer-number-wrapper.minutes .timer-number:nth-child(11) { animation: show-number 3600s steps(60, end) infinite -2940s; }
.timer-number-wrapper.minutes .timer-number:nth-child(12) { animation: show-number 3600s steps(60, end) infinite -2880s; }
.timer-number-wrapper.minutes .timer-number:nth-child(13) { animation: show-number 3600s steps(60, end) infinite -2820s; }
.timer-number-wrapper.minutes .timer-number:nth-child(14) { animation: show-number 3600s steps(60, end) infinite -2760s; }
.timer-number-wrapper.minutes .timer-number:nth-child(15) { animation: show-number 3600s steps(60, end) infinite -2700s; }
.timer-number-wrapper.minutes .timer-number:nth-child(16) { animation: show-number 3600s steps(60, end) infinite -2640s; }
.timer-number-wrapper.minutes .timer-number:nth-child(17) { animation: show-number 3600s steps(60, end) infinite -2580s; }
.timer-number-wrapper.minutes .timer-number:nth-child(18) { animation: show-number 3600s steps(60, end) infinite -2520s; }
.timer-number-wrapper.minutes .timer-number:nth-child(19) { animation: show-number 3600s steps(60, end) infinite -2460s; }
.timer-number-wrapper.minutes .timer-number:nth-child(20) { animation: show-number 3600s steps(60, end) infinite -2400s; }
.timer-number-wrapper.minutes .timer-number:nth-child(21) { animation: show-number 3600s steps(60, end) infinite -2340s; }
.timer-number-wrapper.minutes .timer-number:nth-child(22) { animation: show-number 3600s steps(60, end) infinite -2280s; }
.timer-number-wrapper.minutes .timer-number:nth-child(23) { animation: show-number 3600s steps(60, end) infinite -2220s; }
.timer-number-wrapper.minutes .timer-number:nth-child(24) { animation: show-number 3600s steps(60, end) infinite -2160s; }
.timer-number-wrapper.minutes .timer-number:nth-child(25) { animation: show-number 3600s steps(60, end) infinite -2100s; }
.timer-number-wrapper.minutes .timer-number:nth-child(26) { animation: show-number 3600s steps(60, end) infinite -2040s; }
.timer-number-wrapper.minutes .timer-number:nth-child(27) { animation: show-number 3600s steps(60, end) infinite -1980s; }
.timer-number-wrapper.minutes .timer-number:nth-child(28) { animation: show-number 3600s steps(60, end) infinite -1920s; }
.timer-number-wrapper.minutes .timer-number:nth-child(29) { animation: show-number 3600s steps(60, end) infinite -1860s; }
.timer-number-wrapper.minutes .timer-number:nth-child(30) { animation: show-number 3600s steps(60, end) infinite -1800s; }
.timer-number-wrapper.minutes .timer-number:nth-child(31) { animation: show-number 3600s steps(60, end) infinite -1740s; }
.timer-number-wrapper.minutes .timer-number:nth-child(32) { animation: show-number 3600s steps(60, end) infinite -1680s; }
.timer-number-wrapper.minutes .timer-number:nth-child(33) { animation: show-number 3600s steps(60, end) infinite -1620s; }
.timer-number-wrapper.minutes .timer-number:nth-child(34) { animation: show-number 3600s steps(60, end) infinite -1560s; }
.timer-number-wrapper.minutes .timer-number:nth-child(35) { animation: show-number 3600s steps(60, end) infinite -1500s; }
.timer-number-wrapper.minutes .timer-number:nth-child(36) { animation: show-number 3600s steps(60, end) infinite -1440s; }
.timer-number-wrapper.minutes .timer-number:nth-child(37) { animation: show-number 3600s steps(60, end) infinite -1380s; }
.timer-number-wrapper.minutes .timer-number:nth-child(38) { animation: show-number 3600s steps(60, end) infinite -1320s; }
.timer-number-wrapper.minutes .timer-number:nth-child(39) { animation: show-number 3600s steps(60, end) infinite -1260s; }
.timer-number-wrapper.minutes .timer-number:nth-child(40) { animation: show-number 3600s steps(60, end) infinite -1200s; }
.timer-number-wrapper.minutes .timer-number:nth-child(41) { animation: show-number 3600s steps(60, end) infinite -1140s; }
.timer-number-wrapper.minutes .timer-number:nth-child(42) { animation: show-number 3600s steps(60, end) infinite -1080s; }
.timer-number-wrapper.minutes .timer-number:nth-child(43) { animation: show-number 3600s steps(60, end) infinite -1020s; }
.timer-number-wrapper.minutes .timer-number:nth-child(44) { animation: show-number 3600s steps(60, end) infinite -960s; }
.timer-number-wrapper.minutes .timer-number:nth-child(45) { animation: show-number 3600s steps(60, end) infinite -900s; }
.timer-number-wrapper.minutes .timer-number:nth-child(46) { animation: show-number 3600s steps(60, end) infinite -840s; }
.timer-number-wrapper.minutes .timer-number:nth-child(47) { animation: show-number 3600s steps(60, end) infinite -780s; }
.timer-number-wrapper.minutes .timer-number:nth-child(48) { animation: show-number 3600s steps(60, end) infinite -720s; }
.timer-number-wrapper.minutes .timer-number:nth-child(49) { animation: show-number 3600s steps(60, end) infinite -660s; }
.timer-number-wrapper.minutes .timer-number:nth-child(50) { animation: show-number 3600s steps(60, end) infinite -600s; }
.timer-number-wrapper.minutes .timer-number:nth-child(51) { animation: show-number 3600s steps(60, end) infinite -540s; }
.timer-number-wrapper.minutes .timer-number:nth-child(52) { animation: show-number 3600s steps(60, end) infinite -480s; }
.timer-number-wrapper.minutes .timer-number:nth-child(53) { animation: show-number 3600s steps(60, end) infinite -420s; }
.timer-number-wrapper.minutes .timer-number:nth-child(54) { animation: show-number 3600s steps(60, end) infinite -360s; }
.timer-number-wrapper.minutes .timer-number:nth-child(55) { animation: show-number 3600s steps(60, end) infinite -300s; }
.timer-number-wrapper.minutes .timer-number:nth-child(56) { animation: show-number 3600s steps(60, end) infinite -240s; }
.timer-number-wrapper.minutes .timer-number:nth-child(57) { animation: show-number 3600s steps(60, end) infinite -180s; }
.timer-number-wrapper.minutes .timer-number:nth-child(58) { animation: show-number 3600s steps(60, end) infinite -120s; }
.timer-number-wrapper.minutes .timer-number:nth-child(59) { animation: show-number 3600s steps(60, end) infinite -60s; }
.timer-number-wrapper.minutes .timer-number:nth-child(60) { animation: show-number 3600s steps(60, end) infinite 0s; }

/* Hours: 11 shows immediately (0s), then 10 after 38min, then each hour adds 1 hour */
.timer-number-wrapper.hours .timer-number:nth-child(1) { animation: show-number 86400s steps(24, end) infinite 0s; }      /* 11 hour - immediately */
.timer-number-wrapper.hours .timer-number:nth-child(2) { animation: show-number 86400s steps(24, end) infinite -2280s; }  /* 10 hour - after 38 min */
.timer-number-wrapper.hours .timer-number:nth-child(3) { animation: show-number 86400s steps(24, end) infinite -5880s; }  /* 09 hour - after 38 min + 1 hour */
.timer-number-wrapper.hours .timer-number:nth-child(4) { animation: show-number 86400s steps(24, end) infinite -9480s; }  /* 08 hour - after 38 min + 2 hours */
.timer-number-wrapper.hours .timer-number:nth-child(5) { animation: show-number 86400s steps(24, end) infinite -13080s; } /* 07 hour - after 38 min + 3 hours */
.timer-number-wrapper.hours .timer-number:nth-child(6) { animation: show-number 86400s steps(24, end) infinite -16680s; } /* 06 hour - after 38 min + 4 hours */
.timer-number-wrapper.hours .timer-number:nth-child(7) { animation: show-number 86400s steps(24, end) infinite -20280s; } /* 05 hour - after 38 min + 5 hours */
.timer-number-wrapper.hours .timer-number:nth-child(8) { animation: show-number 86400s steps(24, end) infinite -23880s; } /* 04 hour - after 38 min + 6 hours */
.timer-number-wrapper.hours .timer-number:nth-child(9) { animation: show-number 86400s steps(24, end) infinite -27480s; } /* 03 hour - after 38 min + 7 hours */
.timer-number-wrapper.hours .timer-number:nth-child(10) { animation: show-number 86400s steps(24, end) infinite -31080s; } /* 02 hour - after 38 min + 8 hours */
.timer-number-wrapper.hours .timer-number:nth-child(11) { animation: show-number 86400s steps(24, end) infinite -34680s; } /* 01 hour - after 38 min + 9 hours */
.timer-number-wrapper.hours .timer-number:nth-child(12) { animation: show-number 86400s steps(24, end) infinite -38280s; } /* 00 hour - after 38 min + 10 hours */
.timer-number-wrapper.hours .timer-number:nth-child(13) { animation: show-number 86400s steps(24, end) infinite -41880s; } /* 23 hour - after 38 min + 11 hours */
.timer-number-wrapper.hours .timer-number:nth-child(14) { animation: show-number 86400s steps(24, end) infinite -45480s; } /* 22 hour - after 38 min + 12 hours */
.timer-number-wrapper.hours .timer-number:nth-child(15) { animation: show-number 86400s steps(24, end) infinite -49080s; } /* 21 hour - after 38 min + 13 hours */
.timer-number-wrapper.hours .timer-number:nth-child(16) { animation: show-number 86400s steps(24, end) infinite -52680s; } /* 20 hour - after 38 min + 14 hours */
.timer-number-wrapper.hours .timer-number:nth-child(17) { animation: show-number 86400s steps(24, end) infinite -56280s; } /* 19 hour - after 38 min + 15 hours */
.timer-number-wrapper.hours .timer-number:nth-child(18) { animation: show-number 86400s steps(24, end) infinite -59880s; } /* 18 hour - after 38 min + 16 hours */
.timer-number-wrapper.hours .timer-number:nth-child(19) { animation: show-number 86400s steps(24, end) infinite -63480s; } /* 17 hour - after 38 min + 17 hours */
.timer-number-wrapper.hours .timer-number:nth-child(20) { animation: show-number 86400s steps(24, end) infinite -67080s; } /* 16 hour - after 38 min + 18 hours */
.timer-number-wrapper.hours .timer-number:nth-child(21) { animation: show-number 86400s steps(24, end) infinite -70680s; } /* 15 hour - after 38 min + 19 hours */
.timer-number-wrapper.hours .timer-number:nth-child(22) { animation: show-number 86400s steps(24, end) infinite -74280s; } /* 14 hour - after 38 min + 20 hours */
.timer-number-wrapper.hours .timer-number:nth-child(23) { animation: show-number 86400s steps(24, end) infinite -77880s; } /* 13 hour - after 38 min + 21 hours */
.timer-number-wrapper.hours .timer-number:nth-child(24) { animation: show-number 86400s steps(24, end) infinite -81480s; } /* 12 hour - after 38 min + 22 hours */


.timer-label {
  color: white;
  font-size: 1rem;
  font-weight: 400;
}

@media (max-width: 768px) {
  .timer-value,
  .timer-separator {
    font-size: 2.5rem;
  }
  
  .timer-label {
    font-size: 0.875rem;
  }
  
  .countdown-timer {
    gap: 0.5rem;
  }
}

.section-title {
  color: white;
  font-size: 3.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
}

.services-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 4px;
  background-color: #3b82f6;
}

@media (max-width: 768px) {
  .services-title {
    font-size: 2rem;
  }
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.service-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
}

.service-icon {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon-img {
  width: 200px;
  height: auto;
  max-width: 100%;
}

.service-title {
  color: #333;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 0;
}

.service-description {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Image Gallery */
.image-gallery-section {
  width: 100%;
}

.image-gallery {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}

.image-wrapper {
  width: 100%;
  height: 430px;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 10px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-200);
  border: 1px solid var(--primary-500);
  cursor: pointer;
}

.indicator.active {
  background-color: var(--primary-500);
}

/* Step by Step */
.step-by-step {
  display: flex;
  flex-direction: column;
  min-height: 625px;
  background-color: var(--gray-200);
  border-radius: 0.75rem;
  overflow: hidden;
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .step-by-step {
    flex-direction: row;
  }
}

.step-intro {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  flex: 1;
}

.step-intro-title {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.step-intro-text {
  text-align: center;
  margin-bottom: 1rem;
}

.book-button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--brand-active-background);
  color: white;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
  display: inline-block;
  transition: background 0.3s;
}

.book-button:hover {
  background: var(--brand-hover-background);
}

.steps-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
}

@media (min-width: 768px) {
  .steps-grid {
    flex-direction: row;
  }
}

.step-card {
  width: 100%;
  padding: 1.5rem;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.step-number {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.step-description {
  flex: 1;
}

/* Banner */
.banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem;
  padding: 1rem;
  gap: 1rem;
  background-image: url('./assets/png/card-bg-2.png'), url('./assets/png/card-bg-1.png');
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light;
  background-position: center;
}

@media (min-width: 768px) {
  .banner {
    flex-direction: row;
    padding: 1rem 1.5rem;
    gap: 2rem;
  }
}

.banner-text {
  color: white;
  font-size: 1.5rem;
  text-align: center;
  align-self: center;
}

@media (min-width: 768px) {
  .banner-text {
    font-size: 2.5rem;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .banner-text {
    font-size: 3rem;
  }
}

.banner-image {
  align-self: center;
  width: 11rem;
  height: auto;
}

@media (min-width: 992px) {
  .banner-image {
    width: 20rem;
  }
}

/* Advantages */
.advantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 992px) {
  .advantages-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.advantage-card {
  height: 100%;
  text-align: center;
  padding: 1.25rem;
  border-radius: 0.5rem;
  background-color: white;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .advantage-card {
    padding: 1.25rem;
  }
}

.advantage-image {
  align-self: center;
  height: 5rem;
  width: auto;
}

@media (min-width: 768px) {
  .advantage-image {
    height: auto;
  }
}

.advantage-text {
  text-align: center;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .advantage-text {
    font-size: 1.25rem;
  }
}

@media (min-width: 992px) {
  .advantage-text {
    font-size: 1.5rem;
  }
}

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
}

.faq-item {
  background-color: white;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq-item:first-child {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.faq-item:last-child {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* Hide radio buttons */
.faq-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.faq-question {
  padding: 1rem;
  font-weight: 700;
  color: #1E293B;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  transition: background-color 0.2s;
  gap: 1rem;
}

.faq-question:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.faq-question-text {
  flex: 1;
}

.faq-icon {
  font-size: 1.5rem;
  color: #1E293B;
  transition: transform 0.3s ease;
  display: inline-block;
  transform: rotate(0deg);
  line-height: 1;
}

/* Show answer when radio is checked */
.faq-radio:checked ~ .faq-answer {
  max-height: 1000px;
  opacity: 1;
  padding: 1.5rem;
  background-color: #f5f5f5;
  border: 1px rgba(226, 232, 240, 1);
  border-radius: 0.25rem;
}

.faq-radio:checked ~ .faq-question .faq-icon {
  transform: rotate(90deg);
}

.faq-radio:checked ~ .faq-question {
  border-bottom: 1px solid var(--gray-200);
}

/* Hide answer by default */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 1.5rem;
  background-color:  #f5f5f5;
}

.faq-answer-content {
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.6;
}

/* Utility Classes */
.card-background {
  background-image: url('./assets/png/card-bg-2.png'), url('./assets/png/card-bg-1.png');
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light;
  background-position: center;
}

/* Footer */
.footer {
  margin-top: 3rem;
}

.footer-top {
  background-color: #646464;
  background-image: url("./assets/png/bg.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 68px;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  color: white;
}

@media (min-width: 576px) {
  .footer-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 992px) {
  .footer-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.footer-logo {
  display: none;
}

@media (min-width: 576px) {
  .footer-logo {
    display: block;
    grid-column: 1;
    grid-row: 1;
  }
}

@media (min-width: 992px) {
  .footer-logo {
    grid-column: 1;
    grid-row: 1;
  }
}

.footer-logo-link {
  display: inline-block;
  text-decoration: none;
}

.footer-logo-img {
  height: 40px;
  width: 120px;
}

.footer-contact {
  display: flex;
  align-items: center;
}

@media (min-width: 576px) {
  .footer-contact {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (min-width: 992px) {
  .footer-contact {
    grid-column: 2;
    grid-row: 1;
  }
}

.footer-email {
  display: flex;
  align-items: center;
}

@media (min-width: 576px) {
  .footer-email {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
  }
}

@media (min-width: 992px) {
  .footer-email {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-start;
  }
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 0.875rem;
  transition: opacity 0.2s;
}

.footer-contact-link:hover {
  opacity: 0.8;
}

.footer-icon {
  font-size: 1rem;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
}

@media (min-width: 576px) {
  .footer-social {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-content: flex-end;
  }
}

@media (min-width: 992px) {
  .footer-social {
    grid-column: 4;
    grid-row: 1;
    justify-content: flex-end;
  }
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid white;
  /* background-color: rgba(255, 255, 255, 0.15); */
  border-radius: 0.5rem;
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}

.footer-social-link:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.footer-social-icon {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}

.footer-social-link svg.footer-social-icon {
  filter: none;
  color: white;
}

.footer-bottom {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 1rem 0;
  text-align: center;
}

.footer-copyright {
  color: white;
  font-size: 0.875rem;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  right: 5px;
  position: absolute;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-600);
  border-radius: 10px;
}