.button_navigation_purple_bol {
    background: linear-gradient(145deg, rgba(89, 103, 181, 0), rgba(144, 142, 237, 0));
    font-weight: bold;
    border: none;
    border-radius: 16px;
    padding: 12px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* сама точка */
.button_navigation_purple_bol::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    background: #5967B5FF;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: moveDot 1s linear infinite alternate;
}

/* анимация точки туда-сюда */
@keyframes moveDot {
    0%   { left: 5%; opacity: 1; }
    100% { left: 90%; opacity: 1; }
}


.button_navigation_purple {
    background: linear-gradient(145deg, #5967B5, #908EED);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 16px;
    padding: 12px 12px  12px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    box-shadow:
            6px 6px 12px rgba(0, 0, 0, 0.25),
            -6px -4px 12px rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.button_navigation_purple:hover span {

    display: inline-block;
    transition: transform 0.25s ease;
}

/* эффект при наведении на кнопку */
.button_navigation_purple:hover {

    /* transform: translateY(2px); */ /* убрали смещение */
    box-shadow:
            3px 3px 6px rgba(0, 0, 0, 0.25),
            -3px -3px 6px rgba(255, 255, 255, 0.1),
            inset 0 -7px 2px rgba(0, 0, 0, 0.4);
}

/* Поднятие текста тоже убираем */
.button_navigation_purple:hover span {
     transform: translateY(-2px);
}


.button_select_purple {
    background: linear-gradient(145deg, #5967B5, #908EED);
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 16px;
    padding: 12px 12px  12px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    box-shadow:
            6px 6px 12px rgba(0, 0, 0, 0.25),
            -6px -4px 12px rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.button_select_purple:hover span {

    display: inline-block;
    transition: transform 0.25s ease;
}

/* эффект при наведении на кнопку */
.button_select_purple:hover {

    /* transform: translateY(2px); */ /* убрали смещение */
    box-shadow:
            3px 3px 6px rgba(0, 0, 0, 0.25),
            -3px -3px 6px rgba(255, 255, 255, 0.1),
            inset 0 -7px 2px rgba(0, 0, 0, 0.4);
}

/* Поднятие текста тоже убираем */
.button_select_purple:hover option {
     transform: translateY(-2px);
}
#language-select option {
    background-color: rgba(249, 250, 251, 0.16); /* фон 60% прозрачности */
    color: #5967B5; /* текст */
    font-weight: bold;
    border: none;
}

/* При наведении на элемент списка */
#language-select option:hover,
#language-select option:focus {
    background: rgba(144, 142, 237, 0.8); /* чуть менее прозрачный при ховере */
    color: #fff; /* например, белый текст */
}







.button_purple {
    background: linear-gradient(145deg, #5967B5, #908EED);
    color: white;
    /*font-weight: bold;*/
    font-size: 16px;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0px 0px 1px 0px #0C19282E inset,
    0px 7px 15px -3px #647C9933,
    0px 2px 4px 0px #647C994D,
    0px 2px 1px 0px #FFFFFF1A inset;

    overflow: hidden;
}
.button_link {
    color: white;
    font-size: 16px;
    text-decoration: none; /* убираем подчеркивание */
    transition: transform 0.2s ease; /* плавный переход */
}

.button_link:hover,
.button_link:focus,
.button_link:active {
    color: white;
    text-decoration: none; /* точно убираем подчеркивание при наведении и клике */
    transform: translateY(-3px); /* приподнимаем текст */
}


/* эффект при наведении на кнопку */
.button_purple:hover {
    /* transform: translateY(2px); */ /* убрали смещение */
    box-shadow:0px -10px 1px -3px #1E21732E inset,
    0px 5px 4px 0px #888AE3C7,
    0px 2px 1px 0px #FFFFFF1A inset;

}

/* эффект подъёма текста внутри кнопки */
.button_purple:hover span {
    transform: translateY(-3px);
}

.button_white {
background: linear-gradient(145deg, #F9FAFB, #FFFFFF);
    /*font-weight: bold;*/
    color: #465478;
    font-size: 16px;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    box-shadow: 0px -2px 2px 0px #1E217326 inset,
    0px 7px 8px 0px #888AE34D,
    0px 0px 1px 0px #FFFFFF57 inset;

    overflow: hidden;
}


/* эффект при наведении на кнопку */
.button_white:hover {
    text-decoration: none;
    /* transform: translateY(2px); */ /* убрали смещение */
    box-shadow: 0px -6px 2px 0px #686BCC5C inset,
    0px 7px 8px 0px #888AE37D,
    0px 0px 4px 0px #FFFFFF57 inset;

}

/* эффект подъёма текста внутри кнопки */
.button_white:hover span {
    transform: translateY(-3px);
}
.button_white_small {
background: linear-gradient(145deg, #F9FAFB, #FFFFFF);
    font-weight: bold;
    color: #465478;
    font-size: 16px;
    border: none;
    border-radius: 999px;
    padding: 14px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    box-shadow:
            6px 6px 12px rgba(0, 0, 0, 0.25),
            -6px -6px 12px rgba(255, 255, 255, 0.15);
    overflow: hidden;
}


/* эффект при наведении на кнопку */
.button_white_small:hover {
    /* transform: translateY(2px); */ /* убрали смещение */
    box-shadow:
            3px 3px 6px rgba(0, 0, 0, 0.25),
            -3px -3px 6px rgba(255, 255, 255, 0.1),
            inset 0 -7px 2px rgb(213, 215, 241);
}

/* эффект подъёма текста внутри кнопки */
.button_white_small:hover span {
    transform: translateY(-3px);
}


.button_side_bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    cursor: pointer;
    position: relative;
}

.dot {
    width: 4px;
    height: 4px;
    background-color: #7584D6;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Наведение */
.button_side_bar:hover .dot {
    /* центральная точка не двигается */
}

.button_side_bar:hover .dot.corner {
    transform: translate(
            calc(var(--dx) * 5px),
            calc(var(--dy) * 5px)
    );
}

.button_side_bar:hover .dot.side {
    transform: translate(
            calc(var(--dx) * 10px),
            calc(var(--dy) * 10px)
    );
}
.Ask_AI {
    background-color: rgba(255, 255, 255, 0.79);
    border-radius: 40px;
    width: 220px;
    height: 50px;
    border: none;
    display: flex;              /* включаем флекс-контейнер */
    align-items: center;        /* выравнивание по вертикали */
    justify-content: center;    /* выравнивание по горизонтали */
    box-shadow:
            6px 6px 12px rgba(99, 154, 175, 0.25),
            -6px -6px 12px rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.Ask_AI_text {

    color: #7584D6;
    font-size: 14px; /* опционально */
    font-weight: 500; /* опционально */
}


.button_Rocket {
    background-color: rgba(0, 0, 128, 0);
    color: #FFFFFF;
    font-size: 16px;
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    width: auto;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.span_button_Rocket{
    padding-right: 10px;
}
.img_button {
    width: 35px;
    height: 35px;
    transition: transform 0.25s ease;
    position: relative;
    cursor: pointer;
}

.img_button:hover {
    transform: translateY(-3px); /* приподнимаем */
}

.img_button_book{
    width: 15px;
    height: 15px;
}

/* 📱 Телефон (до 768px) */
@media (max-width: 768px) {
    .button_navigation_purple,
    .button_select_purple,
    .button_purple,
    .button_white,
    .button_white_small,
    .button_Rocket,
    .Ask_AI {
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 12px;
        width: auto;
    }

    .button_link {
        font-size: 14px;
    }

    .Ask_AI {
        width: 180px;
        height: 42px;
    }

    .Ask_AI_text {
        font-size: 14px;
    }

    .img_button {
        width: 28px;
        height: 28px;
    }

    .img_button_book {
        width: 16px;
        height: 14px;
    }

    .span_button_Rocket {
        padding-right: 6px;
    }
}

/* 📲 Планшет (от 769px до 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .button_navigation_purple,
    .button_select_purple,
    .button_purple,
    .button_white,
    .button_white_small,
    .button_Rocket,
    .Ask_AI {
        padding: 12px 24px;
        font-size: 15px;
        border-radius: 14px;
    }

    .button_link {
        font-size: 15px;
    }

    .Ask_AI {
        width: 200px;
        height: 46px;
    }

    .Ask_AI_text {
        font-size: 15px;
    }

    .img_button {
        width: 32px;
        height: 32px;
    }

    .img_button_book {
        width: 14px;
        height: 14px;
    }

    .span_button_Rocket {
        padding-right: 8px;
    }
}