src/styles/global.css

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import 'aos/dist/aos.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Cairo', 'Poppins', system-ui, sans-serif;
    scroll-behavior: smooth;
  }
  
  body {
    @apply transition-colors duration-300;
  }
  
  [dir="rtl"] {
    font-family: 'Cairo', system-ui, sans-serif;
  }
  
  [dir="ltr"] {
    font-family: 'Poppins', system-ui, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-blueprint-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 hover:shadow-lg hover:scale-105;
  }
  
  .btn-secondary {
    @apply border-2 border-blueprint-accent text-blueprint-accent hover:bg-blueprint-accent hover:text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300;
  }
  
  .section-padding {
    @apply py-16 px-4 sm:px-6 lg:px-8;
  }
  
  .container-custom {
    @apply max-w-7xl mx-auto;
  }
  
  .blueprint-pattern {
    background-image: 
      linear-gradient(45deg, transparent 24%, rgba(199, 156, 73, 0.05) 25%, rgba(199, 156, 73, 0.05) 26%, transparent 27%, transparent 74%, rgba(199, 156, 73, 0.05) 75%, rgba(199, 156, 73, 0.05) 76%, transparent 77%, transparent),
      linear-gradient(-45deg, transparent 24%, rgba(199, 156, 73, 0.05) 25%, rgba(199, 156, 73, 0.05) 26%, transparent 27%, transparent 74%, rgba(199, 156, 73, 0.05) 75%, rgba(199, 156, 73, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
  }
  
  .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .floating-shapes::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, rgba(199, 156, 73, 0.1), rgba(27, 47, 92, 0.1));
    border-radius: 50%;
    top: 10%;
    left: 10%;
    animation: float 8s ease-in-out infinite;
  }
  
  .floating-shapes::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(-45deg, rgba(199, 156, 73, 0.08), rgba(27, 47, 92, 0.08));
    border-radius: 20px;
    top: 60%;
    right: 15%;
    animation: float 6s ease-in-out infinite reverse;
  }
}

/* Arabic text improvements */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-blueprint-light dark:bg-blueprint-dark;
}

::-webkit-scrollbar-thumb {
  @apply bg-blueprint-accent rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-opacity-80;
}

/* Loading animation */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1B2F5C 0%, #2a4a7a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

.loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.blueprint-logo-loading {
  width: 120px;
  height: 120px;
  position: relative;
}

.blueprint-logo-loading svg {
  width: 100%;
  height: 100%;
  stroke: #C69C49;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s ease-in-out infinite;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}