@import url("./components/lang-switcher.css");

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-semibold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gellix";
    src: url("../fonts/gellix-extrabold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-surface: #ffffff;
    --color-surface-muted: #f7f9fb;
    --color-text: #1f2933;
    --color-text-muted: #4b5563;
    --color-primary: #086675;
    --color-border: #e5e7eb;
    --color-tech-green-100: #e6f0f1;
    --color-tech-green-200: #cee0e3;
    --color-tech-green-300: #99c2c8;
    --color-tech-green-400: #6ba3ac;
    --color-tech-green-500: #398591;
    --color-tech-green-600: #086675;
    --color-tech-green-700: #06525e;
    --color-tech-green-800: #053d46;
    --color-tech-green-900: #03292f;
    --color-tech-green-1000: #021417;
    --color-sun-yellow-100: #fff9e6;
    --color-sun-yellow-200: #fff3cc;
    --color-sun-yellow-300: #fff299;
    --color-sun-yellow-400: #ffdc66;
    --color-sun-yellow-500: #ffd033;
    --color-sun-yellow-600: #ffc400;
    --color-sun-yellow-700: #cc9d00;
    --color-sun-yellow-800: #997600;
    --color-sun-yellow-900: #664e00;
    --color-sun-yellow-1000: #332700;
    --color-gravel-100: #f9f8f6;
    --color-gravel-200: #f5f4ee;
    --color-gravel-300: #edece6;
    --color-gravel-400: #deddd7;
    --color-gravel-500: #b8b4b4;
    --color-gravel-600: #9c9b95;
    --color-gravel-700: #73726d;
    --color-obsidian-800: #5f5e59;
    --color-obsidian-900: #403f3a;
    --color-obsidian-1000: #1f1f1a;
    --color-sky-blue-100: #e7f7fa;
    --color-sky-blue-200: #cfeef6;
    --color-sky-blue-300: #9fdded;
    --color-sky-blue-400: #6fcde3;
    --color-sky-blue-500: #3fbdda;
    --color-sky-blue-600: #0facd1;
    --color-sky-blue-700: #0c8aa7;
    --color-sky-blue-800: #09677d;
    --color-sky-blue-900: #064554;
    --color-sky-blue-1000: #03222a;
    --color-field-green-100: #f1f9f1;
    --color-field-green-200: #e3f3e3;
    --color-field-green-300: #c8e7c7;
    --color-field-green-400: #acdbaa;
    --color-field-green-500: #91cf8e;
    --color-field-green-600: #75c372;
    --color-field-green-700: #5e9c5b;
    --color-field-green-800: #467544;
    --color-field-green-900: #2f4e2e;
    --color-field-green-1000: #172717;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --corner-4: 4px;
    --corner-8: 8px;
    --corner-16: 16px;
    --corner-24: 24px;
    --corner-32: 32px;
    --gap-16: 16px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-48: 48px;
    --gap-56: 56px;
    --padding-96: 96px;
    --padding-192: 192px;
    --padding-384: 384px;
    --breakpoint-1320: 1320px;
    --breakpoint-767: 767px;
    --font-size-64: 64px;
    --font-size-32: 32px;
    --font-size-26: 26px;
    --font-size-22: 22px;
    --font-size-16: 16px;
    --font-size-14: 14px;
    --font-size-12: 12px;
    --line-height-display: 1;
    --line-height-default: 1.2;
    --font-base: "Gellix", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --line-height-base: 1.6;
}

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

body {
    margin: 0;
    font-family: var(--font-base);
}

a {
    color: var(--color-primary);
}

p {
    margin-block-start: 0;
}

.fit-content {
    max-width: fit-content;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropbtn {
    background: url('https://sunrock.com/wp-content/uploads/2022/05/nl-flag.jpg') center / cover no-repeat;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
}

.dropdown .dropbtn:hover,
.dropdown .dropbtn:focus {
    outline: none;
}

.dropdown .dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

.dropdown.is-open .dropdown-content {
    display: block;
}

.dropdown .dropdown-content a {
    width: 25px;
    height: 25px;
    display: block;
    margin-top: 10px;
    border-radius: 50%;
    background-size: cover !important;
    background-position: center !important;
}

.dropdown .dropdown-content a:hover {
    outline: 2px solid rgba(0, 0, 0, 0.15);
    outline-offset: 2px;
}

.dropdown .dropdown-content a.is-disabled {
    display: none;
}

.dropdown .dropbtn {
    background-color: unset;
    font-size: unset;
    font-weight: unset;
    text-decoration: unset;
    line-height: unset;
    color: unset;
    padding: unset;
}

.sr-scroll-header.is-scrolled:not(.elementor-motion-effects-element-type-background),
.sr-scroll-header.is-scrolled>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-color: var(--color-primary) !important;
}