@import url("https://fonts.googleapis.com/css2?family=Reem+Kufi+Ink&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Reem+Kufi+Ink&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap");
@import "tailwindcss";

@theme {
  --color-primary-100: #cfdbe9;
  --color-primary-100: #effbff;
  --color-primary-500: #134b91;
  --color-primary-700: #0b2a52;
  --color-primary-900: #051529;
  --color-secondary-100: #ccf0fb;
  --color-secondary-500: #00b4ed;
  --color-secondary-600: #0090b8;
  --color-neutral-200: #dbdcdd;
  --color-neutral-600: #8b8c8f;
  --color-neutral-800: #3b3c3d;
  --color-neutral-950: #141414;
  --color-dark-text: #1a1a1a;
  --color-light-bg: #fafafa;
  --color-section-bg: #effbff;
  --font-tajwal: "Tajawal", sans-serif;
  --font-cairo: "Cairo", sans-serif;
  --default-font-family: var(--font-tajwal);
}

html,
body {
  direction: rtl;
  scroll-behavior: smooth;
}

/* #about-cards { */
#about {
  background: url("/staticfiles/landing/about-us-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #134b91; /* Fallback blue background */
}

#about .section-wrapper {
  background: url("/staticfiles/landing/bg-pattern.webp"), url("/staticfiles/landing/bg-pattern.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: 100% 25%, 2% 95%;

  @media screen and (min-width: 768px) {
    background-position: 100% 32%, 24% 94%;
  }
}