@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayBlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayLightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayMediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplayBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplaySemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Wulkan Display';
    src: url('./fonts/WulkanDisplay/WulkanDisplaySemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src:url('./fonts/HelveticaNowText/HelveticaNowText-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src:url('./fonts/HelveticaNowText/HelveticaNowText-ExtBdIta.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-RegIta.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-ExtLtIta.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Helvetica Now Text';
    src: url('./fonts/HelveticaNowText/HelveticaNowText-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

:root {
    --color-primary: #758C57;
    --color-primary-light: #89a269;
    --color-secondary: #DAD873;

    --color-900: #000;
    --color-800: #454d66;
    --color-750: #3A452B;
    --color-700: rgb(78, 93, 58);
    --color-650: #61704d;
    --color-600: #EFEEB4;
    --color-550: #f2f2f2;
    --color-500: #fff;
    --color-450: #E5E5E5;

    --color-red: #d62828;
    --color-red-900: #801818;
    --form-color-error-green:  #4e5d3a;

    --color-500-tr: rgba(255, 255, 255, 80%);
    --color-800-tr: rgba(0, 0, 0, 50%);
    --color-900-tr: rgba(0, 0, 0, 50%);

    --ff-primary: 'Wulkan Display', sans-serif;
    --ff-secondary: 'Helvetica Now Text', sans-serif;

    --fs-300 : clamp(0.875rem, 0.835rem + 0.2vi, 1rem);
    --fs-400 : 1rem;
    --fs-450 : clamp(1rem, 0.96rem + 0.2vi, 1.125rem);
    --fs-500 : clamp(1.125rem, 1.085rem + 0.2vi, 1.25rem);
    --fs-600 : clamp(1.25rem, 1.09rem + 0.8vi, 1.75rem);
    --fs-700 : clamp(1.5rem, 1.34rem + 0.8vi, 2rem);
    --fs-800 : clamp(1.75rem, 1.2143rem + 2.6786vw, 2.5rem);
    --fs-900 : 3.125rem;


    /* Reorganize */
    --clamp-500: clamp(0.875rem, 0.5272rem + 0.7246vw, 1.125rem);
    --clamp-560: clamp(1.125rem, 1.045rem + .4vi, 1.375rem);
    --clamp-600: clamp(1.25rem, 1.0714rem + 0.8929vw, 1.5rem);
    --clamp-650: clamp(1.375rem, 1.2011rem + 0.3623vw, 1.5rem);
    --clamp-700: clamp(1.5rem, 1.34rem + 0.8vi, 2rem);  
    --clamp-800: clamp(1.75rem, 2vw, 2rem);

    --size-300 : .5rem;
    --size-400 : .825rem;
    --size-500 : 1rem;
    --size-600 : 1.5rem;
    --size-700 : 2rem;

    --section-p-xs : 1.5rem 1rem;
    --section-p-xl : 3.625rem 5rem;

    --size-hamburger: clamp(2.375rem, 1.8393rem + 2.6786vw, 3.125rem);
    --size-compass: clamp(12.5rem, 7.2826rem + 10.8696vw, 16.25rem);

    --radius-500 : 15px;

    --image-size : clamp(15.625rem, 12.625rem + 15vi, 25rem);
    --shadow : rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

html {
    min-height: 100vh;
}

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

body {
    height: 100%;
    background-color: var(--color-500);
    font-family: var(--ff-primary);
    font-size: var(--fs-400);
    color: var(--color-900);

    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4, h5, h6 {
    letter-spacing: .08rem;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}
.first-section {
    padding-top: 4.375rem;
    min-height: 100vh;
}
.typical-section {
    width: 100%;
    padding: var(--section-p-xs);
}

/* Title */
.typical-title {
    font-size: var(--fs-800);
    font-weight: 900;
    margin-bottom: 4rem;
    text-align: center;
}

/* Navigation */
nav a, 
.yellow-link {
    position: relative;
}
nav a::before, 
.yellow-link::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    height: 3px;
    width: 0;
    transition: .2s ease-in-out;
}

nav a.active::before, 
.yellow-link.active::before {
    width: 54px;
    background-color: var(--color-secondary);
}

nav a:hover::before,
.yellow-link:hover::before {
    width: 54px;
    background-color: var(--color-secondary);
} 
/* Buttons */
.button {
    background-color: var(--color-secondary);
    color: var(--color-500);
    padding: var(--size-300) var(--size-500);
    border-radius: var(--radius-500);
    border-color: transparent;
    height: fit-content;
    box-shadow: var(--shadow);
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .08rem;
}
.small-button {
    cursor: pointer;
    padding: .5rem 1rem;
    text-wrap: nowrap;
    border: none;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow);
    transition: .2s;
}
.form-button {
    border: var(--color-primary) 1px solid;
    color: var(--color-800);
    background-color: var(--color-500);
    padding: .5rem 1.5rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-500);
    border-radius: 15px;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
    transition: all .2s;
}
.form-button:hover {
    border-bottom: var(--color-primary) 4px solid;
    border-right:  var(--color-primary) 4px solid;
    margin: 0 -3px -3px 0;
}
/* Inputs */
.input {
    border-radius: var(--radius-500);
    padding: var(--size-300) var(--size-500);
    border-color: transparent;
    background-color: var(--color-500-tr);
}
.input::placeholder {
    color: var(--color-900-tr);
}
.input:focus-visible {
    border-color: var(--color-secondary);
}

.input2_elementsContainer {
    border: 1px solid;
    border-radius: 15px;
    position: relative;
}
.input2_elementsContainer > label {
    position: absolute;
    top: 0;
    left: 1rem;
    transform: translateY(-50%);
    font-size: var(--fs-500);
    font-weight: 600;
    padding: 0 0.5rem;
}

.input2_container {
    position: relative;
    margin: 1rem 1.5rem 0 1.5rem;
    display: flex;
    gap: 1rem;
}

.input2_container input,
.input2_container select, 
.input2_container textarea {
    font-family: var(--ff-secondary);
    width: 100%;
    height: 2rem;
    background-color: transparent;
    border: none;
    flex: 1;
}
.input2_container input:focus-visible,
.input2_container select:focus-visible, 
.input2_container textarea:focus-visible {
    outline: none;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
}
.input2_container textarea {
    height: 100px;
}

.input2_container input::placeholder {
    color: var(--color-800-tr);
    font-family: var(--ff-secondary);
}

.input2_containeer input:focus {
    outline: none;
}

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

.input2_required, .input2_info, .smallFormError {
    display: block;
    color: var(--color-primary);
    font-style: italic;
    font-weight: 800;
    line-height: 1rem;
    letter-spacing: 1px;
}

.input2_info, .smallFormError {
    padding: 0 .5rem;
}

.input2_checkbox {
    margin-right: .5rem;
}
.checkbox2Container label {
    font-weight: 600;
    color: var(--color-800);
}

.inputError {
    border-color: var(--color-red);
}
.smallFormError {
    color: var(--color-red);
    display: flex;
    align-items: center;
}

/* FLASH */
.flash {
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--color-500);
    padding: .5rem 1rem;
    border-radius: var(--radius-500);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.flash-success {
    background-color: var(--color-primary);;
}
.flash-error {
    background-color: var(--color-red);
}

/* Loader */

.loader {
    border: 3px dotted var(--color-800);
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
}
.loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px dotted var(--color-primary);
    border-style: solid solid dotted;
    border-radius: 50%;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}

.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loader-text  {
    font-family: var(--ff-secondary);
    font-weight: 600;
    font-size: var(--fs-450);
    color: var(--color-800);
    text-align: center;
}

@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }

/* Links */
.link {
    display: inline-block;
    height: fit-content;
    overflow-y: visible;
    overflow-x: clip;
    position: relative;
}
.link::after {
    content: '';    
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    transition: .2s ease-in;
}
.link:hover::after {
    transform: translateX(100%);
}

/* Map */

.maplibregl-popup-content {
    color: var(--color-900);
    cursor: pointer;
}

/* Media Screen */
@media screen and (min-width: 768px) {
    .typical-section {
        padding: var(--section-p-xl);
    }
}