html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden; /* Prevents horizontal scrolling */
  margin: 0;
  padding: 0;
  background-color: #020617; /* A dark blue fallback */
}

#bg-canvas {
  position: fixed; /* Stays in the background */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Covers the full viewport height */
  z-index: -1; /* Ensures canvas is in the background */
}

.hero-section {
  height: 100vh; /* Make hero section full viewport height */
  width: 100%;
  position: relative;
  /* flex properties are now handled by Tailwind classes in index.html */
  color: white;
  overflow: hidden; /* Prevents canvas from causing scroll issues on mobile */
  /* Ensures content is above the canvas */
  z-index: 1; 
}

.hero-content {
  position: relative;
  z-index: 2; /* Ensures hero content is above the fade overlay */
  text-align: center;
}

.logo-title {
  font-family: 'Playfair Display', serif;
}

.maldives-script {
  font-family: 'Dancing Script', cursive;
}

.info-card {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s, transform 0.3s;
}

.info-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* Removed .cards-section styles */

.hero-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Adjusted height to be relative to the dynamic hero section height */
    height: 10rem; /* 160px - can be adjusted */
    background: linear-gradient(to top, #020617, transparent);
    z-index: 3;
    pointer-events: none; /* Allows clicks to pass through */
}

/* New style for the container holding the timer and cards at the bottom */
.hero-bottom-elements {
    /* Styles handled by Tailwind in HTML but explicitly defined here for clarity */
    /* position: absolute; bottom: 0; left: 0; width: 100%; */
    /* flex-direction: column; align-items: center; justify-content: flex-end; */
    /* z-index: 40; */
}


/* Custom utility to hide scrollbar for horizontal cards */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}