/* Google Fonts Request */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  /* Colors */
  --color-primary: #4B367C;
  --color-primary-dark: #37265d;
  --color-accent: #7B61FF;
  --color-accent-hover: #6a52e3;
  --color-bg: #F9F9F9;
  --color-white: #FFFFFF;
  --color-text-main: #1F2937;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 5rem;

  /* Typography */
  --font-ar: 'Tajawal', sans-serif;
  --font-en: 'Poppins', sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-purple: 0 10px 25px -5px rgba(75, 54, 124, 0.15), 0 8px 10px -6px rgba(75, 54, 124, 0.1);

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Bi-directional support */
html[lang="ar"] body {
  font-family: var(--font-ar);
  direction: rtl;
  text-align: right;
}

html[lang="en"] body {
  font-family: var(--font-en);
  direction: ltr;
  text-align: left;
}

/* Utilities */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.grid {
  display: grid;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.hidden {
  display: none !important;
}

/* Responsive Grid */
.md\:grid-cols-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:flex {
    display: flex !important;
  }

  .md\:hidden {
    display: none !important;
  }

  .desktop-nav.hidden {
    display: none;
    /* Keep hidden if explicitly hidden, but usually overriden by md:flex */
  }
}

/* Components */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  font-family: inherit;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-purple);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-accent:hover {
  background-color: var(--color-accent-hover);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Typography Helpers */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

h1 {
  font-size: 2.5rem;
  font-weight: 800;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

html[lang="ar"] h1,
html[lang="ar"] h2 {
  font-family: var(--font-ar);
}

p {
  margin-bottom: var(--spacing-sm);
}

/* Section Padding */
section {
  padding: var(--spacing-xl) 0;
}

/* Glassmorphism Card */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

/* Mobile Menu Active State */
.mobile-active {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.mobile-active a {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.mobile-active a:last-child {
  border-bottom: none;
}
 / *   T e s t i m o n i a l s   S c r o l l   S n a p   * / 
 . t e s t i m o n i a l s - s c r o l l   { 
         d i s p l a y :   f l e x ; 
         o v e r f l o w - x :   a u t o ; 
         s c r o l l - s n a p - t y p e :   x   m a n d a t o r y ; 
         g a p :   v a r ( - - s p a c i n g - m d ) ; 
         p a d d i n g - b o t t o m :   1 r e m ; 
         - m s - o v e r f l o w - s t y l e :   n o n e ;   / *   I E   a n d   E d g e   * / 
         s c r o l l b a r - w i d t h :   n o n e ;   / *   F i r e f o x   * / 
 } 
 . t e s t i m o n i a l s - s c r o l l : : - w e b k i t - s c r o l l b a r   { 
         d i s p l a y :   n o n e ; 
 } 
 . t e s t i m o n i a l - c a r d   { 
         f l e x :   0   0   8 5 % ; 
         s c r o l l - s n a p - a l i g n :   c e n t e r ; 
         m i n - w i d t h :   3 0 0 p x ; 
 } 
 @ m e d i a   ( m i n - w i d t h :   7 6 8 p x )   { 
         . t e s t i m o n i a l - c a r d   { 
                 f l e x :   0   0   4 5 % ; 
         } 
 } 
 / *   A d v a n c e d   C S S   M o c k u p s   * / 
 . m o c k u p - b r o w s e r   { 
         b a c k g r o u n d :   # f f f ; 
         b o r d e r - r a d i u s :   v a r ( - - r a d i u s - m d ) ; 
         b o x - s h a d o w :   0   4 p x   6 p x   - 1 p x   r g b a ( 0 ,   0 ,   0 ,   0 . 1 ) ; 
         o v e r f l o w :   h i d d e n ; 
         h e i g h t :   1 0 0 % ; 
         d i s p l a y :   f l e x ; 
         f l e x - d i r e c t i o n :   c o l u m n ; 
         b o r d e r :   1 p x   s o l i d   v a r ( - - c o l o r - b o r d e r ) ; 
 } 
 
 . m o c k u p - h e a d e r   { 
         b a c k g r o u n d :   # f 3 f 4 f 6 ; 
         p a d d i n g :   0 . 5 r e m ; 
         d i s p l a y :   f l e x ; 
         g a p :   0 . 2 5 r e m ; 
         b o r d e r - b o t t o m :   1 p x   s o l i d   v a r ( - - c o l o r - b o r d e r ) ; 
 } 
 
 . m o c k u p - d o t   { 
         w i d t h :   0 . 5 r e m ; 
         h e i g h t :   0 . 5 r e m ; 
         b o r d e r - r a d i u s :   5 0 % ; 
 } 
 
 . m o c k u p - b o d y   { 
         f l e x :   1 ; 
         b a c k g r o u n d :   # f 9 f a f b ; 
         d i s p l a y :   f l e x ; 
         a l i g n - i t e m s :   c e n t e r ; 
         j u s t i f y - c o n t e n t :   c e n t e r ; 
         p a d d i n g :   1 r e m ; 
         p o s i t i o n :   r e l a t i v e ; 
         m i n - h e i g h t :   2 0 0 p x ; 
 } 
 
 / *   S a l l a   M o c k u p   S p e c i f i c s   * / 
 . s a l l a - m o c k u p   . m o c k u p - b o d y   { 
         b a c k g r o u n d :   # E 0 F 2 F 1 ;   / *   S o f t   T e a l   * / 
 } 
 . s a l l a - u i   { 
         w i d t h :   8 0 % ; 
         b a c k g r o u n d :   w h i t e ; 
         b o r d e r - r a d i u s :   4 p x ; 
         p a d d i n g :   1 0 p x ; 
         b o x - s h a d o w :   v a r ( - - s h a d o w - s m ) ; 
 } 
 . s a l l a - r o w   { 
         h e i g h t :   8 p x ; 
         b a c k g r o u n d :   # e e e ; 
         m a r g i n - b o t t o m :   5 p x ; 
         b o r d e r - r a d i u s :   2 p x ; 
 } 
 
 / *   H a r a j   M o c k u p   S p e c i f i c s   * / 
 . h a r a j - m o c k u p   . m o c k u p - b o d y   { 
         b a c k g r o u n d :   # E 3 F 2 F D ;   / *   S o f t   B l u e   * / 
 } 
 . h a r a j - u i   { 
         w i d t h :   9 0 % ; 
 } 
 . h a r a j - c a r d - m i n i   { 
         b a c k g r o u n d :   w h i t e ; 
         b o r d e r - r a d i u s :   4 p x ; 
         p a d d i n g :   8 p x ; 
         m a r g i n - b o t t o m :   8 p x ; 
         d i s p l a y :   f l e x ; 
         g a p :   8 p x ; 
 } 
 
 / *   A u t o m a t i o n   M o c k u p   * / 
 . a u t o - m o c k u p   . m o c k u p - b o d y   { 
         b a c k g r o u n d :   # 2 D 3 7 4 8 ;   / *   D a r k   m o d e   t e r m i n a l   * / 
 } 
 . t e r m i n a l - t e x t   { 
         f o n t - f a m i l y :   ' C o u r i e r   N e w ' ,   m o n o s p a c e ; 
         c o l o r :   # 4 8 B B 7 8 ; 
         f o n t - s i z e :   0 . 8 r e m ; 
         t e x t - a l i g n :   l e f t ; 
         w i d t h :   1 0 0 % ; 
 }  
 