.hidden {
    display: none;
}

/* Общий стиль для кнопок меню желтое и зеленое затмение */
.menu-btn {
    background-color: #F4F3F3;
    width: calc(100% - 40px);
    padding: 10px;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); /* тень для объёма */
    transition: background-color .2s ease, color .2s ease;
}

    .menu-btn.green:hover {
        background-color: #4cb828;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

    .menu-btn.yellow:hover {
        background-color: #edcc37;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

/* Общий стиль кнопок для всплывающих окон */
.popup-btn {
    background-color: #C8C8C8;
    width: calc(50% - 100px);
    padding: 10px;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); /* тень для объёма */
    transition: background-color .2s ease, color .2s ease;
}

    .popup-btn.green:hover {
        background-color: #4cb828;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

    .popup-btn.red:hover {
        background-color: #de4604;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

/* Общий стиль для кнопок меню желтое и зеленое затмение */
.submit-button {
    background-color: #C8C8C8;
    width: calc(100% - 40px);
    padding: 10px;
    border: 1px solid #333;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); /* тень для объёма */
    transition: background-color .2s ease, color .2s ease;
}

    .submit-button.green:hover {
        background-color: #4cb828;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

    .submit-button.yellow:hover {
        background-color: #edcc37;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

/* Общий стиль для кнопок переключение языка */
.lang-btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 4px;
    background-color: #F4F3F3; /* фон */
    color: black;
    text-decoration: none;
    border: 1px solid #333;
    border-radius: 8px; /* закруглённые углы */
    cursor: pointer;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); /* тень для объёма */
    transition: background-color 0.2s ease;
}

/* Стили для контента */
.content-section {
    margin-top: 20px;
}

/* Класс для анимации кнопки */
.spinner {
    border: 4px solid #f3f3f3; /* Цвет фона */
    border-radius: 50%;
    border-top: 4px solid #3498db; /* Цвет спиннера */
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin-left: 10px; /* Отступ между кнопкой и спиннером */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Скрыть изначально спиннер */
.hidden {
    display: none;
}

body {
    background-image: url('../images/backGround.jpg'); /* путь к картинке */
    background-size: cover; /* растягивает на весь экран */
    background-position: center; /* центрирует */
    background-repeat: no-repeat; /* не повторяет */
    background-attachment: fixed; /* фиксирует при прокрутке */
}

/* Стили для скрытия контента */
.accordion {
    background-color: #C8C8C8;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: 1px solid #333;
    border-radius: 10px;
    text-align: left;
    outline: none;
    margin: 10px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); /* тень для объёма */
    transition: background-color 0.3s ease;
}

    .accordion:hover {
        background-color: #31aaf5;
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.3); /* усиленная тень при наведении */
        transform: translateY(-1px); /* лёгкий подъём */
        /*  color: white;*/
    }

.panel {
    padding: 0 14px;
    display: none;
    overflow: hidden;
}