@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, rgba(250, 250, 249, 1), rgba(232, 245, 233, 1));
}

[dir='rtl'] {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

.logo-mark {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 18px 36px -20px rgba(6, 95, 70, 0.6);
}

.hero-logo {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.25rem;
  padding: 0.4rem;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 48px -24px rgba(15, 118, 110, 0.55);
}

.hero-pattern .text-green-100 {
  color: rgba(236, 253, 245, 0.95) !important;
  text-shadow: 0 16px 32px -18px rgba(6, 95, 70, 0.55);
}

.hero-pattern .text-emerald-50 {
  color: rgba(248, 250, 252, 0.95) !important;
  text-shadow: 0 24px 48px -18px rgba(6, 95, 70, 0.55);
}

.hero-pattern h2 {
  color: #ffffff !important;
  text-shadow: 0 28px 54px -18px rgba(6, 95, 70, 0.65);
}

.hero-pattern p[dir="rtl"] {
  text-align: right;
}


.hero-pattern {
  position: relative;
  overflow: hidden;
}

.hero-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(16, 95, 70, 0.28), transparent),
    radial-gradient(100% 100% at 0% 0%, rgba(245, 158, 11, 0.18), transparent);
  opacity: 0.85;
  pointer-events: none;
}

.hero-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://arabiantree.com/assets/images/stage.png');
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.35;
  pointer-events: none;
}

.hero-badge {
  background: linear-gradient(135deg, #065f46, #047857);
}

.card-glow:hover {
  box-shadow:
    0 15px 40px -20px rgba(16, 95, 70, 0.35),
    0 20px 45px -35px rgba(251, 191, 36, 0.3);
}

.floating-button:hover {
  transform: translateY(-4px);
}

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.15));
  z-index: -1;
  opacity: 0.9;
}