@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* Prevent text selection & copying */
/* * { */
  /* user-select: none !important; */
  /* -webkit-user-select: none !important; */
  /* -ms-user-select: none !important; */
/* } */

/* Prevent dragging of images */
img,
svg {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
}

/* Prevent copy/paste in input fields */
input,
textarea {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}



@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --bg-primary: #092346;
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

html,
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}



/* Ensure dropdown menus are not clipped by parent containers */
nav, header, main, div[class*="container"] {
  overflow-x: visible;
  overflow-y: visible;
}

/* Prevent clipping of fixed positioned elements */
[style*="position: fixed"] {
  clip-path: none !important;
  clip: auto !important;
}

.clip-left {
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}

.clip-right {
  clip-path: polygon(25% 100%, 100% 100%, 100% 0, 0 0);
}

/* Fix logo cropping in mobile menu */
.mobile-menu-logo img {
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  max-height: 32px !important;
  max-width: 100% !important;
  display: block !important;
  overflow: visible !important;
}

.mobile-menu-logo a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  height: 100% !important;
}

/* إزالة الخط الأفقي تحت كروت الأسعار في صفحة VPS */
.vps-page-wrapper .vps-features-section,
.vps-page-wrapper .vps-pricing-section {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-width: 0 !important;
  border-style: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* إزالة أي حد من الـ div التي تغلف الأقسام (motion.div) */
.vps-page-wrapper > div {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-width: 0 !important;
}
/* إخفاء أي hr أو خط فاصل داخل صفحة VPS */
.vps-page-wrapper hr {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}
/* إزالة أي حد أو خط من العناصر بين البطاقات والقسم التالي */
.vps-page-wrapper .vps-features-section::before,
.vps-page-wrapper .vps-features-section::after {
  display: none !important;
  content: none !important;
}
.vps-page-wrapper .vps-features-wrapper,
.vps-page-wrapper .vps-features-wrapper section {
  border: none !important;
  border-top: none !important;
  border-width: 0 !important;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  .card-hover {
    @apply hover:scale-105 transition duration-300 ease-in-out;
  }
}


/***************************************************
 * Generated by SVG Artista on 8/27/2025, 2:05:20 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.8s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.8s;
}

svg.active .svg-elem-1 {
  fill: rgb(255, 255, 255);
}

svg .svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.9s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.9s;
}

svg.active .svg-elem-2 {
  fill: rgb(200, 206, 222);
}

svg .svg-elem-3 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1s;
}

svg.active .svg-elem-3 {
  fill: rgb(9, 35, 70);
}

svg .svg-elem-4 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.1s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.1s;
}

svg.active .svg-elem-4 {
  fill: rgb(27, 105, 255);
}

svg .svg-elem-5 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.2000000000000002s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
  fill: rgb(27, 105, 255);
}

svg .svg-elem-6 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.3s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.3s;
}

svg.active .svg-elem-6 {
  fill: rgb(27, 105, 255);
}

svg .svg-elem-7 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.4000000000000001s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
  fill: rgb(27, 105, 255);
}

svg .svg-elem-8 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.5s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.5s;
}

svg.active .svg-elem-8 {
  fill: rgb(27, 105, 255);
}

svg .svg-elem-9 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.6s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.6s;
}

svg.active .svg-elem-9 {
  fill: rgb(82, 132, 216);
}

svg .svg-elem-10 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.7000000000000002s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
  fill: url("#paint0_linear_900_4639");
}

svg .svg-elem-11 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.8s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.8s;
}

svg.active .svg-elem-11 {
  fill: rgb(15, 5, 76);
}

svg .svg-elem-12 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.9000000000000001s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
  fill: url("#paint1_linear_900_4639");
}

svg .svg-elem-13 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2s;
}

svg.active .svg-elem-13 {
  fill: url("#paint2_linear_900_4639");
}

svg .svg-elem-14 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.1s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.1s;
}

svg.active .svg-elem-14 {
  fill: rgb(255, 255, 255);
}

svg .svg-elem-15 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.2s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.2s;
}

svg.active .svg-elem-15 {
  fill: url("#paint3_linear_900_4639");
}

svg .svg-elem-16 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.3s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.3s;
}

svg.active .svg-elem-16 {
  fill: url("#paint4_linear_900_4639");
}

svg .svg-elem-17 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.4000000000000004s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.4000000000000004s;
}

svg.active .svg-elem-17 {
  fill: rgb(132, 181, 234);
}

svg .svg-elem-18 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.5s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.5s;
}

svg.active .svg-elem-18 {
  fill: rgb(70, 136, 207);
}

svg .svg-elem-19 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.6s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.6s;
}

svg.active .svg-elem-19 {
  fill: rgb(117, 170, 226);
}

svg .svg-elem-20 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.7s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.7s;
}

svg.active .svg-elem-20 {
  fill: rgb(82, 132, 216);
}

svg .svg-elem-21 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.8s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.8s;
}

svg.active .svg-elem-21 {
  fill: url("#paint5_linear_900_4639");
}

svg .svg-elem-22 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.9000000000000004s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 2.9000000000000004s;
}

svg.active .svg-elem-22 {
  fill: rgb(15, 5, 76);
}

svg .svg-elem-23 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3s;
}

svg.active .svg-elem-23 {
  fill: url("#paint6_linear_900_4639");
}

svg .svg-elem-24 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.1000000000000005s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.1000000000000005s;
}

svg.active .svg-elem-24 {
  fill: url("#paint7_linear_900_4639");
}

svg .svg-elem-25 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.2s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.2s;
}

svg.active .svg-elem-25 {
  fill: rgb(255, 255, 255);
}

svg .svg-elem-26 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.3s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.3s;
}

svg.active .svg-elem-26 {
  fill: url("#paint8_linear_900_4639");
}

svg .svg-elem-27 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.4000000000000004s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.4000000000000004s;
}

svg.active .svg-elem-27 {
  fill: url("#paint9_linear_900_4639");
}

svg .svg-elem-28 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.5s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.5s;
}

svg.active .svg-elem-28 {
  fill: rgb(132, 181, 234);
}

svg .svg-elem-29 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.6000000000000005s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.6000000000000005s;
}

svg.active .svg-elem-29 {
  fill: rgb(70, 136, 207);
}

svg .svg-elem-30 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.7s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.7s;
}

svg.active .svg-elem-30 {
  fill: rgb(117, 170, 226);
}

svg .svg-elem-31 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.8s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.8s;
}

svg.active .svg-elem-31 {
  fill: url("#paint10_linear_900_4639");
}

svg .svg-elem-32 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.9000000000000004s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 3.9000000000000004s;
}

svg.active .svg-elem-32 {
  fill: rgb(242, 245, 252);
}

svg .svg-elem-33 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4s;
}

svg.active .svg-elem-33 {
  fill: rgb(108, 150, 255);
}

svg .svg-elem-34 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.1000000000000005s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.1000000000000005s;
}

svg.active .svg-elem-34 {
  fill: rgb(224, 227, 237);
}

svg .svg-elem-35 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.2s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.2s;
}

svg.active .svg-elem-35 {
  fill: url("#paint11_linear_900_4639");
}

svg .svg-elem-36 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.3s;
  transition: fill 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 4.3s;
}

svg.active .svg-elem-36 {
  fill: url("#pattern0_900_4639");
}




.svg-elem-4,
.svg-elem-5,
.svg-elem-6,
.svg-elem-7,
.svg-elem-8,
.svg-elem-9,
.svg-elem-10,
.svg-elem-11,
.svg-elem-12,
.svg-elem-13 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s linear forwards;
  /* Changed from 'infinite' to 'forwards' */
}

.svg-elem-5 {
  animation-delay: 0.2s;
}

.svg-elem-6 {
  animation-delay: 0.4s;
}

.svg-elem-7 {
  animation-delay: 0.6s;
}

.svg-elem-8 {
  animation-delay: 0.8s;
}

.svg-elem-9 {
  animation-delay: 1s;
}

.svg-elem-10 {
  animation-delay: 1.2s;
}

.svg-elem-11 {
  animation-delay: 1.4s;
}

.svg-elem-12 {
  animation-delay: 1.6s;
}

.svg-elem-13 {
  animation-delay: 1.8s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 
       @media (max-width: 800px){
    .svg-elem-4, .svg-elem-5, .svg-elem-6, .svg-elem-7, .svg-elem-8, .svg-elem-9, .svg-elem-10, .svg-elem-11, .svg-elem-12, .svg-elem-13, .svg-elem-14, .svg-elem-15, .svg-elem-16 {
        display: none !important;
    }
      } */


@keyframes float {
  0% {
    transform: translate(-0%, -0%) translateY(0);
  }

  50% {
    transform: translate(-0%, -0%) translateY(-10px);
  }

  100% {
    transform: translate(-0%, -0%) translateY(0);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* تأخير وتنوع للأنيميشن العائم - لا تحذف القديم */
.animate-float-delay-1 {
  animation-delay: 0.5s;
}
.animate-float-delay-2 {
  animation-delay: 1s;
}
.animate-float-slow {
  animation-duration: 4s;
}

@keyframes float-upright {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(0deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.hero-float-upright {
  animation: float-upright 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-float-upright-delay-1 {
  animation-delay: 0.5s;
}

.hero-float-upright-delay-2 {
  animation-delay: 1s;
}

/* أنيميشن في المكان - توهج/نبض بدون تغيير الموضع (لا يستخدم transform) */
@keyframes glow-pulse {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
  }
  50% {
    opacity: 0.92;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
  }
}

.animate-glow-pulse {
  animation: glow-pulse 2.5s ease-in-out infinite;
}

.animate-glow-pulse-delay-1 {
  animation: glow-pulse 2.5s ease-in-out infinite;
  animation-delay: 0.4s;
}

.animate-glow-pulse-delay-2 {
  animation: glow-pulse 2.5s ease-in-out infinite;
  animation-delay: 0.8s;
}

.animate-glow-pulse-slow {
  animation: glow-pulse 3.5s ease-in-out infinite;
}

/* أنيميشن الأيقونات/الشعارات - نبض خفيف (scale + opacity فقط، بدون تغيير الموضع) */
@keyframes icon-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.04);
  }
}

.animate-icon-pulse {
  animation: icon-pulse 2.8s ease-in-out infinite;
}

.animate-icon-pulse-delay-1 {
  animation: icon-pulse 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
}

.animate-icon-pulse-delay-2 {
  animation: icon-pulse 2.8s ease-in-out infinite;
  animation-delay: 0.8s;
}

.animate-icon-pulse-slow {
  animation-duration: 3.5s;
}

/* أنيميشن الخطوط (الشبكة) - توهج خفيف متكرر */
@keyframes line-glow {
  0%,
  100% {
    opacity: 0.92;
    filter: drop-shadow(0 0 2px rgba(27, 105, 255, 0.25));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(27, 105, 255, 0.5));
  }
}

/* أنيميشن الخطوط في الصفحة الرئيسية */
.hero svg path[stroke],
.hero svg line,
.hero svg polyline,
.hero svg path[stroke-width],
.hero svg g path[stroke],
.hero svg .network-path,
.hero svg .network-line {
  animation: line-glow 2.5s ease-in-out infinite;
}

/* تدفق على الخط - حركة stroke-dashoffset (اختياري للخطوط المرسومة) */
@keyframes line-flow {
  0% {
    stroke-dashoffset: 1200;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* أنيميشن خطوط سكشن الصفحة الرئيسية - تلميع يمر على الخط */
@keyframes section-line-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-section-line {
  background-size: 200% 100%;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 100%
  );
  animation: section-line-shimmer 3s ease-in-out infinite;
}

/* Fix for blog page - ensure full width and no white space */
#__next,
#__next > div {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Ensure blog page components extend full width */
[data-page="blog"] {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Fix Hero Text Alignment - Ensure center alignment for all languages */
.hero-text-container {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-text-container h1,
.hero-text-container h4,
.hero-text-container div,
.hero-text-container p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-text-container h1,
.hero-text-container h4 {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.hero-text-container h1 > span,
.hero-text-container h4 > span {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
}

.hero-text-container p {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure hero content container is centered */
.hero > div[style*="left: 50%"] {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
}

.hero > div[style*="left: 50%"] > div {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Shimmer Animation for Skeleton Loading */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.animate-shimmer {
  animation: shimmer 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Scale In Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scaleIn {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Slide In From Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInRight {
  animation: slideInRight 0.6s ease-out forwards;
}

/* Slide In From Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInLeft {
  animation: slideInLeft 0.6s ease-out forwards;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.animate-bounce-subtle {
  animation: bounce 2s ease-in-out infinite;
}

/* Stagger children animation delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }