src/index.css

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

@theme {
  --font-sans: "Cairo", "Inter", ui-sans-serif, system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f2fe 50%, #f5f3ff 100%);
  background-attachment: fixed;
  color: #0f172a; /* slate-905 deep high-contrast text color */
}

/* 3D Visual Effects & Helpers */
.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.card-persp {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-persp-hover:hover {
  transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) translateZ(12px);
  box-shadow: 
    0 15px 35px -10px rgba(99, 102, 241, 0.2),
    0 25px 50px -15px rgba(139, 92, 246, 0.2),
    0 35px 70px -25px rgba(6, 182, 212, 0.15);
}

.shadow-3d-flat {
  box-shadow: 
    0 4px 10px -2px rgba(0, 0, 0, 0.05),
    0 15px 25px -10px rgba(99, 102, 241, 0.08),
    0 25px 40px -15px rgba(139, 92, 246, 0.08);
}

.shadow-3d-deep {
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 20px 40px -15px rgba(99, 102, 241, 0.15),
    0 30px 60px -20px rgba(139, 92, 246, 0.15),
    0 40px 100px -30px rgba(6, 182, 212, 0.12);
}

/* Scrollbar styling */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* News ticker smooth scrolling */
@keyframes ticker-rtl {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes ticker-ltr {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animate-ticker-rtl {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-rtl 32s linear infinite;
}

.animate-ticker-rtl:hover {
  animation-play-state: paused;
}

.animate-ticker-ltr {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-ltr 32s linear infinite;
}

.animate-ticker-ltr:hover {
  animation-play-state: paused;
}