/* ==========================================================================
   Project:         ETHENEA - MAINFIRST GLOBAL SETTINGS
   Author:          SITE POINT GMBH
   Description:     Base CSS file using a desktop-first approach

   ░░ CSS STRATEGY
   ==========================================================================
   - Place all css setups, that are not concerning font, color and CI-Items here
   - Desktop-first: Default styles are optimized for desktop.
   - Mobile/tablet styles are added via media queries directly under each class.
   - Class naming convention: kebab-case (lowercase with hyphens)
   - No grouped media query section at the end. Each class is self-contained.
   - Structure: each section uses numbered headings for clarity.

   ░░ TABLE OF CONTENTS
   ==========================================================================

   01. Base Reset & Globals
   02. Typography / Titles / Headlines
   03. Layout (Wrapper, Grid, Sections)
   04. Header & Navigation
   05. Components (Buttons, Forms, Cards)
   06. Utilities (Spacing, Display, Text)
   07. Slider
   08. Fancy Text
   09. Web Components
   ========================================================================== */

/* ==========================================================================
   01. Base Reset & Globals
   ========================================================================== */

/* ==========================================================================
   02. Typography / Titles / Headlines
   ========================================================================== */

/* 
##########################
  STANDARD HEADLINES
#########################
*/

h2 {
    font-family: "IBM Plex Serif", serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}


/* 
##############################################
  HEADLINE WITH GRADIENT LINES LEFT AND RIGHT 
  AND SUBHEADLINE ABOVE
#############################################
*/

.headline-with-divider-lines {
    --main-headline-color: #1A3857;
    --pre-headline-color: #7F7F7F;
    --post-headline-color: #7F7F7F;
    --line-thickness: 2px;
    --line-width: 40%;
    --grow-right: "1";
    --line-gradient: linear-gradient(to right, var(--main-headline-color) 0%, transparent 100%);
    --line-left-width: 20%;
    --line-left-gradient: linear-gradient(to left, var(--main-headline-color) 0%, transparent 100%);
}

    .headline-with-divider-lines h2 {
        color: var(--main-headline-color);
        display: flex;
        align-items: center;
        justify-content: left;
        text-align: center;
        font-size: 40px;
        font-weight: 500;
        font-family: "IBM Plex Serif", serif;
    }

        .headline-with-divider-lines h2::before,
        .headline-with-divider-lines h2::after {
            content: "";
            height: var(--line-thickness);
            pointer-events: none;
            transform: translateY(15px);
        }

        .headline-with-divider-lines h2:is(.ms-0)::before,
        .headline-with-divider-lines h2:is(.ms-0:not(.line-right))::after {
            display: none;
        }

        /* Left line */
        .headline-with-divider-lines h2::before {
            flex: 0 0 var(--line-left-width, var(--line-width));
            background: var(--line-left-gradient, var(--line-gradient));
            margin-right: 25px;
        }

        /* right line */
        .headline-with-divider-lines h2::after {
            flex: 0 0 var(--line-width, 0);
            background: var(--line-gradient, 0);
            margin-left: 25px;
            flex-grow: var(--grow-right);
        }

/* subheadline above the main headline*/
.pre-headline {
    color: var(--pre-headline-color);
    font-family: "Open Sans", serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 0;
    margin-bottom: 0;
    padding-left: var(--line-left-width, var(--line-width));
    margin-left: 25px;
    word-wrap: break-word;
}

.post-headline {
    color: var(--post-headline-color);
    font-family: "Open Sans", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    padding-bottom: 0;
    margin-bottom: 0;
    padding-left: var(--line-left-width, var(--line-width));
    margin-left: 25px;
    word-wrap: break-word;
}

.headline {
    font-size: 33px;
    line-height: 37px;
}

/* ==========================================================================
   03. Layout (Wrapper, Grid, Sections)
   ========================================================================== */


/* 
################
  Logo
################
*/

header.sticky.sticky-active .navbar-brand .default-logo {
    height: 30px !important;
    transition: height 200ms linear;
    opacity: 1;
    visibility: visible;
}

@media (max-width: 991px) {
    header.sticky.sticky-active .navbar-brand .default-logo,
    header.sticky.sticky-active .navbar-brand .alt-logo {
        display: none;
    }
}


header.sticky .header-light:not(.disable-fixed) {
    box-shadow: none !important;
}

/* 
################
  Header Section
################
*/


#header-section .layer-container {
    --layer-background: var(--eth-primary);
    z-index: 9;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#header-section .layer {
    position: relative;
    width: 100%;
    max-width: 540px;
}

    #header-section .layer.boxed {
        padding: 44px;
        background: var(--layer-background, var(--eth-primary));
        border-radius: 20px;
        backdrop-filter: blur(5px)
    }

.standard-headline-layer span {
    color: white;
    display: block;
    font-size: 32px;
    line-height: 36px;
    font-family: Open Sans, serif;
    font-weight: 400;
    word-wrap: break-word;
    margin-bottom: 30px;
}

.standard-headline-layer h1 {
    color: white;
    font-size: 40px;
    line-height: 50px;
    font-family: IBM Plex Serif, serif;
    font-weight: 700;
    word-wrap: break-word;
    margin-bottom: 30px;
}

.standard-headline-layer p {
    color: white;
    font-size: 21px;
    font-family: Open Sans, serif;
    font-weight: 400;
    word-wrap: break-word;
    margin-bottom: 0;
}

.background-image {
    --background-image-source: #fff;
    background: var(--background-image-source);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


/* 
################
  Footer
################
*/

footer {
    padding: 0px 0px 25px 0px;
}


#quote-section {
    box-shadow: 6px 30px 30px -30px #000;
}

.footer-sticky {
    z-index: -1;
    background-color: #ffffff;
}

.footer-navigation-wrapper {
    text-align: center;
}

.link-list--column-name {
    font-family: "Open Sans", serif;
    font-size: 14px;
    color: #7f7f7f;
    font-weight: 700;
    word-wrap: break-word;
    margin-bottom: 12px;
}

.link-list--list-item {
    margin-bottom: 8px;
    line-height: 16px;
}

.link-list--link {
    color: #1A3857;
    font-size: 13px;
    font-family: Open Sans, serif;
    font-weight: 500;
    word-wrap: break-word
}

.link-list--social-media-wrapper {
    display: grid;
    grid-template-columns: min-content min-content;
    gap: 10px;
}

.link--list--social-link {
    border: 1px solid rgba(26, 56, 87, 0.9);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 24px;
    color: rgba(26, 56, 87, 0.9);
}

/* 
#############################
    Wrapper
#############################
*/

.simple-rte-wrapper p {
    color: inherit;
}

#content {
    position: relative;
    z-index: 1;
    background-color: #ffffff;
}

/* ==========================================================================
   04. Header & Navigation
   ========================================================================== */

/* 
#############################
    Main Navigation Styling
#############################
*/

.header-light .navbar-nav .nav-link {
    color: var(--ethene-submenu-font-color-rgba);
    padding: 10px;
    font-size: var(--nav-font-size);
}

@media (max-width: 768px) {
    header.sticky.sticky-appear .header-reverse-back-scroll.glass-effect {
        height: auto !important;
    }
}

header nav.submenu-light {
    background-color: var(--ethenea-submenu-bg-color) !important;
}

@media (min-width: 1400px) {
    .navbar .navbar-nav .submenu-content .mega-menu {
        width: 1400px;
    }
}

header .navbar .navbar-nav .btn-small {
    font-size: var(--nav-font-size);
}

header.sticky.sticky-appear .header-reverse-back-scroll.glass-effect,
header.sticky.sticky-active [data-header-hover=light] {
    background: linear-gradient(180deg, #1A3857 50%, #2D4966 100%);
    opacity: 0.98;
}

header.sticky.sticky-active [data-header-hover=light] .navbar-nav .nav-link {
    color: var(--ethene-submenu-font-color-rgba);
}

.sticky-active #main-nav {
    background: linear-gradient(180deg, #1A3857 50%, #2D4966 100%);
    opacity: 0.98;
}

header.sticky .navbar.sticky-header-custom {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


.navbar .navbar-nav .dropdown .dropdown-menu {
    padding: 10px 0px 0px 0px !important;
    background: transparent !important;
}


.navbar .navbar-nav .dropdown .simple-dropdown-wrapper, .mega-menu {
    background-color: #1A3857;
    color: var(--ethene-submenu-font-color-rgba);
}

.navbar .navbar-nav .dropdown .simple-dropdown-wrapper {
    background: linear-gradient(180deg, #2D4966 50%, #1A3857 100%);
    opacity: 0.98;
    border-radius: 15px;
    padding: 10px;
}

.mega-menu-wrapper {
    background: none !important;
}

header .navbar [class*=col-] .navbar-nav .nav-item {
    margin-left: 10px;
}

.navbar .navbar-nav .dropdown .dropdown-menu {
    border-top: none !important;
    box-shadow: none;
}

    .navbar .navbar-nav .dropdown .dropdown-menu a,
    .navbar .navbar-nav .simple-dropdown .dropdown-menu .dropdown.open > a {
        color: var(--ethene-submenu-font-color-rgba);
        font-size: var(--nav-font-size);
    }

.mega-menu-item:not(:last-child) {
    border-right: 1px solid transparent;
    border-image: linear-gradient( 180deg, var(--ethenea-themecolor) 0%, #ffffff 25%, #ffffff 75%, var(--ethenea-themecolor) 100% ) 1;
}


/* 
#############################
   Has Slider
#############################
*/


body:not(:has(#page-slider)) .navbar {
    background: linear-gradient(180deg, #1A3857 50%, #2D4966 100%) !important;
    color: var(--ethene-submenu-font-color-rgba);
}

/*Has Video*/
body:has(.swiper-slide-active video) .navbar {
    background: linear-gradient(180deg, #1A3857 50%, #2D4966 100%) !important;
}

body:not(.sticky-active):has(.swiper-slide-active video) .header-light .header-icon .icon > a {
    color: var(--eth-seasalt-rgb);
}

body:not(.sticky-active):has(.swiper-slide-active video) .header-light .header-icon > .language-dropdown button.btn {
    color: var(--eth-seasalt-rgb);
}

body:not(.sticky-active):has(.swiper-slide-active video) .header-light .navbar-nav .nav-link:first-child {
    color: var(--ethene-submenu-font-color-rgba)
}

body:not(.sticky-active):has(.swiper-slide-active video) .header-light .header-icon .icon > a {
    color: var(--ethene-submenu-font-color-rgba);
}

body:not(.sticky-active):has(.swiper-slide-active video) .header-light .nav-item .btn-transparent-white {
    color: var(--ethene-submenu-font-color-rgba);
    border-color: var(--ethene-submenu-font-color-rgba);
}

    body:not(.sticky-active):has(.swiper-slide-active video) .header-light .nav-item .btn-transparent-white:is(:hover, :active) {
        color: var(--eth-eerie-black-max);
        border-color: var(--ethene-submenu-font-color-rgba);
    }

body:not(.sticky-active):has(.swiper-slide-active video) .header-light .navbar-nav .nav-link:first-child {
    color: var(--eth-seasalt-rgb)
}

/*Light*/

body:not(.sticky-active):has(.swiper-slide-active.light):not(:has(.swiper-slide-active video)) .header-light .navbar-nav .nav-link:first-child {
    color: var(--eth-eerie-black-max);
}

body:not(.sticky-active):has(.swiper-slide-active.light):not(:has(.swiper-slide-active video)) .header-light .header-icon .icon > a {
    color: var(--eth-eerie-black-max);
}

body:not(.sticky-active):has(.swiper-slide-active.light):not(:has(.swiper-slide-active video)) .header-light .header-icon > .language-dropdown button.btn {
    color: var(--eth-eerie-black-max);
}

body:not(.sticky-active):has(.swiper-slide-active.light):not(:has(.swiper-slide-active video)) .header-light .navbar-nav .nav-link:first-child .item-name-underline::after {
    background-color: var(--eth-eerie-black-max);
}

body:not(.sticky-active):has(.swiper-slide-active.light):not(:has(.swiper-slide-active video)) .header-light .nav-item .btn-transparent-white {
    color: var(--eth-eerie-black-max);
    border-color: var(--eth-eerie-black-max);
}

    body:not(.sticky-active):has(.swiper-slide-active.light):not(:has(.swiper-slide-active video)) .header-light .nav-item .btn-transparent-white:is(:hover, :active) {
        background-color: var(--eth-seasalt);
        color: var(--eth-eerie-black-max);
        border-color: var(--eth-seasalt);
    }

/*Dark*/

body:not(.sticky-active):has(.swiper-slide-active.dark):not(:has(.swiper-slide-active video)) .header-light .navbar-nav .nav-link:first-child {
    color: var(--eth-seasalt-rgb);
}

body:not(.sticky-active):has(.swiper-slide-active.dark):not(:has(.swiper-slide-active video)) .header-light .header-icon > .language-dropdown button.btn {
    color: var(--eth-seasalt-rgb);
}

body:not(.sticky-active):has(.swiper-slide-active.dark):not(:has(.swiper-slide-active video)) .header-light .header-icon .icon > a {
    color: var(--eth-seasalt-rgb);
}

body:not(.sticky-active):has(.swiper-slide-active.dark):not(:has(.swiper-slide-active video)) .header-light .navbar-nav .nav-link:first-child .item-name-underline::after {
    background-color: var(--eth-seasalt-rgb);
}

body:not(.sticky-active):has(.swiper-slide-active.dark):not(:has(.swiper-slide-active video)) .header-light .nav-item .btn-transparent-white {
    color: var(--eth-seasalt-rgb);
    border-color: var(--eth-seasalt-rgb);
}

    body:not(.sticky-active):has(.swiper-slide-active.dark):not(:has(.swiper-slide-active video)) .header-light .nav-item .btn-transparent-white:is(:hover, :active) {
        background-color: var(--eth-seasalt);
        color: var(--eth-eerie-black-max);
        border-color: var(--eth-seasalt);
    }


@media (max-width: 1024px) {
    .navbar .mega-menu .sub-title {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.navbar .navbar-nav .nav-item:hover .nav-link, .navbar .navbar-nav .nav-item.active .nav-link {
    opacity: 0.9;
    font-weight: lighter;
}

.navbar .navbar-nav .dropdown .dropdown-menu a:hover,
.navbar .navbar-nav .simple-dropdown .dropdown-menu .dropdown.open > a:hover {
    color: var(--ethene-submenu-font-color-rgba);
    font-weight: bolder;
    opacity: 1;
    margin-left: 10px;
}


@media (max-width: 991px) {
    .navbar.bg-transparent, .navbar-modern-inner.bg-transparent, .navbar-full-screen-menu-inner.bg-transparent {
        background-color: transparent !important;
    }

    .navbar .navbar-nav .dropdown .dropdown-menu li {
        padding-left: 0;
    }

    .navbar .navbar-nav .nav-link {
        padding-left: 0 !important;
    }

    .mega-menu-item {
        background: transparent;
    }

        .mega-menu-item:not(:last-child) {
            border-right: none;
            border-bottom: 1px solid transparent;
            border-image: linear-gradient( 90deg, var(--ethenea-themecolor) 0%, #ffffff 25%, #ffffff 75%, var(--ethenea-themecolor) 100% ) 1;
        }

    .navbar-collapse {
        background-image: linear-gradient(180deg, #1A3857 50%, #2D4966 100%);
    }
}


li.sub-title p {
    color: #ffffff;
    font-weight: normal;
    font-size: 12px;
    text-align: left;
}


.navbar .navbar-nav .accordion-style-04 .accordion-item.active-accordion {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}


.item-name-underline {
    position: relative;
    display: inline-block;
}

    .item-name-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        height: 2px;
        width: 0;
        background: #FFFFFF;
        transition: width 250ms ease;
    }


.nav-item:hover .item-name-underline::after,
.nav-item:focus-within .item-name-underline::after {
    width: 100%;
}


/* 
#############################
   Search Form 
#############################
*/

.search-form-wrapper {
    background: none;
}

.navbar-toggler-line {
    background: #ffffff;
}

.show-search-popup .search-form-wrapper .search-form {
    height: 25%;
}

/* 
#############################
   Language Dropdown 
#############################
*/

.language-switcher-menu {
    padding: 8px 12px;
    min-width: 640px;
    max-height: 70vh;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 15px;
    margin-top: 40px !important;
}

.language-switcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px;
    row-gap: 14px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.language-switcher-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.language-switcher-flag {
    padding: 0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}

    .language-switcher-flag .fi {
        font-size: 18px;
    }

.language-switcher-flag-label {
    font-size: 14px;
}

.language-switcher-item {
    padding: 6px 0;
    border-radius: 0;
    white-space: nowrap;
}

@media (max-width: 1400px) {


    .language-switcher-menu {
        min-width: 0;
        width: 100%;
        overflow-y: auto;
        padding: 10px 16px;
    }


    .language-dropdown .dropdown-menu {
        width: min(100vw, 450px);
        max-width: 60vw;
    }

    .language-switcher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 12px;
    }
}


@media (max-width: 991px) {

    .language-dropdown .dropdown-menu {
        width: min(100vw, 300px);
        max-width: 100vw;
    }

    .language-switcher-menu {
        min-width: 0;
        width: 100%;
        overflow-y: auto;
        padding: 10px 16px;
    }

    .language-switcher-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        column-gap: 20px;
        row-gap: 12px;
    }

    .language-switcher-item {
        padding: 8px 0;
    }

    .language-switcher-flag .fi {
        font-size: 20px;
    }
}


/* 
#############################
   Investor Dropdown 
#############################
*/
.investor-type-dropdown select {
    width: auto;
    font-size: var(--nav-font-size);
}

.investor-type-dropdown select, .form-control, .form-select {
    padding: 12px 28px 12px 12px;
}

/* ==========================================================================
   05. Components (Buttons, Forms, Cards)
   ========================================================================== */

/* 
##############################################
  Accordion Collection
#############################################
*/

.accordion-background:is(.accordion-custom-style-01) {
    background: var(--bg-default);
}

.accordion-background:has(.accordion-collapse.show) {
    background: var(--bg-default-active);
}


.accordion-style-01 .accordion-item.accordion-custom-style-01 {
    margin-bottom: var(--mb-default);
    box-shadow: none;
}

.accordion-custom-style-01 .accordion-font-color p {
    color: var(--fc-default);
    margin-bottom: 0px;
}


.accordion-custom-style-01 .fa-angle-down::before {
    content: url('/assets/accordion-chevrons/Chevron down.svg');
}

accordion-custom-style-01 .fa-angle-up::before {
    content: url('/assets/accordion-chevrons/Chevron up.svg');
}

.main-content .accordion-custom-style-01 {
    border-radius: 8px !important;
    border: 1px solid #D9D9D9;
    padding: 16px;
    --bg-default: #F5F5F5;
    --bg-default-active: #fff;
    --fs-default: 16px;
    --fc-default: #000;
    --fc-default-active: #000;
    --font-weight-default: 600px;
    --mb-default: 16px;
}

.accordion-style-01 .accordion-item .accordion-body.accordion-font-color {
    padding-top: 0px;
    padding-bottom: 0px;
}

.accordion-style-01 .accordion-item .accordion-title.accordion-font-color {
    font-size: var(--fs-default);
    color: var(--fc-default-active);
    font-weight: var(--font-weight-default);
}

.accordion-style-01 .accordion-item .collapsed .accordion-title.accordion-font-color {
    color: var(--fc-default);
}

.accordion-custom-style-01 .accordion-title i {
    color: #000;
}

/* 
##############################################
  TABBING VERTICAL
#############################################
*/

.tab-vertical-custom-style-01 {
    --base-color: #ac8d56;
    --fc-default: #525252;
    --fc-default-active: #fff;
    border-color: #000;
}


@media(min-width: 1200px){
    .ethena-tabbing {
        min-height: 542px;
        max-height: 542px;
    }

    .ethenea-tabbing-text-column div {
        box-sizing: border-box;
        overflow-y: auto;
        max-height: 380px;
    }
}



.tab-style-07 .nav-tabs .nav-item .tab-vertical-custom-style-01.nav-link:hover span, .tab-style-07 .nav-tabs .nav-item .nav-link span {
    color: var(--fc-default-active);
}
.tab-style-07 .nav-tabs .nav-item .nav-link.tab-vertical-custom-style-01 span{
    color: var(--fc-default);
}

.tab-style-07 .nav-tabs .nav-item .nav-link.active span {
    color: var(--fc-default-active);
}
/* 
##############################################
  ICON/TEXT COUNTER
#############################################
*/

.text-counter-custom-01{
    --fc-counter: #000;   
}
.text-counter-custom-01 h2{
    color: var(--fc-counter);
    font-weight: 800;
    font-family: 'Open Sans';
}




    /* 
##############################################
  SETTING STYLE FOR COMMON BUTTON CLASS
#############################################
*/
.btn {
    font-family: "Open Sans", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: 1px solid transparent;
}


/* 
##############################################
  DIVIDER WITH GRADIENT LINES LEFT AND RIGHT  
#############################################
*/

.divider-lines-with-gradient {
    /* Color Schema */
    --main-headline-color: #1A3857;
    --sub-headline-color: #7F7F7F;
    /* Common Defaults */
    --line-thickness: 2px;
    /* Optional common Fallbacks (used when no specific variables are set) */
    --line-width: 50%;
    --line-gradient: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* Specific Variables (overrides the fallback) */
    --line-left-width: 50%;
    --line-left-gradient: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    text-align: center;
}

    .divider-lines-with-gradient span::before,
    .divider-lines-with-gradient span::after {
        content: "";
        height: var(--line-thickness);
        pointer-events: none;
        display: inline-block;
    }

    /* Left line */
    .divider-lines-with-gradient span::before {
        /* fix width due to the variable, fallback: --line-width */
        flex: 0 0 var(--line-left-width, var(--line-width));
        background: var(--line-left-gradient, var(--line-gradient));
        width: var(--line-left-width, var(--line-width));
    }

    /* right line */
    .divider-lines-with-gradient span::after {
        flex: 0 0 var(--line-right-width, var(--line-width));
        background: var(--line-right-gradient, var(--line-gradient));
        width: var(--line-right-width, var(--line-width));
    }


/* 
##########################
  INTERACTIVE BANNER ICON
#########################
*/

.interactive-banner-style-02 > div,
.interactive-banner-style-02 figure figcaption {
    border-radius: 20px;
}

    .interactive-banner-style-02 figure figcaption .features-teaser-text {
        margin-bottom: -90px;
        height: 0;
        opacity: 0;
        visibility: hidden;
    }

.interactive-banner-style-02:hover figure figcaption .features-teaser-text {
    margin-bottom: 0;
    height: 250px;
    opacity: 1;
    visibility: visible;
}

/** use line-clamp **/
.teaser-text-content {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 
##########################
  CARD / COLOR TRANSITION 
#########################
*/

.card-topper {
    background-color: #fff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    z-index: -1;
    position: relative;
}

.card-bottom-per {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}


.card-overlay-effect {
    position: sticky !important;
    top: 0;
    z-index: 0;
}

.card-element-custom-style {
    --bg-color-default: #fff;
    --bg-btn-default: #1A3857;
    --fc-btn-default: #fff;
    --bg-btn-default-hover: #fff;
    --fc-btn-default-hover: #1A3857;
    --title-color: #525252;
    background-color: var(--bg-color-default);
    color: var(--title-color);
}

    .card-element-custom-style .btn.btn-medium {
        padding: 5px 10px;
        border-radius: 30px;
        font-size: 12px;
        color: var(--fc-btn-default);
        background-color: var(--bg-btn-default);
        text-transform: none;
    }

    .card-element-custom-style .btn i {
        margin-left: 5px;
    }

    .card-element-custom-style .btn.btn-medium:hover {
        background-color: var(--bg-btn-default-hover);
        color: var(--fc-btn-default-hover);
    }

    .card-element-custom-style img {
        max-width: 120px;
        transform: translate(-15px, 10px);
    }

    

/* 
##########################
  ICON TEXT
#########################
*/
.iconTextWrapper .iconText {
    background-image: url("/assets/staticImages/vertical-line.svg");
    background-repeat: no-repeat;
    background-position: right center;
    color: #334E69;
    transition: color 1.5s ease;
}

    .iconTextWrapper .iconText:last-child {
        background-image: none;
    }

    .iconTextWrapper .iconText .iconTextNumber {
        font-weight: 300;
        color: #334E69;
        transition: color 1.5s ease;
    }

    .iconTextWrapper .iconText .feature-box-content span {
        font-family: var(--ethenea-primary-font), serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 21px;
    }

.mostly-out-of-view .iconText, .mostly-out-of-view .iconText i, .mostly-out-of-view .iconTextWrapper .iconText .iconTextNumber {
    transition: color 0.7s ease;
    color: #4D647C;
}

.mostly-out-of-view .iconTextWrapper .iconText {
    background-image: url("/assets/staticImages/vertical-line-grey.svg");
    transition: background-image 0.7s ease;
}

/* 
##########################
 Badges 
#########################
*/

figure div.label {
    width: 220px;
    font-size: 12px;
}


/* ==========================================================================
   06. Utilities (Spacing, Display, Text)
   ========================================================================== */

.vh-50 {
    height: 50vh;
}

.vh-33 {
    height: 33vh;
}

/* Min Heights */
.min-height-40 {
    min-height: 40px;
}

/* 
################
  Carousel 
################
*/

.carousel-x-visible .swiper-slide {
    transition: opacity 500ms ease;
}


    .carousel-x-visible .swiper-slide.swiper-slide-active,
    .carousel-x-visible .swiper-slide.swiper-slide-next,
    .carousel-x-visible .swiper-slide.swiper-slide-next + .swiper-slide {
        opacity: 1;
    }

/* 
################
  Content Carousel 
################
*/
.content-carousel-custom {
    --bg-color: #fff;
    --bg-color-hover: #1A3857;
    --fc: #1A3857;
    --fc-hover: #fff;
}
    .content-carousel-custom .btn.btn-link{
        border-bottom: none;
        font-family: 'Open sans';
    }

    .content-carousel-custom .content-box {
        background-color: var(--bg-color);
        color: var(--fc);
    }
    .content-carousel-custom figure figcaption a {
        color: var(--fc);
    }
    .content-carousel-custom .box-overlay {
        background-color: var(--bg-color-hover);
        color: var(--fc-hover);
    }
    .content-carousel-custom .box-title{
        font-family: 'Open sans';
    }
.services-box-style-05.content-carousel-custom figure:hover figcaption .box-title{
    color: var(--fc-hover);
}
.services-box-style-05.content-carousel-custom figure:hover figcaption .btn-link {
    color: var(--fc-hover);
}

/* 
################
  Image Carousel
################
*/

.image-carousel-custom{

}
    .image-carousel-custom .slider-one-slide-prev-06 {
        background-color: #1A3857;
    }
    .image-carousel-custom .slider-one-slide-next-06 {
        background-color: #1A3857;
    }
    
    
    
/* 
################
  Buttons
################
*/
/* white with eth blue background */
.btn-eth {
    --hover-color: var(--main-headline-color);
    --color: #fff;
    background-color: var(--main-headline-color);
    border-color: var(--main-headline-color);
    color: var(--color);
}

    .btn-eth:hover {
        --hover-color: var(--color);
        --color: var(--main-headline-color);
        border-color: var(--main-headline-color);
    }


/* eth blue font with transparent background */
.btn-transparent-eth {
    --hover-color: #fff;
    --color: var(--main-headline-color);
    background-color: transparent;
    border-color: var(--color);
    color: var(--color);
}

    .btn-transparent-eth:hover {
        color: var(--hover-color);
    }


/* 
################
  Backgrounds
################
*/

.bg-ethenea {
    background: linear-gradient(180deg, #2D4966 50%, #1A3857 100%);
    opacity: 0.98;
}

/* 
##########################
  QUOTE TEXT
#########################
*/
.footer-quote {
    text-align: center;
    background-image: url(/assets/staticImages/quote.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding: 40px 80px;
}

    .footer-quote .text-fill-effect {
        color: #FFF;
        text-align: center;
        font-family: "IBM Plex Serif", serif;
        font-size: 36px;
        font-style: italic;
        font-weight: 500;
        line-height: 50px;
    }

.footer-quote-author {
    color: #ffffff;
    font-family: "Open Sans", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    padding-top: 30px;
    text-align: right;
}

.position-absolute-center {
    left: 50%;
    transform: translateX(-50%);
}


/* ==========================================================================
   07. Slider
   ========================================================================== */
#page-slider {
    --progress-duration: 10;
    --progress-color: rgba(189, 154, 93, 1);
    --slide-container-alpha: 0%;
    --blur-color: rgba(0, 0, 0, 0.2);
    --blur: 5%;
}

    #page-slider:has(.swiper-slide-active.light) {
        --typo-color: var(--eth-primary-dark);
        --typo-color-invert: #fff;
        --typo-color-inactive: var(--eth-primary);
    }

    #page-slider:has(.swiper-slide-active.dark) {
        --typo-color: #fff;
        --typo-color-invert: #000;
        --typo-color-inactive: rgba(255, 255, 255, 0.4);
    }

    #page-slider .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #fff;
        background-size: cover;
        background-position: center;
    }

        #page-slider .swiper-slide .slide-media-container {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            left: 0;
            top: 0;
        }


            #page-slider .swiper-slide .slide-media-container img,
            #page-slider .swiper-slide .slide-media-container video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
            }

    #page-slider .swiper-slide-content {
        display: flex;
        padding: 150px 60px 75px 60px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 9;
    }

    #page-slider .swiper-pagination {
        padding: 0 60px;
        --swiper-pagination-bottom: 100px;
        left: 0;
    }

    #page-slider .custom-pagination {
        display: flex;
        gap: 36px;
    }

        #page-slider .custom-pagination span {
            cursor: pointer;
            font-family: "Open Sans", sans-serif;
            font-size: 16px;
            font-weight: 400;
            color: var(--typo-color-inactive);
            position: relative;
            display: inline-block;
            padding-bottom: 4px;
            max-width: 125px;
            width: 100%;
            text-align: left;
            line-height: 22px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

            #page-slider .custom-pagination span.active {
                color: var(--typo-color);
                font-weight: 700;
            }

            #page-slider .custom-pagination span .progress-bar {
                position: absolute;
                bottom: -10px;
                left: 0;
                height: 3px;
                width: 100%;
                background-color: var(--typo-color);
                overflow: hidden;
            }

            #page-slider .custom-pagination span .progress-fill {
                display: block;
                height: 100%;
                width: 0;
                background-color: var(--progress-color, #007bff);
                animation: progressFillAnim var(--progress-duration, 10s) linear forwards;
            }

    #page-slider .slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #page-slider .slide-badge-container {
        display: flex;
        gap: 15px;
    }

    #page-slider .slide-text-layer .blur-wrapper {
        padding: 0;
    }

        #page-slider .slide-text-layer .blur-wrapper > *:last-child {
            margin-bottom: 0;
        }

    #page-slider .slide-badge {
        aspect-ratio: 7/10;
        object-fit: cover;
        height: 15vh;
    }

    #page-slider .slide-badges {
        align-self: flex-end;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        gap: 30px;
    }

    #page-slider.no-autoplay .custom-pagination span .progress-fill {
        background-color: transparent;
    }

    #page-slider .slide-text-layer {
        position: relative;
    }

        #page-slider .slide-text-layer .blur-content {
            --blur-padding: 32px 80px 32px 32px;
            padding: var(--blur-padding);
            backdrop-filter: blur(var(--blur, 5px));
            background-color: var(--blur-color);
            border-radius: 55px;
        }

            #page-slider .slide-text-layer .blur-content > *:last-child {
                margin-bottom: 0;
            }

    #page-slider .slide-badges .btn {
        --white: var(--typo-color);
        --dark-gray: var(--typo-color);
    }

        #page-slider .slide-badges .btn:hover {
            color: var(--typo-color-invert);
        }

            #page-slider .slide-badges .btn:hover .bg-white {
                background-color: var(--typo-color-inactive) !important;
            }

@keyframes progressFillAnim {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@media (max-width: 991px) {
    #page-slider .swiper-slide-content {
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }

    #page-slider .slide-badges {
        display: none;
    }

    #page-slider .swiper-pagination {
        --swiper-pagination-bottom: 50px;
    }

    #page-slider .blur-content,
    #page-slider .blur-wrapper {
        width: 100% !important;
    }

    #page-slider .slide-text-layer {
        font-size: 80%;
    }

    #page-slider .custom-pagination .progress-bar {
        display: none;
    }

    #page-slider .custom-pagination .pagination-label {
        display: none;
    }

    #page-slider .custom-pagination {
        gap: 5px;
        justify-content: center;
    }

        #page-slider .custom-pagination > span {
            position: relative;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

            #page-slider .custom-pagination > span::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 10px;
                height: 10px;
                background-color: #ccc;
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: background-color 0.3s ease;
            }
}

/* ==========================================================================
   08. Fancy Text 
   ========================================================================== */
.scroll-detect {
    --text-fill-active-color: #000;
    --text-fill-inactive-color: #b3b3b3;
    --text-fill-placeholder: rgba(0, 0, 0, 0.5);
}

.fancy-text-gradient {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.text-fill-effect {
    --text-fill-color: linear-gradient(to right, var(--text-fill-active-color), var(--text-fill-active-color));
    -webkit-text-fill-color: var(--text-fill-placeholder);
    position: relative;
    background-image: var(--text-fill-color);
    background-size: calc(var(--scroll-start, 0) * 100%) 100%;
    background-repeat: no-repeat;
    text-shadow: none !important;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: inherit;
}

.all-ts {
    transition: all 0.5s linear;
}

/* 
################
Fancy text box
################
*/
.text-box-custom-style {
    --bg-color-default: #fff;
    --bg-btn-default: #1A3857;
    --fc-btn-default: #fff;
    --bg-btn-default-hover: #fff;
    --fc-btn-default-hover: #1A3857;
    --title-color: #525252;
    --subtitle-color: #525252;
    --icon-color: #525252;
    background-color: var(--bg-color-default);
    
}

    .text-box-custom-style .btn.btn-medium {
        width: fit-content;
        padding: 5px 10px;
        border-radius: 30px;
        font-size: 12px;
        color: var(--fc-btn-default);
        background-color: var(--bg-btn-default);
        text-transform: none;
    }

    .text-box-custom-style .btn i {
        margin-left: 0px;
    }

    .text-box-custom-style .btn.btn-medium:hover {
        background-color: var(--bg-btn-default-hover);
        color: var(--fc-btn-default-hover);
    }
    .text-box-custom-style .title-text-box {
        color: var(--title-color);
    }
    .text-box-custom-style .subtitle-text-box{
        color: var(--subtitle-color);
    }
    .text-box-custom-style .icon-color {
        color: var(--icon-color);
    }

/* 
################
Carousel + Progressbar 
################
*/

.news-slide {
    --news-slide-width: 280x;
    width: var(--news-slide-width);
}

@media (max-width: 1024px) {
    .news-slide img {
        width: 100%;
    }
}

.slider--with-scrollbar .slider-scrollbar {
    max-width: 500px;
    margin: 72px auto 0 auto;
    background-color: #fff;
}

.swiper-scrollbar-drag {
    position: relative;
}

    /* increases the hitbox without affecting the visuals */
    .swiper-scrollbar-drag::before {
        content: '';
        position: absolute;
        --drag-hitbox-size: -10px;
        top: var(--drag-hitbox-size);
        bottom: var(--drag-hitbox-size);
        left: var(--drag-hitbox-size);
        right: var(--drag-hitbox-size);
        cursor: pointer;
    }

.slider--with-scrollbar .swiper-scrollbar-drag {
    --swiper-scrollbar-drag-bg-color: rgba(189, 154, 93, 1);
}

/** newsletter box **/
.newsletter-card {
    max-width: 750px;
    width: 100%;
    margin: 0 auto 0 auto;
    background-color: #223f5d;
    border-radius: 25px;
}

    .newsletter-card h5 {
        color: white;
        font-size: 32px;
        font-family: Open Sans, serif;
        font-weight: 600;
        word-wrap: break-word;
        margin-bottom: 36px;
        text-align: center;
    }

    .newsletter-card p {
        color: white;
        font-size: 16px;
        font-family: Open Sans, serif;
        font-weight: 400;
        line-height: 21px;
        word-wrap: break-word;
        text-align: center;
        margin-bottom: 0;
    }

.newsletter-inputs {
    display: flex;
    border-radius: 25px;
    border: 1px solid #fff;
    --placeholder-color: var(--main-headline-color);
}

    .newsletter-inputs input[type=text] {
        font-weight: 600;
        font-family: "Open Sans", serif;
        font-size: 16px;
        line-height: 21px;
        padding: 6px 12px;
        border-radius: 25px 0 0 25px;
        border: 0;
    }

    .newsletter-inputs button {
        display: block;
        max-width: 200px;
        color: #fff;
        width: 100%;
    }

        .newsletter-inputs button:hover {
            color: #fff;
        }

    /** style placeholders for all browser **/
    /* Für die meisten modernen Browser */
    .newsletter-inputs input[type="text"]::placeholder {
        color: var(--placeholder-color) !important;
        font-weight: 600;
        font-family: "Open Sans", serif;
        font-size: 16px;
        opacity: 1;
    }

    /* Für Internet Explorer 10-11 */
    .newsletter-inputs input[type="text"]:-ms-input-placeholder {
        color: var(--placeholder-color) !important;
        font-weight: 600;
        font-family: "Open Sans", serif;
        font-size: 16px;
    }

    /* Für Edge */
    .newsletter-inputs input[type="text"]::-ms-input-placeholder {
        color: var(--placeholder-color) !important;
        font-weight: 600;
        font-family: "Open Sans", serif;
        font-size: 16px;
    }

    /* safari Webkit */
    .newsletter-inputs input[type="text"]::-webkit-input-placeholder {
        color: var(--placeholder-color) !important;
        font-weight: 600;
        font-family: "Open Sans", serif;
        font-size: 16px;
    }


/* ==========================================================================
   08. Web Components
   ========================================================================== */

.fund-overview-card {
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
}

    .fund-overview-card .card-header {
        background-color: var(--eth-primary);
        color: var(--eth-seasalt);
        border-bottom: var(--eth-gold-100) 4px solid;
    }

.fund-overview-accordion {
    border-radius: 12px;
}

    .fund-overview-accordion .accordion-header, .accordion-button {
        background-color: var(--eth-primary) !important;
        color: var(--eth-seasalt) !important;
    }

    .fund-overview-accordion .accordion-button:not(.collapsed) {
        background-color: var(--eth-primary) !important;
        color: var(--eth-seasalt) !important;
    }

    .fund-overview-accordion .accordion-button:after {
        content: none;
    }

    .fund-overview-accordion .accordion-button:not(.collapsed):after {
        content: none;
    }