@font-face {
    font-family: 'MontserratAlternates';
    src:
            url('../font/MontserratAlternates-Bold.woff2') format("woff2"),
            url('../font/MontserratAlternates-Bold.woff') format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratAlternates';
    src:
            url('../font/MontserratAlternates-SemiBold.woff2') format("woff2"),
            url('../font/MontserratAlternates-SemiBold.woff') format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratAlternates';
    src:
            url('../font/MontserratAlternates-Medium.woff2') format("woff2"),
            url('../font/MontserratAlternates-Medium.woff') format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratAlternates';
    src:
            url('../font/MontserratAlternates-Regular.woff2') format("woff2"),
            url('../font/MontserratAlternates-Regular.woff') format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('../font/Montserrat-Black.woff2') format("woff2"),
            url('../font/Montserrat-Black.woff') format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('../font/Montserrat-Bold.woff2') format("woff2"),
            url('../font/Montserrat-Bold.woff') format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('../font/Montserrat-Medium.woff2') format("woff2"),
            url('../font/Montserrat-Medium.woff') format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('../font/Montserrat-Regular.woff2') format("woff2"),
            url('../font/Montserrat-Regular.woff') format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src:
            url('../font/Montserrat-Light.woff2') format("woff2"),
            url('../font/Montserrat-Light.woff') format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


html, body {
    height: 100%;
}


img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3 {
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: underline;
    color: #3172b9;
}

:root {
    --animate-delay: 2s;
    --animatee-delay: 10s;
}



.bg-body-tertiary {
    --bs-bg-opacity: 0;
}

.container-fluid {
    padding: 0;
}

main.main {
    flex: 1 1 auto;
}

.page {
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', 'MontserratAlternates', sans-serif;
    overflow: hidden;
    height: 100vh;
}

/* ========== СЛАЙДЕР (как в BestPlace) ========== */
.slider-container {
    font-family: 'Montserrat', 'MontserratAlternates', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    background-image: url('../img/phon-bonch.png'); /* ПУТЬ К ВАШЕМУ ФАЙЛУ */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Фон не двигается при смене слайдов */
}

.slide, .slide-content, .slide-content * {
    color: white !important;
}


/* ========== НАСТРОЙКА СКРОЛЛА ДЛЯ СЛАЙДОВ ========== */

/* По умолчанию все слайды могут скроллиться */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    display: block;
    overflow-y: auto;
    padding: 30px 40px 40px 40px;
}

/* Первый слайд - отключаем скролл полностью */
.slide-1 {
    overflow: hidden !important;  /* hidden по обеим осям */
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
}

/* Центрирование контента внутри слайда */
.slide-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Тонкий красивый скролл для всех слайдов (кроме 1-го) */
.slide::-webkit-scrollbar {
    width: 4px;
}

.slide::-webkit-scrollbar-track {
    background: transparent;
}

.slide::-webkit-scrollbar-thumb {
    background: rgba(13, 202, 240, 0.3);
    border-radius: 10px;
}

.slide:hover::-webkit-scrollbar-thumb {
    background: rgba(13, 202, 240, 0.6);
}

/* Firefox */
.slide {
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 202, 240, 0.3) transparent;
}

/* На мобильных устройствах */
@media (max-width: 768px) {
    .slide {
        padding: 60px 20px 40px 80px;
    }

    .slide::-webkit-scrollbar {
        width: 3px;
    }
}

@media (max-width: 576px) {
    .slide {
        padding: 40px 15px 40px 60px;
    }
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.slide-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.slide-1,
.slide-2,
.slide-3,
.slide-4,
.slide-5 {
    background: transparent !important;
}




.stat-number {
    font-size: clamp(48px, 8vw, 100px);
    font-weight: 800;
    background: linear-gradient(135deg, #0066ff, #00ccff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ========== ЛЕВОЕ БОКОВОЕ МЕНЮ (как на фото) ========== */
.side-menu {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}







/* Логотип / кнопка открытия меню */
.menu-toggle {
    width: 150px;
    height: 100%;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-toggle span {
    width: 28px;
    height: 2px;
    z-index: 1001;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}



/* ========== ВЫЕЗЖАЮЩАЯ ПАНЕЛЬ (как на втором фото) ========== */
.nav-panel {
    position: fixed;
    left: -320px;
    top: 0;
    width: 32%;
    height: 100vh;
    z-index: 99;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(5px 1px 32px rgba(235, 100, 48, 0.59));
    padding: 45px 30px 40px;
    animation: breathe 4s ease-in-out infinite;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes breathe {
    0% {
        filter: drop-shadow(5px 1px 28px rgba(235, 100, 48, 0.5));
    }
    50% {
        filter: drop-shadow(5px 1px 38px rgba(235, 100, 48, 0.7));
    }
    100% {
        filter: drop-shadow(5px 1px 28px rgba(235, 100, 48, 0.5));
    }
}


.nav-panel::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(159deg, #f29946 0%, #e74c26 100%);
    clip-path: polygon(0% -55%, 100% 50%, 0% 160%);
    filter: drop-shadow(2px 0 10px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
    left: 0;
    top: 0;

}



.nav-panel-back {
    position: fixed;
    left: -320px;
    top: 0;
    width: 40%;
    height: 100vh;
    z-index: 89;
    transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0% -60%, 85% 50%, 0% 165%);
    /* Прозрачный слой как на SVG */
    background: linear-gradient(
            80deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 20%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(255, 255, 255, 0.08) 80%,
            rgba(255, 255, 255, 0.1) 100%
    );
}





.nav-panel.open ~ .nav-panel-back,
.nav-panel.open + .nav-panel-back {
    left: 0;
}


.nav-panel.open {
    left: 0;
    z-index: 200;
}

.content-blur {
    filter: blur(5px);
    transition: filter 0.8s ease;
    pointer-events: none; /* Чтобы нельзя было кликнуть на размытый контент */
}

.blur-content {
    filter: blur(8px);
    transition: filter 0.8s ease;
}

/* Чтобы панель и кнопка не размывались */
/*.nav-panel,*/
/*.menu-toggle {*/
/*    filter: none !important;*/
/*}*/

/* Логотип в панели */
.panel-logo {
    z-index: 1000;
}


/* Скрытие полосок когда меню открыто */
.menu-toggle.open span {
    opacity: 0;
    visibility: hidden;
}


/* Навигационные ссылки */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    height: 100%;
}
.nav-links a {
    font-family: 'Montserrat', 'MontserratAlternates', sans-serif;
    max-width: 240px;
    text-decoration: none;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    padding: 12px 0;
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%) 1;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.nav-links a:hover {
    transform: translateX(10px);
}
/*.nav-links a::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: -100%;*/
/*    width: 100%;*/
/*    height: 2px;*/
/*    background: #0066ff;*/
/*    transition: left 0.3s ease;*/
/*}*/
.nav-links a:hover::before {
    left: 0;
}

.nav-links svg {
    margin-right: 20px;
}




/* Кнопка закрытия (крестик) */


.close-panel {
    position: absolute;
    top: 0;
    right: 55px;
    width: 30px;
    height: 100%;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    z-index: 100;
    /* background: rgba(255, 255, 255, 0.15); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-panel:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.close-panel::before,
.close-panel::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background: white;
    border-radius: 2px;
}


.close-panel::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close-panel::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Крестик виден только при открытой панели */
.nav-panel .close-panel {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Когда панель открыта - показываем крестик */
.nav-panel.open .close-panel {
    opacity: 0.8;
    visibility: visible;
}

.nav-panel.open .close-panel:hover {
    opacity: 1;
}

@media (min-width: 1920px) {

    .nav-panel {
        left: -20%;
    }

    .nav-panel-back {
        left: -20%;
    }
}

/* Точки навигации слайдера (справа) */
.dots-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.dot {
    width: 30px;
    height: 30px;
    border-radius: 20%;
    background: #85848426;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.slide-1 .dot, .slide-3 .dot {
    background: rgba(255,255,255,0.5);
}
/* Активное состояние */
.dot.active {
    background: #c9ced66e;
    transform: scale(1.12);
    animation: float 2.2s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px) scale(1);
        box-shadow: 0 0 0 0 rgba(41, 54, 74, 0.2);
    }
    50% {
        transform: translateY(-3px) scale(1.08);
        box-shadow: 0 15px 25px -8px rgba(40, 49, 64, 0.71);
    }
    100% {
        transform: translateY(0px) scale(1);
        box-shadow: 0 0 0 0 rgba(35, 57, 85, 0.2);
    }
}

/* Hover эффект */
.dot:hover {
    transform: scale(1.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
}


/*первая страница БОНЧ*/
.padding-slide {
    padding: 10px 40px 10px 100px;
}

.width-slide {
    max-width: 1500px !important;
}

.bonch-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 300px;
    margin: 0 auto;
}

.bonch-container img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: 40%;
}

/* БОНЧ - слева */
.bonch-container img:first-child {
    position: absolute;
    top: 12%;
    left: -30%;
    z-index: 1;
    max-width: 100%;

}



/* Маленький текст - по центру (налегает) */
.bonch-container img:nth-child(2) {
    position: absolute;
    top: -13%;
    max-width: 82%;
    left: 51%;
    z-index: 2;
}

/* АЙТИ - справа */
.bonch-container img:nth-child(3) {
    position: absolute;
    top: 95%;
    max-width: 100%;
    left: 33%;
    z-index: 1;
}
.bonch-container img:nth-child(6) {
    position: absolute;
    top: -14%;
    max-width: 83%;
    left: -20%;
    z-index: 1000;

}

.bonch-container img:nth-child(7) {
    position: absolute;
    top: 122%;
    max-width: 79%;
    left: 42%;
    z-index: 1000;
}

/*ВРЕМЕННО ОСТАНОВИМ АНИМ-ю*/

/*@keyframes slideDown {*/
/*    0% {*/
/*        opacity: 0;*/
/*        !*transform: translateY(-60%);  !* сверху *!*!*/
/*    }*/
/*    100% {*/
/*        opacity: 1;*/
/*        !*transform: translateY(-49%);      !* на своё место *!*!*/
/*    }*/
/*}*/

/*.animal-img {*/
/*    animation: slideDown 3s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;*/
/*}*/

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-8 { transition-delay: 3.5s; }



 /*Анимации элементов внутри слайдов */
.fade-up {
    opacity: 0;                    /* Изначально прозрачный */
    transform: translateY(30px);   /* Сдвинут вниз на 30px */
    transition: all 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.slide.active .fade-up {
    opacity: 1;               /* Становится видимым */
    transform: translateY(0); /* Возвращается на своё место */
}

/* Анимация */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRightNoY {
    from {
        opacity: 0;
        transform: translateX(100px) translateY(-50%);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }
}

.animate-right {
    opacity: 0;
    animation: slideInRightNoY 0.9s ease-out 0.2s forwards;
}

/* Класс для анимации */
.animate-left {
    opacity: 0;
    animation: slideInLeft 0.6s ease-out 0s forwards;
}


@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-top {
    opacity: 0;
    animation: slideInTop 0.9s ease-out 0.8s forwards;
}

/*первая страница БОНЧ*/



/* О НАС */

.info-card li {
    transition: transform 0.3s ease-in-out;
}

.info-card li:hover {
    transform: translateY(-3px);
}


.info-list {
    list-style: none;
    padding: 0;
}

.info-list li {
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}


.badge-infra {
    background: rgba(13, 202, 240, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid rgba(13, 202, 240, 0.3);
}


.fw-bold {
    text-transform: uppercase;
    font-size: clamp(24px, 5vw, 40px);
}


.text-c {
    text-align: start !important;
    margin-bottom: 20px;
}

.padding-2 {
    padding: 30px 40px 40px 40px ;
}

.padding-top {
    padding-top: 40px;
}

.justify-cc {
    justify-content: center;
}


/*about-photo*/
.about-photo {
    position: relative;
    background: border-box;
}

.about-photo img:first-child{
    position: absolute;
    top: -40px;
    left: 0;
    background: border-box;
    filter: contrast(1.3) brightness(1.1);
    mix-blend-mode: difference;
    display: block;
    opacity: 0.7;
    z-index: 10;
}
.about-photo img:last-child{
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 9;
}

.slide-5 .about-photo img:first-child{
    top: 0;
}

.slide-5 .about-photo img:last-child{
    top: 0;
}

.slide-3 .about-photo img:last-child{
    top: -75px;
}



@media (max-width: 768px) {
    .about-photo img:first-child {
        top: 0;
    }

    .about-photo img:last-child {
        top: 0;
    }

    .slide-3 .about-photo img:first-child {
        top: 25px;
    }

    .slide-3 .about-photo img:last-child{
        top: 0;
    }

}

/*ЦОД ОНЛАЙН*/

/*.slide-3 .slide-content {*/
/*    justify-content: flex-start !important;*/
/*}*/

.location-video {
    position: relative;
    margin:  25px 0 15px 0;
    border-radius: 20px;
    /* aspect-ratio: 16 / 9; */
    padding: 0 0 56.5% 0;

}

.location-item p {
    display: flex;
    align-items: center;
    gap: 15px;
}

.location-video video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-v {
    background-color: #000000;
    border-radius: 20px;
}

video {
    background-color: #000;
}

/* Стилизация нашей кнопки воспроизведения */
.custom-play-btn {
    position: absolute;
    background: transparent;
    top: 47%;
    left: 56%;
    border-radius: 58px;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 52px;
    padding: 3px 12px 4px 20px;
    border: none;
    cursor: pointer;
    z-index: 100;
}

.custom-play-btn svg{
    max-width: 160px;
}

.slide-1 .logo-orange {
    position: relative;
    z-index: 1001;
}

.slide-5 .info-list li {
    margin-bottom: 8px;
}

.slide-5 .fw-bold {
    font-size: clamp(21px, 5vw, 32px) !important;
    color: #ea6630!important;
}



.slide-5 .link-contacts {
    color: #ea6630 !important;
    transition: color 0.3s ease !important;
}

.slide-5 .link-contacts:hover {
    color: #4cbcd2 !important;
}

/* Кнопка скачивания */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(163deg, #f19343 0%, #e84f27 100%);;
    border: 1.5px solid #EC6A33;
    border-radius: 60px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* Иконка справа */
.download-btn svg {
    order: 2;
    transition: transform 0.3s ease-in-out;
}

/* Текст слева */
.download-btn span {
    order: 1;
}

/* При наведении — белая кнопка */
.download-btn:hover {
    background: #5a2b2b;
    color: #EC6A33 !important;
    border-color: #5a2b2b !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(236, 106, 51, 0.25);

}



.download-btn:active {
    transform: translateY(1px);
}

@media (max-width: 480px) {
    .download-btn {
        padding: 10px 20px;
        font-size: 14px;
        gap: 8px;
    }
}




@media (max-width: 1350px) {
    .menu-toggle {
        width: 60px;
        height: 60px;
        background: #ea6630;
        margin: 41px;
        box-shadow: 0 0 0 10px rgba(159, 159, 159, 0.18);
        border-radius: 10px;
    }
    .nav-panel {
        left: -430px;
    }

    .nav-panel-back {
        left: -430px;
        clip-path: polygon(0% -60%, 80% 50%, 0% 165%);
    }

    .nav-panel {
        width: 370px;
    }

    .padding-slide {
        padding: 10px 40px 10px 35px;
    }

    .logo-orange {
        display: flex;
        justify-content: flex-end;
    }
    .logo-orange img {
        width: 100%;
        height: auto;
        margin-top: 15px;
        max-width: 180px;      /* Максимальный размер на десктопе */
        display: block;
    }

}

@media (min-width: 1300px) {
    .bonch-container img:nth-child(4) {
        display: none;
    }
}


@media (max-width: 1300px) {
    .bonch-container img:first-child {
        display: none;
    }

    /* Маленький текст - по центру (налегает) */
    .bonch-container img:nth-child(2) {
        display: none;
    }

    /* АЙТИ - справа */
    .bonch-container img:nth-child(3) {
        display: none;
    }

    .bonch-container img:nth-child(4) {
        position: absolute;
        top: 39%;
        max-width: 135%;
        left: -15%;
        z-index: 1;
    }

    .bonch-container img:nth-child(6) {
        position: absolute;
        top: -15%;
        max-width: 67%;
        left: -7%;
        z-index: 1000;
    }

    .bonch-container img:nth-child(7) {
        position: absolute;
        top: 96%;
        max-width: 68%;
        left: 42%;
        z-index: 1000;
    }

    .padding-slide {
        padding: 10px 40px 10px 35px;
    }

}


@media (max-width: 900px) {
    .custom-play-btn {
        top: 44%;
        padding: 0 8px 2px 17px;
    }
}

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

    .bonch-container img:nth-child(6) {
        top: -4%;
    }

    .bonch-container img:nth-child(7) {
        top: 85%;
    }

    .info-card {
        margin-bottom: 20px;
    }

    .text-c {
        text-align: center !important;
    }

    .padding-2 {
        padding: 30px 20px 40px 20px !important;
    }

    .slide { padding: 10px 20px 40px 25px; }
    .nav-links a { font-size: 20px; }
    .menu-toggle { width: 50px; height: 50px; }
}

@media (max-width: 568px) {
    .bonch-container img:nth-child(6) {
        top: 3%;
    }

    .bonch-container img:nth-child(7) {
        top: 79%;
    }
}

@media (max-width: 480px) {
    .bonch-container img:nth-child(6) {
        top: 12%;
    }

    .bonch-container img:nth-child(7) {
        top: 69%;
    }
}

@media (min-width: 425px) {
    .bonch-container img:nth-child(5) {
        display: none;
    }

    .bonch-container img:nth-child(8) {
        display: none;
    }

    .bonch-container img:nth-child(9) {
        display: none;
    }
}

@media (max-width: 425px) {
    .bonch-container img:nth-child(4) {
        display: none;
    }
    .bonch-container img:nth-child(5) {
        position: absolute;
        top: 51%;
        max-width: 135%;
        left: -10%;
        z-index: 1;
    }

    .bonch-container img:nth-child(6) {
        display: none;
    }

    .bonch-container img:nth-child(7) {
        display: none;
    }

    .padding-slide {
        padding: 10px 20px 10px 5px !important;
    }

    .bonch-container img:nth-child(8) {
        position: absolute;
        top: 14%;
        max-width: 68%;
        left: 5%;
        z-index: 1001;
    }

    .bonch-container img:nth-child(9) {
        position: absolute;
        top: 79%;
        max-width: 68%;
        left: 26%;
        z-index: 1001;
    }
}


@media (max-width: 400px) {
    .custom-play-btn svg{
        max-width: 100px;
    }
}



@media (max-width: 320px) {
    .bonch-container img:nth-child(5) {
        left: -15%;
    }

    .bonch-container img:nth-child(8) {
        position: absolute;
        top: 13%;
        max-width: 68%;
        left: -3%;
        z-index: 1001;
    }

    .bonch-container img:nth-child(9) {
        position: absolute;
        top: 75%;
        max-width: 68%;
        left: 25%;
        z-index: 1001;
    }

    .custom-play-btn {
        top: 41%;
        padding: 1px 8px 3px 13px;
    }
}