.elementor-865 .elementor-element.elementor-element-1c9b171{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--justify-content:space-between;--align-items:center;--background-transition:0.3s;--overlay-opacity:0.7;--padding-block-start:140px;--padding-block-end:70px;--padding-inline-start:20px;--padding-inline-end:20px;}.elementor-865 .elementor-element.elementor-element-1c9b171:not(.elementor-motion-effects-element-type-background), .elementor-865 .elementor-element.elementor-element-1c9b171 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://aidetics.com/wp-content/uploads/2023/11/045947046fabe13f251a473a9df94e6734622724.webp");background-position:center center;background-size:cover;}.elementor-865 .elementor-element.elementor-element-1c9b171::before, .elementor-865 .elementor-element.elementor-element-1c9b171 > .elementor-background-video-container::before, .elementor-865 .elementor-element.elementor-element-1c9b171 > .e-con-inner > .elementor-background-video-container::before, .elementor-865 .elementor-element.elementor-element-1c9b171 > .elementor-background-slideshow::before, .elementor-865 .elementor-element.elementor-element-1c9b171 > .e-con-inner > .elementor-background-slideshow::before, .elementor-865 .elementor-element.elementor-element-1c9b171 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';background-color:var( --e-global-color-text );}.elementor-865 .elementor-element.elementor-element-1c9b171, .elementor-865 .elementor-element.elementor-element-1c9b171::before{--border-transition:0.3s;}.elementor-865 .elementor-element.elementor-element-4fcd0ac .elementor-heading-title{color:var( --e-global-color-0e267df );font-family:"Nunito Sans", Sans-serif;font-size:30px;font-weight:600;text-transform:uppercase;}.elementor-865 .elementor-element.elementor-element-8635e6f{color:var( --e-global-color-0e267df );font-family:"Nunito Sans", Sans-serif;font-size:20px;font-weight:400;}.elementor-865 .elementor-element.elementor-element-eee7e50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--padding-block-start:70px;--padding-block-end:70px;--padding-inline-start:20px;--padding-inline-end:20px;}@media(max-width:1024px){.elementor-865 .elementor-element.elementor-element-1c9b171{--padding-block-start:120px;--padding-block-end:70px;--padding-inline-start:20px;--padding-inline-end:20px;}.elementor-865 .elementor-element.elementor-element-4fcd0ac{text-align:center;}.elementor-865 .elementor-element.elementor-element-4fcd0ac .elementor-heading-title{font-size:30px;}.elementor-865 .elementor-element.elementor-element-8635e6f{font-size:16px;}.elementor-865 .elementor-element.elementor-element-eee7e50{--padding-block-start:50px;--padding-block-end:50px;--padding-inline-start:20px;--padding-inline-end:20px;}}@media(max-width:767px){.elementor-865 .elementor-element.elementor-element-1c9b171{--padding-block-start:120px;--padding-block-end:30px;--padding-inline-start:20px;--padding-inline-end:20px;}.elementor-865 .elementor-element.elementor-element-4fcd0ac{text-align:center;}.elementor-865 .elementor-element.elementor-element-4fcd0ac .elementor-heading-title{font-size:25px;}}/* Start custom CSS for container, class: .elementor-element-1c9b171 */.elementor-865 .elementor-element.elementor-element-1c9b171 {
    filter: grayscale(100%);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-7233ab8 *//* Стили для сетки категорий */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 карточки в строке для десктопа */
    gap: 20px; /* Расстояние между карточками */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Общие стили для карточки категории */
.category-card {
    display: block; /* Убедимся, что карточка категорий будет блочной */
    width: 100% !important; /* Карточки занимают всю доступную ширину */
    text-align: center;
    border: 1px solid #ddd; /* Легкая рамка для карточки */
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Учитываем padding и border в общей ширине */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* При наведении карточка немного увеличивается */
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Стили для изображения категории */
.category-card .category-image {
    width: 100%;
    height: 250px; /* Высота изображений для десктопов */
    background-size: cover;
    background-position: center;
    filter: grayscale(100%); /* Черно-белая картинка по умолчанию */
    transition: filter 0.3s ease; /* Плавное изменение фильтра */
    border-radius: 8px;
}

/* При наведении картинка становится цветной */
.category-card .category-image:hover {
    filter: grayscale(0%);
}

/* Стили для заголовков категорий */
.category-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
    color: #333;
}

/* Стили для ссылки на категорию */
.category-card a {
    text-decoration: none;
    color: inherit;
}

/* Стили для сетки записей */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 карточки в строке для десктопа */
    gap: 20px; /* Расстояние между карточками */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    clear: both; /* Убираем конфликт с предыдущими блоками */
}

/* Общие стили для карточки записи */
.post-card {
    display: block; /* Убедимся, что карточка записей будет блочной */
    width: 100% !important; /* Карточки занимают всю доступную ширину */
    text-align: center;
    border: 1px solid #ddd; /* Легкая рамка для карточки */
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Учитываем padding и border в общей ширине */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* При наведении карточка немного увеличивается */
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Стили для изображения записи */
.post-card .post-image {
    width: 100%;
    height: 250px; /* Высота изображений для десктопов */
    background-size: cover;
    background-position: center;
    filter: grayscale(100%); /* Черно-белая картинка по умолчанию */
    transition: filter 0.3s ease; /* Плавное изменение фильтра */
    border-radius: 8px;
}

/* При наведении картинка становится цветной */
.post-card .post-image:hover {
    filter: grayscale(0%);
}

/* Стили для заголовков записей */
.post-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
    color: #333;
}

/* Стили для ссылки на запись */
.post-card a {
    text-decoration: none;
    color: inherit;
}

/* Адаптивность для планшетов (до 1024px) */
@media (max-width: 1024px) {
    .category-card h3,
    .post-card h3 {
        font-size: 14px; /* Уменьшаем размер шрифта на планшетах */
    }

    .category-card .category-image,
    .post-card .post-image {
        height: 150px; /* Уменьшаем высоту изображений на планшетах */
    }

    /* Сетка для карточек на планшетах: 2 карточки в строке */
    .categories-grid,
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding:0;
    }
}

/* Адаптивность для мобильных (до 768px) */
@media (max-width: 768px) {
    .category-card h3,
    .post-card h3 {
        font-size: 14px; /* Уменьшаем размер шрифта на мобильных */
    }

    .category-card .category-image,
    .post-card .post-image {
        height: 100px; /* Уменьшаем высоту изображений на мобильных */
    }

    /* Сетка для карточек на мобильных: 1 карточка в строке */
    .categories-grid,
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);;
        gap: 10px;
    }
}/* End custom CSS */