/* input(1137,7): run-time error CSS1035: Expected colon, found ',' */
/* input(1136,7): run-time error CSS1035: Expected colon, found ',' */
/*
    This file contains the global design for all the web pages.
    
    DO put CSS classes that are used on multiple blocks or pages here.
    DO NOT put CSS classes here that are specific to a block or page.

    If you're trying to look where the css files are linked, see program.cs.

    Variables available:
    --primary-color
    --secondary-color
    --accent-color

    See Master.cshtml
*/


/* Overriding default HTML elements. */
/*
    Note: 
        - Do this SPARINGLY!
        - Stay CONSISTENT!
        - Keep it MINIMAL!
*/

/* Root defaults */
:root,:host {
    --blue: #005393;
    --grey: #555555;
    --light-grey: #d6d6d6;
    --text-color: #323131;
    --fs-header-1: 4.3rem; /* 70px */
    --fs-header-2: 2.5rem; /* 40px */
    --fs-header-3: 1.6rem; /* 26px */
    --fs-paragraph: 1.1rem; /* 18px */

    --fs-text-large: 1.25rem;
    --fs-text-small: 0.75rem;
    /* Shadows */
    --shadow-lg: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    --shadow-md: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    --border: 1px solid var(--light-grey);

    color: var(--text-color);
    font-family: Lato;

    accent-color: var(--accent-color);
}

@media (max-width: 767px) {
    :root, :host {
        --fs-header-1: 3.2rem;
        --fs-header-2: 1.6rem;
        --fs-header-3: 1.25rem;
        --fs-paragraph: 1rem;
        --fs-text-large: 1.1rem;
        --fs-text-small: 0.7rem;
    }
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

b, strong {
    font-weight: 600 !important;
}

p:empty::before {
    content: "\00a0";
}

/* Animations */
.bounce-down {
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear(0, 0.329 8.6%, 0.541 16%, 0.615 19.6%, 0.667 23.2%, 0.698 26.8%, 0.708 30.5%, 0.686 36.1%, 0.618 42.3%, 0.229 64.6%, 0.093 74.8%, 0.048 80.2%, 0.018 85.8%, 0.004 91.9%, 0);
    animation-name: bounce_down;
    animation-fill-mode: both;
    animation-play-state: running;
}

@keyframes bounce_down {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(20px);
    }
}

/* Text colors */
.color-primary {
    color: var(--primary-color);
    stroke: var(--primary-color);
}

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

.color-secondary {
    color: var(--secondary-color);
    stroke: var(--secondary-color);
}

.fill-secondary {
    fill: var(--secondary-color);
}

.color-accent {
    color: var(--accent-color);
    stroke: var(--accent-color);
}

.fill-accent {
    fill: var(--accent-color);
}

.color-grey {
    color: var(--grey);
    stroke: var(--grey);
}

.fill-accent {
    fill: var(--accent-color);
}

.color-light-grey {
    color: var(--light-grey);
    stroke: var(--light-grey);
}

.color-white {
    color: white;
}

/* Background colors */

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

.background-secondary {
    background-color: var(--secondary-color);
}

.background-accent {
    background-color: var(--accent-color);
}

/* fill colors */
.fill-primary {
    fill: var(--primary-color);
}

/* Text sizes */

h1 {
    font-size: var(--fs-header-1) !important; /* 70px */
}

h2 {
    font-size: var(--fs-header-2) !important; /* 40px */
}

h3 {
    font-size: var(--fs-header-3) !important; /* 26px */
}

p {
    font-size: var(--fs-paragraph) !important; /* 18px */
}

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

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

/* Buttons */
.button {
    --button-padding-x: 1rem;
    --button-padding-y: 0.5rem;
    --button-text-color: white;
    --button-bg: var(--primary-color);
    --button-filter: brightness(80%);

    color: var(--button-text-color) !important;
    background-color: var(--button-bg);

    padding-left: var(--button-padding-x);
    padding-right: var(--button-padding-x);
    padding-top: var(--button-padding-y);
    padding-bottom: var(--button-padding-y);

    border-radius: 25px;
    text-decoration: none;
    user-select: none;
    cursor: pointer;

    display: inline-block;

    border: none;

    transition: color linear 0.25s;
    transition: background-color linear 0.25s;
    transition: filter linear 0.25s;
}

.button:hover {
    filter: var(--button-filter);
}

.button--transparent {
    --button-bg: transparent;
    --button-text-color: var(--text-color);
    --button-filter: none;

    border: 1px solid var(--primary-color);
}

.button--transparent:hover {
    --button-bg: var(--primary-color);
    --button-text-color: white;
}

.button--large {
    --button-padding-x: 1.5rem;
    font-size: var(--fs-text-large)
}

.button--white {
    --button-text-color: white;
    --button-bg: none;
    --button-filter: none;

    border: 1px solid white;
}

.button--white:hover {
    --button-text-color: black;
    --button-bg: white;
}

/* Header logo */
.site-logo {
    display: inline-flex;
    align-items: center;
    height: clamp(40px, 6vw, 72px);
    max-width: clamp(160px, 18vw, 220px);
}

.site-logo-img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Navbar */
.nav__link {
    color: grey;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    padding: 0.5rem;
    border: none;
    background: none;
}

.nav__link:hover {
    color: var(--accent-color);
}

.nav__link--active {
    color: var(--accent-color);
    font-weight: 600;
}

.nav__link--active::after {
    width: 100% !important;
}

.nav__link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -6px;
   width: 0%;
   height: 2px;
   background-color: var(--accent-color);
   transition: width 0.25s ease;
}

.nav__link:hover::after {
    width: 100%;
}

/* Mobile navigation */
.mobile-menu-toggle {
    border: none;
    background: none;
}

.mobile-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu__backdrop--shown {
    opacity: 1;
    visibility: visible;
}

.mobile-menu__card {
    position: fixed;
    inset: 0;
    z-index: 1005;
    width: 100vw;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-22px);
    transition: opacity 0.3s ease, transform 0.35s ease, visibility 0.3s ease;
    pointer-events: none;
}

.mobile-menu__card--shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-menu__card-inner {
    max-width: 28rem;
    max-height: calc(100vh - 2rem);
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}

.mobile-menu__header {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.mobile-menu__header-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: color-mix(in srgb, var(--primary-color) 10%, white);
    color: var(--primary-color);
}

.mobile-menu__close-button {
    width: 2.35rem;
    height: 2.35rem;
    border: none;
    background: color-mix(in srgb, var(--grey) 8%, white);
    color: var(--grey);
}

.mobile-menu__link {
    min-height: 3.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(0, 83, 147, 0.1);
    border-radius: 1rem;
    background: #f8f9fb;
    color: var(--text-color);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.mobile-menu__link:hover,
.mobile-menu__link--active {
    background-color: color-mix(in srgb, var(--secondary-color) 15%, white);
    color: var(--grey);
    border-color: var(--secondary-color);
    transform: translateX(3px);
}

.mobile-menu__link--danger {
    border-color: #ffd7d7;
    background: #fff5f5;
    color: #b42318;
}

.mobile-menu__link--danger:hover {
    border-color: #ffbaba;
    background: #ffecec;
    color: #b42318;
}

/* Input */
.input-search {
    display: flex;
    align-items: center;

    border: var(--border);
    border-radius: 1rem;
    
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.input-search__icon {
    display: flex;
    align-items: center;

    height: 100%;

    padding-left: .75rem;
    padding-right: .5rem;
}

.input-search__input {
    height: 100%;
    width: 100%;

    border: none;

    padding-left: .5rem;
    padding-right: .5rem;

    margin-right: 1rem;
}

.input-search__input:focus {
    outline: none;
}

/* Pill */
.pill {
    width: fit-content;

    background: var(--primary-color);
    color: white;

    padding-top: .35rem;
    padding-bottom: .35rem;

    padding-left: 1rem;
    padding-right: 1rem;

    border-radius: 2rem;
}

/* Toggle */
.toggle {
    display: flex;

    border-radius: 2rem;

    padding: .3rem;
    background: #D9D9D9;
}

.toggle__item {
    display: flex;

    align-items: center;
    justify-items: center;

    background: none;

    padding-left: 1rem;
    padding-right: 1rem;

    border: none;
    border-radius: 2rem;
}

.toggle__item--active {
    background: white;
}

/* Pager */
.paging {
    display: flex;
    gap: .25rem;

    justify-content: center;
}

.paging-item {
    background: none;

    padding-top: .5rem;
    padding-bottom: .5rem;

    padding-left: 1rem;
    padding-right: 1rem;

    color: var(--grey);
    border: var(--border);
    border-radius: .5rem;

    cursor: pointer;
}

.paging-item--active,
.paging-item:hover {
    color: white;
    background: var(--primary-color);
}

/* Form control */
/* Application form */
custom-form-control {
    border-radius: 0.9rem;
    border: 1px solid #d6d6d6;
    box-shadow: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

custom-form-control:focus {
    background-color: #f8f8f8;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color);
}

.form-control--fit {
    width: fit-content !important;
    padding-right: 3rem !important;
}

/* Upload box */
.upload-box {
    border: 2px dashed #6ea8fe;
    background-color: #e7f1ff;
    transition: all 0.2s ease-in-out;
}

.upload-box:hover {
    border-color: var(--accent-color);
    background-color: #dbeafe;
    cursor: pointer;
}

.upload-box__text {
    color: var(--accent-color);
    font-weight: 400;
}

/* Table */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 0px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

tbody p {
    margin: 0;
}

td, th {
    padding: 8px;
}

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

tr:first-child {
    color: white;
    background: var(--primary-color)
}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04AA6D;
    color: white;
}

/* Footer */
.footer__link {
    color: grey;
    text-decoration: none;

    cursor: pointer;
}

.footer__link:hover {
    color: var(--accent-color);
}
/*
https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}
/* The rich text editor has class: .rich-text-editor__content, do any specific overrides here. */
.rich-text-editor__content a {
    color: var(--secondary-color);
}

.rich-text-editor__content a:hover {
    color: var(--accent-color);
}
html {
    scroll-behavior: smooth;
}

/*jumbotron*/
.jumbotron {
    position: relative;
    height: 40rem;
}

.jumbotron--ellipsed {
    clip-path: ellipse(90% 100% at 50% 0%);
}

.jumbotron--rounded-bottom {
    clip-path: inset(0% 0% 0% 0% round 0px 0px 40px 40px);
}

.jumbotron__background {
    width: 100%;
    height: 100%;

    position: absolute;

    z-index: 0;
}

.jumbotron__foreground {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8), black);
    position: relative;
    z-index: 5;
}

.jumbotron__background-image {
    height: 100%;
    width: 100%;

    background-position: center;
    background-size: cover;
}

.jumbotron__text-container {
    height: 100%;
    min-width: 75%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1rem;
}

.information_home__cards {
    /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
    /* Maximum of 3 columns, with a minimum size of 15rem per card. */
    
    /* START */
    --grid-layout-gap: 2.5rem;
    --grid-column-count: 3;
    --grid-item--min-width: 20rem;
    
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
    /* END */

    display: grid;
    justify-content: center;
    width: 100%;
}

.information_home__card {
    padding: 1rem;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
}
.wave-home {
    min-height: 50rem;
}

.wave-home__quote-card {
    margin-top: -2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.wave-home__testimonial-actor {
    transition: transform 0.25s ease;
    cursor: pointer;
}

.wave-home__testimonial-actor:hover {
    transform: translateY(-10px);
    border-color: var(--secondary-color) !important;
}
.vacancy-departments__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 3rem;
    position: relative;
    z-index: 1;
}

.vacancy-departments__card {
    display: block;
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vacancy-departments__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}

.vacancy-departments__image-wrapper {
    width: 100%;
    height: 15rem;
    overflow: hidden;
}

.vacancy-departments__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vacancy-departments__footer {
    background: #F4A66F;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
}

.vacancy-departments__count {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vacancy-departments__card img {
    transition: transform 0.3s ease;
}

.vacancy-departments__card:hover img {
    transform: scale(1.05);
}

.wave-home__testimonial-actor {
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.wave-home__testimonial-actor:hover {
    opacity: 0.8;
}

.wave-home__testimonial-actor--active {
    opacity: 1;
    transform: scale(1.1);
}

.wave-home__wave-up {
    background: var(--primary-color);
    height: 10vw;
    clip-path: polygon( 23.75% 0.028%,23.75% 0.028%,21.388% 0.253%,19.011% 0.709%,16.623% 1.401%,14.228% 2.338%,11.832% 3.525%,9.44% 4.97%,7.056% 6.679%,4.685% 8.659%,2.331% 10.916%,0% 13.457%,0% 105%,105% 105%,105% 105%,97.272% 98.068%,94.538% 95.822%,91.794% 93.218%,89.033% 90.212%,86.25% 86.757%,83.44% 82.811%,80.597% 78.327%,77.716% 73.261%,74.792% 67.569%,71.818% 61.205%,71.818% 61.205%,69.362% 55.271%,66.895% 49.184%,64.405% 43.062%,61.884% 37.021%,59.318% 31.176%,56.698% 25.645%,54.013% 20.543%,51.251% 15.988%,48.402% 12.095%,45.455% 8.981%,45.455% 8.981%,43.512% 7.27%,41.506% 5.722%,39.442% 4.344%,37.324% 3.144%,35.156% 2.126%,32.945% 1.299%,30.693% 0.669%,28.407% 0.243%,26.091% 0.027%,23.75% 0.028% );
}

.wave-home__wave-down {
    background: var(--primary-color);
    height: 10vw;
    clip-path: polygon( -1% -1%,-1% 37.191%,-1% 37.191%,2.347% 32.074%,4.756% 27.152%,7.237% 22.49%,9.796% 18.151%,12.443% 14.203%,15.185% 10.709%,18.031% 7.734%,20.989% 5.343%,24.067% 3.601%,27.273% 2.574%,27.273% 2.574%,30.818% 2.805%,34.364% 4.685%,37.909% 8.045%,41.455% 12.716%,45% 18.53%,48.545% 25.317%,52.091% 32.909%,55.636% 41.138%,59.182% 49.833%,62.727% 58.827%,62.727% 58.827%,66.299% 67.512%,69.92% 75.34%,73.585% 82.233%,77.287% 88.114%,81.023% 92.904%,84.785% 96.526%,88.57% 98.902%,92.371% 99.953%,96.183% 99.603%,100% 97.772%,100% -1% );
}

/* jobs-spotlight */
.jobs-spotlight {
    background-color: var(--primary-color);
}

.jobs-spotlight__card-container {
    background: #F4A66F;
    display: flex;
    flex-direction: column;
}

/*.jobs-spotlight__card {
    min-height: 100%;
}*/

.jobs-spotlight__nav {
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-spotlight__nav:hover {
    background: rgba(255,255,255,0.3);
}

.splide__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.splide__pagination__page {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

 .splide__pagination__page.is-active {
    width: 40px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
}

.opportunities-cta {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}

.opportunities-cta .container {
    position: relative;
    z-index: 2;
}

.opportunities-cta h2 {
    max-width: 700px;
}

/* Page Banner */
.banner-home {
    position: relative;
    min-height: 15rem;
}

/* Career site compliance */
.career-compliance-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(3, 24, 43, 0.68);
    backdrop-filter: blur(6px);
}

.career-compliance-modal__dialog {
    width: min(100%, 44rem);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 1.5rem;
    border: 1px solid rgba(0, 83, 147, 0.12);
    box-shadow: 0 28px 70px rgba(4, 23, 39, 0.22);
    overflow: hidden;
}

.career-compliance-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0;
}

.career-compliance-modal__header h3 {
    margin: 0;
    color: var(--primary-color);
}

.career-compliance-modal__close {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 83, 147, 0.08);
    color: var(--primary-color);
    font-size: 1.5rem;
    line-height: 1;
}

.career-compliance-modal__body {
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    white-space: pre-line;
}

.career-compliance-modal__body p:last-child {
    margin-bottom: 0;
}

.career-compliance-modal__body--html {
    color: var(--text-color);
}

.career-compliance-modal__body--html a {
    color: var(--primary-color);
    font-weight: 700;
}

.career-compliance-modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}

.application-form__privacy-card {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1.25rem 1.5rem;
    border-radius: 15px;
    border: 1px solid #0000002d;
}

.application-form__privacy-gate--accepted .application-form__privacy-card {
    border-color: #0000002d;
}

.application-form__privacy-label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.application-form__privacy-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    flex-shrink: 0;
}

.application-form__privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.application-form__privacy-link-indicator {
    line-height: 1;
}

.application-form__privacy-link:hover,
.career-compliance-modal__close:hover {
    filter: brightness(0.94);
}

@media (max-width: 767px) {
    .career-compliance-modal__dialog {
        width: 100%;
        border-radius: 1.2rem;
    }

    .career-compliance-modal__footer,
    .application-form__privacy-card {
        flex-direction: column;
        align-items: stretch;
    }

    .career-compliance-modal__footer .button,
    .application-form__privacy-link {
        width: 100%;
        text-align: center;
    }
}

.banner-home__background-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.banner-home__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8), black);
}

.banner-home__content {
    display: flex;
    flex-direction: column;
    height: 100%;

    padding-top: 1rem;
    padding-bottom: 1rem;
}

.banner-home__back {
    display: inline-block;

    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    padding: 8px 14px;
    border-radius: 20px;
    text-decoration: none;
    text-wrap: nowrap;
}

.banner-home__text {
    margin-top: 15rem;
    height: 100%;
}

.vacancy-layout {
    padding: 4rem 0;
}

.vacancy-layout__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 3rem;
    align-items: start;
}

.vacancy-layout__content {
    h1, h2, h3, h4, h5, h6 {
        color: var(--primary-color);
    }
}

.vacancy-layout__section {
    margin-bottom: 3rem;
}

.vacancy-layout__text-block {
    max-width: 760px;
}

.vacancy-layout__title {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.vacancy-layout__list {
    padding-left: 1.25rem;
    margin: 0;
}

.vacancy-layout__sidebar {
    align-self: start;  
    position: sticky;
    top: 2rem;
}

.vacancy-layout__sidebar-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e2e2;
}

.vacancy-layout__sidebar-map {
    position: relative;
    height: 215px;
}

.vacancy-layout__sidebar-map img {
    position: absolute;
    background-size: cover;
    background-position: center;
    filter: brightness(0.55) saturate(0.8);
}

.vacancy-layout__sidebar-map-content {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 1.5rem;
    justify-content: space-between;
}

.vacancy-layout__sidebar-location {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vacancy-layout__sidebar-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.vacancy-layout__sidebar-item strong {
    margin-bottom: 0.25rem;
}

/* Application proces*/
.application-proces {
    background-color: var(--primary-color);
}

.application-proces__number {
    top: 1rem;
    left: 1rem;
}

.application-proces__number span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: color-mix(in srgb, var(--primary-color) 20%, white);
    color: var(--primary-color);
    border-radius: 12px;
}

.carousel__container {
    overflow: hidden;
    width: 100%;
}

.carousel__track {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease;
}

.carousel__card {
    flex: 0 0 calc((100% - 3rem) / 4);
    max-width: calc((100% - 3rem) / 4);
}

.homepage-carousel__card {
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
}

.upload-icon-circle {
    width: 42px;
    height: 42px;
    background-color: #f1f1f1;
    border: 1px solid #e3e3e3;
}

.form-select.custom-form-control {
    background-position: right 1.25rem center;
}

.required {
    color: red;
}

/* Career cards */
.careers {
    display: grid;
    grid-template-rows: auto;
    gap: 1rem;
}

.careers--grid {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    height: fit-content;
}

.careers__card {
    border: var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.25s;
    text-decoration: none;
    color: initial;
}

.careers__card-job-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    grid-auto-flow: row;
}

.careers__card:hover {
    transform: translateY(-10px);
}

.careers__card:hover > * .careers__card-media {
    transform: scale(1.05);
}

.careers__card-media-wrapper {
    height: 15rem;
    width: 100%;
    overflow: hidden;

    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;

    margin-bottom: -2rem;
}

.careers__card-media {
    height: 100%;
    width: 100%;

    object-fit: cover;

    transition: transform 0.25s;
}

.careers__card-content {
    border-radius: 1rem;
    background: white;
    padding: 1.5rem;
}

.careers__list {
    display: flex;
    gap: 2rem;
}

.filter-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 1rem;

    max-height: calc(100vh - 2rem);
    overflow: hidden;

    border: var(--border);
    padding: 1.5rem;
    border-radius: 1rem;
    height: fit-content;

    box-shadow: var(--shadow-md);
}

.filter-sidebar .offcanvas-body {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0;
}

.filter-sidebar__scroll-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.filter-sidebar__bottom-content {
    flex-shrink: 0;
    background: white;
    padding-top: 1rem;
    box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.9);
}

.small-text {
    font-size: 18px !important;
}

/* FAQ */
.faq-accordion {
}

.faq-item {
    border: 0;
    border-radius: 0 !important;
    background: transparent;
}
.accordion-item {
    border: none !important;
    border-bottom: 1px solid #bfbfbf !important;
}

.faq-button {
    background-color: transparent !important;
    color: #2f2f2f !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 1.4rem 0;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
}

.faq-button::after {
    display: none !important;
}

.faq-icon {
    flex-shrink: 0;
    font-size: 1.35rem;
    color: #111;
    transition: transform 0.2s ease;
}

.faq-button:not(.collapsed) .faq-icon {
    transform: rotate(45deg);
}

.faq-button:not(.collapsed) {
    background-color: transparent !important;
    color: #2f2f2f !important;
}

@media (max-width: 767px) {
    .jumbotron {
        height: 29rem;
    }

      .wave-home {
        height: auto !important;
        min-height: auto !important;
        padding-top: 3rem;
        padding-bottom: 3rem;
        overflow: hidden;
    }
    
    .banner-home {
        height: 300px;
    }

    .banner-home__text {
        margin-top: 65px;
    }

    .information_home__cards {
        --grid-column-count: 1;
        --grid-item--min-width: 14rem;
    }

    .wave-home__quote-card {
        position: static;
        max-width: 100%;
    }

    #wave-home-main-image {
        margin-bottom: 0rem !important;
    }

    .vacancy-layout__container {
        grid-template-columns: 1fr;
    }

    .vacancy-layout__sidebar-sticky {
        position: static;
    }

    .carousel__card {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .small-text {
        font-size: 12px !important;
    }
}

/* Login */
.login-card {
    overflow: hidden;
}

@media (min-width: 768px) { /*MD*/
    .login-card {
        display: flex;

        border: var(--border);
        border-radius: var(--bs-border-radius-xl);
        flex-grow: 1;
    }
}

.login-card__login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;

    width: 100%;
    padding: 2rem;

    border-radius: var(--bs-border-radius-xl);
    background: white;

    margin-top: -2rem;

    position: relative;
    z-index: 2;
}

.login-card__welcome {
    display: flex;

    width: 100%;
    min-height: 15rem;

    position: relative;
}

.login-card__welcome-background {
    position: absolute;

    height: 100%;
    width: 100%;

    z-index: 0;
}

.login-card__welcome-foreground {
    display: flex;
    flex-grow: 1;

    background: rgba(0,0,0,.6);

    position: relative;

    z-index: 1;
}

#carouselPagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    overflow: hidden;
    padding-inline: 0.5rem;
}

#carouselPagination .splide__pagination__page {
    flex: 0 0 auto;
}

.white-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.white-dot::before {
    content: "";
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background-color: white;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .homepage-carousel__card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .carousel__track {
        gap: 1rem;
    }

    .jobs-spotlight__card-container {
        padding: 0.75rem;
    }

    .jobs-spotlight .careers__card-job-details {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .homepage-carousel__card {
        padding: 0.9rem !important;
        border-radius: 1.5rem !important;
    }

    .homepage-carousel__card h3 {
        font-size: 0.95rem !important;
        line-height: 1.25;
        margin-bottom: 1rem !important;
    }

    .homepage-carousel__card span {
        font-size: 0.8rem;
    }

    .homepage-carousel__card .button--large {
        font-size: 0.85rem;
        padding: 0.45rem 0.8rem;
    }
    .careers__list {
        flex-direction: column;
        gap: 1.5rem;
    }

    .careers--grid {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .filter-sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    #filter-sidebar {
        flex: 0 0 100%;
        width: 100%;
        max-width: 80%;
    }

    .filter-sidebar .offcanvas-body {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        padding: 1.5rem;
    }

    .filter-sidebar__scroll-content {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 1rem;
    }

    .filter-sidebar__bottom-content {
        position: sticky;
        bottom: 0;
        background: white;
        padding-top: 1rem;
        box-shadow: 0 -10px 20px rgba(255, 255, 255, 0.9);
    }

    .filter-sidebar__bottom-content .button {
        width: 100%;
    }

    .careers__card-job-details {
        grid-template-columns: 1fr;
    }

    .careers__card-content {
        padding: 1rem;
    }

       #carouselPagination {
        gap: 5px;
        margin-top: 1rem !important;
    }

    #carouselPagination .splide__pagination__page {
        width: 6px;
        height: 6px;
    }

    #carouselPagination .splide__pagination__page.is-active {
        width: 22px;
        height: 6px;
    }

    .quote-block__image {
        width: 80% !important;
        max-width: 80% !important;
        align-self: flex-end !important;
        margin-left: auto;
    }

     .mobile-actions-offcanvas {
        --bs-offcanvas-width: 80vw;
        width: 80vw !important;
        max-width: 80vw !important;
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
        overflow: hidden;
    }

    .mobile-menu__login-subtitle {
        color: rgba(151, 151, 151, 0.75);
        font-size: 0.8rem;
    }

    .mobile-menu__login-icon {
        color: #555555;
    }
}
.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    min-width: 0;
}

.umb-block-grid__layout-item {
    position: relative;
    min-width: 0;
}

.umb-block-grid__layout-item:has(.dynamic-card) {
    z-index: 5;
}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    column-gap: var(--umb-block-grid--areas-column-gap, 0);
    row-gap: var(--umb-block-grid--areas-row-gap, 0);

    width: 100%;
}

.umb-block-grid__area {
    position: relative;
    display: flex;
    flex-direction: column;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

@media (min-width:1024px) {
    .umb-block-grid__layout-item {
        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    }

    .umb-block-grid__area {
        grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
    }
}



/**** Custom additions to the default Grid Layout Stylesheet: ****/

.umb-block-grid {
    container-type: inline-size;
}

.umb-block-grid__area {
    justify-content: center;
}

.container .umb-block-grid__area-container
{
    column-gap: 3rem;
    row-gap: 2rem;
}

.container .umb-block-grid__layout-container  {
    row-gap: 2rem;
    align-content: center;
}

@media (max-width: 1023px) {
    .umb-block-grid__layout-container,
    .umb-block-grid__area-container,
    .umb-block-grid__block--view::part(area-container) {
        display: grid;
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        row-gap: 2rem;
        column-gap: 0 !important;
    }

    .umb-block-grid__layout-item,
    .umb-block-grid__area {
        grid-column: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-width: 0;
    }

    .container .umb-block-grid__area-container,
    .container .umb-block-grid__layout-container {
        column-gap: 0 !important;
        row-gap: 2rem;
    }
}