.elementor-5118 .elementor-element.elementor-element-e867314{--display:flex;}.elementor-widget-slides .elementor-slide-heading{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-slides .elementor-slide-description{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-slides .elementor-slide-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5118 .elementor-element.elementor-element-6697136 .elementor-repeater-item-605fdc8 .swiper-slide-bg{background-color:#00000000;background-image:url(https://uzkm.com.ua/wp-content/uploads/2025/07/dizajn-bez-nazvaniya-1.png);background-size:auto;}.elementor-5118 .elementor-element.elementor-element-6697136 .elementor-repeater-item-605fdc8 .elementor-background-overlay{background-color:#00000000;}.elementor-5118 .elementor-element.elementor-element-6697136 .elementor-repeater-item-605fdc8 .swiper-slide-inner .elementor-slide-heading{color:#FFFFFF;}.elementor-5118 .elementor-element.elementor-element-6697136 .elementor-repeater-item-605fdc8 .swiper-slide-inner .elementor-slide-description{color:#FFFFFF;}.elementor-5118 .elementor-element.elementor-element-6697136 .elementor-repeater-item-605fdc8 .swiper-slide-inner .elementor-slide-button{color:#FFFFFF;border-color:#FFFFFF;}.elementor-5118 .elementor-element.elementor-element-6697136 .elementor-repeater-item-e7a5f6b .swiper-slide-bg{background-color:var( --e-global-color-secondary );background-image:url(https://uzkm.com.ua/wp-content/uploads/2025/07/dizajn-bez-nazvaniya1.png);background-size:cover;}.elementor-5118 .elementor-element.elementor-element-6697136 .swiper-slide{transition-duration:calc(5000ms*1.2);height:700px;}.elementor-5118 .elementor-element.elementor-element-6697136 .swiper-slide-contents{max-width:100%;}.elementor-5118 .elementor-element.elementor-element-6697136 .swiper-slide-inner{text-align:center;}.elementor-5118 .elementor-element.elementor-element-9d6df59{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}@media(max-width:1024px){.elementor-5118 .elementor-element.elementor-element-9d6df59{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-5118 .elementor-element.elementor-element-9d6df59{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for slides, class: .elementor-element-6697136 */.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b44f418 *//* 1. Стиль для главного контейнера, который организует все карточки в сетку */
/* Примените класс 'main-vacancies-grid-container' к вашему основному контейнеру Elementor,
   который будет содержать все job-card-wrapper. */
.main-vacancies-grid-container {
    display: grid; /* Используем CSS Grid для создания сетки */
    
    /* Определяем колонки: 3 колонки, каждая адаптивная */
    /* minmax(280px, 1fr) означает: минимум 280px, максимум растягивается для заполнения */
    /* auto-fit: автоматически размещает столько колонок, сколько помещается в ширину родителя */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    
    gap: 20px; /* Отступы между ячейками сетки (между job-card-wrapper) */
    
    justify-content: center; /* Центрируем сетку по горизонтали, если она не заполняет всю ширину */
    padding: 20px; /* Отступ вокруг всей сетки (от краев страницы/секции) */
    max-width: 1200px; /* Ограничиваем общую ширину сетки для лучшего вида на больших экранах */
    margin: 0 auto; /* Центрируем всю сетку на странице */
}

/* 2. Стиль для обертки каждой карточки (.job-card-wrapper) */
/* Этот контейнер выступает как ячейка сетки и обертывает .job-card.
   В данном случае, он может быть без стилей, так как сетка и карточка стилизованы отдельно. */
.job-card-wrapper {
    box-sizing: border-box; /* Важно для корректного расчета padding и width */
    /* Можете добавить border-radius или overflow: hidden, если хотите,
       чтобы тень или скругления job-card не "выползали" за границы wrapper */
}

/* 3. Стили для самой золотой карточки (.job-card) */
/* Примените класс 'job-card' к контейнеру Elementor, который является золотой карточкой */
.job-card {
    width: 100%; /* Карточка занимает всю доступную ширину внутри своего родителя (.job-card-wrapper) */
    height: 150px; /* Фиксированная высота карточки. Настройте это значение по необходимости. */
    padding: 20px; /* Внутренние отступы внутри золотой карточки */
    box-sizing: border-box; /* Важно для корректного расчета padding и width */
    
    /* Фоновый градиент: от светлого золота к темному */
    background: linear-gradient(135deg, #FFD700, #B8860B, #FFD700); /* Золотые оттенки */
    background-size: 200% 200%; /* Увеличиваем размер для анимации градиента */
    animation: goldGradientMove 10s ease infinite; /* Анимация перемещения градиента */

    /* Скругление углов карточки */
    border-radius: 10px;
    
    /* Тень для объема карточки */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

    /* Выравнивание содержимого (названия вакансии) внутри карточки с помощью Flexbox */
    display: flex; /* Делаем карточку флекс-контейнером */
    align-items: center; /* Центрируем содержимое по вертикали */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    text-align: center; /* Центрирование текста, если он многострочный */
}

/* Анимация для перемещения градиента */
@keyframes goldGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 4. Стили для названия вакансии внутри золотой карточки (.job-title) */
.job-card .job-title { 
    color: #FFFFFF; /* Белый цвет текста для контраста с золотом */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Легкая тень для читаемости */
    margin: 0; /* Убираем стандартные отступы у заголовка */
    font-size: 24px; /* Размер шрифта */
    font-weight: bold;
    line-height: 1.2; /* Межстрочный интервал для многострочных названий */
    /* word-break: break-word; /* Опционально: если названия очень длинные, чтобы не выходили за границы карточки */
}

/* ==================================== */
/* Медиа-запросы для адаптивности */
/* ==================================== */

/* Для планшетов: на экранах до 991px ширины */
@media (max-width: 991px) { 
    .main-vacancies-grid-container {
        /* minmax(250px, 1fr) позволит иметь 2 или 3 колонки, подстраиваясь под размер экрана */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 15px; /* Немного меньшие отступы на планшетах */
    }
    .job-card {
        height: 120px; /* Меньшая высота карточки */
    }
    .job-card .job-title {
        font-size: 22px; /* Меньший размер шрифта */
    }
}

/* Для мобильных: на экранах до 767px ширины (обычно одна колонка) */
@media (max-width: 767px) { 
    .main-vacancies-grid-container {
        grid-template-columns: 1fr; /* Одна колонка на всю ширину */
        padding: 15px; /* Меньший отступ вокруг сетки */
        gap: 15px; /* Меньшие отступы между карточками */
    }
    .job-card {
        height: 100px; /* Еще меньшая высота карточки */
    }
    .job-card .job-title {
        font-size: 20px; /* Еще меньший размер шрифта */
    }
}/* End custom CSS */