/* -------------------------------------------------- */
/* ⭕️ Reset */
/* -------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  /* border: 1px solid red; */
}

* {
  margin: 0;
  padding: 0;
}

:where(
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section
) {
  display: block;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

:where(ul, ol) {
  padding: 0;
  margin: 0;
}
:where(ul) {
  list-style: none;
}
:where(ol) {
  list-style-position: inside;
}

:where(img, picture, video, canvas, svg) {
  display: block;
  max-width: 100%;
}
:where(figure) {
  background-color: none;
}

:where(button) {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}

:where(input, button, select, textarea) {
  font: inherit;
  margin: 0;
  line-height: inherit;
}

/* -------------------------------------------------- */
/* 🆎 Fonts */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/* 🌴 Root Variables */
/* -------------------------------------------------- */

:root {
  /* 🩸 Color */

  --color-primary: var(--color-blue-800);
  --color-secondary: var(--color-white);
  --color-accents: var(--color-red-700);

  --color-text: var(--color-primary);
  --color-text-invert: var(--color-secondary);
  --color-background-body: var(--color-secondary);

  /* ⚫ Neutral */
  --color-black: #000;
  --color-white: #fff;

  --color-blue: #013263;

  --color-blue-30: #f5faff;
  --color-blue-40: #ebf5ff;
  --color-blue-50: #e1f0ff;
  --color-blue-100: #c7e3fe;
  --color-blue-200: #8bc4fe;
  --color-blue-300: #53a8fd;
  --color-blue-400: #178afd;
  --color-blue-500: #026ed9;
  --color-blue-600: #024f9d;
  --color-blue-700: rgb(1, 50, 99); /* full blue */
  --color-blue-800: #012142;
  --color-blue-900: #001223;
  --color-blue-950: #00080f;

  --color-red: #b61b20;

  --color-red-50: #fcedee;
  --color-red-100: #fadbdc;
  --color-red-200: #f4b3b6;
  --color-red-300: #ef9093;
  --color-red-400: #e9686c;
  --color-red-500: #e3444a;
  --color-red-600: #da2026;
  --color-red-700: rgb(182, 27, 32); /* full red */
  --color-red-800: #781215;
  --color-red-900: #3e090b;
  --color-red-950: #1f0505;

  --color-grey-50: #e6e6e6;
  --color-grey-100: #d9d9d9;
  --color-grey-200: #bfbfbf;
  --color-grey-300: #a6a6a6;
  --color-grey-400: #8c8c8c;
  --color-grey-500: #737373;
  --color-grey-600: #595959;
  --color-grey-700: #404040;
  --color-grey-800: #262626;
  --color-grey-900: #0d0d0d;
  --color-grey-950: #000000;

  /* 📄 Fonts */
  --font-family-sans: "Inter", serif;
  --font-family-mono:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --font-family-heading: "Anton", serif;
  --font-size: var(--fs-6);

  --fs-small: 0.9375rem;

  /* Perfect Fourth - Type scale */
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.333,1250,18,1.333,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  /* Step -1: 12.003px → 13.5034px */
  --fs--1: clamp(0.7502rem, 0.7179rem + 0.1613vw, 0.844rem);
  /* Step 0: 16px → 18px */
  --fs-6: clamp(1rem, 0.957rem + 0.2151vw, 1.125rem);
  /* Step 1: 21.328px → 23.994px */
  --fs-5: clamp(1.333rem, 1.2757rem + 0.2867vw, 1.4996rem);
  /* Step 2: 28.4302px → 31.984px */
  --fs-4: clamp(1.7769rem, 1.7005rem + 0.3821vw, 1.999rem);
  /* Step 3: 37.8975px → 42.6347px */
  --fs-3: clamp(2.3686rem, 2.2667rem + 0.5094vw, 2.6647rem);
  /* Step 4: 50.5174px → 56.832px */
  --fs-2: clamp(3.1573rem, 3.0215rem + 0.679vw, 3.552rem);
  /* Step 5: 67.3396px → 75.7571px */
  --fs-1: clamp(4.2087rem, 4.0277rem + 0.9051vw, 4.7348rem);

  /* Step 6: 89.7637px → 100.9842px */
  --fs-0: clamp(4.0625rem, 3.267rem + 3.9773vw, 6.25rem);

  /* Navigation 1: 19.2px → 21.6px */
  --fs-navigation: clamp(1.2rem, 1.1484rem + 0.2581vw, 1.35rem);

  --line-height-1: 1;
  --line-height-15: 1.5;
  --line-height-175: 1.75;
  --line-height-2: 2;

  --transition: all 0.3s ease;

  /* 📏 Sizes */
  /* Clamp 🔩 is based on minimum viewport of 400px and maximum 1280  */

  --spacing-1: calc(1rem * 0.25); /* 4px */
  --spacing-2: calc(1rem * 0.5); /* 8px */
  --spacing-3: calc(1rem * 0.75); /* 12px */
  --spacing-4: calc(1rem * 1); /* 16px */
  --spacing-5: calc(1rem * 1.5); /* 24px */
  --spacing-6: calc(1rem * 2); /* 32px */
  --spacing-7: calc(1rem * 3); /* 48px */
  --spacing-8: calc(1rem * 4); /* 64px */
  --spacing-9: calc(1rem * 6); /* 96px */
  --spacing-10: calc(1rem * 8); /* 128px */
  --spacing-11: calc(1rem * 12); /* 192px */
  --spacing-12: calc(1rem * 16); /* 256px */
  --spacing-13: calc(1rem * 24); /* 384px */
  --spacing-14: calc(1rem * 32); /* 512px */
  --spacing-15: calc(1rem * 40); /* 640px */
  --spacing-16: calc(1rem * 48); /* 768px */

  --spacing: var(--spacing-3);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-xxl: var(--spacing-9);
  --spacing-xxxl: var(--spacing-10);

  --padding: 1.5rem;

  --border-radius: 0.5rem;
  --border-radius-25: 25%;

  --header-heigth: 110px;
}

.color-red {
  color: var(--color-red);
}
.bg-blue {
  background-color: blue;
}

.bored-red {
  border: 3px solid red !important;
}
.bg-red {
  background-color: red;
}
.gap {
  gap: 1rem;
}

/* miloskol/dreamform-conditional-fields/assets/css/conditional-fields.css */
.conditional-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.3s ease-in-out,
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.conditional-visible {
  opacity: 1;
  max-height: 70px; /* Matches your field’s height */
  transition:
    opacity 0.3s ease-in-out,
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------- */
/* 💻 Base Styles */
/* -------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-background-body);
  font-size: var(--font-size);
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-display: fallback;
  color: var(--color-text);
}

.fade-in {
  opacity: 0;
  transition: opacity 2s ease;
}
.fade-in.appear {
  opacity: 1;
}

/* -------------------------------------------------- */
/* 🔠 Typography & common elements */
/* -------------------------------------------------- */

a {
  transition: var(--transition);
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.05rem;
  text-underline-offset: 0.2rem;
  text-decoration-color: currentColor;
}
a.btn,
.btn .a,
a.btn:hover,
.btn .a:hover {
  text-decoration: none;
}

:where(p) {
  text-wrap: pretty;
  max-width: 70ch;
  line-height: var(--line-height-15);
}

:where(p:not(:last-of-type)) {
  margin-block-end: 1rem;
}

strong,
b {
  font-weight: 600;
}

.title {
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  color: var(--color-red-700);
  font-weight: 700;
}

.title::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-accents);
  margin-right: 1rem;
  border-radius: 50%;
}
p {
  font-size: 1em;
  max-width: 75ch;
}

.balance {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}

.ch-width {
  width: 20ch;
}

.ch-width-35 {
  max-width: 35ch;
}

h1,
h2 {
  text-wrap: balance;
  text-transform: uppercase;
  font-family: var(--font-family-heading);
}

.fs-base {
  font-size: var(--font-size-base);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.fs-0 {
  font-size: var(--fs-0);
  line-height: 1;
  font-weight: 600;
  font-family: var(--font-family-heading);
  /* letter-spacing: 2px; */
}

.fs-1,
.h1 {
  font-size: var(--fs-1);
  line-height: 1;
  font-family: var(--font-family-heading);
}

.fs-2,
.h2 {
  font-size: var(--fs-2);
  line-height: 1.15;
}

.fs-3,
.h3 {
  font-size: var(--fs-3);
  line-height: 1.15;
}

.fs-4,
.h4 {
  font-size: var(--fs-4);
  line-height: 1.15;
}

.fs-5,
.h5 {
  font-size: var(--fs-5);
  line-height: 1.5;
}

.fs-6,
.h5 {
  font-size: var(--fs-6);
  line-height: 1.5;
}

.fs-large {
  font-size: 1.25rem;
  line-height: 1.55;
}
small,
.text-small,
.small,
.fs-small {
  font-size: var(--fs-small);
  line-height: 1.33;
  letter-spacing: 0.01em;
}

.fs-tiny {
  font-size: 0.8125rem;
  line-height: 1.33;
  letter-spacing: 0.01em;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  font-weight: inherit;
  /* margin-bottom: 0.5rem; */
}

.heading-style {
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.base-style {
  font-family: var(--font-family-sans);
  text-transform: none;
  letter-spacing: 0px;
}

.text-normal {
  text-transform: none;
}

.text-alert {
  color: var(--color-red);
}

.text-warning {
  color: var(--color-yellow-700);
}

.text-success {
  color: var(--color-green);
}

.text-underline {
  display: inline-block;
  background-image: linear-gradient(
    to bottom,
    transparent 50%,
    var(--color-yellow-300) 50%
  );
  background-size: 100% 6px;
  background-position: 0 80%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

.fw-light {
  font-weight: 300;
}

.fw-bold {
  font-weight: 700;
}

.fw-semibold {
  font-weight: 600;
}

.text-center {
  text-align: center;
}

.lh-1 {
  line-height: 1;
}

.lh-sm {
  line-height: 1.25;
}

.lh-base {
  line-height: 1.5;
}

.lh-lg {
  line-height: 2;
}

/* 🔠 Colors */
/* The bg and text primary, secondary and accent colours are also used in the layout field */
.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-accents {
  background-color: var(--color-accents);
}
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-accents {
  color: var(--color-accents);
}

/* Above classes are used in layout field */

.text-center {
  text-align: center;
}

/* 🔠 Font Weights */
.fw-100 {
  font-weight: 100;
}
.fw-200 {
  font-weight: 300;
}
.fw-light,
.fw-300 {
  font-weight: 300;
}
.fw-normal,
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-semibold,
.fw-600 {
  font-weight: 600;
}
.fw-bold,
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
.fw-900 {
  font-weight: 900;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--color-primary);
  margin-block: 1rem;
}

.hr--secondary {
  border-top: 1px solid var(--color-grey-300);
}

.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
}

.img img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption {
  padding-top: 0.75rem;
  line-height: 1.5em;
  font-size: small;
}

/* 🔠 Font Weights */

/* -------------------------------------------------- */
/* 📰 Layout & grid */
/* -------------------------------------------------- */

.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-inline: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    max-width: calc(768px * 0.95);
  }
}
@media (min-width: 992px) {
  .container {
    max-width: calc(992px * 0.95);
    padding-inline: 0rem;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: calc(1200px * 0.95);
  }
}
@media (min-width: 1300px) {
  .container {
    max-width: calc(1300px * 0.95);
  }
}

.d-flex {
  display: flex;
  /* Sets a gap of 1rem unless a --gap is defined */
  gap: var(--gap, 1rem);
}

/* used in forms */
.justify-content-flex-end {
  justify-content: flex-end;
}

.justify-content-space-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.d-none {
  display: none;
}

/* -------------------------------------------------- */
/* ⚙️ Utilities */
/* -------------------------------------------------- */

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

/* -------------------------------------------------- */
/* ⚙️ Buttons */
/* -------------------------------------------------- */
.button-group {
  gap: 1rem;
}
.btn {
  transition: var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.link {
  display: flex;
  gap: 0.5rem;
}

.link svg {
  width: 14px;
  height: 14px;
}

.btn svg {
  width: 19px;
  height: 19px;
  stroke: var(--color-white);
}

.btn--primary {
  transition: var(--transition);
  background-color: var(--color-red-700);
  color: var(--color-secondary);
}
.btn--primary:hover {
  background-color: var(--color-red-500);
}
.btn--secondary {
  background-color: var(--color-blue-700);
  color: var(--color-white);
}
.btn--secondary:hover {
  background-color: var(--color-blue-500);
}

.btn--sm {
  padding: 0.625rem 1.25rem;
}

.btn--md {
  padding: 0.75rem 1.65rem;
  font-size: var(--fs-6);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--fs-4);
}

.btn--icon {
  padding: 0.5rem 0.5rem;
  border-radius: 17px;
}

/* -------------------------------------------------- */
/* 🟨 selection */
/* -------------------------------------------------- */

::selection {
  background-color: var(--color-red-700);
  color: var(--color-white);
}

/* -------------------------------------------------- */
/* 📑 Main Body */
/* -------------------------------------------------- */

main {
  animation: fadeInAnimation ease 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* -------------------------------------------------- */
/* 👦🏼 Header */
/* -------------------------------------------------- */

.header {
  background-color: var(--color-blue-700);
  color: var(--color-secondary);
  width: 100%;
  transition: all 0.5s ease-out;
}
.header__main {
  position: relative;
  justify-content: space-between;
  align-items: center;
  height: var(--header-heigth);
}

.header__main a:hover {
  text-decoration: none;
}

.site__title {
  font-size: var(--fs-2);
  font-family: var(--font-family-heading);
  position: relative;
  z-index: 9999;
}

.primary-color {
  fill: var(--color-primary);
}
.primary-color-border {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* -------------------------------------------------- */
/* 🏴 Logo */
/* -------------------------------------------------- */

.logo {
  /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); */
  height: 80px; /* Adjust the size as needed */
  position: relative;
  width: 80px; /* Adjust the size as needed */
  z-index: 9999;
}

.logo--footer {
  z-index: 1;
}

.logo svg {
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------- */
/* 🍔 Menu */
/* -------------------------------------------------- */

.navigation__item {
  font-family: Anton, serif;
  font-size: var(--fs-navigation);
  /* letter-spacing: 1px; */
  text-transform: uppercase;
  transition: var(--transition);
}

.navigation__item[aria-current] {
  color: var(--color-blue-100);
}

@media (max-width: 993px) {
  /* Toggle */
  .mobile-nav-toggle {
    display: block;
    position: relative;
    background: url(../../assets/icons/menu.svg);
    background-size: contain;
    background-position: right;
    border: 0;
    height: 2.5rem;
    aspect-ratio: 1;
    z-index: 9999;
    transition: transform 0.3s ease; /* Smooth rotation animation */
  }
  .mobile-nav-toggle[aria-expanded="true"] {
    background: url(../../assets/icons/x.svg);
    background-size: contain;
    transform: rotate(180deg); /* Flip the X create rotating effect */
  }
  .mobile-nav-toggle__wrapper {
    /* background-color: var(--color-red-100); */
    z-index: 9999;
  }
  .navigation-wrapper {
    flex-direction: column;
    padding-inline: 0;
    justify-content: flex-end;
    height: 100%;
    padding: calc(var(--header-heigth) + 50px) 0 2rem;
  }

  .navigation-wrapper > *:first-child ~ * {
    padding-inline: var(--padding);
  }
  /* Bar */
  .navigation-bar {
    --gap: 0rem;
    color: var(--color-secondary);
    inset: 0 0 0 0;
    position: fixed;
    transform: translateX(100%); /* Start off-screen at the top */
    opacity: 0; /* Start fully transparent */
    transition:
      transform 0.3s ease-out,
      opacity 0.3s ease-out; /* Transition both transform and opacity */
    z-index: 9998; /* Initially set behind everything */
    background: var(--color-blue-700);
  }

  .navigation-bar[data-visible="true"] {
    transform: translateX(0); /* Slide in from the top */
    opacity: 0.95; /* Fade in */
    z-index: 9998; /* Bring it to the front when visible */
  }

  /* Navigation */
  .navigation {
    --gap: 0.5rem;
    opacity: 1; /* Navigation is visible */
    margin-bottom: auto;
  }

  /* Navigation items */
  .navigation__item {
    border-bottom: 1px solid var(--color-blue-600);
    color: var(--color-secondary);
    display: block;
    line-height: 3rem;
    padding-inline: var(--padding);
    padding-right: calc(50px + var(--padding));
    position: relative; /* Contain the :before */
    width: 100%;
  }

  /* When navigation bar is visible, trigger the animations */
  .navigation-bar[data-visible="true"] .navigation__item {
    opacity: 1;
    transform: translateY(0); /* Move into place */
  }

  .navigation li {
    position: relative;
  }

  .has-submenu:before {
    background-image: url("../icons/chevron-white.svg"); /* Path to SVG */
    background-position: center; /* Center SVG within pseudo-element */
    background-repeat: no-repeat; /* Prevent tiling */
    background-size: 1.2rem 1.2rem; /* Scale SVG to fit container */
    content: ""; /* Empty content since we’re using background image */
    float: right;
    font-size: 2rem;
    height: 50px;
    margin-left: 1rem; /* Space from title text */
    padding-inline-end: var(--padding);
    position: relative;
    transition: transform 0.2s ease; /* Smooth rotation animation */
    width: 70px;
    z-index: 1;
  }

  .submenu--active:before {
    content: ""; /* Empty for background image */
    background-image: url("../icons/chevron-white.svg"); /* Same SVG */
    transform: rotate(180deg); /* Flip chevron to point up */
  }

  .submenu {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    flex-direction: column;
    width: 100%;
  }

  .navigation__item--submenu {
    display: block;
    margin-inline-start: 0.5rem;
  }

  .navigation-logo {
    background-color: var(--color-grey-900);
    max-width: 100%;
    margin-bottom: 3rem;
  }
}

@media (min-width: 992px) {
  .navigation {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    line-height: 110px;
  }

  .navigation__item {
    line-height: 110px;
    display: block;
    white-space: nowrap;
  }

  .navigation__item:hover {
    text-decoration: none;
    color: var(--color-blue-100);
  }

  .navigation__item--contact {
    color: var(--color-secondary);
    line-height: 1;
    padding: 0.625rem 1.25rem;
    transition: var(--transition);
    background-color: var(--color-red-700);
  }

  .navigation__item--contact:hover {
    background-color: var(--color-white);
    color: var(--color-red-700);
  }

  .has-submenu {
    position: relative;
    display: flex;
    align-items: center;
  }

  .has-submenu::after {
    /* Use chevron code not svg to allow for color change on hover */
    align-items: center; /* vertical centering */
    content: "\203A"; /* right-pointing chevron */
    display: inline-flex;
    font-size: 1.2em; /* size of the + */
    height: 1.2em; /* container size */
    justify-content: center; /* horizontal centering */
    line-height: 1;
    transform: rotate(90deg);
    width: 1.2em; /* container size */
    cursor: pointer;
  }

  .has-submenu:hover::after {
    color: var(--color-blue-100);
  }

  .has-submenu:hover .submenu {
    visibility: visible;
    opacity: 1;
    top: 110px;
  }

  .submenu {
    --gap: 0rem;
    background-color: var(--color-blue-700);
    box-shadow: 0 5px 20px rgba(1, 50, 99, 0.5);
    flex-direction: column;
    left: 0%; /* moves left edge to center of .has-submenu */
    opacity: 0;
    position: absolute; /* relative to .has-submenu */
    top: 110px;
    transform: translateX(-50%);
    transition: all 0.2s; /* transitions opacity and top */
    visibility: hidden;
    z-index: 9999;
  }

  .submenu li {
    border-bottom: 1px solid var(--color-blue-600);
    display: block;
    width: auto;
  }

  .submenu li:last-of-type {
    border-bottom: none;
  }

  .navigation__item--submenu {
    line-height: 1.2;
    display: block;
    padding-inline: 1.75rem;
    padding-block: 0.75rem;
  }
}

/* -------------------------------------------------- */
/* 👋 Intro */
/* -------------------------------------------------- */

.intro {
  background-color: var(--color-blue-30);
  padding-block-start: var(--spacing-lg);
  padding-block-end: var(--spacing-md);
  margin-block-end: 3rem;
}

@media (min-width: 992px) {
  .intro {
    margin-block-end: rem;
  }
}

.intro__title {
  letter-spacing: 0;
}

.breadcrumb {
  font-size: var(--fs-small);
  color: var(--color-primary);
}
.breadcrumb__item {
  display: inline;
}
.breadcrumb__item--active {
  color: var(--color-blue-700);
}
.breadcrumb__item + .breadcrumb__item:before {
  padding: 3px;
  content: "/\00a0";
}

/* -------------------------------------------------- */
/* 😃 Socials */
/* -------------------------------------------------- */

.socials-block-mobile-nav {
  display: flex;
  gap: 1rem;
}

.socials-block-mobile-nav a:hover {
  opacity: var(--opacity-on-hover);
}

.socials-block-mobile-nav svg {
  width: 2.5rem;
  height: 2.5rem;
}

.socials-block-footer {
  display: flex;
  gap: 1rem;
}

.socials-block-footer a:hover svg {
  fill: var(--color-red-500);
}

.socials-block-footer svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--color-red-700);
  transition: var(--transition);
}

@media (min-width: 992px) {
  .socials-block-mobile-nav,
  .navigation__copyright {
    display: none;
  }
}

/* -------------------------------------------------- */
/* 🦶 Footer */
/* -------------------------------------------------- */

footer {
  z-index: -1;
}

.footer-end-wrapper {
  background-color: var(--color-blue-30);
}

.footer-end {
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  flex-direction: column;
}

@media (min-width: 992px) {
  footer {
    /* margin-block-start: 6rem; */
  }
  .footer-end {
    flex-direction: row;
  }
}

.footer-end .logo {
  height: 60px; /* Adjust the size as needed */
  width: 60px; /* Adjust the size as needed */
}

.footer-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0.8;
}

.footer-content-wrapper {
  padding-block: 3rem;
  justify-content: space-between;
  flex-direction: column;
}

.footer-navigation {
  display: flex;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  align-self: center;
}

@media (min-width: 992px) {
  .footer-content-wrapper {
    padding-block: 4rem;
    flex-direction: row;
  }
}

/* -------------------------------------------------- */
/* 📞 Call to Action */
/* -------------------------------------------------- */
.call-to-action {
  --gap: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cta-wrapper {
  background-color: var(--color-red-700);
  color: var(--color-white);
  margin-block-start: 4rem;
  padding-block: 4rem;
  background-image:
    linear-gradient(rgba(182, 27, 32, 0.9), rgba(182, 27, 32, 0.95)),
    /* Top layer: Red overlay */ url("../images/eagle.png"); /* Bottom layer: Logo */
  background-position:
    0vw 0px,
    /* gradient */ 0vw 0px; /* eagle with crown */
  background-repeat: no-repeat;
  background-size:
    700px auto,
    /* gradient */ 700px auto; /* eagle with crown */
}

.call-to-action--primary {
  align-items: flex-start;
}

.call-to-action__title--primary {
  font-size: var(--fs-1);
  line-height: 1;
}
.call-to-action__text--primary {
  font-size: var(--fs-5);
}

.call-to-action__title--secondary {
  font-size: var(--fs-5);
  color: var(--color-red);
}
.call-to-action__text--secondary {
  margin-block-start: -4rem;
  font-size: var(--fs-0);
  font-weight: bold;
}

@media (min-width: 992px) {
  .call-to-action__title--primary {
    width: 60%;
    text-wrap: balance;
  }
  .call-to-action__text--primary {
    width: 60%;
  }

  .call-to-action--secondary {
    --gap: 2rem;
    flex-direction: row;
  }

  .cta-wrapper {
    padding-block: 6rem;
    margin-block-start: 6rem;
    background-image:
      url("../images/eagle.png"),
      linear-gradient(rgba(182, 27, 32, 0.95), rgba(182, 27, 32, 0.97)),
      /* Top layer: Red overlay */ url("../images/eagle-with-crown.png"); /* Bottom layer: Logo */
    background-position:
      66vw 30px,
      /* eagle */ 0vw 0px,
      /* gradient */ 0vw -700px; /* eagle with crown */
    background-repeat: no-repeat;
    background-size:
      900px auto,
      /* eagle */ 1200px auto,
      /* gradient */ 1200px auto; /* eagle with crown */
  }
}

/* -------------------------------------------------- */
/* #️⃣ Tag */
/* -------------------------------------------------- */
.tags {
  --gap: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block-end: 3rem;
  border-bottom: 1px solid var(--color-grey-200);
}
.tag__title {
  font-size: var(--fs-3);
  color: var(--color-red-700);
}
.tag__text {
  font-size: var(--fs-1);
  text-transform: uppercase;
}

/* -------------------------------------------------- */
/* 💰 Sponsors */
/* -------------------------------------------------- */
.sponsors {
  padding-block: 4rem;
  background-color: var(--color-blue-900);
  margin-block-end: 4rem;
  color: var(--color-white);
}

.sponsors-intro {
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.sponsors__title {
  font-size: var(--fs-2);
  color: var(--color-white);
}
.featured {
  flex-direction: column;
  align-items: center;
}

.featured__grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.featured__item {
  flex: 0 0 auto;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured__link,
.featured__link picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.featured__image {
  display: block;
  width: 90%;
  max-width: 90%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 992px) {
  .sponsors {
    padding-block: 6rem;
    margin-block-end: 6rem;
  }

  .sponsors-intro {
    flex-direction: row;
  }
}

.scroller {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller.is-dragging {
  cursor: grabbing;
}

.scroller__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 2.5rem;
  justify-content: flex-start;
  width: max-content;
  padding: 0;
  margin: 0;
  list-style: none;
}

.scroller__item {
  flex: 0 0 auto;
  width: 300px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.scroller__link,
.scroller__link picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.scroller__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.scroller[data-animated="true"] {
  overflow: hidden;
}

.scroller[data-animated="true"] .scroller__list {
  animation: scroll 80s linear infinite;
}

.scroller.is-paused .scroller__list,
.scroller.is-dragging .scroller__list {
  animation-play-state: paused;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-50% - 1.25rem));
  }
}

/* -------------------------------------------------- */
/* ⚽ Fixtures */
/* -------------------------------------------------- */
.fixture-mini {
  position: relative;
  overflow: hidden;

  padding-block: 1rem;

  background-color: var(--color-blue-800);
  /* background-image: linear-gradient(
    90deg,
    var(--left-color),
    #1b1e2c 50%,
    var(--right-color)
  ); */

  color: white;
}

.fixture-mini__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  text-align: center;
}

.fixture-mini__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;

  width: 100%;
  max-width: 500px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.fixture-mini__teams span:first-child {
  text-align: right;
}

.fixture-mini__teams span:last-child {
  text-align: left;
}

.fixture-mini__versus {
  color: var(--color-blue-100);
  text-align: center;
}

.fixture-mini__meta {
  display: flex;
  justify-content: center;
  gap: 0.4rem 0.75rem;

  font-size: 0.875rem;
  color: var(--color-blue-100);
}

.fixture-mini__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  color: white;
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--color-blue-100);
  transition: color 0.2s ease;
}

.fixture-mini__location:hover {
  color: var(--color-white);
}

.fixture-mini__location svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke-width: 2;
}

@media (min-width: 992px) {
  .fixture-mini__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;

    text-align: left;
  }

  .fixture-mini__meta {
    justify-self: start;
  }

  .fixture-mini__teams {
    justify-self: center;
    white-space: nowrap;
    font-size: 1rem;
  }

  .fixture-mini__location {
    justify-self: end;
  }
}

/* -------------------------------------------------- */
/* 🗒️ Pages */
/* -------------------------------------------------- */
.page__title {
  margin-block-start: var(--spacing-9);
}

.img-bg-left:first-of-type {
  background: url("../../assets/images/img-bg.svg");
  background-size: cover;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 10px;
  padding-bottom: 10px;
}

.img-bg-right:last-of-type {
  background: url("../../assets/images/img-bg.svg");
  background-size: cover;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-right: 10px;
  padding-bottom: 10px;
  position: relative;
}

/* -------------------------------------------------- */
/* 📈 VPL Ladder */
/* -------------------------------------------------- */

.vpl-ladder-container {
  overflow-x: auto;
  padding-block-start: 4rem;
  border-radius: 8px;
  flex-direction: column;
}

@media (min-width: 992px) {
  .vpl-ladder-container {
    padding-block-start: 6rem;
    flex-direction: row;
    justify-content: space-between;
  }
}

.ladder-left {
  flex: 1;
}

.ladder-right {
  flex: 1;
}

.highlight-team {
  font-weight: bold; /* Optional: bold text */
}

.vpl-ladder-table {
  width: 100%;
  border-collapse: collapse;
}

.vpl-ladder-table th,
.vpl-ladder-table td {
  padding: 8px;
  border-bottom: 1px solid var(--color-blue-50);
  text-align: left;
}

.vpl-ladder-table th {
  background: var(--color-blue-700);
  text-transform: uppercase;
  border-bottom: 2px solid #ddd;
  color: var(--color-secondary);
}

.vpl-ladder-table tr:nth-child(even) {
  background-color: var(--color-blue-30);
}

.vpl-ladder-table tr:hover {
  background-color: var(--color-blue-50);
}

.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: 0.25rem !important;
}
.m-2 {
  margin: 0.5rem !important;
}
.m-3 {
  margin: 1rem !important;
}
.m-4 {
  margin: 1.5rem !important;
}
.m-5 {
  margin: 3rem !important;
}
.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 3rem !important;
}
.mt-auto {
  margin-top: auto !important;
}
.me-0 {
  margin-right: 0 !important;
}
.me-1 {
  margin-right: 0.25rem !important;
}
.me-2 {
  margin-right: 0.5rem !important;
}
.me-3 {
  margin-right: 1rem !important;
}
.me-4 {
  margin-right: 1.5rem !important;
}
.me-5 {
  margin-right: 3rem !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.mb-5 {
  margin-bottom: 3rem !important;
}
.ms-0 {
  margin-left: 0 !important;
}
.ms-1 {
  margin-left: 0.25rem !important;
}
.ms-2 {
  margin-left: 0.5rem !important;
}
.ms-3 {
  margin-left: 1rem !important;
}
.ms-4 {
  margin-left: 1.5rem !important;
}
.ms-5 {
  margin-left: 3rem !important;
}
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: 0.25rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.p-3 {
  padding: 1rem !important;
}
.p-4 {
  padding: 1.5rem !important;
}
.p-5 {
  padding: 3rem !important;
}
.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pt-4 {
  padding-top: 1.5rem !important;
}
.pt-5 {
  padding-top: 3rem !important;
}
.pe-0 {
  padding-right: 0 !important;
}
.pe-1 {
  padding-right: 0.25rem !important;
}
.pe-2 {
  padding-right: 0.5rem !important;
}
.pe-3 {
  padding-right: 1rem !important;
}
.pe-4 {
  padding-right: 1.5rem !important;
}
.pe-5 {
  padding-right: 3rem !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-2 {
  padding-bottom: 0.5rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.pb-4 {
  padding-bottom: 1.5rem !important;
}
.pb-5 {
  padding-bottom: 3rem !important;
}
.ps-0 {
  padding-left: 0 !important;
}
.ps-1 {
  padding-left: 0.25rem !important;
}
.ps-2 {
  padding-left: 0.5rem !important;
}
.ps-3 {
  padding-left: 1rem !important;
}
.ps-4 {
  padding-left: 1.5rem !important;
}
.ps-5 {
  padding-left: 3rem !important;
}

/* -------------------------------------------------- */
/* 🗒️ Components */
/* -------------------------------------------------- */

/* .accordion,
.has-submenu {
  cursor: pointer;
  width: 100%;
  outline: none;
  transition: var(--transition);
}

.accordion:before {
  content: "\002B";
  float: right;
  text-align: right;
  width: 40px;
  height: auto;
}

.active:before {
  content: "\2212";
} */