@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syncopate:wght@400;700&family=Cairo:wght@300;400;500;600;700&display=swap');

 /* Custom Local Font Implementation (Fallback included) */
 @font-face {
     font-family: 'Estedad';
     src: url('./assets/font/ArbFONTS-Estedad-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
 }

 html {
     scroll-behavior: auto;
 }

 /* Strictly prevent horizontal overflow on all screens */
 html,
 body {
     overflow-x: hidden;
     width: 100%;
     max-width: 100vw;
     background-color: #0A1930;
     color: #ffffff;
 }

 /* Lenis Recommended CSS */
 html.lenis,
 html.lenis body {
     height: auto;
 }

 .lenis.lenis-smooth {
     scroll-behavior: auto !important;
 }

 .lenis.lenis-smooth [data-lenis-prevent] {
     overscroll-behavior: contain;
 }

 .lenis.lenis-stopped {
     overflow: hidden;
 }

 .lenis.lenis-scrolling iframe {
     pointer-events: none;
 }

 :root {
     --color-brand-blue: #003BFF;
     --color-brand-light: #80A8FF;
     --color-brand-dark: #0A1930;
     /* Very Dark Blue */
 }

 body {
     font-family: 'Space Grotesk', 'Cairo', sans-serif;
     position: relative;
 }

 /* Dark Theme Gradients */
 .bg-tertiary-gradient {
     background: linear-gradient(180deg, #0A1930 0%, #061224 100%);
 }

 .bg-secondary-gradient {
     background: linear-gradient(90deg, var(--color-brand-dark) 0%, #003BFF 50%, var(--color-brand-dark) 100%);
 }

 .bg-journey-1 {
     background: linear-gradient(180deg, #061224 0%, #081B3A 50%, #040b17 100%);
 }

 .bg-journey-2 {
     background: linear-gradient(180deg, #040b17 0%, #0A1930 50%, #061224 100%);
 }

 .bg-journey-3 {
     background: linear-gradient(180deg, #061224 0%, #030811 100%);
 }

 /* Ambient Glowing Lines for Backgrounds */
 .ambient-line {
     position: absolute;
     pointer-events: none;
     background: linear-gradient(90deg, transparent, rgba(0, 59, 255, 0.9), transparent);
     box-shadow: 0 0 40px rgba(0, 59, 255, 0.8), 0 0 15px rgba(128, 168, 255, 0.5);
     z-index: 0;
     animation: pulse-line 6s ease-in-out infinite;
 }

 .ambient-line-v {
     position: absolute;
     pointer-events: none;
     background: linear-gradient(180deg, transparent, rgba(0, 59, 255, 0.9), transparent);
     box-shadow: 0 0 40px rgba(0, 59, 255, 0.8), 0 0 15px rgba(128, 168, 255, 0.5);
     z-index: 0;
     animation: pulse-line 8s ease-in-out infinite reverse;
 }

 @keyframes pulse-line {

     0%,
     100% {
         opacity: 0.4;
     }

     50% {
         opacity: 1;
     }
 }

 /* Hide default cursor on devices with a mouse for custom cursor */
 @media (pointer: fine) {

     body,
     a,
     button,
     [role="button"],
     input,
     textarea,
     select,
     .cursor-pointer,
     .slider-card {
         cursor: none !important;
     }
 }

 .font-display {
     font-family: 'Estedad', 'Syncopate', sans-serif;
 }

 /* Custom Scrollbar - Dark Mode */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }

 ::-webkit-scrollbar-track {
     background: #050d1a;
 }

 ::-webkit-scrollbar-thumb {
     background: #003BFF;
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: #80A8FF;
 }

 /* Mouse Tracking Glow Effect Variables */
 .glow-card {
     position: relative;
 }

 .glow-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
             rgba(0, 59, 255, 0.15),
             transparent 40%);
     z-index: 0;
     opacity: 0;
     transition: opacity 0.5s;
     pointer-events: none;
 }

 .glow-card:hover::before {
     opacity: 1;
 }

 /* Glassmorphism Classes - Dark Mode */
 .glass-card {
     background: rgba(10, 25, 48, 0.75);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1px solid rgba(0, 59, 255, 0.2);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
 }

 /* Custom Cursor Elements */
 #custom-cursor,
 #custom-cursor-dot {
     will-change: transform;
     pointer-events: none;
     z-index: 10001;
 }

 #custom-cursor-dot {
     z-index: 10002;
     transition: transform 0.1s ease-out;
 }

 /* Text Split Animation Classes */
 .word {
     overflow: hidden;
     padding-bottom: 0.1em;
     margin-bottom: -0.1em;
     transform-origin: bottom;
 }

 /* Infinite Marquee */
 .marquee-wrapper {
     display: flex;
     white-space: nowrap;
     overflow: hidden;
     width: 100%;
 }

 .marquee-content {
     display: flex;
     animation: marquee 30s linear infinite;
 }

 html[dir="rtl"] .marquee-content {
     animation: marquee-rtl 30s linear infinite;
 }

 @keyframes marquee {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 @keyframes marquee-rtl {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(50%);
     }
 }

 /* Seamless Loop */
 .animate-loop-scroll {
     animation: loop-scroll 40s linear infinite;
 }

 html[dir="rtl"] .animate-loop-scroll {
     animation: loop-scroll-rtl 40s linear infinite;
 }

 @keyframes loop-scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-100%);
     }
 }

 @keyframes loop-scroll-rtl {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(100%);
     }
 }

 /* Utilities */
 .magnetic {
     display: inline-block;
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .tilt-card {
     transform-style: preserve-3d;
     transform: perspective(1000px);
 }

 .tilt-card-inner {
     transform: translateZ(30px);
 }

 .nav-hidden {
     transform: translate(-50%, -150%) !important;
 }

 /* Utility to ensure dark logo visibility if needed */
 .logo-invert {
     filter: brightness(0) invert(1);
 }