html {
    height: 100%;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: url('/images/header-hero_image-oil-collection.webp') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;  /* Bild bleibt beim Scrollen fixiert */
}
body::before {
    content: "";
    position: fixed;             /* <- Wichtig */
    inset: 0;
    background-color: #003457c9;
    background-image: linear-gradient(#002c49a3, #002c4900 25%);
    pointer-events: none;        /* Damit nichts blockiert wird */

}

.w-lightbox-inactive,
.w-lightbox-inactive:hover {
    opacity: 0;
}

.w-richtext:before,
.w-richtext:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

.w-richtext:after {
    clear: both;
}

.w-richtext[contenteditable="true"]:before,
.w-richtext[contenteditable="true"]:after {
    white-space: initial;
}

.w-richtext ol,
.w-richtext ul {
    overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,
.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after,
.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,
.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
    outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video>div:after,
.w-richtext figure[data-rt-type="video"]>div:after {
    content: "";
    display: none;
    position: absolute;
    inset: 0;
}

.w-richtext figure {
    max-width: 60%;
    position: relative;
}

.w-richtext figure>div:before {
    cursor: default !important;
}

.w-richtext figure img {
    width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
    opacity: .6;
}

.w-richtext figure div {
    color: #0000;
    font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image,
.w-richtext figure[data-rt-type="image"] {
    display: table;
}

.w-richtext figure.w-richtext-figure-type-image>div,
.w-richtext figure[data-rt-type="image"]>div {
    display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image>figcaption,
.w-richtext figure[data-rt-type="image"]>figcaption {
    caption-side: bottom;
    display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video,
.w-richtext figure[data-rt-type="video"] {
    width: 60%;
    height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe,
.w-richtext figure[data-rt-type="video"] iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.w-richtext figure.w-richtext-figure-type-video>div,
.w-richtext figure[data-rt-type="video"]>div {
    width: 100%;
}

.w-richtext figure.w-richtext-align-center {
    clear: both;
    margin-left: auto;
    margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,
.w-richtext figure.w-richtext-align-center[data-rt-type="image"]>div {
    max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
    clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
    text-align: center;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.w-richtext figure.w-richtext-align-fullwidth>div {
    padding-bottom: inherit;
    display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth>figcaption {
    display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
    float: left;
    clear: none;
    margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
    float: right;
    clear: none;
    margin-left: 15px;
}

.w-nav {
    z-index: 1000;
}

.w-nav:before,
.w-nav:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

.w-nav:after {
    clear: both;
}

.w-nav-brand {
    float: left;
    color: #333;
    text-decoration: none;
    position: relative;
}

.w-nav-link {
    vertical-align: top;
    color: #222;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.w-nav-link.w--current {
    color: #0082f3;
}

.w-nav-menu {
    float: right;
    position: relative;
}

[data-nav-menu-open] {
    text-align: center;
    background: #c8c8c8;
    min-width: 200px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: visible;
    display: block !important;
}

.w--nav-link-open {
    display: block;
    position: relative;
}

.w-nav-overlay {
    width: 100%;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
    top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
    width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay,
.w-nav[data-animation="over-left"] [data-nav-menu-open] {
    z-index: 1;
    top: 0;
    right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
    width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay,
.w-nav[data-animation="over-right"] [data-nav-menu-open] {
    z-index: 1;
    top: 0;
    left: auto;
}

.w-nav-button {
    float: right;
    cursor: pointer;
    -webkit-tap-highlight-color: #0000;
    tap-highlight-color: #0000;
    -webkit-user-select: none;
    user-select: none;
    padding: 18px;
    font-size: 24px;
    display: none;
    position: relative;
    color: #0082f3;
}

.w-nav-button:focus {
    outline: 0;
}

.w-nav-button.w--open {
    color: #fff;
    background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
    display: none;
}

.w-nav[data-collapse="all"] .w-nav-button,
.w--nav-dropdown-open,
.w--nav-dropdown-toggle-open {
    display: block;
}

.w--nav-dropdown-list-open {
    position: static;
}



@media screen and (max-width: 767px) {
    .w-nav[data-collapse="small"] .w-nav-menu {
        display: none;
    }

    .w-nav[data-collapse="small"] .w-nav-button {
        display: block;
    }

    .w-nav-brand {
        padding-left: 10px;
    }
}

@media screen and (max-width: 479px) {
    .w-nav[data-collapse="tiny"] .w-nav-menu {
        display: none;
    }

    .w-nav[data-collapse="tiny"] .w-nav-button {
        display: block;
    }
}

.w-tabs {
    position: relative;
}

.w-tabs:before,
.w-tabs:after {
    content: " ";
    grid-area: 1 / 1 / 2 / 2;
    display: table;
}

.w-tabs:after {
    clear: both;
}

.w-tab-menu {
    position: relative;
}

.w-tab-link {
    vertical-align: top;
    text-align: left;
    cursor: pointer;
    color: #222;
    background-color: #ddd;
    padding: 9px 30px;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.w-tab-link.w--current {
    background-color: #c8c8c8;
}

.w-tab-link:focus {
    outline: 0;
}

.w-tab-content {
    display: block;
    position: relative;
    overflow: hidden;
}

.w-tab-pane {
    display: none;
    position: relative;
}

.w--tab-active {
    display: block;
}

@media screen and (max-width: 479px) {
    .w-tab-link {
        display: block;
    }
}

.w-ix-emptyfix:after {
    content: "";
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.w-dyn-empty {
    background-color: #ddd;
    padding: 10px;
}

.w-dyn-hide,
.w-dyn-bind-empty,
.w-condition-invisible {
    display: none !important;
}

.wf-layout-layout {
    display: grid;
}

.w-code-component>* {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

:root {
    --purablue: #0078c9;
    --light-blue: #f3f7fa;
    --red: #e4481f;
    --off-black: #3c4852;
    --alice-blue: #dae3eb;
    --medium-turquoise: #00dede;
}

.w-layout-grid {
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

body {
    color: #333;
    font-family: Gothampro, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1 {
    color: var(--purablue);
    margin-top: 0;
    margin-bottom: 0;
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.1;
}

h2 {
    color: var(--purablue);
    margin-top: 0;
    margin-bottom: 0;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
}

h3 {
    color: var(--purablue);
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
}

h5 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5;
}

h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
}

p {
    margin-bottom: 0;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.25rem;
}

li {
    margin-bottom: .25rem;
}

img {
    max-width: 100%;
    display: inline-block;
}
@media (max-width: 767px) {
    .navbar_logo {
        content: url('/images/puraglobe ocs logoblue.svg');
        max-width: 90%;
    }
}
label {
    margin-bottom: .25rem;
    font-weight: 500;
}

blockquote {
    border-left: .25rem solid #e2e2e2;
    margin-bottom: 0;
    padding: .75rem 1.25rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

figure {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

figcaption {
    text-align: center;
    margin-top: .25rem;
}

.z-2 {
    z-index: 2;
    position: relative;
}

.global-styles {
    display: block;
    position: fixed;
    inset: 0% auto auto 0%;
}

.icon-1x1-small {
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    display: flex;
}

.button {
    background-color: var(--purablue);
    color: #fff;
    text-align: center;
    letter-spacing: .05rem;
    text-transform: uppercase;
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    border-top-left-radius: .625rem;
    border-bottom-right-radius: .625rem;
    border-bottom-left-radius: .625rem;
    justify-content: center;
    align-items: center;
    padding: .75rem .625rem .5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    transition: background-color .6s cubic-bezier(.19, 1, .22, 1), background-position .6s cubic-bezier(.075, .82, .165, 1);
}

.button:hover {
    background-color: #0090cd;
}

.button.is-small {
    font-size: 1rem;
}

.button.is-large {
    font-size: 1.5rem;
}

.heading-medium {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1.2;
}

.heading-large {
    color: var(--purablue);
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
}

.heading-xlarge {
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.1;
}

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

.text-size-large {
    font-size: 1.5rem;
}

.text-size-regular {
    font-size: 1rem;
}

.text-weight-normal {
    font-weight: 400;
}

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

.z-1 {
    z-index: 1;
    position: relative;
}

.background-color-grey {
    background-color: #a8c1d833;
}

.hide {
    display: none;
}

.text-size-medium {
    font-size: 1.25rem;
}

.text-style-link {
    color: var(--purablue);
    text-decoration: underline;
}

.text-style-muted {
    opacity: .6;
}

.text-size-small {
    font-size: .875rem;
}

.text-rich-text h1 {
    color: var(--purablue);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.text-rich-text h2 {
    color: var(--purablue);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 2.25rem;
}

.text-rich-text h3 {
    color: var(--purablue);
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.text-rich-text h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.text-rich-text h5 {
    margin-top: 1.25rem;
    margin-bottom: .75rem;
}

.text-rich-text h6 {
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}

.text-rich-text p,
.text-rich-text blockquote,
.text-rich-text ul {
    margin-bottom: .75rem;
}

.text-rich-text a {
    color: var(--purablue);
}

.max-width-xlarge {
    width: 100%;
    max-width: 75rem;
}

.max-width-medium {
    width: 100%;
    max-width: 32rem;
}

.form-input {
    background-color: #0000;
    min-height: 3rem;
    margin-bottom: .75rem;
    padding: .5rem 1rem;
}

.form-input.is-text-area {
    min-height: 8rem;
    padding-top: .75rem;
}

.icon-1x1-medium {
    width: 3rem;
    height: 3rem;
}

.container-large {
    width: 100%;
    max-width: 87.5rem;
    margin-left: auto;
    margin-right: auto;
}

.padding-global {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.show-tablet {
    display: none;
}

.max-width-large {
    width: 100%;
    max-width: 48rem;
}

.max-width-large.align-center {
    margin-left: auto;
    margin-right: auto;
}

.icon-1x1-large {
    width: 4rem;
    height: 4rem;
}

.form-message-error {
    margin-top: .75rem;
    padding: .75rem;
}

.utility_component {
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
}

.utility_form-block {
    text-align: center;
    flex-direction: column;
    max-width: 20rem;
    display: flex;
}

.utility_form {
    flex-direction: column;
    align-items: stretch;
    display: flex;
}

.utility_image {
    margin-bottom: .5rem;
    margin-left: auto;
    margin-right: auto;
}

.container-medium {
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.container-small {
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.button-secondary {
    color: #FFFFFF;
    text-align: center;
    text-transform: uppercase;
    background-color: #0000;
    border: .125rem solid #0078c999;
    border-top-left-radius: .625rem;
    border-bottom-right-radius: .625rem;
    border-bottom-left-radius: .625rem;
    justify-content: flex-start;
    align-items: center;
    padding: .75rem .625rem .5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    transition: border-color .2s;
}

.button-secondary:hover {
    color: var(--purablue);
    border-color: #0078c9;
}

.button-secondary.is-small {
    font-size: 1rem;
}

.button-secondary.is-small.is--mainmenu {
    color: var(--light-blue);
    border-color: #f3f7fa99;
    transition: background-color .3s cubic-bezier(.215, .61, .355, 1), border-color .2s;
}

.button-secondary.is-small.is--mainmenu:hover {
    background-color: #f3f7fa17;
}

.button-secondary.is-large {
    font-size: 1.5rem;
}

.button-text {
    color: #386eec;
    text-align: center;
    background-color: #0000;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.margin-xxsmall {
    margin: .25rem;
}

.margin-xsmall {
    margin: .5rem;
}

.margin-small {
    margin: 1rem;
}

.margin-medium {
    margin: 2rem;
}

.margin-large {
    margin: 3rem;
}

.margin-xlarge {
    margin: 4rem;
}

.margin-xxlarge {
    margin: 5rem;
}

.margin-huge {
    margin: 6rem;
}

.margin-xhuge {
    margin: 8rem;
}

.margin-xxhuge {
    margin: 12rem;
}

.margin-between-sections {
    margin: 20rem;
}

.margin-0 {
    margin: 0;
}

.padding-small {
    padding: 1rem;
}

.padding-medium {
    padding: 2rem;
}

.padding-large {
    padding: 3rem;
}

.padding-xxlarge {
    padding: 5rem;
}

.padding-xhuge {

}

.padding-xxhuge {
    padding: 12rem;
}

.text-style-allcaps {
    text-transform: uppercase;
}

.margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

.margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.margin-left {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}

.margin-vertical {
    margin-left: 0;
    margin-right: 0;
}

.padding-top {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.padding-bottom {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.padding-vertical {

}

.heading-small {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
}

.text-weight-medium {
    font-weight: 500;
}

.heading-xxlarge {
    margin-top: 10px;
    font-size: 7vw;
    font-weight: 700;
    line-height: 1;
}

.navbar_dropdwn-toggle {
    color: var(--light-blue);
    text-transform: uppercase;
    cursor: default;
    height: 100%;
    padding: .5rem 2.25rem .25rem .75rem;
    transition: background-color .3s cubic-bezier(.19, 1, .22, 1);
}

.navbar_dropdwn-toggle:hover {
    background-color: #f3f7fa17;
}

.navbar_menu-buttons {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    display: flex;
}

.dropdown-icon {
    opacity: .6;
    align-items: center;
    margin-top: .6rem;
    margin-bottom: .5rem;
    margin-right: .75rem;
    display: flex;
    position: absolute;
    inset: 0% 0% 0% auto;
}

.navbar_menu-dropdown {
    height: 100%;
}

.navbar_link {
    color: var(--light-blue);
    text-transform: uppercase;
    align-items: center;
    height: 100%;
    padding: .5rem 1rem .25rem;
    transition: color .6s cubic-bezier(.19, 1, .22, 1);
    display: flex;
}

.navbar_link:hover {
    background-color: #f3f7fa17;
}

.navbar_link.w--current {
    color: var(--light-blue);
    transition-property: background-color;
    transition-duration: .3s;
}

.navbar_link.w--current:hover {
    background-color: #f3f7fa17;
}

.navbar_logo-img {
    color: var(--light-blue);
    width: 100%;
    height: 100%;
}

.navbar1_dropdown-link {
    color: var(--purablue);
    white-space: nowrap;
    padding: .5rem 0;
    font-weight: 500;
    transition: color .6s cubic-bezier(.19, 1, .22, 1);
}

.navbar1_dropdown-link:hover,
.navbar1_dropdown-link.w--current {
    color: var(--red);
}

.navbar_dropdown-list.w--open {
    background-color: #fff;
    padding: 1rem;
    right: auto;
    box-shadow: 0 20px 1.1rem -6px #38526359;
}

.navbar_dropdown-list.is-right {
    right: 0%;
}

.navbar_container {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.navbar_logo-link {
    flex: 1;
    align-items: center;
    width: auto;
    height: 3.5rem;
    display: flex;
}
@media (max-width: 767px) {
    .navbar_logo-link {
       margin-top: 15px;
    }
}
.navbar_logo-link.w--current {
    width: 15rem;
}

.navbar_menu {
    align-items: center;
    display: flex;
}

.navbar_menu-button {
    padding: 0;
}

.navbar_component {
    background-color: #fff0;
    align-items: center;
    height: 7.5rem;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
}
@media (max-width: 767px) {
    .navbar_component {
        background: rgb(49 49 49); /* Auf Handy: Blau */
        height: 5rem;
        position: relative;  /* Eltern-Element als Bezug */
    }
}

.navbar_button-wrapper {
    margin-left: 1rem;
}

.section-header {
    flex-direction: column;
    justify-content: center;
    min-height: 42rem;
    display: flex;
    position: relative;
}

.header_background-image-wrapper {
    z-index: -1;
    background-image: linear-gradient(#00000080, #00000080);
    position: absolute;
    inset: 0%;
}

.image-overlay-layer {
    z-index: 1;
    background-color: #003457c9;
    background-image: linear-gradient(#002c49a3, #002c4900 25%);
    position: absolute;
    inset: 0%;
}

.header54_background-image {
    object-fit: cover;
    object-position: 50% 80%;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.text-color-white {
    color: #fff;
}

.label-large {
    letter-spacing: .04rem;
    text-transform: uppercase;
    font-size: 2.24rem;
    font-weight: 700;
    line-height: 1;
}

.icon-1x1-xsmall {
    width: 1.5rem;
    height: 1.5rem;
}

._2col-feature_component {
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    display: grid;
}

.label-regular {
    letter-spacing: .04rem;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1;
}

.layout210_component {
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    display: grid;
}

.button-row {
    flex-wrap: wrap;
    align-items: center;
    display: flex;
}

.section-contact {
    background-color: var(--off-black);
    background-image: url("https://cdn.prod.website-files.com/627a1a694d816cc56821fe4c/62d6690d6aba1195b139dffe_contact-wave-right.webp"), url("https://cdn.prod.website-files.com/627a1a694d816cc56821fe4c/62d6690d1701300ddfc65904_contact-wave-left.webp");
    background-position: 100% 0, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 100%, auto 100%;
    position: relative;
}

.video-overlay-layer {
    z-index: 1;
    background-color: #00000080;
    position: absolute;
    inset: 0%;
}

.button-wrapper {
    margin-top: 1rem;
    margin-right: 1rem;
}

.background-color-lightblue {
    background-color: var(--light-blue);
}

.footer3_link-list {
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    grid-auto-columns: 100%;
    place-items: flex-start start;
    display: flex;
}

.line-divider {
    background-color: var(--purablue);
    width: 100%;
    height: 1px;
}

.footer3_bottom-wrapper {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.social-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.footer3_logo-link {
    float: none;
    padding-left: 0;
}

.footer3_top-wrapper {
    grid-column-gap: 4vw;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.footer3_social-list {
    grid-column-gap: .75rem;
    grid-row-gap: 0rem;
    white-space: normal;
    grid-template-rows: auto;
    grid-template-columns: max-content;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    place-items: start;
    display: grid;
}

.footer3_legal-list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 0rem;
    white-space: normal;
    grid-template-rows: auto;
    grid-template-columns: max-content;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    justify-content: center;
    display: grid;
}

.footer3_social-link {
    align-items: center;
    font-size: 14px;
    text-decoration: none;
    display: flex;
}

.footer3_menu-wrapper {
    grid-column-gap: 2rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.layout348_mobile-image {
    width: 100%;
    position: absolute;
}

.background-layer {
    z-index: -1;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0%;
}

.background-layer.background-color-3 {
    background-color: #fff;
}

.background-layer.background-color-2,
.background-layer.background-color-4 {
    background-color: var(--light-blue);
}

.background-holder {
    z-index: -999;
    opacity: 0;
    position: relative;
}

.layout348_mobile-image-wrapper {
    display: none;
}

.layout348_content {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    display: flex;
}

.layout348_image {
    width: 100%;
    position: absolute;
}

.layout348_desktop-image-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
}

.layout348_component {
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: stretch;
    display: grid;
    position: relative;
}

.background-color-blue {
    background-color: var(--purablue);
    color: #f5f5f5;
}

.layout116_component {
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: end;
    display: grid;
}

.layout116_lightbox-image {
    object-fit: cover;
    width: 100%;
    height: 37.5rem;
}

.layout116_lightbox {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
}

.lightbox-play-icon {
    z-index: 2;
    color: #fff;
    width: 64px;
    height: 64px;
    position: absolute;
}

.section-layout38 {
    position: relative;
}

.layout38_background-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.image-overlay-layer-black {
    z-index: 1;
    background-color: #0003;
    background-image: linear-gradient(#00000057, #0000 26%);
    position: absolute;
    inset: 0%;
}

.layout38_background-image-wrapper {
    z-index: -1;
    background-image: linear-gradient(#00000080, #00000080);
    position: absolute;
    inset: 0%;
}

.pricing22_row-content {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    font-weight: 600;
    display: flex;
}

.pricing22_component {
    width: 100%;
}

.pricing22_row {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: stretch;
    padding-left: 0;
}

.pricing22_row.background-color-blue {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
}

.pricing22_feature {
    padding: 1rem 1.5rem;
}

.breadcrumb-link {
    color: #000;
    text-decoration: none;
}

.breadcrumb-link.w--current {
    font-weight: 600;
}

.blogpost2_content-bottom {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.blogpost2_share-wrapper {
    flex-direction: column;
    align-items: center;
    display: flex;
}

.blogpost2_header {
    position: relative;
}

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

.blogpost2_breadcrumb {
    align-items: center;
    width: 100%;
    display: flex;
}

.blogpost2_content-top {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
}

.blogpost2_hero {
    z-index: -1;
}

.breadcrumb-divider {
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
    margin-right: .5rem;
    display: flex;
}

.blogpost2_content {
    margin-bottom: 4rem;
}

.blogpost2_share {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    grid-template-rows: auto;
    grid-template-columns: max-content;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    justify-items: start;
    display: grid;
}

.blogpost2_divider {
    background-color: var(--purablue);
    width: 100%;
    max-width: 48rem;
    height: 1px;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.blog4-header_image-wrapper {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    overflow: hidden;
}

.blog4-header_featured-image-wrapper {
    width: 100%;
    padding-top: 66%;
    position: relative;
    overflow: hidden;
}

.blog4-header_list {
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.blog4-header_featured-item {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    margin-bottom: 4rem;
    display: grid;
}

.blog4-header_image-link {
    width: 100%;
    margin-bottom: 1.5rem;
}

.blog4-header_featured-item-content {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 0 0 0 3rem;
    display: flex;
}

.blog4-header_title-link {
    margin-bottom: .5rem;
    text-decoration: none;
    display: block;
}

.blog4-header_title-link.featured-post {
    margin-top: .5rem;
    margin-bottom: 1rem;
}

.blog4-header_image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.blog4-header_category-link {
    margin-bottom: .5rem;
    margin-right: 1rem;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.blog4-header_category-link.w--current {
    border-bottom: 2px solid #000;
}

.positions_content {
    position: sticky;
    top: 8rem;
}

.positions_component {
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: .75fr 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    display: grid;
}

.positions_job-details-wrapper {
    display: flex;
}

.career12_title-wrapper {
    cursor: pointer;
    align-items: center;
    display: flex;
}

.positions_item {
    border-top: 1px solid var(--alice-blue);
    overflow: hidden;
}

.positions_icon-wrapper {
    flex: none;
    margin-right: .75rem;
}

.positions_detail-wrapper {
    align-items: center;
    margin-right: 1.5rem;
    display: flex;
}

.positions_list-wrapper {
    overflow: hidden;
}

.heading-single_component {
    grid-column-gap: 5rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    display: grid;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
}

.blogpost1_breadcrumb {
    align-items: center;
    width: 100%;
    margin-bottom: 1.5rem;
    display: flex;
}

.blogpost1_title-wrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    position: sticky;
    top: 7.5rem;
}

.jobs-template_jobs-details-wrapper {
    flex-direction: column;
    display: flex;
}

.jobs-template_detail-wrapper {
    align-items: flex-start;
    margin-right: 1.5rem;
    display: flex;
}

.heading-single_detail-wrapper {
    display: flex;
}

.contact24_item {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.contact24_component {
    grid-column-gap: 2rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: start;
    display: grid;
}

.section-header5 {
    position: relative;
}

.layout132_component {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    display: grid;
}

.layout132_image-wrapper {
    width: 100%;
    padding-top: 56%;
    position: relative;
    overflow: hidden;
}

.layout132-heading-wrapper {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0%;
}

.layout186_background-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.section-proven-performance {
    justify-content: center;
    align-items: center;
    position: relative;
}

.provenperformance_background-image-wrapper {
    z-index: -1;
    background-image: linear-gradient(#00000080, #00000080);
    position: absolute;
    inset: 0%;
}

.layout227_item {
    text-align: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
}

.layout227_component {
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 3fr 1fr;
    grid-auto-columns: 1fr;
    place-items: start center;
    display: grid;
}

.section-layout227 {
    position: relative;
}

.layout227_background-image-wrapper {
    z-index: -1;
    background-image: linear-gradient(#00000080, #00000080);
    position: absolute;
    inset: 0%;
}

.layout227_background-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.section-provenperformance_content-wrapper {
    align-items: center;
    display: flex;
    position: relative;
}

.layout132_image {
    object-fit: cover;
    position: absolute;
    inset: 0%;
}

.button-tertiary {
    border-style: none none solid;
    border-width: .125rem;
    border-color: var(--purablue) var(--purablue) var(--red);
    color: var(--purablue);
    text-align: center;
    letter-spacing: .04rem;
    text-transform: uppercase;
    background-color: #0000;
    background-image: none;
    justify-content: center;
    align-items: center;
    padding: .75rem 0 .5rem 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: border-color .6s cubic-bezier(.19, 1, .22, 1);
}

.button-tertiary:hover {
    border-color: var(--medium-turquoise) var(--medium-turquoise) var(--purablue);
    color: var(--purablue);
}

.label-small {
    letter-spacing: .02rem;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.1;
}

.gallery10_lightbox-link {
    width: 100%;
}

.gallery_collection-list {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.header5_background-image {
    object-fit: contain;
    object-position: 65vw 50%;
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.cta4_background-image-wrapper {
    z-index: -1;
    position: absolute;
    inset: 0%;
}

.header-100vh-2 {
    align-items: center;
    max-height: 100vh;
    display: flex;
}

.heading_hero-title {
    text-transform: uppercase;
    font-size: 12.9vw;
    font-weight: 900;
    line-height: .9;
}

.percent----reveal-wrapper {
    overflow: hidden;
}

.parallax----cover {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%);
}

.tabs----content {
    padding-top: 4em;
}

.tabs----menu {
    display: flex;
}

.footer-grid----item {
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    width: 33.3333%;
    display: flex;
    position: relative;
}

.percent----number-wrapper {
    color: #0078c9;
    margin-bottom: 2rem;
}

.oil----bg-wrapper {
    width: 41.9375em;
    position: absolute;
    top: -5em;
    left: 50%;
    transform: translate(-50%);
}

.hero----logo {
    width: 34.375em;
    margin-bottom: 2em;
    display: block;
}

.hero----logo.hide {
    display: none;
}

.percent----over-text {
    z-index: 2;
    position: relative;
}

.label-wrapper-__-font {
    margin-top: 2em;
}

.oil----arrow {
    align-items: center;
    width: 39em;
    height: 1.5625em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
    left: -1em;
    overflow: hidden;
}

.anim-05----trigger {
    height: 100vh;
}

.anim-01----trigger {
    height: 10vh;
}

.anim-00----bubble-inner {
    position: absolute;
    left: 0;
}

.tabs----image {
    padding-top: 85%;
    position: relative;
}

.map----image-outer {
    position: relative;
}

.footer----title {
    flex: 1;
    align-items: flex-end;
    margin-bottom: 1em;
    display: flex;
}

.percent----texture {
    object-fit: cover;
    height: 100%;
}

.percent----img-wrapper {
    padding-top: 60%;
    position: relative;
}

.percent----img-wrapper.x-portrait {
    padding-top: 150%;
}

.hero-text----oil-hack {
    background-color: #fff;
    height: .1em;
    position: absolute;
    left: 0%;
    right: 0%;
}

.hero-text----oil-hack.x-top {
    bottom: 99.75%;
}

.hero-text----oil-hack.x-bottom {
    top: 99.75%;
}

.grid {
    grid-column-gap: 3.75em;
    grid-row-gap: 3.75em;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.grid.z-3 {
    overflow: hidden;
}

.map----image-inner {
    height: 133.333%;
    position: absolute;
    inset: 0%;
}

.anim-06----trigger-wrapper {
    padding-bottom: 5vh;
}

.preloader {
    z-index: 9999;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    inset: 0%;
}

.hero----bubble {
    width: 38em;
    height: 38em;
}

.oil----jar {
    position: relative;
}

.oil----jar.x-right {
    transform: translate(30em);
}

.oil----jar.x-left {
    transform: translate(-30em);
}

.hero----arrow-wrapper {
    position: absolute;
    inset: auto 0% 0%;
}

.page {
    color: #000;
    line-height: 1.6;
}

.label-__-font {
    color: #0078c9;
    text-transform: uppercase;
    font-size: .875em;
    font-weight: 500;
    line-height: 1.4;
}

.label-__-font.x-loader {
    color: #ff3d00;
}

.map----circle {
    background-color: #0078c91a;
    border-radius: 50%;
    width: 150vw;
    height: 150vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tabs----menu-text {
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.4;
}

.map----image-wrapper {
    height: 75vh;
    position: relative;
    overflow: hidden;
}

.hero-text----oil-dark {
    position: absolute;
}

.oil----jar-text-line {
    border-right: .0625rem dotted #0078c9;
    width: .0625em;
    height: 3.5em;
    margin-bottom: .5em;
    margin-left: auto;
    margin-right: auto;
}

.percent----symbol {
    margin-left: .75rem;
    font-size: 4em;
    display: inline-block;
}

.container {
    width: 100%;
    max-width: 87rem;
    margin-left: auto;
    margin-right: auto;
}

.oil----body-copy {
    max-width: 26.25em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
}

.footer----globe {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
}

.oil----jar-wrapper {
    width: 30.1875em;
    position: absolute;
    top: -14em;
    left: 50%;
    transform: translate(-50%);
}

.oil----jar-wrapper.x-right {
    z-index: 1;
}

.oil----jar-wrapper.x-left {
    z-index: 2;
}

.anim-00----trigger-01 {
    height: 50vh;
}

.hero----arrow-head {
    width: .625em;
    max-width: none;
    height: 1.5625em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.anim-00 {
    position: relative;
}

.percent----number {
    letter-spacing: -.05em;
}

.percent----number.x-dec {
    height: 8em;
}

.percent----number.x-unit {
    height: 10em;
}

.h-wrapper {
    padding-left: 3.75em;
    padding-right: 3.75em;
}

.preloader----position {
    text-align: right;
    position: absolute;
    inset: 4em 0%;
}

.anim-06 {
    position: relative;
}

.loop----item {
    flex: none;
    width: 25%;
    padding-left: 2%;
    padding-right: 2%;
    position: relative;
}

.loop----item.x-last {
    padding-top: 8em;
}

.hero----text {
    text-transform: uppercase;
    font-size: 10.75em;
    font-weight: 900;
    line-height: .84;
}

.map----image-text {
    text-align: right;
    width: 17.8em;
    padding-right: 2em;
    position: absolute;
    bottom: 0;
    right: 100%;
}

.contain {
    max-width: 28.125rem;
    padding-left: 3.75em;
    padding-right: 3.75em;
}

.percent----number-mask {
    height: 1em;
    font-size: 8em;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    overflow: hidden;
}

.loop----button {
    position: absolute;
    bottom: -1em;
    right: -1em;
}

.hero-text----oil-bg {
    width: 5em;
    max-width: none;
}

.relative-__-pos,
.anim-01 {
    position: relative;
}

.preloader----group {
    position: absolute;
    inset: auto 0% 0%;
}

.hero----arrow-body {
    background-image: linear-gradient(to right, #000, #0078c9 25%);
    width: 100%;
    height: .3125em;
}

.percent----texture-wrapper {
    position: absolute;
    inset: 3.75em 3.75em 18em;
}

.anim-00----scene {
    position: sticky;
    top: 0;
}

.map----circle-wrapper {
    width: 1.75em;
    height: 1.75em;
    position: absolute;
    top: 64%;
    left: 55%;
}

.oil----jar-text-wrapper {
    margin-top: -2.6em;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
}

.map----outline-wrapper {
    width: 20.25em;
    position: absolute;
    top: 0;
    left: 0;
}

.oil----content {
    position: relative;
}

.percent----img-container {
    width: 100%;
    position: relative;
}

.percent----img-container.x-bottom {
    padding-top: 2em;
}

.percent----img-container.x-middle {
    transform-style: preserve-3d;
    padding-left: 3.75em;
    transform: translate3d(0, 0, -30rem);
}

.percent----img-container.x-top {
    padding-right: 3.75em;
}

.hero-text----oil-wrapper {
    position: relative;
    overflow: hidden;
}

.oil----arrow-body {
    background-image: linear-gradient(to right, #000, #0078c9 25%);
    width: 100%;
    height: .3125em;
}

.tabs----menu-link {
    color: #8091ab;
    text-align: center;
    background-color: #0000;
    border-bottom: .125rem solid #c0c8d5;
    flex: 1 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
}

.tabs----menu-link.w--current {
    color: #0078c9;
    background-color: #0000;
    border-bottom-color: #0078c9;
}

.hero-text----oil-left {
    position: relative;
    overflow: hidden;
}

.hero-text----oil-bg-wrappper {
    width: .1em;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.anim-01----scene {
    position: sticky;
    top: 0;
}

.section-2 {
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
}

.section-2.x-relative {
    position: relative;
}

.section-2.x-overflow {
    overflow: visible;
}

.oil----header {
    max-width: 34.375em;
    margin-left: auto;
    margin-right: auto;
}

.anim-05 {
    position: relative;
}

.oil----arrow-head {
    width: .625em;
    max-width: none;
    height: 1.5625em;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.preloader----count {
    color: #0078c9;
    text-align: right;
    letter-spacing: -.05em;
    font-size: 8em;
    font-weight: 700;
    line-height: 1;
}

.map----outline {
    width: 100%;
    max-width: none;
}

.hero----target-inner {
    z-index: -2;
}

.oil----arrow-wrapper {
    margin-bottom: 1em;
}

.anim-05----scene {
    position: sticky;
    top: 0;
}

.hero-text----bg {
    grid-column-gap: .25em;
    display: none;
}

.map----image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.parallax {
    overflow: hidden;
}

.bg-video {
    opacity: 0;
    height: 133.33%;
    position: absolute;
    inset: 0%;
}

.anim-00----bubble-wrapper {
    width: 100%;
    position: absolute;
    top: 100%;
}

.anim-00----transition-trigger {
    height: 25vh;
}

.anim----trigger-wrapper {
    padding-bottom: 100vh;
}

.v-wrapper {
    padding-top: 12em;
    padding-bottom: 12em;
}

.footer-grid {
    grid-column-gap: 2rem;
    align-items: flex-start;
    max-width: 100%;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
}

.hero-text----oil-outter {
    overflow: hidden;
}

.hero-text----oil-image {
    height: .75em;
    display: block;
    position: relative;
}

.bg-video----wrapper {
    position: absolute;
    inset: 0%;
    overflow: hidden;
}

.hero----arrow {
    transform-origin: 100% 100%;
    align-items: center;
    width: 6em;
    height: 1.5625em;
    display: flex;
    position: absolute;
    bottom: 4em;
    right: 4em;
    overflow: hidden;
    transform: rotate(90deg);
}

.big-__-font {
    color: #fff;
    font-size: 4em;
    font-weight: 700;
    line-height: 1;
}

.card----image-wrapper {
    margin-bottom: 2rem;
    position: relative;
}

.card----image-wrapper.x-footer {
    margin-bottom: 0;
    padding-top: 120%;
}

.oil {
    text-align: center;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.hero----bubble-wrapper {
    z-index: -100;
    position: absolute;
    top: 0%;
    left: 100%;
    transform: translate(-15em, -12em);
}

.label-large-__-font {
    color: #fff;
    text-transform: uppercase;
    font-size: 2.3125em;
    font-weight: 500;
    line-height: 1;
}

.anim-00----bubble {
    width: 20em;
    height: 20em;
    transform: rotate(135deg);
}

.globe----inner {
    display: inline-block;
    position: relative;
}

.globe----arrow-mask {
    background-color: #fff;
    width: 2em;
    position: absolute;
    top: -.3em;
    bottom: 50%;
    left: 50%;
}

.card----image {
    width: 100%;
}

.card----image-inner {
    overflow: hidden;
}

.loop----list {
    display: flex;
}

.loop----list.x-progress {
    position: absolute;
    inset: .375em 33.3333% 0% 0%;
}

.loop----banner {
    width: 100%;
    position: absolute;
    top: 3em;
    left: 0;
}

.no-break {
    white-space: nowrap;
}

.globe {
    text-align: center;
}

.globe---text {
    justify-content: center;
    align-items: center;
    margin-bottom: -1em;
    display: flex;
    position: absolute;
    inset: 0% -3em;
}

.loop----progress {
    background-image: linear-gradient(to right, #00375c, #0078c9 50%, #00dede);
    border-radius: 1.3125rem;
    position: absolute;
    inset: 0%;
}

.loop----progress-wrapper {
    border-radius: 1.3125rem;
    width: 150%;
    height: 2.625em;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
}

.anim-03----trigger-02 {
    margin-top: -50vh;
}

.globe----inner-group,
.globe----dot-line-outer,
.globe----arrow-wrapper {
    position: absolute;
    inset: 0%;
}

.globe----arrow-wrapper.x-03 {
    transform: rotate(-120deg);
}

.globe----arrow-wrapper.x-02 {
    transform: rotate(120deg);
}

.loop {
    margin-top: 8rem;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0, -50%);
}

.blue-__-font {
    color: #0078c9;
}

.anim-03----trigger-01,
.anim-02----trigger-transition {
    height: 100vh;
}

.anim-03----trigger-02-item {
    height: 50vh;
}

.loop----infinite {
    width: 3.75em;
    position: absolute;
    top: .45em;
    right: .5em;
}

.anim-03----scene {
    position: sticky;
    top: 0;
}

.globe----dot-line {
    border: .0625em dashed #0078c9;
    border-radius: 50%;
    position: absolute;
    inset: -3.375em;
}

.anim-03 {
    position: relative;
}

.anim-03----trigger-wrapper {
    margin-top: -100vh;
    padding-bottom: 100vh;
}

.globe----particles-wrapper {
    width: 25.875em;
    position: relative;
}

.globe----arrow-head {
    width: .75em;
    position: absolute;
    bottom: 100%;
    right: 50%;
    transform: translate(0, 50%);
}

.z-3 {
    z-index: 3;
    position: relative;
}

.percentage-wrapper {
    align-items: flex-end;
    display: flex;
}

.globe----endless-wrapper {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0%;
}

.navbar_dropdown-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    display: flex;
}

.navbar_dropdown-content-img-txt {
    width: 14rem;
}

.navbar_dropdown-toggle-txt {
    align-items: center;
    height: 100%;
    display: flex;
}

.section_header-hero {
    flex-direction: column;
    justify-content: center;
    height: 88vh;
    min-height: 37.5rem;
    display: flex;
    position: relative;
}
/* Auf kleineren Bildschirmen wird die Höhe größer */
@media (max-width: 768px) {
    .section_header-hero {
        height: 0vh;
    }
}

@media (max-width: 480px) {
    .section_header-hero {
        height: 0vh;
    }
}
/* SEHR kleines Smartphone (z.B. iPhone SE) */
@media (max-width: 360px) {
    .section_header-hero {
        height: 0vh;

    }
}
.header-hero_background-image-wrapper {
    z-index: -1;
    background-image: linear-gradient(#00000080, #00000080);
    position: absolute;
    inset: 0%;
}

.header-hero_background-image {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
}

.section_intro {
    margin-bottom: -3.75rem;
    position: relative;
    top: -3.75rem;
}

.section-intro_content-wrapper {
    grid-column-gap: 3.75rem;
    grid-row-gap: 3.75rem;
    border-top: 3.75rem solid #fff;
    grid-template-rows: auto;
    padding-top: 3.75rem;
    padding-left: 3.75rem;
    padding-right: 3.75rem;
}

.text-puraglobe {
    font-weight: 900;
}

.heading-wrapper {
    margin-bottom: 2.75rem;
}

.heading-line {
    background-color: var(--red);
    width: 7.5rem;
    height: .25rem;
    margin-top: 1.875rem;
}

.heading-line.is-light {
    background-color: var(--light-blue);
}

.feature-list-horizontal_item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    align-items: center;
    display: flex;
}

.feature-list_horizontal {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-direction: column;
    display: flex;
}

.intro-image-wrapper {
    flex-direction: column;
    align-items: center;
    display: flex;
    position: relative;
    top: -6.25rem;
}

.section-feature-wave_component {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.header-content {
    display: flex;
    justify-content: space-between;
    gap: 90px;
    /* Mehr Abstand für bessere Lesbarkeit */
    align-items: center;
}

.header-login {
    background: rgb(49 49 49 / 70%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    /* Weicher Schatten */
    /* Dunkler, halbtransparenter Hintergrund */
    padding: 25px;
    border-radius: 10px;
    /* Kleinere, kompakte Breite */
    text-align: center;
    /* Leichter Schatten für 3D-Effekt */
}

.login-title {
    font-size: 22px;
    font-weight: bold;
    color: white;
    margin-bottom: 15px;
}

/* Inputs */
.header-login input {
    width: 93%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

/* Login-Button */
.header-login button {
    width: 100%;
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}

.header-login button:hover {
    background-color: #0056b3;
}

/* Links */
.login-links {
    margin-top: 15px;

    text-align: center;
    /* Links mittig ausrichten */
}

.login-links a {
    color: #FFFFFF;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;


}

.login-links a:hover {
    color: #007BFF;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: center;
        margin-top: 100px;
    }

    .header-login {
        width: 100%;
        max-width: 350px;
    }
}

@media only screen and (min-width: 1480px) {

    .video-right_background-video-wrapper,
    .slider,
    .section-image-right {
        margin-left: calc((100vw - 87.5rem)/2);
    }
}

/* static page-padding for screen-sizes <1361px */
@media only screen and (max-width: 1480px) {

    .video-right_background-video-wrapper,
    .slider,
    .section-image-right {
        margin-left: 2.5rem;
    }
}

/* static page-padding for screen-sizes <569px */
@media only screen and (max-width: 568px) {

    .video-right_background-video-wrapper,
    .slider,
    .section-image-right {
        margin-left: 0rem;
    }
}

/* Max width of title on homepage hero */
@media only screen and (min-width: 1440px) {
    .heading_hero-title {
        font-size: 9rem;
    }
}

/* Max width of heading-xxlarge */
@media only screen and (min-width: 1440px) {
    .heading-xxlarge {
        font-size: 5rem;
    }
}

/* Removes last comma in lists on career pages */
.positions_collection-list-item:last-child .cms-comma {
    display: none
}

/* Snippet gets rid of top margin on first element in any rich text*/
.w-richtext>:first-child {
    margin-top: 0;
}

/* Snippet gets rid of bottom margin on last element in any rich text*/
.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
    margin-bottom: 0;
}

/* Snippet prevents all click and hover interaction with an element */
.clickable-off {
    pointer-events: none;
}

/* Snippet enables all click and hover interaction with an element */
.clickable-on {
    pointer-events: auto;
}

/* Snippet enables you to add class of div-square which creates and maintains a 1:1 dimension of a div.*/
.div-square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/*Hide focus outline for main content element*/
main:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

/* Make sure containers never lose their center alignment*/
.container-medium,
.container-small,
.container-large {
    margin-right: auto !important;
    margin-left: auto !important;
}

/*Reset buttons, and links styles*/
a {
    color: inherit;
    text-decoration: inherit;
    font-size: inherit;
}

/*Apply "..." after 3 lines of text */
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/*Apply "..." after 2 lines of text */
.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Adds inline flex display */
.inline-flex {
    display: inline-flex;
}

/* Styling für die Checkbox */
.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Abstand zwischen Checkbox und Text */
    font-size: 14px;
    color: white;
    margin-top: 10px;
    cursor: pointer;
}

/* Checkbox Standard-Styling */
.checkbox-container input {
    width: 16px;
    height: 16px;
    accent-color: #007BFF;
    /* Blaue Checkbox */
}

/* Optional: Stil für Hover- und Fokus-Effekt */
.checkbox-container label {
    font-size: 16px;
}
@media (max-width: 768px) { /* Tablets & kleine Bildschirme */
    .header-login {
        width: 90%; /* Breite auf 90% des Bildschirms setzen */
        max-width: 350px; /* Maximale Breite beibehalten */
        padding: 20px; /* Weniger Innenabstand */
    }

    .login-title {
        font-size: 20px; /* Kleinere Schriftgröße */
    }

    .header-login input:not([type="checkbox"]) {
        font-size: 14px; /* Kleinere Schrift in Inputs */
    }

    .header-login button {
        font-size: 14px;
        padding: 8px; /* Weniger Padding für kleinere Buttons */
    }

    .login-links {
        font-size: 14px;
    }
}

@media (max-width: 480px) { /* Smartphones */
    .header-login {
        width: 95%; /* Noch schmaler für kleine Bildschirme */
        padding: 15px; /* Weniger Padding */
        border-radius: 5px; /* Weniger Abrundung */
    }

    .login-title {
        font-size: 18px; /* Noch kleiner für kleine Screens */
    }

    .header-login input:not([type="checkbox"]) {
        padding: 8px; /* Weniger Innenabstand */
        font-size: 14px;
        width: 97%;
    }

    .header-login button {
        font-size: 14px;
        padding: 8px;
    }

    .login-links {
        font-size: 12px;
    }
}
/* Container für den Passwort vergessen Bereich */
.forgot-password-container {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    text-align: center;
    background: rgb(49 49 49 / 70%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

}

/* Titel */
.forgot-password-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--purablue);

}

/* Beschreibungstext */
.forgot-password-text {
    font-size: 16px;
    margin-bottom: 20px;
    color: #FFFFFF;
}

/* Eingabefeld */
.forgot-password-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Button-Container */
.forgot-password-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Buttons */
.forgot-password-buttons button {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

/* Weiter-Button */
.forgot-password-buttons button[type="submit"] {
    background-color: #007BFF;
    /* Orange */
    color: white;
}

.forgot-password-buttons button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Abbrechen-Button */
.forgot-password-buttons button[type="button"] {
    background-color: #ccc;
    color: black;
}

.forgot-password-buttons button[type="button"]:hover {
    background-color: #bbb;
}

/* Responsives Design */
@media (max-width: 600px) {
    .forgot-password-container {
        width: 90%;
    }

    .forgot-password-buttons {
        flex-direction: column;
    }

    .forgot-password-buttons button {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Container für den Passwort-Reset Bereich */
.password-reset-container {
    padding: 30px;
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    background: rgb(49 49 49 / 70%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Titel */
.password-reset-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Beschreibungstext */
.password-reset-text {
    font-size: 16px;
    margin-bottom: 20px;
    color: #FFFFFF;
}

/* Eingabefelder */
.password-reset-container input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Checkbox für Passwort anzeigen */
.password-toggle {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #FFFFFF;
}

.password-toggle input {
    margin-right: 8px;
    /* Abstand feinjustieren */
    width: 18px;
    /* Optional: Größe der Checkbox anpassen */
    height: 18px;
}

/* Button-Container */
.password-reset-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Buttons */
.password-reset-buttons button {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

/* Speichern-Button */
.password-reset-buttons button[type="submit"] {
    background-color: #007BFF;
    /* Grün */
    color: white;
}

.password-reset-buttons button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Abbrechen-Button */
.password-reset-buttons button[type="button"] {
    background-color: #ccc;
    color: black;
}

.password-reset-buttons button[type="button"]:hover {
    background-color: #bbb;
}

/* Passwort-Anforderungen */
.password-requirements {
    text-align: left;
    margin-bottom: 10px;
}

.password-requirements p {
    margin: 5px 0;
    color: #999;
}

.password-requirements .valid {
    color: #28a745;
    /* Grün */
}

.password-requirements .invalid {
    color: #dc3545;
    /* Rot */
}

/* Responsives Design */
@media (max-width: 600px) {
    .password-reset-container {
        width: 90%;
    }

    .password-reset-buttons {
        flex-direction: column;
    }

    .password-reset-buttons button {
        width: 100%;
        margin-bottom: 10px;
    }
}
/* Registrierungsformular Container */
.registration-container {
    padding: 30px;
    border-radius: 10px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    background: rgb(49 49 49 / 70%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Titel */
.registration-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--purablue);
}

/* Beschreibungstext */
.registration-text {
    font-size: 16px;
    margin-bottom: 20px;
    color: #FFFFFF;
}

/* Eingabefelder */
.registration-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Flexbox für die Felder */
.input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.input-group input {
    flex: 1;
}

/* Anrede-Box */
.radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    margin-bottom: 15px;
}

/* Legende (Titel "Anrede *") */
.radio-group legend {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Container für die Radiobuttons */
.radio-options {
    display: flex;
    gap: 20px;
}

/* Styling für Labels */
.radio-options label {
    font-size: 16px;
    display: flex;
    align-items: center;
    /* Sorgt für vertikale Zentrierung */
    gap: 8px;
    /* Abstand zwischen Button und Text */
    cursor: pointer;
}

/* Styling für Radiobuttons */
.radio-options input[type="radio"] {
    margin: 0;
    /* Entfernt unnötige Abstände */
    width: 18px;
    /* Feste Größe */
    height: 18px;
    accent-color: #007BFF;
    /* Blaue Farbe für Auswahl */
}

.registration-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Buttons */
.registration-buttons button {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

/* Registrieren-Button */
.registration-buttons button[type="submit"] {
    background-color: #007BFF;
    color: white;
}

.registration-buttons button[type="submit"]:hover {
    background-color: #0056b3;
}

/* Abbrechen-Button */
.registration-buttons button[type="button"] {
    background-color: #ccc;
    color: black;
}

.registration-buttons button[type="button"]:hover {
    background-color: #bbb;
}

/* Responsive Anpassung */
@media (max-width: 600px) {
    .registration-container {
        width: 90%;
    }

    .input-group {
        flex-direction: column;
    }

    .registration-buttons {
        flex-direction: column;
    }

    .registration-buttons button {
        width: 100%;
        margin-bottom: 10px;
    }
}

.w-nav-button {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .navbar_menu {
        display: none;
        flex-direction: column;
        background: rgb(49 49 49);
        color: #333;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        padding: 10px 0;
        /* Entfernt unnötiges Padding */
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 999;
        width: 100%;
        border-radius: 0;        /* Keine abgerundeten Ecken */
    }

    .w-nav-button {
        display: block;
    }

    .navbar_menu a {
        color: #ffffff;
        text-decoration: none;
        font-size: 18px;
        display: block;
    }
}

.navbar_menu.show {
    display: flex !important;
}