/* ============================================================
   DESIGN TOKENS — Šesnić & Turković
   ============================================================ */

/* Note: load Brenner Sans via @font-face or your font provider
   before these rules take effect.                             */

:root {

    /* === Colors === */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-red: #F50621;
    --color-gray: #787575;

    /* === Typography === */
    --font-family: 'Brenner Sans', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;

    /* ----------------------------------------------------------
       Type Scale — fluid, mobile-first
       Stage 1: 375px → 1440px  (defaults below)
       Stage 2: 1440px → 2560px (overridden in @media block)

       H1  Brenner Sans Medium  40px → 62px   lh 1.0→1.2  ls -0.02em
       H2  Brenner Sans Medium  28px → 40px   lh 1.2       ls -0.015em
       H3  Brenner Sans Medium  18px → 35px   lh 1.2       ls  0
       H4  Brenner Sans Regular 20px → 32px   lh 1.0       ls -0.015em
       H5  Brenner Sans Medium  16px → 26px   lh 1.65      ls  0
       H6  Brenner Sans Regular 18px → 28px   lh 1.6       ls -0.005em
       H7  Brenner Sans Regular 16px → 28px   lh 1.5       ls  0
       H8  Brenner Sans Regular 16px (fixed)  lh 1.2       ls -0.01em
       H9  Brenner Sans Regular 15px (fixed)  lh 1.2       ls  0
    ---------------------------------------------------------- */

    --font-size-h1: clamp(2.5rem, 2.016rem + 2.066vw, 3.875rem);
    --line-height-h1: 1;
    --letter-spacing-h1: -0.02em;
    --font-weight-h1: var(--font-weight-medium);

    --font-size-h2: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);
    --line-height-h2: 1.2;
    --letter-spacing-h2: -0.015em;
    --font-weight-h2: var(--font-weight-medium);

    --font-size-h3: clamp(1.125rem, 0.751rem + 1.596vw, 2.1875rem);
    --line-height-h3: 1.2;
    --letter-spacing-h3: 0em;
    --font-weight-h3: var(--font-weight-medium);

    --font-size-h4: clamp(1.25rem, 0.986rem + 1.127vw, 2rem);
    --line-height-h4: 1;
    --letter-spacing-h4: -0.015em;
    --font-weight-h4: var(--font-weight-regular);

    --font-size-h5: clamp(1rem, 0.780rem + 0.939vw, 1.625rem);
    --line-height-h5: 1.65;
    --letter-spacing-h5: 0em;
    --font-weight-h5: var(--font-weight-medium);

    --font-size-h6: clamp(1.125rem, 0.905rem + 0.939vw, 1.75rem);
    --line-height-h6: 1.6;
    --letter-spacing-h6: -0.005em;
    --font-weight-h6: var(--font-weight-regular);

    --font-size-h7: clamp(1rem, 0.736rem + 1.127vw, 1.75rem);
    --line-height-h7: 1.5;
    --letter-spacing-h7: 0em;
    --font-weight-h7: var(--font-weight-regular);

    --font-size-h8: 1rem;
    --line-height-h8: 1.2;
    --letter-spacing-h8: -0.01em;
    --font-weight-h8: var(--font-weight-regular);

    --font-size-h9: 0.9375rem;
    --line-height-h9: 1.2;
    --letter-spacing-h9: 0em;
    --font-weight-h9: var(--font-weight-regular);
}

/* Stage 2 — ≥ 1440px: scale up to big desktop (2560px) */
@media (min-width: 1440px) {
    :root {
        --font-size-h1: clamp(3.875rem, 3.152rem + 0.804vw, 4.4375rem);
        --line-height-h1: 1.2;

        --font-size-h2: clamp(2.5rem, 0.009rem + 2.768vw, 4.4375rem);

        --font-size-h3: clamp(2.1875rem, 0.018rem + 2.411vw, 3.875rem);

        --font-size-h4: clamp(2rem, 0.446rem + 1.598vw, 3.3125rem);

        --font-size-h5: clamp(1.625rem, -0.143rem + 1.964vw, 3rem);

        --font-size-h6: clamp(1.75rem, 0.946rem + 0.893vw, 2.375rem);

        --font-size-h7: clamp(1.75rem, -0.018rem + 1.964vw, 3.125rem);

        --font-size-h8: clamp(1rem, 0.036rem + 1.071vw, 1.75rem);

        --font-size-h9: clamp(0.9375rem, -0.027rem + 1.071vw, 1.6875rem);
    }
}

* {
    font-family: var(--font-family);
    box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: var(--font-family);
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

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

em,
i {
    font-style: italic;
}
/* Header base styles */
header {
    position: fixed;
    z-index: 1000;
    padding: 27px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent; /* ← Proziran po defaultu */
    max-width: 2560px;
    margin: 0 auto;
    transition: background-color 0.3s ease;
}

/* Solid header - bijela pozadina */
header.is-solid {
    background-color: var(--color-white);
}

/* Reset filtera kada je solid */
body.homepage header.is-solid {
    filter: none;
}

/* Ne-homepage stranice = uvijek solid */
body:not(.homepage) header {
    background-color: var(--color-white);
}

main {
    min-height: 80vh;
}

main,
footer {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
}

header .logo-wrapper {
    width: auto;

}

header .logo-wrapper img {
    width: 100%;
    height: auto;
}

#logo-lottie {
    width: 100%;
    height: auto;
    max-width: 217px;
}

#logo-lottie svg {
    width: 100% !important;
    height: auto !important;
}

header nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

header nav ul li a,
.lang-wrapper span {
    font-size: 22px;
    line-height: 135%;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease;
    text-transform: lowercase;
}

body.homepage header {
    background-color: transparent;
}

body.homepage header nav ul li a,
body.homepage header .lang-wrapper span {
    color: #fff;
}

body.homepage header nav ul li a:hover {
    color: var(--color-red);
}

body.homepage header.is-solid {
    background-color: var(--color-white);
}

body.homepage header.is-solid nav ul li a,
body.homepage header.is-solid .lang-wrapper span {
    color: var(--color-black);
}

body.homepage header.is-solid nav ul li a:hover {
    color: var(--color-red);
}

.lang-wrapper a,
.lang-wrapper span {
    font-weight: 500;
    font-size: 22px; /* ← ISTO kao header nav ul li a */
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: baseline; /* ← Poravnanje na baseline umjesto middle */
}

.lang-wrapper {
    transform: translateY(0); /* ← Ukloni offset */
}

/* hr/en se NE povećava na velikom ekranu */
@media (min-width: 1440px) {
    .lang-wrapper a,
    .lang-wrapper span {
        font-size: 22px; /* ← Fiksna veličina */
    }
}

header nav ul li a:hover, header nav ul li a.active {
    color: var(--color-red);
}

.homepage-hero-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.homepage-hero-container img {
    width: 100%;
    height: auto;
}

.introduction-container {
    width: 100%;
    height: auto;
    text-align: left;
    padding: 200px 20px 180px 6%;
}

.introduction-container p {
    font-weight: 500;
    font-size: 37px;
    line-height: 120%;
    letter-spacing: -1.5%;
    text-align: left;
    max-width: 827px;
    padding: 0;
}

.homepage-projects {
    width: 100%;
    height: auto;
    padding: 22px 20px 200px 20px;
}

.homepage-projects h4 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1.5%;
    margin-bottom: 60px;
}

.homepage-projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, calc(25% - 15px), 100%), 1fr));
    gap: 20px;
    row-gap: 80px;
}

.homepage-projects-list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
   overflow: hidden;
}

.homepage-projects-list-item>a:first-of-type:hover+.project-title {
    color: var(--color-red);
}

.homepage-projects-list-item>a:first-of-type {
    display: block;
    width: 100%;
}

.homepage-projects-list-item img {
    width: 100%;
    height: auto;
}

.homepage-projects-list-item .project-title {
    font-weight: 500;
    font-size: 26px;
    line-height: 105%;
    letter-spacing: -1%;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease;
}

.homepage-projects-list-item .project-title:hover {
    color: var(--color-red);
}

.homepage-projects-list-item .project-tags-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    overflow: hidden; /* Added */
    position: relative; /* Added */
    flex-wrap: nowrap;
    width: 100%;
}

.homepage-projects-list-item .project-tags-container a {
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-underline-offset: 2px;
    text-decoration: underline;
    color: var(--color-black);
    white-space: nowrap;
    transition: color 0.3s ease;
    text-transform: lowercase;
    flex-shrink: 0; /* Added - prevents individual tags from shrinking */
}

.homepage-projects-list-item .project-tags-container::after {
    content: '...';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(to right, transparent, white 30%, white);
    padding-left: 15px;
    padding-right: 5px;
    color: var(--color-black);
    font-size: 15px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.homepage-projects-list-item .project-tags-container.has-overflow::after {
    opacity: 1;
}

.homepage-projects-list-item .project-tags-container a:hover {
    color: var(--color-red);
}

.homepage-projects-list-item .project-tags-container a.client-tag, .homepage-projects-list-item .project-tags-container a.tag.js-filter-client {
    text-transform: none;
}

.projects-load-more-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
}

.projects-load-more-container .load-more-projects {
    padding: 9.5px 48px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.projects-load-more-container .load-more-projects:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.awards-container {
    width: 100%;
    height: auto;
    padding: 50px 20px 200px 20px;
}

.awards-title-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.awards-title-container h4 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1.5%;
    margin-bottom: 60px;
}

.awards-title-container .view-all-awards, .view-all-awards {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    margin-bottom: 60px;
}

.awards-title-container .view-all-awards:hover, .view-all-awards:hover {
    color: var(--color-red);
}

.awards-title-container .view-all-awards .icon, .view-all-awards .icon {
    transform: translateY(2px);
    display: inline-block;
}

.awards-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(234px, calc(16.6667% - 16.6667px), 100%), 1fr));
    gap: 20px;
    width: 100%;
}

.awards-list-container .award img {
    width: 100%;
    height: auto;
    max-width: 217px;
}

.news-container {
    width: 100%;
    height: auto;
    padding: 50px 20px 200px 20px;
}

.news-container .news-title-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.news-title-container h4 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1.5%;
    margin-bottom: 60px;
}

.news-title-container .view-all-news {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-bottom: 60px;
}

.news-title-container .view-all-news:hover {
    color: var(--color-red);
}

.news-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(340px, calc(33.3333% - 13.3333px), 100%), 1fr));
    gap: 20px;
    width: 100%;
}

.news-list-container .news-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}

.news-list-container .news-item a:first-of-type:hover h6 {
    color: var(--color-red);
}

.news-list-container .news-item a:first-of-type {
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

.news-container-homepage .news-link-title {
    text-decoration: none;
}

.news-container-homepage .news-link-image:hover + .news-link-title h6, .news-link-title:hover h6 {
    color: var(--color-red);
}

.news-item h6 {
    font-weight: 500;
    font-size: 20px;
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.news-item .news-description {
    font-weight: 400;
    font-size: 20px;
    line-height: 135%;
    letter-spacing: 0%;
    color: var(--color-gray);
    margin-bottom: 10px;
}

.news-item a {
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.news-item a:hover {
    color: var(--color-red);
}

.clients-container {
    width: 100%;
    height: auto;
    padding: 50px 20px 200px 20px;
}

.clients-container h5 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1.5%;
    margin-bottom: 60px;
}

.clients-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(260px, calc(20% - 16px), 100%), 1fr));
    gap: 20px;
    row-gap: 60px;
    width: 100%;
}

.clients-list-container .client {}

.clients-list-container .client img {
    width: 100%;
    height: auto;
    max-width: 264px;
}

footer {
    background-color: #161616;
    width: 100%;
    height: auto;
    padding: 160px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-logo-container {
    width: 100%;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 4px solid var(--color-white);
}

.footer-logo-container img {
    width: 100%;
    height: auto;
    max-width: 430px;
}

.footer-info-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    border-bottom: 4px solid var(--color-white);
    padding-bottom: 40px;
}

.footer-company-info-container {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 80px;
}

.footer-address-container {
    width: 100%;
    max-width: 217px;
}

.footer-address-container p {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    color: var(--color-white);
}

.footer-address-container p a {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-white);
    transition: color 0.3s ease;
}

.footer-address-container p a:hover {
    color: var(--color-red);
}

.footer-social-container {
    width: 80px;
}

.footer-social-container a {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    text-decoration: underline;
    color: var(--color-white);
    transition: color 0.3s ease;
    text-underline-offset: 2px;
    display: block;
    margin-bottom: 6px;
}

.footer-social-container a:hover {
    color: var(--color-red);
}

.footer-eu-container {
    width: 193px;
}

.footer-eu-container img {
    width: 193px;
    height: auto;
}

.footer-legal {
    width: 100%;
    max-width: 38px;
}

.footer-legal img {
    width: 100%;
    height: auto;
}

.footer-legal-links-wrapper {
    width: 100%;
    display: flex;
    gap: 8px;
    padding-top: 20px;
}

.footer-legal-links-wrapper a {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-white);
    transition: color 0.3s ease;
}

.footer-legal-links-wrapper a:hover, .footer-legal-links-wrapper a.active {
    color: var(--color-red);
}



.hamburger-wrapper {
    display: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

/* Hamburger color states */
.hamburger-wrapper img {
    filter: brightness(0) invert(1); /* White by default on homepage */
    transition: filter 0.3s ease;
}

/* Black hamburger when header is solid */
body.homepage header.is-solid .hamburger-wrapper img {
    filter: brightness(0) invert(0); /* Black */
}

/* Black hamburger on non-homepage pages */
body:not(.homepage) .hamburger-wrapper img {
    filter: brightness(0) invert(0); /* Black */
}

.close-icon {
    display: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.projects-container {
    width: 100%;
    padding: 180px 20px 100px 20px;
}

.projects-filters-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0px;
}

.projects-active-filters {
    padding-top: 20px;
    width: 100%;
    display: flex;
}

.projects-main-list {
    padding-top: 80px;
}

.projects-filters-left-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.projects-filters-left-wrapper a {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
    text-transform: lowercase;
}

.projects-filters-left-wrapper a:hover {
    color: var(--color-red);
}

.projects-filters-left-wrapper a .icon.remove-cat {
        padding-left: 2px;
    transform: translateY(2px);
    display: inline-block;
}

.active-filters-main-container {
    width: 100%;
    display: flex;
    gap: 20px;
    padding-top: 20px;
}

.active-filters-main-container a {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
    text-transform: lowercase;
    display: flex;
    gap: 6px;
    align-items: center;
}

.active-filters-main-container a .icon {
    transform: translateY(2px);
}

.projects-mobile-filters {
    display: none;
}

.projects-filters-right-wrapper a {
    text-decoration: none;
    display: flex;
    gap: 4px;
    transition: color 0.3s ease;
}

.projects-filters-right-wrapper a:hover {
    color: var(--color-red);
}

.projects-filters-right-wrapper a .label {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

.projects-filters-right-wrapper a .icon,
.projects-mobile-filters .icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    transform: translateY(4px);
    transition: transform 0.3s ease;
}

.result-number {
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-black);
    display: block;
}

.projects-main-list .projects-load-more-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.active-filters-tags button {
        width: 16px;
    height: 16px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #000;
}
.projects-filters-list {
    position: fixed;
    inset: 0;
    background-color: rgba(217, 217, 217, 0.5);
    z-index: 1002;

    padding-top: 160px;
    overflow-y: auto;

    /* početno stanje (skriven dolje) */
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;

    transition: 
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        visibility 0s linear 0.45s;
}

/* otvoreno */
.projects-filters-list.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;

    transition: 
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}

.projects-filters-list-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    background-color: #fff;
    padding: 20px 20px 40px 20px;
}

.projects-filters-list-top .projects-filters-active-filters {
    display: flex;
    gap: 20px;
        flex-wrap: wrap;
    max-width: 70%;
}

.projects-filters-active-filters a,
.projects-filters-close-filters a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-decoration: underline;
    text-underline-offset: 2px;
    gap: 4px;
    color: var(--color-black);
    transition: color 0.3s ease;
}

.projects-filters-active-filters a:hover,
.projects-filters-close-filters a:hover {
    color: var(--color-red);
}

.projects-filters-active-filters a .label,
.projects-filters-close-filters a .label {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    transition: color 0.3s ease;
    text-transform: lowercase;
}

.projects-filters-active-filters a:hover .label,
.projects-filters-close-filters a:hover .label {
    color: var(--color-red);
}

.projects-filters-active-filters a .icon,
.projects-filters-close-filters a .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.projects-filters-content {
    background-color: #fff;
    padding: 0 20px 20px 20px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 60px;
}

.fast-menu-container {
    display: none;
}

.projects-filters-block {
    margin-bottom: 50px;
    width: 100%;
    max-width: 190px;
}

.projects-filters-block .heading {
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 0%;
    color: var(--color-black);
    margin-bottom: 10px;
    display: block;
}

.projects-filters-block ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.projects-filters-block ul li span, .projects-filters-block ul li a {
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 0%;
    color: var(--color-black);
    transition: color 0.3s ease;
}

.projects-filters-block ul li a:hover {
    color: var(--color-red);
}

.project-heading {
    width: 100%;
    margin: 0 auto;
    padding: 120px 20px 30px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.project-heading h1 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
}

.project-hero-image-wrapper {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 70px;
}

.project-hero-image-wrapper img {
    width: 100%;
    height: auto;
}

.project-one-image {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 20px;
}

.project-one-image a, .project-one-image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-one-image a img {
    width: 100%;
    height: auto;
    display: block;
}

.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* keeps it proportional */
}

/* Make iframe fully fill wrapper */
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.project-two-images {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.project-two-images a {
    width: calc(50% - 10px);
    height: auto;
    display: block;
    box-sizing: border-box;
}

.project-two-images a img {
    width: 100%;
    height: auto;
    display: block;
}

.project-video {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 20px;
}

.project-video video,
.project-video img,
.project-video iframe {
    width: 100%;
    height: auto;
    display: block;
}

.project-three-images {
    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.project-three-images a {
    width: calc(33.333% - 13.333px);
    height: auto;
    display: block;
    box-sizing: border-box;
}

.project-three-images a img {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

.project-similar-projects {
    width: 100%;
    padding: 100px 20px 140px 20px;
}

.project-similar-projects-title-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.project-similar-projects-title-container h4 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: 0;
    margin-bottom: 40px;
}

.project-similar-projects-title-container .view-all-projects {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: underline;
    margin-bottom: 40px;
    text-underline-offset: 2px;
}

.project-similar-projects-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(280px, calc(25% - 15px), 100%), 1fr));
    gap: 20px;
    row-gap: 80px;
    width: 100%;
}

.project-close-cta-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    position: fixed;
    bottom: 0;
}

.project-close-cta-container a {
    padding: 9.5px 48px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.project-close-cta-container a:hover {
    background-color: var(--color-red);
}


.project-description-container {
    width: 100%;
    margin: 0 auto;
    padding: 50px 20px 70px 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.project-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 60%;
}

.project-description h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
    margin-bottom: 20px;
        font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-gray);
}

.first-description {
    margin-bottom: 20px;
}

.first-description p {
    font-weight: 400;
    font-size: clamp(1.75rem, 1.2rem + 0.8vw, 2.375rem);
    line-height: 130%;
    color: var(--color-black);
}

.second-description {}

.second-description p {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-black);
}

.second-description.notice-description {
    padding-top: 20px;
}

.second-description.notice-description p {
    font-size: 16px;
}

.project-details {
    max-width: 400px;
}

.project-details-tags-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.project-details-tags-container a {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    vertical-align: middle;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-black);
    transition: color 0.3s ease;
    text-transform: lowercase;
}

.project-details-tags-container a:hover {
    color: var(--color-red);
}

.project-details-tags-container a.project-details-client {
    text-transform: none;
}

.project-info-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 40px;
}

.project-info-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
}

.project-info-label {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-gray);
}

.project-info-content {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-black);
}

.news-heading {
    width: 100%;
    margin: 0 auto;
    padding: 180px 20px 50px 20px;
}

.news-heading h1 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
}

.main-news-list-container {
    width: 100%;
    padding: 0 20px;
}

.main-news-list-container .main-news-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.main-news-list-container .main-news-item .main-news-item-image-wrapper {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 80px;
}

.main-news-list-container .main-news-item .main-news-item-image-wrapper img {
    width: 100%;
    height: auto;
}

.main-news-list-container .main-news-item .main-news-item-text-wrapper {
    width: 100%;
    max-width: 334px;
}

.main-news-list-container .main-news-item .main-news-item-image-wrapper:hover 
+ .main-news-item-text-wrapper .news-list-title {
    color: var(--color-red);
}

.main-news-list-container .main-news-item .main-news-item-text-wrapper h6, .main-news-list-container .main-news-item .main-news-item-text-wrapper a.news-list-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-black);
    margin-bottom: 5px;
    text-decoration: none;
}

.main-news-list-container .main-news-item .main-news-item-text-wrapper .news-description {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 0%;
    color: var(--color-gray);
}

.main-news-list-container .main-news-item .main-news-item-text-wrapper a {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    text-align: center;
    vertical-align: middle;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-black);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.main-news-list-container .main-news-item .main-news-item-text-wrapper a:hover {
    color: var(--color-red);
}


.main-news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(340px, calc(33.3333% - 13.3333px), 100%), 1fr));
    gap: 20px;
    width: 100%;
    row-gap: 80px;
}

.main-news-list .news-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}

.main-news-list .news-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

.main-news-list .news-item h6, .main-news-list .news-item .news-list-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    margin-bottom: 5px;
    text-decoration: none;
}

.main-news-list .news-item .news-description {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-gray);
    margin-bottom: 10px;
}

.main-news-list .news-item a {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--color-black);
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.main-news-list .news-item a:first-of-type {
    width: 100%;
}

.main-news-list .news-item a:first-of-type:hover ~ .news-list-title {
    color: var(--color-red);
}

.main-news-list .news-item a:hover {
    color: var(--color-red);
}

.news-load-more-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 50px;
    margin-bottom: 230px;
}

.news-load-more-container .result-number {
    font-weight: 400;
    font-size: 15px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--color-black);
}

.news-load-more-container .load-more-projects {
    padding: 9.5px 48px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.news-load-more-container .load-more-projects:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.news-title-container {
    width: 100%;
    padding: 110px 20px 40px 20px;
}

.news-title-container h1 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
    margin-bottom: 40px;
}

.news-title-container .date {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    margin-bottom: 15px;
    display: block;
}

.news-title-container p {
    font-weight: 400;
    font-size: 28px;
    line-height: 130%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--color-black);
    width: 60%;
}

.about-us-title-container {
    width: 100%;
    padding: 180px 20px 194px 20px;
    max-width: 560px;
    margin: 0 auto;
}


.about-us-title-container h1 {
    font-weight: 500;
    font-size: 62px;
    line-height: 120%;
    letter-spacing: -2%;
    text-align: center;
    color: var(--color-black);
}

.about-us-text-container {
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 138px;
    padding-top: 80px;
}

.about-us-text-left {
    width: 77%;
    max-width: 1764px;
}

.about-us-text-left h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
    margin-bottom: 40px;
}

.about-us-text-left p {
    font-weight: 400;
    font-size: 36px;
    line-height: 120%;
    letter-spacing: 0%;
    color: var(--color-black);
    margin-bottom: 40px;
}

.about-us-text-container.eu-container .about-us-text-left p {
    font-size: 28px;
}

.about-us-text-left p a {
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-red);
    transform: translateY(-8px);
    display: inline-block;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.about-us-text-left p a:hover {
    color: var(--color-black);
}

.about-us-text-right {
    width: 23%;
    max-width: 403px;
}

.about-us-text-right h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
    margin-bottom: 40px;
}

.about-us-address-container {}

.about-us-address-container .about-us-address-box {
    border-bottom: 1px solid var(--color-black);
    padding-bottom: 10px;
    padding-top: 20px;
}

.about-us-address-container .about-us-address-box img {
    max-width: 194px;
}

.about-us-address-container .about-us-address-box:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.about-us-address-container .about-us-address-box p {
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    letter-spacing: 0%;
    color: var(--color-black);
    margin-bottom: 5px;
}

.about-us-address-box p strong {
    font-weight: 700;
}

.about-us-address-container .about-us-address-box p a {
    color: var(--color-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

.about-us-address-container .about-us-address-box p a:hover {
    color: var(--color-black);
}

.about-us-svg {
    position: relative;
    display: inline-block;
}

.about-us-svg-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115%;
    height: 160%;
    pointer-events: none;
    overflow: visible;
    clip-path: inset(0 100% 0 0);
}

.about-us-svg-overlay.is-visible {
    animation: reveal-svg-annotation 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes reveal-svg-annotation {
    to {
        clip-path: inset(0 0% 0 0);
    }
}

.about-us-awards-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 100px 20px 200px 20px;
}

.about-us-awards-container .about-us-awards-wrapper {
    width: 50%;

}

.about-us-awards-wrapper h3 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    color: var(--color-black);
    margin-bottom: 60px;
}

.about-us-boxes-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    row-gap: 30px;
}

.about-us-box {
    border-top: 1px solid var(--color-black);
    padding-top: 10px;
}

.about-us-box span {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    color: var(--color-black);
}

.about-us-text-container.eu-container {
    padding-top: 180px;
    padding-bottom: 200px;
}

.close-btn-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    padding-bottom: 40px;
}

.close-btn-container button {
    padding: 9.5px 48px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.close-btn-container button:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

.policy-privacy-container {
    width: 60%;
    padding: 180px 20px 40px 20px;
}

.policy-privacy-container h1 {
    font-weight: 500;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -1.5%;
    margin-bottom: 50px;
}

.policy-privacy-container p {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    vertical-align: middle;
    margin-bottom: 10px;
}

.policy-privacy-container p a {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-black);
    transform: translateY(-1px);
    display: inline-block;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.policy-privacy-container p a:hover {
    color: var(--color-red);
}

.policy-privacy-container h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -1.5%;
    margin-bottom: 20px;
    padding-top: 50px;
}

.policy-privacy-container h3 {
    margin-bottom: 15px;
    padding-top: 30px;
}

.policy-privacy-container ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding-left: 20px;
    margin-bottom: 10px;
}

.policy-privacy-container ul li {
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-black);
    list-style-type: disc;
}

.projects-filters-block .heading,
.projects-filters-block ul li span {
    font-size: var(--font-size-h9);
}

.close-btn-container button {
    font-size: var(--font-size-h8);
}

.policy-privacy-container h3 {
    font-size: var(--font-size-h5);
}

.policy-privacy-container h2 {
    font-size: var(--font-size-h4);
}

.project-heading h1,
.news-title-container h1,
.policy-privacy-container h1 {
    font-size: var(--font-size-h2);
}

#sto2_cms_cookie_consent {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #fff;
    padding: 20px 30px;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

#sto2_cms_cookie_consent > div:first-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#sto2_cms_cookie_consent div.cookie-consent-content-left {
    color: #000;
font-weight: 400;
font-size: 18px;
line-height: 135%;
letter-spacing: 0%;
vertical-align: middle;
max-width: 60%;
}

#sto2_cms_cookie_consent div.cookie-consent-content-left p a {
    color: inherit;
    transition: color 0.3s ease;
}

#sto2_cms_cookie_consent div.cookie-consent-content-left p a:hover {
    color: var(--color-red);
}

#sto2_cms_cookie_consent div.cookie-consent-content-right button {
    width: auto;
    height: auto;
    padding: 9.5px 38.5px;
    background-color: #000;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -1%;
    text-align: center;
    vertical-align: middle;
    outline: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

#sto2_cms_cookie_consent div.cookie-consent-content-right button:hover {
    background-color: var(--color-red);
}

@media screen and (max-width: 1300px) {
    .project-description-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .project-description {
        max-width: 100%;
    }

    .projects-filters-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .about-us-boxes-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .project-description {
        width: 100%;
    }

}

@media screen and (max-width: 1000px) {
    .about-us-text-right {
        width: 40%;
    }
    .about-us-text-left {
        width: 60%;
    }
    .projects-filters-container {
        justify-content: flex-start;
        margin-bottom: 50px;
        gap: 15px;
    }

    .projects-filters-left-wrapper {
        flex-wrap: wrap;
    }

    .projects-mobile-filters {
        display: block;
    }

    .projects-filters-right-wrapper {
        display: none;
    }

    .about-us-awards-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 80px;
    }

    .about-us-awards-container .about-us-awards-wrapper {
        width: 100%;
    }

    .about-us-text-container.eu-container {
        flex-direction: column;
        gap: 60px;
        padding: 144px 15px 60px 15px;
    }

    .about-us-text-container.eu-container .about-us-text-left,
    .about-us-text-container.eu-container .about-us-text-right {
        width: 100%;
        max-width: none;
    }
}

@media screen and (max-width: 768px) {
    .hamburger-wrapper {
        display: block;
    }
    
        body.homepage header nav.is-open ul li a,
    body.homepage header nav.is-open .lang-wrapper span,
    body.homepage header nav.is-open .lang-wrapper a {
        color: var(--color-black) !important;
    }

    /* Ensure hover states work in mobile menu */
    body.homepage header nav.is-open ul li a:hover {
        color: var(--color-red) !important;
    }

    header nav {
        display: flex;
        position: fixed;
        z-index: 999;
        background-color: var(--color-white);
        box-shadow: -6px 0px 10px 0px #00000040;
        right: 0;
        top: 0;
        height: 100vh;
        color: var(--color-black);
        width: 248px;
        transform: translateX(110%);
        transition: transform 0.3s ease;
        mix-blend-mode: normal;
        isolation: isolate;
    }

    header nav.is-open {
        transform: translateX(0);
    }

    header nav ul li a,
    .lang-wrapper span {
        color: var(--color-black);
        font-weight: 500;
        font-size: 38px;
        line-height: 120%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
    }

    header nav .close-icon {
        display: block;
        position: absolute;
        top: 10px;
        right: 15px;
    }

    header nav ul {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 98px;
        padding-left: 30px;
        gap: 20px;
        width: 100%;
    }

    header {
        padding: 19px 15px;
    }

    .lang-wrapper a,
    .lang-wrapper span {
        font-size: 26px;
        line-height: 120%;
    }

    .footer-company-info-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 50px;
        width: 100%;
    }

    .footer-info-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 100px;
        padding-bottom: 30px;
    }

    footer {
        padding: 220px 15px 20px 15px;
    }

    .homepage-projects-list {
        row-gap: 60px;
    }

    .projects-container {
        padding-bottom: 80px;
        padding-top: 144px;
    }

    .projects-load-more-container {
        padding-top: 60px;
    }

    .project-two-images,
    .project-three-images {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .project-two-images img,
    .project-three-images img {
        width: 100%;
    }

    .project-heading h1 {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -1.5%;
    }

    .first-description p {
        font-size: 25px;
        line-height: 130%;
        letter-spacing: 0%;
    }

    .project-details-tags-container a {
        font-size: 18px;
        line-height: 130%;
        letter-spacing: 0%;
        white-space: nowrap;
    }

    .project-details-tags-container {
        flex-wrap: wrap;
    }

    .project-info-label,
    .project-info-content {
        font-size: 18px;
        line-height: 130%;
        letter-spacing: 0%;
    }

    .homepage-projects-list-item .project-title {
        font-size: 24px;
        line-height: 135%;
        letter-spacing: -1%;
    }

    .projects-filters-content {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
        position: relative;
    }

    .projects-filters-block {
        max-width: 100%;
    }

    

    .fast-menu-container {
        position: absolute;
        right: 20px;
        top: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    .fast-menu-container a {
        font-weight: 400;
        font-size: 18px;
        line-height: 135%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        color: var(--color-black);
        text-decoration: none;
        transition: color 0.3s ease, border-color 0.3s ease;
        text-decoration: none;
    }

    .main-news-list-container .main-news-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        margin-bottom: 60px;
    }

    .main-news-list-container .main-news-item .main-news-item-image-wrapper {
        margin-bottom: 15px;
    }

    .main-news-list {
        row-gap: 60px;
    }

    .news-load-more-container {
        margin-bottom: 80px;
    }

    .news-title-container h1 {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -1.5%;
    }

    .news-title-container p {
        font-size: 25px;
        line-height: 130%;
        letter-spacing: 0%;
        width: 100%;
    }

    .about-us-text-container {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 60px;
        padding-top: 60px;
        padding: 60px 15px 0 15px;
    }

    .about-us-text-left,
    .about-us-text-right {
        width: 100%;
        max-width: none;
    }

    .about-us-title-container h1 {
        font-size: 40px;
        line-height: 120%;
        letter-spacing: -2%;
    }

    .about-us-title-container {
        max-width: 363px;
        padding: 150px 20px 113px 20px;
    }

    .project-one-image {
        padding: 0 15px;
    }

    .about-us-awards-container {
        padding: 80px 15px 80px 15px;
    }

    .about-us-text-left h2,
    .about-us-text-right h2,
    .about-us-awards-wrapper h3,
    .policy-privacy-container h1 {
        font-size: 32px;
        line-height: 120%;
        letter-spacing: -1.5%;
    }

    .about-us-text-left p {
        font-size: 25px;
        line-height: 120%;
        letter-spacing: 0%;
    }

    .about-us-text-left p a {
        transform: translateY(-4px);
    }

    .about-us-text-container.eu-container .about-us-text-left h2:last-of-type {
        padding-top: 40px;
    }

    .homepage-projects {
        padding: 22px 15px 200px 15px;
    }

    .awards-container {
        padding: 50px 15px 200px 15px;
    }

    .news-container {
        padding: 50px 15px 200px 15px;
    }

    .clients-container {
        padding: 50px 15px 200px 15px;
    }

    .clients-list-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-heading {
        padding: 120px 15px 30px 15px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 30px;
    }

    .project-hero-image-wrapper {
        padding: 0 15px;
    }

    .project-description-container {
        padding: 0 15px 70px 15px;
    }

    .project-two-images {
        padding: 0 15px;
    }

    .project-video {
        padding: 0 15px;
    }

    .project-three-images {
        padding: 0 15px;
    }

    .project-similar-projects {
        padding: 50px 15px 140px 15px;
    }

    .projects-container {
        padding: 144px 15px 80px 15px;
    }

    .news-title-container {
        padding: 110px 15px 40px 15px;
    }

    .news-heading {
        padding: 180px 15px 50px 15px;
    }

    .main-news-list-container {
        padding: 0 15px;
    }

    .policy-privacy-container {
        padding: 144px 15px 40px 15px;
    }

    .policy-privacy-container h2 {
        padding-top: 40px;
    }

    .policy-privacy-container p,
    .policy-privacy-container p a,
    .policy-privacy-container ul li {
        font-size: 25px;
        line-height: 135%;
        letter-spacing: 0%;
    }

    .policy-privacy-container {
        width: 100%;
    }

    .about-us-boxes-container {
        grid-template-columns: 1fr;
    }
    .project-two-images a, .project-three-images a {
        width: 100%;
    }
    #sto2_cms_cookie_consent > div:first-of-type {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    }
    #sto2_cms_cookie_consent div.cookie-consent-content-left {
        max-width: none;
    }
    .introduction-container {
        padding-right: 15px;
    }
}