/* === base.css === */

.hero-container *,
.hero-container *::before,
.hero-container *::after {
  box-sizing: border-box;
}

/* Typography and Colors */
body {
  font-family: 'Inter', sans-serif;
  color: #111;
  background-color: #fff;
  line-height: 1.6;
}

p {
  color: #222;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.section-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  margin-top: 60px;
}

/* ==========================
   ROTATE WARNING
   ========================== */
#rotate-warning {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  display: none !important;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  padding: 32px;
  animation: fadeIn 0.4s ease-in-out;
}

.rotate-box {
  max-width: 380px;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  text-align: center;
  font-family: "Inter", sans-serif;
  color: #222;
  animation: slideUp 0.4s ease-out;
}

.rotate-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #0099ff;
}

.rotate-text p {
  margin-top: 6px;
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ✅ When JavaScript adds .show, make it flex (so it's visible + centered) */
#rotate-warning.show {
  display: flex !important;
  opacity: 1;
}






/* 🍪 Hide by default (everywhere) */
.cookie-card {
  display: none;
}