body {
  margin: 0;
  padding: 0;
  background: #0a0a0a; /* Changed from #f5f5f5 to prevent white flash */
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Inherit box-sizing for all elements */
*, *::before, *::after {
  box-sizing: inherit;
}

/* Video Background Optimization */
.video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: blur(3px) /*brightness(0.95) contrast(1.15)*/;
  opacity: 0.99;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

.video-bg.loaded {
  opacity: 1;
}

/* Ensure content is above video */
.main-content {
  position: relative;
  z-index: 1;
}

/* Default: Standard vertical cards = 3 per row */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  justify-items: center;
}

/* Default: Horizontal MAP cards = 2 per row */
.map-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 24px 6px;
  justify-items: center;
  background-color: #eaeaea;
}

/* Large screen (≥1600px) */
@media (min-width: 1200px) {
  .card-container {
    grid-template-columns: repeat(5, 1fr);
  }

  .map-card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small screens (≤768px) */
@media (max-width: 720px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .map-card-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Card base styles */
.card {
  width: 100%;
  aspect-ratio: 1218 / 1698;
  -webkit-aspect-ratio: 1218 / 1698;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

.map-card {
  aspect-ratio: 1698 / 1218;
  -webkit-aspect-ratio: 1698 / 1218;
}

/* Flip animation */
.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.9s;
  -webkit-transition: -webkit-transform 0.9s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform;
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* Front and back */
.card-front,
.card-back {
  position: absolute;
  width: 99%;
  height: 99%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid #ccc;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.card-front img,
.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-front {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

/* Navigation styles for pages with menus */
nav {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 1rem;
  text-align: center;
  margin-bottom: 2rem;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.3s ease;
}

nav a:hover {
  opacity: 0.7;
}

/* Content styling for text-based pages */
.content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 2rem;
  margin: 2rem;
  border-radius: 10px;
  color: white;
}

h1, h2, h3 {
  color: white;
  margin-top: 0;
}

p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Gallery specific styles */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.gallery-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: 10px;
  color: white;
  text-align: center;
}

.gallery-item img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 5px;
  margin-bottom: 1rem;
}

/* Homepage Hexagon Grid Styles */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* BACKGROUND IMAGE FADE ON HOVER */
.background-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, background-image 0.3s ease-in-out;
  z-index: 1;
}

body:has(.hex-NORTH:hover) .background-fade {
  opacity: 1;
  background-image: url('media/bg-north.jpg');
}

body:has(.hex-SOUTH:hover) .background-fade {
  opacity: 1;
  background-image: url('media/bg-south.jpg');
}

body:has(.hex-NORTHEAST:hover) .background-fade {
  opacity: 1;
  background-image: url('media/bg-northeast.jpg');
}

body:has(.hex-SOUTHEAST:hover) .background-fade {
  opacity: 1;
  background-image: url('media/bg-southeast.jpg');
}

body:has(.hex-SOUTHWEST:hover) .background-fade {
  opacity: 1;
  background-image: url('media/bg-southwest.jpg');
}

body:has(.hex-NORTHWEST:hover) .background-fade {
  opacity: 1;
  background-image: url('media/bg-northwest.jpg');
}

.hex-grid {
  position: relative;
  width: 90%;
  max-width: 720px;
  aspect-ratio: 1;
  margin: auto;
  z-index: 2;
}

.hex-container {
  position: absolute;
  width: 29.17%;
  height: 25.56%;
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%, 75% 100%,
    25% 100%, 0% 50%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-13%, -30%);
}

.hex-inner {
  width: 90%;
  height: 90%;
  clip-path: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  padding: 12px;
  box-sizing: border-box;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  border: 2px solid #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: 24px;
}

.hex-inner:hover {
  transform: scale(1.10);
}

.main-container { background: white; z-index: 2; }
.main-inner { background: black; color: white; }
.main-inner:hover { background: #222; color: #fff; }

.outer-container { background: black; }
.outer-inner { background: white; color: black; }
.outer-inner:hover { background: #f0f0f0; color: black; }

.main-container { top: 43.05%; left: 41.67%; }
.hex-NORTH      { top: 16.67%; left: 41.67%; }
.hex-SOUTH      { top: 69.44%; left: 41.67%; }
.hex-NORTHEAST  { top: 29.86%; left: 64.58%; }
.hex-SOUTHEAST  { top: 56.25%; left: 64.58%; }
.hex-SOUTHWEST  { top: 56.25%; left: 18.75%; }
.hex-NORTHWEST  { top: 29.86%; left: 18.75%; }

/* Responsive tweaks */
@media (max-width: 1000px) {
  .hex-grid { width: 600px; height: 700px; }
  .hex-container { width: 170px; height: 150px; }
  .hex-inner { font-size: 20px; padding: 10px; }
  .main-container { top: 248px; left: 240px; }
  .hex-NORTH { top: 96px; left: 240px; }
  .hex-SOUTH { top: 400px; left: 240px; }
  .hex-NORTHEAST { top: 172px; left: 376px; }
  .hex-SOUTHEAST { top: 324px; left: 376px; }
  .hex-SOUTHWEST { top: 324px; left: 104px; }
  .hex-NORTHWEST { top: 172px; left: 104px; }
}

@media (max-width: 600px) {
  .hex-grid { width: 500px; height: 600px; }
  .hex-container { width: 140px; height: 120px; }
  .hex-inner { font-size: 16px; padding: 8px; }
  .main-container { top: 202px; left: 195px; }
  .hex-NORTH { top: 78px; left: 195px; }
  .hex-SOUTH { top: 326px; left: 195px; }
  .hex-NORTHEAST { top: 140px; left: 305px; }
  .hex-SOUTHEAST { top: 264px; left: 305px; }
  .hex-SOUTHWEST { top: 264px; left: 85px; }
  .hex-NORTHWEST { top: 140px; left: 85px; }
}

@media (max-width: 400px) {
  .hex-grid { width: 380px; height: 520px; }
  .hex-container { width: 110px; height: 100px; }
  .hex-inner { font-size: 14px; padding: 6px; }
  .main-container { top: 155px; left: 150px; }
  .hex-NORTH { top: 60px; left: 150px; }
  .hex-SOUTH { top: 250px; left: 150px; }
  .hex-NORTHEAST { top: 108px; left: 235px; }
  .hex-SOUTHEAST { top: 202px; left: 235px; }
  .hex-SOUTHWEST { top: 202px; left: 65px; }
  .hex-NORTHWEST { top: 108px; left: 65px; }
}

@media (orientation: portrait) {
  .video-bg {
    transform: translate(-50%, -50%) rotate(90deg);
    width: auto;
    height: 100%; /* Flip dimensions */
  }
}