@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

/* ===== Global ===== */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Cairo", sans-serif;
  background-color: #f8f9fa;
}

main, section {
  flex: 1;
}

/* ===== Hero ===== */
.hero-section {
  min-height: 80vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ===== Cards ===== */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 12px;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

/* ===== Buttons ===== */
.btn {
  border-radius: 8px;
  font-weight: 500;
}

/* ===== Navbar ===== */
.navbar-brand {
  font-size: 1.4rem;
  letter-spacing: 0.5px;
}

/* ===== Footer ===== */
footer {
  margin-top: auto;
}