@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;600;700;900&family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #0B0F19;
  --secondary: #2563EB;
  --accent: #3B82F6;
  --dark-bg: #05070C;
  --dark-panel: #0E1322;
  --gold-glow: 0 0 20px rgba(37, 99, 235, 0.15);
  --gold-glow-strong: 0 0 30px rgba(37, 99, 235, 0.3);
}

body {
  font-family: 'Outfit', 'Inter', sans-serif;
  scroll-behavior: smooth;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom Luxury Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(11, 15, 25, 0.05);
}
.dark ::-webkit-scrollbar-track {
  background: rgba(5, 7, 12, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.3);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.6);
}

/* Luxury Glassmorphism */
.glass-luxury {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.dark .glass-luxury {
  background: rgba(14, 19, 34, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(37, 99, 235, 0.08);
}

/* Luxury Card with Gold Accent Hover */
.card-luxury {
  border-radius: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-luxury:hover {
  transform: translateY(-5px);
  box-shadow: var(--gold-glow);
  border-color: rgba(37, 99, 235, 0.3);
}

.dark .card-luxury {
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.dark .card-luxury:hover {
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--gold-glow);
}

/* Golden buttons with shine effect */
.btn-luxury-gold {
  position: relative;
  background: linear-gradient(135deg, #60A5FA 0%, #2563EB 50%, #1D4ED8 100%);
  color: #0B0F19;
  font-weight: 700;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
  transition: all 0.3s ease;
}
.btn-luxury-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-luxury-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(30deg);
  transition: transform 0.5s ease;
}
.btn-luxury-gold:hover::after {
  transform: translate(50%, 50%) rotate(30deg);
}

/* Animations */
@keyframes gold-shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.animate-pulse-gold {
  animation: pulse-gold 2s infinite;
}

.gold-text-gradient {
  background: linear-gradient(135deg, #FFFFFF 10%, #93C5FD 60%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.dark .gold-text-gradient {
  background: linear-gradient(135deg, #FFFFFF 10%, #93C5FD 60%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* RTL Adjustments */
[dir="rtl"], [dir="rtl"] *:not(i) {
  font-family: 'Tajawal', 'Almarai', 'Cairo', sans-serif !important;
}
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] a {
  line-height: 1.6 !important;
}
[dir="rtl"] .arrow-icon {
  transform: rotate(180deg);
}
/* Custom Hero Backgrounds */
.hero-gradient {
  background: linear-gradient(135deg, rgba(11, 15, 25, 0.95) 0%, rgba(5, 7, 12, 0.8) 100%);
}
.hero-pattern {
  background-image: radial-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 0);
  background-size: 24px 24px;
}

/* PDF Print styling */
@media print {
  body * {
    visibility: hidden;
    background: white !important;
    color: black !important;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 2px solid #2563EB;
    padding: 2rem;
  }
}

.ltr-text {
  direction: ltr !important;
  display: inline-block;
}

/* Google Reviews Infinite Marquee (Left to Right) */
@keyframes marquee-ltr {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}
.animate-marquee-ltr {
  display: flex;
  width: max-content;
  animation: marquee-ltr 30s linear infinite;
}
.animate-marquee-ltr:hover {
  animation-play-state: paused;
}

/* Mobile View Typography & Spacing Overrides (both English and Arabic) */
@media (max-width: 640px) {
  /* Scale down base font size for fine adjustments */
  html {
    font-size: 14px !important;
  }
  
  /* Scale down specific utility typography styles */
  .text-6xl { font-size: 2.25rem !important; } /* ~36px instead of 60px */
  .text-5xl { font-size: 1.875rem !important; } /* ~30px instead of 48px */
  .text-4xl { font-size: 1.5rem !important; } /* ~24px instead of 36px */
  .text-3xl { font-size: 1.25rem !important; } /* ~20px instead of 30px */
  .text-2xl { font-size: 1.15rem !important; }
  .text-xl { font-size: 1.05rem !important; }
  .text-lg { font-size: 0.95rem !important; }
  .text-base { font-size: 0.875rem !important; }
  .text-sm { font-size: 0.8rem !important; }
  .text-xs { font-size: 0.725rem !important; }
  .text-\[10px\] { font-size: 9px !important; }

  /* Adjust spacing to avoid excessive scrolling on small viewports */
  .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-16 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  .py-12 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
  .py-10 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .my-12 { margin-top: 1.75rem !important; margin-bottom: 1.75rem !important; }
  .mb-12 { margin-bottom: 1.75rem !important; }
  .mt-12 { margin-top: 1.75rem !important; }
  .mb-10 { margin-bottom: 1.5rem !important; }
  .space-y-12 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse))) !important; margin-bottom: calc(1.75rem * var(--tw-space-y-reverse)) !important; }

  /* Ensure margins and paddings are balanced */
  .p-10 { padding: 1.25rem !important; }
  .p-8 { padding: 1rem !important; }
  .p-6 { padding: 0.75rem !important; }
  .gap-8 { gap: 1rem !important; }
  .gap-10 { gap: 1.25rem !important; }

  /* Specific styling for Arabic mobile viewport alignment */
  html[lang="ar"] * {
    line-height: 1.5 !important;
  }
}

/* Floating buttons pulse animations */
@keyframes whatsapp-float-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes call-float-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.animate-whatsapp-pulse {
  animation: whatsapp-float-pulse 2s infinite;
}

.animate-call-pulse {
  animation: call-float-pulse 2s infinite;
}