/* Shared Variables and Utilities */
:root {
  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--light-green) 0%,
    var(--blue) 100%
  );
  --gradient-secondary: linear-gradient(
    135deg,
    var(--blue) 0%,
    var(--light-green) 100%
  );

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;

  /* Typography */
  --font-en: "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-ar: "Cairo", "Noto Sans Arabic", "Segoe UI", sans-serif;
  --font-primary: var(--font-en);
  --transition: all 0.3s ease-in-out;
  --dir-sign: 1;
}
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  width: 100%;
}

/* Global hover timing for interactive UI elements */
a,
button,
.btn,
[role="button"],
.nav-menu a,
.social-icon,
.theme-toggle,
.service-card,
.portfolio-item,
.service-feature-item,
.benefit-item,
.engagement-card,
.listing-card,
.listing-photo img,
.listing-photo video {
  transition-timing-function: ease-in-out;
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
/* Utility Classes */
.hidden {
  display: none !important;
}

.checklist {
  list-style: none;
  margin: var(--spacing-xs) 0 0;
  padding: 0;
}

.checklist li {
  position: relative;
  padding-inline-start: 28px;
  margin-bottom: 8px;
  line-height: 1.6;
}

.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.2rem;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390ee90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--blue);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
.navbar .nav-menu a {
  font-weight: 600;
}



input::placeholder,
textarea::placeholder {
  color: var(--text-secondary);
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled,
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-strong);
  color: var(--muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}

a {
  color: var(--link);
}

a:hover,
a:focus {
  color: var(--link-hover);
}

svg,
svg path,
svg circle,
svg rect,
svg line {
  stroke: currentColor;
}

svg [fill="currentColor"] {
  fill: currentColor;
}