@font-face {
  font-family: "LeagueGothic";
  src:
    url("/fonts/league-gothic/static/LeagueGothic-Regular.woff2")
    format("woff2"),
    url("/fonts/league-gothic/static/LeagueGothic-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Prompt";
  src:
    url("/fonts/prompt/Prompt-Medium.woff2") format("woff2"),
    url("/fonts/prompt/Prompt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Lato";
  src:
    url("/fonts/lato/Lato-Regular.woff2") format("woff2"),
    url("/fonts/lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Hind";
  src:
    url("/fonts/hind/Hind-Regular.woff2") format("woff2"),
    url("/fonts/hind/Hind-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

:root {
  --font-primary: "LeagueGothic", "Arial Black", "Arial", sans-serif;
  --font-secondary: "Prompt", "Segoe UI", "Roboto", sans-serif;
  --font-base: "Lato", "Helvetica Neue", "Helvetica", sans-serif;
  --font-ui: "Hind", "Segoe UI", "Roboto", sans-serif;

  --sz-xxs: 0.75rem;
  --sz-xs: 0.875rem;
  --sz-sm: 1rem;
  --sz-md: 1.125rem;
  --sz-lg: 1.25rem;

  --sz-xl: clamp(1.5rem, 4vw + 1rem, 2rem);
  --sz-xxl: clamp(2rem, 5vw + 1rem, 3rem);
  --sz-3xl: clamp(2.5rem, 6vw + 1rem, 4rem);

  --line-height: 1.5;

  --position-up: translateY(-100%);
  --position-down: translateY(100%);
  --position-left: translateX(-100%);
  --position-right: translateX(100%);
  --position-center: translate(0, 0);
  --position-y-neutral: translateY(0);
  --position-x-neutral: translateX(0);

  --z-body: 0;
  --z-main: 30;
  --z-div: 100;
  --z-aside: 150;
  --z-header: 200;
  --z-nav: 300;
  --z-modal: 500;
  --z-toast: 800;
  --z-top: 999;
  --z-max: 1000;

  --font-display: swap;
  --font-feature-settings: "kern" 1, "liga" 1;
  --font-variant-ligatures: common-ligatures;
  --font-optical-sizing: auto;

  --sp-xxs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;

  --sp-lg: clamp(2rem, 4vw + 1rem, 3rem);
  --sp-xl: clamp(3rem, 6vw + 1rem, 5rem);
  --sp-xxl: clamp(4rem, 8vw + 1rem, 8rem);

  --duration-fast: 0.1s;
  --duration-base: 0.2s;
  --duration-smooth: 0.3s;
  --duration-slow: 0.5s;

  --will-change: auto;
  --transform-style: preserve-3d;
  --backface-visibility: hidden;
  --perspective: 1000px;

  --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-ease: ease-in-out;
  --ease-linear: linear;

  --transition-ease: ease-in-out;
  --transition-linear: linear;

  --transition-fast: var(--duration-fast) var(--ease-base);
  --transition-base: var(--duration-base) var(--ease-base);
  --transition-smooth: var(--duration-smooth) var(--ease-smooth);
  --transition-slow: var(--duration-slow) var(--ease-base);

  --offset-50: 50%;
  --offset-100: 100%;
  --offset--50: -50%;
  --offset-1rem: 1rem;
  --offset-10px: 10px;

  --transform-scale: scale(1);
  --transform-scale-up: scale(1.1);
  --transform-scale-down: scale(0.9);
  --transform-translate: translate(0, 0);
  --transform-rotate: rotate(0deg);

  --deg-horizontal: 0deg;
  --deg-vertical: 90deg;
  --deg-diagonal: 135deg;

  --invisible: transparent;

  --nav-height: 3.5rem;
  --footer-height: auto;
  --sidebar-width: 320px;
  --sidebar-width-collapsed: 60px;
  --nav-padding-x: 1rem;
  --burger-size: 2.5rem;

  --gradient-1: linear-gradient(
    var(--deg-diagonal),
    var(--b-7) 0%,
    var(--d-7) 100%
  );
  --radial-bg-header: radial-gradient(
    ellipse at bottom,
    var(--bg) 0%,
    var(--bg-1) 100%
  );

  --orb-1: radial-gradient(circle, var(--a-2) 0%, transparent 70%);
  --orb-2: radial-gradient(circle, var(--b-2) 0%, transparent 70%);
  --orb-3: radial-gradient(circle, var(--c-3) 0%, transparent 70%);
  --orb-4: radial-gradient(circle, var(--d-3) 0%, transparent 70%);

  --orb-rainbow: radial-gradient(
    circle,
    var(--a-2) 0%,
    var(--b-2) 25%,
    var(--c-2) 50%,
    var(--d-2) 75%,
    transparent 100%
  );
  --orb-sunset: radial-gradient(
    circle,
    var(--b-2) 0%,
    var(--c-2) 50%,
    var(--d-2) 100%
  );
  --orb-ocean: radial-gradient(circle, var(--a-2) 0%, var(--b-2) 100%);
  --orb-forest: radial-gradient(circle, var(--c-2) 0%, var(--a-2) 100%);

  --gradient-secondary: linear-gradient(
    var(--deg-horizontal),
    var(--a-6) 0%,
    var(--c-6) 100%
  );
  --gradient-accent: linear-gradient(
    var(--deg-vertical),
    var(--c-6) 0%,
    var(--d-6) 100%
  );
  --gradient-rainbow: linear-gradient(
    var(--deg-diagonal),
    var(--b-7) 0%,
    var(--d-7) 50%,
    var(--c-7) 100%
  );

  --gradient-bg-main: linear-gradient(
    var(--deg-diagonal),
    var(--bg) 0%,
    var(--bg-1) 50%,
    var(--bg-2) 100%
  );
  --gradient-bg-card: linear-gradient(
    var(--deg-horizontal),
    var(--bg-1) 0%,
    var(--bg-2) 100%
  );
  --gradient-bg-header: linear-gradient(
    var(--deg-vertical),
    var(--bg) 0%,
    var(--bg-1) 100%
  );

  --gradient-text-primary: linear-gradient(
    var(--deg-diagonal),
    var(--text) 0%,
    var(--text-1) 100%
  );
  --gradient-text-accent: linear-gradient(
    var(--deg-horizontal),
    var(--a-6) 0%,
    var(--b-6) 100%
  );
  --gradient-text-rainbow: linear-gradient(
    var(--deg-diagonal),
    var(--a-6) 0%,
    var(--b-6) 25%,
    var(--c-6) 50%,
    var(--d-6) 75%,
    var(--a-6) 100%
  );

  --gradient-alt: linear-gradient(
    var(--deg-diagonal),
    var(--a-5) 0%,
    var(--a-6) 100%
  );

  --cookie-banner-bg: linear-gradient(
    135deg,
    var(--bg) 0%,
    var(--bg-1) 50%,
    var(--bg-2) 100%
  );
  --cookie-banner-button-primary-active-bg: linear-gradient(
    135deg,
    var(--a-6) 0%,
    var(--a-7) 100%
  );
  --cookie-banner-button-secondary-bg: linear-gradient(
    135deg,
    var(--bg-1) 0%,
    var(--bg-2) 100%
  );
  --cookie-banner-button-secondary-hover-bg: linear-gradient(
    135deg,
    var(--bg) 0%,
    var(--bg-1) 100%
  );
  --cookie-banner-button-secondary-active-bg: linear-gradient(
    135deg,
    var(--bg-2) 0%,
    var(--bg-1) 100%
  );
  --cookie-banner-progress-fill: linear-gradient(
    90deg,
    var(--a-6) 0%,
    var(--a-7) 100%
  );

  --body-bg:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      var(--a-0) 2px,
      var(--a-0) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      var(--a-0) 2px,
      var(--a-0) 3px
    ), radial-gradient(ellipse at center, var(--a-1) 0%, transparent 70%),
    var(--gradient-bg-main);

  --bgOne:
    repeating-linear-gradient(
      257deg,
      var(--bg-2) 0px,
      transparent 2px,
      var(--bg-2) 5px,
      transparent 9px,
      var(--bg-2) 12px
    ),
    repeating-linear-gradient(
      152deg,
      var(--bg-2) 0px,
      transparent 2px,
      var(--bg-2) 5px,
      transparent 9px,
      var(--bg-2) 12px
    ),
    repeating-linear-gradient(
      222deg,
      var(--bg-2) 0px,
      transparent 2px,
      var(--bg-2) 5px,
      transparent 9px,
      var(--bg-2) 12px
    ), linear-gradient(90deg, var(--bg-1), var(--bg-2));

  --shadow-sm: 0 1px 3px 0 var(--a-1);
  --shadow-md: 0 4px 6px -1px var(--a-1);

  --cookie-banner-shadow: 0 -8px 32px var(--a-1), 0 -4px 16px var(--a-0);
  --cookie-banner-button-primary-shadow: 0 4px 12px var(--a-3);
  --cookie-banner-button-primary-hover-shadow: 0 6px 20px var(--a-5);

  --testimonial-card-shadow-hover: 0 8px 24px var(--a-2);
  --services-card-shadow: 0 8px 25px var(--a-1);
  --services-card-hover-shadow: 0 15px 35px var(--a-2);
  --work-card-hover-shadow: 0 15px 35px var(--a-2);
  --testimonials-card-hover-shadow: 0 15px 35px var(--a-2);
  --reviews-card-hover-shadow: 0 15px 35px var(--a-2);

  --hero-text-container-shadow: 0 20px 40px var(--a-1);
  --hero-cta-primary-shadow: 0 8px 25px var(--a-3);
  --hero-cta-primary-hover-shadow: 0 15px 35px var(--a-5);
  --hero-cta-secondary-shadow: 0 4px 15px var(--a-2);
  --hero-cta-secondary-hover-shadow: 0 15px 35px var(--a-3);

  --contact-section-shadow: 0 10px 30px var(--a-1);
  --contact-form-shadow: 0 8px 25px var(--a-2);
  --faq-item-shadow: 0 4px 15px var(--a-1);
  --faq-item-hover-shadow: 0 8px 25px var(--a-2);
}

:root.theme-dark {
  --text: #ffffff;
  --text-1: #e0e0e0;
  --text-2: #bbbbbb;

  --bg: #000000;
  --bg-1: #333333;
  --bg-2: #666666;

  --a-0: #00c6ff05;
  --a-1: #00c6ff1a;
  --a-2: #00c6ff33;
  --a-3: #00c6ff4d;
  --a-5: #00c6ff80;
  --a-6: #00c6ff;
  --a-7: #00aeef;

  --b-0: #00ffff05;
  --b-1: #00ffff1a;
  --b-2: #00ffff33;
  --b-3: #00ffff4d;
  --b-5: #00ffff80;
  --b-6: #00eaff;
  --b-7: #00ffff;

  --c-0: #00ff6405;
  --c-1: #00ff641a;
  --c-2: #00ff6433;
  --c-3: #00ff644d;
  --c-5: #00ff6480;
  --c-6: #00e64a;
  --c-7: #00ff64;

  --d-0: #ff00ff05;
  --d-1: #ff00ff1a;
  --d-2: #ff00ff33;
  --d-3: #ff00ff4d;
  --d-5: #ff00ff80;
  --d-6: #e600e6;
  --d-7: #ff00ff;

  --success: #1db954;
  --error: #ff4c4c;
  --warning: #ffb74d;
  --info: #29b6f6;
  --gold: #fbbf24;
  --gold-glow: #ffd70080;
}

:root.theme-light {
  --text: #000;
  --text-1: #333333;
  --text-2: #555555;

  --bg: #fff;
  --bg-1: #e0e0e0;
  --bg-2: #bbbbbb;

  --a-0: #007acd05;
  --a-1: #007acd1a;
  --a-2: #007acd33;
  --a-3: #007acd4d;
  --a-5: #007acd80;
  --a-6: #007acd;
  --a-7: #00aaef;

  --b-0: #f3923d05;
  --b-1: #f3923d1a;
  --b-2: #f3923d33;
  --b-3: #f3923d4d;
  --b-5: #f3923d80;
  --b-6: #ff8c42;
  --b-7: #f3923d;

  --c-0: #ffd70005;
  --c-1: #ffd7001a;
  --c-2: #ffd70033;
  --c-3: #ffd7004d;
  --c-5: #ffd70080;
  --c-6: #ffed4e;
  --c-7: #ffd700;

  --d-0: #cd853f05;
  --d-1: #cd853f1a;
  --d-2: #cd853f33;
  --d-3: #cd853f4d;
  --d-5: #cd853f80;
  --d-6: #daa520;
  --d-7: #cd853f;

  --success: #28a745;
  --error: #dc3545;
  --warning: #ffc107;
  --info: #17a2b8;
  --gold: #ffd700;
  --gold-glow: #ffc10766;
}

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

html {
  font-display: swap;
  font-feature-settings:
    "kern" 1,
    "liga" 1;
  font-variant-ligatures: common-ligatures;
  font-optical-sizing: auto;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: var(--line-height);
  font-family: var(--font-base);
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizelegibility;
}

html.theme-light,
html.theme-dark {
  visibility: visible;
}

html:not(.theme-light):not(.theme-dark) {
  visibility: hidden;
}

body {
  z-index: var(--z-body);
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: var(--sz-sm);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    var(--transition-base);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: 0;
  outline: none;
  background: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

textarea {
  resize: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

button + button,
input + input,
a + a {
  margin-left: 8px;
}

.svgInfo {
  fill: var(--txt);
  stroke: var(--txt);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

header {
  position: sticky;
  background-image: var(--gradient-bg-main);
  border-bottom: 1px solid var(--text);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-md) var(--sp-lg);
  top: 0;
}

main {
  background: transparent;
  margin: 0 auto;
  z-index: var(--z-main);
  min-height: 100vh;
  overflow-x: hidden;
}

footer {
  background-image: var(--gradient-bg-main);
  padding: var(--sp-lg) var(--sp-sm);
  margin-top: auto;
}

.leaflet-control {
  display: none;
}

.leaflet-pane,
.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
  stroke: none;
}

@media (prefers-contrast: high) {
  :root {
    --text: #000000;
    --text-1: #000000;
    --text-2: #000000;
    --bg: #ffffff;
    --bg-1: #ffffff;
    --bg-2: #ffffff;

    --a-6: #0000ff;
    --a-7: #0000cc;
    --b-6: #ff6600;
    --b-7: #cc5500;
    --c-6: #ffaa00;
    --c-7: #cc8800;
    --d-6: #ff00ff;
    --d-7: #cc00cc;

    --success: #008000;
    --error: #ff0000;
    --warning: #ffaa00;
    --info: #0080ff;
  }

  .theme-dark {
    --text: #ffffff;
    --text-1: #ffffff;
    --text-2: #ffffff;
    --bg: #000000;
    --bg-1: #000000;
    --bg-2: #000000;

    --a-6: #00aaff;
    --a-7: #0088cc;
    --b-6: #ffaa00;
    --b-7: #cc8800;
    --c-6: #ffff00;
    --c-7: #cccc00;
    --d-6: #ff00ff;
    --d-7: #cc00cc;

    --success: #00ff00;
    --error: #ff0000;
    --warning: #ffff00;
    --info: #00aaff;
  }

  * {
    border-color: currentColor;
  }
}