/*
* 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%);;
        /*overlay*/
        --overlay-bg-color: #111111d5;
        --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);
         --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);


         --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;
         }
}
    .footer-menu a[aria-current="page"] {
        color: var(--dark-blue-color);
    }
@layer layout{
    /*header*/
    header {
        position: fixed;
        z-index: 100;
        width: 100%;
    }
    .header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: self-end;
        padding: 1.5rem 2rem;
        flex-wrap: wrap;
        width: 100%;
    }
    .header-menu {
        display: flex;
        flex: 1 1 0;
        align-items: flex-start;
        gap: 1.5rem;
        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*/
    .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: 0;
        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;
    }
    .component.smallurl .smallurl-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 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%;
        height: 500px;
        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;
    }
    /*mediumurl*/
    .component.mediumurl {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem 1rem;
        align-items: stretch;
    }
    /* smallurl2 mosaic grid */
    .component.smallurl2 {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 0;
        margin-top: 5rem;
    }
    /* 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: "image text";
    }
    .component.smallurl2 .smallurl2-card:nth-child(4n + 3) .smallurl2-card-link {
        grid-template-areas: "text image";
    } 
    /* 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;
    }
    .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;
    aspect-ratio: 3.7 / 1;
    overflow: hidden;
}

.component.mediumurl2 .mediumurl2-card-link {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}
    .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;
    }
    /*parallax*/
    .component.bigurl2 .img-container {
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    .component.bigurl2 .parallax-image {
        display: block;
        width: 100%;
        height: 170%;
        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;
    }
    .component.bigurl2 .more-content {
        width: 33%;
    }
    /*smallurl3*/
    .component.smallurl3 {
        margin: 0 auto;
        max-width: 1280px;
        width: 80%;
        padding-block: 4rem;
    }
    .component.smallurl3 .smallurl3-images {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1.5rem;
    }
    /*contacturl*/
    .contacturl-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
        width: 80%;
        max-width:1280px;
        margin: 0 auto;
        padding-block: 5rem;
    }
    .contacturl-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem;
        min-width: 0;
    }
    /*footer*/
    .footer .main-footer-wrapper {
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0,1fr) minmax(0, 2fr);
        gap: 2rem;
        place-items: center;
        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;
    }

}

@layer components{
    /*containers*/
    .main-slideshow-container {
        width: 100%;
        height: 1000px;
        position: relative;
    }
    .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);
    }
    .header-contact .contact-item {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    header .header-contact svg {
        filter: var(--white-color-icon);
    }
    /*menu*/
    .main-menu a[aria-current="page"],
    .footer-menu a[aria-current="page"] {
        color: var(--dark-blue-color);
    }
    .main-menu .sub-menu li, 
    .language-switcher-list li {
        background-color: var(--light-blue-color);
        padding: 1rem;
        outline: 1px var(--white-color);
        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;
    }
    /*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.8rem);
        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 .outer-wrapper::before {
        content: "";
        position: absolute;
        top: 2.5rem;
        right: 0;
        bottom: 0;
        width: 2.5rem;
        background: var(--dark-blue-color);
        z-index: 0;
    }
    .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;
    }
    .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 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;
    }
    /*carousel*/
    /* Blue background behind the text */
    .component.carousel::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 30%;
        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;
        width: var(--carousel-text-width);
        height: 100%;
        min-width: 0;
        padding: 2rem;
        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: absolute;
        top: calc(100% + 4.7rem);
        left: 0;
        color: var(--grey-color);
    }
    /* Images start exactly where the text panel ends */
    .component.carousel .carousel-wrapper {
        position: absolute;
        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;
    }
    .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;
    }
    .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;
    }
    .component.carousel .carousel-slide .carousel-img-container {
        opacity: 0.8;
        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;
        bottom: 0;
        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: 0;
    }
    .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 {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .component.bigurl .more-content .more-text {
        width: 50%;
    }
    .component.bigurl .img-container {
        width: 25%;
        aspect-ratio: 1;
        overflow: hidden;
    }
    .component.bigurl .img-container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    /*mediumurl*/
    .component.mediumurl .mediumurl-item {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .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;
    }
    .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;
        width: 50%;
    }
    /*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 .contact-bar {
        display: grid;
        gap: 0.65rem;
        margin-top: 1.5rem;
    }
    .contacturl .info .more-btn,
    .contacturl .contacts .search-btn {
        display: none !important;
    }
    .contacturl .info .contact-bar {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: 1rem;
    }

    .contacturl .info .contact-bar .contact-item {
        align-items: center;
    }

    .contacturl .info .contact-bar .contact-item.address,
    .contacturl .info .contact-bar .contact-item[href^="mailto:"] {
        grid-column: 1 / -1;
    }
    .contacturl .info .contact-bar .contact-item.address {
        pointer-events: none;
        cursor: default;
    }   
    /*footer*/
    .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;
        justify-content: space-between;
        width: 80%;
        max-width: 1280px;
        margin: 0 auto;
        padding-block: 1rem;
    }
    .upper-footer{
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .upper-footer .component.social-bar {
        align-items: center;
    }
    .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; 
        max-width: 500px;
    }
    /*sidepanel*/
    dialog.side-panel::backdrop {
        background: rgb(0 0 0 / 50%);
    }
    .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 {
        display: grid;
        gap: 0.75rem;
    }
    .side-panel .contact-item {
        gap: 0.75rem;
    }
    .side-panel .contact-item span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .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*/
    .component.slideshow .arrows .arrow.next , 
    .component.slideshow .arrows .arrow.prev {
        border: 1px solid var(--white-color) !important;
        padding: 0;
    }
    .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;
    }
    /*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);
    }


    
}

@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 / 10%);
        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) {
        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 > .menu-list > li > .menu-link {
        color: var(--black-color);
    }
    header.is-scrolled #primary-navigation .sub-menu .menu-link,
    header.is-scrolled #primary-navigation .sub-menu-lvl2 .menu-link {
        color: var(--white-color);
    }
    header.is-scrolled #primary-navigation > .menu-list > li > a[aria-current="page"] {
        color: var(--dark-blue-color);
    }
    header.is-scrolled .language-switcher-list a,
    header.is-scrolled .language-switcher-list .lang-code {
        color: var(--white-color);
    }
    header.is-scrolled #primary-navigation .sub-menu .menu-link svg,
    header.is-scrolled #primary-navigation .sub-menu-lvl2 .menu-link svg {
        color: var(--white-color);
        fill: currentColor;
    }
    header.is-scrolled #primary-navigation a[aria-current="page"] {
        position: relative;
        color: var(--dark-blue-color);
        text-decoration: none;
    }
    header.is-scrolled #primary-navigation 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) > .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;
    }
}

@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;
        }
    }
    .component.smallurl .component.social-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgb(0, 0, 0);
    }
}

@layer utilities {
    /*rules for color palette*/
    body.DustyRose {
        --dark-blue-color: rgb(232, 194, 194);
        --light-blue-color:rgb(241, 218, 218);
        --white-ish-color:rgb(250, 243, 243);
    }
    body.DustyBlue {
         --dark-blue-color: rgb(119, 157, 180);
         --light-blue-color:rgb(164, 190, 205);
         --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 {
        --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 {
        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 {
        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);
    }
    .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 {
        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 {
        padding: 1rem;
        align-self: flex-end;
        margin-top: auto;
    }
    .button-submit svg,
    .button2 svg,
    .component.slideshow .more svg {
        width: 0.7rem;
        height: 0.7rem;
        filter: var(--white-color-icon);
    }
    .more-btn svg,
    .button1 svg {
        filter: var(--white-color-icon);
        width: 0.7rem;
        height: 0.7rem;
    }
    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;
    }
    /* 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;
    }
    .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;
    }

}