@font-face {

    font-family: 'SimplerPro';

    src: url('./fonts/SimplerPro_BEZEQ_HEBREW2-Light.woff') format('woff');

    font-weight: 300;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'SimplerPro';

    src: url('./fonts/SimplerPro_BEZEQ_HEBREW2-Regular.woff') format('woff');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'SimplerPro';

    src: url('./fonts/SimplerPro_BEZEQ_HEBREW2-Semibold.woff') format('woff');

    font-weight: 600;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'SimplerPro';

    src: url('./fonts/SimplerPro_BEZEQ_HEBREW2-Bold.woff') format('woff');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'SimplerPro';

    src: url('./fonts/SimplerPro_BEZEQ_HEBREW2-Black.woff') format('woff');

    font-weight: 900;

    font-style: normal;

    font-display: swap;

}

/* Пользовательская анимация для AOS: увеличение по ширине */
[data-aos="grow-width"] {
  transform: scaleX(0);
  transform-origin: right; /* Начальная точка анимации справа (т.к. у тебя сайт RTL) */
  transition: transform 0.8s ease-in-out; /* Плавность и длительность */
}

[data-aos="grow-width"].aos-animate {
  transform: scaleX(1); /* Конечное состояние - полная ширина */
}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

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

    overflow-x: hidden; /* Предотвращает горизонтальный скролл */

}



a {

    color: #ffffff;

    text-decoration: none;

}



.hero {

    position: relative;

    height: 100vh;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #018ae9; /* base color while image loads */

    color: #fff;

    overflow: hidden;

}

/* Background layer extracted */
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('./img/hero.png');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 1;
    transition: opacity 1s ease;
}


.hero__swoosh {
    position: absolute;
    z-index: 1;
    animation: float-animation 8s ease-in-out infinite;
    pointer-events: none;
    transition: opacity .8s ease;
    opacity: 1;
}

.hero__swoosh-mobile {
    display: none;
    width: 100%;
    margin: 0 auto 50px;
    padding-inline-start: 10%;
    animation: float-animation 8s ease-in-out infinite;
    pointer-events: none;
    transition: opacity .8s ease;
    opacity: 1;
}

.hero__swoosh-1 {
    top: calc(50% - 16vw);
    right: 0;
    height: 32vw;
}

.hero__swoosh-2 {
    bottom: -100px;
    left: -4vw;
    width: auto;
    height: calc(100vh + 200px);
    animation-delay: -4s;
}

/* Сама анимация движения */
@keyframes float-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Ensure swooshes participate in load fade */
.hero .hero__swoosh.load-init { opacity:0; }
.hero .hero__swoosh.load-complete { opacity:1; }



.hero__content {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    padding: 25px;

    max-width: 1200px;

    margin: 0 auto;

}

/* Progressive hero loading */
.hero .load-init {
    opacity: 0;
    transition: opacity .8s ease;
}

.hero .load-complete {
    opacity: 1;
}

/* Ensure all hero elements share fade transition */
.hero__content, .hero__main, .hero__swoosh, .hero__logos, .hero__title, .hero__subtitle, .hero__scroll-down, .hero__bg {
    transition: opacity .8s ease;
}



.header {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.header__group {

    display: flex;

    align-items: center;

    gap: 30px;

}



.nav__list {

    list-style: none;

    display: flex;

    gap: 30px;

}



.nav__link {

    font-size: 20px;

    line-height: 1;

    font-weight: 400;

}

.nav__item--has-dropdown {
    position: relative; /* Это нужно, чтобы меню позиционировалось относительно этого элемента */
}

/* Стилизация самого выпадающего списка */
.nav__dropdown {
    display: none; /* По умолчанию меню скрыто */
    position: absolute;
    top: 120%; /* Располагаем чуть ниже родительского элемента */
    right: 50%; /* Центрируем относительно родителя */
    transform: translateX(50%);
    background-color: rgba(0, 25, 65, 0.9); /* Полупрозрачный фон в стиле сайта */
    border-radius: 8px;
    padding: 10px;
    list-style: none;
    min-width: 150px; /* Минимальная ширина, чтобы текст не переносился */
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
}

/* Показываем меню при наведении на родительский элемент */
.nav__item--has-dropdown:hover .nav__dropdown {
    display: block;
    opacity: 1;
    top: 100%;
}

/* Стили для ссылок внутри выпадающего меню */
.nav__dropdown li a {
    display: block;
    color: #ffffff;
    font-size: 18px;
    padding: 8px 15px;
    text-align: center;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

/* Эффект при наведении на ссылку в меню */
.nav__dropdown li a:hover {
    background-color: #0069FF;
}

/* Шеврон-индикатор для выпадающего меню */
.nav__item--has-dropdown > a::after {
    content: ''; /* Убираем текстовый символ */
    display: inline-block;
    width: 6px;   /* Ширина шеврона */
    height: 6px;  /* Высота шеврона */
    border-bottom: 2px solid #ffffff; /* Рисуем нижнюю грань */
    border-right: 2px solid #ffffff;  /* Рисуем правую грань */
    transform: rotate(45deg); /* Поворачиваем, чтобы получился шеврон, смотрящий вниз */
    margin-right: 8px;
    margin-bottom: 3px; /* Небольшая коррекция положения по вертикали */
    transition: transform 0.2s ease; /* Плавный переход для будущих анимаций */
}

/* Опционально: поворачиваем шеврон при открытии меню */
.nav__item--has-dropdown:hover > a::after {
    transform: rotate(225deg);
    margin-bottom: 0;
}



.header__cta {

    border: 1px solid #ffffff;

    padding: 17px 30px;

    border-radius: 99px;

    transition: background-color 0.3s, color 0.3s;

    white-space: nowrap;

    font-size: 20px;

    line-height: 1;

    font-weight: 400;

}



.header__cta:hover {

    background-color: #ffffff;

    color: #000000;

}



.lang-switcher a {
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}



.hero__main {

    width: 100%;

    text-align: start;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hero__main-wrapper {

    padding-inline-start: 8vw;

}



.hero__logos {

    max-width: 470px;

    margin-bottom: 0;
    margin-bottom: -40px;

}



.hero__title {

    font-size: 83px;

    font-weight: 900;

    line-height: 1.1;

    margin-bottom: 20px;

}



.hero__subtitle {

    font-size: 43px;

}



.hero__scroll-down {

    animation: bounce 2s infinite;

}



.hero__scroll-down img {

    width: 40px;

}



@keyframes bounce {



    0%,

    20%,

    50%,

    80%,

    100% {

        transform: translateY(0);

    }



    40% {

        transform: translateY(-20px);

    }



    60% {

        transform: translateY(-10px);

    }

}



.container {

    padding: 0 40px;

    width: 100%;

    max-width: 100%;

}



.features {

    padding: 50px 0 60px;

    text-align: center;

    background-color: #ffffff;

}



.features__container {

    max-width: none;

    padding: 0 40px;

}



.features__title {

    font-size: 50px;

    line-height: 70px;

    color: #0058FF;

    margin-bottom: 30px;

}



.features__grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 30px;

    max-width: 1440px;

    margin: 0 auto;

}



.features__item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    cursor: pointer;

    transition: transform 0.2s ease-in-out;

    flex: 0 1 calc(25% - 30px);

    min-width: 200px;

}



.features__text {

    font-size: 24px;

    line-height: 27px;

    color: #010635;

    margin-top: 8px;

    font-weight: 400;

    text-align: center;

    transition: all 0.3s ease;

}



.features__item:hover .features__text {

    font-weight: bold;

}



.testimonial {

    display: grid;

    grid-template-columns: 1fr 300px;

    gap: 25px;

    width: 100%;

    background-color: #0069FF;

    color: #fff;

    min-height: 650px;

}



.testimonial__content {

    padding: 50px 60px 50px 0;

    max-width: 992px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    margin: 0 auto;

}



.testimonial__title {

    font-size: 50px;

    font-weight: 900;

    margin-bottom: 20px;

    line-height: 52px;

    max-width: 400px;

}



.testimonial__text {

    font-size: 20px;

    line-height: 26px;

    margin-bottom: 12px;

}



.testimonial__author {

    margin-top: 18px;

    font-size: 20px;

    line-height: 26px;

}



.testimonial__image {

    background-image: url('./img/photo.png');

    background-size: cover;

    background-position: center;

    min-height: 400px;

}



.esg-goals {

    position: relative;

    padding: 75px 0 50px;

    background-image: url('./img/bg-1.png');

    background-size: cover;

    background-position: center;

    text-align: center;

    color: #ffffff;

}



.esg-goals__container {

    position: relative;

    z-index: 2;

}



.esg-goals__title {

    font-size: 50px;

    line-height: 52px;

    font-weight: 900;

    margin-bottom: 77px;

    text-shadow: 0px 1px 4px #00000040;

}



.esg-goals__grid {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

    gap: 40px;

}



.goal-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-basis: 200px;

    transition: transform 0.2s ease-in-out;

}



.goal-card:hover {

    transform: translateY(-5px);

}



.goal-card__icon {

    width: 80px;

    height: 80px;

    object-fit: contain;

    pointer-events: none;

}



.goal-card__text {

    font-size: 24px;

    line-height: 27px;

    font-weight: 400;

    margin-top: 10px;

}



.company-stats {

    position: relative;

    background-color: #ffffff;

    padding: 160px 0 60px;

    overflow: hidden;

}



.company-stats__container {

    max-width: 1440px;

    margin: 0 auto;

    position: relative;

    z-index: 2;

}



.company-stats__swoosh {

    position: absolute;
    top: 15px;
    left: -5vw;
    width: 814px;

    height: auto;

    aspect-ratio: 3 / 1;

    background-image: url(img/svg-decor-1.svg);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: left center;

    z-index: 1;

}



.company-stats__title {

    text-align: right;

    color: #0058FF;

    font-size: 50px;

    line-height: 52px;

    font-weight: 900;

    margin-bottom: 120px;

}



.company-stats__grid {

    display: grid;

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

    gap: 25px;

}



.stat-card {

    background-color: #F4F4F4;

    padding: 18px 18px 22px 26px;

    border-radius: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.stat-card__logo {

    height: 39px;

    align-self: flex-start;

    object-fit: contain;

    object-position: right top;

}



.company-stats__card:nth-child(1) .stat-card__logo {

    width: 60px;

}



.company-stats__card:nth-child(2) .stat-card__logo {

    width: 67px;

}



.company-stats__card:nth-child(3) .stat-card__logo {

    width: 144px;

}



.company-stats__card:nth-child(4) .stat-card__logo {

    width: 97px;

}



.stat-card__text {

    color: #000;

    line-height: 26px;

    font-size: 20px;

}



.company-stats__footnote {

    text-align: center;

    margin-top: 20px;

    font-size: 12px;

    line-height: 26px;

    color: #000;

}



.banner {

    position: relative;

    color: #ffffff;

    display: flex;

    align-items: flex-end;

    padding: 96px 40px 56px 40px;

    background-size: cover;

    background-position: center;

}



.banner::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0) -18.23%, rgba(0, 105, 255, 0.8) 34.98%);

    z-index: 1;

}



.banner__container {

    position: relative;

    z-index: 2;

    width: 1440px;

    margin: 0 auto;

}



.banner__content {

    text-align: start;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    max-width: 562px;

}



.banner__title {

    font-size: 50px;

    line-height: 52px;

    font-weight: 900;

    margin-bottom: 10px;

}



.banner__text {

    font-size: 24px;

    line-height: 30px;

    font-weight: 400;

}



.community-slider {

    padding: 0;

    background-color: #f7f8fa;

}



.community-slider__swiper {

    width: 100%;

    height: 500px;

}



.community-slider__slide {

    display: grid;

    grid-template-columns: 1fr 1fr;

    background-color: #ffffff;

}



.community-slider__image {

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

}



.community-slider__content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    max-width: 520px;

    margin: 0 auto;

}



.community-slider__line {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

}



.community-slider__logo {

    width: 54px;

    height: auto;

}



.community-slider__logo--large {

    width: 79px;

}



.community-slider__logo--small {

    max-height: 60px;

}



.community-slider__text {

    font-size: 24px;

    line-height: 30px;

    color: #000;

    font-weight: 400;

}



.community-slider__quote-box img {

    margin-top: 15px;

    width: 378px;

}

.community-slider .swiper-pagination {
    /* Сдвигаем пагинацию немного ниже, чтобы она не накладывалась на контент */
    bottom: 20px !important; 
}

/* Стиль для всех точек (неактивных) */
.community-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #010636; /* Темно-синий, как в футере */
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* Стиль для активной точки */
.community-slider .swiper-pagination-bullet-active {
    background-color: #00DFF9; /* Яркий акцентный голубой цвет */
    opacity: 1;
    transform: scale(1.2); /* Немного увеличиваем активную точку */
}



.solidarity {

    position: relative;

    padding: 34px 0;

    background-image: url('./img/flowers.png');

    background-size: cover;

    background-position: center;

    display: flex;

    justify-content: center;

    align-items: center;

}



.solidarity::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #0069FF;

    opacity: .7;

    z-index: 1;

}



.solidarity::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(0, 63, 153, 0) 0%, #0069FF 65%);

    z-index: 2;

    opacity: .7;

}



.solidarity__container {

    position: relative;

    z-index: 3;

}



.solidarity__content {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.solidarity__icon {

    height: 102px;

    margin-bottom: 15px;

}



.solidarity__text {

    color: #ffffff;

    font-size: 46px;

    line-height: 52px;

    font-weight: 400;

    max-width: 1000px;

    text-align: center;

    text-shadow: 0px 1px 4px #00000040;

}



.solidarity__text strong {

    font-weight: 900;

}



.partners {

    padding: 50px 0;

    background-color: #ffffff;

}



.partners__title {

    color: #0069FF;

    text-align: center;

    font-size: 50px;

    line-height: 52px;

    margin-bottom: 60px;

}



.partners__grid {

    display: grid;

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

    justify-content: center;

    flex-wrap: wrap;

    gap: 35px;

    max-width: 1440px;

    margin: 0 auto;

}



.partners__item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    position: relative;

}

.partners__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
    width: 1px;
    height: 100%;
    background-color: #00DFF9;
}



.partners__logo-wrapper {

    width: 178px;

    height: 178px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 0;

    padding: 0;

}



.partners__logo {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.partners__text {

    color: #010636;

    line-height: 30px;

    font-size: 24px;

}



.charts {

    padding: 40px 0;

    background-color: #ffffff;

}



.charts__container {

    max-width: 1440px;

    margin: 0 auto;

}



.charts__wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-bottom: 1px solid #010636;

    padding: 0 40px;

}



.charts__content {

    text-align: right;

}



.charts__icon {

    width: 60px;

    height: auto;

    margin-bottom: 20px;

}



.charts__title {

    font-size: 32px;

    line-height: 35px;

    font-weight: 900;

    color: #010636;

    margin-bottom: 0;

    max-width: 235px;

}



.charts__subtitle {

    font-size: 24px;

    color: #010636;

    line-height: 30px;

    max-width: 400px;

}



.charts__canvas-wrapper {

    width: 100%;

    height: 300px;

}



.stats-combo {

    padding: 0 0 60px;

}



.stats-combo__container {

    max-width: 1440px;

    margin: 0 auto;

}



.stats-combo__wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

}



.stats-combo__column--vehicles {

    padding-inline: 40px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.stats-combo__column--water {

    border-bottom: 1px solid #010636;

    padding-inline-end: 40px;

}



.stats-combo__arrow {

    margin-top: 45px;

    width: 100%;

    height: 45px;

    margin-bottom: -20px;

}



.stats-combo__arrow img {

    width: 100%;

}



.stats-combo__title {

    font-size: 32px;

    line-height: 35px;

    font-weight: 900;

    color: #010636;

    margin-bottom: 0;

    max-width: 350px;

}



.stats-combo__text {

    font-size: 24px;

    color: #010636;

    line-height: 30px;

    max-width: 320px;

}



.stats-combo__image {

    max-width: 100%;

    height: auto;

    width: 240px;

    margin-inline-start: auto;

    display: block;

}



.stats-combo__chart-wrapper {

    position: relative;

    width: 100%;

    height: 180px;

}



.promo-video {

    position: relative;

    min-height: 350px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffff;

    text-align: center;

    overflow: hidden;

}



.promo-video__background {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: 1;

    object-fit: cover;

}



.promo-video__overlay {

    position: relative;

    z-index: 3;

    width: 100%;

    padding: 20px;

}



.promo-video::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 105, 255, 0.8) 79.81%);

    z-index: 2;

}



.promo-video__title {

    font-size: 50px;

    line-height: 52px;

    font-weight: 900;

    color: #fff;

    margin-bottom: 10px;

}



.promo-video__text {

    font-size: 24px;

    line-height: 30px;

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}



.progress {

    padding: 60px 0;

    background-color: #ffffff;

}



.progress__header {

    text-align: center;

    margin-bottom: 50px;

}



.progress__title {

    color: #0069FF;

    font-size: 50px;

    line-height: 52px;

}



.progress__subtitle {

    color: #000;

    font-size: 24px;

    line-height: 52px;

}



.progress__grid {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 80px;

}



.progress__card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;

}



.progress__circle {

    position: relative;

    width: 160px;

    height: 160px;

}



.progress__percent {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 2.5rem;

    font-weight: bold;

    color: #0058FF;

}



.progress__ring {

    transform: rotate(-90deg);

}



.progress__ring-bg,

.progress__ring-fg {

    fill: none;

    stroke-width: 12;

}



.progress__ring-bg {

    stroke: #e6e6e6;

}



.progress__ring-fg {

    stroke: #007bff;

    stroke-dasharray: 440;

    stroke-dashoffset: 440;

    transition: stroke-dashoffset 1.5s ease-out;

}



.progress__logo {

    height: 45px;

    max-width: 100%;

    object-fit: contain;

}



.progress__card:nth-child(1) .progress__logo {

    width: 70px;

}



.progress__card:nth-child(2) .progress__logo {

    width: 77px;

}



.progress__card:nth-child(3) .progress__logo {

    width: 160px;

}



.progress__card:nth-child(4) .progress__logo {

    width: 110px;

}



.progress__summary {

    text-align: center;

    margin-top: 90px;

}



.progress__summary-title {

    font-size: 35px;

    line-height: 52px;

    font-weight: 700;

    color: #000;

    margin-bottom: 14px;

}



.progress__summary-text {

    display: inline-block;

    font-size: 25px;

    line-height: 28px;

    color: #000;

    background-color: #00DAF9F2;

    padding-inline: 20px;

}



.diversity {

    position: relative;

    overflow: hidden;

    padding: 80px 0 0;

    color: #fff;

}



.diversity__background {

    position: absolute;

    inset: 0;

    background: url('./img/diversity-bg.png') center/cover no-repeat;

    z-index: 1;

}



.diversity__background::after {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 105, 255, 0.8);

}



.diversity__container {

    position: relative;

    z-index: 2;

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 40px;

}



.diversity__wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

}



.diversity__icon {

    width: 80px;

    height: auto;

    margin-bottom: 10px;

}



.diversity__title {

    font-size: 50px;

    line-height: 52px;

    margin-bottom: 23px;

    font-weight: 700;

}



.diversity__text {

    font-size: 24px;

    line-height: 30px;

    margin-bottom: 20px;

}



.diversity__highlight {

    margin-bottom: 40px;

}



.diversity__highlight p {

    font-size: 24px;

    line-height: 30px;

    display: inline-block;

    background-color: #00DAF9F2;

    margin-bottom: 4px;

}



.diversity__footnote {

    max-width: 420px;

    font-size: 12px;

    line-height: 13px;

    margin-bottom: 15px;

}



.diversity__graph {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: flex-end;

}



.diversity__chart-wrapper {

    height: 300px;

    width: 100%;

}



.diversity__graph canvas {

    width: 100%;

}



.diversity__arrow {

    width: 80%;

    height: 80px;

    margin: 0 auto;

}



.diversity__arrow img {

    width: 100%;

}



.safety {

    padding: 50px 0 80px;

    background-color: #ffffff;

}



.safety__container {

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 40px;

}



.safety__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    align-items: flex-end;

}



.safety__text-content {

    text-align: right;

}



.safety__icon {

    height: 70px;

    margin-bottom: 25px;

}



.safety__title {

    font-size: 42px;

    line-height: 1;

    font-weight: 700;

    color: #0069FF;

    margin-bottom: 10px;

}



.safety__subtitle {

    font-size: 24px;

    line-height: 30px;

    color: #010636;

}



.safety__chart-wrapper {

    width: 100%;

    height: 96px;

}



.cybersecurity {

    display: grid;

    grid-template-columns: 1fr 1fr;

    height: 530px;

    max-height: 100vh;

    min-height: auto;

    background-color: #ffffff;

}



.cybersecurity__column--video {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #ffffff;

    overflow: hidden;

}



.cybersecurity__video {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: 1;

    object-fit: cover;

}



.cybersecurity__video-overlay {

    position: relative;

    z-index: 2;

    width: 100%;

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

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.cybersecurity__video-content {

    width: fit-content;

    max-width: 100%;

    display: flex;

    flex-direction: column;

    text-align: start;

}



.cybersecurity__icon {

    height: 60px;

    align-self: start;

    margin-bottom: 36px;

}



.cybersecurity__title {

    font-size: 42px;

    font-weight: 900;

    line-height: 1;

}



.cybersecurity__column--scroll {

    padding: 16px 40px 16px 20px;

    overflow-y: auto;

}



.cybersecurity__scroll-inner {

    height: auto;

    overflow-y: visible;

}



.cybersecurity__column--scroll::-webkit-scrollbar {

    width: 8px;

}



.cybersecurity__column--scroll::-webkit-scrollbar-track {

    background: #f1f1f1;

}



.cybersecurity__column--scroll::-webkit-scrollbar-thumb {

    background: #0058FF;

    border-radius: 4px;

}



.cybersecurity__column--scroll::-webkit-scrollbar-thumb:hover {

    background: #003a6c;

}



.cybersecurity__content-block {

    margin-bottom: 45px;

}



.cybersecurity__block-header {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.cybersecurity__block-header svg {

    height: 32px;

    width: auto;

    max-width: 130px;

    object-fit: contain;

    object-position: right;

}



.cybersecurity__block-title {

    font-size: 20px;

    line-height: 42px;

    color: #000;

    font-weight: 700;

}



.cybersecurity__list {

    list-style: none;

    padding-inline-start: 0;

}



.cybersecurity__list-item {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 20px;

    color: #000;

    line-height: 42px;

    margin-bottom: 15px;

}



.cybersecurity__list-item svg {

    flex-shrink: 0;

    margin-top: 21px;

    transform: translateY(-50%);

}



.scores {

    padding: 70px 0 55px;

    background-color: #ffffff;

}



.scores__header {

    text-align: center;

    margin-bottom: 25px;

}



.scores__title {

    color: #0069FF;

    font-size: 50px;

    line-height: 52px;

    margin-bottom: 0;

}



.scores__subtitle {

    color: #000;

    font-size: 24px;

    line-height: 52px;

}



.scores__grid {

    display: grid;

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

    gap: 25px;

    max-width: 1200px;

    margin: 0 auto;

}



.scores__card {

    background-color: #F4F4F4;

    padding: 30px 30px 40px;

    text-align: center;

}



.scores__card-title {

    font-size: 24px;

    line-height: 30px;

    font-weight: 700;

    color: #010636;

    margin-bottom: 30px;

}



.scores__badges-container {

    display: flex;

    justify-content: space-around;

    align-items: center;

}



.scores__badge {

    width: 95px;

    height: 95px;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #ffffff;

    position: relative;

}



.scores__badge[data-year="2022"] {

    background-image: url('./img/chevron-blue.svg');

}



.scores__badge[data-year="2023"] {

    background-image: url('./img/chevron-aqua.svg');

}



.scores__badge[data-year="2024"] {

    background-image: url('./img/chevron-green.svg');

    width: 125px;

    height: 125px;

}



.scores__badge-value {

    font-size: 32px;

    line-height: 1;

    font-weight: 700;

    transform: translateY(-6px);

}



.scores__badge[data-year="2024"] .scores__badge-value {

    font-size: 40px;

    transform: translateY(-8px);

}



.scores__badge-year {

    font-size: 17px;

    line-height: 1;

    color: #010636;

    position: absolute;

    top: 100%;

    transform: translateY(-4px);

}



.recommendation {

    padding: 80px 0;

    background-color: #ffffff;

}



.recommendation__container {

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 40px;

}



.recommendation__header {

    text-align: center;

    margin-bottom: 50px;

}



.recommendation__icon {

    height: 70px;

    margin-bottom: 20px;

}



.recommendation__title {

    color: #010636;

    font-size: 2.2rem;

    font-weight: 600;

    margin-bottom: 10px;

    line-height: 1.3;

}



.recommendation__subtitle {

    color: #010636;

    font-size: 1.5rem;

    font-weight: 400;

}



.recommendation__charts-container {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 60px;

}

.recommendation__chart-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.recommendation__chart-wrapper {

    position: relative;

    width: 300px;

    height: 300px;

    flex-shrink: 0;

}



.recommendation__chart-year {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 30px;

    line-height: 1;

    font-weight: 900;

    color: #010636;

}



.recommendation__chart-label {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 16px;

    color: white;

    font-size: 27px;

    font-weight: 700;

}



.recommendation__chart-label--pelephone {

    top: 0;

    left: 50%;

    transform: translateX(-40px);

    color: #fff;

}



.recommendation__chart-label--yes {

    top: 40px;

    left: 50%;

    color: #fff;

    transform: translateX(-52px);

}



.recommendation__chart-label svg {

    display: block;

}



.recommendation__footnote {

    text-align: center;

    margin-top: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.recommendation__footnote p {

    display: inline-block;

    padding: 0 15px;

    font-size: 25px;

    font-weight: 400;

    color: #000;

    background-color: #00DAF9F2;

    line-height: 27px;

    margin-bottom: 8px;

}



.ethics {

    position: relative;

    padding: 60px 0;

    height: 400px;

    color: #ffffff;

    background-image: url('img/ethics-bg.png');

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

}



.ethics::before,

.ethics::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.ethics::before {

    z-index: 1;

    background: linear-gradient(90.09deg, #0069FF 0.07%, rgba(0, 105, 255, 0) 66.98%);

}



.ethics::after {

    z-index: 2;

    background: linear-gradient(270.09deg, rgba(0, 105, 255, 0.08) 15.44%, #0069FF80 39.92%);

}



.ethics__container {

    position: relative;

    z-index: 3;

    max-width: 1440px;

    margin: 0 auto;

    width: 100%;

    padding: 0 40px;

}



.ethics__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    align-items: center;

}



.ethics__column--title {

    text-align: right;

}



.ethics__icon {

    height: 60px;

    margin-bottom: 35px;

}



.ethics__title {

    font-size: 52px;

    line-height: 1;

    font-weight: 700;

}



.ethics__list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.ethics__item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    font-size: 20px;

    line-height: 42px;

}



.ethics__item:not(:last-child) {

    margin-bottom: 15px;

}



.ethics__item svg {

    flex-shrink: 0;

    margin-top: 21px;

    transform: translateY(-50%);

}



.community-impact {

    padding: 80px 0;

    background-color: #ffffff;

}



.community-impact__container {

    padding: 0 40px;

}



.community-impact__header {

    text-align: center;

    margin-bottom: 60px;

}



.community-impact__icon {

    height: 60px;

    margin-bottom: 30px;

}



.community-impact__title {

    color: #0069FF;

    font-size: 52px;

    line-height: 1;

    font-weight: 700;

}



.community-impact__tabs-nav {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 20px 120px;

    border-bottom: 1px solid #D9D9D9;

    width: 100%;

    max-width: 1440px;

    margin: 0 auto 45px;

}



.community-impact__tab-link {

    background: none;

    border: none;

    padding: 0 15px 40px;

    cursor: pointer;

    transition: all 0.3s;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.community-impact__tab-link:hover {

    opacity: 1;

}



.community-impact__tab-link--active {

    opacity: 1;

}



.community-impact__tab-link::after {

    content: '';

    position: absolute;

    bottom: -4px;

    left: 50%;

    width: 100%;

    min-width: 200px;

    height: 8px;

    border-radius: 30px;

    background-color: transparent;

    transform: translateX(-50%);

    transition: all .3s ease;

}



.community-impact__tab-link:hover::after,

.community-impact__tab-link--active::after {

    background-color: #00DFF9;

}



.community-impact__tab-link img {

    height: 44px;

    max-width: 160px;

    object-fit: contain;

}



.logo-combo {

    display: flex;

    align-items: center;

    gap: 20px 120px;

}



.community-impact__tabs-content {
    max-width: 1440px;
    margin: 0 auto;
    position: relative; /* Добавлено для позиционирования панелей */
}

.community-impact__tab-panel {
    /* Изменено для эффекта затухания */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
    pointer-events: none;
}

.community-impact__tab-panel--active {
    /* Изменено для эффекта появления */
    opacity: 1;
    visibility: visible;
    position: static; /* Позволяет активной панели занимать место и определять высоту контейнера */
    pointer-events: auto;
    transition: opacity 0.4s ease-in-out;
}



.community-impact__panel-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;

}



.community-impact__panel-image {

    height: 450px;

    background-size: cover;

    background-position: center;

    border-radius: 12px;

}



.community-impact__list {

    list-style: none;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 25px;

}



.community-impact__item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    font-size: 20px;

    line-height: 42px;

    color: #000;

}



.community-impact__item svg {

    flex-shrink: 0;

    margin-top: 21px;

    transform: translateY(-50%);

    width: 20px;

    height: auto;

}



.footer {

    width: 100%;

}



.footer__main {

    position: relative;

    /* Остается как контекст для позиционирования */

    height: 400px;

    overflow: hidden;

}



.footer__video-bg {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    min-width: 100%;

    min-height: 100%;

    z-index: 1;

    object-fit: cover;

}



.footer__overlay {

    position: relative;

    z-index: 3;

    width: 100%;

    height: 100%;

    /* Растягиваем оверлей на всю высоту */

    padding: 20px;

}



.footer__main::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #0069FF80;

    z-index: 2;

}



/* Контейнер .footer__links больше не управляет расположением */

.footer__links {

    position: static;

}



.footer__button-download {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    /* Точное центрирование */



    /* Остальные стили из предыдущего шага */

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 52px;

    padding: 0 50px;

    border: 1px solid #ffffff;

    border-radius: 50px;

    color: #ffffff;

    text-decoration: none;

    font-size: 24px;

    font-weight: 400;

    transition: all 0.3s ease;

    white-space: nowrap;

}



.footer__button-download:hover {

    background-color: #ffffff;

    color: #0058FF;

}



.footer__link-secondary {

    position: absolute;

    bottom: 40px;

    /* Прижимаем к низу с отступом в 40px */

    left: 50%;

    transform: translateX(-50%);

    /* Горизонтальное центрирование */



    /* Остальные стили из предыдущего шага */

    color: #ffffff;

    text-decoration: none;

    font-size: 24px;

    font-weight: 400;

    transition: all .3s ease;

}



.footer__link-secondary:hover {

    color: #007bff;

}



.footer__sub {

    background-color: #010636;

    padding: 10px 0;

}



.footer__logos {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 50px;

}



.footer__logos img {

    height: 130px;

}


#scrollToTopBtn {
  
  position: fixed; 
  bottom: 95px;
  left: 15px;
  z-index: 100; 

  
  width: 50px;
  height: 50px;
  background-color: #4e48fb; 
  border: none;
  border-radius: 50%; 
  cursor: pointer;
  
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px); 
  
  
  transition: opacity 0.3s, visibility 0.3s, background-color 0.3s, transform 0.3s;
}


#scrollToTopBtn:hover {
  background-color: #333; 
}


#scrollToTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


#scrollToTopBtn svg {
  stroke: #fff; 
  width: 24px;
  height: 24px;
}



/* ==========================================================================

   Responsive Styles

   ========================================================================== */



/* Tablet Styles */

@media (max-width: 992px) {

    .container {

        padding: 0 30px;

    }



    .header__group {

        gap: 20px;

    }



    .nav__list {

        gap: 20px;

    }



    .nav__link,

    .header__cta {

        font-size: 18px;

    }



    .hero__title {

        font-size: 60px;

    }



    .hero__subtitle {

        font-size: 30px;

    }



    .features__item {

        flex-basis: calc(33.333% - 20px);

        gap: 0;

    }



    .testimonial {

        grid-template-columns: 1fr;

    }



    .testimonial__content {

        padding: 40px;

        max-width: 100%;

        text-align: center;

        align-items: center;

    }



    .testimonial__image {

        grid-row: 1;

        min-height: auto;
        aspect-ratio: 3 / 2;
        background-position: top -28vw center;

    }



    .esg-goals__title {

        margin-bottom: 50px;

    }



    .goal-card {

        flex-basis: calc(33.333% - 30px);

    }



    .company-stats__grid {

        grid-template-columns: 1fr;

    }



    .company-stats__title {

        text-align: center;

    }



    .community-slider__slide {

        grid-template-columns: 1fr;

    }



    .community-slider__swiper {

        height: auto;

    }



    .community-slider__content {

        padding: 40px;

        text-align: center;

        align-items: center;

    }



    .community-slider__image {

        height: 300px;

        order: -1;

    }



    .community-slider__line {

        flex-direction: column;

    }





    .partners__grid {

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

        gap: 20px;

    }

    .partners__item:nth-child(3n)::after {
        display: none;
    }
    .partners__item:not(:last-child)::after {
        left: -12px;
    }



    .partners__text {

        font-size: 20px;

        line-height: 1.2;

    }



    .charts__wrapper {

        grid-template-columns: 1fr;

        padding: 0 20px;

        text-align: center;

        gap: 20px;

    }



    .charts__content {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

    }



    .stats-combo__wrapper {

        grid-template-columns: 1fr;

        gap: 50px;

    }



    .stats-combo__column--vehicles {

        text-align: start;

    }



    .stats-combo__image {

        margin: 20px auto 0;

    }



    .stats-combo__column--water {

        text-align: start;

        border-bottom: none;

        padding-inline-end: 0;

    }



    .progress__grid {

        gap: 50px;

    }



    .diversity__wrapper {

        grid-template-columns: 1fr;

        text-align: start;

    }



    .diversity__info {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

    }



    .diversity__graph {

        margin-top: 30px;

    }



    .safety__grid {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 30px;

    }



    .cybersecurity {

        grid-template-columns: 1fr;

        height: auto;

        max-height: unset;

    }



    .cybersecurity__column--video {

        min-height: 300px;

    }



    .cybersecurity__video-content {

        align-items: flex-start;

        text-align: start;

    }



    .cybersecurity__icon {

        align-self: start;

    }



    .cybersecurity__column--scroll {

        padding: 30px;

    }





    .scores__grid {

        grid-template-columns: 1fr;

    }



    .ethics {

        height: auto;

    }



    .ethics__grid {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .ethics__column--title {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

    }



    .ethics__item {

        text-align: start;

    }



    .community-impact__panel-grid {

        grid-template-columns: 1fr;

    }



    .community-impact__panel-image {

        height: 300px;

        order: -1;

    }



    .community-impact__panel-text {

        padding: 20px 0;

    }



    .community-impact__tabs-nav {

        gap: 10px 40px;

    }



    .community-impact__tab-link::after {

        min-width: 150px;

    }



    .logo-combo {

        gap: 10px 40px;

    }

    .company-stats__swoosh {
        left: -10vw;
        width: 50%;
    }





}



/* Mobile Styles */

@media (max-width: 768px) {

    .container {

        padding: 0 15px;

    }



    .header {

        padding: 0 10px;

    }

    

    .header__group {

        flex-direction: column;

        width: 100%;

        justify-content: center;

    }



    .header__cta {

        padding: 10px 20px;

        font-size: 14px;

    }

    .hero__swoosh-mobile {
        display: block;
    }

    .hero__main-wrapper {
        margin-bottom: 100px;
    }

    .hero__swoosh-1 {
        display: none;
    }


    .hero__main-wrapper {

        padding-inline-start: 0;

        text-align: center;

    }



    .hero__logos {

        max-width: 80%;

        margin: 0 auto;

    }



    .hero__title {

        font-size: 40px;

        line-height: 1.1;

    }



    .hero__subtitle {

        font-size: 22px;

    }



    .features {

        padding: 40px 15px;

    }

    

    .features__container {

        padding: 0 15px;

    }



    .features__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .features__grid {

        gap: 25px 15px;

    }



    .features__item {

        flex-basis: calc(50% - 10px);

        min-width: 140px;

    }



    .features__text {

        font-size: 16px;

        line-height: 1.3;

    }



    .testimonial__content {

        padding: 30px 15px;

    }



    .testimonial__title {

        font-size: 28px;

        line-height: 1.2;

    }



    .testimonial__text,

    .testimonial__author {

        font-size: 16px;

        line-height: 1.5;

    }



    .esg-goals {

        padding: 50px 15px;

    }



    .esg-goals__title {

        font-size: 32px;

        line-height: 1.2;

        margin-bottom: 40px;

    }



    .esg-goals__grid {

        gap: 20px;

    }



    .goal-card {

        flex-basis: calc(50% - 10px);

    }



    .goal-card__text {

        font-size: 16px;

        line-height: 1.3;

    }



    .company-stats {

        padding: 100px 15px 40px;

    }

    

    .company-stats__container {

        padding: 0 15px;

    }



    .company-stats__title {

        font-size: 32px;

        line-height: 1.2;

        margin-bottom: 30px;

    }



    .stat-card__text {

        font-size: 16px;

        line-height: 1.5;

    }



    .banner {

        padding: 60px 20px;

        min-height: auto;

    }



    .banner__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .banner__text {

        font-size: 18px;

        line-height: 1.5;

    }



    .community-slider__content {

        padding: 30px 20px;

    }



    .community-slider__text {

        font-size: 18px;

        line-height: 1.5;

    }



    .community-slider__quote-box img {

        width: 100%;

        max-width: 300px;

    }



    .solidarity {

        padding: 40px 20px;

        min-height: 300px;

    }



    .solidarity__icon {

        height: 80px;

    }



    .solidarity__text {

        font-size: 24px;

        line-height: 1.3;

    }



    .partners {

        padding: 40px 20px;

    }

    

    .partners__container {

        padding: 0 15px;

    }



    .partners__title {

        font-size: 32px;

        line-height: 1.2;

        margin-bottom: 40px;

    }



    .partners__grid {

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

    }

    .partners__item:nth-child(3n)::after {
        display: block;
    }
    .partners__item:nth-child(2n)::after {
        display: none;
    }
    .partners__item:not(:last-child)::after {
        left: -12px;
    }

    .partners__item:last-child {
        grid-column: span 2;
    }

    .partners__item:last-child .partners__text-wrapper {
        width: 50%;
    }

    

    .partners__logo-wrapper {

        width: 140px;

        height: 140px;

    }



    .partners__text {

        font-size: 16px;

    }



    .charts__wrapper {

        padding: 0;

    }

    

    .charts__container {

        padding: 0 15px;

    }



    .charts__title {

        font-size: 26px;

        line-height: 1.2;

    }



    .charts__subtitle {

        font-size: 16px;

        line-height: 1.4;

    }

    

    .stats-combo__container {

        padding: 0 15px;

    }

    

    .stats-combo__column--vehicles {

        padding-inline: 0;

    }



    .stats-combo__title {

        font-size: 26px;

        line-height: 1.2;

    }



    .stats-combo__text {

        font-size: 16px;

        line-height: 1.4;

    }



    .promo-video__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .promo-video__text {

        font-size: 16px;

        line-height: 1.5;

    }



    .promo-video {

        height: 50vh;

    }



    .progress {

        padding: 40px 15px;

    }



    .progress__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .progress__subtitle {

        font-size: 16px;

        line-height: 1.4;

    }

    

    .progress__grid {

        gap: 30px;

        display: grid;

        grid-template-columns: 1fr 1fr;

    }

    

    .progress__card {

        gap: 20px;

    }

    

    .progress__circle {

        width: 120px;

        height: 120px;

    }



    .progress__ring {

        width: 120px;

        height: 120px;

    }

    

    .progress__percent {

        font-size: 2rem;

    }



    .progress__summary {

        margin-top: 50px;

    }



    .progress__summary-title {

        font-size: 22px;

        line-height: 1.3;

    }



    .progress__summary-text {

        font-size: 16px;

        line-height: 1.4;

    }



    .diversity {

        padding-top: 50px;

    }

    

    .diversity__container {

        padding: 0 15px;

    }



    .diversity__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .diversity__text,

    .diversity__highlight p {

        font-size: 16px;

        line-height: 1.4;

    }

    .diversity__highlight p {
        margin-bottom: 0;
        
    }



    .safety {

        padding: 40px 0;

    }

    

    .safety__container {

        padding: 0 15px;

    }



    .safety__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .safety__subtitle {

        font-size: 16px;

        line-height: 1.4;

    }



    .cybersecurity__title {

        font-size: 32px;

    }

    

    .cybersecurity__column--scroll {

        padding: 20px;

    }



    .cybersecurity__list-item,

    .cybersecurity__block-title {

        font-size: 16px;

        line-height: 1.5;

    }



    .cybersecurity__list-item svg {

        margin-top: 12px;

    }



    .scores {

        padding: 40px 15px;

    }

    

    .scores__container {

        padding: 0;

    }



    .scores__title {

        font-size: 32px;

        line-height: 1.2;

    }



    .scores__subtitle {

        font-size: 16px;

        line-height: 1.4;

    }

    

    .scores__badges-container {

        gap: 10px;

    }

    

    .scores__badge {

        width: 80px;

        height: 80px;

    }

    

    .scores__badge[data-year="2024"] {

        width: 100px;

        height: 100px;

    }

    

    .scores__badge-value {

        font-size: 24px;

    }

    

    .scores__badge[data-year="2024"] .scores__badge-value {

        font-size: 32px;

    }



    .scores__card-title {

        font-size: 18px;

    }



    .recommendation {

        padding: 40px 15px;

    }

    

    .recommendation__container {

        padding: 0 15px;

    }



    .recommendation__title {

        font-size: 22px;

    }



    .recommendation__subtitle {

        font-size: 16px;

    }

    .recommendation__footnote {
        display: block;
        background: #00DAF9F2;
        padding: 8px 16px;
    }



    .recommendation__footnote p {

        font-size: 16px;

        line-height: 1.4;
        margin-bottom: 0;
        display: inline;
        background: transparent;
        padding: 0;

    }



    .recommendation__chart-wrapper {

        width: 250px;

        height: 250px;

    }



    .recommendation__chart-label {

        font-size: 22px;

    }



    .recommendation__chart-label svg {

        width: 25px;

    }



    .recommendation__chart-label--yes {

        transform: translateX(-35px);
        top: 35px;

    }



    .recommendation__chart-label--pelephone {

        transform: translateX(-35px);

    }



    .ethics {

        padding: 40px 15px;

        height: auto;

    }

    

    .ethics__container {

        padding: 0 15px;

    }



    .ethics__title {

        font-size: 32px;

    }



    .ethics__item {

        font-size: 16px;

        line-height: 1.5;

    }



    .ethics__item svg {

        margin-top: 12px;

    }



    .community-impact {

        padding: 40px 0;

    }

    

    .community-impact__container {

        padding: 0 15px;

    }



    .community-impact__title {

        font-size: 32px;

    }



    .community-impact__tabs-nav {

        flex-wrap: nowrap;

        justify-content: flex-start;

        overflow-x: auto;

        -ms-overflow-style: none; /* IE and Edge */

        scrollbar-width: none; /* Firefox */

        gap: 20px;

        padding: 0 15px;

        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 10px;
        padding: 0;
        overflow: unset;

    }

    

    .community-impact__tabs-nav::-webkit-scrollbar {

        display: none; /* Chrome, Safari, and Opera */

    }



    .community-impact__tab-link {

        padding-bottom: 20px;

        flex-shrink: 0;

        padding-inline: 0;

    }



    .community-impact__tab-link::after {

        min-width: 100%;

        height: 4px;

        bottom: -2px;

    }

    

    .community-impact__tab-link img {

        height: 30px;
        width: 100%;

    }



    .logo-combo {

        gap: 20px;
        gap: 4px;
        display: grid;
        grid-template-columns: 1fr 2fr;

    }



    .community-impact__item {

        font-size: 16px;

        line-height: 1.5;

        align-items: flex-start;

    }



    .community-impact__item svg {

        margin-top: 8px;

        transform: none;

    }



    .footer__main {

        height: 300px;

    }



    .footer__button-download {

        font-size: 16px;

        padding: 0 25px;

        height: 44px;

    }



    .footer__link-secondary {

        font-size: 16px;

        bottom: 20px;

    }



    .footer__logos img {

        height: 70px;

    }

    .community-impact__header {
        text-align: start;
    }

    .recommendation__charts-container {
        flex-direction: column;
        align-items: center;
        width: 250px;
        margin: 0 auto;
    }

}



/* ADD HTML SMOOTH SCROLL */

html {

    scroll-behavior: smooth;

}


.testimonial_inner_container{
    max-height: 100vh;
    overflow-y: scroll;
    direction: ltr;
}

.testimonial_inner_container > *{
    direction: rtl;
}





/* WebKit browsers (Chrome, Edge, Safari, Opera) */
.testimonial_inner_container::-webkit-scrollbar {
  width: 8px;               /* thin scrollbar */
}

.testimonial_inner_container::-webkit-scrollbar-track {
  background: #0069ff;      /* track uses your blue */
  border-radius: 0;
}

.testimonial_inner_container::-webkit-scrollbar-thumb {
  background: #ffffff;      /* minimal white thumb */
  border-radius: 0;
  min-height: 24px;
  border: none; /* keeps thumb distinct without extra visible border */
  background-clip: padding-box;
}

/* Thumb hover state: slight opacity change for feedback */
.testimonial_inner_container::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.9);
}

.hero:before{
    display: block;
    background: #0069ff;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    transition: 1.1s ease;
    opacity: 1;
}

.hero.loaded:before{
    opacity: 0;
}
.hero .swooshes{
    opacity: 0;
    transition: 1s;
    transition-delay: 1s;
}

.hero.loaded .swooshes{
    opacity: 1;
}


.hero__swoosh-1{
    pointer-events: none;
    right: 100px;
    height: 600px;
}

@media only screen and (max-width: 1650px){
    .hero__swoosh-1{
        right: -2%;
        height: 40vw;
        top: calc(40% - 16vw);
    }
}

@media only screen and (max-width: 768px){
    .hero__swoosh-1{
        right: 0;
        height: 55vw;
    }
}


@media (max-width: 768px) {
    .header {
        padding: 0;
        align-items: flex-start;
    }
    .nav__link,
    .header__lang-switcher a{
        font-size: 16px !important;
    }
    .header__lang-switcher{
        display: flex;
    }
    .header__group{
        align-items: flex-start;
    }
    .header__lang-switcher a{
        transform: translatey(3px);
    }
    .lang-switcher__link:last-child{
        font-size: 12px !important;
        transform: translatey(6px);
    }
}

.hero{
    z-index: 5;
}

#scrollToTopBtn{
    opacity: 1;
    visibility: visible;
    z-index: 99999;
    z-index: 4;
    right: 20px;
    bottom: 30px;
    left: unset;
}

/* ==========================================================================
   LTR (English Version) Overrides
   ========================================================================== */

/* * Эти стили применяются только для `dir="ltr"` (английская версия).
 * Они переопределяют RTL-специфичные правила, такие как text-align,
 * позиционирование (left/right) и отступы (padding/margin).
*/

/* --- General & Animations --- */
[dir="ltr"] [data-aos="grow-width"] {
    /* Анимация роста появляется слева */
    transform-origin: left;
}

/* --- Header & Hero Section --- */
[dir="ltr"] .hero__main-wrapper {
    padding-inline-start: 0;
    padding-left: 8vw; /* Отступ слева вместо справа */
}

[dir="ltr"] .hero__logos {
    margin-bottom: 0;
}

[dir="ltr"] .hero__main {
    text-align: left; /* Выравнивание текста по левому краю */
}

[dir="ltr"] .hero__swoosh-1 {
    right: auto; /* Сбрасываем позицию справа */
    left: -5vw;     /* Позиционируем слева */
}

[dir="ltr"] .nav__item--has-dropdown > a::after {
    margin-right: 0;
    margin-left: 8px; /* Шеврон справа от текста */
}

/* --- Testimonial Section --- */
[dir="ltr"] .testimonial__content {
    padding: 50px 0 50px 60px; /* Отступ слева */
    text-align: left;
    align-items: flex-start;
}

/* --- Company Stats --- */
[dir="ltr"] .company-stats__title {
    text-align: left;
}

[dir="ltr"] .stat-card {
    /* (top, right, bottom, left) */
    padding: 18px 26px 22px 18px; /* Меняем отступы справа и слева */
}

[dir="ltr"] .stat-card__logo {
    object-position: left top; /* Лого в левом верхнем углу */
}

/* --- Partners Section --- */
[dir="ltr"] .partners__item:not(:last-child)::after {
    left: auto;
    right: -18px; /* Разделитель справа */
}

@media (max-width: 992px) {
    [dir="ltr"] .partners__item:not(:last-child)::after {
        left: auto;
        right: -12px;
    }
}

[dir="ltr"] .testimonial__title {
    max-width: 100%;
}

[dir="ltr"] .company-stats__swoosh {
    left: unset;
    right: -5vw;
    transform: scaleX(-1);
}

@media (max-width: 992px) {
    [dir="ltr"] .company-stats__swoosh {
        right: -10vw;
        left: unset;
    }
}

/* --- Charts & Stats Combo --- */
[dir="ltr"] .charts__content {
    text-align: left;
}

[dir="ltr"] .stats-combo__column--water {
    padding-inline-end: 0;
    padding-right: 40px; /* Отступ справа */
}

[dir="ltr"] .stats-combo__image {
    margin-inline-start: 0;
    margin-left: auto; /* Картинка прижимается вправо */
}

/* --- Safety Section --- */
[dir="ltr"] .safety__text-content {
    text-align: left;
}

[dir="ltr"] .safety__chart-wrapper {
    direction: ltr; /* Убеждаемся, что график рендерится слева направо */
}

/* --- Cybersecurity Section --- */
[dir="ltr"] .cybersecurity__column--scroll {
    /* (top, right, bottom, left) */
    padding: 16px 20px 16px 40px;
}

[dir="ltr"] .cybersecurity__block-header svg {
    object-position: left;
}

[dir="ltr"] .cybersecurity__list-item {
    gap: 15px; /* Немного увеличим разрыв для LTR */
}

[dir="ltr"] .cybersecurity__list-item svg {
    margin-top: 14px; /* Коррекция для выравнивания галочки */
    transform: none;
}

/* --- Ethics Section --- */
[dir="ltr"] .ethics__column--title {
    text-align: left;
}

[dir="ltr"] .ethics__list {
    text-align: left;
}

[dir="ltr"] .charts__title {
    max-width: 400px;
}

[dir="ltr"] .stats-combo__arrow img,
[dir="ltr"] .diversity__arrow img {
    transform: scaleX(-1);
}

[dir="ltr"] .recommendation__chart-label {
    direction: rtl;
}

/* --- Community Impact Section --- */
@media (max-width: 768px) {
    [dir="ltr"] .community-impact__header {
        text-align: left;
    }
}

/* --- Scrollbar fix for Testimonial --- */
/* Возвращаем стандартное поведение скроллбара для LTR */
[dir="ltr"] .testimonial_inner_container {
    direction: rtl;
}

[dir="ltr"] .testimonial_inner_container > * {
    direction: ltr;
}

/* --- Media Query Adjustments --- */
@media only screen and (max-width: 1650px) {
    [dir="ltr"] .hero__swoosh-1 {
        left: -10vw;
        right: auto;
    }
}

@media (max-width: 992px) {
    [dir="ltr"] .testimonial__content {
        align-items: center; /* Центрируем контент на планшетах */
        text-align: center;
        padding: 40px;
    }
}

@media (max-width: 768px) {
    [dir="ltr"] .hero__main-wrapper {
        padding-left: 0; /* Убираем отступ на мобильных */
    }

    [dir="ltr"] .hero__swoosh-mobile {
        padding-inline-end: 12%;
        padding-inline-start: 0;
    }
}

[dir="ltr"] .footer__logos img {
    height: 40px;
    margin: 30px 0;
}