:root {
  --color-deep-grey: #4F5252;
  --color-light-grey: #EAECEB;
  --color-form-bg-gray: #e6e6e6;
  --color-white: #FFFFFF;
  --color-pastel-blue: #A0BED4;
  --color-deep-yellow: #D2BC5D;
  --color-dusty-white: #F6F6F6;
}
body {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


 /* ======= ГОРЕН БЯЛ ХЕДЪР ======= */
        .main-header {
            background-color: var(--color-white);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            position: sticky;
            top:0;
            z-index: 5;
        }

        .main-header__inner {
            padding-block: 20px;
        }

        .site-logo {
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 20px;
            text-decoration: none;
            color: var(--color-deep-grey);
        }

        .header-actions {
            gap: 0.75rem;
        }

        .btn-location {
            background-color: #5B5B5B;
            color: var(--color-white);
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 10px;
            padding: 16px;
            font-weight: 400;
            font-size: 14px;
            border: none;
            transition: 0.3s ease;
        }
  .btn-location:hover{
    background-color: rgb(226, 226, 226);
    color: #5B5B5B;
    transition: 0.3s ease;
  }
        .btn-location span.arrow {
            margin-left: 6px;
            font-size: 15px;
        }

        .btn-menu-icon {
            width: 18px;
            height: 12px;
            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .btn-menu-icon span {
            display: block;
            height: 2px;
            border-radius: 10px;
            background-color: var(--color-deep-grey);
        }
        :root {
    /* ако още нямаш тази променлива – ще я сетнем от JS */
    --header-height: 72px;
}

/* === БУТОН „МЕНЮ“ === */

.btn-menu {
    border-radius: 10px;
    background-color: var(--color-light-grey);
    border: none;
    padding: 16px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: background-color 0.2s ease, color 0.2s ease;
    color: var(--color-deep-grey);
}


.btn-menu:hover,
.btn-menu:focus-visible {
    background-color: var(--color-light-grey);
    color: var(--color-deep-grey);
}

.btn-menu--open,
.btn-menu--open:hover,
.btn-menu--open:focus,
.btn-menu--open:active {
    background-color: var(--color-pastel-blue);
    color: #ffffff;
}
.btn-menu-icon {
    width: 18px;
    height: 12px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-menu-icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-deep-grey);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

/* Състояние „отворено меню“ – син бутон с Х */
.btn-menu--open {
    background-color: var(--color-pastel-blue);
    color: #ffffff;
}

.btn-menu--open .btn-menu-icon {
    width: 16px;
    height: 16px;
    position: relative;
}

.btn-menu--open .btn-menu-icon span {
    background-color: #ffffff;
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
}

.btn-menu--open .btn-menu-icon span:nth-child(1) {
    transform: rotate(45deg);
}

.btn-menu--open .btn-menu-icon span:nth-child(2) {
    opacity: 0;
}

.btn-menu--open .btn-menu-icon span:nth-child(3) {
    transform: rotate(-45deg);
}

/* === OVERLAY МЕНЮ === */
body.no-scroll {
    overflow: hidden;
}

.overlay-menu {
    position: fixed;
    top: var(--header-height);      /* започва точно под header-а */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: none;                  /* показва се с .overlay-menu--open */
    align-items: flex-start;
    justify-content: center;
    padding: 20px 16px 32px;        /* 20px отстояние от навигацията */
    background-color: rgba(0, 0, 0, 0.35);
}


.overlay-menu--open {
    display: flex;
}

.overlay-menu__dialog {
    width: 100%;
    max-width: 1120px;
    max-height: calc(100vh - var(--header-height) - 40px);
}

.overlay-menu__content {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

/* Ляв панел */
.overlay-menu__panel {
    padding: 30px;
}

.overlay-menu__title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
}

.overlay-menu__group {
    margin-bottom: 1.75rem;
}

.overlay-menu__group--with-border {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #E3E5E4;
}

/* Родител „Нашите градове“ */
.overlay-menu__parent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
}

.overlay-menu__chevron {
    width: 13px;
    height: 13px;
    border-right: 1px solid #777B7A;
    border-bottom: 1px solid #777B7A;
    transform: rotate(45deg); /* надолу по подразбиране */
    transition: transform 0.2s ease;
}

/* Стрелката нагоре, когато е отворено */
.overlay-menu__parent[aria-expanded="true"] .overlay-menu__chevron {
    transform: rotate(-135deg);
}

.overlay-menu__sublist {
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0 0;
}

.overlay-menu__sublink,
.overlay-menu__link {
    display: block;
    text-decoration: none;
    font-size: 0.95rem;
    color: #939698;
    padding: 0.25rem 0;
}

.overlay-menu__link {
    font-size: 1.05rem;
    color: #3c3f3e;
}

.overlay-menu__sublink:hover,
.overlay-menu__link:hover {
    color: #000000;
}

/* Езиков селектор в долната част */
.overlay-menu__languages {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid #E3E5E4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #7a7e7d;
}

.overlay-menu__language-icon {
    font-size: 1rem;
}

.overlay-menu__language {
    border: none;
    background: transparent;
    text-decoration: none;
     color: #7a7e7d;
    padding: 0;
    font-size: 14px;
    cursor: pointer;
    transition: 3s ease;
}
.overlay-menu__language:hover{
  color: #000000;
  transition: 3s ease;
}

.overlay-menu__language--active {
    font-weight: 600;
}

.overlay-menu__language-separator {
    color: #c0c3c2;
}

/* Дясната снимка */
.overlay-menu__image-wrapper {

    overflow: hidden;
    padding: 30px;
}

.overlay-menu__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}


/* HERO СЕКЦИЯ – снимка + текст като в дизайна */
.hero {
    position: relative;
    color: #FFFFFF;
    text-align: center;
    min-height: 870px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 6rem;
    overflow: hidden;
}

/* снимката заема цялата секция, сградата е в долната част */
.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    z-index: 0;
}

/* лек overlay, почти незабележим – да не потъмнява много небето */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.10) 55%,
        rgba(0, 0, 0, 0.18) 100%
    );
    z-index: 1;
}

/* съдържанието стои над overlay-а и снимката */
.hero__content {
    position: relative;
    z-index: 2;
    padding-inline: 1.5rem;
    width: 100%;
}

.hero__title {
    font-size: clamp(30px, 8vw, 75px);
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 20px;
}


.hero__subtitle {
    font-size: 19px;
    max-width: 39rem;
    margin: 0 auto;
    font-weight: 400;
}


        /* ======= СИВА ЛИНИЯ – НАВИГАЦИЯ ПО СЕКЦИИ (STICKY) ======= */
        .section-nav {
            background-color: var(--color-light-grey);
            position: sticky;
            padding: 20px;
            top: 112px;
            z-index: 2;
        }

        .section-nav__inner {
            overflow-x: auto; /* за мобилни – хоризонтален скрол ако не стига място */
        }

        .section-nav__list {
            white-space: nowrap;
            flex-wrap: nowrap;
        }

        .section-nav__link {
            font-size: 0.9rem;
            color: #777B7A;
            padding: 0px 20px;
            text-decoration: none;
            display: inline-block;
        }

        .section-nav__link:hover {
            color: #555;
        }

        .section-nav__link--active {
            color: #3D4040;
            font-weight: 600;
        }
/* NAV – вертикални линии между елементите + отляво и отдясно */


.section-nav__list .nav-item {
    border-left: 1px solid rgba(79, 82, 82, 0.25); /* светло сива линия */
}

/* последният елемент получава и дясна линия */
.section-nav__list .nav-item:last-child {
    border-right: 1px solid rgba(79, 82, 82, 0.25);
}

        /* ======= ПРИМЕРНИ СЕКЦИИ (за да работи скролването и активирането) ======= */
        main {
            background-color: var(--color-dusty-white);
        }

        .content-section {
            padding-block: 4.5rem;
        }

        .content-section:nth-of-type(even) {
            background-color: var(--color-white);
        }

        .content-section__title {
            font-size: 1.6rem;
            margin-bottom: 1rem;
        }

        .content-section__text {
            max-width: 44rem;
        }




        /* ===== Секция "Кои сме ние" ===== */

.info-section {
    padding-block: 4.5rem;
    background-color: white;
}

.info-section__title {
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--color-deep-grey);
}

/* Линк "Научи повече" – като бутон */
.info-section__more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 15px 30px;
    border-radius: 8px;
    border: 1px solid #4F5252;
    background-color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-deep-grey);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.info-section__more-arrow {
    font-size: 1.1rem;
}

.info-section__more-link:hover,
.info-section__more-link:focus-visible {
    background-color: var(--color-light-grey);
    border-color: #A5A8A7;
    color: var(--color-deep-grey);
}

/* ===== Карти ===== */

.info-card {
    border-radius: 10px;
    padding: 60px 40px;
    background-color: #F3F4F4;
    display: flex;
}

.info-card__body {
    margin: 0 auto;
    max-width: 19rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 44px;
}

.info-card__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.info-card__text--secondary {
    font-size: 18px;
    opacity: 0.9;
}

/* Първа карта – син фон, бял текст */
.info-card--yellow {
    background-color: var(--color-deep-yellow);
    color: #FFFFFF;
}
.info-card--primary {
    background-color: var(--color-pastel-blue);
    color: #FFFFFF;
}

.info-card--primary .info-card__text,
.info-card--primary .info-card__text--secondary {
    color: #FFFFFF;
}

/* Икона на първата карта – куб (условно) */
.info-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    border: 2px solid #FFFFFF;
    margin: 0 auto;
    position: relative;
}

.info-card__icon--cube::before,
.info-card__icon--cube::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px solid #FFFFFF;
    border-radius: 12px;
    opacity: 0.7;
}

/* Втора карта – светло сива + плюс */
.info-card--neutral {
    background-color: #F3F4F4;
    color: var(--color-deep-grey);
}

.info-card__symbol {
    font-size: 3rem;
    line-height: 1;
}

/* Трета карта – тъмно сива, жълти стрелки */
.info-card--dark {
    background-color: var(--color-deep-grey);
    color: #FFFFFF;
}

.info-card__body--dark {
    gap: 1.25rem;
}

.info-card__text--light {
    color: #FFFFFF;
}

/* стрелки нагоре/надолу */
.info-card__arrow {
    width: 18px;
    height: 18px;
    border-right: 2px solid var(--color-deep-yellow);
    border-bottom: 2px solid var(--color-deep-yellow);
    margin: 0 auto;
}

.info-card__arrow--down {
    transform: rotate(45deg);
}

.info-card__arrow--up {
    transform: rotate(-135deg);
}

/* ===== Секция "Какво правим" ===== */

.feature-section {
    padding-block: 4.5rem;
    background-color: var(--color-dusty-white);
}

.feature-section__title {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-deep-grey);
}

/* Общ стил за cards */
.feature-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: #F3F4F4;
}

.feature-card__inner {
    padding: 3rem 3rem 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ляв тъмен card */
.feature-card--dark {
    background-color: var(--color-deep-grey);
    color: #FFFFFF;
}

.feature-card__icon {
    margin-bottom: 2.5rem;
}
.feature-card_textt{
    display: flex;
    flex-direction: column;
}
.feature-card__title {
    font-size: 37px;
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 1.75rem;
    color: #FFFFFF;
}

.feature-card__text {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 29rem;
    color: #E5E7E7;
}

/* Бутон "Научи повече" вътре в тъмния card */
.feature-card__button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 2.1rem;
    border-radius: 12px;
    background-color: var(--color-pastel-blue);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.feature-card__button-arrow {
    font-size: 1.1rem;
}

.feature-card__button:hover,
.feature-card__button:focus-visible {
    background-color: #8eaac4;
    transform: translateY(-1px);
}

/* фигурата е контейнерът, който реже снимката */
.feature-card--image {
    border-radius: 10px;      /* колкото ти трябва */
    overflow: hidden;         /* важно – не позволява да излиза при zoom */
}

.feature-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; /* плавен zoom */
}
/* лек zoom при hover на картата */
.feature-card--image:hover .feature-card__image,
.feature-card--image:focus-within .feature-card__image {
    transform: scale(1.05);   /* можеш да играеш между 1.03–1.08 */
}



/* ===== Секция "Нашите предимства" ===== */

.advantages-section {
    background-color: #ffffff;
}

/* Горната снимка */
.advantages-section__banner {
    position: relative;
    height: 260px;
    overflow: hidden;
}



.advantages-section__banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advantages-section__banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.10) 100%
    );
}

.advantages-section__banner-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding-inline: 1.5rem;
}

.advantages-section__title {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 1.75rem;
}

.advantages-section__subtitle {
    max-width: 28rem;
    font-size: 14px;
    line-height: 1.4;
}

/* Карти – да "висят" върху снимката */
.advantages-section {
    position: relative;
}

/* Банерът остава отзад */
.advantages-section__banner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 400px;
}

/* Кутийките – над снимката и по-нагоре */
.advantages-section__cards-wrapper {
    position: relative;
    z-index: 1;
    margin-top: -120px;  /* по-голямо отрицателно отместване, за да стъпят върху снимката */
    padding-bottom: 4rem;
}

.advantage-card {
    border-radius: 10px;
    background-color: var(--color-light-grey);
    overflow: hidden;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease;
    color: var(--color-deep-grey);
    display: flex;
}

.advantage-card__inner {
    padding: 2.2rem 2.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7rem;
}

.advantage-card__icon {
    font-size: 0;
}

.advantage-card__title {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

.advantage-card:hover,
.advantage-card:focus-within {
    background-color: var(--color-deep-grey);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.advantage-card svg {
    stroke: currentColor;
}

.advantage-card--image {
    position: relative;
    padding: 0;
    background-color: transparent;
}
.advantage-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.advantage-card--image:hover::after,
.advantage-card--image:focus-within::after {
    background: rgba(79, 82, 82, 0.5); /* Deep Grey overlay */
}

.activity-section {
    background-color: #F2F3F2; /* леко сиво като на дизайна */
    padding: 4rem 0;
}

.activity-section__container,
.activity-section__slider-container {
    padding-left: 1.5rem; /* стандартно bootstrap отстояние */
    padding-right: 0;
}

.activity-section__title {
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-deep-grey);
}

.activity-slider__arrow {
    border: none;
    width: 32px;
    height: 32px;
    background-color: transparent;
    color: var(--color-deep-grey);
    font-size: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.activity-slider__arrow:hover,
.activity-slider__arrow:focus-visible {
    color: var(--color-form-bg-gray);
}
.activity-slider {
    margin-bottom: 2rem;
}
.activity-card {
    display: flex;
    flex-direction: column;
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.activity-card__image {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}
.activity-card__content {
    background-color: #FFFFFF;
    padding: 1.75rem 1rem;
    border-radius: 10px;
    margin-top: -90px;
    margin-bottom: 21px;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}
.activity-card__title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    color: var(--color-deep-grey);
}
.activity-card__text {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: var(--color-deep-grey);
}
.activity-slider__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 1.5rem;
}
.activity-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background-color: #E0E0E0;
    cursor: pointer;
    padding: 0;
    transition: width 0.2s ease, background-color 0.2s ease;
}
.activity-slider__dot--active {
    width: 56px;
    background-color: var(--color-deep-yellow);
}
.for-whom-section {
    background-color: var(--color-pastel-blue);
    padding-block: 4.5rem;
}
.for-whom-section__title {
    font-size: 2.2rem;
    font-weight: 400;
    color: #FFFFFF;
}
.for-whom-media {
    background-color: #000;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}
.for-whom-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.for-whom-media:hover .for-whom-media__image,
.for-whom-media:focus-within .for-whom-media__image {
    transform: scale(1.05);
}
.for-whom-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    display: flex;
}
.for-whom-card__inner {
    padding: 70px 60px;
    display: flex;
    flex-direction: column;
    max-width: 39rem;
    gap: 1.8rem;
    height: 100%;
}
.for-whom-card__icon {
    font-size: 0;
}
.for-whom-card__title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--color-deep-grey);
    margin: 0;
}
.for-whom-card__text {
    font-size: 16px;
    line-height: 1.5;
    color: #a8a8a8;
    margin: 0 0 0.5rem;
}
.for-whom-card__button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 20px 35px;
    border-radius: 10px;
    border: none;
    background-color: var(--color-deep-grey);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.for-whom-card__button-arrow {
    font-size: 1.1rem;
}
.for-whom-card__button:hover,
.for-whom-card__button:focus-visible {
    background-color: #3c3f3f;
    transform: translateY(-1px);
}
.cities-section {
    padding-block: 4.5rem;
    background-color: #ffffff;
}
.cities-section__title {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-deep-grey);
}
.cities-section__controls {
    font-size: 0;
}
.cities-slider__arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    color: var(--color-deep-grey);
    font-size: 3.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cities-slider__arrow:hover,
.cities-slider__arrow:focus-visible {
 color: #cdcdcd;
}
.cities-slider-wrapper {
    position: relative;
}
.cities-slider {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
.city-card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
}
.city-card__media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 320px;
    background-color: #000;
}
.city-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.city-card:hover .city-card__image,
.city-card:focus-within .city-card__image {
    transform: scale(1.05);
}
.city-card__content {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.city-card__title {
    margin: 20px;
    font-size: 1.2rem;
    font-weight: 400;
    color: #FFFFFF;
}
.city-card__button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 10px 15px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.city-card__button--primary {
    background-color: #FFFFFF;
    color: var(--color-deep-grey);
}
.city-card__button--secondary {
    background-color: rgba(234, 236, 235, 0.96);
    color: #6f7371;
}
.city-card__button-arrow,
.city-card__button-icon {
    font-size: 1rem;
}
.city-card__button:hover,
.city-card__button:focus-visible {
    transform: translateY(-1px);
}
.city-card__button--primary:hover,
.city-card__button--primary:focus-visible {
    background-color: var(--color-light-grey);
}
.city-card__button--secondary:hover,
.city-card__button--secondary:focus-visible {
    background-color: #E0E3E2;
}
.cities-slider.tns-slider {
    display: block;
    overflow: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    padding-bottom: 0;
}
.cities-slider.tns-slider .city-card {
    flex: 0 0 auto;
    scroll-snap-align: none;
}
.cities-slider.tns-slider {
    gap: 0;
}
.clients-section {
    padding-block: 4.5rem;
    background-color: var(--color-light-grey);
}
.clients-section__title {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-deep-grey);
}
.client-category-card {
    display: block;
    height: 100%;
    border-radius: 10px;
    text-decoration: none;
    color: #FFFFFF;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.client-category-card--logistics {
    background-color: var(--color-deep-grey);
}
.client-category-card--trade {
    background-color: var(--color-pastel-blue);
}
.client-category-card--services {
    background-color: var(--color-deep-yellow);
}
.client-category-card__inner {
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.2rem;
    min-height: 230px;
}
.client-category-card__icon {
    font-size: 0;
}
.client-category-card__title {
    font-size:22px;
    font-weight: 300;
    text-align: center;
    line-height: 30px;
}
.client-category-card:hover,
.client-category-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    filter: brightness(1.03);
}
.clients-section__all-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 20px 20px;
    border-radius: 10px;
    border: 1px solid #4f4f4f;
    background-color: var(--color-light-grey);
    color: var(--color-deep-grey);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.15s ease;
    margin-top: 0.5rem;
}
.clients-section__all-arrow {
    font-size: 1.1rem;
}
.clients-section__all-button:hover,
.clients-section__all-button:focus-visible {
    background-color: #D2D4D3;
    border-color: #A5A8A7;
    transform: translateY(-2px);
}
.why-us-card{
    border-radius: 10px;
    background-color: var(--color-light-grey);
    overflow: hidden;
    display: flex;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, color 0.2s ease;
    color: var(--color-deep-grey);
}
.why-us-card__inner {
    padding: 2.3rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    justify-content: flex-start;
    align-items: center;
}
.why-us-card__icon {
    font-size: 0;
}
.why-us-card:hover,
.why-us-card:focus-visible {
   background-color: var(--color-deep-grey);
}

.why-us-card__icon svg,
.why-us-card__icon svg path {
    transition: fill 0.3s ease, stroke 0.3s ease;
}
.why-us-card:hover .why-us-card__title,
.why-us-card:focus-within .why-us-card__title {
    color: #ffffff;
}
.why-us-card__title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    color: var(--color-deep-grey);
    transition: color 0.3s ease;
     text-align: center;
}
.contact-section {
    padding-block: 4.5rem;
    background-color: var(--color-light-grey);
}
.contact-section__title {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-deep-grey);
    margin-bottom: 1.5rem;
}
.why-us-card:hover .why-us-card__icon svg,
.why-us-card:hover .why-us-card__icon svg path,
.why-us-card:focus-within .why-us-card__icon svg,
.why-us-card:focus-within .why-us-card__icon svg path {
    stroke: #ffffff;
}
.contact-section__subtitle {
    font-size: 15px;
    color: #6f7371;
    max-width: 22rem;
}
.contact-media {
    border-radius: 10px;
    overflow: hidden;
    background-color: #000;
}
.contact-media__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.contact-form {
    width: 100%;
    padding: 0px 30px;
}
.contact-form__control {
    border-radius: 12px;
    border: 1px solid transparent;
    background-color: #e6e6e6;
    padding: 16px 15px;
    font-size: 0.95rem;
    color: var(--color-deep-grey);
    box-shadow: none;
}
.contact-form__control::placeholder {
    color: #9b9f9d;
}
.contact-form__control:focus {
    border-color: var(--color-deep-grey);
    background-color: var(--color-light-grey);
    outline: none;
    box-shadow: 0 0 0 1px rgba(79, 82, 82, 0.15);
}
.contact-form__select {
    cursor: pointer;
}
.contact-form__textarea {
    resize: vertical;
    min-height: 160px;
    resize: none;
    margin-top: 20px;
}
.contact-form__label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-deep-grey);
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5px;
}
.contact-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.contact-form__checkbox {
    --bs-form-check-bg: var(--color-form-bg-gray);
    width: 18px;
    height: 18px;
    margin-top: 0.18rem;
    border-radius: 4px;
    border-color: #C4C8C6;
}
.contact-form__check-label {
    font-size: 0.86rem;
    color: #6f7371;
}
.contact-form__privacy-link {
    color: var(--color-deep-grey);
    text-decoration: underline;
}
.contact-form__privacy-link:hover {
    text-decoration-thickness: 2px;
}
.contact-form__attach {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 2.2rem;
    border-radius: 12px;
    background-color:  #fff;
    border: 1px solid var(--color-deep-grey);
    border-color: var(--color-deep-grey);
    color: #4F5252;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.contact-form__submit, .btn-dark-gray {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 2.2rem;
    border-radius: 12px;
    border: none;
    background-color: var(--color-deep-grey);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.contact-form__submit-arrow {
    font-size: 1.1rem;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible ,
.btn-dark-gray:hover,
.btn-dark-gray:focus-visible {
    background-color: #3d4040;
    color:#fff;
    transform: translateY(-1px);
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.form-check-input:checked{
    background-color: var(--color-deep-grey);
    color: var(--color-light-grey);
}
.site-footer {
    background-color: var(--color-deep-grey);
    color: rgba(255, 255, 255, 0.8);
}
.site-footer__top {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.site-footer__brand-row {
    min-height: 60px;
}
.footer-logo {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    text-decoration: none;
}
.footer-logo:hover,
.footer-logo:focus-visible {
    color: #2b08d7;
}
.footer-social__link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
    transform: translateY(-2px);
}
.footer-heading {
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 1rem;
}
.footer-text {
    font-size: 0.9rem;
}
.footer-nav__link {
    display: inline-block;
    margin-bottom: 0.3rem;
    font-size: 14px;
    color: var(--color-form-bg-gray);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.footer-nav__link--phone {
    font-weight: 500;
}
.footer-nav__link:hover,
.footer-nav__link:focus-visible {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
}
.footer-newsletter__input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 16px 16px;
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #FFFFFF;
}
.footer-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}
.footer-newsletter__input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.65);
}
.footer-newsletter__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-newsletter__checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background-color: transparent;
}
.footer-newsletter__check-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}
.footer-newsletter__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
     transform 0.15s ease, border-color 0.2s ease;
}
.footer-newsletter__submit-arrow {
    font-size: 1rem;
}
.footer-newsletter__submit:hover,
.footer-newsletter__submit:focus-visible {
    background-color: #FFFFFF;
    color: var(--color-deep-grey);
    border-color: #FFFFFF;
    transform: translateY(-2px);
}
.site-footer__bottom {
    background-color: var(--color-dusty-white);
    color: var(--color-deep-grey);
    padding-block: 0.9rem;
}
.site-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
}
.footer-bottom__link {
    color: var(--color-deep-grey);
    text-decoration: none;
}
.footer-bottom__link:hover,
.footer-bottom__link:focus-visible {
    text-decoration: underline;
}
.footer-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-lang-switcher__icon {
    font-size: 1rem;
}
.footer-lang-switcher__btn {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-deep-grey);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-lang-switcher__btn--active {
    font-weight: 500;
    text-decoration: underline;
}
.footer-lang-switcher__btn:hover,
.footer-lang-switcher__btn:focus-visible {
    color: #000000;
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.page-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 420px;
    color: #FFFFFF;
    overflow: hidden;
}
.page-hero.large{
    height: 600px;
}
.page-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-hero__image {
       width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /*background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.25) 100%
    );*/
    z-index: 1;
}
.page-hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 1.1rem;
    padding-bottom: 2.5rem;
}
.breadcrumb-nav {
    font-size: 0.85rem;
}
.breadcrumb {
    background-color: transparent;
    padding: 0;
}
.breadcrumb-item a {
    color: #FFFFFF;
    text-decoration: none;
}
.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.7);
}
.max-w-none{
    max-width: none !important;
}
.page-hero__text {
    max-width: 700px;
}
.page-hero__title {
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 0.6rem;
}
.page-hero__subtitle {
    font-size: 19px;
    max-width: 39rem;
    font-weight: 400;
}
.about-section-nav {
    position: sticky;
    top: 95px;
    z-index: 1;
    background-color: var(--color-light-grey);
}
.about-section-nav__list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 20px 0px;
}
.about-section-nav__item {
    flex: 0 0 auto;
}
.about-section-nav__link {
    display: inline-block;
    padding: 0px 20px ;
    font-size: 0.9rem;
    color: #777B7A;
    text-decoration: none;
}
.about-section-nav__item + .about-section-nav__item .about-section-nav__link {
    border-left: 1px solid #D0D2D2;
}
.about-section-nav__item:last-child .about-section-nav__link {
    border-right: 1px solid #D0D2D2;
}
.about-section-nav__item:first-child .about-section-nav__link {
    border-left: 1px solid #D0D2D2;
}
.about-section-nav__link--active {
    border-bottom-color: var(--color-deep-grey);
    font-weight: 600;
}
.about-section {
    padding: 4rem 0;
    scroll-margin-top: 90px;
    background-color: #FFFFFF;
}
.about-section--alt {
    background-color: var(--color-light-grey);
}
.about-section__title {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-deep-grey);
    margin-bottom: 1.5rem;
}
.about-section__content {
    font-size: 0.98rem;
    line-height: 1.8;
    color: #6f7371;
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.about-range {
    padding: 3.5rem 0 4.5rem;
    background-color: #FFFFFF;
}
.about-range__intro-text {
    max-width: 36rem;
    margin-inline: auto;
    margin-bottom: 80px;
    font-size: 16px;
    line-height: 1.6;
    color: #6f7371;
}
.activities-range__metrics-card {
    background-color: var(-about-range__metrics-card );
    display: flex;
}
.about-range__metrics-card {
    background-color: var(--color-form-bg-gray);
    border-radius: 10px;
    display: flex;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}
.about-range__metrics-inner {
padding: 50px 50px;
 display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.4rem;
    height: 100%;
}
.about-range__metrics-text {
    font-size: 36px;
    line-height: 1.4;
    color: var(--color-deep-grey);
    margin: 0;
}
.about-range__metrics-range {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}
.about-range__metric-label {
    display: block;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #9b9f9d;
    margin-bottom: 0.2rem;
}
.about-range__metric-value {
    font-size: 66px;
    font-weight: 400;
    color: var(--color-pastel-blue);
}
.about-range__metric-value .js-counter {
    display: inline-block;
}
.about-range__image-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: #000;
    height: 520px;
}
.about-range__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.about-range__image-card:hover .about-range__image,
.about-range__image-card:focus-within .about-range__image {
    transform: scale(1.05);
}
.about-range__banner {
    margin: 0;
    margin-top: 0.8rem;
}
.about-range__banner-media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.about-range__banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.about-range__banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.65) 100%
    );
}
.about-range__banner-media:hover .about-range__banner-image,
.about-range__banner-media:focus-within .about-range__banner-image {
    transform: scale(1.04);
}
.about-range__banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.2rem 2.4rem;
    color: #FFFFFF;
}
.about-range__banner-text {
    max-width: 30rem;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 1.8rem;
}
.about-range__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 2.2rem;
    border-radius: 10px;
    border: none;
    background-color: #FFFFFF;
    color: var(--color-deep-grey);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.about-range__cta-arrow {
    font-size: 1.1rem;
}
.about-range__cta-btn:hover,
.about-range__cta-btn:focus-visible {
    background-color: var(--color-light-grey);
    transform: translateY(-1px);
}
.about-history-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
.about-history__header {
    max-width: 34rem;
    margin: 0 auto 2.5rem;
}
.about-history__title {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--color-deep-grey);
    margin-bottom: 0.8rem;
}
.about-history__lead {
    font-size: 16px;
    line-height: 1.6;
    color: #6f7371;
    margin: 0;
}
.about-history__row {
    margin-top: 0.5rem;
}
.about-history__image-wrapper {
    border-radius: 10px;
    overflow: hidden;
    background-color: #000;
    height: 100%;
}
.about-history__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.about-history__image-wrapper:hover .about-history__image,
.about-history__image-wrapper:focus-within .about-history__image {
    transform: scale(1.04);
}
.about-history__story-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    display: flex;
}
.about-history__story-inner {
    padding: 70px 50px;
    display: flex;
    flex-direction: column;
    gap: 4.4rem;
    height: 100%;
}
.about-history__story-title {
    font-size: 36px;
    font-weight: 400;
    color: var(--color-deep-grey);
    margin: 0;
}
.about-history__story-text {
    font-size: 24px;
    color: #6f7371;
    margin: 0;
}
.about-history__story-footnote {
    font-size: 16px;
    line-height: 1.8;
    max-width: 33rem;
    color: #8b8f8d;
    margin: 0;
}
.about-corporate-band {
    background-color: #D2BC5D;
    padding: 0;
    margin: 0;
}
.about-corporate-band .container {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
}
.about-corporate-band__content {
    height: 100%;
    padding-right: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    color: #FFFFFF;
}
.about-corporate-band__title {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-transform: none;
}
.about-corporate-band__subtitle {
    margin: 0;
    max-width: 26rem;
    font-size: 1rem;
    line-height: 1.8;
}
.about-corporate-band__highlight {
    background-color: #FFFFFF;
    border-radius: 18px;
    padding: 1.6rem 2rem;
    max-width: 32rem;
}
.about-corporate-band__highlight-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--color-deep-grey);
}
.about-corporate-band__image-wrapper {
    height: 100%;
    min-height: 320px;
    border-radius: 0 18px 18px 0;
    overflow: hidden;
    background-color: #000;
}
.about-corporate-band__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.about-corporate-band__image-wrapper:hover .about-corporate-band__image,
.about-corporate-band__image-wrapper:focus-within .about-corporate-band__image {
    transform: scale(1.04);
}
.about-history-band {
    background-color: #D2BC5D;
    margin: 0;
    padding: 0;
}
.about-history-band__inner {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.about-history-band__content {
    height: 100%;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.3rem;
    padding-right: 2.5rem;
}
.about-history-band__title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* MY */
.about-sell-band__title {
    font-size: 2.3rem;
    font-weight: 400;
    line-height: 1.2;
	color: #FFFFFF;
    margin: 0;
}
/****/

.about-history-band__subtitle {
    margin: 0;
    max-width: 28rem;
    font-size: 1rem;
    line-height: 1.8;
}
.about-history-band__card {
    max-width: 32rem;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 1.6rem 2rem;
}
.about-history-band__card-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-deep-grey);
}
.about-history-band__image-wrapper {
    height: 100%;
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden;
}
.about-history-band__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.about-history-band__image-wrapper:hover .about-history-band__image,
.about-history-band__image-wrapper:focus-within .about-history-band__image {
    transform: scale(1.04);
}
.about-mission-vision-section {
    padding: 4rem 0;
    background-color: #FFFFFF;
    scroll-margin-top: 90px;
}
.about-mission-vision__header {
    margin-bottom: 2.5rem;
}
.about-mission-vision__title {
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--color-deep-grey);
    margin: 0;
}
.about-mission-vision__image-wrapper {
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    background-color: #000;
}
.about-mission-vision__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.about-mission-vision__image-wrapper:hover .about-mission-vision__image,
.about-mission-vision__image-wrapper:focus-within .about-mission-vision__image {
    transform: scale(1.05);
}
.about-mission-vision__card {
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    display: flex;
}
.about-mission-vision__card-inner {
    padding: 50px 50px 0px 60px;
    display: flex;
    flex-direction: column;
    gap: 3.4rem;
    height: 100%;
}
.about-mission-vision__card--mission {
    background-color: var(--color-deep-grey);
    color: #FFFFFF;
}
.about-mission-vision__card--vision {
    background-color: var(--color-pastel-blue);
    color: #FFFFFF;
}
.about-mission-vision__card-title {
    font-size: 35px;
    font-weight: 400;
    margin: 0;
}
.about-mission-vision__card-text {
    font-size: 18px;
    line-height: 1.6;
    max-width: 31rem;
    margin: 0;
}
.about-mission-vision__icon {
    width: 44px;
    height: 44px;
    position: relative;
    margin-bottom: 0.6rem;
}
.about-values {
    scroll-margin-top: 90px;
}
.about-values__hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-image: url("assets/img/WhoweareValues.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 0 7rem;
    color: #FFFFFF;
}
.about-values__hero-header {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
}
.about-values__title {
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.about-values__subtitle {
    font-size: 0.98rem;
    line-height: 1.8;
    margin: 0;
}
.about-values__cards {
    background-color: #FFFFFF;
    padding: 0 0 4rem;
}
.about-values__cards .container {
    margin-top: -3.8rem;
}
.values-card {
    background-color: var(--color-dusty-white);
    border-radius: 18px;
    padding: 2.1rem 2.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 190px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}
.values-card__icon {
    font-size: 2.2rem;
    margin-bottom: 1.1rem;
    color: var(--color-deep-grey);
}
.values-card__title {
    margin: 0;
    font-size: 1rem;
    color: var(--color-deep-grey);
}
.values-card--image {
    padding: 0;
}
.values-card__image-wrapper {
    border-radius: 18px;
    overflow: hidden;
}
.values-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.values-card--image:hover .values-card__image,
.values-card--image:focus-within .values-card__image {
    transform: scale(1.05);
}
.values-section {
    scroll-margin-top: 90px;
}
.values-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    display: grid;
    min-height: 360px;
}
.values-hero__image {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.values-hero__content {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0 7rem;
    color: #FFFFFF;
    text-align: center;
}
.values-hero__header {
    max-width: 46rem;
    margin: 0 auto;
}
.values-hero__title {
    font-size: 2.3rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.values-hero__subtitle {
    font-size: 0.98rem;
    line-height: 1.8;
    margin: 0;
}
.values-grid {
    background-color: #FFFFFF;
    padding: 0 0 4rem;
}
.values-grid .container-sm {
    margin-top: -7.8rem;
}
.values-card {
    background-color: var(--color-form-bg-gray);
    border-radius: 10px;
    padding: 2.1rem 2.2rem;
    margin-bottom: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px;
    max-height: 240px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.values-card__icon,
.values-card__title {
    transition: color 0.3s ease;
}
.values-card:hover,
.values-card:focus-within {
    background-color: var(--color-deep-grey);
}
.values-card:hover .values-card__icon,
.values-card:hover .values-card__title,
.values-card:focus-within .values-card__icon,
.values-card:focus-within .values-card__title {
    color: #ffffff;
}
.values-card__icon {
    font-size: 2.2rem;
    margin-bottom: 1.1rem;
    color: var(--color-deep-grey);
}
.values-card__title {
    margin: 0;
    font-size: 18px;
    color: var(--color-deep-grey);
}
.values-card--photo {
    padding: 0;
}
.values-card__image-wrapper {
    border-radius: 10px;
    overflow: hidden;
}
.values-card__image {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease;
}
.values-card--photo:hover .values-card__image,
.values-card--photo:focus-within .values-card__image {
    transform: scale(1.05);
}
.products-section {
    position: relative;
    min-height: 550px; /* 750px; */
    padding: 40px 0;
    color: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}
.products-section__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.products-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.18) 100%
    );
    z-index: 1;
}
.products-section__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 4rem 0 4rem;
}
.products-section__title {
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 2rem;
}
.products-section__row {
    margin-top: auto;
}
.products-tabs-panel {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 2.25rem 2.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.products-tabs-panel__label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-deep-grey);
}
.products-tabs {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Етикет над група продукти (напр. "EXPO СЕРИЯ" / "BASE СЕРИЯ").
   flex-basis: 100% го кара да заеме целия ред в .products-tabs (flex-wrap),
   така принудително пренася следващите таб-бутони на нов ред под него. */
.products-tabs__group-label {
    flex-basis: 100%;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #D2BC5D;
    margin: 0.75rem 0 0.25rem;
}
.products-tabs__group-label:first-child {
    margin-top: 0;
}

/* 12 продукта в лентата. Всяка кутийка е с ФИКСИРАНА, еднаква ширина -
   съобразена с най-дългото име ("EXPO PLUS Prime") - а не процент от
   контейнера, така всички изглеждат еднакви. .nav-item просто "обвива"
   бутона (без собствена ширина), .products-tabs (flex, wrap) сам
   пренарежда колкото кутийки се съберат на ред според екрана. */
.products-tabs .nav-item {
    width: auto;
}

.products-tab {
    position: relative;
    width: 180px; /*210px;*/
    height: 56px;
    border-radius: 14px;
    border: none;
    background-color: var(--color-dusty-white);
    color: var(--color-deep-grey);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    box-shadow: none;
    outline: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.products-tab:hover {
    background-color: var(--color-light-grey);
    color: var(--color-deep-grey);
}
/* Бутонът остава със същия цвят на текста и при фокус (напр. след клик),
   вместо да наследи синия цвят по подразбиране на Bootstrap за :focus. */
.products-tab:focus,
.products-tab:focus-visible {
    color: var(--color-deep-grey);
}
.products-tab.active:focus,
.products-tab.active:focus-visible {
    color: #ffffff;
}
/* Иконата е обикновен елемент в реда, ПРЕД текста (не абсолютно
   позиционирана в ъгъла) - затова просто следва DOM реда. */
.products-tab__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Икона сграда (индустриална - офиси/складове). Без кръг/рамка около нея.
   Цветът идва от currentColor, затова автоматично побелява при избран
   таб - както и текста на етикета (виж .products-tab.active). */
.products-tab__icon-building {
    width: 20px;
    height: 20px;
}
.products-tab.active {
    background-color: var(--color-deep-grey);
    color: #ffffff;
}
/* Долна линия в кутийката на избрания (активен) продукт.
   left/right с отстъп, за да не стърчи през заоблените ъгли на бутона. */
.products-tab.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #D2BC5D;
}
.products-tab.nav-link {
    border-radius: 18px;
}
.products-tab-content {
    padding-left: 1.5rem;
}
.products-pane {
    color: #ffffff;
}
.products-pane__title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
.products-pane__text {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}
.products-pane__btn {
    border-radius: 10px;
    padding: 1.1rem 2.6rem;
    background-color: #ffffff;
    color: var(--color-deep-grey);
    border: none;
    font-weight: 500;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}
.products-pane__btn:hover,
.products-pane__btn:focus-visible {
    background-color: var(--color-light-grey);
    color: var(--color-deep-grey);
}
/* Bootstrap добавя клас .show на самия бутон (dropdown-toggle), докато
   падащото меню е отворено - без изрично зададен цвят за това състояние,
   бутонът наследява прозрачен фон и бял текст от .products-pane и
   практически изчезва, докато посочваш опция в менюто. Затова тук
   фиксираме цветовете за ВСИЧКИ състояния на бутона, за да не се
   променят изобщо, докато менюто е отворено. */
.products-pane__btn.show,
.products-pane__btn:active,
.products-pane__btn.dropdown-toggle.show:hover,
.products-pane__btn.dropdown-toggle.show:focus-visible {
    background-color: #ffffff;
    color: var(--color-deep-grey);
}
.products-pane__btn-arrow {
    font-size: 1.2rem;
}

/* Падащ списък с локации за "Научи повече" - същия цвят на фона и текста
   като бутона .products-pane__btn. Оборачваме .dropdown в собствен
   позициониран контейнер, за да можем да задаваме ширина на списъка
   спрямо панела (.products-pane), а не спрямо целия .products-section. */
.products-pane__dropdown {
    display: inline-block;
    position: relative;
    width: 35%;
    min-width: 210px;
}
.products-pane__btn.dropdown-toggle::after {
    display: none; /* пазим само собствената '›' стрелка, без bootstrap caret */
}
.products-pane__dropdown-menu {
    background-color: #ffffff;
    color: var(--color-deep-grey);
    border: none;
    border-radius: 10px;
    padding: 8px;
    width: 100%;
    min-width: 100%;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.products-pane__dropdown-menu .dropdown-item {
    color: var(--color-deep-grey);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 500;
}
.products-pane__dropdown-menu .dropdown-item:hover,
.products-pane__dropdown-menu .dropdown-item:focus {
    background-color: var(--color-light-grey);
    color: var(--color-deep-grey);
}

.footer-text {
    font-size: 0.9rem;
    color: #C0C0C0;
}

.footer-nav__link{
      color: #C0C0C0;
}

.footer-text a {
    font-size: 0.9rem;
    color: #C0C0C0;
}

.overlay-menu__group {
    margin-bottom: 0.2rem;
}

.menucopy{
        color: #4F5252;
    margin-right: 60px;
}

.overlay-menu__languages{
    text-align: left;
}

.overlay-menu__sublist {
    display: none;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
    padding-right: 0;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-right: 0;
}

.overlay-menu__parent{
    font-weight: 400;
}

.overlay-menu__group--with-border {
    padding-bottom: 0.2em;
    border-bottom: 0;
}

.overlay-menu__sublist {
    display: none;
    border-bottom: 1px solid #E3E5E4;
    margin-top: 2px;
}

.contacts-social-media-icon{
    background: var(--color-light-grey);
    color: var(--color-deep-grey);
    padding: 10px;
    border-radius: 10px;
}
.properties-table th{
 color: var(--color-pastel-blue);
 text-transform: uppercase;
    border:0
}
.properties-table tr{
    border-radius: 5px;
}
.properties-table tr td:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.properties-table tr td:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.properties-table td{
    background: var(--color-light-grey);
    color: var(--color-deep-grey);
    padding:10px 5px;
    border:0
}
.careers-hero{
    background-color: var(--color-deep-yellow);
    color:#fff;
}
.careers-hero .hero__title{
    font-size: 3.4rem;
}
.career-position-card__title{
    color: var(--color-deep-grey)
}
.career-position-card{
    background-color: var(--color-light-grey);
}
.how-to-join-section{
    background: var(--color-deep-yellow);
    color: #fff
}
.how-to-join-section .number{
    background: #fff;
    color: var(--color-deep-grey);
    border-radius: 100%;
    font-size: 1rem;
    line-height: 1;
    width:40px;
    height: 40px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.social-benefit-card{
    padding:8px;
    background: var(--color-light-grey);
    transition: .3s ease;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.social-benefit-card:hover{
    background: var(--color-deep-grey);
    transition: .3s ease;
}

.social-benefit-card:hover .icon{
    color: #fff;
}

.social-benefit-card .icon{
    display: flex;
    margin: 80px auto;
    color: var(--color-deep-grey)
}
.social-benefit-card .description{
    background: #fff;
    border-radius: 5px;
    padding: 15px 20px;
    min-height: 80px;
    width: 100%;
}
.carrers-contacts-section{
    background: var(--color-pastel-blue);
    color:#fff;
    border-radius: 25px;
    padding: 40px 35px;
}

   /*** ДОБАВЕНО OТ МЕН ***/
                                /* Активен клас - добавя се чрез JS */
                                .section-nav__link.active,
                                .section-nav__link.active {
                                                color: #000 !important;
                                                font-weight: 600 !important;
                                }
                                /* Важно: Отместване за анкорите, за да не застават под менюто */
                               section[id] {
    scroll-margin-top: var(--scroll-offset);
}
    /*************************/
    
@media (max-width:800px){
    .page-hero__content .page-hero__text {
        max-width: 700px;
        position: relative;
        top: -300px;
        text-align: center;
    }
    .page-hero{
        min-height: 600px;
    }
}

.site-logocenter{
            display:none;
        }
        .moblang{
            font-family: 'Manrope';
            font-style: normal;
            font-weight: 600;
            font-size: 14px;
            line-height: 19px;
            text-decoration-line: underline;
            color: #4F5252;
        }
        .mobilenodisplay{
            display:none;
        }
            @media (max-width:800px){
                .mobilenodisplay{
                    display:block;
                }
                .nomobile{
                    display:none!important;
                }
              
                .site-logocenter{
                    display:inline-block;
                    padding: 0;
                    margin: 0;
                }
                .site-logocenter img{
                    width: 62%;
                    margin-left: 54px;
                    margin-right: -27px;
                }
                .btn-menu {
                    padding: 20px;
                    font-size: 12px;
                }
            }
            
            
/*** Аdded by Maya ***/
/* Активен клас - добавя се чрез JS */
 .section-nav__link.active {
    color: #000 !important;
    font-weight: 600 !important;
}
/************************/

/* ===== Scroll reveal (ИЗКЛЮЧЕН - секциите се показват статично) ===== */
/* По желание fade-in/blur анимацията на секциите е изключена - секциите
   вече стоят директно в крайното си (видимо) състояние, независимо от
   .is-visible класа, който JS-ът продължава да добавя при скрол.
   Подчертаването на заглавията (.reveal-title::after по-долу) и на
   стики менюто (.section-nav__link::after по-горе) НЕ са пипани и
   продължават да работят както досега. */
.reveal-on-scroll {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Състояние, добавено от JS, когато секцията влезе във viewport-а */
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* По желание: леко забавяне между дъщерните елементи на секцията,
   за да не се появяват всички накуп (работи само ако елементът има data-reveal-children) */
.reveal-on-scroll[data-reveal-children] > * {
    opacity: 1;
    transform: none;
}
.reveal-on-scroll[data-reveal-children].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-on-scroll[data-reveal-children].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-on-scroll[data-reveal-children].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-on-scroll[data-reveal-children].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-on-scroll[data-reveal-children].is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-on-scroll[data-reveal-children].is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-on-scroll[data-reveal-children].is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* Достъпност: изключваме анимацията за потребители, които са задали
   "reduce motion" в системните си настройки */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .reveal-on-scroll[data-reveal-children] > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}
/************************/

/* ===== Underline Draw-in - заглавия на секции ===== */
/* Заглавието получава леко издигане + fade, а под него - линия в
   брандовия златен цвят, която се "изчертава" с малко закъснение. */
.reveal-heading-group .reveal-title {
    position: relative;
    display: inline-block;
    opacity: 1;
    transform: none;
}
.reveal-heading-group.is-visible .reveal-title {
    opacity: 1;
    transform: translateY(0);
}
.reveal-heading-group .reveal-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 3px;
    width: 0;
    background: #D2BC5D;
    transition: width 1s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.reveal-heading-group.is-visible .reveal-title::after {
    width: 64px;
}

/* Останалите елементи в заглавния блок (подзаглавие, "Научете повече" и т.н.)
   се появяват плавно, малко след линията. */
.reveal-heading-group .reveal-fade-item {
    opacity: 1;
    transform: none;
}
.reveal-heading-group.is-visible .reveal-fade-item {
    opacity: 1;
    transform: translateY(0);
}
.reveal-heading-group.is-visible .reveal-fade-item:nth-of-type(1) { transition-delay: 0.15s; }
.reveal-heading-group.is-visible .reveal-fade-item:nth-of-type(2) { transition-delay: 0.28s; }
.reveal-heading-group.is-visible .reveal-fade-item:nth-of-type(3) { transition-delay: 0.4s; }

/* ===== Staggered Cards - карти, появяващи се последователно ===== */
.reveal-stagger-group .reveal-stagger-item {
    opacity: 1;
    transform: none;
}
.reveal-stagger-group.is-visible .reveal-stagger-item {
    opacity: 1;
    transform: translateY(0);
}

/* Достъпност: без анимация при "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    .reveal-heading-group .reveal-title,
    .reveal-heading-group .reveal-fade-item,
    .reveal-stagger-group .reveal-stagger-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .reveal-heading-group .reveal-title::after {
        transition: none !important;
        width: 64px !important;
    }
}
/************************/

/* ===== Подчертаване при hover/избор - стики лентата за навигация по секции ===== */
/* Същият брандов златен цвят, дебелина (3px) и фиксирана дължина (64px),
   както линията под заглавията на секциите (виж "Underline Draw-in"
   по-горе) - тук не покрива целия текст, а е къса отсечка със същата
   дължина, стартираща от началото на видимия текст на линка (20px -
   толкова е левият padding на .section-nav__link).
   ВАЖНО: .section-nav__inner има overflow-x:auto, което автоматично
   прави и overflow-y:auto (по CSS спецификация) - затова линията НЕ
   може да стърчи извън бокса на линка (напр. bottom:-8px), защото ще
   бъде отрязана невидимо. Затова тук резервираме мястото за линията
   чрез padding-bottom и я позиционираме на bottom:0, вътре в собствения
   бокс на линка. */
.section-nav__link {
    position: relative;
    padding-bottom: 10px;
}

.section-nav__link::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--color-deep-yellow);
    transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.section-nav__link:hover::after,
.section-nav__link.active::after {
    width: 64px;
}

@media (prefers-reduced-motion: reduce) {
    .section-nav__link::after {
        transition: none;
    }
}
/************************/