/* Custom styles can go here */
body {
    font-family: 'Lexend', sans-serif;

}

.container {
    max-width: 1320px
}

.bg_blue {
    background: #30549D;
}

/* Кастомная кнопка для проекта */
.btn-yellow {
    background-color: #f9b112;   /* bg-[#f9b112] */
    border-radius: 40px;         /* rounded-[40px] */
    display: flex;               /* flex */
    align-items: center;         /* items-center */
    justify-content: center;     /* justify-center */
    padding: 16px 32px;          /* py-[16px] px-[32px] */
    cursor: pointer;
    transition: filter 0.2s;
    font-size: 18px;
}

.btn-yellow:hover {
    filter: brightness(0.9);
}

.btn-blue {
    background-color: #718CC4; /* bg-[#718CC4] */
    border-radius: 40px; /* rounded-[40px] */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: flex-start; /* justify-start */
    gap: 8px; /* gap-x-2 ≈ 0.5rem = 8px */
    overflow: hidden; /* overflow-hidden */
    cursor: pointer;
    transition: filter 0.2s;
    font-size: 18px;
}

.btn-blue:hover {
    filter: brightness(0.9);
}

.btn-blue-dark:hover {
    filter: brightness(0.9);
}

.btn-blue-dark {
    background-color: #30549D; /* bg-[#718CC4] */
    border-radius: 40px; /* rounded-[40px] */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: flex-start; /* justify-start */
    gap: 8px; /* gap-x-2 ≈ 0.5rem = 8px */
    overflow: hidden; /* overflow-hidden */
    cursor: pointer;
    transition: filter 0.2s;
    font-size: 18px;
    padding: 16px 34px;
}

.btn-yellow-play {
    background-color: #f9b112;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.2s;
    font-size: 18px;
}

.btn-yellow-play:hover {
    filter: brightness(0.9);
}

.l_white {
    position: relative;
    transform: translate(0, -100%);
}

.l_white::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background: white;
    margin-right: 640px;
}

.l_white_corner {
    position: relative;
}

.l_white_corner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    border-left: 90px solid white;
    border-top: 60px solid transparent;
}

.error_backgrounds {
    background-image:
            url('../images/man_404.png'),
            url('../images/404_error.png'),
            url('../images/error_404_1.png');
    background-position: center bottom, center 50px, center top;
    background-size: contain, 600px, 900px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

 .custom-scroll {
     direction: rtl; /* скролл слева */
 }

.custom-scroll > .ltr {
    direction: ltr; /* контент обратно в нормальное направление */
}

/* Скролл для Webkit */
/* width */
/*.custom-scroll::-webkit-scrollbar {*/
/*    width: 5px;*/
/*}*/

/*!* Track *!*/
/*.custom-scroll::-webkit-scrollbar-track {*/
/*    background: #f1f1f1;*/
/*    !*box-shadow: inset 0 0 5px grey;*!*/
/*    !*border-radius: 10px;*!*/
/*}*/

/*!* Handle *!*/
/*.custom-scroll::-webkit-scrollbar-thumb {*/
/*    background: #30549D;*/
/*    border-radius: 10px;*/
/*}*/

/*!* Handle on hover *!*/
/*.custom-scroll::-webkit-scrollbar-thumb:hover {*/
/*    background: #30549D;*/
/*}*/
/*.custom-scroll::-webkit-scrollbar-thumb:hover {*/
/*    background-color: #1f3a72;*/
/*}*/

/* Firefox */
/*.custom-scroll {*/
/*    scrollbar-width: thin;*/
/*    scrollbar-color: #30549D #f1f1f1;*/
/*}*/

/*.custom-scroll {*/
/*    scrollbar-width: thin; !* Firefox *!*/
/*    scrollbar-color: #30549D #f1f1f1;*/
/*}*/

.custom-scroll::-webkit-scrollbar {
    width: 5px; /* толщина */
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #30549D; /* цвет бегунка */
    border-radius: 8px;
    min-height: 12px; /* минимальная высота */
    transition: background-color 0.3s;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #1f3a72; /* цвет при наведении */
}


@media (max-width: 768px) {
    .l_white_corner::before {
        display: none;
    }

    .l_white {
        transform: translate(0);
    }

    .error_backgrounds {
        background-size: contain, 300px, 500px;
        background-position: center bottom, center 30px, center top;
    }
}