/*
  Theme Name: Terranova
  Author: Nodo
  Author URI: https://nodo.pw/
  Description: Terranova Academia
  Version: 1.0
*/
@layer theme, base, layout, components, utils, overrrides;
/* noto-sans-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-cyrillic-ext-400-normal.woff2) format('woff2'), url(assets/noto-sans-cyrillic-ext-400-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-cyrillic-400-normal.woff2) format('woff2'), url(assets/noto-sans-cyrillic-400-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-devanagari-400-normal.woff2) format('woff2'), url(assets/noto-sans-devanagari-400-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-greek-ext-400-normal.woff2) format('woff2'), url(assets/noto-sans-greek-ext-400-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-greek-400-normal.woff2) format('woff2'), url(assets/noto-sans-greek-400-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-vietnamese-400-normal.woff2) format('woff2'), url(assets/noto-sans-vietnamese-400-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-latin-ext-400-normal.woff2) format('woff2'), url(assets/noto-sans-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/noto-sans-latin-400-normal.woff2) format('woff2'), url(assets/noto-sans-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* noto-sans-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-cyrillic-ext-500-normal.woff2) format('woff2'), url(assets/noto-sans-cyrillic-ext-500-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-cyrillic-500-normal.woff2) format('woff2'), url(assets/noto-sans-cyrillic-500-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-devanagari-500-normal.woff2) format('woff2'), url(assets/noto-sans-devanagari-500-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-greek-ext-500-normal.woff2) format('woff2'), url(assets/noto-sans-greek-ext-500-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-greek-500-normal.woff2) format('woff2'), url(assets/noto-sans-greek-500-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-vietnamese-500-normal.woff2) format('woff2'), url(assets/noto-sans-vietnamese-500-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-latin-ext-500-normal.woff2) format('woff2'), url(assets/noto-sans-latin-ext-500-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-500-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/noto-sans-latin-500-normal.woff2) format('woff2'), url(assets/noto-sans-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* noto-sans-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-cyrillic-ext-700-normal.woff2) format('woff2'), url(assets/noto-sans-cyrillic-ext-700-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-cyrillic-700-normal.woff2) format('woff2'), url(assets/noto-sans-cyrillic-700-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-devanagari-700-normal.woff2) format('woff2'), url(assets/noto-sans-devanagari-700-normal.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-greek-ext-700-normal.woff2) format('woff2'), url(assets/noto-sans-greek-ext-700-normal.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-greek-700-normal.woff2) format('woff2'), url(assets/noto-sans-greek-700-normal.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-vietnamese-700-normal.woff2) format('woff2'), url(assets/noto-sans-vietnamese-700-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-latin-ext-700-normal.woff2) format('woff2'), url(assets/noto-sans-latin-ext-700-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-700-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/noto-sans-latin-700-normal.woff2) format('woff2'), url(assets/noto-sans-latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* encode-sans-expanded-vietnamese-700-normal */
@font-face {
  font-family: 'Encode Sans Expanded';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/encode-sans-expanded-vietnamese-700-normal.woff2) format('woff2'), url(assets/encode-sans-expanded-vietnamese-700-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* encode-sans-expanded-latin-ext-700-normal */
@font-face {
  font-family: 'Encode Sans Expanded';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/encode-sans-expanded-latin-ext-700-normal.woff2) format('woff2'), url(assets/encode-sans-expanded-latin-ext-700-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* encode-sans-expanded-latin-700-normal */
@font-face {
  font-family: 'Encode Sans Expanded';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/encode-sans-expanded-latin-700-normal.woff2) format('woff2'), url(assets/encode-sans-expanded-latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer theme{
:root {
  --color-blue-royal: #1f4899;
  --color-lime-energy: #b7e91f;
  --color-green-nature: #73bf44;
  --color-green-mint: #54bd8b;
  --color-white: #fff;
  --color-dark-grey: #1a1a1a;
  --color-primary: var(--color-blue-royal);
  --color-primary-alt: var(--color-lime-energy);
  --color-secondary: var(--color-green-nature);
  --color-secondary-alt: var(--color-green-mint);
  --color-light: var(--color-white);
  --color-dark: var(--color-dark-grey);
  --font-primary: "Noto Sans", sans-serif;
  --font-secondary: "Encode Sans Expanded", sans-serif;
  --lh: 1.5;
  --lh-base: 1.15;
  --lh-md: 28px;
  --lh-lg: 30px;
  --lh-xl: 40px;
  --container-width: 75rem;
  --font-sm: 14px;
  --font-base: 17px;
  --font-lg: 18px;
  --font-xl: 19px;
  --font-2xl: 20px;
  --font-3xl: 22px;
  --font-4xl: 26px;
  --font-5xl: 28px;
  --font-6xl: 30px;
  --font-7xl: 32px;
  --font-8xl: 48px;
}
}
@layer base{

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family:
    system-ui,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    'Liberation Mono',
    Menlo,
    monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
  border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}
}
@layer base{

html {
  height: 100%;
  scroll-margin-top: 8rem;
  scroll-padding-top: 8rem;
}

body {
  display: grid;
  min-height: 100%;
  font-family: var(--font-primary);
  font-size: var(--font-2xl);
  font-weight: 500;
  grid-template-rows: 1fr auto;
  line-height: var(--lh-lg);
}

:where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  font-family: "Encode Sans Expanded", sans-serif;
  font-size: unset;
  font-weight: 700;
}

img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  font-size: var(--font-sm);
  font-style: italic;
  font-weight: 300;
}

  img.centered {
    margin-inline: auto;
  }

a {
  overflow-wrap: anywhere;
}
}
@layer layout{
.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  color: var(--color-light);
  padding-block: 1.5rem;
}
}
@layer layout{
.site-brand {
  display: flex;
  align-items: center;
  font-size: var(--font-sm);
  font-weight: 700;
  gap: 1rem;
  }

  .site-brand a {
    display: flex;
    align-items: center;
    color: var(--color-light);
    font-size: var(--font-sm);
    font-weight: 700;
    gap: 1rem;
    text-decoration: none;
  }

  .site-brand p {
    max-width: 10ch;
    line-height: var(--lh-base);
    text-wrap: balance;
  }

  .site-brand img {
    --image-size: 110px;

    width: clamp(50px, 40px + 6vw, var(--image-size));
    height: auto;
    border: 2px solid var(--color-light);
    border-radius: 50%;
    object-fit: cover;
  }
}
@layer layout{
.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
}
@layer layout{
.nav-menu {
  display: flex;
  align-items: center;
  gap: 3rem;
}

  @media (width <= 48rem) {
.nav-menu {
    gap: 1rem
}
  }
}
@layer layout{
.container {
  --container-padding-inline: 1rem;

  display: grid;
  height: auto;
  grid-template-columns:
    [fullwidth-start]
    minmax(var(--container-padding-inline), 1fr)
    [main-start]
    minmax(auto, var(--container-width, 80ch))
    [main-end]
    minmax(var(--container-padding-inline), 1fr)
    [fullwidt-end];
}

  .container > .container {
    --container-padding-inline: 0px;
  }

  .container.is-paddingless {
    --container-padding-inline: 0px;
  }

  .container > * {
    grid-column: main;
  }

  .container > .fullwidth {
    display: grid;
    grid-column: fullwidth;
    grid-template-columns: inherit;
  }

    .container > .fullwidth > *:not(.fullwidth) {
      grid-column: main;
    }

    .container > .fullwidth > .fullwidth {
      width: 100%;
      grid-column: fullwidth;
    }
}
@layer layout{
/** Site footer */
.site-footer {
  background:
    url("images/footer-bg.jpg") no-repeat right bottom /
    min(100%, var(--container-width));
}
  
    @media (width <= 48rem) {
    .site-footer {
        background-image: url("images/footer-bg-mobile.svg")
    }
  }


  .site-footer .footer-logo {
    align-content: center;
  }

    .site-footer .footer-logo img {
      display: block;
      max-width: 300px;
      margin-inline: auto;
    }

  .site-footer .footer-logo-terranova {
    align-content: flex-end;
    padding-bottom: 1rem;
  }

    .site-footer .footer-logo-terranova img {
      display: block;
      max-width: 150px;
      margin-inline: auto;
    }
}
@layer layout{

[data-section] {
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  padding-block: 4rem;
}

  [data-section][style*="--section-bg"] {
    background: var(--section-bg) no-repeat var(--bg-position, center) /
      var(--bg-size, cover);
  }

[data-section="purpose"] {
  padding-block: 8rem;
}

  [data-section="purpose"] img:not(.decoration) {
    width: 100%;
  }

[data-section="why"] {
  padding-block: 10rem 4rem;
}

[data-section="academy"] {
  padding-block: 8rem;
}
  [data-section="competition"] :where(h2, h3, p) {
    margin-block: 0;
  }

  [data-section="competition"] h2 + * {
    margin-bottom: 2rem;
  }

  [data-section="competition"] img:not(.decoration) {
    width: 100%;
  }

[data-section="training"] {
  background: var(--color-primary)
    radial-gradient(
      ellipse at center top in oklab,
      var(--color-primary) 0% 50%,
      var(--color-light) 50%
    )
    no-repeat center / 300vw 150vh;
}

  @media (width <= 48rem) {

[data-section="training"] {
    background: linear-gradient(
        to bottom,
        var(--color-primary) 0% 60%,
        var(--color-light) 70%
      )
      no-repeat center / cover
}
  }

  [data-section="training"] .training-logo {
    max-width: 300px;
  }
  [data-section="contact"] .title-contact,
  [data-section="contact"] p {
    margin: 0;
  }

  [data-section="contact"] address {
    font-style: normal;
  }
  [data-section="location"] iframe {
    width: 100%;
    border: none;
    border-radius: 1rem;
    aspect-ratio: 16 / 6;
  }

  [data-section="location"] .grid {
    place-items: center;
  }

  [data-section="location"] .bullet {
    margin-block: 0 !important;
  }

[data-section="single"] {
  padding-top: 0.5rem;
}

  [data-section="single"] img {
    border-radius: 1rem;
  }
}
@layer components{
.menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: min(100vw, 40rem);
  height: 100dvh;
  background-color: var(--color-primary);
  color: var(--color-light);
  padding-inline: 1rem;
  transition: translate 200ms ease-in-out;
  translate: 100% 0;
  will-change: transform;
}

  .menu-overlay.active {
    translate: 0 0;
  }
}
@layer components{

.menu {
  padding: 0 6rem;
}

  @media (width <= 48rem) {

.menu {
    padding-inline: 2rem 0.25rem
}
  }

.menu-item {
  margin-block: 2rem;
}

  .menu-item::marker {
    color: var(--color-primary-alt);
    font-size: var(--font-5xl);
  }

  .menu-item a {
    color: currentcolor;
    font-family: var(--font-secondary);
    font-size: var(--font-3xl);
    text-decoration: none;
  }
}
@layer components{

.hero,
.hero-single {
  position: relative;
  min-height: 100vh;
  background-image: linear-gradient(
    to bottom right,
    var(--color-primary),
    var(--color-secondary)
  );
  grid-column: fullwidth;
  isolation: isolate;
}

.hero-single {
  min-height: 50vh;
}

  .hero-single .hero-content {
    place-content: end start;
  }

.hero-media {
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  display: grid;
  max-width: var(--container-width);
  height: 100%;
  margin-inline: auto;
  padding-block-end: 3rem;
  padding-inline: 1rem;
  place-content: end;
}

.hero-card {
  max-width: 25rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: color-mix(in srgb, var(--color-primary) 95%, transparent);
  color: var(--color-light);
}

  .hero-card p {
    margin: 0;
  }
}
@layer components{

.grid {
  --grid-gap: 2rem;
  --grid-fill-type: auto-fill;
  --grid-columns: 2;
  --grid-column-min-size: 16rem;
  --gap-total: calc((var(--grid-columns) - 1) * var(--grid-gap));
  --column-size: calc((100% - var(--gap-total)) / var(--grid-columns));

  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(
      var(--grid-fill-type),
      minmax(
        min(max(var(--grid-column-min-size), var(--column-size)), 100%),
        1fr
      )
    );
}

  .grid.columns-1 {
    --grid-columns: 1;
  }

  .grid.columns-2 {
    --grid-columns: 2;
  }

  .grid.columns-3 {
    --grid-columns: 3;
  }

  .grid.columns-4 {
    --grid-columns: 4;
  }

  .grid.columns-5 {
    --grid-column-min-size: 10rem;
    --grid-columns: 5;
  }

  .grid.is-gapless {
    --grid-gap: 0px;
  }

  .grid.has-centered-items {
    place-items: center;
  }

.span-2 {
  grid-column: span 2;
}

  @media (width <= 48rem) {

.span-2 {
    grid-column: unset
}
  }

.span-3 {
  grid-column: span 3;
}

  @media (width <= 48rem) {

.span-3 {
    grid-column: 1 / -1
}
  }
}
@layer components{
.button-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background-color: transparent;
  color: var(--color-primary-alt);
  cursor: pointer;
  font-weight: 700;
  gap: 1rem;
}

  .button-menu img {
    max-width: 46px;
  }
}
@layer components{
.button-menu-close {
  display: block;
  border: 0;
  margin-left: auto;
  background-color: transparent;
  color: var(--color-light);
  cursor: pointer;
  font-size: var(--font-8xl);
  font-weight: 700;
  line-height: var(--lh-base);
}
}
@layer components{
.button {
  --button-background-color: var(--color-primary-alt);
  --button-font: var(--font-secondary);
  --button-font-weight: 700;
  --button-font-size: var(--font-base);
  --button-paddings: 14px 24px;
  --button-radius: 0.25em;
  --button-text-color: var(--color-primary);

  padding: var(--button-paddings);
  border-radius: var(--button-radius);
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--lh-base);
  text-decoration: none;
}

  @media (width <= 48rem) {
.button {
    --button-font-size: var(--font-sm);
    --button-paddings: 10px 16px
}
  }

  .button:is(:hover) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-dark) 40%, transparent);
  }

  .button:is(:focus-visible) {
    outline: 2px solid var(--button-background-color);
    outline-offset: 2px;
  }
}
@layer components{
.menu-footer {
  padding: 0;
  list-style-position: inside;
}

  .menu-footer .menu-item {
    margin-block: 0;
    line-height: 1;
  }

  .menu-footer a {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: inherit;
  }
}
@layer components{
.contact-address {
  color: var(--color-primary);
  font-style: normal;
}

  .contact-address a {
    color: var(--color-primary);
    font-family: var(--font-primary);
    text-decoration: none;
  }

  .contact-address p {
    margin-block: 0;
    font-style: normal;
  }
}
@layer components{
.decoration {
  position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform-origin: center;
  translate: -50% -50%;
}

  .decoration-waves {
    width: 100%;
  }

    .decoration-waves.top {
      top: 0;
      translate: -50% 0;
    }

  .decoration-ball {
    top: 0;
  }
}
@layer components{
.card {
  padding: 2rem;
  border-radius: 1rem;
  background-color: color-mix(in srgb, var(--color-light) 80%, transparent);
  box-shadow: 0 0.5rem 1rem rbg(from var(--color-dark) / 0.1);
}

  .card .title {
    color: currentcolor !important;
  }

  .card p {
    margin-block: 0;
  }
}
@layer components{
.card-blog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

  .card-blog * {
    margin: 0;
  }

  .card-blog p:last-of-type {
    margin-bottom: 1rem;
  }

  .card-blog img {
    border-radius: 0.5rem;
  }

  .card-blog .button {
    margin-top: var(--lh-md);
  }
}
@layer components{
.bullet {
  position: relative;
  max-width: 48rem;
  margin-block: 4rem;
  text-wrap: balance;
}

  .bullet.is-centered {
    margin-inline: auto;
  }

  .bullet .title-bullets {
    margin-bottom: 1rem;
  }

  .bullet * {
    margin: 0;
    line-height: var(--lh-base) !important;
  }

  .bullet::after {
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 2rem;
    height: 0.35rem;
    background-color: var(--color-secondary);
    content: "";
  }
}
@layer components{
  .block .title {
    margin-block: 1.5rem;
  }

  .block p {
    margin: 0;
  }
}
@layer components{
.tagline {
  --tagline-color: var(--color-light);
  --tagline-width: 18rem;

  position: relative;
  max-width: var(--tagline-width);
  height: fit-content;
}

  .tagline::after {
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 3rem;
    height: 0.5rem;
    background-color: var(--tagline-color);
    content: "";
  }

  .tagline.primary {
    --tagline-color: var(--color-primary-alt);
  }

  .tagline.light {
    color: var(--color-light);
  }

  .tagline.right {
    margin-left: auto;
  }

  .tagline.mt-dynamic {
    margin-top: 18cqw;
  }
}
@layer components{

.grid-form {
  gap: 1.5rem var(--grid-gap);
}
    .label:has(input, select, textarea) span {
      position: absolute;
      display: block;
      overflow: hidden;
      width: 0;
      height: 0;
      padding: 0;
      border: 0;
      margin: -1px;
      clip-path: rect(0 0 0 0);
      pointer-events: none;
      white-space: nowrap;
    }

.input,
.select {
  --input-color-border: var(--color-primary);
  --input-border-radius: 0.25rem;

  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--input-color-border);
  border-radius: var(--input-border-radius);
  appearance: textfield;
  background-color: color-mix(
    in srgb,
    var(--color-secondary) 50%,
    var(--color-light)
  );
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: var(--font-4xl);
  font-weight: 500;
  line-height: var(--lh-xl);
}

  .input::placeholder, .select::placeholder {
    color: var(--color-primary);
    opacity: 1;
  }

  .input:is(:focus, :focus-visible), .select:is(:focus, :focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

    .input:is(:focus, :focus-visible)::placeholder, .select:is(:focus, :focus-visible)::placeholder {
      opacity: 0.1;
    }

.form-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.25rem 1rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.25rem;
  background-color: var(--color-primary);
  color: var(--color-primary-alt);
  cursor: pointer;
  font-size: var(--font-4xl);
  font-weight: 700;
}

  .form-button:is(:focus, :focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}
@layer components{
.social-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-block: 1rem;
}
    .social-icons a img {
      display: block;
      width: 42px;
      height: 42px;
    }
}
@layer components{
.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: var(--font-lg);
  gap: 0.5rem;
}

  @media (width <= 48rem) {
.contact-item {
    align-items: flex-start
}
  }

  .contact-item a {
    color: inherit;
    text-decoration: none;
  }

  .contact-item address {
    font-style: normal;
  }

  .contact-item p {
    margin: 0;
  }

  .contact-item img {
    width: 24px;
    height: 24px;
  }
}
@layer components{
.list-primary {
  padding: 0;
  margin: 0;
  list-style-position: inside;
}

  .list-primary .subtitle-blog {
    display: inline;
    color: var(--color-primary);
  }

  .list-primary ::marker {
    display: inline;
    color: var(--color-primary);
    font-size: var(--font-3xl);
  }
}
@layer components{

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  font-size: var(--font-8xl);
  color: var(--color-primary-alt);
  border: none;
  border: 2px solid var(--color-primary-alt);
  aspect-ratio: 1 / 1;
  width: 3rem;
  border-radius: 3rem;
  padding-bottom: 0.75rem;
  display: grid;
  place-items: center;
  line-height: 0;
  cursor: pointer;
  z-index: 1;
}

  .carousel-button.inactive {
    opacity: 0.25;
    pointer-events: none;
  }

  .carousel-button--prev {
    left: 0;
    padding-right: 0.5rem;
  }

  .carousel-button--next {
    right: 0;
    padding-left: 0.5rem;
  }

.carousel-wrapper {
  display: flex;
  overflow-y: auto;
  transition: transform 0.5s ease-in-out;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  width: 100vw;
}

  .carousel-wrapper > * {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
  }
}

@layer utils{
/**
 * Titles
 */
.title {
  font-family: var(--font-secondary);
  font-size: var(--font-6xl);
  font-weight: 700;
  line-height: var(--lh-base);
  
  @media (width <= 48rem) {
    font-size: var(--font-4xl);
  } 
}

  .title:not(p) {
    color: var(--color-primary-alt);
  }

.title-news {
  color: var(--color-primary-alt);
  font-family: var(--font-secondary);
  font-size: var(--font-5xl);
  font-weight: 700;
  line-height: var(--lh-base);
  margin-block: 0 1rem;
}

.title-bullets {
  color: var(--color-primary-alt);
  font-family: var(--font-secondary);
  font-size: var(--font-7xl);
  font-weight: 700;
  line-height: var(--lh-base);
}

  .title-bullets.is-primary {
    color: var(--color-primary);
  }

.title-contact {
  font-family: var(--font-secondary);
  font-size: var(--font-7xl);
  font-weight: 700;
  line-height: var(--lh-base);
}

  .title-contact.is-primary {
    color: var(--color-primary);
  }

.title-submenu {
  color: var(--color-primary-alt);
  font-family: var(--font-primary);
  font-size: var(--font-4xl);
  font-weight: 500;
  line-height: var(--lh-xl);
}

.title-blog {
  font-family: var(--font-secondary);
  font-size: var(--font-8xl);
  font-weight: 700;
  line-height: var(--lh-base);
}

.title-name {
  margin-bottom: 0;
  color: var(--color-secondary-alt);
  font-family: var(--font-secondary);
  font-size: var(--font-2xl);
  font-weight: 500;
  line-height: var(--lh-base);
  text-transform: uppercase;
}

  .title-name + * {
    margin-top: 0;
  }

.subtitle-blog {
  font-family: var(--font-primary);
  font-size: var(--font-3xl);
  font-weight: 700;
  line-height: var(--lh-xl);
}
  
:is(.single, .single-blog) .subtitle-blog {
  color: var(--color-primary);
}

.subtitle-blog:has(+ p) {
  margin-bottom: 0;
}

.subtitle-blog:has(+ p) + p {
  margin-top: 0;
}

/**
 * Texts
 */
.text-news {
  font-family: var(--font-primary);
  font-size: var(--font-xl);
  font-weight: 500;
  line-height: var(--lh-lg);
}

.text-bullets {
  font-family: var(--font-primary);
  font-size: var(--font-4xl);
  font-weight: 500;
  line-height: var(--lh-xl);
}

.text-contact {
  font-family: var(--font-primary);
  font-size: var(--font-4xl);
  font-weight: 500;
  line-height: var(--lh-xl);
}

.text-submenu {
  font-family: var(--font-primary);
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: var(--lh-lg);
  flex-grow: 1;
}

.text-blog {
  font-family: var(--font-primary);
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: var(--lh-md);
}

.text-base {
  font-size: var(--font-base);
}

.caption {
  font-family: var(--font-primary);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: var(--lh-base);
}

.text-light {
  color: var(--color-light);
}

.text-primary {
  color: var(--color-primary);
}

.text-primary-alt {
  color: var(--color-primary-alt);
}

.text-balance {
  text-wrap: balance;
}

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

.text-notify {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-light);
  margin-block: 1rem;
}
}
@layer utils{
  ._oculto {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  ._oculto.focusable:active,
  ._oculto.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }

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

.bg-linear-bl-to-tr {
  background: linear-gradient(
    in oklab 15deg,
    var(--color-primary) 30%,
    var(--color-primary-alt)
  );
}

.bg-linear-to-left {
  background: linear-gradient(
    in oklab to left,
    var(--color-primary) 30%,
    var(--color-primary-alt)
  );
}

.bg-linear-to-top {
  background: linear-gradient(
      to top in oklab,
      var(--color-secondary),
      var(--color-primary-alt)
    )
    no-repeat center bottom/400vw;
}
}
@layer utils{

.mt-auto {
  margin-top: auto;
}

.mt-20 {
  margin-top: 5rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.mb-0 {
  margin-bottom: 0;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.p-12 {
  padding: 3rem;
}

.pt-20 {
  padding-top: 4rem;
}

.align-center {
  align-content: center;
}
}
@layer utils{
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border-width: 0;
  margin: -1px;
  clip-path: rect(0 0 0 0);
  white-space: nowrap;
}
}
@layer utils{

.alignnone {
  margin: 0;
}

.alignleft {
  display: inline;
  margin-right: 1.5em;
  margin-bottom: 1em;
  float: left;
}

.alignright {
  display: inline;
  margin-bottom: 1em;
  margin-left: 1.5em;
  float: right;
}

.aligncenter {
  display: block;
  margin-right: auto;
  margin-bottom: 1em;
  margin-left: auto;
}

img.alignleft,
img.alignright,
img.aligncenter {
  max-width: 100%;
  height: auto;
}
}