/* Generated from app/globals.css by wordpress/tools/convert-css.cjs. Do not edit. */
@font-face {
  font-family: Halfre;
  src: url("/Fonts/Halfre.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: GCEpicPro;
  src: url("/Fonts/GC EPICPRO.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --primary: #0b1a30;
  --primary-light: #152a4a;
  --primary-dark: #061020;
  --secondary: #d4af37;
  --secondary-light: #fdfcf9;
  --secondary-dark: #b5922c;
  --accent: #e5c158;
  --text-black: #0c1524;
  --text-gray: #4b586e;
  --light-bg: #f4f7fa;
  --white: #fff;
  --border-color: #0b1a3014;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 9999px;
  --transition-speed: .3s;
  --shadow-sm: 0 4px 10px #0b1a3008;
  --shadow-md: 0 10px 25px #0b1a300f, 0 4px 12px #ff6b0005;
  --shadow-lg: 0 20px 45px #0b1a3017, 0 8px 20px #ff6b000a;
  --shadow-xl: 0 30px 60px #0b1a3026, 0 12px 30px #ff6b000f;
  --font-body: var(--font-metropolis, sans-serif), sans-serif;
  --font-heading: var(--font-metropolis, sans-serif), sans-serif;
}

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

html, body {
  font-family: var(--font-metropolis, sans-serif), var(--font-myriad, sans-serif), sans-serif;
  color: var(--text-black);
  background-color: var(--light-bg);
  scroll-behavior: smooth;
  max-width: 100vw;
  line-height: 1.6;
  overflow-x: hidden;
}

[dir="rtl"] body {
  font-family: var(--font-cairo), sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-metropolis, sans-serif), sans-serif;
  font-weight: 600;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--font-cairo), sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

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

[dir="rtl"] .controlBtn svg {
  transform: none;
}

section {
  width: 100%;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}