html {
  scroll-behavior: smooth;
}
:root {
  --warm-beige: #f5f2e8;
  --burgundy: #7d2d3d;
  --dark-green: #2d5a3d;
  --light-burgundy: #a64b5c;
  --sage-green: #8fa68e;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--warm-beige);
}

.section-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/Family_Friendly_Casin.jpg") no-repeat center center;
  background-size: cover;
  padding: 180px 0;
  text-align: center;
}

.section-bg {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("images/Premium_Tabletop_Casino.jpg") no-repeat center center;
  background-size: cover;
  padding: 180px 0;
  text-align: center;
}

.bg-warm-beige {
  background-color: var(--warm-beige);
}

.bg-burgundy {
  background-color: var(--burgundy);
}

.bg-dark-green {
  background-color: var(--dark-green);
}

.bg-light-burgundy {
  background-color: var(--light-burgundy);
}

.bg-sage-green {
  background-color: var(--sage-green);
}

.text-burgundy {
  color: var(--burgundy);
}

.text-dark-green {
  color: var(--dark-green);
}

.text-light-burgundy {
  color: var(--light-burgundy);
}

.border-burgundy {
  border-color: var(--burgundy);
}

.border-dark-green {
  border-color: var(--dark-green);
}

.hover\:bg-light-burgundy:hover {
  background-color: var(--light-burgundy);
}

.hover\:bg-sage-green:hover {
  background-color: var(--sage-green);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--warm-beige);
  border-radius: 12px;
  padding: 2rem;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  margin: 1rem;
  position: relative;
}

.age-verification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--burgundy);
  color: white;
  padding: 1rem;
  z-index: 1500;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-banner.show {
  transform: translateY(0);
}

.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.active {
  transform: translateX(0);
}

.game-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.casino-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.casino-card:hover {
  transform: scale(1.05);
}

.trust-badge {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}