/* Combined custom styles for static site (uses Tailwind CDN for utilities) */
:root {
  --background: 0 0% 100%;
  --foreground: 220 30% 15%;
  --card: 0 0% 100%;
  --card-foreground: 220 30% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 30% 15%;
  --primary: 220 70% 25%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 90% 45%;
  --secondary-foreground: 220 30% 15%;
  --muted: 220 20% 96%;
  --muted-foreground: 220 15% 45%;
  --accent: 45 90% 50%;
  --accent-foreground: 220 30% 15%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 20% 90%;
  --input: 220 20% 90%;
  --ring: 220 70% 25%;
  --radius: 0.5rem;
  --navy: 220 70% 25%;
  --navy-dark: 220 75% 18%;
  --navy-light: 220 60% 35%;
  --gold: 45 90% 50%;
  --gold-light: 45 90% 60%;
  --gold-dark: 45 85% 40%;
}

/* Base styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Tajawal', sans-serif;
  direction: rtl;
  margin: 0;
  line-height: 1.6;
}

/* Simple container used throughout */
.container-custom {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section-padding { padding: 4rem 1rem; }

/* Color utility helpers (kept for clarity) */
.text-navy { color: hsl(var(--navy)); }
.bg-navy { background-color: hsl(var(--navy)); }
.bg-navy-dark { background-color: hsl(var(--navy-dark)); }
.text-gold { color: hsl(var(--gold)); }
.bg-gold { background-color: hsl(var(--gold)); }
.border-gold { border-color: hsl(var(--gold)); }
.hover\:bg-navy-light:hover { background-color: hsl(var(--navy-light)); }
.hover\:text-gold:hover { color: hsl(var(--gold)); }

/* Logo layout used in header */
.site-logo { display: flex; gap: 0.5rem; align-items: center; }
.site-logo img.logo { width: 200px; height: 90px; border-radius: 6px; display:block; object-fit:contain }
.footer-logo { width: 200px; height: 90px; border-radius: 6px; display:block; object-fit:contain }
.site-logo .lines { display:flex;flex-direction:column; line-height:1 }
.site-logo .lines .eng { font-weight:700; color:hsl(var(--navy)); font-size:1rem }
.site-logo .lines .arab { font-size:0.9rem; color:#6b7280 }

/* Buttons (converted from @apply) */
.btn-primary {
  padding: 0.75rem 2rem;
  background: hsl(var(--navy));
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  display: inline-flex; align-items:center; gap:0.5rem;
}
.btn-primary:hover { background: hsl(var(--navy-light)); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(10,20,40,0.12); }

.btn-gold {
  padding: 0.75rem 2rem;
  background: hsl(var(--gold));
  color: hsl(var(--navy-dark));
  font-weight: 700;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  display: inline-flex; align-items:center; gap:0.5rem;
}
.btn-gold:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

/* Hero overlay */
.hero-overlay { background: linear-gradient(135deg, rgba(19,41,75,0.95) 0%, rgba(19,41,75,0.8) 50%, rgba(19,41,75,0.6) 100%); }

/* Simple cards hover */
.service-card { transition: all 0.25s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(19,41,75,0.12); }

/* Animations */
@keyframes fadeInUp { from { opacity:0; transform: translateY(30px);} to { opacity:1; transform: translateY(0);} }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideInRight { from { opacity:0; transform: translateX(50px);} to { opacity:1; transform: translateX(0);} }
@keyframes slideInLeft { from { opacity:0; transform: translateX(-50px);} to { opacity:1; transform: translateX(0);} }
@keyframes pulse-gold { 0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,0.4);} 50%{ box-shadow:0 0 0 15px rgba(212,175,55,0);} }
.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
.animate-slideInRight { animation: slideInRight 0.6s ease-out forwards; }
.animate-slideInLeft { animation: slideInLeft 0.6s ease-out forwards; }
.animate-pulse-gold { animation: pulse-gold 2s infinite; }

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Gold underline */
.gold-underline { position: relative; display: inline-block; }
.gold-underline::after { content: ''; position: absolute; bottom: -8px; right: 0; width: 60px; height: 3px; background: hsl(var(--gold)); border-radius: 2px; }

/* Image zoom */
.img-zoom { overflow:hidden }
.img-zoom img { transition: transform 0.5s ease }
.img-zoom:hover img { transform: scale(1.07) }

/* Scrollbar */
::-webkit-scrollbar { width: 8px }
::-webkit-scrollbar-track { background: #f1f1f1 }
::-webkit-scrollbar-thumb { background: hsl(var(--navy)); border-radius:4px }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--navy-dark)) }

/* App.css small bits */
[dir="rtl"] { text-align: right }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }