@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;1,700&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

@media (max-width: 768px) {
  :root {
    --radius: 16px;
  }
  
  .page-wrapper {
    padding: 6rem 1.2rem 4rem; /* Increased top padding for mobile fixed header */
  }
}
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

img, video, iframe { max-width: 100%; height: auto; }

[dir="rtl"] { font-family: 'Noto Sans Arabic', 'Poppins', sans-serif; }

:root {
  --primary-green: #0b8a42;
  --dark-green: #06332b;
  --light-green: #0ea854;
  --bg-light: #f8f9fa;
  --white: #ffffff;
  --text-dark: #06332b;
  --text-muted: #4a6860;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.15);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 24px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Accounts for fixed header during scroll-to-anchor */
  background: #fff;
  overflow-x: hidden;
  width: 100%;
}

html.page-transitioning,
html.page-transitioning body {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease !important;
}

body {
  font-family: 'Poppins', sans-serif;
  background: transparent; /* Made transparent to show background effects */
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
}

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ========== PAGE WRAPPER ========== */
.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8rem 2rem 6rem; /* Increased top padding to clear fixed header */
}

/* ========== BACKGROUNDS ========== */
#dot-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.55;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(11,138,66,0.1) 0%, transparent 35%);
  transition: background 0.2s ease;
}