@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Ubuntu';
    src: url(../fonts/Ubuntu/Ubuntu-Regular.ttf);
}

@font-face {
    font-family: 'Ubuntu Medium';
    src: url(../fonts/Ubuntu/Ubuntu-Medium.ttf);
}

@font-face {
    font-family: 'Ubuntu Bold';
    src: url(../fonts/Ubuntu/Ubuntu-Bold.ttf);
}

@font-face {
    font-family: 'Ubuntu Italic';
    src: url(../fonts/Ubuntu/Ubuntu-Italic.ttf);
}

* {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}


nav {
    display: flex;
    height: 90px;
    background-color: #329691;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}


.m-auto {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    background-color: #FFFFFF;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.font-32 {
    font-family: 'Ubuntu';
    font-size: 32px;
    margin-left: -50px;
}

input {
    display: flex;
    height: 20px;
    border-radius: 40px;
    border: 1px solid black;
}

input[placeholder] {
    font-family: 'Ubuntu';
    font-size: 20px;
}

a {
    font-family: 'Ubuntu';
    font-size: 20px;
}

.site-index {
    display: flex; /* Делает его флекс-контейнером */
    flex-direction: column; /* Располагаем элементы вертикально */
    align-items: center; /* Центрируем внутри по горизонтали */
    padding: 20px;
    box-sizing: border-box;
}

/* Стили для блока competition */
.competition {
    display: flex;
    flex-direction: column;
    width: 100%; /* Занимает всю ширину контейнера */
    max-width: 1200px; /* Максимальная ширина для больших экранов */
    padding: 10px;
    border-radius: 8px;
    /* Можно добавить дополнительные стили для адаптивности */
}

.filters {
    display: flex;
    flex-wrap: nowrap; /* перенос элементов на новую строку при необходимости */
    gap: 10px; /* отступы между фильтрами */
    width: 100%;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .filters {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        font-size: 14px;
    }
}


.filter-block {
    flex: 0.32; /* Растягивается, чтобы заполнять доступное пространство */
    min-width: 150px; /* Минимальная ширина блока */
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
    border: 3px solid #329691;
}

.filter-block2 {
    flex: 0.32; /* Растягивается, чтобы заполнять доступное пространство */
    min-width: 150px; /* Минимальная ширина блока */
    padding: 10px;
    background-color: #FFFFFF;
    border-radius: 20px;
    box-sizing: border-box;
    border: 3px solid #329691;
}

.filter-block3 {
    flex: 0.32; /* Растягивается, чтобы заполнять доступное пространство */
    min-width: 150px; /* Минимальная ширина блока */
    padding: 10px;
    border-radius: 20px;
    box-sizing: border-box;
}

/* Заголовок в фильтрах */
h1.text-xl.font-semibold.mb-4 {
    font-size: 1.25rem; /* Размер текста */
    font-weight: 600;
    margin-bottom: 16px;
}

.competition-block {
    /* Можно добавить стили для содержимого внутри блока */
    display: flex;
    flex-direction: column;
    margin-top: 0px;
}

.competition-block h1 {
    font-family: 'Ubuntu';
    font-size: 40px;
    color: #244731;
}

.competition-block h2 {
    font-family: 'Ubuntu';
    font-size: 24px;
    color: #244731;
}

/* Заголовок внутри filter-block */
.filter-block h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #244731;
}

@media (max-width: 768px) {
    /* Меньшие экраны: можно уменьшить отступы или изменить стиль */
    .site-index {
        padding: 10px;
    }
    .competition {
        padding: 8px;
    }
    .filters {
        flex-direction: column; /* на маленьких экранах фильтры будут располагаться вертикально */
    }
    .filter-block  {
        width: 100%;
    }

    .competition-block  {
        width: 100%;
        margin-top: 30px;
    }
}

#slider {
    transition: transform 0.3s ease;
}

.slide {
    display: flex;
    align-items: center; /* по вертикали */
    justify-content: center; /* по горизонтали */
    background-color: #329691;
    border-radius: 0.5rem; /* радиус скругления */
    width: 100%; /* ширина на всю доступную ширину */
    max-width: 1000px; /* максимум 1000px */
    height: 600px; /* фиксированная высота, можно адаптировать */
    padding: 1rem; /* внутренние отступы для мобильных устройств */
    box-sizing: border-box; /* чтобы паддинги не увеличивали общий размер */
    background-image: url("../images/Конкурс.png");
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Адаптивные стили для устройств с меньшей шириной */
@media (max-width: 1024px) {
    .slide {
        height: 250px; /* меньшая высота для планшетов */
    }
}

@media (max-width: 768px) {
    .slide {
        height: auto; /* автоматическая высота для телефонов */
        padding: 0.5rem; /* уменьшение паддингов */
        border-radius: 0.3rem;
        flex-direction: column; /* при необходимости, чтобы контент шел вертикально */
    }

    /* Можно дополнительно стилизовать заголовок */
    .slide h1 {
        font-size: 1.5rem; /* уменьшить размер шрифта на мобильных */
        text-align: center; /* центрировать текст */
        margin: 0; /* убрать внешние отступы */
    }
}

.text-1xl {
    font-size: 1.5rem; /* Размер шрифта адаптируется под мобильные устройства */
}

@media (min-width: 768px) {
    .text-1xl {
        font-size: 1.8rem; /* Увеличиваем размер шрифта для больших экранов */
    }
}

.competitions {
    display: flex;
    flex-direction: column; /* Вертикальное расположение конкурсов по умолчанию */
    gap: 16px; /* Отступы между элементами */
    margin-top: -20px;
}

.competitions h1 {
    font-family: 'Ubuntu';
    font-size: 40px;
    color: #244731;
}

.competitions2 {
    display: flex;
    flex-direction: column; /* Вертикальное расположение конкурсов по умолчанию */
    gap: 16px; /* Отступы между элементами */
    margin-top: 0px;
}

.competitions2 h1 {
    font-family: 'Ubuntu';
    font-size: 40px;
    color: #244731;
}

.competitions3 {
    display: flex;
    flex-direction: column; /* Вертикальное расположение конкурсов по умолчанию */
    gap: 16px; /* Отступы между элементами */
    margin-top: -20px;
}

.competitions3 h1 {
    font-family: 'Ubuntu';
    font-size: 40px;
    color: #244731;
}

@media (max-width: 1024px) {
    /* Сделать таблицы более удобными для просмотра на планшетах */
    table {
        font-size: 0.9rem; /* чуть меньше шрифта */
    }

    /* Обеспечить, чтобы элементы с фиксированной шириной или отступами адаптировались */
    .w-full {
        width: 100%;
    }

    /* Расположить фильтры вертикально, если они расположены горизонтально */
    .filters {
        flex-direction: column;
        gap: 10px;
    }

    /* Можно также адаптировать меню, кнопки, формы под пространство */
    .btn-filter, input[type="text"] {
        width: 100%;
    }

    /* Пример для изображений или карточек */
    .competition {
        flex-direction: column;
        align-items: center;
        margin-top: -50px;
    }
}

@media (max-width: 768px) {
    /* Для мобильных устройств */

    /* Обертка с фильтрами */

    /* Поля и кнопки заполняют ширину контейнера */
    input[type="text"], .btn-filter {
        width: 100%;
        box-sizing: border-box;
    }

    /* Dropdown меню */
    .dropdown-menu {
        max-height: 200px;
        overflow-y: auto;
    }

    /* Сделать таблицу более мобильной */
    table {
        display: block;
        overflow-x: auto;
        width: 100%;
        font-size: 0.75rem;
    }
}

.grid {
    display: flex;
    grid-template-columns: 1fr; /* Одна колонка по умолчанию */
    gap: 16px;
}

@media (min-width: 480px) and (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* Две колонки */
    }
}

/* Для ноутбуков и десктопов (ширина экрана более 768px) */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(3, 1fr); /* Три колонки */
    }
}

.card {
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
    background-color: rgba(50, 150, 145, 0.5);
    height: 100%; /* Занимает всю высоту контейнера */
    box-sizing: border-box;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-item {
    display: flex;
    position: relative;
    width: 240px; /* или 100% для адаптивности */
    height: 350px; /* базовая высота для больших экранов */
}

@media (min-width: 1280px) {
    .card-item {
        height: 350px; /* или нужная вам высота для больших экранов */
    }
}

/* Для экранов от 768px до 1279px (например, планшеты и маленькие ноутбуки) */
@media (max-width: 1279px) and (min-width: 1024px) {
    .card-item {
        height: 500px; /* уменьшаем высоту для планшетов */
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .card-item {
        height: 700px; /* уменьшаем высоту для планшетов */
    }
}

/* Для экранов до 767px (телефоны) */
@media (max-width: 767px) {
    .card-item {
        height: auto; /* или меньшая фиксированная высота либо auto для гибкости */
        width: 100%; /* обычно полезно для мобильной ширины */
    }
}

.card-item2 {
    display: flex;
    position: relative;
    width: 240px; /* или 100% для адаптивности */
    height: 200px; /* базовая высота для больших экранов */
}

@media (min-width: 1280px) {
    .card-item2 {
        height: 200px; /* или нужная вам высота для больших экранов */
    }
}

/* Для экранов от 768px до 1279px (например, планшеты и маленькие ноутбуки) */
@media (max-width: 1279px) and (min-width: 1024px) {
    .card-item2 {
        height: 300px; /* уменьшаем высоту для планшетов */
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .card-item2 {
        height: 400px; /* уменьшаем высоту для планшетов */
    }
}

/* Для экранов до 767px (телефоны) */
@media (max-width: 767px) {
    .card-item2 {
        height: auto; /* или меньшая фиксированная высота либо auto для гибкости */
        width: 100%; /* обычно полезно для мобильной ширины */
    }
}

.soon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.soon-block {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fef3c7;
    color: #78350f;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

h2 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}

/* Адаптация сетки под устройства */
@media (max-width: 640px) { /* Мобильные телефоны */
    .soon {
        flex-direction: column;
    }
    .soon-block {
        width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 1024px) { /* Планшеты */
    .soon {
        flex-direction: row;
    }
    .soon-block {
        width: calc(50% - 0.5rem);
    }
}

@media (min-width: 1025px) { /* Ноутбуки и десктопы */
    .soon-block {
        width: calc(50% - 0.5rem);
    }
}

.image {
    display: flex;
    background-color: #FFFFFF;
    background-size: 200px 150px;
    background-position: -15px 0px;
}

@media (min-width: 768px) {
    .image {
        height: 144px; /* 36 * 4 */
    }
}

/* Адаптация под ноутбуки/десктопы (1024px и выше) */
@media (min-width: 1024px) {
    .image {
        height: 144px;
    }
}

/* Адаптация под мобильные телефоны (до 767px) */
@media (max-width: 767px) {

    .card {
        padding: 12px;
    }

    .image {
        height: 120px; /* Уменьшаем картинку */
    }

    .soon {
        font-size: 0.625rem; /* 10px */
        padding: 3px 6px;
    }
}

.card-item p {
    font-family: 'Ubuntu';
    font-size: 12px;
    margin-top: 10px;
}

.text-block {
    width: 100%;
    max-width: 280px; /* Ограничение для больших экранов */
    height: auto;
    min-height: 120px; /* Минимальная высота */
}

.text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.text3 {
    display: flex;
    width: 100%;
    max-width: 240px;
    height: auto;
    min-height: 130px;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.category {
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.625rem; /* 10px */
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.125rem; /* 18px */
    margin: 0.5rem 0 0;
    color: #1f2937;
}

/* Адаптивные стили */
@media (max-width: 640px) {
    .soon {
        flex-direction: column;
    }

    .soon-block {
        width: 100%;
        text-align: center;
        font-size: 0.6875rem; /* 11px */
    }

    .title {
        font-size: 1rem; /* 16px */
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .soon-block {
        font-size: 0.75rem; /* 12px */
    }

    .title {
        font-size: 1.125rem; /* 18px */
    }
}

@media (min-width: 769px) {
    .soon-block {
        font-size: 0.8125rem; /* 13px */
    }

    .title {
        font-size: 1.25rem; /* 20px */
    }
}

.site-competition  {
    display: flex; /* Делает его флекс-контейнером */
    flex-direction: column; /* Располагаем элементы вертикально */
    align-items: center; /* Центрируем внутри по горизонтали */
    padding: 20px;
    box-sizing: border-box;
}

.blocks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about {
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 8px;
}

.about-block h1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.about-block h2 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.btn-apply {
    display: block;
    text-align: center;
    padding: 0.75rem 1rem;
    background-color: #D9D9D9;
    text-decoration: none;
    border-radius: 40px;
    font-family: 'Ubuntu', sans-serif;
    margin: 0 auto;
    max-width: 200px;
}

.schedule {
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 8px;
}

.schedule-block h1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.competition2 {
    margin-top: 1rem;
}

.competition3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* Адаптация контента внутри competition3 */
.competition3 > * {
    width: 100%;
}

.competition3 h1 {
    font-family: 'Ubuntu';
    margin: 0 0 15px 0;
    font-size: 1.8rem;
    color: #333;
}

.competition-card {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    background-color: rgba(50, 150, 145, 0.5);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 1200px; /* Максимальная ширина для больших экранов */
    margin: 0 auto; /* Центрирование */
}

.info{
    flex: 1;
}

.info h1 {
    font-size: 1.5rem;
    margin: 0;
    color: #244731;
}

.infoblock {
    width: 100%;
    box-sizing: border-box;
}

/* Гибкая типографика */
.infoblock h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #244731;
}

.goal {
    padding: 0.3rem 0rem;
    font-size: 0.875rem;
}

.goal h2 {
    font-family: 'Ubuntu';
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: #244731;
}

.goalblock {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.photo {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.white {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
}

.threeblocks {
    display: flex;
    flex-direction: column; /* Вертикальное расположение на телефонах */
    gap: 16px;
    padding: 5px;
}

.block2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0.5rem;
    width: 100%;
}

.block2 h2 {
    margin: 0 0 6px 0;
    font-size: 1.5rem;
    color: #244731;
}

/* Серый блок внутри .block2 */
.block2 .gray {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
    background-color: rgba(50, 150, 145, 0.5); /* Серый цвет */
    border-radius: 6px;
}

/* Планшет (768px и выше) */
@media (max-width: 767px) {
    .block2 .gray {
        height: 120px; /* Уменьшаем высоту серого блока на мобильных */
    }
}

/* Планшеты (ширина ≥ 768px и < 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .block2 {
        padding: 1rem;
        gap: 1rem;
    }

    .block2 h2 {
        font-size: 1.2rem;
    }
}

/* Ноутбуки и десктопы (ширина ≥ 1024px) */
@media (min-width: 1024px) {
    .block2 {
        padding: 0rem;
        gap: 1.5rem;
    }

    .block2 h2 {
        font-size: 1.3rem;
    }
}

@media (min-width: 768px) {
    .threeblocks {
        flex-direction: row; /* Горизонтальное расположение */
        flex-wrap: wrap; /* Перенос на новую строку при нехватке места */
        justify-content: space-between;
    }
}


@media (min-width: 768px) and (max-width: 1023px) {
    .info, .white {
        width: 100%; /* Занимают всю ширину контейнера */
        flex: 1 1 auto;
    }
}

/* Телефоны (ширина до 767px) */
@media (max-width: 767px) {
    .info, .white {
        width: 100%;
        flex: 1 1 auto;
        border-radius: 12px; /* Смягчаем углы для мобильности */
    }

    .white {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Более мягкая тень */
    }
}

/* Большие экраны (настольные ПК, ноутбуки) */
@media (min-width: 1024px) {
    .info {
        flex: 1 1 65%; /* Занимает 65% ширины */
    }

    .white {
        flex: 0 0 230px; /* Фиксированная ширина */
    }
}

@media (max-width: 575px) {
    .infoblock {
        padding: 0.2rem;
    }

    .infoblock h2 {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .infoblock p {
        font-size: 0.9rem;
        line-height: 1.45;
        margin-bottom: 0.75rem;
    }
}

/* Планшеты (576px – 991px) */
@media (min-width: 576px) and (max-width: 991px) {
    .infoblock {
        padding: 1rem 0rem;
    }

    .infoblock h2 {
        font-size: 1.18rem;
    }

    .infoblock p {
        font-size: 0.95rem;
    }
}

/* Ноутбуки и десктопы (992px+) */
@media (min-width: 992px) {
    .infoblock {
        max-width: 800px; /* Ограничиваем ширину на больших экранах */
        padding: 1.25rem 0rem;
    }

    .infoblock h2 {
        font-size: 1.3rem;
    }

    .infoblock p {
        font-size: 1.05rem;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .competition-card {
        padding: 16px;
        gap: 16px;
    }
}

/* Адаптация для мобильных телефонов (до 767px) */
@media (max-width: 767px) {
    .competition-card {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
        border-radius: 8px;
    }
}

/* Дополнительно: уменьшаем отступы на очень маленьких экранах (до 480px) */
@media (max-width: 480px) {
    .competition-card {
        padding: 8px;
        gap: 8px;
    }
}

/* Мобильные телефоны (до 575px) */
@media (max-width: 575px) {
    .competition3 {
        padding: 15px;
        gap: 15px;
    }

    .competition3 > * {
        font-size: 0.9rem;
    }
}

/* Планшеты (576px – 991px) */
@media (min-width: 576px) and (max-width: 991px) {
    .competition3 {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 25px;
    }

    .competition3 > * {
        flex: 1 1 48%;
    }
}

/* Ноутбуки и десктопы (992px+) */
@media (min-width: 992px) {
    .competition3 {
        flex-direction: row;
        justify-content: flex-start;
        gap: 30px;
    }

    .competition3 > * {
        flex: 1 1 30%;
    }
}

@media (min-width: 768px) {
    .site-competition {
        flex-direction: row; /* Горизонтальная компоновка */
        align-items: stretch; /* Растягиваем блоки по высоте */
    }

    .blocks {
        flex: 1 1 60%; /* Занимаем ~60% ширины */
        min-width: 0; /* Чтобы не было проблем с переполнением */
    }

    .competition2 {
        flex: 1 1 40%; /* Занимаем ~40% ширины */
        min-width: 0;
        margin-left: 1rem;
    }

    .btn-apply {
        max-width: none;
        width: 100%;
    }
}

/* Адаптация для больших экранов (ширина ≥ 1200px) */
@media (min-width: 1200px) {
    .site-competition {
        gap: 2rem;
    }

    .blocks {
        padding: 0 1rem;
    }
}

/* Адаптация для мобильных устройств (ширина < 768px) */
@media (max-width: 767px) {
    .site-competition {
        flex-direction: column; /* Возвращаемся к вертикальной компоновке */
    }

    .btn-apply {
        margin: 1rem auto;
        max-width: 90%;
    }

    .competition2 {
        margin-top: 1.5rem;
    }
}

.application-block {
    display: flex;
    flex-direction: column;
    width: 100%; /* растягивается по ширине родителя */
    max-width: 860px; /* максимум ширины для ноутбука */
    height: auto; /* высота автоматически под контент, или установите фиксированное значение, если нужно */
    padding: 10px; /* немного внутреннего отступа для эстетики */
    box-sizing: border-box; /* чтобы padding не влиял на общую ширину */
}

.application-block h2 {
    font-family: 'Ubuntu';
    font-size: 24px;
}

.whiteblock {
    background-color: #fff; /* пример */
    padding: 20px;
    border-radius: 20px;
}

.notification-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; /* делаем ширину гибкой */
    max-width: 860px; /* ограничиваем максимум шириной 860px */
    height: auto; /* высота будет адаптироваться */
    min-height: 150px; /* минимальная высота, если нужно */
    background-color: #ffffff;
    border-radius: 20px;
    padding: 16px; /* добавим внутренние отступы для лучшего вида */
    box-sizing: border-box;
}

.notification-block p {
    font-family: 'Ubuntu';
    font-size: 16px;
}

.button-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 30px; /* подправлено на 60px для соответствия заданию */
    background-color: #EB9100;
    border-radius: 40px;
    border: 1px solid black;
    font-family: 'Ubuntu';
    font-size: 16px; /* можно изменить по желанию */
    cursor: pointer;
    transition: background-color 0.3s;
}

.profile {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin-left: 200px;
}

.site-profile {
    display: flex;
    flex-direction: column;
    width: 100%; /* замените фиксированную ширину на 100% */
    max-width: 440px; /* ограничение по ширине для больших экранов */
    background-color: #D9D9D9;
    border-radius: 20px;
    padding: 20px;
    margin: 0 auto; /* центровка на странице */
    box-sizing: border-box;
}

.profile-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(50, 150, 145, 0.5);
    border-radius: 20px;
    padding: 20px;
    max-width: 400px; /* уже есть в вашем коде */
    margin: 0 auto;
}

.update, .change-password, .application-button, .expert-button{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00EAE0;
    border-radius: 40px;
    border: 2px solid #ffffff;
    color: #FFFFFF;
    font-size: 20px;
}

/* Размеры по умолчанию (для ноутбука и больших экранов) */
.update {
    width: 200px;
    height: 50px;
    font-size: 12px;
}

.change-password {
    width: 150px;
    height: 50px;
    font-size: 12px;
}

.application-button {
    width: 120px;
    height: 50px;
    font-size: 12px;
}

.expert-button {
    width: 150px;
    height: 50px;
    font-size: 12px;
}

@media (max-width: 768px) {
    .update {
        width: 180px;
        font-size: 12px;
    }
    .change-password {
        width: 130px;
        font-size: 12px;
    }
    .application-button {
        width: 110px;
        font-size: 12px;
    }
}

/* Для мобильных устройств (макс. ширина 480px) */
@media (max-width: 480px) {
    .update {
        width: 160px;
        height: 45px;
        font-size: 12px;
    }
    .change-password {
        width: 120px;
        height: 45px;
        font-size: 12px;
    }
    .application-button {
        width: 100px;
        height: 45px;
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .profile {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }
    .site-profile {
        width: 100%;
        margin-bottom: 20px;
    }
    .profile-block {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (min-width: 1025px) {
    .profile {
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-left: 200px;
    }

    .site-profile {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Для телефонов (максимальная ширина 767px и ниже) */
@media (max-width: 767px) {
    h2 {
        font-size: 24px !important;
    }

    .site-profile, .profile-block {
        padding: 15px;
    }

    .notification-block p {
        font-size: 14px;
    }

    .button-custom {
        width: 100%;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 20px !important; /* чуть меньше на очень маленьких экранах */
    }
    .site-profile {
        width: 100%;
        padding: 10px; /* при необходимости */
        margin: 0 auto; /* для центрирования, если нужно */
    }

    .profile-block {
        padding: 10px;
    }
    .notification-block p {
        font-size: 13px;
    }
}

/* Адаптация для ноутбуков, планшетов и телефонов */
@media (max-width: 1024px) {
    .button-custom {
        width: 150px;
        height: 55px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .button-custom {
        width: 140px;
        height: 50px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* для телефонов оставить размер 170x60 как есть или чуть меньше для удобства */
    .button-custom {
        width: 130px; /* по условию, нужный размер */
        height: 40px;
        font-size: 11px;
    }
}

@media (max-width: 1024px) {
    /* Для планшетов и ноутбуков с меньшей шириной */
    .notification-block p {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    /* Для мобильных телефонов */
    .notification-block p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .notification-block {
        flex-direction: column;
        padding: 12px;
        max-width: 90%; /* чтобы не было слишком много ширины */
    }
}

/* для телефонов */
@media (max-width: 480px) {
    .notification-block {
        flex-direction: column;
        padding: 8px;
        max-width: 95%;
    }

    /* Можно изменить шрифты, если потребуется */
    .site-application h2 {
        font-size: 30px; /* уменьшенная версия для маленьких экранов */
    }
}

@media (max-width: 1024px) {
    /* планшеты и меньшие устройства */
    .application-block {
        max-width: 100%; /* занимает 90% ширины экрана */
        height: auto;
    }
}

@media (max-width: 768px) {
    /* мобильные телефоны */
    .application-block {
        flex-direction: column; /* размещаем содержимое вертикально, если есть внутренние элементы */
        max-width: 100%;
        height: auto;
    }
}

.little-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 215px;
    height: 70px;
    background-color: rgba(50, 150, 145, 0.7);
    border-radius: 10px;
    margin: 0.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.little-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* тень при наведении */
    background-color: #f9f9f9; /* изменение фона при наведении (опционально) */
}

.little-block h1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    text-align: center;
}

.btn-filter {
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

/* Dropdown меню */
.dropdown-menu {
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
    left: 0;
    top: 100%;
}

/* Элементы меню */
.dropdown-item {
    display: block;
    padding: 6px 12px;
    color: black;
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item.font-bold {
    background-color: #e5e7eb;
    font-weight: bold;
}


@media screen and (max-width: 640px) {
    .btn-filter {
        font-size: 13px;
        padding: 8px 10px;
    }
    .dropdown-menu {
        max-width: 100%;
    }
}

/* Планшеты: 641px - 1024px */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .btn-filter {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* Ноутбуки и десктопы: > 1024px */
@media screen and (min-width: 1025px) {
    .btn-filter {
        font-size: 15px;
        padding: 10px 14px;
    }
}

@media (max-width: 1200px) {
    .little-block {
        max-width: 180px;    /* чуть уже, чтобы больше помещалось */
        height: 70px;
        margin: 0.4rem;
    }
    .little-block h1 {
        font-size: 16px;
    }
}

/* Планшеты в портретной ориентации и большие телефоны */
@media (max-width: 992px) {
    .little-block {
        max-width: 140px;
        height: 80px;
        margin: 0.3rem;
    }
    .little-block h1 {
        font-size: 16px;
    }
}

/* Смартфоны (узкие экраны) */
@media (max-width: 768px) {
    .slide {
        flex-direction: column;  /* вертикальный стэк, чтобы лучше читать на узких экранах */
        margin: 20px 0px;
    }
    .slide2 {
        flex-direction: column;  /* вертикальный стэк, чтобы лучше читать на узких экранах */
        margin: 70px 0px;
    }

    .little-block {
        width: calc(100% - 1rem); /* занимать почти всю ширину с учётом отступов */
        max-width: none;
        height: 70px;
        margin: 0.3rem auto;
    }
    .little-block h1 {
        font-size: 14px;
    }
}

.test {
    width: 100%;
    max-width: 825px;
    height: auto;  /* подстраивается под содержимое */
    flex-wrap: wrap;
}

/* tablet */
@media (max-width: 1023px) {
    .test {
        max-width: 600px;
    }
}

/* mobile */
@media (max-width: 767px) {
    .test {
        max-width: 100%;
        flex-direction: column;
    }
}

.testblock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* чтобы занимать всю доступную ширину */
    max-width: 825px; /* ваш первоначальный размер для больших экранах */
    margin: 10px 0;
}

.grade {
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #d9d9d9;
}

@media (max-width: 768px) {
    .testblock {
        align-items: flex-start; /* по левому краю */
    }
    .grade {
        width: 20px;
        height: 20px;
    }
}

/* Телефоны */
@media (max-width: 480px) {
    .testblock {
        padding: 10px;
    }
    .grade {
        width: 25px;
        height: 25px;
    }
}

.custom-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 40px;
}

.create {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 450px;
    margin: 0px 0px;
}

/* Адаптация для планшетов (ширина экрана от 768px до 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .create {
        max-width: 450px;
    }
}

/* Адаптация для смартфонов (ширина экрана до 767px) */
@media (max-width: 767px) {
    .create {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        max-width: 100%;
        padding: 0 10px;
    }
}

.create2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 650px;
    margin: 0px 0px;
}

/* Адаптация для планшетов (ширина экрана от 768px до 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .create2 {
        max-width: 500px;
    }
}

/* Адаптация для смартфонов (ширина экрана до 767px) */
@media (max-width: 767px) {
    .create2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        max-width: 100%;
        padding: 0 10px;
    }
}

.create3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 520px;
    margin: 0px 0px;
}

/* Адаптация для планшетов (ширина экрана от 768px до 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .create3 {
        max-width: 500px;
    }
}

/* Адаптация для смартфонов (ширина экрана до 767px) */
@media (max-width: 767px) {
    .create3 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        max-width: 100%;
        padding: 0 10px;
    }
}

.create4 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 990px;
    margin: 0px 0px;
}

/* Адаптация для планшетов (ширина экрана от 768px до 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .create4 {
        max-width: 500px;
    }
}

/* Адаптация для смартфонов (ширина экрана до 767px) */
@media (max-width: 767px) {
    .create4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        max-width: 100%;
        padding: 0 10px;
    }
}

.create5 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0px 0px;
}

/* Адаптация для планшетов (ширина экрана от 768px до 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .create5 {
        max-width: 500px;
    }
}

/* Адаптация для смартфонов (ширина экрана до 767px) */
@media (max-width: 767px) {
    .create5 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        max-width: 100%;
        padding: 0 10px;
    }
}

.active-link {
    color: #ffffff; /* желаемый цвет при нажатии/активном состоянии */
}

.site-login {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.site-update {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.site-password {
    display: flex;
    flex-direction: column;
    height: 430px;
}

.site-expert {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.site-nomination {
    display: flex;
    flex-direction: column;
    height: 260px;
}

.site-notification {
    display: flex;
    flex-direction: column;
    height: 450px;
}

.site-notifications {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.site-category {
    display: flex;
    flex-direction: column;
    height: 260px;
}

.buttons {
    display: flex;
    width: 245px;
    height: 35px;
}

.buttons2 {
    display: flex;
    width: 266px;
    height: 40px;
    margin-left: 500px;
}

.buttons3 {
    display: flex;
    width: 266px;
    height: 40px;
    margin-left: 550px;
}

.buttons4 {
    display: flex;
    justify-content: space-between;
    width: 270px;
    height: 31px;
    margin-left: -30px;
}

.site-criterion {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.site-evaluation {
    display: flex;
    flex-direction: column;
    height: 600px;
}

.site-age {
    display: flex;
    flex-direction: column;
    height: 270px;
}

.site-report {
    display: flex;
    flex-direction: column;
    height: 300px;
}

.overflow-x-auto {
    overflow-x: auto;
    max-width: 100%;
    /* Можно добавить минимальную ширину или padding при желании */
}

.overflow-x-auto table {
    min-width: 600px; /* или больше, в зависимости от вашего содержимого */
    width: 100%;
    /* Убедитесь, что таблица растягивается, если контента много */
}

/* Ноутбуки (от 1024px и выше) */
@media (min-width: 1024px) and (max-width: 1279px){
    .overflow-x-auto {
        max-width: 700px;
        margin: 0 auto; /* Центрировать */
    }
}

/* Планшеты (от 768px до 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .overflow-x-auto {
        max-width: 500px;
        margin: 0 10px;
    }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
    .overflow-x-auto {
        max-width: 400px;
        margin: 0 5px;
        /* таблица внутри этого блока будет иметь горизонтальную прокрутку, если ширина таблицы превышает max-width */
    }
}