/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

/* 

**  Global Variables Definition

**  

*/



body {

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    background-color: var(--color-background-1);

}



/*  Brand   */



:root {

    --color-accent: #C1272D;

    --color-accent-hover: #ad2328;

    --color-accent-light: #F9E9EA;

    --color-accent-contrast: #ffffff;

    --color-link: rgb(5, 1, 113);

    --color-link-hover: rgb(69, 65, 177);

    --color-dark-green: #538348;

    --color-status-green: #00AF31;

    --color-status-orange: #CA9100;

    --color-status-red: #7D0000;

    --color-positive: #69be5b;

    --color-positive-background: #d6f6d9;

}



/*  Main Interface Colors  */



:root {

    --color-content-1: rgb(11, 11, 11);

    --color-content-2: rgb(104, 104, 104);

    --color-content-3: rgba(0, 0, 0, 0.1);

    --color-content-4: #777777;

    --color-content-5: rgba(26, 25, 30, 0.5);

    --color-content-inverse: rgb(255, 255, 255);

    --color-background-1: rgb(255, 255, 255);

    --color-background-2: #f6f7f9;

    --color-background-3: #F8F3EF;

    --color-background-4: #e3e3e3;

    --color-background-inverse: rgb(11, 11, 11);

    --color-background-1-hover: #f0f0f0;

    --color-background-2-hover: #d9d9d9;

    --color-background-3-hover: rgb(133, 133, 133);

    --color-background-4-hover: #ebebeb;

    --color-background-5-hover: #7A181B;

    --color-background-6-hover: #cfcfcf;

    --color-background-inverse-hover: rgb(48, 48, 48);

    --color-transparent: rgba(#f5ece3, 0);

    --color-shadow: #1018281a;

}



/*  Support Colors  */



:root {

    --input-border-color: #d2d2d2;

    --input-background-disabled: #e9e9e9;

}



/*  Layout Spacing  */



:root {

    --base-space: 0.125;

    --space-1: calc(var(--base-space) * 0.5rem);

    --space-2: calc(var(--base-space) * 1rem);

    --space-4: calc(2 * var(--space-2));

    --space-6: calc(3 * var(--space-2));

    --space-8: calc(4 * var(--space-2));

    --space-10: calc(5 * var(--space-2));

    --space-12: calc(6 * var(--space-2));

    --space-16: calc(8 * var(--space-2));

    --space-20: calc(10 * var(--space-2));

    --space-24: calc(12 * var(--space-2));

    --space-32: calc(16 * var(--space-2));

    --space-48: calc(24 * var(--space-2));

    --space-64: calc(32 * var(--space-2));

    --space-content: 1200px;

    --border-radius: 3px;

    --shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    --reference-gap: 80px;

    --header-height: 90px;

    ;

}



/* Header */



.header {

    display: flex;

    position: sticky;

    z-index: 2;

    top: 0;

    justify-content: center;

    background-color: var(--color-background-2);

    border-bottom: var(--space-1) var(--color-content-3) solid;

    height: var(--header-height);

}



.header__main {

    display: flex;

    flex: 1;

    width: 100%;

    justify-content: center;

    align-items: center;

    max-width: var(--space-content);

    box-sizing: border-box;

}



.header__logo {

    flex-grow: 0;

    flex-shrink: 1;

}



@media (min-width: 800px) {

    .header__logo {

        margin-right: var(--space-32);

        display: disabled;

    }

}



.header__buttons {

    display: flex;

    align-items: center;

    flex-grow: 0;

}



/* Navigation */



.nav {

    display: flex;

    flex-grow: 1;

    flex: 1;

    align-items: stretch;

    align-self: stretch;

}



.nav--header {

    display: flex;

    gap: var(--space-12);

    flex-grow: 1;

    flex: 1;

    align-items: stretch;

    align-self: stretch;

}



.nav__link {

    display: flex;

    align-items: center;

    padding: var(--space-8);

    border-bottom: var(--space-1) var(--color-background-2) solid;

    font-size: var(--space-16);

    margin: 0 var(--space-4);

    user-select: none;

    text-decoration: none;

    color: var(--color-content-1);

}



.nav__link--header {

    display: flex;

    align-items: center;

    border-bottom: var(--space-1) var(--color-background-2) solid;

    font-size: var(--space-16);

    user-select: none;

    text-decoration: none;

    color: var(--color-content-1);

}



.nav__link--top {

    margin-top: 11px;

}



.nav__link--active {

    border-bottom: var(--space-1) var(--color-content-1) solid;

    box-shadow: 0 var(--space-1) 0 0 var(--color-content-1);

    font-weight: 600;

}



.language-select {

    position: relative;

}



.about-us-select {

    position: relative;

}



.about-us-select--mobile {

    position: relative;

}



.offer-select {

    position: relative;

}



.offer-select--mobile {

    position: relative;

}



.language-select-mobile {

    position: relative;

}



/* .language-select__input:focus~.select__label {

    background-color: var(--color-background-1);

} */



.select__label {

    display: flex;

    justify-content: left;

    align-items: center;

    padding-left: var(--space-8);

    padding-right: var(--space-8);

    border-radius: 3px;

    height: 46px;

    user-select: none;

}



.select__label--header {

    display: flex;

    justify-content: left;

    align-items: center;

    border-radius: 3px;

    height: 46px;

    user-select: none;

}



.select__label--expanded {

    display: flex;

    justify-content: space-between;

    background-color: var(--color-accent-contrast);

    padding: var(--space-16) var(--space-32);

    user-select: none;

    border-bottom: var(--space-1) var(--color-content-3) solid;

}



.language-select__input {

    -webkit-appearance: none;

    height: 46px;

    border-width: 0;

    position: relative;

    border-radius: var(--border-radius);

    background-color: transparent;

    font-size: 1rem;

    cursor: pointer;

    outline: none;

    width: 70px;

    /* 

    opacity: 0;

    width: 0;

    height: 0;

    border-width: 0;

    position: absolute;

    font-size: 1rem;

    */

}



@media (min-width: 72.01em) {

    .language-select__input {

        display: disabled;

    }

}



.language-dropdown {

    display: none;

    top: calc(100% + 4px);

    left: -4px;

    position: absolute;

    border-radius: var(--border-radius);

    flex-wrap: wrap;

    background-color: var(--color-background-1);

    padding: var(--space-8);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}



.menu-dropdown {

    display: none;

    top: calc(100% - 12px);

    left: 16px;

    position: absolute;

    border-radius: var(--border-radius);

    flex-wrap: wrap;

    background-color: var(--color-background-1);

    padding: var(--space-8);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}



.menu-dropdown--expanded {

    display: none;

    flex-direction: column;

    border-bottom: var(--space-1) var(--color-content-3) solid;

}



.menu-dropdown--about-us {

    width: 123px;

}



.menu-dropdown--offer {

    width: 203px;

}



/* @media (min-width: 1150px) {

    .dropdown-select--open>.language-dropdown {

        display: flex;

    }

} */



.dropdown-select--open>.language-dropdown {

    display: flex;

}



.dropdown-select--open>.menu-dropdown {

    display: flex;

}



.dropdown-select--open>.menu-dropdown--expanded {

    display: flex;

}



.dropdown__item {

    display: flex;

    align-items: center;

    width: 100%;

    padding: var(--space-8);

}



.dropdown__item--expanded {

    display: flex;

    align-items: center;

    width: 100%;

    padding: var(--space-12) var(--space-32);

}



/* Menu */



.menu-toggler {

    display: flex;

    align-items: center;

}



.menu-toggler__box {

    position: relative;

    height: 22px;

    width: 35px;

}



.menu-toggler__span-1, .menu-toggler__span-2, .menu-toggler__span-3 {

    position: absolute;

    width: 35px;

    height: 3px;

    background-color: var(--color-content-1);

    transform-origin: left center;

}



.menu-toggler__span-1 {

    top: 0;

}



.menu-toggler__span-2 {

    top: 10px;

    transition: .125s opacity;

    opacity: 1;

}



.menu-toggler__span-3 {

    top: auto;

    bottom: 0;

}



.menu-toggler__span-1, .menu-toggler__span-3 {

    transition: .25s transform;

}



.menu-toggler--active .menu-toggler__span-1 {

    transform: rotate(45deg) translate(0, -4.2px);

}



.menu-toggler--active .menu-toggler__span-2 {

    opacity: 0;

}



.menu-toggler--active .menu-toggler__span-3 {

    transform: rotate(-45deg) translate(0, 4.2px);

}



.mobile-menu {

    display: flex;

    flex-direction: column;

    height: calc(100vh - 90px);

    width: 100%;

    position: fixed;

    top: 90px;

    padding: 0 0 var(--space-32) 0;

    background-color: var(--color-background-2);

    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;

    z-index: 2;

    box-sizing: border-box;

    opacity: 0;

    transform: translateX(100%);

}



.mobile-menu--open {

    transform: translateX(0);

    opacity: 1;

}



.mobile-nav {

    display: flex;

    flex-direction: column;

}



.mobile-nav__link {

    color: var(--color-content-1);

    text-decoration: none;

    margin-bottom: var(--space-32);

}



.mobile-nav__link--active {

    font-weight: 600;

}



/* Main */



.main__text {

    color: var(--color-content-1);

    font-weight: 400;

    line-height: 150%;

}



.main__text-center {

    text-align: center;

}



.main__text-heading {

    line-height: 125%;

}



.main__text-heading {

    font-size: 2.375rem;

}



.main__text-large {

    font-size: 1.5rem;

}

.main__text-center {

    text-align: center;

}

.main__text-base {

    font-size: 1.25rem;

}



.main__text-small {

    font-size: 1rem;

}



.main__text-ultra-small {

    font-size: 0.875rem;

}



.main__text-minimal {

    font-size: 0.75rem;

}



.main__text-ultra-small-fixed {

    font-size: 0.875rem;

}



@media (min-width: 800px) {

    .teaser__content {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .teaser__content-full {

        grid-template-columns: repeat(1, minmax(0, 1fr));

    }

}



@media (min-width: 1100px) {

    .teaser__content {

        padding: 48px 74px;

    }

}



.teaser-content__text {

    font-size: calc(var(--space-2) + var(--space-12));

}



@media (min-width: 800px) {

    .teaser-content__text {

        font-size: calc(var(--space-2) + var(--space-16));

    }

}



.teaser-content__title {

    font-size: var(--space-24);

    text-transform: uppercase;

    font-weight: 900;

    margin-bottom: var(--space-32);

}



@media (min-width: 800px) {

    .teaser-content__title {

        font-size: calc(var(--space-4) + var(--space-32));

    }

}



.teaser-content__image {

    display: flex;

    align-items: center;

    margin-top: var(--space-32);

    margin-bottom: var(--space-32);

    grid-row: span 2 / span 2;

}



.teaser-content__image>img {

    max-width: 100%;

}



.teaser-content__image--no-span {

    grid-row: span 1 / span 1;

}



@media (min-width: 400px) {

    .teaser-content__image {

        min-height: 320px;

    }

}



@media (min-width: 1100px) {

    .teaser-content__image {

        margin-top: 0;

        margin-bottom: 0;

        min-height: 320px;

    }

}



/* References */



.references {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-3);

}



.references__content {

    display: block;

    padding-top: var(--space-48);

    padding-bottom: var(--space-48);

    width: 100%;

    margin: 0 var(--space-20);

    max-width: var(--space-content);

    box-sizing: border-box;

}



@media (min-width: 1100px) {

    .references__content {

        padding: 48px 74px;

    }

}



.references__heading {

    font-size: var(--space-16);

    font-weight: 500;

    text-transform: uppercase;

}



@media (min-width: 800px) {

    .references__heading {

        font-size: var(--space-24);

    }

}



.references-content__refs {

    display: flex;

    align-items: center;

    width: 100%;

    gap: var(--reference-gap);

}



.reference__image {

    filter: opacity(0.3) saturate(0);

    cursor: pointer;

}



.reference__image:hover {

    filter: opacity(1) saturate(1)

}



/* Implementation steps */



.implementation-steps {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-3);

}



.implementation-steps__content {

    display: grid;

    grid-template-columns: 1fr;

    row-gap: var(--space-16);

    /* grid-template-rows: 1fr 1fr 1fr; */

    position: relative;

    max-width: var(--space-content);

    margin: 0 var(--space-20);

    padding-top: var(--space-48);

    padding-bottom: var(--space-48);

    box-sizing: border-box;

    align-items: center;

    grid-auto-flow: column;

}



@media (min-width: 800px) {

    .implementation-steps__content {

        row-gap: calc(2*var(--space-32));

        grid-template-columns: 7fr 5fr;

    }

}



.implementation-steps__heading {

    grid-column: 1 / 3;

}



.implementation-step__description {

    grid-column: 1 / 2;

    display: flex;

}



.implementation-step__number {

    min-width: 48px;

}



@media (min-width: 800px) {

    .implementation-step__number {

        min-width: 96px;

    }

}



.implementation-step-number__text {

    font-size: 32px;

    font-weight: 900;

    color: lightgray;

    margin: 0;

    line-height: 0.85;

}



@media (min-width: 800px) {

    .implementation-step-number__text {

        font-size: calc(2*var(--space-48));

    }

}



.implementation-step__image {

    grid-column: 1 / 2;

    max-width: 100%;

    margin-top: var(--space-32);

}



@media (min-width: 800px) {

    .implementation-step__image {

        grid-column: 2 / 3;

        margin-top: 0;

    }

}



.implementation-step__title {

    margin: 0;

    font-size: calc(var(--space-2) + var(--space-12));

    margin-right: var(--space-32);

}



@media (min-width: 800px) {

    .implementation-step__title {

        font-size: 18px;

    }

}



@media (min-width: 1100px) {

    .implementation-steps__content {

        padding: var(--space-48) calc(74*var(--space-1));

    }

}



/* Realization methods */



.realization-methods {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-3);

}



.realization-methods__heading {

    margin-bottom: var(--space-32);

}



.realization-cards {

    display: flex;

    flex-wrap: wrap;

    column-gap: var(--space-32);

    row-gap: var(--space-32);

}

.realization-card {

    display: flex;

    flex-wrap: wrap;

    max-width: 400px;

    border: 1px solid var(--input-border-color);

    background-color: var(--color-background-1);

    border-radius: var(--border-radius);

}



.realization-card__head {

    width: 100%;

    border-radius: var(--border-radius);

    background-color: var(--color-background-1-hover);

    border-bottom: 1px solid var(--input-border-color);

    padding: var(--space-16) var(--space-32);

}



.realization-card__body {

    width: 100%;

    padding:var(--space-32);

}



/* Forms */



.form {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-1);

}



.form__content {

    max-width: var(--space-content);

    width: 100%;

    display: flex;

}



.form__body {

    display: block;

    flex-grow: 1;

    width: 100%;

}



.form__elements {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.form__certificates {

    padding-left: 147px;

    width: 400px;

}



.form__certificates--black-and-white > img {

    filter: opacity(0.2) saturate(0)

}



.form-label {

    font-weight: 500;

    /* margin-bottom: var(--space-8); */

}



.form__message {

    padding: var(--space-8) var(--space-16);

    font-weight: 600;

    border-radius: var(--border-radius);

}



.form__success-message {

    border: 1px solid var(--color-positive);

    background-color: var(--color-positive-background);

}



.form__error-message {

    border: 1px solid var(--color-accent);

    background-color: var(--color-accent-light);

}



.newsletter-info {

    margin-left: 34px;

}



.form-mini-text {

    font-size: 12px;

    font-weight: 200;

    margin-top: var(--space-16);

}



@media (min-width: 800px) {

    .form {

        padding: var(--space-48) 0;

        justify-content: center;

    }

}



/* Product Catalog */



.catalog {

    display: flex;

    justify-content: left;

    align-items: center;

    background-color: var(--color-background-3);

}



.catalog__content {

    padding: var(--space-48) var(--space-20);

    max-width: var(--space-content);

    display: grid;

    grid-template-columns: 50px 1fr;

    grid-template-rows: repeat(3, auto) 1fr;

    grid-template-areas: "catalog-heading catalog-heading" "catalog-img catalog-text" "catalog-button catalog-button" "catalog-eco catalog-eco";

    column-gap: var(--space-16);

}



.catalog__layout {

    display: flex;

}



.catalog__img-wrapper {

    grid-area: catalog-text;

    display: flex

}



.catalog__img {

    grid-area: catalog-img;

}



.catalog__img>img {

    width: 100%;

    max-width: 200px;

    height: auto;

}



.catalog__heading {

    grid-area: catalog-heading;

    margin-bottom: var(--space-12);

}



.catalog__button {

    grid-area: catalog-button;

    margin-top: var(--space-32);

    margin-bottom: var(--space-32);

    max-width: max-content;

}



.catalog__eco-label {

    grid-area: catalog-eco;

    display: flex;

    align-items: center;

    height: 49px;

}



@media (min-width: 800px) {

    .catalog__content {

        grid-template-columns: auto auto;

        grid-template-rows: repeat(3, auto) 1fr;

        grid-template-areas: "catalog-img catalog-heading" "catalog-img catalog-text" "catalog-img catalog-button" "catalog-img catalog-eco";

        column-gap: var(--space-48);

    }

    .catalog__heading {

        margin-bottom: var(--space-6);

    }

    .catalog__description {

        margin-left: var(--space-48);

    }

    .catalog {

        padding: calc(var(--space-48) * 2);

        justify-content: center;

    }

}



/* Contact */



.contact-sign {

    font-size: var(--space-24);

}



.referal-block {

    margin-bottom: var(--space-20);

    display: flex;

    width: 100%;

}



.referal-block:last-child {

    margin-bottom: 0;

}



.referal__text {

    padding-left: var(--space-20);

    flex-grow: 1;

    flex-shrink: 1;

}



.referal__image {

    flex-grow: 0;

    flex-shrink: 0;

}



#map {

    height: 400px;

    width: 100%;

}



/* Case study block */



.case-studies__links {

    display: flex;

    flex-wrap: wrap;

}



.case-studies__link {

    margin-right: var(--space-20);

}



.case-studies__flex {

    display: flex;

    flex-direction: column;

    flex-wrap: wrap;

    margin-bottom: var(--space-32);

}



@media (min-width: 800px) {

    .case-studies__flex {

        flex-direction: row;

    }

}



.case-studies__heading {

    margin-top: var(--space-16);

    margin-bottom: var(--space-16);

    font-weight: 600;

    font-size: 24px;

}



.case-text {

    font-size: .875rem;

}



@media (min-width: 800px) {

    .case-text {

        font-size: 1.125rem;

    }

}



.case-studies__quote-block {

    flex: 2;

    max-width: 350px;

}



@media (min-width: 800px) {

    .case-studies__quote-block {

        align-self: center;

        padding-bottom: var(--space-48);

        margin-left: var(--space-48);

        max-width: none;

    }

}



.case-studies__buttons {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

    margin-top: var(--space-32);

}

@media (min-width: 800px) {

    .case-studies__buttons {

        margin-top: 0;

    }

}



.divided-content {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-3);

}



.divided-content__content {

    display: block;

    padding: var(--space-48) var(--space-20);

    width: 100%;

    max-width: calc(var(--space-content) - 2 * 74px);

}



.divided-content__layout {

    margin-right: 0;

    width: 100%;

    flex: 3;

}



.divided-content__block {

    margin-bottom: var(--space-32);

}



.divided-content__sticky-content {

    max-height: max-content;

    flex: 2;

}



.divided-content__quote-block {

    align-self: center;

    flex: 2;

    margin-right: 0;

    background-color: var(--color-background-2);

    border-radius: var(--border-radius);

    padding: var(--space-32);

}





.divided-content__buttons {

    margin-top: var(--space-48);

}



.divided-content__button {

    max-width: max-content;

    margin-bottom: var(--space-20);

    margin-right: var(--space-16);

}



.quote--text {

    font-size: calc(var(--space-16) + var(--space-2));

    font-weight: 200;

    margin-bottom: var(--space-8);

}



@media (min-width: 800px) {

    .quote--text {

        font-size: var(--space-24);

    }

}

.case-block {

    background-color: var(--color-background-2);

    padding: var(--space-16);

    font-size: .875rem;

    border-radius: var(--border-radius);

    margin-bottom: var(--space-6);

}



@media (min-width: 800px) {

    .case-studies__container {

        margin-right: var(--space-48);

        flex: 3;

    }

    .divided-content__content {

        display: flex;

        align-items: stretch;

    }

    .divided-content__layout {

        margin-right: var(--space-32);

    }

    .case-block {

        font-size: 1rem;

    }

}



@media (min-width: 1100px) {

    .divided-content__content {

        padding: 48px 74px;

    }

}



/* Customer archievments */



.customer-archievments {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-3);

}



.archievments__cards {

    display: flex;

    flex-direction: column;

    margin-top: var(--space-48);

    margin-bottom: var(--space-48);

}



.archievments__card {

    display: flex;

    flex-direction: column;

    padding: var(--space-16);

    border: solid var(--color-content-3) 1px;

    border-radius: var(--border-radius);

    height: 200px;

}



.archievments-card__footer {

    margin-top: auto;

}



.card--middle {

    margin: var(--space-8) 0;

}



@media (min-width: 800px) {

    .customer-archievments {

        padding-top: var(--space-48);

    }

    .archievments__cards {

        flex-direction: row;

    }

    .card--middle {

        margin: 0 var(--space-8);

    }

}



/* Digitální transformace ve výrobě */



.digital-transformation {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-2);

}



.trans__wrapper {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: auto auto;

    justify-items: flex-start;

    grid-gap: var(--space-16);

    margin-top: var(--space-16);

}



@media (min-width: 800px) {

    .trans__wrapper {

        grid-template-columns: repeat(2, 1fr);

        row-gap: 0;

    }

    .trans__image {

        align-self: center;

        /* padding: 0  var(--space-32); */

        grid-row: span 2;

    }

}



/* Footer */



.footer {

    display: flex;

    justify-content: center;

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

}



.footer__content {

    padding-bottom: var(--space-48);

    display: block;

    width: 100%;

    margin: 0 var(--space-24);

    max-width: var(--space-content);

    box-sizing: border-box;

    overflow: hidden;

}



.footer__main-layout {

    display: flex;

    justify-content: stretch;

    width: 100%;

}



.footer__menu {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-32);

    text-decoration: underline;

}



.footer__item--clickable {

    cursor: pointer;

    user-select: none;

}



.footer__item--spaced {

    padding-top: var(--space-2);

}



.footer__row-container {

    display: flex;

    margin-left: var(--space-8);

}



.footer__last-row-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-left: var(--space-8);

}



.footer__text-container {

    display: flex;

    align-items: center;

    height: 20px;

}



.footer__projects-container {

    display: flex;

    gap: var(--space-8);

}



.footer__text {

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

    font-size: 14px;

    font-weight: 400;

    line-height: 150%;

    letter-spacing: 0.5px;

    text-decoration-style: solid;

    text-decoration-thickness: 0%;

}



.footer__availability-container {

    display: flex;

    align-items: center;

    gap: var(--space-8);

}



.footer__text--info {

    font-size: 12px;

}



.footer__text--container {

    margin-left: var(--space-8);

}



.footer__text--contact-container {

    display: flex;

    gap: 14px;

    align-items: center;

}



.footer__text--underline {

    text-decoration: underline;

}



.footer__menu--link-container {

    display: flex;

    gap: var(--space-20);

    flex-direction: column;

}



.footer__menu--link-group-container {

    display: flex;

}



.footer__partners {

    flex-grow: 1;

    width: 300px;

    padding-right: var(--space-20);

    gap: var(--space-8);

}



.footer__partners--image-container {

    display: flex;

    align-items: center;

}



.footer__stats {

    flex-grow: 0;

    width: 300px;

}



.footer__heading {

    font-size: calc(var(--space-2) + var(--space-16));

    margin-bottom: var(--space-24);

    margin-top: var(--space-32)

}



.footer__decoration {

    margin-top: var(--space-48);

    margin-bottom: var(--space-32);

}



.footer__eu {

    display: flex;

    align-items: flex-end;

    column-gap: var(--space-8);

}



.footer__availability {

    cursor: pointer;

}



.footer-avalibility__text {

    white-space: nowrap;

    font-weight: 500;

    font-size: calc(var(--space-2) + var(--space-16));

}



/* Main page */

.main-site {

    display: flex;

    justify-content: center;

    overflow: hidden;

}



.main-site__content {

    display: flex;

    padding: var(--space-32) 0;

    align-items: center;

    width: 100%;

    max-width: var(--space-content);

    position: relative;

}



.main__text-container {

    display: flex;

    flex-direction: column;

    gap: 24px;

    width: 600px;

}



@keyframes slideInText {

  to {

    transform: translateX(0);

  }

}



.main__link-default {

    text-decoration: underline;

}



.main__link-red {

    color: var(--color-accent);

    text-decoration: underline;

}



.main__redirection-red {

    cursor: pointer;

    color: var(--color-accent);

}



.media-section__redirection-container {

    display: flex;

    width: fit-content;

    gap: var(--space-8);

    align-items: center;

}



.main__upper-lines-container {

    position: relative;

}



.main__upper-lines {

    position: absolute;

    top: -170px;

    left: -585px;

}



.main__lower-lines-container {

    position: relative;

}



.main__lower-lines {

    position: absolute;

    top: 717px;

    left: -828px;

    z-index: -2;

}



.main__red-box-container {

    position: relative;

}



.main__red-box {

    position: absolute;

    top: 0;

    left: -485px;

    z-index: -1;

    background: linear-gradient(180deg, #D12329 0%, #9F191F 99.47%);

    clip-path: polygon(

        27.5% 0%,   /* top-left moves by 29.5% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

    height: 675px;

    width: 1075px;

}



.main__escon-image {

    transform: translateY(20%);

    opacity: 0;

    position: absolute;

    right: 0px;

}



.main__escon-image--mobile {

    width: 100%;

    max-width: 300px;

}



.news-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.news-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.main__card {

    display: flex;

    align-items: center;

    box-sizing: border-box;

    gap: var(--space-16);

    width: 100%;

    border-radius: var(--space-16);

    padding: var(--space-16);

    background-color: var(--color-accent-contrast);

    box-shadow: 0px 4px 8px -2px var(--color-shadow);

}



.main__card-company-overview {

    gap: var(--space-32);

    padding: var(--space-32);

}



.main__card-text-container {

    display: flex;

    flex: 1;

    flex-direction: column;

    gap: var(--space-16);

}



.system-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.system-section__content {

    display: flex;

    align-items: center;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



/* Main - Video section */



.video-section {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-2);

    overflow: hidden;

}



.video-section__content {

    display: flex;

    justify-content: center;

    margin: var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}

iframe {
    max-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
}

.teaser-video__container {

    display: flex;

    justify-content: center;

    width: 100%;

}



.teaser-video {

    aspect-ratio: 270 / 135;

    border-radius: var(--space-12);

}



/* Main - Location section */



.location-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.location-section__content {

    display: flex;

    justify-content: center;

    gap: 32px 130px;

    flex-wrap: wrap;

    box-sizing: border-box;

    padding: 0 54px;

    align-items: center;

    margin: var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.location-section__flex-content-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px 130px;

    flex-wrap: wrap;

}



.location-section__box-container {

    display: flex;

    width: 170px;

    align-items: center;

    align-items: center;

    flex-direction: column;

}



.location-section__image-container {

    display: flex;

    height: 84px;

    align-items: end;

    margin-bottom: 8px;

}



.system-section__card-container {

    display: flex;

    align-items: center;

}



.system-section__card {

    display: flex;

    flex-direction: column;

    height: fit-content;

}



.system-section__card-text {

    text-align: center;

}



.system-section__card-box-container {

    display: flex;

    align-items: center;

    flex-direction: column;

    gap: var(--space-8);

}



.partners-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.partners-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.functioning-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.functioning-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.functioning-section__card-container {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-32);

}



.functioning-section__image-box {

    display: flex;

    cursor: pointer;

    overflow: hidden;

    position: relative;

    gap: var(--space-4);

    flex-direction: column;

    background: linear-gradient(to bottom, #ffffff, #f6f7f9);

    border-radius: var(--space-16);

    height: 300px;

    width: 212px;

    padding: var(--space-32);

}



.functioning-section__image-box:hover {

    background: #f6f7f9;

}



.functioning-section__tablet {

    position: absolute;

    top: 184px;

    left: 7px;

    height: 180px;

}



.functioning-section__screen {

    position: absolute;

    top: 70px;

    left: -28px;

    height: 260px;

    transition: top 0.5s ease;

}



.functioning-section__screen-image {

    opacity: 1;

}



.functioning-section__screen-image-detail {

    opacity: 0;

}



.functioning-section__image-box:hover .functioning-section__screen-image {

    opacity: 0;

    top: 130px;

}



.functioning-section__image-box:hover .functioning-section__screen-image-detail {

    opacity: 1;

    top: 130px;

}



.functioning-section__escon {

    position: absolute;

    top: -75px;

    left: -82px;

    height: 620px;

    transition: top 0.5s ease;

}



.functioning-section__escon-image {

    opacity: 1;

}



.functioning-section__escon-image-detail {

    opacity: 0;

}



.functioning-section__image-box:hover .functioning-section__escon-image {

    opacity: 0;

    top: -20px;

}



.functioning-section__image-box:hover .functioning-section__escon-image-detail {

    opacity: 1;

    top: -20px;

}



.functioning-section__server {

    position: absolute;

    top: 75px;

    left: -15px;

    height: 265px;

    transition: top 0.5s ease;

}



.functioning-section__server-image {

    opacity: 1;

}



.functioning-section__server-image-detail {

    opacity: 0;

}



.functioning-section__image-box:hover .functioning-section__server-image {

    opacity: 0;

    top: 125px;

}



.functioning-section__image-box:hover .functioning-section__server-image-detail {

    opacity: 1;

    top: 125px;

}



/* Tablet image hover */



.functioning-section__image {

    opacity: 1;

    transition: transform 0.5s ease;

}



.functioning-section__image-detail {

    opacity: 0;

    transform: scale(1);

    transition: transform 0.5s ease;

}



.functioning-section__image-box:hover .functioning-section__image {

    opacity: 0;

    transform: scale(1.2);

}



.functioning-section__image-box:hover .functioning-section__image-detail {

    opacity: 1;

    transform: scale(1.2);

}



/* Text hover */



.functioning-section__image-box-text{

    opacity: 0;

    visibility: hidden;

}



.functioning-section__image-box:hover .functioning-section__image-box-text {

    opacity: 1;

    visibility: visible;

    transition: opacity 1s ease-out, visibility 0s; 

}



.functioning-section__image-box:not(:hover) .functioning-section__image-box-text {

    transition: opacity 0.5s ease-out, visibility 0s ease-out 0.5s;

}



.gain-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.gain-section__content {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.gain-section__info-container {

    display: flex;

    align-items: start;

    justify-content: center;

    flex-direction: column;

    width: 365px;

}



.gain-section__icon {

    height: 50px;

    margin-bottom: var(--space-8);

}



.gain-section__box-heading {

    margin-bottom: var(--space-16);

}



.main__text-news {

    padding-right: var(--space-8);

}



.system-section__tag-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: var(--space-8);

}



.main__tag {

    display: flex;

    padding: var(--space-4) var(--space-12);

    border-radius: var(--space-32);

    background-color: var(--color-background-4);

}



.availability-stats {

    display: none;

    position: absolute;

    width: 200px;

    padding: 16px;

    background-color: var(--color-background-1);

    border-radius: var(--border-radius);

    box-shadow: var(--shadow);

}



.footer__availability:hover+.availability-stats {

    display: block;

}



.section-divider__line {

    width: 100%;

    height: 1px;

    background-color: var(--color-accent-contrast);

    margin: var(--space-24) 0 var(--space-8) 0;

}



/* Carousel logos */

.pre-logo {

    height: 85px;

}



.vut-logo {

    height: 145px;

}



.siemens-logo {

    height: 60px;

}



.szu-logo {

    height: 70px;

}



.jic-logo {

    height: 110px;

}



.epet-logo {

    height: 70px;

}



.gdp-koral-logo {

    height: 50px;

}



.apama-logo {

    height: 50px;

}



.safe-dx-logo {

    height: 50px;

}



.gas-storage-logo {

    height: 55px;

}



.carousel-container {

    max-width: 90vw;

}



/* Carousel */

.carousel {

    display: flex;

    margin: 0 auto;

    padding: 20px 0;

    max-width: 100%;

    overflow: hidden;

  }



.carousel > * {

    flex: 0 0 100%;

}



.carousel:hover .carousel-group {

    animation-play-state: paused;

}



.carousel-group {

    display: flex;

    gap: var(--space-48);

    align-items: center;

    will-change: transform;

    animation: scrolling 20s linear infinite;

  }





  @keyframes scrolling {

    0% {

      transform: translateX(0);

    }

    100% {

      transform: translateX(-100%);

    }

  }



  .logo-margin-right {

    margin-right: var(--space-48);

  }



/* Who we are page styles */

.who-we-are-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.who-we-are-section__content {

    display: flex;

    margin: 0 var(--space-32) 0 var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.who-we-are-section__text-container {

    display: flex;

    margin: var(--space-32) 0 var(--space-32) 0;

    flex-direction: column;

    gap: var(--space-24);

    width: 580px;

}



.who-we-are-section__main-image-container {

    height: 100%;

    flex: 1;

    position: relative;

    overflow: hidden;

    clip-path: polygon(

        35% 0%,   /* top-left moves by 35% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

}



.who-we-are-section__main-image {

    position: absolute;

    right: 0px;

    height: 100%;

    clip-path: polygon(

        35% 0%,   /* top-left moves by 35% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

}



.who-we-are-section__main-image-first {

    position: absolute;

    right: -50px;

    height: 100%;

    clip-path: polygon(

        35% 0%,   /* top-left moves by 35% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

}



.container__slide {

    opacity: 0;

    animation: fadeSlide 15s infinite;

}



.container__slide:nth-child(1) { animation-delay: 0s; }

.container__slide:nth-child(2) { animation-delay: 5s; }

.container__slide:nth-child(3) { animation-delay: 10s; }

.container__slide--longer {
    opacity: 0;
    animation: fadeSlide 20s infinite;
}

.container__slide--longer:nth-child(1) { animation-delay: 0s; }
.container__slide--longer:nth-child(2) { animation-delay: 5s; }
.container__slide--longer:nth-child(3) { animation-delay: 10s; }
.container__slide--longer:nth-child(4) { animation-delay: 15s; }

@keyframes fadeSlide {

  0%   { opacity: 0; }

  5%   { opacity: 1; }

  33.33%  { opacity: 1; }

  38%  { opacity: 0; }

  100% { opacity: 0; }

}



/* Who we are - mission section */



.mission-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.mission-section__content {

    display: flex;

    align-items: center;

    gap: var(--space-64);

    margin: var(--space-64) var(--space-32) var(--space-64) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.mission-section__text-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}



.mission-section__signature-text-container {

    display: flex;

    flex-direction: column;

}



/* Who we are - history section */

.history-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.history-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.history-section__card {

    gap: var(--space-16);

}



.history-section__card-text-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-16);

    flex: 1;

}



.history-section__card-date-container {

    display: flex;

    flex-direction: column;

    width: 95px;

}



.history-section__card-image-container {

    display: flex;

    width: 70px;

    justify-content: center;

}



.history-section__card-date-image-container {

    display: flex;

    align-items: center;

    gap: var(--space-16);

    justify-content: space-between;

}



.width__fit-content {

    width: fit-content;

}



/* Who we are - media section */

.media-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.media-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.media-section__card-container {

    display: flex;

    flex: 1;

    flex-direction: column;

    gap: var(--space-32);

}



.media-section__image {

    width: 100%;

    max-width: 350px;

    border-radius: var(--space-16);

}



.media-section__cropped-image {

    width: 100%;

    max-width: 350px;

    border-radius: var(--space-16);

    position: absolute;

    bottom: -100px;

}



.media-section__cropped-image-container {

    width: 100%;

    max-width: 350px;

    height: 300px;

    overflow: hidden;

    border-radius: var(--space-16);

    position: relative;

}



.media-section__text-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}



.media-section__card {

    align-items: start;

    gap: var(--space-32);

    padding: var(--space-32);

    box-sizing: border-box;

}



/* Contact page styles */

.team-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.team-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.team-section__card {

    flex-direction: column;

    align-items: start;

    padding: var(--space-32);

}



.team-section__button {

    margin-top: var(--space-16);

}



.map-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.map-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.contact-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.contact-section__content {

    display: flex;

    gap: var(--space-8);

    margin: 0 var(--space-32) 0 var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.contact-section__column-container {

    display: flex;

    flex-direction: column;

}



.contact-section__text-section-container {

    display: flex;

    margin: var(--space-32) 0 var(--space-48) 0;

    width: 605px;

    flex-direction: column;

    gap: var(--space-32);

}



.contact-section__info-heading {

    display: flex;

    margin-bottom: var(--space-8);

    color: var(--color-content-5);

}



.contact-section__icon {

    width: 50px;

}



.contact-section__box {

    display: flex;

    gap: var(--space-24);

    align-items: start;

}



.contact-section__box-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}



.contact-section__image-container {

    height: 100%;

    flex: 1;

    position: relative;

    overflow: hidden;

    clip-path: polygon(

        35% 0%, /* top-left moves by 35% */

        100% 0%, /* top-right stays */

        100% 100%, /* bottom-right stays */

        0% 100% /* bottom-left stays */

    );

}



.contact-section__image {

    position: absolute;

    right: -215px;

    height: 100%;

}



.formular-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.formular-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.formular-section__content-container {

    display: flex;

    justify-content: space-between;

}



.formular-section__formular-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

    width: 425px;

}



.formular-section__image-container {

    display: flex;

    align-items: center;

    justify-content: end;

}



.formular-section__image {

    width: 700px;

}



.formular-section__input-group-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-12);

}



.formular-section__checkbox-container {

    display: flex;

    align-items: center;

    gap: var(--space-16);

}



/* Career page styles */

.career-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.career-section__content {

    display: flex;

    margin: 0 var(--space-32) 0 var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.career-section__text-container {

    display: flex;

    margin: var(--space-32) 0 var(--space-32) 0;

    flex-direction: column;

    gap: var(--space-24);

    width: 580px;

}



.career-section__main-image-container {

    height: 100%;

    flex: 1;

    position: relative;

    overflow: hidden;

    clip-path: polygon(

        35% 0%,   /* top-left moves by 35% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

}



.career-section__column-container {

    display: flex;

    flex-direction: column;

}



.career-section__text-header {

    font-size: var(--space-20);

}



.career-section__main-image {

    position: absolute;

    right: -10px;

    height: 100%;

    clip-path: polygon(

        35% 0%,   /* top-left moves by 35% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

}



.career-section__main-image-first {

    position: absolute;

    right: -100px;

    height: 100%;

    clip-path: polygon(

        30% 0%,   /* top-left moves by 30% */

        100% 0%,  /* top-right stays */

        100% 100%,/* bottom-right stays */

        0% 100%   /* bottom-left stays */

    );

}



.positions-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.positions-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.career-dropdown {

    position: relative;

    width: 100%;

}



.career-dropdown-header {

    display: flex;

    align-items: center;

    background-color: var(--color-background-2);

    border: 1px solid var(--color-background-4);

    border-top-left-radius: var(--space-16);

    border-top-right-radius: var(--space-16);

    padding: var(--space-16) var(--space-32);

    justify-content: space-between;

    user-select: none;

}



.career-dropdown__content {

    display: flex;

    flex-direction: column;

    padding: var(--space-48) var(--space-32) var(--space-32) var(--space-32);

    border-left: 1px solid var(--color-background-4);

    border-right: 1px solid var(--color-background-4);

    border-bottom: 1px solid var(--color-background-4);

    border-bottom-left-radius: var(--space-16);

    border-bottom-right-radius: var(--space-16);

    margin-top: -16px;

}



.career-dropdown__arrow {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

    transition: transform 0.3s ease;

}



.career-dropdown__arrow--rotated {

    transform: rotate(180deg);

}



.career-dropdown-header__arrow-container {

    display: flex;

    align-items: center;

    gap: var(--space-8);

}



.career-dropdown__section {

    display: flex;

    flex-direction: column;

    gap: var(--space-8);

}



.career-dropdown__dot {

    color: var(--color-content-1);

    margin: 0 var(--space-8);

}



.career-dropdown__section-item {

    display: flex;

}



.career-dropdown__item-indentation {

    margin-left: 20px;

}



.career-dropdown__section--expanded {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.4s ease;

}



.career-dropdown--open > .career-dropdown__content > .career-dropdown__section--expanded {

  grid-template-rows: 1fr;

}



.career-dropdown__section-container {

    display: flex;

    overflow: hidden;

    flex-direction: column;

    gap: var(--space-24);

}



.career-dropdown__margin-top {

    margin-top: var(--space-24);

}



/* Email section */

.email-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.email-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.email-section__info-heading {

    display: flex;

    color: var(--color-content-5);

}



.email-section__icon {

    width: 50px;

}



.email-section__column-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-4);

}



.email-section__card {

    padding: 20px;

    gap: 22px;

}



/* Offer page styles */

.offer-main-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.offer-main-section__content {

    display: flex;

    justify-content: space-between;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.offer-main-section__text-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

    width: 500px;

}



.offer-main-section__image-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.offer-main-section__image {

    width: 550px;

}



.solution-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.solution-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.card {

    padding: var(--space-32);

}



.card-container {

    display: flex;

    gap: var(--space-16);

}



.card-text-container {

    display: flex;

    gap: var(--space-16);

    flex-direction: column;

}



.solution-section__cloud-image {

    margin-right: var(--space-16);

    width: 80px;

}



.solution-section__server-image {

    width: 100px;

    margin-left: -16px;

}



.module-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.module-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.module-section__card {

    display: flex;

    gap: var(--space-16);

    justify-content: space-between;

    padding: var(--space-32);

}



.module-section__card-text-container {

    display: flex;

    gap: var(--space-16);

    width: 750px;

    flex-direction: column;

}



.module-section__image-container {

    display: flex;

    width: 200px;

    align-items: start;

}



.module-section__image-svr {

    width: 125px;

    margin-left: -10px;

}



.module-section__image {

    width: 150px;

    margin-left: -10px;

}



.module-section__button {

    margin-top: var(--space-16);

}



.questions-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.questions-section__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.questions-section__dropdown-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-16);

}



.questions-dropdown-header {

    display: flex;

    gap: var(--space-32);

    align-items: center;

    padding: var(--space-16) 0;

    justify-content: space-between;

    user-select: none;

    cursor: pointer;

    border-bottom: 1px solid var(--color-background-4);

}



.questions-dropdown__content {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 0.4s ease;

}



.questions-dropdown--open > .questions-dropdown__content {

  grid-template-rows: 1fr;

}



.questions-dropdown__text-container {

    overflow: hidden;

}



.questions-dropdown__text {

    display: flex;

    flex-direction: column;

    padding-top: var(--space-16);

    gap: var(--space-20);

}



.dropdown-toggler {

    display: flex;

    align-items: center;

}



.dropdown-toggler__box {

    position: relative;

    height: 20px;

    width: 20px;

}



.dropdown-toggler__span-1 {

    position: absolute;

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

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    transform: translateY(-50%);

}



.dropdown-toggler__span-2 {

    position: absolute;

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

    left: 50%;

    top: 0;

    width: 2px;

    height: 100%;

    transform: translateX(-50%) scaleY(1);

    transition: transform 0.3s ease;

}



.dropdown-toggler--active .dropdown-toggler__span-2 {

    transform: translateX(-50%) scaleY(0);

}



/* Module page styles */



.module-image-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.module-image-section__content {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: var(--space-32);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.module-image-section__image {

    width: 100%;

    position: absolute;

    bottom: 0;

    right: 0;

    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,1) 100%);

    mask-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,1) 100%);

}



.module-image-section__trading-image {

    top: -20%;

    bottom: unset;

}



.module-image-section__prediction-image {

    top: -30%;

    bottom: unset;

}



.module-image-section__energy-source-image {

    top: -15%;

    bottom: unset;

}



.module-image-section__gdpr-image {

    top: -15%;

    bottom: unset;

}



.module-image-section__oee-image {

    top: -10%;

    bottom: unset;

}



.module-image-section__workspace-image {

    top: 0;

    bottom: unset;

}



.module-image-section__container {

    display: flex;

    align-items: end;

    width: 100%;

    aspect-ratio: 24 / 11;

    overflow: hidden;

    position: relative;

    border-radius: var(--space-16);

    box-sizing: border-box;

    padding: var(--space-32);

}



.module-image-section__image-text {

    display: flex;

    flex-direction: column;

    gap: var(--space-16);

    width: 700px;

    z-index: 1;

}



.module-image-section__info-text {

    width: 450px;

}



.module-image-section__label-container {

    display: flex;

    flex-wrap: wrap;

    gap: var(--space-8);

}



.module-image-section__label {

    display: flex;

    padding: var(--space-4) var(--space-16);

    border-radius: var(--space-32);

    border: 2px solid var(--color-accent);

}



.module-info-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-accent-contrast);

}



.module-info-section__content {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: var(--space-48);

    margin: 0 var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.module-info-section__main-header-container {

    display: flex;

    gap: var(--space-16);

    align-items: center;

    padding-bottom: var(--space-16);

    border-bottom: 1px solid var(--color-background-4);

}



.module-info-section__text-block-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-16);

}



.text-margin-right {

    margin-right: var(--space-4);

}



.module-section__card-icon {

    width: 70px;

    margin-right: var(--space-16);

}



.module-info-section__image-row-container {

    display: flex;

    justify-content: space-evenly;

    margin-top: var(--space-16);

}



.module-info-section__image-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 30%;

}



.module-info-section__block-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}



.module-info-section__screen-cloud-image {

    width: 100%;

}



.module-info-section__escon-image {

    width: 58%;

    margin-left: -52px;

}



.module-info-section__header-container {

    display: flex;

    gap: var(--space-16);

    align-items: center;

}



.module-energy-source-section__image-container {

    display: flex;

    gap: 120px;

    align-items: center;

}



.module-energy-source-section__image {

    width: 350px;

}



.module-energy-source-section__text-container {

    display: flex;

    flex-direction: column;

    gap: var(--space-24);

}



.energy-source-device-section {

    display: flex;

    justify-content: center;

    overflow: hidden;

    background-color: var(--color-background-2);

}



.energy-source-device-section__content {

    display: flex;

    align-items: center;

    flex-direction: column;

    gap: var(--space-24);

    margin: var(--space-32) var(--space-32) var(--space-48) var(--space-32);

    width: 100%;

    max-width: var(--space-content);

}



.energy-source-device-section__heading {

    text-align: center;

    margin-bottom: var(--space-12);

}



.energy-source-device-section__icon-row {

    display: flex;

    gap: var(--space-64);

}



.energy-source-device-section__icon-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: var(--space-8);

    width: 255px;

}



.energy-source-device-section__icon {

    height: 75px;

}



.text-margin-top {

    margin-top: var(--space-8);

}



.text-margin-left {

    margin-left: 42px;

}



.text-bullet-point-container {

    display: flex;

}



.text-bullet-point {

    margin: 0 var(--space-8);

}



.text-column-container {

    display: flex;

    flex-direction: column;

}



/* https://www.w3schools.com/howto/howto_js_slideshow.asp */

/* Slideshow */

.slideshow-dot-container {

    display: flex;

    gap: var(--space-4);

}



.slideshow-dot {

    display: flex;

    height: 16px;

    width: 16px;

    background-color: var(--color-background-4);

    border-radius: 50%;

    transition: background-color 0.6s ease;

    cursor: pointer;

}



.slideshow-dot--active {

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

}



.fade-animation {

    animation: fadeAnimation 1.5s ease;

}



@keyframes fadeAnimation {

  from { opacity: 0.4 } 

  to { opacity: 1 }

}



/* Progress track */

.progress-track {

    width: 64px;

    height: 16px;

    background-color: var(--color-background-4);

    border-radius: var(--space-16);

    overflow: hidden;

    margin-left: var(--space-8);

}



.progress-bar {

    height: 100%;

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

    transform-origin: left;

    animation: progressFill 7s linear;

    border-radius: var(--space-16);

}



@keyframes progressFill {

    from { transform: scaleX(0); }

    to { transform: scaleX(1); }

}



/* Common styles */



.basic-page {

    display: flex;

    justify-content: center;

    background-color: var(--color-background-3);

}



.basic-page__content {

    display: block;

    padding: 48px 0;

    width: 100%;

    margin: 0 var(--space-20);

    max-width: calc(var(--space-content) - 2 * 74px);

}



.basic-page__content > p {

    margin-bottom: var(--space-20);

}



.basic-page__content > h2 {

    font-size: 24px;

    font-weight: normal;

    margin-bottom: -10px;

}



.modal {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: rgba(0, 0, 0, 0.8);

    z-index: 10;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .25s opacity;

}



.modal--open {

    opacity: 1;

    visibility: visible;

    pointer-events: initial;

}



.modal__window {

    display: flex;

    flex-direction: column;

    background-color: var(--color-background-1);

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    justify-content: space-between;

}



@media (min-width: 800px) {

    .modal__window {

        position: initial;

        max-height: 90vh;

        box-sizing: border-box;

    }

}



.modal__head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: var(--space-16) var(--space-32);

}



@media (min-width: 800px) {

    .modal__head {

        padding: var(--space-32);

    }

}



.modal__content {

    max-width: 100vw;

    overflow: auto;

}



.modal__content--hide {

    display: none;

}



.modal--no-padding {

    padding: 0;

}



.modal__content>img {

    max-width: 1000px;

    max-height: 100%;

    align-self: center;

}



.modal__footer {

    display: flex;

    justify-content: center;

    padding: var(--space-16) var(--space-16) var(--space-32);

}



.modal__shifter {

    display: flex;

    align-items: center;

}



.default__content {

    padding-top: var(--space-32);

    padding-bottom: var(--space-48);

    width: 100%;

    margin: 0 var(--space-20);

    max-width: var(--space-content);

    box-sizing: border-box;

}



@media (min-width: 1100px) {

    .default__content {

        padding: 32px 74px;

    }

}





select {

    background-color: var(--color-accent-contrast);

    -webkit-appearance: none; /* remove default arrow in Chrome/Safari */

    -moz-appearance: none;    /* remove default arrow in Firefox */

    appearance: none;         /* remove default arrow generally */

}



input[type="text"], input[type="email"], input[type="tel"], textarea, select {

    border-radius: var(--border-radius);

    border: 2px solid var(--color-background-4);

    padding: 0 var(--space-12);

    color: var(--color-content-1);

    font-weight: 400;

    line-height: 150%;

    font-size: var(--space-16);

}



input[type="text"], input[type="email"], input[type="tel"], select {

    height: 36px;

}



textarea {

    padding: var(--space-8) var(--space-12);

    height: 150px;

    resize: none;

}



.checkbox-group {

    display: flex;

    align-items: center;

}



[type=radio], [type=checkbox] {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}



[type=radio], [type=checkbox] {

    width: 24px;

    height: 24px;

    border: 2px solid var(--color-background-4);

    margin: 0;

    position: relative;

    border-radius: var(--border-radius);

    cursor: pointer;

}



[type=radio]:checked, [type=checkbox]:checked {

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

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

}



[type=radio]:checked::after, [type=checkbox]:checked::after {

    content: "✓";

    color: var(--color-content-inverse);

    font-size: 18px;

    position: absolute;

    left: 4px;

    top: -2px

}



[type=radio], [type=radio]:checked::before {

    border-radius: 100%;

}



.w-100 {

    width: 100%;

}



ul {

    list-style-image: url(../img/2025/icons/dot.svg);

    padding: 0 0 0 var(--space-16);

    margin: 0;

}



ul li {

    margin: var(--space-8) 0;

}



.heading-2 {

    font-size: var(--space-20)/* var(--space-32) */

    ;

    font-weight: 900;

    text-transform: uppercase;

    margin: 0;

}



@media (min-width: 72.01em) {

    .heading-2 {

        font-size: var(--space-32);

    }

}



.subheading {

    margin: 0;

    font-size: calc(var(--space-2) + var(--space-12));

}



@media (min-width: 72.01em) {

    .subheading {

        font-size: calc(var(--space-2) + var(--space-16));

    }

}



.text--red {

    color: var(--color-accent)

}



.text--green {

    color: var(--color-status-green)

}



.text--dark-green {

    color: var(--color-dark-green)

}



.text--orange {

    color: var(--color-status-orange)

}



.text--semi-bold {

    font-weight: 500;

}



.text--super-big {

    font-weight: 900;

    font-size: 96px;

    line-height: 88px;

}



.link {

    color: var(--color-content-1);

    text-decoration: underline;

    cursor: pointer;

}



.link-dash {

    border-bottom: 1px var(--color-content-1) dashed;

    width: min-content

}



.link--red {

    color: var(--color-accent)

}



.button {

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    height: 40px;

    padding: var(--space-12) var(--space-24);

    border-radius: var(--space-32);

    border: none;

    white-space: nowrap;

    box-sizing: border-box;

}



.contact-button {

    height: 43px;

}



.button--align {

    display: flex;

    align-items: center;

    gap: var(--space-16);

}



.text--bold {

    font-weight: 700;

}



.text--gray {

    color: var(--color-content-4);

}



.button--box {

    border-radius: var(--space-4);

}



.button--mobile {

    margin: var(--space-16) var(--space-32);

}



.button__dropdown {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

}



.button__dropdown--hover {

    border-radius: var(--border-radius);

}



.about-us-button__dropdown {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

}



.about-us-button__dropdown--mobile {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

}



.offer-button__dropdown {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

}



.offer-button__dropdown--mobile {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

}



.button__dropdown--input {

    margin-right: var(--space-8);

}

.button__dropdown--input--active {

    font-weight: 700;

}

.button__dropdown--language {

    font-size: var(--space-20);
    margin-right: var(--space-8)

}



.button__text {

    font-size: var(--space-12);

    user-select: none;

}



.button__header-text {

    font-size: 0.875rem;

    user-select: none;

}



.button__dropdown--rotated {

    transform: rotate(180deg);

}



.button__dropdown-mobile {

    width: 24px;

    height: 24px;

    background-image: url(../img/2025/icons/dropdown_arrow.svg);

    background-size: contain;

}



.button__dropdown-mobile--rotated {

    transform: rotate(180deg);

}



.button--menu--closed {

    width: 40px;

    background-image: url(../img/2025/icons/menu_closed.svg);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    height: 46px;

    cursor: pointer;

}



.button--lang--cz {

    width: 32px;

    height: 20px;

    background-image: url(../img/2025/icons/lang_czech.svg);

    background-size: cover;

}



.button--lang--en {

    width: 32px;

    height: 20px;

    background-image: url(../img/2025/icons/lang_english.svg);

    background-size: cover;

}



.button--lang--small {

    width: 24px;

    height: 15px;

}



.button--margin-r {

    margin-right: var(--space-16);

}



.button--red-outline {

    background-color: var(--color-accent-contrast);

    color: var(--color-accent);

    border: 1px var(--color-accent) solid;

}



.button--black-outline {

    background-color: var(--color-accent-contrast);

    color: var(--color-content-1);

    border: 1px var(--color-content-1) solid;

}



.button--red-background {

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

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

}

.button-header--white-background {
    background-color: var(--color-background-1);
    border: 3px solid var(--color-accent);
    color: var(--color-content-1);
    margin-right: var(--space-12);
}

.button--disabled {
    background-color: var(--input-background-disabled);
    color: var(--color-content-4);
}

.button--white-background {

    background-color: var(--color-background-1);

    border: solid var(--color-accent) 3px;

}



.status {

    width: 16px;

    height: 16px;

    border-radius: var(--space-48);

    display: inline-flex;

    animation: pulse 1.5s;

    animation-iteration-count: infinite;

    animation-timing-function: ease;

}



@keyframes pulse {

    0% {opacity: 1}

    40% {opacity: 0}

    80% {opacity: 1}

}



.status--ok {

    background-color: var(--color-status-green);

}



.breadcrumb {

    display: inline-block;

    /* align-items: center;

    justify-content: left;

    flex-wrap: wrap; */

    font-size: 14px;

    color: var(--color-content-1);

}



.breadcrumb__item {

    color: var(--color-content-1);

    text-decoration: underline;

    /* margin-right: var(--space-12); */

}



/* .breadcrumb__item::before {

    position: absolute;

    margin-left: -8px;

    width: 8px;

    height: 14px;

    content: "/ "

} */



/* .breadcrumb__item:last-of-type {

    text-decoration: none;

    cursor: pointer;

} */



@media (hover: hover) {

    /* Sem všechny classy s :hover */

    .menu-toggler:hover {

        cursor: pointer;

    }

    .button:hover {

        cursor: pointer;

    }

    .button--red-background:hover {

        /* background-color: var(--color-accent-hover); */

        opacity: 0.85;

        /* box-shadow: 5px 5px 20px -10px rgba(173, 82, 82, 0.3); */

    }

    .button-header--white-background:hover {
        background-color: var(--color-background-1-hover);
    }

    .button--disabled:hover {
        opacity: 1;
        cursor: not-allowed;
    }

    .button--white-background:hover {

        background-color: var(--color-background-1-hover);

        /* box-shadow: 5px 5px 20px -10px rgba(173, 82, 82, 0.3); */

    }

    .button--red-outline:hover {

        background-color: var(--color-background-1-hover);

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

        border: 1px var(--color-accent-hover) solid;

    }

    .button--black-outline:hover {

        background-color: var(--color-background-1-hover);

        border: 1px var(--color-content-1) solid;

    }

    .select__label:hover {

        color: var(--color-accent);

        cursor: pointer;

    }

    .button__dropdown--input-hover:hover {

        color: var(--color-accent);

    }

    .dropdown__item:hover {

        color: var(--color-accent);

        cursor: pointer;

    }

    .dropdown__item--expanded:hover {

        color: var(--color-accent);

        cursor: pointer;

    }

    .link--red:hover {

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

    }

    .button__dropdown--hover:hover {

        cursor: pointer;

        background-color: var(--color-background-4-hover);

    }

    .main__link-red:hover, .main__link-default:hover, .main__redirection-red:hover{

        color: var(--color-background-5-hover);

    }

    .career-dropdown-header--hover:hover {

        background-color: var(--color-background-4-hover);

        cursor: pointer;

    }

    .slideshow-dot:hover {

        background-color: var(--color-background-6-hover);

    }

    .slideshow-dot--active:hover {

        background-color: var(--color-background-5-hover);

    }

    .questions-dropdown-header:hover > .main__text {

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

    }

    .module-section__card:hover {

        background-color: #f6f7f9;

    }

    .history-section__card:hover {
        background-color: #f6f7f9;
    }
}



/* Utilities */



@media (max-width: 72em) {

    .body--fixed {

        overflow: hidden;

        box-sizing: border-box;

        width: 100%;

    }

}



.margin-t--sm {

    margin-top: var(--space-8);

}



.margin-t {

    margin-top: var(--space-16);

}



.margin-t--lg {

    margin-top: var(--space-32);

}



.margin-t--2xl {

    margin-top: 0

}



@media (min-width: 800px) {

    .margin-t--2xl {

        margin-top: calc(2 * var(--space-48))

    }

}



.margin-b {

    margin-bottom: var(--space-12);

}

.margin-b-zero {

    margin-bottom: 0;

}

.margin-b--lg {

    margin-bottom: var(--space-32);

}



.margin-r {

    margin-right: var(--space-16);

}



.margin-r--sm {

    margin-right: var(--space-8);

}



.margin-l {

    margin-left: var(--space-16);

}



.margin-l--sm {

    margin-left: var(--space-8);

}



/* Inherits font family */

button, input, select, textarea { 

    font-family: inherit;

}



a {

  color: inherit;

  text-decoration: inherit;

}





@media (max-width: 76.375em) {

    .gain-section__info-container {

        width: 100%;

    }

}



@media (min-width: 72.01em) {

    .margin-r--desktop {

        margin-right: var(--space-16);

    }

    .margin-r--sm-desktop {

        margin-right: var(--space-8);

    }

    .margin-l--desktop {

        margin-left: var(--space-16);

    }

    .margin-l--sm-desktop {

        margin-left: var(--space-8);

    }

    .desktop-hide {

        display: none;

    }

    .footer__menu--link-group-container {

        gap: var(--space-32);

    }

    .footer__logo {

        margin-bottom: var(--space-8);

    }

    .footer__content {

        padding-top: var(--space-64);

    }

    .footer__row-container {

        justify-content: space-between;

        margin-top: var(--space-32);

    }

    .footer__text--container {

        margin-top: var(--space-12);

    }

    .footer__text--large {

        font-size: var(--space-20);

    }

    .main-site__content {

        margin: 90px 115px 71px 115px;

        gap: 110px;

        height: 450px;

    }

    .system-section__card {

        width: 33%;

    }

    .system-section__card-container {

        gap: var(--space-16);

    }

    .mission-section__portrait-image {

        height: 380px;

    }

    .history-section__card-date-image-container {

        margin-right: var(--space-12);

    }

    .career-dropdown__more-info {

        display: flex;

    }

    .career-dropdown__less-info {

        display: none;

    }



    .career-dropdown--open>.career-dropdown-header>.career-dropdown-header__arrow-container>.career-dropdown__more-info {

        display: none;

    }



    .career-dropdown--open>.career-dropdown-header>.career-dropdown-header__arrow-container>.career-dropdown__less-info {

        display: flex;

}

    /* Animations */

    .main__text-container {

        transform: translateX(-200%);

        animation: slideInText 0.8s ease-out forwards;

        }

    @keyframes slideInText {

        to {

            transform: translateX(0);

        }

    }

    .who-we-are-section__main-image-container, .career-section__main-image-container {

        animation: slideLeftImage 0.8s ease-out forwards;

    }

    @keyframes slideLeftImage {

        from { left: 600px; }

        to { left: 0px; }

    }

    .main__red-box {

        animation: slideLeftBox 0.8s ease-out forwards;

    }

    @keyframes slideLeftBox {

        from { left: 700px; }

        to { left: -485px; }

    }

    .main__upper-lines {

        animation: slideDownLines 0.8s ease-out forwards;

    }



    @keyframes slideDownLines {

        from { top: -300px; }

        to { top: 0px; }

    }

    .main__lower-lines {

        animation: slideUpLines 0.8s ease-out forwards;

    }

    @keyframes slideUpLines {

        from { top: 717px; }

        to { top: 547px; }

    }

    /* Section animations */

    .section-animation {

        transform: translateY(20%);

        opacity: 0;

    }

    .section-animation-left {

        transform: translateX(100%);

        opacity: 0;

    }



    .section-animation-right {

        transform: translateX(-100%);

        opacity: 0;

    }

    .section-animation.animate {

        animation: slideUpSection 0.8s ease-out forwards;

    }



    .section-animation.animate-delay1 {

        animation: slideUpSection 0.8s ease-out 0.5s forwards;

    }



    .section-animation.animate-delay2 {

        animation: slideUpSection 0.8s ease-out 1s forwards;

    }



    .section-animation.animate-delay3 {

        animation: slideUpSection 0.8s ease-out 1.5s forwards;

    }



    .section-animation-left.animate {

        animation: slideLeftSection 0.8s ease-out forwards;

    }



    .section-animation-right.animate {

        animation: slideRightSection 0.8s ease-out forwards;

    }

    @keyframes slideUpSection {

        to {

            transform: translateX(0);

            opacity: 1;

        }

    }

    @keyframes slideLeftSection {

        to {

            transform: translateY(0);

            opacity: 1;

        }

    }

    @keyframes slideRightSection {

        to {

            transform: translateX(0);

            opacity: 1;

        }

    }

    .module-image-section__label {

        background-color: rgba(255, 255, 255, 0.4);

    }

    :target::before {

        content: "";

        display: block;

        height: 60px; /* fixed header height*/

        margin: -60px 0 0; /* negative fixed header height */

    }

}



/* Notebooky */

@media (max-width: 114em) {

    .main__upper-lines {

        left: -482px;

    }

    .main-site__content {

        margin-top: 46px;

        margin-left: 140px;

        margin-right: 32px;

    }

    @keyframes slideUpLines {

        from { top: 670px; }

        to { top: 503px; }

    }

    .main__escon-image {

        right: 65px;

    }

    .main__text-heading {

        font-size: 2rem;

    }

    .main__text-large {

        font-size: 1.375rem;

    }

    .main__text-base {

        font-size: 1.125rem;

    }

    .main__text-small {

        font-size: 0.875rem;

    }

    .main__text-ultra-small {

        font-size: 0.75rem;

    }

    .tablet-margin {

        margin-left: 48px;

        margin-right: 48px;

    }

    .career-section__text-container {

        width: 552px;

    }

    .contact-section__text-section-container {

        width: 600px;

    }

    .formular-section__image {

        width: 600px;

    }
    .main__lower-lines {
        left: -807px;
    }

}



@media (max-width: 74.375em) {

    .main__text-container {

        width: 550px;

    }

}



@media (min-width: 72.01em) and (max-width: 87.5em) {

    .functioning-section__image-box {

        width: 172px;

    }

    .functioning-section__screen {

        top: 104px;

        height: 226px;

    }

    .functioning-section__image-box:hover .functioning-section__screen-image-detail {

        top: 160px

    }

    .functioning-section__image-box:hover .functioning-section__screen-image {

        top: 160px

    }

    .functioning-section__server {

        top: 109px;

        height: 231px;

    }

    .functioning-section__image-box:hover .functioning-section__server-image-detail {

        top: 155px

    }

    .functioning-section__image-box:hover .functioning-section__server-image {

        top: 155px

    }

    .functioning-section__escon {

        top: -59px;

        left: -70px;

        height: 536px;

    }

    .functioning-section__image-box:hover .functioning-section__escon-image-detail {

        top: 5px;

    }

    .functioning-section__image-box:hover .functioning-section__escon-image {

        top: 5px;

    }

    .functioning-section__tablet {

        top: 207px;

        height: 158px;

        left: 2px;

    }

    .functioning-section__image-box:hover .functioning-section__image {

        transform: scale(1.2);

    }

    .functioning-section__image-box:hover .functioning-section__image-detail {

        transform: scale(1.2);

    }

}



/* Tablety */

@media (max-width: 72em) {

    .margin-r--mobile {

        margin-right: var(--space-16);

    }

    .margin-r--sm-mobile {

        margin-right: var(--space-8);

    }

    .margin-l--mobile {

        margin-left: var(--space-16);

    }

    .margin-l--sm-mobile {

        margin-left: var(--space-8);

    }

    .mobile-hide {

        display: none;

    }

    .footer__menu--link-group-container {

        justify-content: space-between;

        width: 100%;

    }

    .footer__logo {

        margin-bottom: var(--space-24);

        height: 60px;

        margin-left: -8px;

    }

    .footer__content {

        padding-top: var(--space-32);

        padding-bottom: var(--space-24);

    }

    .footer__partners--image-container {

        margin-left: var(--space-4);

        margin-top: var(--space-32);

        justify-content: space-between;

        width: 100%;

    }

    .footer__row-container{

        flex-direction: column;

        gap: var(--space-24);

        margin-top: var(--space-24);

    }

    .footer__text--container {

        margin-top: var(--space-20);

    }

    .footer__menu--right-container {

        width: 180px;

    }

    .footer__main-layout {

        flex-direction: column;

    }

    .header__main {

        padding: 0 var(--space-20) 0 var(--space-16);

    }

    .main-site__content {

        flex-direction: column;

        justify-content: center;

        margin: 0 var(--space-32);

        gap: 44px;

    }

    .main__card {

        flex-direction: column;

        align-items: start;

    }

    .main__text-medium {

        font-size: var(--space-20);

    }

    .system-section__card-container {

        flex-direction: column;

        gap: var(--space-32);

    }

    .system-section__card {

        width: 100%;

        align-items: center;

    }

    .partners-section__margin-left {

        margin-left: 4px;

    }

    .functioning-section__image, .functioning-section__screen-image, .functioning-section__escon-image, .functioning-section__server-image {

        opacity: 0;

    }

    .functioning-section__image-detail {

        opacity: 1;

        transform: scale(1.2);

    }

    .functioning-section__screen-image-detail {

        opacity: 1;

        top: 130px;

    }

    .functioning-section__escon-image-detail {

        opacity: 1;

        top: -20px;

    }

    .functioning-section__server-image-detail {

        opacity: 1;

        top: 125px;

    }

    .functioning-section__image-box {

        background: #f6f7f9;

    }

    .functioning-section__image-box-text {

        opacity: 1;

        visibility: visible;

    }

    .functioning-section__card-container {

        justify-content: center;

    }

    .gain-section__content {

        justify-content: center;

        flex-direction: column;

    }

    .news-section__content {

        align-items: center;

        justify-content: center;

    }

    .partners-section__heading {

        display: flex;

        justify-content: center;

    }

    .functioning-section__content {

        align-items: center;

    }

    .section-animation.animate-delay1, .section-animation.animate-delay2, .section-animation.animate-delay3 {

        animation: slideUpSection 0.8s ease-out forwards;

    }

    .who-we-are-section__content {

        flex-direction: column;

        align-items: end;

        margin-bottom: var(--space-32);

    }

    .who-we-are-section__text-container, .career-section__text-container {

        width: 100%;

    }

    .mission-section__portrait-image {

        max-width: 380px;

        width: 100%;

    }

    .mission-section__content {

        flex-direction: column;

        align-items: start;

    }

    .history-section__card-date-image-container {

        width: 100%;

    }

    .history-section__content {

        align-items: center;

    }

    .media-section__card {

        align-items: center;

        flex-direction: column-reverse;

    }

    .media-section__card-container {

        align-items: center;

    }

    .media-section__content {

        align-items: center;

    }

    .contact-section__text-section-container {

        width: 100%;

    }

    .team-section__content {

        align-items: center;

    }

    .formular-section__content-container {

        flex-direction: column;

    }

    .formular-section__formular-container {

        width: 100%;

        margin-bottom: var(--space-32);

    }

    .formular-section__image {

        width: 100%;

        max-width: 600px;

    }

    .formular-section__image-container {

        justify-content: center;

    }

    .positions-section__content {

        align-items: center;

    }

    .email-section__card {

        flex-direction: row;

        align-items: center;

    }

    .offer-main-section__content {

        flex-direction: column;

    }

    .offer-main-section__image {

        max-width: 550px;

        width: 100%;

    }

    .offer-main-section__text-container {

        width: 100%;

    }

    .card-container {

        flex-direction: column;

    }

    .module-section__card {

        flex-direction: column-reverse;

    }

    .module-section__card-text-container {

        width: 100%;

    }

    .module-section__image {

        width: 100px;

    }

    .module-section__image-svr {

        width: 75px;

    }

    .module-image-section__image-text {

        width: 100%;

    }

    .module-image-section__info-text {

        width: 100%;

        margin-top: var(--space-16);

    }

    .module-info-section__image-container {

        width: 45%;

    }

    .module-energy-source-section__content {

        margin: var(--space-32) var(--space-32) var(--space-24) var(--space-32);

    }

    .module-energy-source-section__image-container {

        flex-direction: column;

        gap: var(--space-24);

    }

    .module-energy-source-section__image {

        width: 60%;

        max-width: 350px;

    }

    .module-energy-source-section__text-container {

        width: 100%;

    }

    .energy-source-device-section__icon-row {

        flex-direction: column;

        gap: var(--space-32);

    }

    .gain-section__info-container {

        width: 100%;

    }

    .main__text-container {

        gap: 20px;

        width: unset;

    }

    .main-page-header-logo {

        height: 70px;

    }

    .tablet-margin {

        margin-left: 48px;

        margin-right: 48px;

    }

    .mobile-margin {

        margin-left: 48px;

        margin-right: 48px;

    }

}



/* Mobily */

@media (max-width: 48em) {

    .main__text-heading {

        font-size: 1.75rem;

    }

    .main__text-large {

        font-size: 1.25rem;

    }

    .main__text-base {

        font-size: 1rem;

    }

    .carousel-group {

        gap: var(--space-32);

    }

    .logo-margin-right {

        margin-right: var(--space-32);

    }

    /* Carousel logos */

    .pre-logo {

        height: 65px;

    }

    .vut-logo {

        height: 105px;

    }

    .siemens-logo {

        height: 40px;

    }

    .szu-logo {

        height: 50px;

    }

    .jic-logo {

        height: 90px;

    }

    .epet-logo {

        height: 50px;

    }

    .gdp-koral-logo {

        height: 30px;

    }

    .apama-logo {

        height: 30px;

    }

    .safe-dx-logo {

        height: 30px;

    }

    .gas-storage-logo {

        height: 35px;

    }

    .teaser-video {

        width: 100%;

    }

    .tablet-margin--small {
        margin-left: 12px;
        margin-right: 12px;
    }
}

@media (min-width: 72.01em) and (max-width: 76.375em) {

    .functioning-section__image-box-text {

        opacity: 1;

        visibility: visible;

    }

    .functioning-section__image, .functioning-section__screen-image, .functioning-section__escon-image, .functioning-section__server-image {

        opacity: 0;

    }

    .functioning-section__image-detail {

        opacity: 1;

        transform: scale(1.2);

    }

    .functioning-section__screen-image-detail {

        opacity: 1;

        top: 160px;

    }

    .functioning-section__escon-image-detail {

        opacity: 1;
        
        top: 5px;

    }

    .functioning-section__server-image-detail {

        opacity: 1;

        top: 155px;

    }
}


/* Items */

.item--center {

    display: flex;

    justify-content: center;

}



/* Scroll after clicking a section name */

html {

    scroll-behavior: smooth;

    scroll-padding-top: var(--header-height);

}