:root {
  --gold: #c9a84c;
  --gold-light: #e8c97a;
  --gold-lt: #e8c96e;
  --deep-green: #0d2b1f;
  --mid-green: #1a4a30;
  --deep-yellow: #b07a2c;
  --mid-yellow: #c9a84c;
  --light-green: #2e7d52;
  --cream: #f7f2e8;
  --warm-white: #fdfaf3;
  --deep-brown: #261d06;
  --pale-brown: #f4e9d2;
  --deep: #0d2b1f;
  --mid: #1a4a30;
  --cream: #f5f0e8;
  --warm-bg: #f8f5ef;
  --card-bg: #ffffff;
}

* {
  scroll-behavior: smooth;
}

body {
  font-family: "Lato", sans-serif;
  background-color: var(--pale-brown);
  color: var(--deep-green);
}

/* ── Islamic geometric pattern background ── */
.geo-bg {
  background-color: var(--deep-green);
  background-image:
    radial-gradient(
      circle at 25% 25%,
      rgba(201, 168, 76, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(201, 168, 76, 0.06) 0%,
      transparent 50%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.4' opacity='0.18'%3E%3Cpolygon points='40,4 76,22 76,58 40,76 4,58 4,22'/%3E%3Cpolygon points='40,14 66,28 66,52 40,66 14,52 14,28'/%3E%3Cline x1='40' y1='4' x2='40' y2='14'/%3E%3Cline x1='76' y1='22' x2='66' y2='28'/%3E%3Cline x1='76' y1='58' x2='66' y2='52'/%3E%3Cline x1='40' y1='76' x2='40' y2='66'/%3E%3Cline x1='4' y1='58' x2='14' y2='52'/%3E%3Cline x1='4' y1='22' x2='14' y2='28'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-bg {
  background-color: var(--deep-green);
  background-image:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(201, 168, 76, 0.15) 0%,
      transparent 60%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.35' opacity='0.12'%3E%3Crect x='10' y='10' width='40' height='40' rx='2'/%3E%3Crect x='20' y='20' width='20' height='20' rx='2'/%3E%3Cline x1='30' y1='2' x2='30' y2='10'/%3E%3Cline x1='30' y1='50' x2='30' y2='58'/%3E%3Cline x1='2' y1='30' x2='10' y2='30'/%3E%3Cline x1='50' y1='30' x2='58' y2='30'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Geometric Islamic tile background */
.tile-bg {
  background-color: var(--deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.4' opacity='0.12'%3E%3Cpolygon points='40,4 76,22 76,58 40,76 4,58 4,22'/%3E%3Cpolygon points='40,14 66,28 66,52 40,66 14,52 14,28'/%3E%3Cline x1='40' y1='4' x2='40' y2='76'/%3E%3Cline x1='4' y1='22' x2='76' y2='58'/%3E%3Cline x1='4' y1='58' x2='76' y2='22'/%3E%3C/g%3E%3C/svg%3E");
}

.warm-tile-bg {
  background-color: var(--warm-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.3' opacity='0.07'%3E%3Cpolygon points='30,3 57,16 57,44 30,57 3,44 3,16'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Gold divider ── */
.gold-divider {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--gold-light),
    var(--gold),
    transparent
  );
}

/* ── Arch shape at bottom of hero ── */
.arch-bottom {
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* ── Ornament ── */
.ornament::before,
.ornament::after {
  content: "❧";
  color: var(--gold);
  font-size: 1.2rem;
  margin: 0 0.75rem;
}

/* ── Nav link underline ── */
.nav-link {
  position: relative;
  transition: color 0.3s;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ── Card hover ── */
.card-hover {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13, 43, 31, 0.18);
}

/* ── Animate fade-up ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 0.8s ease both;
}

.delay-1 {
  animation-delay: 0.15s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.45s;
}

.delay-4 {
  animation-delay: 0.6s;
}

/* ── Mosque dome SVG accent ── */
.dome-accent {
  fill: var(--gold);
  opacity: 0.12;
}

/* ── Prayer time card ── */
.prayer-card {
  border-top: 3px solid var(--gold);
  transition:
    background 0.3s,
    transform 0.3s;
}

.prayer-card:hover {
  background: var(--mid-green);
  transform: translateY(-3px);
}

/* ── Section title ── */
.section-title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.06em;
}

.arabic-title {
  font-family: "Amiri", serif;
  direction: rtl;
}

/* ── Gallery grid ── */
.gallery-item {
  overflow: hidden;
}

.gallery-item img {
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* ── Mobile menu slide ── */
.mobile-menu {
  transition:
    max-height 0.4s ease,
    opacity 0.4s ease;
}

/* ── Scroll-to-top ── */
#scrollTop {
  transition:
    opacity 0.3s,
    transform 0.3s;
}

#scrollTop:hover {
  transform: translateY(-3px);
}