/*
* Bootstrap layout must be declared first to ensure lower specificity, preventing from overriding our custom layouts.
*/
@layer bootstrap, reset, elements, layout, components, utilities, overrides, states, accessibility;

/*
  BOOTSTRAP LAYER
  Import Bootstrap right after declaring the layers. It must precede all other CSS rules, otherwise the browser will ignore the @import.
  DO NOT UPGRADE: Version is locked to 4.3.1 (EOL). Upgrading to newer versions will cause breaking changes and compatibility issues.
*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css") layer(bootstrap);

/* 
  TOKENS / DESIGN VARIABLES

  This is the place where we create the values that we will be reusing in the system.
  Text colors, fonts and the rest.
  This way, if we want to change just the style, it will be possible with minor changes.
*/


:root{
        --primary-bg-color:  rgb(255, 255, 255);   
         --secondary-bg-color: rgba(247, 248, 250);
         /*icons*/
         --white-color-icon: invert(100%) sepia(100%) saturate(0%) hue-rotate(310deg) brightness(107%) contrast(101%);
         --black-color-icon:invert(0%) sepia(100%) saturate(7430%) hue-rotate(13deg) brightness(111%) contrast(114%);
         --grey-color-icon:invert(51%) sepia(1%) saturate(0%) hue-rotate(11deg) brightness(92%) contrast(92%);
         --yellow-color-icon:invert(80%) sepia(82%) saturate(1149%) hue-rotate(2deg) brightness(91%) contrast(88%);
         /*overlay*/
         --overlay-bg-color: #0f0f0f61;
         --overlay-btn-color: #1111119a;
         /*text*/
         --text-color: rgb(0,0,0);
         --text-light: rgb(102, 102, 102);

         --white-color: rgb(255, 255, 255);
         --grey-color: rgb(58, 58, 58);
         --light-grey-color: rgba(234, 235, 237);
         --black-color: rgb(0,0,0);
         /*--dark-blue-color: rgb(119, 157, 180);
         --light-blue-color:rgb(164, 190, 205);
         --white-ish-color:rgb(247, 248, 250);*/
         --very-dark-blue-color:rgb(36 54 65);
         --dark-blue-color: rgb(57, 86, 103);
         --light-blue-color:rgb(81, 124, 148);
         --white-ish-color:rgb(247, 248, 250);

         --more-link-padding:28px;
         }

@layer reset{
         *,*::before, *::after{
             box-sizing: border-box;
         }
         *{
             margin:0;
         }
         body{
             min-height: 100dvh;
             line-height: 1.2; /*1.5*/
         }
         input,button,textarea, select{
             font:inherit;
         }
          img, svg{
             display: block;
             max-width: 100%;
             height: auto;
         }
         p, h1,h2{
             overflow-wrap: break-word;
         }
} 

@layer elements{
         body{
             font-family:"Jura", sans-serif;
             background-color:var(--white-color);
             color:var(--black-color);
         }
         a{
             color:inherit;
             text-decoration: none;
         }
         svg{
             width: 20px;
             height: 20px;
         }

         p{
            font-weight: 300;
            font-size: 1.1rem;
         }
}

@layer layout{
    /*header*/
    header {
        position: fixed;
        z-index: 100;
        width: 100%;
    }
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        flex-wrap: wrap;
        width: 100%;
    }
    .header-menu {
        display: flex;
        flex: 1 1 0;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 1.5rem;
        min-width: 0;
    }
    header .header-contact .component.contacts {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        padding-block: 1rem;
    }
    /*menu*/
    /*mobile*/
    #primary-navigation-desktop,
    .side-panel-toggle {
        display: none;
    }
    dialog.mobile-navigation {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(26rem, 88vw);
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 5rem 3rem;
        overflow-y: auto;
        border: 0;
        background: var(--black-color);
        color: var(--white-color);
    }
    .mobile-navigation .main-menu ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .mobile-navigation .main-menu .sub-menu,
    .mobile-navigation .main-menu .sub-menu-lvl2 {
        position: static;
        width: 100%;
        min-width: 0;
        padding:0.5rem 0 0 1rem;
        background: transparent;
    }
    /*general + desktop*/
    .main-menu ul {
        display: flex;
        list-style: none;
        align-items: flex-start;
        padding: 0;
        gap: 1.5rem;
    }
    .main-menu ul > li > .submenu-toggle-label {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .main-menu .menu-list > li {
        position: relative;
    }
    .main-menu .sub-menu {
        position: absolute;
        top: calc(100% + 1.6rem);
        left: 0;
        z-index: 1;
        gap: 0;
    }
    .main-menu .sub-menu > li {
        position: relative;
        width: 100%;
    }
    .main-menu .sub-menu-lvl2 {
        position: absolute;
        top: 1px;
        left:100%;
        z-index: 2;
        gap: 0;
        width: 100%;
       background-color: var(--dark-blue-color);
    }
    /*morecontent*/    
    .more-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .more-content .more-text p {
        margin-top: 0.7rem;
        font-size: medium;  
        overflow-wrap: anywhere;
    }
    .more-content .more-text h3 {
        overflow-wrap: anywhere;
    } 
    .more-content .more-text > .title-link {
        display: inline-block;
    }
    .more-text {
        display: flex;
        flex-direction: column;
    }
    /*small-url*/
    .component.smallurl {
        position: relative;
        z-index: 2;
        transform: translateY(-150px);
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 2.5rem;
    }
    .component.smallurl .smallurl-wrapper {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 30px;
        padding: 2.5rem;
        transform: translateX(-2.5rem);
        background-color: var(--white-color);
        position: relative;
        isolation: isolate;
    }
    .component.smallurl .smallurl-item .img-container {
        width: 25%;
        aspect-ratio: 1;
    }
    /*carousel */
    .component.carousel {
        --carousel-content-width: min(100%, 1280px);
        --carousel-text-width: 40%;
        position: relative;
        width: 100%;
        background: var(--white-color);
        overflow: hidden;
    }
    /*bigurl*/
    .component.bigurl {
        background-color: var(--secondary-bg-color);
        margin-bottom: -20rem;
        padding-bottom: 20rem;
    }
    .component.bigurl .bigurl-wrapper{
        display: flex;
        width: 80%;
        margin: 0 auto;
        max-width: 1280px;
        padding-block: 5rem;
        gap: 1.5rem;
        flex-direction: column;
        align-items: center;
    }
    /*mediumurl*/
    .component.mediumurl {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 2rem 1rem;
        align-items: stretch;
    }
    .component.mediumurl .mediumurl-item {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 2rem;
    }
    /* smallurl2 mosaic grid */
    .component.smallurl2 {
        /*width: 80%;
        max-width: 1280px;
        margin: 0 auto;*/
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 0;
        margin-top: 5rem;
    }
    .component.smallurl2 .smallurl2-card,
    .component.smallurl2 .smallurl2-card:nth-child(4n + 1),
    .component.smallurl2 .smallurl2-card:nth-child(4n + 2),
    .component.smallurl2 .smallurl2-card:nth-child(4n + 3),
    .component.smallurl2 .smallurl2-card:nth-child(4n + 4) {
        grid-column: 1 / -1;
        aspect-ratio: auto;
        height: auto;
        overflow: visible;
    }
    .component.smallurl2 .smallurl2-card-link,
    .component.smallurl2 .smallurl2-card:nth-child(4n + 1) .smallurl2-card-link,
    .component.smallurl2 .smallurl2-card:nth-child(4n + 2) .smallurl2-card-link,
    .component.smallurl2 .smallurl2-card:nth-child(4n + 3) .smallurl2-card-link,
    .component.smallurl2 .smallurl2-card:nth-child(4n + 4) .smallurl2-card-link {
        height: auto;
        grid-template-areas:
            "image"
            "text";
        overflow: visible;
    }
    .component.smallurl2 .smallurl2-card .img-container {
        aspect-ratio: 16 / 9;
    }
    .component.smallurl2 .smallurl2-card .img-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Style the text cell. */
    .component.smallurl2 .smallurl2-card .more-content {
        grid-area: text;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
        overflow: hidden;
        padding: 1.5rem;
        background-color: var(--dark-blue-color);
        color: var(--white-color);
    }
    /* Alternate the text cell background color. */
    .component.smallurl2 .smallurl2-card:nth-child(even) .more-content {
        background-color: var(--light-blue-color);
    }
    .component.smallurl2 .smallurl2-card .more-text {
        min-width: 0;
    }
    /* Keep the heading compact inside the small text cell. (has the size of h4(16px)) */
    .component.smallurl2 .smallurl2-card .more-text h3 {
        font-size: 1.57rem;
    }
    /* Limit the visible description so the button stays inside the cell. */
    .component.smallurl2 .smallurl2-card .more-text p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
        font-size: medium;
    }
    .component.smallurl2 .smallurl2-card .more-btn {
        background-color: var(--black-color) !important ;
    } 
    .component.smallurl2 .smallurl2-card-link {
        display: grid;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
    }
    /*mediumurl2*/
    .component.mediumurl2 {
        /*max-width: 1280px;
        width: 80%;
        margin: 0 auto;*/
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .component.mediumurl2 .mediumurl2-card {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    .component.mediumurl2 .mediumurl2-card-link {
        display: grid;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
    }
    /*parallax*/
    .component.bigurl2 .img-container {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }
    .component.bigurl2 .parallax-image {
        position: absolute;
        width: 100%;
        height: 170%;
        top: -35%;
        left: 0;
        object-fit: cover;
        transform: translate3d(0, var(--parallax-y, 0px), 0);
        will-change: transform;
    }
    .component.bigurl2 .more-content-container {
        max-width: 1280px;
        width: 80%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .component.bigurl2 .bigurl2-wrapper {
        position: relative;
    }
    /*smallurl3*/
    .component.smallurl3 {
        margin: 0 auto;
        max-width: 1280px;
        width: 80%;
        padding-block: 4rem;
    }
    .component.smallurl3 .smallurl3-images {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
    /*contacturl*/
    .contacturl-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        width: 80%;
        max-width:1280px;
        margin: 0 auto;
        padding-block: 5rem;
    }
    .contacturl-form {
        display: grid;
        grid-template-columns:1fr;
        gap: 1.5rem;
        min-width: 0;
    }
    .contact-form-message-sent {
        grid-column: 2;
    }
    /*footer*/
    .footer .main-footer-wrapper {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-block: 2rem;
    }
    .footer .lower-footer > div{
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-block: 1rem;
    }
    #back-to-top-btn {
        position: fixed;
        right: 6rem;
        bottom: 2rem;
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
        cursor: pointer;
        z-index: 401;
        padding: 0;
    }
    #back-to-top-btn svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
    }
    /* sidepanel */
    dialog.side-panel {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(24vw, 29rem);
        min-width: 30rem;
        height: 100dvh;
        max-width: none;
        max-height: none;
        padding: 4rem;
        overflow-y: auto;
        border: 0;
        background: #000;
        color: #fff;
    }

    /*photogallery*/
    .gallery {
        position: relative;
        isolation: isolate;
        padding: 3rem 0 6rem 0;
        /*min-height: 100vh;*/
    }
    .gallery .container {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
    }
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1.5rem;
        list-style: none;
        padding: 0;
    }
    .gallery-item {
        min-width: 0;
    }
    
    /*videos*/
    .videos {
        position: relative;
    }
    .videos-wrapper {
        width: 80%;
        max-width: 1280px;
        padding: 3rem 0 6rem 0;
        margin: 0 auto;
    }
    .video-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.7rem;
        padding: 0;
        list-style: none;
    }
    .video-gri-item {
        min-width: 0;
    }
    .video-grid-item:first-child {
        grid-column: 1 / -1;
    }
    .video-grid-item:first-child .video-card {
        display: grid;
        grid-template-columns: 1fr;
    }
    .video-grid-item:first-child .more-content {
        display: flex;
        align-items: center;
        padding: 3rem;
        border: 1rem solid var(--dark-blue-color);
    }
    .video-media {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1.5 / 1;
        background-color: var(--grey-color);
    }
    .video-media img,
    .video-media iframe {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
        cursor: pointer
    }
    .play-icon svg {
        filter: var(--white-color-icon);
        width: 40px;
        height: 40px;
    }
    .more-content {
        min-width: 0;
        padding-top: 0.75rem;
    }
    /*pdf*/
    section.pdf {
        position: relative;
    }
    .pdf-wrapper {
        width: 80%;
        max-width: 1280px;
        padding: 3rem 0 6rem 0;
        margin: 0 auto;
    }
    .pdf-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .pdf-card {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        height: 100%;
    }
    .pdf-card-image {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        position: relative;
    }
    /*article*/
    .article, 
    .terms {
        width: 80%;
        margin: 3rem auto 6rem auto;
        max-width: 1280px;
    }
    /*articles*/
    .article-catalog-wrapper {
        width: 80%;
        padding: 3rem 0 6rem 0;
        margin: 0 auto;
        max-width: 1280px;
    }
    .article-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        list-style: none;
        padding: 0;
    }
    /*contact*/
    .contact-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width:80%;
        margin: 3rem auto 0 auto;
        max-width: 1280px;
    }
    .contact-details > li {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 1rem;
    }
    .contact-center {
        width: 100%;
        min-width: 0;
        height: 20rem;
        overflow: hidden;
    }
    .lower-contact-layout {
        background-color: var(--light-grey-color);
    }
    .lower-contact-layout > form {
        width: 80%;
        margin: 2rem auto 0 auto;
        max-width: 1280px;
        padding-block: 4.5rem;
    }
    /*offers*/
    .offers {
        position: relative;
    }
    .offer-wrapper {
        max-width: 1280px;
        padding: 3rem 0 6rem 0;
        margin: 0 auto;
        width: 80%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .offer-item {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .offer-content h2, .offer-content p {
        overflow-wrap: anywhere;
    }
    .offer-content {
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 1rem;
    }
    .offer-content .bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 2rem;
    }
    .offer-content .upper {
        display: flex;
        flex-direction: column;
    }
    /*search*/
    .search .results-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .search .result-item-container {
        width: 80%;
        max-width: 1280px;
        margin:0 auto;
        padding-block: 1rem;
    }
    article.result-card {
        display: flex;
        align-items: center;
        padding: 2em 0;
        gap: 2.2em;
        justify-content: space-between;
    }
    .result-content {
        display: flex;
        align-items: center;
        gap: 1rem;
    }


/*--------------------------------------------*/
    @media (min-width:600px) {
        /*smallurl*/
        .component.smallurl {
            padding-left: 0;
        }
        /*mediumurl*/
        .component.mediumurl .mediumurl-item {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /*smallurl3*/
        .component.smallurl3 .smallurl3-images {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        /*bigurl*/
        .component.bigurl .more-content {
        flex-direction: row;
        }
        .component.bigurl .more-content .more-text {
            width: 50%;
        }
        /*bigurl2*/
        .component.bigurl2 .more-content {
            width: 50%;
        }
                /* Each card spans either two or three grid cells. */
        .component.smallurl2 .smallurl2-card {
            display: grid;
            min-width: 0;
            min-height: 0;
            height: auto;
            overflow: hidden;
            grid-template-areas: "image text";
        }
        /* First card in each four-card pattern: image 2 cells, text 1. */
        .component.smallurl2 .smallurl2-card:nth-child(4n + 1) {
            grid-column: span 3;
            aspect-ratio: 3 / 1;
        }
        /* Fourth card: text 1 cell, image 2 cells. */
        .component.smallurl2 .smallurl2-card:nth-child(4n + 4) {
            grid-column: span 3;
            aspect-ratio: 3 / 1;
        }
        /* Two-cell cards: one cell for the image, one for the text. */
        .component.smallurl2 .smallurl2-card:nth-child(4n + 2),
        .component.smallurl2 .smallurl2-card:nth-child(4n + 3) {                
            grid-column: span 2;
            aspect-ratio: 2 / 1;
        }
        .component.smallurl2 .smallurl2-card:nth-child(4n + 1) .smallurl2-card-link {
            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            grid-template-areas: "image text";
        }
        .component.smallurl2 .smallurl2-card:nth-child(4n + 4) .smallurl2-card-link {
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
            grid-template-areas: "text image";
        }   
        .component.smallurl2 .smallurl2-card:nth-child(4n + 2) .smallurl2-card-link {
            grid-template-areas: "text image ";
        }
        .component.smallurl2 .smallurl2-card:nth-child(4n + 3) .smallurl2-card-link {
            grid-template-areas: " image text";
        } 
        /* Place the image and text into their grid areas. */
        .component.smallurl2 .smallurl2-card .img-container {
            grid-area: image;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            aspect-ratio: unset;
        }
        /*mediumurl2*/
        .component.mediumurl2 .mediumurl2-card {
            aspect-ratio: 2;
        }
        .component.mediumurl2 .mediumurl2-card-link {
            grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        }
        .component.mediumurl2 .mediumurl2-card:nth-child(even) .mediumurl2-card-link {
            grid-template-columns: 2fr 3fr;
        }
        .component.mediumurl2 .mediumurl2-card:nth-child(even) .img-container {
            grid-column: 2;
            grid-row: 1;
        }
        .component.mediumurl2 .mediumurl2-card:nth-child(even) .more-content {
            grid-column: 1;
            grid-row: 1;
        }
        /*video*/
        .video-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .video-grid-item {
            grid-column: span 1;
        }
        .video-grid-item:first-child {
            grid-column: 1 / -1;
        }
        .video-grid-item:first-child .video-card {
            grid-template-columns: 1fr;
        }
        /*pdf*/
        .pdf-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .pdf-grid-item {
            grid-column: 1 / -1;
        }
        .pdf-grid-item .pdf-card {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            align-items: center;
        }
        .pdf-grid-item .pdf-card-image {
            height: auto;
            aspect-ratio: 4 / 5;
        }
        .pdf-grid-item .pdf-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /*articles*/
        .article-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        /*photogallery*/
        .gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    }
    @media (min-width:800px) {
        /*smallurl*/
        .component.smallurl .smallurl-wrapper {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        /*bigurl*/
        .component.bigurl .bigurl-wrapper{
            flex-direction: row;
        }
        /*mediumurl*/
        .component.mediumurl {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .component.mediumurl .mediumurl-item {
            display: flex;
            flex-direction: column;
        }
        /*smallurl3*/
        .component.smallurl3 .smallurl3-images {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        /*bigurl2*/
        .component.bigurl2 .more-content {
            width: 35%;
        }
        /*carousel*/
        .component.carousel {
            width: 100%;
            height: 450px;
        }
        /*contacturl*/
        .contacturl-form {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
        /*video*/
            .video-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .video-grid-item:first-child .video-card {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: stretch;
        }
        .video-grid-item:first-child .video-media {
            aspect-ratio: auto;
            height: 100%;
        }
        .video-grid-item:first-child .video-media img {
            height: 100%;
            object-fit: cover;
        }
        .video-grid-item:nth-child(5n + 2),
        .video-grid-item:nth-child(5n + 3),
        .video-grid-item:nth-child(5n + 4) {
            grid-column: span 2;
        }
        .video-grid-item:nth-child(5n + 5),
        .video-grid-item:nth-child(5n + 6) {
            grid-column: span 3;
        }
        /*offers*/
        .offer-wrapper{
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2rem;
        }
        .offer-item {
            display: flex;
            flex-direction: column;
        }
        .offer-item:first-child,
        .offer-item:last-child {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: center;
            gap:2rem;
        }
         .offer-item:last-child .offer-image {
            order: 2;
            margin: 0;
        }
        .offer-item:last-child .offer-content {
            order: 1;
        }

    }
    @media (min-width:1000px) {
        /*smallurl2 mosaic*/
        .component.smallurl2 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        .component.smallurl2 .smallurl2-card:nth-child(4n + 2) .smallurl2-card-link {
            grid-template-areas: "image text ";
        }
        .component.smallurl2 .smallurl2-card:nth-child(4n + 3) .smallurl2-card-link {
            grid-template-areas: " text image";
        }
        /*mediumurl2*/
        .component.mediumurl2 .mediumurl2-card {
            aspect-ratio: 3.7 / 1;
        }
        /*footer*/
        .footer .main-footer-wrapper {
            grid-template-columns: minmax(0, 2fr) minmax(0,1fr) minmax(0, 2fr);
        }
        /*contact*/
         .contact-layout-primary {
            grid-template-columns:
                minmax(0, 1.5fr)
                minmax(0, 1.5fr)
                minmax(5rem, 1fr);
            align-items: center;
            column-gap: 0;
        }
        .contact-layout-additional {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: center;
            column-gap: 0;
        }
        .contact-left {
            position: relative;
            z-index: 2;
            grid-column: 1;
            margin-right: -3rem;
        }
        .contact-center {
            position: relative;
            z-index: 1;
            grid-column: 2;
            height: 500px;
        }
        .contact-right {
            position: relative;
            z-index: 2;
            grid-column: 3;
            padding-left: 1.25rem;
        }
    }
    @media (min-width: 1200px) {
        /*contacturl*/
        .contacturl-container {
            grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
        }
        /*menu*/
        .header-wrapper {
            align-items: self-end;
        }
        .menu-toggle,
        dialog.mobile-navigation {
            display: none !important;
        }
        #primary-navigation-desktop,
        .side-panel-toggle {
            display: block;
        }
        /*pdf*/
        .pdf-grid {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .pdf-grid-item:nth-child(7n + 1),
        .pdf-grid-item:nth-child(7n + 2),
        .pdf-grid-item:nth-child(7n + 6),
        .pdf-grid-item:nth-child(7n + 7) {
            grid-column: span 3;
        }
        .pdf-grid-item:nth-child(7n + 1) .pdf-card,
        .pdf-grid-item:nth-child(7n + 2) .pdf-card,
        .pdf-grid-item:nth-child(7n + 6) .pdf-card,
        .pdf-grid-item:nth-child(7n + 7) .pdf-card {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            align-items: center;
        }
        .pdf-grid-item:nth-child(7n + 1) .pdf-card-image,
        .pdf-grid-item:nth-child(7n + 2) .pdf-card-image,
        .pdf-grid-item:nth-child(7n + 6) .pdf-card-image,
        .pdf-grid-item:nth-child(7n + 7) .pdf-card-image {
            aspect-ratio: 4/5;
        }
        .pdf-grid-item:nth-child(7n + 3),
        .pdf-grid-item:nth-child(7n + 4),
        .pdf-grid-item:nth-child(7n + 5) {
            grid-column: span 2;
        }
        .pdf-grid-item:nth-child(7n + 3) .pdf-card,
        .pdf-grid-item:nth-child(7n + 4) .pdf-card,
        .pdf-grid-item:nth-child(7n + 5) .pdf-card {
            grid-template-columns: 1fr;
        }
        .pdf-grid-item:nth-child(7n + 3) .pdf-card-image,
        .pdf-grid-item:nth-child(7n + 4) .pdf-card-image,
        .pdf-grid-item:nth-child(7n + 5) .pdf-card-image {
            height: auto;
            aspect-ratio: 4 / 3;
        }
        /*articles*/
        .article-grid {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
        /* first card-double the size of the small ones*/
        .article-grid-item:first-child {
            grid-column: span 6;
            grid-row: span 2;
        }
        /*small ones */
        .article-grid-item:nth-child(n + 2):nth-child(-n + 5) {
            grid-column: span 3;
        }
        /*small ones + 1 (medium ones) */
        .article-grid-item:nth-child(n + 6) {
            grid-column: span 4;
        }
    }
    @media (min-width: 1400px) {
        /*photogallery*/
        .gallery-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}

@layer components{
    /*containers*/
    .main-slideshow-container {
        width: 100%;
        height: 600px;
        position: relative;
        overflow: hidden;
    }
    .logo-container {
        width: 200px;
    }
    /*header*/
    header.header-over-slideshow {
        border-bottom: 1px solid var(--white-color);
    }
    header .header-contact {
        flex: 0 0 100%;
        width: 100%;
        background-color: var(--dark-blue-color);
        color: var(--white-color);
        display: none;
    }
    .header-contact .contact-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    header .header-contact svg {
        filter: var(--white-color-icon);
    }
    /*menu*/
    /*general + desktop*/
    #navigation-mobile .main-menu a[aria-current="page"],
    .footer-menu a[aria-current="page"] {
        color: var(--light-blue-color);
    }
    .main-menu .sub-menu li, 
    .language-switcher-list li {
        background-color: var(--light-blue-color);
        padding: 1rem;
        border-bottom: 1px solid var(--white-ish-color);
    }
    .language-switcher-list li {
        width: 90px;
    }
    .main-menu .sub-menu li:has(ul) {
        background: linear-gradient(
            to right,
            var(--light-blue-color) 0%,
            var(--light-blue-color) 50%,
            var(--dark-blue-color) 100%
        );
    } 
    .main-menu .sub-menu-lvl2 li {
        padding: 1rem;
        width: 100%;
        background-color: var(--dark-blue-color);
    }
    .main-menu .menu-list ul > li > .submenu-toggle-label {
        gap: 1.5rem;
    }
    .main-menu a {
        text-decoration: none;
    }
    .main-menu .sub-menu,
    .main-menu .sub-menu-lvl2 {
        min-width: max-content;
        display: flex;
        flex-direction: column;
    }
    .main-menu .sub-menu a,
    .main-menu .sub-menu button,
    .main-menu .sub-menu-lvl2 a {
        display: block;
    }
    .main-menu .submenu-toggle-label {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .main-menu .sub-menu .submenu-toggle-label {
        display: flex;
        align-items: center;
        flex-direction: row;
    }
    /*menu mobile*/
    .mobile-navigation [data-menu-close] {
        position: absolute;
        top: 1.25rem;
        right: 1.5rem;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        background: transparent;
        color: var(--white-color);
        font-size: 2rem;
    }
    .mobile-navigation .main-menu .sub-menu li:not(:last-child),
    .mobile-navigation .main-menu .sub-menu li:has(ul),
    .mobile-navigation .main-menu  .menu-list .sub-menu-lvl2 li:not(:last-child) {
        background: transparent;
        border-bottom: 1px solid rgb(255 255 255 / 20%);
    }
    .mobile-navigation .main-menu .sub-menu li:last-child,
    .mobile-navigation .main-menu  .menu-list .sub-menu-lvl2 li:last-child {
        background: transparent;
        border-bottom: none;
    }
    .mobile-navigation .sub-menu .submenu-toggle-label svg {
        transform: rotate(90deg);
    }
    .mobile-navigation .main-menu .menu-link,
    .mobile-navigation .main-menu .submenu-toggle-label {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: transparent;
        text-align: left;
    }
    .mobile-navigation .menu-link.submenu-toggle-label {
        color: var(--white-color);
    }
    .mobile-navigation .main-menu  .menu-item {
        padding: 1rem 0;
    }
    /*lang-switcher*/
    .header-menu .lang-switcher {
        position: relative;
    }
    .header-menu .lang-switcher .lang-btn {
        display: flex;
        gap: 0.2rem;
    }
    .header-menu .lang-switcher .language-switcher-list {
        position: absolute;
        top: calc(100% + 2.5rem);
        padding: 0;
        list-style: none;
    }
    .header-menu .lang-switcher .language-switcher-list a {
        display: flex;
        gap: 0.5rem;
    }
    /*smallurl*/
    .component.smallurl .outer-wrapper {
        background-color: transparent;
        position: relative;
    }
    .component.smallurl .slideshow-counter {
        position: absolute;
        top:4rem;
        right:0;
        bottom: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        width: 2.5rem;
        min-height: 6rem;
        padding: 1rem 0.5rem;
        background-color: var(--dark-blue-color);
        color: var(--white-color);
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    .component.smallurl .smallurl-item .heading {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .component.smallurl .smallurl-item {
        min-width: 0;
    }
    .component.smallurl .smallurl-item p {
        margin-top: 1rem;
        overflow-wrap: anywhere;
    }
    .component.smallurl .smallurl-item .heading h2,
    .merchant-title,
    .button-submit,
    .component.contacts .contact-bar .contact-item span,
    .more-btn {
        overflow-wrap: anywhere;
    }
    .component.smallurl .smallurl-item .img-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .component.smallurl .social-bar {
        position: relative;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 12px 20px;
        background: var(--dark-blue-color);
    }
    .component.smallurl .contacts {
        transform: translateX(-2.5rem);
        margin-bottom: 0.4rem;
        justify-content: flex-end;
    }
    .component.social-bar a {
        display: flex;
        gap: 1rem;
        color: var(--white-color);
    }
    .contact-bar, .contact-bar a,
    .component.social-bar,
    .component.social-bar a {
        display: flex;
        gap: 1rem;
    }
    .component.contacts {
        display: flex;
        justify-content: space-between;
    }
    .component.smallurl .component.contacts input,
    .header-contact .component.contacts input {
        background: none;
        border: none;
        width: 120px;
    }
    .component.smallurl .component.contacts .contact-bar {
        display: none;
    }
    .component.smallurl .component.contacts input::placeholder,
    .header-contact .component.contacts input::placeholder {
        color: var(--white-color);
    }
    .search input[type="search"],
    .side-panel-search input[type="search"] {
        color: var(--white-color);
    }
    .component.smallurl .component.contacts .search,
    .header-contact .component.contacts .search {
        display: flex;
        flex-direction: row-reverse;
        gap: 0.2rem;
    }
    /*carousel*/
    /* Blue background behind the text */
    .component.carousel::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 50%;
        background: var(--dark-blue-color);
        z-index: 0;
    }
    .component.carousel .carousel-layout {
        position: relative;
        width: var(--carousel-content-width);
        height: 100%;
        margin-inline: auto;
        z-index: 2;
        pointer-events: none;
    }
    .component.carousel .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        min-width: 0;
        padding: 3rem;
        background: var(--white-color);
        pointer-events: auto;
    }
    .component.carousel .carousel-text-slide {
        display: none;
        position: relative;
    }
    .component.carousel .carousel-text-slide.active {
        display: block;
    }
    .component.carousel .carousel-counter {
        position: static;
        top: calc(100% + 4rem);
        left: 0;
        color: var(--grey-color);
        padding-top: 1.5rem;
    }
    /* Images start exactly where the text panel ends */
    .component.carousel .carousel-wrapper {
        position: static;
        top: 0;
        bottom: 0;
        left: calc((100% - var(--carousel-content-width)) / 2 + var(--carousel-content-width) * var(--carousel-text-width-factor, 0.4));
        right: 0;
        min-width: 0;
        overflow: hidden;
        z-index: 1;
        height: 400px;
    }
    .component.carousel .carousel-track {
        display: flex;
        gap: 2px;
        width: max-content;
        height: 100%;
        transition: transform 0.4s ease;
    }
    .component.carousel .carousel-slide {
        position: relative;
        /*flex: 0 0 220px;*/
        width: 100%;
        aspect-ratio: 1;
        background: var(--very-dark-blue-color);
    }
    .component.carousel .carousel-img-link,
    .component.carousel .carousel-img-container,
    .component.carousel .carousel-img-container img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .component.carousel .carousel-img-container {
        position: relative;
        background: var(--dark-blue-color);
    }
    .component.carousel .carousel-img-container img {
        object-fit: cover;
        background-color: var(--grey-color);
    }
    .component.carousel .carousel-slide .carousel-img-container {
        opacity: 0.6;
        z-index: 1;
    }
    .component.carousel .carousel-slide-number {
        position: absolute;
        right: 12px;
        bottom: 10px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 2;
    }
    .component.carousel .carousel-controls {
        position: absolute;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .component.carousel .carousel-controls.carousel-arrow-prev,
    .component.carousel .carousel-controls.carousel-arrow-next {
        width: 40px;
        height: 40px;
        background: var(--white-color);
        border: 1px solid var(--grey-color) !important;
        cursor: pointer;
    }
    .component.carousel .carousel-controls.carousel-arrow-prev {
        right: 41px;
        bottom: 0;
    }
    .component.carousel .carousel-controls.carousel-arrow-next {
        right: 0;
        margin-top: -40px;
    }
    .component.carousel .carousel-controls.carousel-arrow-prev svg,
    .component.carousel .carousel-controls.carousel-arrow-next svg {
        filter: var(--grey-color-icon);
    }
    /*bigurl*/
    .component.bigurl .more-content {
        justify-content: space-between;
        align-items: center;
        flex: 1 0 0;
    }
    .component.bigurl .img-container {
        width: 50%;
        aspect-ratio: 1;
        overflow: hidden;
    }
    .component.bigurl .img-container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    /*mediumurl*/
    .component.mediumurl .img-container {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
    }
    /*white border efect*/
    .component.mediumurl .img-container {
        position: relative;
    }
    .component.mediumurl .img-container::after {
        content: "";
        position: absolute;
        inset: 5%;
        border: 1px solid #fff;
        pointer-events: none;
        z-index: 1;
    }
    .component.mediumurl .img-container img {
        height: 100%;
        object-fit: cover;
    }
    /*mediumurl2*/
    .component.mediumurl2 .mediumurl2-card .img-container {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        aspect-ratio: 16 / 9;
    }
    .component.mediumurl2 .mediumurl2-card-link .more-text p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
        font-size: medium;
    }
    .component.mediumurl2 .more-content {
        padding: 2rem;
        border: 1rem solid var(--light-blue-color);
    }
    .component.mediumurl2 .mediumurl2-card .img-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .component.mediumurl2 .mediumurl2-card .more-content {
        min-width: 0;
        min-height: 0;
    }
    /*smallurl3*/
    .component.smallurl3 .smallurl3-item {
        aspect-ratio: 1 / 1;
        min-width: 0;
        box-sizing: border-box;
    }
    .component.smallurl3 .smallurl3-img {
        display: grid;
        place-items: center;
        width: 100%;
        background: transparent;
        cursor: pointer;
        height: 100%;
        padding: 0;
        overflow: hidden;
    }
    .component.smallurl3 .smallurl3-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1);
        opacity: 0.55;
        transition: filter 160ms ease, opacity 160ms ease;
    }
    .component.smallurl3 .smallurl3-img:hover img,
    .component.smallurl3 .smallurl3-img:focus-visible img,
    .component.smallurl3 .smallurl3-item.is-active .smallurl3-img img {
        filter: grayscale(0);
        opacity: 1;
    }
    .component.smallurl3 .smallurl3-item-content[hidden] {
        display: none;
    }
    .component.smallurl3 .smallurl3-active-text {
        margin-bottom: 5rem;
    }
    /*contacturl*/
    .info {
        min-width: 0;
    }
    .contacturl {
        position: relative;
        width: 100%;
        max-height: fit-content;
    }
    .contacturl-bg {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
    .contacturl-form .form-left {
        display: grid;
        align-content: start;
        gap: 1rem;
        min-width: 0;
    }
    .contacturl-form .form-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .form-right .button-submit {
        justify-self: end;
        align-self: end;
    }
    .contacturl-form label {
        display: block;
        line-height: 1.3;
    }
    .contacturl-form input,
    .contacturl-form select,
    .contacturl-form textarea {
        box-sizing: border-box;
        display: block;
        width: 100%;
        margin-top: 0.35rem;
        padding: 0.55rem;
        border: 1px solid var(--dark-blue-color);
        border-radius: 0;
        color: inherit;
    }
    .contacturl-form textarea {
        height: 200px;
    }
    .contacturl .info .more-btn,
    .footer-left .contacts .search {
        display: none !important;
    } 
    /*footer*/
        .footer-left .contact-bar {
        display: grid;
        gap: 0.65rem;
        margin-top: 1.5rem;
    }
    .footer-left .contact-bar {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: 1rem;
    }
    .footer-left .contact-bar .contact-item {
        align-items: center;
    }
    .footer-left .contact-bar .contact-item.address,
    .footer-left .contact-bar .contact-item[href^="mailto:"] {
        grid-column: 1 / -1;
    }
    .footer-left .contact-bar .contact-item.address {
        pointer-events: none;
        cursor: default;
    }  
    .footer-center {
        min-width: 0;
    }
    .footer-left,
    .footer-right {
        width: 100%;
    }
    .footer-left > div {
        width: 100%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .upper-footer > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        padding-block: 1rem;
        gap: 1rem;
    }
    .upper-footer{
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .upper-footer .component.social-bar {
        align-items: center;
        flex-wrap: wrap;
    }
    .upper-footer .component.social-bar svg {
        filter: var(--white-color-icon);
    }
    .footer-menu .menu-list {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
        padding: 0 0 0 1.25rem;
        list-style: none;
    }
    /*current circle line*/
    .footer-menu .menu-list::before {
        content: "";
        position: absolute;
        top: 0.35rem;
        bottom: 0.35rem;
        left: 0.25rem;
        width: 1px;
        background: currentColor;
        opacity: 0.5;
    }
    .footer-menu .menu-item {
        position: relative;
    }
    .footer-menu .menu-link {
        position: relative;
        display: block;
        color: inherit;
        text-decoration: none;
        display: flex;
    }
    .footer-menu .menu-link svg {
        transform: rotate(-90deg);
    }
    .footer-menu .sub-menu .menu-link svg {
        transform: none;
    }
    .footer .main-footer {
        background-color: var(--black-color);
        color: var(--white-color);
    }
    /* current circle*/
    .footer-menu .menu-item.is-active > .menu-link::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -1.25rem;
        width: 0.5rem;
        height: 0.5rem;
        border: 1px solid currentColor;
        border-radius: 50%;
        background: currentColor;
        transform: translateY(-50%);
    }
    .footer-menu .sub-menu,
    .footer-menu .sub-menu-lvl2 {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 1.5rem;
        list-style: none;
        margin-top: 0.5rem;
    }  
    .terms-link { padding-left: 1rem; }
    .terms-link a { text-transform: uppercase; font-weight: 700; }
    .footer .lower-footer img {
        width: 100%;
        max-width: 100px;
        height: auto;
    }
    /*map*/
    #map {
        width: 100%;
        height: 300px; 
        
    }
    /*sidepanel*/
    .side-panel-content {
        display: grid;
        align-content: start;
        gap: 1.5rem;
    }
    /* Logo and close button */
    .side-panel-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
    }
    .side-panel-close svg {
        display: block;
        width: 2rem;
        height: 2rem;
    }
    .side-panel-search {
        display: flex;
        min-height: 2.75rem;
        background: rgb(57 57 57);
    }
    .side-panel-search .search-btn {
        flex: 0 0 2.75rem;
        place-items: center;
        filter: var(--white-color-icon);
    }
    .side-panel-search input[type="search"] {
        border: 0;
        background: transparent;
    }
    #side-panel-map {
        width: 100%;
        height: 250px;
    }
    .side-panel-content > section {
        gap: 2rem;
        display: grid;
    }
    .side-panel .contact-bar {
        position: relative;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1fr);
    }
    /* Address occupies the first row */
    .side-panel .contact-bar .contact-item.address {
        display: flex;
        margin-bottom: 1rem;
    }
    .side-panel .contact-bar .contact-item.address svg {
        display: none;
    }
    /* Icons and text share two columns */
    .side-panel .contact-bar .contact-item:not(.address) {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
    }
    /* One continuous vertical separator */
    .side-panel .contact-bar::before {
        content: "";
        position: absolute;
        top: 2.2rem;
        bottom: -0.5rem;
        left: 2.1rem;
        width: 1px;
        background-color: var(--grey-color);
        pointer-events: none;
    }
    /*******************/
    .side-panel .contact-item span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .component.contacturl .button-submit,
    .lower-contact-layout .button-submit {
        padding: 1rem;
        align-self: flex-start;
        margin-top: auto;
    }
    .side-panel .social-bar a > span[aria-hidden="true"],
    .side-panel-content section .search,
    .component.contacturl .component.contacts .search {
        display: none;
    }
    .side-panel .social-bar {
        flex-wrap: wrap;
        gap: 1rem;
    }
    /*slieshow modifications*/
    .main-slideshow-container {
        background-color: var(--grey-color);
    }
    .component.slideshow .arrows .arrow.next , 
    .component.slideshow .arrows .arrow.prev {
        border: 1px solid var(--white-color) !important;
        padding: 0;
    }
    .component.slideshow .indicators {
        display: none !important;
    }
    .component.slideshow .slide-content {
        color:  var(--white-color);
        gap: 2rem;
    }
    .component.slideshow .arrows .arrow.prev svg,
    .component.slideshow .arrows .arrow.next svg {
        padding: 0.5rem;
    }
    .component.slideshow p {
        font-size: medium;
    }
    .component.slideshow .visually-hidden {
        color: white;
    }
    h2 {
        font-size: 1.6rem;
    }
    /*rest*/
    .footer-menu .menu-link svg,
    .back-to-top-btn svg,
    .side-panel .contact-item svg,
    .side-panel .social-bar svg,
    .side-panel-close svg,
    .component.slideshow .arrows svg,
    .smallurl .component.social-bar svg,
    .smallurl .component.contacts svg {
        filter: var(--white-color-icon);
    }
    .side-panel-search input::placeholder {
        color: var(--white-color);
    }
    .back-to-top-btn {
        outline: 1.5px solid var(--white-color);
    }
    .carousel-slide-number,
    .smallurl .component.contacts,
    .smallurl .component.social-bar {
        color: var(--white-color);
    }
    /*no container*/
    .article:has(.noContainer),
    .more-presentation:has(.noContainer) { 
        max-width: unset !important; 
        width: 100% !important; 
    }
    /*dialog-box*/
    .dialog { top: 50%; left: 50%; transform: translate(-50%, -50%); right: unset; bottom: unset;}

    /*page-banner*/
    .page > main {
        padding-top: 100px;
    }
    h1#page-title {
        font-size: xx-large;
    }
    .hero-banner {
        position: static;
        width: 100%;
        min-height: 300px;
    }
    .hero-banner-inner {
        position: relative;
        width: 100%;
        min-height: 300px;
        background-color: var(--very-dark-blue-color);
    }
    .hero-banner-inner img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .banner-content {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: min(90%, 40rem);
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--white-color);
    }
    .banner-breadcrumb{max-width: 1000px; overflow-wrap: anywhere; margin-top: 0.5rem;}
    .banner-breadcrumb li:not(:last-child)::after { content: ">"; margin-inline: .5rem;}
    .banner-breadcrumb ol {list-style: none; display: flex; padding: 0; overflow-wrap: anywhere;justify-content: center;}
    .socials-container {
        max-width: 1280px;
        margin: 0 auto;
        width: 80%;
        justify-content: space-between;
        color: var(--white-color);
        background-color: var(--dark-blue-color);
        z-index: 2; 
        position: relative;
        padding: 1rem;
        gap: 0.5rem;
        display: none;
        text-align: center;
        margin: -1.6rem auto 0 auto;
    }
    .socials-container .component.social-bar {
        flex-wrap: wrap;
        justify-content: center;
    }
    .socials-container svg{
        filter: var(--white-color-icon);
    }
    /*more-presentation*/
    .more-presentation {
        margin: 0 auto;
        max-width: 1280px;
        width: 80%;
        margin-top: 2rem;
    }

    /*photogallery*/
    .gallery-item a {
        position: relative;
        display: block;
        aspect-ratio: 1;
        overflow: hidden;
    }
    .gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .gallery-item-content {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 1rem;
        color: var(--black-color);
        text-align: center;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 250ms ease, visibility 0s linear 600ms;
        overflow-wrap: anywhere;
    }
    .gallery-item-content p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        line-clamp: 6;
        overflow: hidden;
        font-size: medium;
        overflow-wrap: anywhere;
    }
    /*pdf*/
    .pdf-card-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .pdf-card .more-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
    }
    /*article*/
    .article-image-text {
        display: flow-root;
        color: var(--black-color);
        line-height: 1.6;
    }
    .article-image-text .paragraph-container {
        margin-top: 3rem;
    }
    .article-image {
        aspect-ratio: 4 / 3;
        position: relative;
    }
    .article-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .article .more-btn {
        margin-block: 2rem;
    }
    .article .more-btn svg {
        transform: rotate(180deg);
    }
    #go-back-btn {
        border-radius: unset;
    }
    /*articles*/
    .article-grid-item {
        min-width: 0;
        margin: 0.5rem;
        background: var(--grey-color);
    }
    .article-card {
        position: relative;
        display: grid;
        height: 100%;
        overflow: hidden;
        isolation: isolate;
    }
    .article-card-image,
    .article-card-title,
    .article-card-overlay {
        /*like all of them on top of each other, they take the first available cell*/
        grid-area: 1 / 1;
        /*aspect-ratio: 4 / 3;*/
        min-width: 0;
        margin: 0;
    }
    .article-card-overlay {
        z-index: 3;
        display: flex;
        align-items: flex-end;
        padding: 1.5rem;
        color: var(--white-color);
        background: var(--overlay-bg-color);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform 400ms ease, visibility 0s linear 400ms;
    }
    .article-card-image {
        z-index: 0;
    }
    .article-card-title {
        z-index: 2;
        padding: 1.25rem;
        color: var(--white-color);
        text-shadow: 0 1px 4px rgb(0 0 0 / 10%);
        display: flex;
        align-items: flex-end;
        overflow-wrap: anywhere;
    }
    .article-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .article-catalog {
        position: relative;
    }
    .article-card-overlay .more-text p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 4;
        overflow: hidden;
        margin-top: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.3;
    }
    .article-card-overlay .more-text h3 {
        font-size: 1.5rem;
    }
    .article-card-overlay .more-btn {
        font-size: small;
    }
    /*pagination*/
    .pagination {
        margin-block: 2rem;
        display: flex;
        justify-content: center;
    }
    .pagination-list {
        display: flex;
        list-style: none;
        padding: 0;
    }
    .pagination-list a,
    .pagination-list [aria-current="page"] {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3.3rem;
        height: 3.3rem;
        border: 1px solid #c8c8c8;
        margin-inline-start: -1px;
        color: var(--grey-color);
    }
    .pagination-list [aria-current="page"] {
        color: #444;
        background-color: #eee;
    }
    .pagination-list li svg {
        filter: var(--grey-color-icon);
    }
    .pagination-page {
        display: none;
    }
    .pagination-page:has([aria-current="page"]) {
        display: block;
    }
    /*contact*/
    .contact-left {
        padding: 2rem;
        background-color: var(--light-grey-color);
    }
    h2#contact-heading, 
    .info-text span {
        overflow-wrap: anywhere;
    }
    .contact-details {
        display: grid;
        gap: 1rem;
        padding: 0;
        list-style: none;
        margin-top: 1.5rem;
    }
    .contact-details > li > svg {
        width: 2rem;
        height: 2rem;
        padding: 0.5rem;
        background-color: var(--dark-blue-color);
    }
    .info-text div {
        font-weight: bold;
        color: var(--dark-blue-color);
    }
    .contact-details > li > svg use {
        filter: var(--white-color-icon);
    }
    .contact-details .info-text {
        min-width: 0;
    }
    .contact-details .info-text > span {
        display: block;
    }
    .contact-right {
        display: grid;
        gap: 1.1rem;
        margin-top: 1rem;
    }
    .contact-center{
        overflow: hidden;
    }
    #mapContact {
        width: 100%;
        height: 500px; 
    }
    /*offers*/
    .offer-image {
        position: relative;
        width: 100%;
        aspect-ratio: 1.5/1;
        margin: 0;
        overflow: hidden;
    }
    .offer-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .offer-content .center {
        padding-block: 1rem;
    }
    .discount-price {
        font-weight: 700;
        font-size: xx-large;
    }
    .coupon-code {
        padding-block: 0.5rem;
    }
    .offers .offer-image:has(> .offer-counter) {
        isolation: isolate;
    }
    .offers .offer-image:has(> .offer-counter) .offer-counter {
        position: absolute;
        z-index: 1;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: 1rem;
        color: var(--white-color);
        text-align: center;
        background: var(--overlay-bg-color);
    }
    .offers .timer-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
    }
    .offers .timer-title .clock {
        width: 1rem;
        height: 1rem;
    }
    .offers .timer-time {
        font-weight: 700;
        white-space: nowrap;
        font-size: 1.7rem;
    }
    .offers .timer-days {
        font-size: 0.8rem;
    }
    .offer-dialog {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(32rem, 92vw);
        min-width: 0;
        height: 100dvh;
        max-width: none;
        max-height: none;
        padding: 3rem;
        border: 0;
        background: var(--black-color);
        color: var(--white-color);
    }
    .offer-dialog-close {
        display: block;
        margin-left: auto;
        color: #fff;
        background: transparent;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
    }
    .offer-dialog form label {
        display: block;
        line-height: 1.3;
    }
    .offer-dialog form input,
    .offer-dialog form textarea {
        box-sizing: border-box;
        display: block;
        width: 100%;
        margin-block: 0.35rem;
        padding: 0.55rem;
        border: 1px solid var(--grey-color);
        border-radius: 0;
        color: inherit;
        background: rgb(255 255 255 / 25%);
    }
    .offer-dialog form textarea {
        height: 200px;
    }
    .offer-dialog .more-btn.interested {
        margin-block: 2rem;
    }
    .offer-dialog-summary {
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .offer-dialog .coupon-code,
    #offer-form-success {
        color: var(--light-blue-color);
    }
    /*search*/
        li.result-item:nth-child(odd) {
        background: rgb(175 175 175 / 10%);
    }
    .result-content h3 {
        font-size: xx-large;
    }
    /* Accessibility Toolbar (AmeA)*/
    #accessibility-bar {
        position: fixed;
        top: 20%;
        left: 0.3rem;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 190px;
        background-color: #ffffff;
        color: #2d2d2d;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.31);
    }
    #accessibility-bar .access-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        background-color: #ffffff;
    }
    #accessibility-bar .access-icon svg,
    #accessibility-bar .access-arrow svg {
        display: block;
        width: 24px;
        height: 24px;
        filter: var(--black-color-icon);
    }
    #accessibility-bar > hr,
    #accessibility-bar .buttons > hr {
        border-top: 1px solid #cccccc;
    }
    #accessibility-bar .buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        position: relative;
        padding: 10px;
        background-color: #ffffff;
    }
    #accessibility-bar .buttons button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.7rem;
        min-height: 50px;
        text-align: left;
    }
    /* Font-size icons */
    #accessibility-bar .font-small {
        transform: scale(0.75);
    }
    #accessibility-bar .font-medium {
        transform: scale(1);
    }
    #accessibility-bar .font-large {
        transform: scale(1.3);
    }
    #accessibility-bar #text-black-bg,
    #accessibility-bar #text-blue-bg {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #accessibility-bar #text-blue-bg {
        color: #0f2dd6;
    }
    #accessibility-bar .access-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 36px;
        background-color: #ffffff;
    }
    #accessibility-bar .access-arrow svg {
        transition: transform 0.3s ease;
    }
    #accessibility-bar .access-arrow.open svg {
        transform: rotate(180deg);
    }
    button#text-large-btn {
        padding: 0.5rem;
    }

/*-----------------------------------------------------------*/
    @media (min-width:600px) {
        h2 {
            font-size: 2rem;
        }
        h1#page-title {
            font-size: 2.5rem;
        }
        /*smallurl3*/
        .component.smallurl3 .smallurl3-active-text {
            width: 80%;
        }
        /*mediumurl2*/
        .component.mediumurl2 .mediumurl2-card .img-container {
            aspect-ratio: unset;
        }
        /*photogallery*/
        .gallery-item:nth-child(4n + 1),
        .gallery-item:nth-child(4n + 3) {
            transform: translateY(2.5rem);
        }
        /*pagination*/
        .pagination-page {
            display: block;
        }
    }
    @media (min-width:800px) {
        /*containers*/
        .main-slideshow-container {
            height: 1000px;
        }
        /*bigurl*/
        .component.bigurl .img-container {
            width: 25%;
        }
        /*smallurl3*/
        .component.smallurl3 .smallurl3-active-text {
            width: 50%;
        }
        /*carousel*/
        .component.carousel .content {
            width: var(--carousel-text-width);
        }
        .component.carousel .carousel-wrapper {
            position: absolute; 
            height: unset;
        }
        .component.carousel .carousel-controls {
            bottom: 0;
        }
        .component.carousel .carousel-controls.carousel-arrow-next {
            top: unset;
            right: unset;
            margin-top: 0;
        }
        .component.carousel .carousel-controls.carousel-arrow-prev {
            right: 0;
        }
        .component.carousel .carousel-counter {
            position: absolute;
            padding-top: unset;
        }
        /*smallurl*/
        .component.smallurl .component.contacts .contact-bar {
            display: flex;
        }
        .component.smallurl .contacts {
            justify-content: space-between;
        }
        /*contacturl*/
        .component.contacturl .button-submit,
        .lower-contact-layout .button-submit {
            align-self: flex-end;
        }
        /*footer*/
        .upper-footer > div {
            flex-direction: row;
        }

    }
    @media (min-width:1000px) {
        /*header*/
        header .header-contact,
        .socials-container {
            display: flex;
        }
        /*page-banner*/
        .page > main {
            padding-top: 150px;
        }
        .hero-banner {
            min-height: 500px;
        }
        .hero-banner-inner {
            min-height: 500px;
        }
        /*article*/
        .article-image {
            float: right;
            margin: 0 0 2rem 2rem;
            width: 50%;
        }
    }
    @media (min-width: 1200px) {
        /*menu*/
        .header-menu {
            font-size: small;
        }
        .header-menu .lang-switcher .language-switcher-list {
            top: calc(100% + 2.8rem);
        }
    }
    @media (min-width: 1400px) {
        /*menu*/
        .header-menu {
            font-size: medium;
        }
        /*articles*/
        .article-grid-item:nth-child(n + 6) .article-card {
            aspect-ratio: 4 / 3;
        }
    }
}

@layer states{
    /*header*/
    header.is-scrolled,
    header.header-over-slideshow.is-scrolled,
    header {
        background-color: var(--white-color);
        color: var(--black-color);
        border: none;
    }
    header.header-over-slideshow:not(.is-scrolled) {
        border-bottom: 1px solid var(--white-color);
        color: var(--white-color);
    }
    header.header-over-slideshow:not(.is-scrolled){
        background: rgb(0 0 0 / 20%);
        color: var(--white-color);
    }
    header.header-over-slideshow:not(.is-scrolled) button {
        background: transparent;
        color: var(--white-color);       
    }
    header.header-over-slideshow:not(.is-scrolled) svg:not(.language-switcher-list svg, .sub-menu .submenu-toggle-label svg),
    .footer-left .contact-bar svg {
        filter: var(--white-color-icon);
    }
    header.header-over-slideshow:not(.is-scrolled) > .header-contact {
        display: none;
    }
    header.header-over-slideshow.is-scrolled {
        border: none;
    }
    header.is-scrolled #primary-navigation-desktop > .menu-list > li > .menu-link {
        color: var(--black-color);
    }
    header #primary-navigation-desktop .sub-menu .menu-link,
    header #primary-navigation-desktop .sub-menu-lvl2 .menu-link,
    header .language-switcher-list a,
    header .language-switcher-list .lang-code {
        color: var(--white-color);
    }
    header #primary-navigation-desktop .sub-menu .menu-link svg,
    header #primary-navigation-desktop .sub-menu-lvl2 .menu-link svg  {
        color: var(--white-color);
        fill: currentColor;
    }
    header #primary-navigation-desktop a[aria-current="page"] {
        position: relative;
        text-decoration: none;
    }
    header:not(.header-over-slideshow) #primary-navigation-desktop a[aria-current="page"],
    header.header-over-slideshow.is-scrolled #primary-navigation-desktop a[aria-current="page"],
    .mobile-navigation .main-menu a[aria-current="page"] {
        color: var(--light-blue-color);
    }
    header #primary-navigation-desktop a[aria-current="page"]::after {
        content: "••••";
        position: absolute;
        top: 100%;
        left: 50%;
        color: var(--dark-blue-color);
        font-size: 0.45rem;
        letter-spacing: 0.1em;
        line-height: 1;
        transform: translateX(-50%);
    }
    header.header-over-slideshow:not(.is-scrolled) #primary-navigation-desktop a[aria-current="page"]::after {
        color: var(--white-color);
    }
    header.header-over-slideshow:not(.is-scrolled) > .header-contact {
        display: none;
    }
    /*menu*/
    .main-menu a[aria-current="page"] {
        position: relative;
        display: inline-block;
        padding-bottom: 0.5rem;
    }
    .main-menu [data-menu-submenu][hidden],
    .footer-menu [data-menu-submenu][hidden] {
        display: none;
    }
    /*carousel*/
    .component.carousel .carousel-slide.active .carousel-img-container {
        opacity: 1;
        z-index: 1;
    }
    /*hover effect articles*/
    .article-card:hover .article-card-overlay,
    .article-card:focus-within .article-card-overlay {
        transform: translateY(0);
        visibility: visible;
        transition-delay: 0s;
    }
    .article-card-title {
        transition:  opacity 250ms ease, visibility 0s linear 250ms;
    }
    .article-card::after {
        transition: opacity 250ms ease;
    }
    .article-card:hover .article-card-title:not(:focus-within),
    .article-card:focus-within .article-card-title:not(:focus-within) {
        opacity: 0;
        visibility: hidden;
    }
    .article-card:hover::after,
    .article-card:focus-within::after {
        opacity: 0;
    }
    /*photogallery*/
    .gallery-item a.gallery-item-with-content::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background-color: var(--white-color);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
    }
    .gallery-item a.gallery-item-with-content:hover::before,
    .gallery-item a.gallery-item-with-content:focus-visible::before {
        transform: scaleY(1);
    }
    .gallery-item a.gallery-item-with-content:hover .gallery-item-content,
    .gallery-item a.gallery-item-with-content:focus-visible .gallery-item-content {
        opacity: 1;
        visibility: visible;
        transition-delay: 250ms, 0s;
    }
    /*ACCESSIBILITY*/
    #accessibility-bar #text-blue-bg:hover {
        background-color: #0f2dd6;
        color: #d6c90f;
    }
    #accessibility-bar #text-black-bg:hover {
        background-color: #2d2d2d;
        color: #ffffff;
    }
    #accessibility-bar .buttons button[aria-pressed="true"] {
        border-color: #2d2d2d;
        box-shadow: inset 3px 0 0 #2d2d2d;
    }
    #accessibility-bar .buttons button:focus-visible {
        position: relative;
        z-index: 2;
    }
    /* Closed toolbar: square top and bottom buttons */
    #accessibility-bar:has(.buttons[hidden]) {
        width: 44px;
    }
    /* Critical: hidden must always hide the container */
    #accessibility-bar .buttons[hidden] {
        display: none !important;
    }
}

@layer accessibility {
:where(
        a[href],
        button,
        input,
        select,
        textarea,
        summary,
        iframe,
        [tabindex]:not([tabindex="-1"])
    ):focus-visible {
        outline: 2px solid var(--white-color);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--black-color);
    }
    .component.smallurl2 .smallurl2-card-link:focus-visible,
    .component.mediumurl2 .mediumurl2-card-link:focus-visible {
        outline: 2px solid var(--white-color);
        outline-offset: -5px;
        box-shadow: 0 0 0 4px var(--black-color);
    }
    @media (forced-colors: active) {
        :where(
            a[href],
            button,
            input,
            select,
            textarea,
            summary,
            iframe,
            [tabindex]:not([tabindex="-1"])
        ):focus-visible {
            outline: 2px solid Highlight;
            box-shadow: none;
        }
    }
    /* Text spacing: WCAG 1.4.12 test values */
    body.text-spacing :is(
        p,
        h1, h2, h3, h4, h5, h6,
        li,
        dt, dd,
        blockquote,
        figcaption,
        label,
        legend,
        a,
        button,
        input,
        textarea,
        select,
        th,
        td
    ) {
        line-height: 1.5 !important;
        letter-spacing: 0.12em !important;
        word-spacing: 0.16em !important;
    }
    body.text-spacing p {
        margin-block-end: 2em !important;
    }
    body.highlight-links a {
        text-decoration: underline !important;
        text-decoration-thickness: 0.12em;
        text-underline-offset: 0.15em;
    }
    html:has(body.medium-text) {
        font-size: 125%;
    }
    html:has(body.large-text) {
        font-size: 150%;
    }
    /* Common page regions */
    body.bw-text :is(
        header,
        nav,
        main,
        footer,
        section,
        article,
        .carousel-layout .content,
        .component.smallurl .smallurl-wrapper,
        header.is-scrolled
    ) {
        background-color: #2d2d2d;
        color: #ffffff;
    }
    body.bw-text a,
    body.bw-text .submenu-toggle-label,
    body.bw-text .lang-code{
        color: #ffffff;
    }
    /* Preserve the original text colors in the contact area */
    body.bw-text .contacturl-form :is(
        input,
        textarea,
        select,
        p,
    ), body.bw-text .contacturl-form label:not(.contacturl label),
    body.bw-text #contact-heading,

    body.by-text .contacturl-form :is(
        input,
        textarea,
        select,
        p,
    ), body.by-text .contacturl-form label:not(.contacturl label),
    body.by-text #contact-heading {
        color: initial;
    }
    body.bw-text .side-panel-toggle svg.icon-menu,
    body.bw-text .menu-toggle svg.icon-menu,
    body.bw-text .lang-btn svg.flag,
    body.bw-text .submenu-toggle-label svg.icon-menu{
        filter: var(--white-color-icon);
    }
    body.by-text .side-panel-toggle svg.icon-menu,
    body.by-text .menu-toggle svg.icon-menu,
    body.by-text .lang-btn svg.flag,
    body.by-text .submenu-toggle-label svg.icon-menu {
        filter: var(--yellow-color-icon);
    }
    .contact-details .info-text span ,
    .contact-details .info-text a,
    address.contact-card.contact-left h2
    .gallery-item-content{
        color: black;
    }
    body.by-text :is(
        header,
        nav,
        main,
        footer,
        section,
        article,
        .carousel-layout .content,
        .component.smallurl .smallurl-wrapper,
        header.is-scrolled
    ) {
        background: #0f2dd6;
        color: #d6c90f;
    }
    body.by-text a,
    body.by-text .submenu-toggle-label,
    body.by-text .lang-code {
        color: #d6c90f;
    }

}

@layer utilities {
    /*rules for color palette*/
    body.MutedBurgundy {
        --very-dark-blue-color:rgb(111, 42, 42);
        --dark-blue-color: rgb(177, 67, 67);
        --light-blue-color:rgb(191, 85, 85);
        --white-ish-color:rgb(250, 243, 243);
    }
    body.SlateBlue {
        --very-dark-blue-color:rgb(36, 54, 65);
        --dark-blue-color: rgb(57, 86, 103);
        --light-blue-color:rgb(81, 124, 148);
        --white-ish-color:rgb(247, 248, 250);
    }
    .component.slideshow .more.btn,
    .component.premiumtext .more-btn,
    .component.carousel .more-btn,
    .component.bigurl .more-btn,
    .component.bigurl2 .more-btn,
    .component.mediumurl .more-btn,
    .component.mediumurl2 .more-btn,
    .button1,
    .back-to-top-btn ,
    .pdf-card .more-btn,
    .article .more-btn,
    .article-card-overlay .more-btn,
    .result-action .more-btn {
        --hover-fill: var(--black-color);
        background-color: var(--dark-blue-color);
    }
    .component.smallurl2 .more-btn,
    .button2,
    .button-submit {
        --hover-fill: var(--dark-blue-color);
        background-color: var(--black-color);
    }
    .component.smallurl2 .smallurl2-card:nth-child(4n + 1) .more-btn,
    .component.smallurl2 .smallurl2-card:nth-child(4n + 3) .more-btn {
        --hover-fill: var(--light-blue-color);
        background-color: var(--black-color);
    }
    .more-btn,
    .button1,
    .button2,
    .button-submit,
    .component.slideshow .more.btn {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 0.8rem 1.2rem !important;
        overflow-wrap: break-word;
        border-radius: unset;
        display: flex;
        color: var(--white-color);
        align-items: center;
        gap: 0.6rem;
        width: fit-content;
        height: fit-content;
        border: none;
    }
    .more-btn::before,
    .button1::before,
    .button2::before,
    .button-submit::before,
    .back-to-top-btn::before,
    .component.slideshow .more.btn::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--hover-fill);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .more-btn,
    .more-btn:focus-visible,
    .more-btn:active {
        border-radius: unset;
    }
    .component.slideshow .more.btn:hover::before,
    .component.premiumtext .more-btn:hover::before,
    .component.carousel .more-btn:hover::before,
    .component.bigurl .more-btn:hover::before,
    .component.bigurl2 .more-btn:hover::before,
    .component.mediumurl .more-btn:hover::before,
    .component.mediumurl2 .more-btn:hover::before,
    .component.smallurl2 .more-btn:hover::before,
    .button1:hover::before,
    .button2:hover::before,
    .button-submit:hover::before,
    .back-to-top-btn:hover::before,
    .pdf-card .more-btn:hover::before,
    .article .more-btn:hover::before,
    .article-card-overlay .more-btn:hover::before,
    .result-action .more-btn:hover::before {
        transform: scaleY(1);
    }
    .button-submit {
        background-color: var(--black-color);
        padding: 0.8rem 1.2rem;
        overflow-wrap: break-word;
        border-radius: unset;
        display: flex;
        color: var(--white-color);
        align-items: center;
        gap: 0.6rem;
        width: fit-content;
        height: fit-content;
        position: relative;
    }
    .button-submit svg,
    .button2 svg,
    .component.slideshow .more svg,
    .more-btn svg,
    .button1 svg {
        width: 0.7rem;
        height: 0.7rem;
        filter: var(--white-color-icon);
    }
    button {
        border: none;
        padding: 0;
        cursor: pointer;
    }
    .menu-link,
    .header-menu button,
    .side-panel-close,
    .search-btn {
        background:none;
    }
    .search-btn .search-icon {
        margin: 0 auto;
    }  
    .header-menu,
    header button,
    .button1, 
    .button2,
    .more-btn,
    .button-submit,
    .component.slideshow .more.btn {
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }
    /*gray block bg*/
    .gallery::before,
    .videos::before,
    .pdf::before,
    .article-catalog::before,
    .offers::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 40%;
        left: 50%;
        width: 100%;
        height: 30%;
        transform: translateX(-50%);
        background: rgba(234, 235, 237);
    }
    /* white border*/
    .gallery-item a::after,
    .pdf-card-image::after,
    .article-image::after,
    .article-card::after,
    .offer-image::after {
        content: "";
        position: absolute;
        inset: 10px;
        border: 2px solid var(--white-color);
        pointer-events: none;
    }
    /*black bg on dialog*/
    dialog.side-panel::backdrop,
    .offer-dialog::backdrop,
    dialog.mobile-navigation::backdrop {
        background: rgb(0 0 0 / 50%);
    }
    /* Style colors palette */
    #color-palette {
        display: block;
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: auto;
        width: 600px;
        height: auto;
        margin: auto;
        padding: 0;
        color: #d5d5d5;
        transform: translateY(100%);
        transition: all 0.2s ease;
        z-index: 1001;
    }
    #color-palette.opened { transform: translateY(0%); }
    #palette-toggle {
        display: inline-block;
        position: absolute;
        top: auto;
        bottom: 100%;
        left: 0;
        right: auto;
        margin: auto;
        margin-bottom: -1px;
        padding: 10px;
        padding-right: 13px;
        background-color: #000000e3;
        cursor: pointer;
        border-top-right-radius: 20px;
        border-top: 1px solid #888888;
        border-right: 1px solid #888888;
        box-shadow: 3px -1px 5px 0px rgba(50, 50, 50, 0.62);
        z-index: 2;
    }
    .colors {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-start;
        padding: 1rem;
        background-color: #000000e3;
        border-top: 1px solid #888888;
        border-right: 1px solid #888888;
    }
    .colors>.swatch {
        flex: 0 0 calc((100% - 60px) / 3);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
    }
    .colors>.swatch>.circle {
        width: 65px;
        height: 65px;
        min-width: 65px;
        min-height: 65px;
        flex-shrink: 0;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    #cookie-notice {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.801);
        color: white;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        padding: 0.6rem;
        z-index: 1000;
    }
    #cookies-agree{
        padding: 0.8rem;
        border: none;
    }
    #cookie-notice p {
        width: 50%;
    }
    .floating-messenger-btn {
        position: fixed;
        bottom: 25px;
        right: 25px;
        background-color: #0084FF;
        color: #fff;
        border-radius: 50px;
        padding: 12px 20px 12px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-size: 15px;
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        z-index: 9999;
    }
    .floating-messenger-btn:hover {
        transform: translateY(-3px);
        background-color: #006bce;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
        color: #fff;
    }
    .messenger-icon {
        width: 24px;
        height: 24px;
        fill: white;
    }
    #fixed-banner {
        display: block;
        position: fixed;
        bottom: auto;
        right: auto;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        max-width: 400px;
        max-height: 100%;
        padding: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        margin: auto;
        z-index: 999;
    }
    #fixed-banner.top { top: 0; }
    #fixed-banner.bottom { bottom: 0; }
    #fixed-banner.left { left: 0; }
    #fixed-banner.right { right: 0; }
    #fixed-banner > .inner-image {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
    }
    #fixed-banner > .full-image {
        display: block;
        position: relative;
        width: auto;
        height: auto;
    }
    #fixed-banner > .close {
        position: absolute;
        top: 10px;
        bottom: auto;
        left: auto;
        right: 10px;
    }
    #fixed-banner > p, #fixed-banner > h3, #fixed-banner > div {
        display: block;
        width: 100%; 
        padding: 20px 15px 0;
        margin: 0;
    }
    #fixed-banner > *:last-child:not(img) {
        padding-bottom: 20px;
    }
    #fixed-banner.goTo {
        cursor: pointer;
    }
    #back-to-top-btn.show {
        opacity: 1;
        visibility: visible;
    }

}