@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Cairo', sans-serif;
}

a {
  text-decoration: none;
}

h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  margin-bottom: 1.2rem;
}

.bold {
  font-weight: bold;
}

/* =========================================================
   EECL base refresh
   ========================================================= */

:root {
  --eecl-blue: #003272;
  --eecl-blue-light: #0077c8;
  --eecl-ink: #1f2937;
  --eecl-muted: #4b5563;
  --eecl-bg: #f3f7fb;
}

html {
  scroll-padding-top: 96px;
}

body {
  color: var(--eecl-ink);
  background: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button,
a,
input,
textarea {
  font: inherit;
}

::selection {
  background: rgba(0, 50, 114, 0.18);
}

/* Smooth page transitions */
html.js body {
  opacity: 0;
  transition: opacity 180ms ease-in-out;
}

html.js body.page-loaded {
  opacity: 1;
}

html.js body.page-leaving {
  opacity: 0;
}

/* Subtle page entry only */
.page-content {
  animation: pageContentIn 140ms ease-out both;
  will-change: opacity, transform;
}

@keyframes pageContentIn {
  from {
    opacity: 0.97;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prevent page width jolts when moving between pages */
html {
  scrollbar-gutter: stable;
}

/* Fallback for older browsers */
body {
  overflow-y: scroll;
}