 
    html { scroll-behavior: smooth; height: 100%; }
    body { height: 100%; }
    
    /* RTL Support */
    [dir="rtl"] { font-family: 'Cairo', sans-serif; }
    [dir="ltr"] { font-family: 'Montserrat', sans-serif; }
    
    /* Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(42, 64, 84, 0.4); }
      50% { box-shadow: 0 0 40px rgba(42, 64, 84, 0.8); }
    }
    
    @keyframes slideIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    
    .animate-fade-up { animation: fadeInUp 0.8s ease forwards; }
    .animate-fade-down { animation: fadeInDown 0.8s ease forwards; }
    .animate-fade-left { animation: fadeInLeft 0.8s ease forwards; }
    .animate-fade-right { animation: fadeInRight 0.8s ease forwards; }
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
    .animate-slide-in { animation: slideIn 0.6s ease forwards; }
    
    .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; }
    .delay-600 { animation-delay: 0.6s; }
    
    /* Scroll animations */
    .scroll-animate {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .scroll-animate.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Navbar transition */
    .navbar-scrolled {
      background: rgba(26, 42, 58, 0.98) !important;
      backdrop-filter: blur(20px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    }
    
    .dark .navbar-scrolled {
      background: rgba(10, 20, 30, 0.98) !important;
    }
    
    /* Button hover effects */
    .btn-glow {
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
    }
    
    .btn-glow::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s ease;
    }
    
    .btn-glow:hover::before {
      left: 100%;
    }
    
    .btn-glow:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(42, 64, 84, 0.5);
    }
    
    /* Card hover effects */
    .service-card {
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .service-card:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    }
    
    /* Client logo effects */
    .client-logo {
      filter: grayscale(100%);
      opacity: 0.6;
      transition: all 0.4s ease;
    }
    
    .client-logo:hover {
      filter: grayscale(0%);
      opacity: 1;
      transform: scale(1.1);
    }
    
    /* Wave separator */
    .wave-separator {
      position: relative;
      height: 100px;
      overflow: hidden;
    }
    
    .wave-separator svg {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
    
    /* Carousel */
    .carousel-slide {
      opacity: 0;
      transition: opacity 1s ease-in-out;
      position: absolute;
      inset: 0;
    }
    
    .carousel-slide.active {
      opacity: 1;
    }
    
    /* Parallax */
    .parallax-bg {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    @media (max-width: 768px) {
      .parallax-bg {
        background-attachment: scroll;
      }
    }
    
    /* Team card hover */
    .team-card {
      transition: all 0.5s ease;
    }
    
    .team-card:hover {
      transform: translateY(-15px);
    }
    
    .team-card:hover .team-overlay {
      opacity: 1;
    }
    
    /* Social icons */
    .social-icon {
      transition: all 0.3s ease;
    }
    
    .social-icon:hover {
      transform: translateY(-5px) scale(1.2);
    }
    
    /* Back to top */
    .back-to-top {
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
    }
    
    .back-to-top.visible {
      opacity: 1;
      visibility: visible;
    }
    
    /* Form inputs */
    .form-input {
      transition: all 0.3s ease;
    }
    
    .form-input:focus {
      transform: scale(1.02);
      box-shadow: 0 0 20px rgba(42, 64, 84, 0.3);
    }
    
    /* Nav link underline */
    .nav-link {
      position: relative;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #bdbfc1, #ffffff);
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after {
      width: 100%;
    }
    
    /* Pattern overlay */
    .pattern-overlay {
      background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.02) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 50px 50px;
    }
    
    /* Loading shimmer */
    .shimmer {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      background-size: 200% 100%;
      animation: shimmer 2s infinite;
    }
    
    /* Theme transition */
    * {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    
    /* Mobile menu */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu.open {
      transform: translateX(0);
    }
    
    [dir="rtl"] .mobile-menu {
      transform: translateX(-100%);
      right: auto;
      left: 0;
    }
    
    [dir="rtl"] .mobile-menu.open {
      transform: translateX(0);
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
      z-index: 40;
    }
    
    .mobile-menu-overlay.open {
      opacity: 1;
      visibility: visible;
    }
  