/*
Theme Name: nord-service
Theme URI: https://nord-service.com/
Author: Konstantin Merzlyakov
Author URI: https://argent.ru
Description: Oil Services Company
Version: 1.0
*/

/* Подключение шрифта Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Общие стили */
body {
    font-family: 'Montserrat', sans-serif;
}

/* Header Styles */
.site-header {
    background: linear-gradient(70deg, #1a0e4c 0%, #1a114d 20%, #1d2d67 40%, #223c83 60%, #2566b4 80%, #223c83 100%) !important;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    position: relative;
}
.header-container {
    width: 100%;
    max-width: 1500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo img {
    height: 50px;
}
.nav-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 20px;
}
.main-menu .menu {
    display: flex;
    list-style: none;
    color: #ffffff;
}
.main-menu .menu li {
    margin: 0 10px;
    position: relative;
}
.main-menu .menu li a {
    color: #ffffff;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
}
.main-menu .menu li a.active, .main-menu .menu li.current-menu-item a {
    border-bottom: 2px solid #ffffff;
    font-weight: 700;
}
.main-menu .menu li ul {
    display: none;
    position: absolute;
    background: rgba(26, 14, 76, 0.95); /* Прозрачный фон */
    padding: 10px;
    list-style: none;
    margin-top: 10px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.main-menu .menu li:hover ul {
    display: block;
    opacity: 1;
}
.main-menu .menu li ul li {
    margin-bottom: 20px;
}
.main-menu .menu li ul li a {
    display: block;
    padding: 5px 0;
    text-align: center;
}
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header-icons a {
    color: #ffffff;
    position: relative;
}
.header-icons a img {
    width: 20px;
    height: 20px;
}
/* Полупрозрачный фон при наведении на пункты меню с границами и круглыми углами */
.main-menu .menu li a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0;
    border-radius: 20px;
    transition: opacity 0.3s;
}
.main-menu .menu li:hover > a::before {
    opacity: 1;
}

/* Полупрозрачный фон для элементов в правой части меню */
.header-icons a::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0;
    border-radius: 20px;
    transition: opacity 0.3s;
}
.header-icons a:hover::before {
    opacity: 1;
}

/* Стили для контейнера гамбургера */
.hamburger-container {
    width: 40px;
    display: flex;
    justify-content: center;
}

/* Стили для гамбургера в CSS */
.hamburger-menu {
    position: relative;
    width: 26px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: width 0.3s;
    background: none !important; /* Убираем любые фоны */
    box-shadow: none !important; /* Убираем любые тени */
}
.hamburger-menu span {
    display: block;
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    position: relative;
}
.hamburger-menu span::before,
.hamburger-menu span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    left: 0;
}
.hamburger-menu span::before {
    top: -8px;
}
.hamburger-menu span::after {
    bottom: -8px;
}
.hamburger-menu:hover {
    width: 30px;
}

/* Стили для контейнера поиска */
.search-container {
    display: none; /* Скрываем контейнер поиска при загрузке страницы */
    position: absolute;
    top: 100%; /* Привязка к нижнему краю верхнего меню */
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 1500px;
    background: #f2f2f2;
    height: 49px;
    z-index: 10000;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-container form {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.search-container input[type="search"] {
    width: 80%;
    height: 30px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin-right: 10px;
    box-sizing: border-box;
}
.search-container button {
    background: #ffffff;
    color: #1a0e4c;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    height: 30px;
    box-sizing: border-box;
}
.search-container button:hover {
    background: #cccccc;
}

/* Стили для кнопки закрытия блока поиска */
.search-container .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffffff;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.search-container .close-btn:hover {
    background: #cccccc;
}

/* Стационарные стили */
@media (min-width: 769px) {
    .header-container {
        display: flex;
        justify-content: space-between; /* Разделяем логотип и правый блок */
        align-items: center;
    }
    .logo {
        order: 1;
    }
    .nav-container {
        order: 2;
        display: flex; /* Восстанавливаем навигацию */
    }
    .hamburger-container {
        display: none; /* Скрываем гамбургер в стационарной версии */
    }
    .header-icons {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        order: 3;
    }
    .header-icons .language-switcher,
    .header-icons .search-icon {
        display: inline-block; /* Показываем переключатели языка и поиск */
    }

    .main-menu .menu li ul {
        display: none;
        position: absolute;
        background: radial-gradient(circle at top left, #386caa, transparent 30%), /* Первая радиальная заливка */
                    radial-gradient(circle at bottom right, #8c2d56, transparent 30%), /* Вторая радиальная заливка */
                    #2e3586; /* Основной цвет фона */
        padding: 10px;
        list-style: none;
        margin-top: 10px;
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
        max-height: 0;
        overflow: hidden;
    }

    .main-menu .menu li:hover ul {
        display: block;
        opacity: 1;
        max-height: 500px; /* Устанавливаем максимальную высоту для подменю */
    }

    .main-menu .menu li ul li {
        margin-bottom: 20px;
    }

    .main-menu .menu li ul li a {
        display: block;
        padding: 5px 0;
        text-align: center;
    }
}

/* Мобильные стили */
@media (max-width: 768px) {
    .site-header {
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo img {
        height: 40px; /* Еще уменьшаем размер логотипа */
    }

    .nav-container {
        display: none; /* Скрываем навигацию по умолчанию */
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Плавный переход для высоты и прозрачности */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        position: absolute;
        top: 100%; /* Размещаем подменю под верхним меню */
        width: 100%;
        background: radial-gradient(circle at top left, #386caa, transparent 30%), /* Первая радиальная заливка */
                    radial-gradient(circle at bottom right, #8c2d56, transparent 30%), /* Вторая радиальная заливка */
                    #2e3586; /* Основной цвет фона */
        z-index: 1000;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Добавляем границу сверху */
        padding: 20px; /* Добавляем отступы для контента */
    }

    .nav-container.active {
        display: flex; /* Показываем навигацию при активации гамбургер-меню */
        max-height: 500px; /* Устанавливаем максимальную высоту */
        opacity: 1;
    }

    .hamburger-container {
        width: 40px;
        display: flex;
        justify-content: center;
        z-index: 1001; /* Добавляем z-index */
    }

    .hamburger-menu {
        position: relative;
        width: 26px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: width 0.3s;
        background: none !important; /* Убираем любые фоны */
        box-shadow: none !important; /* Убираем любые тени */
        z-index: 1002; /* Добавляем z-index */
    }
    .hamburger-menu span {
        display: block;
        width: 26px;
        height: 2px;
        background-color: #ffffff;
        position: relative;
    }
    .hamburger-menu span::before,
    .hamburger-menu span::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        left: 0;
    }
    .hamburger-menu span::before {
        top: -8px;
    }
    .hamburger-menu span::after {
        bottom: -8px;
    }
    .hamburger-menu:hover {
        width: 30px;
    }

    .main-menu .menu {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .main-menu .menu li {
        margin: 10px 0;
    }

    .main-menu .menu li ul {
        display: none; /* Скрываем подменю по умолчанию */
        opacity: 0; /* Скрываем подменю */
        transition: opacity 0.5s ease, max-height 0.5s ease; /* Добавляем плавность открытия */
        max-height: 0; /* По умолчанию скрываем */
        overflow: hidden; /* Убираем лишние элементы */
    }

    .main-menu .menu li.active ul {
        display: block; /* Показываем подменю при активации */
        opacity: 1; /* Плавное проявление */
        max-height: 200px; /* Раскрываем */
        width: 100%;
    }

    .main-menu .menu li ul li {
        margin: 10px 0;
    }

    .main-menu .menu li ul li a {
        text-align: left;
    }

    .header-icons {
        display: flex;
        justify-content: center;
        gap: 20px;
        z-index: 1003; /* Добавляем z-index */
    }

    .header-icons .language-switcher {
        color: #ffffff;
        cursor: pointer;
        text-align: center;
        position: relative;
        z-index: 1004; /* Добавляем z-index */
    }

    .header-icons .language-switcher::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        background-color: rgba(255, 255, 255, 0.1);
        opacity: 0;
        border-radius: 20px;
        transition: opacity 0.3s;
    }

    .header-icons .language-switcher:hover::before {
        opacity: 1;
    }
}

/* Видео-слайдер */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Контейнер для видео-слайдера */
.video-slider {
    position: relative;
    width: 100%; /* Ширина видеослайдера 100% */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Центрирование по вертикали */
    align-items: center; /* Центрирование по горизонтали */
    text-align: left; /* Привязка текста к левому краю */
}

/* Заголовок видеослайдера */
.headline, h1.headline {
    font-size: 60pt; /* Размер шрифта заголовка */
    color: #ffffff;
    animation: fadeIn 1.2s ease-in-out forwards; /* Анимация появления */
    margin-bottom: 40px; /* Отступ снизу для разделения с инфоблоками */
    position: relative;
    z-index: 10; /* Устанавливаем z-index для отображения поверх */
    white-space: nowrap; /* Заголовок в одну строку */
    text-align: center; /* Центрирование заголовка */
}

/* Анимация появления */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Контейнер-обёртка для центрирования */
.info-block-wrapper {
    display: flex;
    justify-content: center; /* Центрирование внутреннего контейнера */
    width: 100%;
}

/* Контейнер для текстово-графических блоков (ТГБ) */
.info-blocks {
    max-width: 90%; /* Максимальная ширина блока - 90% */
    width: 100%;
    margin: 0 auto; /* Центрирование контейнера */
    display: flex;
    justify-content: space-between; /* Разделяем инфоблоки */
    flex-wrap: wrap; /* Разрешаем перенос на новую строку */
    box-sizing: border-box;
    gap: 1.1rem; /* Расстояние между блоками */
    align-items: center; /* Центрирование по вертикали */
}

/* Инфоблок */
.info-block {
    flex: 1 1 calc(33.333% - 1rem); /* Три блока в ряд с учетом отступов */
    height: 0;
    padding-bottom: 100%; /* Высота инфоблока равна ширине */
    background-color: rgba(255, 255, 255, 0.2); /* Прозрачность фона */
    border-radius: 10px; /* Скругление углов */
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Прозрачность тени */
    overflow: hidden;
    opacity: 1; /* Виден */
    backdrop-filter: blur(10px); /* Эффект размытия фона */
    -webkit-backdrop-filter: blur(10px); /* Поддержка для Safari */
    transition: transform 0.7s, opacity 0.7s; /* Плавный переход для видимости */
    display: flex; /* Добавляем flexbox */
    align-items: flex-start; /* Вертикальное выравнивание содержимого */
    justify-content: flex-start; /* Горизонтальное выравнивание содержимого */
    padding: 30px; /* Внутренние отступы 30px */
}

/* Внутреннее содержимое инфоблока */
.info-block-content {
    box-sizing: border-box;
    font-size: 1.2rem;
    color: #2e3586;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; /* Установим ширину в 100% */
    height: 100%; /* Установим высоту в 100% */
}

/* Дополнительное расстояние между верхней строкой "Более" и H2 */
.info-block h2 {
    font-size: 48pt; /* Размер текста для цифр */
    color: #ffffff; /* Цвет текста белый */
    font-weight: bold; /* Жирность текста */
    margin: 0 0 10px 0; /* Отступ снизу для разделения с основным текстом */
}

.info-block p {
    font-size: 1.7rem; /* Размер текста */
    margin: 5px 0; /* Отступы вокруг текста */
}

.info-block .spacer {
    opacity: 0; /* Прозрачность символа _ */
}

.info-block:hover {
    transform: scale(1.05);
}

/* Анимации инфоблоков */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.info-block:nth-child(1) {
    animation: fadeIn 1s ease-in-out 0.2s forwards;
}

.info-block:nth-child(2) {
    animation: fadeIn 1s ease-in-out 0.4s forwards;
}

.info-block:nth-child(3) {
    animation: fadeIn 1s ease-in-out 0.6s forwards;
}

.info-block:nth-child(4) {
    animation: fadeIn 1s ease-in-out 0.8s forwards;
}

.info-block:nth-child(5) {
    animation: fadeIn 1s ease-in-out 1s forwards;
}

@media (max-width: 1920px) and (max-height: 1080px) {
    .h1 {
        font-size: 80pt; /* Уменьшаем размер текста для цифр */
    }
}

@media (max-width: 1366px) and (max-height: 768px) {
    .info-block h2 {
        font-size: 35pt; /* Уменьшаем размер текста для цифр */
    }

    .info-block p {
        font-size: 1.2rem; /* Уменьшаем размер текста */
    }
}

@media (min-width: 1024px) {
    .headline, h1.headline {
        font-size: 4rem; /* Увеличиваем размер шрифта заголовка */
    }

    .info-block {
        flex: 1 1 calc(33.333% - 1rem); /* Гибкая ширина инфоблока */
        padding-bottom: 100%; /* Высота инфоблока равна ширине */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .headline, h1.headline {
        font-size: 3rem; /* Размер шрифта заголовка */
    }

    .info-block {
        flex: 1 1 calc(45% - 1rem); /* Гибкая ширина инфоблока */
        padding-bottom: 100%; /* Высота инфоблока равна ширине */
    }
}

@media (max-width: 768px) {
    .headline, h1.headline {
        font-size: 2rem; /* Уменьшаем размер шрифта заголовка */
    }

    .info-block {
        flex: 1 1 calc(100% - 1rem); /* Полная ширина инфоблока */
        padding-bottom: 100%; /* Высота инфоблока равна ширине */
    }
}

/* О компании на главной */
.about-company {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 50px 15px;
}

.about-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-column {
    width: 48%;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .about-column {
        width: 100%;
    }
}

/* Стили для footer */
.site-footer {
    position: relative;
    background: #2e3586; /* Основной цвет фона */
    background: radial-gradient(circle at top left, #386caa, transparent 30%), /* Первая радиальная заливка */
                radial-gradient(circle at bottom right, #8c2d56, transparent 30%), /* Вторая радиальная заливка */
                #2e3586; /* Основной цвет фона */
    color: #ffffff;
    padding: 60px 0; /* Одинаковое расстояние сверху и снизу */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-container {
    width: 100%;
    max-width: 1500px; /* Ширина блока 1500 px */
    display: flex;
    justify-content: space-between; /* Центрирование контейнеров */
    align-items: flex-start; /* Выровняем по верхнему краю */
    padding: 0 20px;
}
.footer-info-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Выровняем по нижнему краю */
    padding-bottom: 50px; /* Увеличиваем расстояние до разделительной линии */
    position: relative;
}
.footer-logo-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Выровняем по верхнему краю */
    height: 100%;
    position: relative;
    padding-bottom: 50px; /* Увеличиваем расстояние до разделительной линии */
}
.footer-column {
    flex: 1;
    margin: 0 20px;
    text-align: left; /* Левосторонний текст */
}
.footer-logo img {
    height: 50px; /* Размер логотипа такой же, как в шапке */
    margin: 0 auto 100px; /* Центрирование логотипа и отступ до слогана */
}
.footer-logo-text {
    font-size: 24pt;
    font-weight: bold;
    text-align: left;
    line-height: 1.2; /* Уменьшенное межстрочное расстояние */
}
.footer-privacy-policy {
    margin-top: auto;
    margin-bottom: 0; /* Убираем нижний отступ */
    text-align: left; /* Выровняем текст по левому краю */
    position: absolute;
    bottom: 10px; /* Добавляем отступ от разделительной линии */
    left: 0; /* Привязка к левому краю */
    padding-left: 20px; /* Внутренний отступ слева */
}
.footer-privacy-policy a {
    color: #ffffff; /* Сделаем ссылку белого цвета */
    text-decoration: none;
}
.footer-privacy-policy a:hover {
    text-decoration: underline;
}
.footer-column h4 {
    margin-bottom: 20px; /* Увеличиваем расстояние между заголовком и текстом */
    font-size: 16pt; /* Размер заголовка */
}
.footer-section {
    margin-bottom: 30px; /* Увеличиваем расстояние между блоками */
}
.footer-column ul {
    list-style: none;
    padding: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
    font-size: 16pt; /* Размер шрифта в колонке */
}
.footer-column ul li a {
    color: #ffffff;
    text-decoration: none;
}
.footer-column ul li a:hover {
    text-decoration: underline;
}
.footer-phone {
    font-size: 18pt;
    font-weight: bold;
    margin-bottom: 10px;
}
.footer-email {
    font-size: 14pt;
    margin-bottom: 20px;
}
.footer-address {
    font-size: 14pt; /* Размер шрифта в третьем блоке */
    line-height: 1.5; /* Межстрочное расстояние */
    margin-bottom: 50px; /* Увеличенное расстояние до разделительной линии */
}
.footer-production-phone {
    font-size: 14pt; /* Размер шрифта в четвертой колонке */
    font-weight: bold;
    margin-bottom: 10px;
}
.footer-production-address {
    font-size: 14pt; /* Размер шрифта в четвертом блоке */
    line-height: 1.5; /* Межстрочное расстояние */
    margin-bottom: 50px; /* Увеличенное расстояние до разделительной линии */
}
.social-media {
    display: flex; /* Горизонтальное расположение иконок соцсетей */
    gap: 10px;
    margin-top: 30px; /* Расстояние до иконок соцсетей */
}
.social-media a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Полупрозрачный круг */
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-media a:hover {
    background: rgba(255, 255, 255, 0.4); /* Изменение прозрачности при наведении */
}
.social-media a img {
    width: 24px; /* Размер иконок соцсетей */
    height: 24px;
}
.hidden {
    visibility: hidden; /* Делаем неактивные иконки невидимыми */
}
.footer-bottom {
    width: 100%; max-width: 1500px; /* Ширина блока 1500 px */
    text-align: center;
    padding: 50px 0; /* Расстояние до разделительной линии */
    border-top: 1px solid #cccccc; /* Горизонтальная линия */
    display: flex; /* Используем flex для выравнивания */
    justify-content: space-between; /* Разделяем на три части: копирайт слева, обработка персональных данных по центру и Аргент справа */
    align-items: center; /* Вертикальное выравнивание */
    position: relative;
}
.footer-bottom-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.footer-bottom-content p {
    margin: 0;
}
.footer-bottom a {
    color: #ffffff; /* Цвет текста белый */
    text-decoration: none;
    white-space: nowrap; /* Запрещаем перенос строк */
}
.footer-bottom a:hover {
    text-decoration: underline;
}
.privacy-link, .argent-link {
    color: #ffffff; /* Цвет текста белый */
    text-decoration: none;
}

.privacy-link:hover, .argent-link:hover {
    text-decoration: underline;
}

.footer-bottom-right .footer-brand img {
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
    content: '\25B6'; /* Знак "▶" */
}

/* Стили для пунктов меню в футере */
.footer-menu {
    list-style: none; /* Убираем маркеры списка */
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 10px; /* Отступы между пунктами */
    font-size: 12pt; /* Размер шрифта в колонке */
}

.footer-menu li a {
    color: #ffffff; /* Цвет текста белый */
    text-decoration: none; /* Убираем подчеркивание ссылок */
}

.footer-menu li a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}

.footer-menu li:nth-of-type(3),
.footer-menu li:nth-of-type(7),
.footer-menu li:nth-of-type(10) {
    margin-bottom: 40px; /* Добавляем 40px пространства между разделами */
}

/* Знак справа от Аргент.ру */
.footer-brand {
    position: relative; /* Для позиционирования фонового изображения */
    padding-right: 30px; /* Отступ справа для отображения знака */
    display: inline-block;
}

.footer-brand::after {
    content: '';
    position: absolute;
    top: 50%; /* Центрирование по вертикали */
    right: 0;
    transform: translateY(-50%);
    width: 20px; /* Ширина знака */
    height: 20px; /* Высота знака */
    background-image: url('/wp-content/uploads/2025/01/icon-argent.png');
    background-size: cover;
    background-repeat: no-repeat;
}