:root {
  --ss-bg: #F7F9FB;
  --ss-surface: #FFFFFF;
  --ss-border: #E2E8F0;
  --ss-container-low: #F1F5F9;
  --ss-primary: #0A2540;
  --ss-accent: #0284C7;
  --ss-cyan: #0EA5E9;
  --ss-success: #10B981;
  --ss-text-heading: #0A2540;
  --ss-text-body: #334155;
  --ss-text-muted: #64748B;
}

body {
  background: var(--ss-bg) !important;
  color: var(--ss-text-body) !important;
}

/* Header */
#header {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid var(--ss-border);
}

/* Sections */
section:not(#home) {
  background: var(--ss-bg) !important;
  color: var(--ss-text-body) !important;
}

#about { background: linear-gradient(180deg, #F7F9FB, #F1F5F9) !important; }
#services { background: var(--ss-bg) !important; }
#projects { background: var(--ss-bg) !important; }
#partners { background: var(--ss-container-low) !important; }
#store { background: var(--ss-bg) !important; }
#contact {
  background: linear-gradient(135deg, #F7F9FB, #F1F5F9) !important;
}

/* Text colors */
section .text-gray-900, section .text-gray-800 { color: var(--ss-text-heading) !important; }
section .text-gray-700 { color: var(--ss-text-body) !important; }
section .text-gray-600 { color: var(--ss-text-muted) !important; }
section .text-gray-500 { color: var(--ss-text-muted) !important; }
section .text-primary-500, section .text-primary-600 { color: var(--ss-accent) !important; }

/* Cards */
.service-card, .project-card, .store-card {
  background: var(--ss-surface) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px 0 rgba(0,0,0,0.03);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover, .project-card:hover, .store-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(10,37,64,0.08), 0 8px 10px -6px rgba(10,37,64,0.04);
  border-color: var(--ss-accent) !important;
}
.service-card h3, .project-card h3, .store-card h3 { 
  color: var(--ss-text-heading) !important;
  font-family: var(--font-ar-heading, 'Cairo', 'Tajawal', sans-serif) !important;
}
.store-card p, .store-card span, .store-card a, .store-card button {
  font-family: var(--font-ar-body, 'Tajawal', sans-serif) !important;
}
.service-card h3, .project-card h3 { color: var(--ss-text-heading) !important; }
.service-card .bg-primary-50, .project-card .bg-primary-50 {
  background: #E0F2FE !important;
  border: 1px solid #BAE6FD;
}
.service-card .text-primary-500, .project-card .text-primary-500 { color: var(--ss-accent) !important; }
.service-card ul { color: var(--ss-text-muted) !important; }

/* Buttons */
a.bg-primary-500, button.bg-primary-500 {
  background: var(--ss-accent) !important;
  color: #FFFFFF !important;
  border-radius: 12px;
  box-shadow: 0 4px 14px 0 rgba(2,132,199,0.35);
}

/* Footer */
footer {
  background: var(--ss-primary) !important;
  color: #FFFFFF !important;
  border-top: 1px solid var(--ss-border);
}
footer .text-gray-600, footer .text-gray-500 { color: rgba(255,255,255,0.7) !important; }

/* Hero */
#home {
  background: linear-gradient(135deg, #F7F9FB, #E0F2FE) !important;
}

/* Inputs */
#contact .form-input, #contact input, #contact textarea, #contact select {
  background: var(--ss-surface) !important;
  color: var(--ss-text-body) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 8px;
}

/* Nav link responsive defaults */
#header .nav-link {
  font-size: 0.925rem;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

@media (min-width: 1024px) and (max-width: 1280px) {
  #header .nav-link {
    font-size: 0.825rem;
    padding: 0.35rem 0.6rem;
  }
}

/* Card hover lift */
.card-hover:hover { transform: translateY(-3px); }

/* Global responsiveness & smooth media fluid adjustments */
img, svg, video {
  max-width: 100%;
  height: auto;
}

/* Responsive container safety */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Partner logos & card grid fluid responsiveness */
.partner-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile tap target friendly inputs */
@media (max-width: 640px) {
  input, select, textarea, button, a.btn {
    min-height: 44px;
  }
}