@theme {
  --color-primary: #003399;
}

body { font-family: "Cairo", sans-serif; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.testimonials-scroll::-webkit-scrollbar { display: none; }
.testimonials-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.15s ease-out forwards; }
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }

:root {
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --primary: 220 100% 30%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 220 100% 30%;
  --radius: 0.75rem;
}
.step-indicator { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: hsl(210 40% 96%); color: hsl(215 16% 47%); transition: all 0.3s; }
.step-indicator.active { background: hsl(221 83% 53%); color: hsl(210 40% 98%); box-shadow: 0 0 0 4px hsl(221 83% 53% / 0.2); }
.step-indicator.done { background: #16a34a; color: white; }
.step-line { background: hsl(214 32% 91%); height: 2px; width: 4rem; transition: all 0.3s; }
.step-line.active { background: hsl(221 83% 53%); }

.text-red { color: #ef4444; }
.text-green { color: #22c55e; }
.icon-2 { width: 24px; height: 24px; }

.service-card:hover .card-icon { background-color: #003399; color: #fff; }
.service-card .card-icon { transition: background-color .3s, color .3s; }

.visa-card:hover .card-icon { background-color: #003399; color: #fff; }
.visa-card .card-icon { transition: background-color .3s, color .3s; }