.services__head__block {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-height: 700px;
    height: 100%;
    padding-top: 84px;
    padding-bottom: 84px;
}

.services__head__block__title {
    font-weight: 500;
font-size: 70px;
line-height: 104%;
color: #fff;
padding-bottom: 15px;
margin: 0;
max-width: 701px;
}

.services__head__block__subtitle {
    font-weight: 500;
font-size: 20px;
color: #fff;
padding-bottom: 30px;
margin: 0;
max-width: 701px;
}

.services__head__block__text {
    font-weight: 500;
font-size: 18px;
line-height: 128%;
color: #fff;
padding-bottom: 30px;
margin: 0;
max-width: 850px;
}

.breadcrumbs {
    padding-bottom: 10px;
font-weight: 600;
font-size: 20px;
color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.breadcrumbs a {
font-weight: 600;
font-size: 20px;
color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs span {
    color: #fff;
}

.features__section__block {
    padding: 40px 0px 30px;
    background: #0a0a0a;
}

.features__section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.img__fluid__services {

    width: 100%;
    height: 400px;
    object-fit: cover;
}

.features__section__block__h2 {
    font-size: 35px;
    font-weight: bold;
    padding-bottom: 0px;
    text-align: center;
    color: #fff;
}

.features__section__block__p {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 20px;
    text-align: center;
    color: #fff;
    padding-bottom: 30px;
}

.features-box-title a p {
        padding-top: 15px;
    font-size: 15px;
    text-transform: capitalize;
    line-height: 140%;
}

@media (max-width: 580px) {
    .features__section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.features__section__block {
    padding: 0px 0px 0px;
    background: #0a0a0a;
}
}

.how__it__work {
    padding: 0px 0px;
    background: #0a0a0a;
}

/* Общие стили для секции */
.how-projects-work {
  background-color: #121212; /* Темный фон всей секции */
  color: #fff;
  padding: 80px 0;
  font-family: Arial, sans-serif; /* Или твой шрифт */
}

/* Сетки для блоков */
.projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Отступ между блоками */
  justify-content: center; /* Центрируем, если блоков меньше 4-х */
}

/* Сам элемент. Скругление углов задаем здесь, чтобы все внутри скруглялось */
.project-item {
  flex: 1 1 calc(25% - 30px); /* 4 блока в ряд на десктопе */
  min-width: 250px; /* Минимальная ширина, чтобы не схлопывались на планшете */
  max-width: 369px; /* Максимальная ширина как в макете */
  border-radius: 20px; /* Скругление углов блока */
  overflow: hidden; /* Скрывает все, что выходит за пределы (например, оверлей) */
}

/* Внутренняя обертка, чтобы все позиционировалось правильно */
.project-item-inner {
  position: relative; /* Чтобы оверлей позиционировался относительно этого блока */
  height: 100%;
}

/* Стили для картинки */
.project-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* ЧЕРНЫЙ ОВЕРЛЕЙ с текстом (скрыт по умолчанию) */
.project-overlay {
  position: absolute;
  bottom: -100px; /* Сдвинут вниз, чтобы появляться */
  left: 0;
  width: 100%;
  height: 60%; /* Высота оверлея - половина блока */
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.85); /* Полупрозрачный черный */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Текст по центру оверлея */
  text-align: left;
  
  opacity: 0; /* Прозрачен по умолчанию */
  transition: all 0.5s ease-in-out; /* Плавный переход для ВСЕХ свойств */
  z-index: 2; /* Поверх картинки */
}

/* --- МАГИЯ НАВЕДЕНИЯ --- */

/* При наведении на весь блок */
.project-item:hover .project-overlay {
  bottom: 0; /* Возвращаем оверлей на место */
  opacity: 1; /* Делаем его видимым */
}

/* Заголовок и описание внутри оверлея */
.project-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
  line-height: 1.3;
  color: #fff;
}

.project-description {
  font-size: 14px;
  line-height: 1.5;
  color: #ccc;
  margin: 0;
}

/* --- АДАПТИВНОСТЬ --- */

/* На планшетах (меньше 1024px) - 2 блока в ряд */
@media (max-width: 1024px) {
  .project-item {
    flex: 1 1 calc(50% - 30px);
  }
}

/* На телефонах (меньше 768px) - 1 блок в ряд */
@media (max-width: 768px) {
  .how-projects-work {
    padding: 50px 0;
  }
  .section-title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .projects-grid {
    gap: 20px;
  }
  .project-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Стили для главного контейнера блока */
        .benefits-container {
            display: flex; /* Располагаем фото и текст в ряд */
            background-color: #ffffff;
            width: 80%; /* Или любая другая ширина */
            max-width: 1000px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden; /* Чтобы скруглить углы и у фото */
        }

        /* Стили для блока с изображением (левая часть) */
        .image-block {
            flex: 1; /* Занимает половину места (или пропорционально) */
            display: flex;
        }

        .image-block img {
            width: 100%; /* Растягиваем фото по ширине контейнера */
            height: auto; /* АВТО-ВЫСОТА: фото подстроится под контент справа */
            object-fit: cover; /* Сохраняет пропорции, обрезая лишнее, если нужно */
            display: block; /* Убирает отступ снизу у img */
        }

        /* Стили для блока с текстом (правая часть) */
        .text-block {
            flex: 1; /* Занимает вторую половину места */
            padding: 40px; /* Отступы внутри текстового блока */
            display: flex;
            flex-direction: column; /* Текст в колонку */
            justify-content: center; /* Центрируем текст по вертикали */
        }

        .label {
            text-transform: uppercase;
            color: #888;
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .title {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .description {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
        }

        /* Адаптивность для мобильных устройств */
        @media (max-width: 768px) {
            .benefits-container {
                flex-direction: column; /* На телефонах - один под другим */
            }

            .image-block {
                order: 1; /* Фото сверху */
            }

            .text-block {
                order: 2; /* Текст снизу */
                padding: 20px;
            }
        }

.choose__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

.choose__img {
        max-width: 500px;
    width: 100%;
    border-radius: 20px;
    height: auto;
}

.choose__grid__preim {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.choose__grid__preim div img {
    max-width: 100px;
}

.choose__grid__preim__h3 {
    color: #fff;
    font-size: 21px;
        padding-top: 10px;
}

.why__choose__block {
    padding: 80px 0px;
    background: #0a0a0a;
}

@media (max-width: 580px) {
    .choose__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: center;
    }

    .choose__grid__preim {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .choose__grid__preim {
        margin: 0 auto;
        text-align: center;
    }

    .services__head__block {
    width: 100%;
    max-height: 100%;
    height: 100%;
    padding-top: 84px;
    padding-bottom: 84px;
}

.services__head__block__title {
    font-weight: 500;
    font-size: 45px;
    line-height: 104%;
    color: #fff;
    padding-bottom: 15px;
    margin: 0;
    max-width: 701px;
}

.services__head__block__subtitle {
    font-weight: 500;
    font-size: 17px;
    color: #fff;
    padding-bottom: 30px;
    margin: 0;
    max-width: 701px;
    line-height: 150%;
}

.services__head__block__text {
    font-weight: 500;
    font-size: 16px;
    line-height: 128%;
    color: #fff;
    padding-bottom: 30px;
    margin: 0;
    max-width: 850px;
}

.features__section__block__h2 {
    font-size: 35px;
    font-weight: bold;
    padding-bottom: 0px;
    text-align: center;
    color: #fff;
    padding-top: 30px;
}

.why__choose__block {
    padding: 40px 0px;
    background: #0a0a0a;
}
}

.services__area {
    padding: 40px 0px;
    background: #0a0a0a;
}

.services__area {
    padding: 20px;
    background-color: #fff;
}

.services__area p {
    color: #080808;
    text-align: center;
}

.services__area__block__h2 {
    font-size: 35px;
    font-weight: bold;
    padding-bottom: 0px;
    margin: 0;
    text-align: center;
    color: #080808;
}