* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    background: #fff;
    scroll-behavior: smooth;
}
body {
    background: transparent;
}
@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
  }
  
  @property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
  }
  
  @property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
  }
  
  
  p {
      margin: 0;
  }
  #lesson-content {
  /* Задаем максимальную ширину для больших экранов, чтобы контент не растягивался до бесконечности */
  max-width: 860px; 
  
  /* Центрируем блок по горизонтали на больших экранах */
  margin-left: auto;
  margin-right: auto;

  /* Добавляем отступы по бокам для мобильных устройств, чтобы контент не прилипал к краям */
  padding-left: 15px;
  padding-right: 15px;

  /* Убеждаемся, что блок занимает 100% доступной ширины (в пределах max-width) */
  width: 100%;
  box-sizing: border-box; /* Важное правило, чтобы padding не увеличивал общую ширину */
  min-height: 650px; /* Задаем минимальную высоту, чтобы избежать "прыжков" */
}

/* 
 * Дополнительно: стили для обертки iframe, чтобы обеспечить соотношение 16:9.
 * Этот код уже есть у вас в JS, но хорошей практикой будет вынести его в CSS,
 * а в JS оставить только сам iframe. Но пока можно оставить как есть.
 */
.video-wrapper-16-9 {
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  width: 100%; /* <--- ДОБАВЬТЕ ЭТУ СТРОКУ */
}

.video-wrapper-16-9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

  @media (prefers-color-scheme: dark) {
    :root {
        --d: 5000ms;
        --angle: 90deg;
        --gradX: 100%;
        --gradY: 50%;
        --c1: #2f3126 !important;
        --c2: rgba(47, 49, 38, 0.1) !important;
    }
    /* Dark mode styles go here! */
  }
  :root {
      --d: 5000ms;
      --angle: 90deg;
      --gradX: 100%;
      --gradY: 50%;
      --c1: #2f3126;
      --c2: rgba(47, 49, 38, 0.1);
  }
body {
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
}

@media screen and (max-width: 3840px) {
    /* ==================================================
   Стили для десктопной шапки в один ряд
   ================================================== */

/* 1. Главный контейнер-обертка */
.header-row-container {
    display: flex; /* Включаем Flexbox! */
    align-items: center; /* Выравниваем все элементы по вертикальному центру */
    justify-content: space-between; /* Распределяем пространство между элементами */
    gap: 20px; /* Отступ между элементами */
    max-width: 1200px; /* Ограничим ширину для очень больших экранов */
    margin: 0 auto; /* Центрируем контейнер */
    padding: 15px 20px; /* Внутренние отступы */
}

/* 2. Стилизуем логотип */
.header-row-container .header-logo-container {
    flex-shrink: 0; /* Запрещаем логотипу сжиматься */
}

.header-row-container .header-logo {
    width: 60px; /* Размер лого на десктопе */
    height: auto;
    display: block;
}

/* 3. Возвращаем и стилизуем заголовок */
/* ВАЖНО: У тебя в коде было .top-header { display: none; } для десктопа. 
   Мы это переопределяем! */
.header-row-container .top-header {
    display: block; /* Возвращаем видимость блоку */
    flex-grow: 1; /* Разрешаем заголовку занять всё свободное пространство */
    text-align: center; /* Центрируем текст внутри */
}
.header-row-container .courses-h1-mobile {
    font-size: 24px; /* Увеличим шрифт для десктопа */
    margin: 0;
}

/* 4. Переопределяем стили для блока с информацией о пользователе */
/* ВАЖНО: У тебя было width: 80vw; и margin: auto; для .userinfo,
   чтобы центрировать его. В flex-контейнере это не нужно. */
.header-row-container .userinfo {
    display: flex;
    flex-direction: column; /* Элементы внутри блока (имя, прогресс) пусть идут друг под другом */
    align-items: flex-end; /* Выравниваем их по правому краю */
    width: auto; /* Сбрасываем старую ширину */
    margin: 0; /* Сбрасываем старые отступы */
    flex-shrink: 0; /* Запрещаем сжиматься */
}
    .demo2 {
        margin-bottom: 200px !important;
    }
    .demo2 a {
        text-decoration: none;
    }
    .courses-content a {
        text-decoration: none;
    }
    .courses-content a {
        text-decoration: none;
    }
    .demo-text {
        width: 70vw;
        margin: auto;
        border: 1px solid #e5e5e5;
        padding: 30px;
        line-height: 150%;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 15px;
        border-radius: 40px;
    }
    .userinfo-email {
        width: 80vw;
        margin: auto;
        text-align: center;
        font-size: 18px;
        margin-top: 30px;
    }
    .userinfo {
        width: 80vw;
        margin: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        font-size: 18px;
    }
    .userinfo-bye {
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 18px;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        border-radius: 30px;
    }
    .userinfo a {
        text-decoration: none;
        cursor: pointer;
    }
    .diplom1 {flex-direction: column;}
    .pochatok {
        width: 70vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        margin-bottom: 60px;
    }
    footer a {
        color: #ddd;
        font-size: 14px;
    }
    footer .ofer {
        margin-top: 15px;
    }
    .oferta {
        display: flex;
        padding: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 70vw;
        margin: auto;
      }
      .oferta-1 {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 17px;
        text-align: center;
        font-weight: 600;
      }
      .oferta-2 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 17px;
        text-align: center;
      }
      .oferta-3 {
        margin-top: 20px;
        margin-bottom: 15px;
        font-size: 16px;
        text-align: center;
      }
      .oferta-4 {
        margin-bottom: 9px;
        font-size: 15px;
        text-align: left;
      }
    .header-big {
        animation-duration: .4s;
        animation-name: showing;
        animation-fill-mode: backwards;
    }
    .desktop-menu {
        width: 100vw;
        background: linear-gradient(to left, #2f3126, #21221c, #2f3126);
        display: flex;
        justify-content: center;
        align-items: center;
        animation-duration: .4s;
        animation-name: showing;
        animation-fill-mode: backwards;
        animation-delay: .3s;
        box-shadow: rgba(0, 0, 0, 0.65) 0px 3px 15px;
    }
    .desktop-menu .menu-item {
        color: #fff;
        font-size: 22px;
        padding: 20px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .desktop-menu .menu-item:hover {
        color: #ddd;
        background-color: #2f3126;
    }
    .desktop-menu a {
        text-decoration: none;
        cursor: pointer;
    }
    
    .inner-desktop-menu {
        padding: 15px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .teachers {
        width: 60vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        margin-bottom: 60px;
    }
    .teachers img {
        width: 27vw;
        border: 1px solid #e5e5e5;
    }
    .teachers video {
        width: 27vw;
        height: auto;
    }
    .header-small {
        display: none;
    }
   
    .header-text-desktop {
        font-size: 26px;
        padding: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        text-align: center;
        animation-duration: .4s;
        animation-name: slidein;
        animation-fill-mode: backwards;
        animation-delay: 0.6s;
    }
    .text-top-1 {
        text-align: center;
        width: 70vw;
        font-size: 20px;
        padding: 15px;
        margin:auto;
        border: 1px solid #2f3126;
        background-color: #2f3126;
        border-radius: 5px;
        color: white;
    }
    .text-top-2 {
        text-align: center;
        width: 70vw;
        font-size: 20px;
        padding: 15px;
        margin:auto;
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 5px;
        color: #000;
        margin-top: 15px;
    }

    .banner01 {
        width: 70vw;
        border-radius: 10px;
        border: 1px solid #ddd;
        margin: auto;
    }



    @keyframes showing2 {
        from {
          opacity: 0;
          transform: scale(0.5);
        }
      
        to {
          opacity: 1;
          transform: scale(1);
        }
    }
    @keyframes showing {
        from {
          opacity: 0;
        }
      
        to {
          opacity: 1;
        }
    }
    @keyframes slidein {
        from {
          transform: translateX(-50%);
          opacity: 0;
        }
      
        to {
          transform: translateX(0%);
          opacity: 1;
        }
    }
    @keyframes animate {
        from {
          transform: rotate(0deg);
        }
      
        to {
          transform: rotate(360deg);
        }
    }

    .form-user {
        box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px; 
        width: 18vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        font-size: 20px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        border-radius: 30px;
        animation-duration: .5s;
        animation-name: showing;
    }
    .form-user-caption {
        padding: 12px;
        margin-top: 8px;
    }
    #promocode {
        padding: 12px;
        font-size: 16px;
        text-align: center;
        background: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        color: #fff;
        border: 1px solid #fff;
        width: 70%;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 20px;
        margin-top: 25px;
    }
    .form-user input {
        padding: 12px;
        font-size: 16px;
        text-align: center;
        background: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        color: #fff;
        border: 1px solid #777;
        width: 90%;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .form-user button {
        background: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        color: #fff;
        padding: 16px;
        text-align: center;
        font-size: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-bottom: 8px;
    }
    .form-user button .btn-user {
        border: none;
        outline: none;
        color: #fff;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 50px;
        padding-top: 16px;
        padding-bottom: 16px;
        cursor: pointer;
    }
    .google-btn {
        outline: none;
        color: #fff;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 50px;
        padding-top: 12px;
        padding-bottom: 12px;
        text-decoration: none;
        width: 92%;
        margin: auto;
    }
    .register-body{
        background-color: #ccc;
    }
    .register-body ul {
        list-style: none;
        width: 18vw;
        margin: auto;
        margin-top: 10px;
        text-align: center;
    }
    .register-body ul li {
        padding: 5px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 14px;
        color: #fff;
        margin-top: 2px;
        border-radius: 10px;
    }
    .register-body .error-login {
        width: 18vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        padding: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 14px;
        color: #fff;
        margin-top: 5px;
        border-radius: 10px;
    }
    .login-body {
        background-color: #ccc;
    }
    .login-body ul {
        list-style: none;
        width: 18vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
    }
    .login-body ul li {
        padding: 5px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 14px;
        color: #fff;
        margin-top: 5px;
        border-radius: 10px;
    }
    .login-body .error-login {
        width: 18vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        padding: 20px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 18px;
        color: #fff;
        margin-top: 5px;
        border-radius: 10px;
    }
    .success-login {
        width: 25vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        padding: 10px;
        background: #fff;
        font-size: 14px;
        color: #000;
        margin-top: 5px;
        border-radius: 10px;
        text-align: center;
    }
    .bottom-icons {
        z-index: 10001;
        position: fixed;
        right: 5vw;
        bottom: 20px;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        opacity: 0.9;
        background-color: #2f3126;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 30px;
        animation-duration: .8s;
        animation-name: showing;
        animation-fill-mode: backwards;
        animation-delay: 3s;
    }
    .bottom-icons svg {
        width: 45px;
        height: 45px;
    }
    .bottom-icons .first{
        margin-right: 30px;
    }
    .top-header-next {
        display: none;
    }
    .top-header {
        display: none;
    }
    .el-show {
        position: fixed;
        top: 0;
        opacity: 0.95;
    }
    .el-show2 {
        position: fixed;
        top: 0;
        opacity: 1;
    }
    .phone1 a{
        text-decoration: none;
        color: #fff;
        font-size: 19px;
    }
    .bye-button {
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        color: #fff;
        font-size: 19px;
        border: 1px solid #fff;
        border-radius: 20px;
    }

    
    .header-small {
        animation-duration: .4s;
        animation-name: showing;
        animation-fill-mode: backwards;
    }
    .under-top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        margin-bottom: 15px;
        margin-top: 15px;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: .6s;
        animation-fill-mode: backwards;
    }
    .header-text {
        width: 80vw;
        font-size: 18px;
        text-align: center;
    }
    .header-text-2 {
        width: 90vw;
        font-size: 18px;
        text-align: center;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 50px;
    }
    .under-top .menu {
        width: 12vw !important;
        display: flex;
        position: relative;
        z-index: 15000;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;
        height: 25px;
    }
    .under-top .menu span {
        height: 4px;
        width: 60%;
        transform: scale(1);
        background-color: #000;
    }
    .under-top .menu::before, .under-top .menu::after {
        content: '';
        position: absolute;
        height: 4px;
        width: 80%;
        background-color: #000;
        transition: all 0.3s ease 0s;
    }
    .under-top .menu::before {
        top:0;
    }
    .under-top .menu::after {
        bottom:0;
    }
    .under-top .menu.active span {
        transform: scale(0);
    }
    .under-top .menu.active::before {
        top: 42%;
        transform: rotate(-45deg) translate(0, -50%);
    }
    .under-top .menu.active::after {
        bottom: 50%;
        transform: rotate(45deg) translate(0, 50%);
    }
    .under-top-wmenu {
        display: none;
    }
    .mobile-menu {
        width: 100vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #000;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-around;
        height: 0px;
        -moz-transition: height .5s;
        -ms-transition: height .5s;
        -o-transition: height .5s;
        -webkit-transition: height .5s;
        transition: height .5s;
        overflow: hidden;
        padding-right: 20px;
    }
    .mobile-menu a {
        display: block;
        text-decoration: none;
        color: #fff;
        font-size: 18px;
    }
    .mobile-menu a:first-child {
        margin-top: 15px;
    }
    .mobile-menu a:last-child {
        margin-bottom: 15px;
    }
    .mobile-menu div {
        margin-top: 10px;
    }
    .mobile-menu div:last-child {
        margin-bottom: 10px;
    }
    .mobile-menu div:first-child {
        margin-top: 10px;
    }
    .kruzhok {
        display: none;
    }
    .text-top-1 {
        text-align: left;
        width: 60vw;
        font-size: 21px;
        padding: 40px;
        padding-left: 200px;
        padding-right: 20px;
        margin:auto;
        /*background-color: #2f3126;*/
        background: linear-gradient(to left, #2f3126, #21221c);
        border-radius: 40px;
        color: white;
        line-height: 180%;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: .9s;
        animation-fill-mode: backwards;
        margin-bottom: 40px;
        box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
    }
    .banner01 {
        width: 60vw;
        display: block;
        border-radius: 10px;
        border: 1px solid #ddd;
        margin: auto;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: 1.05s;
        animation-fill-mode: backwards;
        margin-bottom: 40px;
        box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
        border-radius: 40px;
    }
    .text-top-2 {
        text-align: right;
        width: 60vw;
        font-size: 21px;
        padding: 40px;
        padding-right: 200px;
        padding-left: 20px;
        margin:auto;
        background-color: #fff;
        border-radius: 40px;
        color: #000;
        line-height: 180%;
        margin-top: 10px;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: 1.2s;
        animation-fill-mode: backwards;
        margin-bottom: 40px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    }
    .program-header {
        width: 100vw;
        text-align: center;
        background: radial-gradient(ellipse at center, #3a3d30, #2f3126);
        /*background: linear-gradient(to left, #2f3126, #21221c, #2f3126);*/
        font-size: 28px;
        color: #fff;
        margin: auto;
        padding: 35px;
        padding-bottom: 40px;
        margin-top: 10px;
        clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 1.5s;
        animation-fill-mode:  backwards;
        margin-bottom: 50px;
    }
    .teacher-header {
        width: 100vw;
        text-align: center;
        background: linear-gradient(to left, #2f3126, #21221c, #2f3126);
        font-size: 28px;
        color: #fff;
        margin: auto;
        padding: 35px;
        padding-bottom: 35px;
        margin-top: 100px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 2.1s;
        animation-fill-mode:  backwards;
        margin-bottom: 80px;
    }
    .slider-element {
        /*padding-left: 30px;*/
    }
    .box-controls-direction .bx-prev, .box-controls-direction .bx-next{
        top: 230% !important;
    }
    .slwr {
        margin-top: 25px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 1.8s;
        animation-fill-mode: backwards;
    }
    .slwr .numbers {
        width: 50px; 
        line-height: 50px; 
        border-radius: 50%; 
        text-align: center; 
        background-color: #2f3126; 
        color: white; font-weight: bold;
        font-size: 20px;
        margin: auto;
        margin-bottom: 30px;
    }
    .diplom .numbers {
        border-radius: 50%; 
        text-align: center; 
        background-color: #2f3126; 
        color: white; font-weight: bold;
        font-size: 24px;
        margin: auto;
        padding: 10px;
        margin-right: 15px;
    }
    .diplom1 .numbers {
        border-radius: 50%; 
        text-align: center; 
        background-color: #2f3126; 
        color: white; font-weight: bold;
        font-size: 24px;
        margin: auto;
        padding: 10px;
        margin-right: 15px;
    }
    .slwr h1 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 15px;
    }
    .slider-element .list-option {
        font-size: 20px;
        text-align: center;
        padding-left: 20px;
        margin-bottom: 10px;
    }
    /*.slwr2 {
        width: 100vw;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 2.6s;
        animation-fill-mode:  backwards;
    }
    .slwr2 img {
        width: 100vw;
    }*/
    iframe {
        width: 60vw;
        height: 35vw;
        border: 0;
    }
    .main-iframe{
        width: 60vw;
        height: 35vw;
        margin: auto;
        margin-bottom: 28px;
        margin-top: 40px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 1.5s;
        animation-fill-mode:  backwards;
    }
    .teach-small {
        width: 100vw;
        margin-bottom: 20px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 2.8s;
        animation-fill-mode:  backwards;
    }
    .diplom {
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        margin-bottom: 40px;
    }
    .diplom .diplom-line {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;
        width: 17vw;
    }
    .diplom .diplom-line .numbers-diplom {
        width: 50px;
    }
    .diplom .diplom-line .text-diplom {
        width: 80%;
        line-height: 130%;
        margin-right: 15px;
        font-size: 17px;
    }
    
    .final-center-text {
        width: 100vw;
        margin: auto;
        font-size: 24px;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        color: #000;
        line-height: 150%;
        margin-top: 15px;
        margin-bottom: 50px;
    }
    .bue-block {
        opacity: 1;
        width: 100vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        padding: 20px;
        padding-left: 0px;
        padding-right: 0px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }
    .bue-block-main {
        opacity: 1;
        width: 50vw;
        margin: auto;
        background: linear-gradient(to left, #2f3126, #21221c, #2f3126);
        padding: 20px;
        padding-left: 0px;
        padding-right: 0px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 40px;
        margin-bottom: 50px;
    }
    .order-body {
        background-color: #ccc;
    }
    .order-ch {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bue-block-2 {
        box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
        width: 22vw;
        color: #fff;
        font-size: 24px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        background: linear-gradient(to left, #2f3126, #21221c);
        border-radius: 30px;
        padding: 25px;
        animation-duration: .5s;
        animation-name: showing;
        animation-fill-mode: backwards;
    }
    bue-block-2 label {
        font-size: 12px;
    }
    .bue-block-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .bue-block-main .bue-text {
        text-align: center;
        font-size: 24px;
    }
    .bue-page .bue-text {
        text-align: center;
        font-size: 18px;
        line-height: 150%;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 10px;
    }
    .main-page-a {
        text-decoration: none;
        color: #fff;
        outline: none;
    }
    .bue-page a {
        text-decoration: none;
        color: #fff;
        outline: none;
    }
    .bue-block-main .bue-result {
        text-align: center;
        font-size: 26px;
        font-weight: 700;
        margin-left: 14px;
    }
    .bue-block-main .bue-price {
        text-align: center;
        font-size: 34px;
        font-weight: 700;
        margin-top: 25px;
    }
    .bue-block-1 .numbers {
        width: 60px; 
        line-height: 60px; 
        border-radius: 50%; 
        text-align: center; 
        background-color: #fff; 
        color: #2f3126; 
        margin: auto;
        margin-left: 15px;
    }
    .bue-block-2 .bue-button:active{
        transform: scale(0.95);
    }
    
    .footer2 .bue-button {
        width: 40%;
        margin: auto;
        --border-width: 1px;
        text-align: center;
        font-size: 26px;
        margin-top: 25px;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 30px;
        border: 1px solid #fff;
    }
    .footer2 .bue-button a{
        font-size: 20px;
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
    }

    .bue-block-2 .bue-button {
        width: 70%;
        margin: auto;
        --border-width: 1px;
        text-align: center;
        font-size: 26px;
        margin-top: 25px;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 30px;
        border: 1px solid #fff;
    }
    .bue-block-2 .bue-button a{
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
    }
    .bue-block-main .bue-button:active {
        transform: scale(0.95);
    }
    .bue-block-main .bue-button a {
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
    }
    .bue-block-main .bue-button{
        margin: auto;
        --border-width: 1px;
        text-align: center;
        font-size: 26px;
        margin-top: 25px;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 30px;
        border: 1px solid #fff;
    }
    /*
    @keyframes borderRotate {
        100% {
            --angle: 420deg;
        }
    }
    .bue-block-main .bue-button, .bue-block-2 .bue-button {
        text-align: center;
        padding-top: 30px;
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 30px;
        font-size: 28px;
        margin-top: 45px;
        border: 2px solid #fff;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 20;
        animation: borderRotate var(--d) linear infinite forwards;
    }
    
    .box {
        border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
        animation: borderRotate var(--d) linear infinite forwards;
    }
   .bue-block .bue-button::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 140%;
        background-color: #fff;
        box-shadow: 0 0 20px rgb(8, 8, 8);
        animation: animate 2s linear infinite;
    }
    .bue-block .bue-button::after {
        content: '';
        position: absolute;
        inset: 10px;
        background-color: rgb(4, 75, 97);
        border-radius: 16px;
    }*/
    footer {
        width: 100vw;
        background-color: #2f3126;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 35px;
    }
    .footer2 {
        width: 100vw;
        height: 100vh;
        background-color: #2f3126;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 35px;
    }
    footer .footer {
        font-size: 14px;
        margin-bottom: 25px;
        margin-top: 10px;
    }
    footer svg {
        width: 35px;
    }
    footer .first {
        margin-right: 50px;
    }
    .footer-c {
        width: 100vw;
        background-color: #2f3126;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px;
        margin-top: 30px;
    }
    .footer-c .footer {
        font-size: 14px;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-right: 30px;
    }
    .footer-c svg {
        margin-top: 8px;
        width: 20px;
    }
    .footer-c .first {
        margin-right: 20px;
    }
    .courses-h1 {
        font-size: 18px;
        text-align: center;
        padding: 10px;
    }
    .courses-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .lection-name {
        width: 100vw;
        text-align: center;
        font-size: 18px;
        background: linear-gradient(to left, #2f3126, #21221c);
        padding-top: 20px;
        padding-bottom: 20px;
        color: #fff;
        margin-bottom: 20px;
    }
    .courses-buttons {
        width: 50vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .courses-button {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 25px;
        padding-right: 25px;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        font-size: 15px;
        border-radius: 20px;
    }
    .courses-button:hover{
        cursor: pointer;
    }
    .courses-button-first {
        visibility: hidden;
    }

    .dropbtn {
        background: linear-gradient(to left, #2f3126, #21221c);
        color: white;
        padding: 14px;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 18px;
        border: none;
        cursor: pointer;
        border-radius: 30px;
      }
      
      /* Dropdown button on hover & focus */
      .dropbtn:hover, .dropbtn:focus {
        background: linear-gradient(to left, #2f3126, #21221c);
      }
      
      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: block;
        margin: auto;
        margin-bottom: 15px;
        text-align: center;
      }
      
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        width: 25vw;
        display: none;
        position: absolute;
        right: 37.5vw;
        background-color: #f1f1f1;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        margin-top: 10px;
      }
      
      /* Links inside the dropdown */
      .dropdown-content a {
        text-align: left;
        color: black;
        padding: 12px 6px;
        text-decoration: none;
        display: block;
        font-size: 16px;
        padding-left: 20px;
      }
      
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {background-color: #ddd;}
      
      /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
      .show {display:block;}
      .userinfo-bye-2 {
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 30px;
        padding-right: 30px;
        font-size: 18px;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        border-radius: 30px;
        width: 30%;
        text-decoration: none;
        margin: auto;
    }
    .bb1 {
        padding-left:170px;
        padding-right:170px;
        line-height: 220%;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 1700px) {
    
    .form-user {
        width: 22vw;
    }
    .bue-block-2 {
        width: 22vw;
    }
}

@media screen and (max-width: 1500px) {
    .bb1 {
        padding-left:100px;
        padding-right:100px;
        line-height: 200%;
    }
    .form-user {
        width: 28vw;
    }
    .bue-block-2 {
        width: 28vw;
    }
}

@media screen and (max-width: 1300px) {
    .form-user {
        width: 32vw;
    }
    .bue-block-2 {
        width: 32vw;
    }
}

@media screen and (max-width: 1100px) {
    .form-user {
        width: 40vw;
    }
    .bue-block-2 {
        width: 40vw;
    }
}

@media screen and (max-width: 900px) {
    .bb1 {
        padding-left:5px;
        padding-right:5px;
        line-height: 170%;
        margin-bottom: 15px;
    }
    .userinfo-bye-2 {
        width: 80%;
        margin-top: 20px;
    }
    .demo-img {
        width: 100vw;
    }
    .demo-text {
        width: 100vw;
        margin: auto;
        border: 1px solid #e5e5e5;
        padding: 10px;
        line-height: 150%;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 14px;
        border-radius: 0px;
    }
    .userinfo-email {
        width: 100vw;
        margin: auto;
        text-align: center;
        font-size: 14px;
        margin-top: 10px;
    }
    .userinfo {
        width: 100vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    .userinfo-bye {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 14px;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        border-radius: 20px;
    }
    .userinfo a {
        text-decoration: none;
        cursor: pointer;
    }
    .userinfo div {
        margin-top: 10px;
    }
    .pochatok {
        width: 100vw;
        flex-direction: column;
        margin-bottom: 0px;
    }
    .teachers {
        width: 100vw;
        flex-direction: column;
        margin-bottom: 0px;
    }
    .teachers img {
        width: 100vw;
        border: none;
    }
    .teachers video {
        width: 100%;
        height: auto;
    }
    .teachers .video1 {
        margin-bottom: 30px;
    }
    .teachers .video2 {
        width: 100%;
        height: 177.78vw;
        margin: auto;
        display: block;
        object-fit: cover;
    }
    .top-header {display: block;}
    .header-small {display: block;}
    @keyframes showing2 {
        from {
          opacity: 0;
          transform: scale(0.5);
        }
      
        to {
          opacity: 1;
          transform: scale(1);
        }
    }
    @keyframes showing {
        from {
          opacity: 0;
        }
      
        to {
          opacity: 1;
        }
    }
    @keyframes slidein {
        from {
          transform: translateX(-50%);
          opacity: 0;
        }
      
        to {
          transform: translateX(0%);
          opacity: 1;
        }
    }
    @keyframes animate {
        from {
          transform: rotate(0deg);
        }
      
        to {
          transform: rotate(360deg);
        }
    }
    .desktop-menu {
        display: none;
    }
    .desk-str {
        display: none;
    }
    .header-text-desktop {
        display: none;
    }
    .form-user {
        box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px; 
        width: 94vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        font-size: 20px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        border-radius: 30px;
        animation-duration: .5s;
        animation-name: showing;
        padding-bottom: 30px;
    }
    .form-user-caption {
        padding: 12px;
        margin-top: 8px;
    }
    #promocode {
        padding: 12px;
        font-size: 16px;
        text-align: center;
        background: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        color: #fff;
        border: 1px solid #fff;
        width: 90%;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 20px;
        margin-top: 25px;
    }
    .form-user input {
        padding: 9px;
        font-size: 16px;
        text-align: center;
        background: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        color: #fff;
        border: 1px solid #777;
        width: 90%;
        margin: auto;
        margin-bottom: 15px;
        border-radius: 20px;
    }

    .form-user button {
        background: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
        color: #fff;
        padding: 16px;
        text-align: center;
        font-size: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        margin-bottom: 8px;
    }
    .form-user button .btn-user {
        border: none;
        outline: none;
        color: #fff;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 50px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .google-btn {
        outline: none;
        color: #fff;
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 50px;
        padding-top: 12px;
        padding-bottom: 12px;
        text-decoration: none;
        width: 85vw;
        margin: auto;
    }
    .register-body{
        background-color: #fff;
    }
    .register-body ul {
        list-style: none;
        width: 80vw;
        margin: auto;
        margin-top: 10px;
        text-align: center;
    }
    .register-body ul li {
        padding: 5px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 14px;
        color: #fff;
        margin-top: 2px;
        border-radius: 10px;
    }
    .register-body .error-login {
        width: 94vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        padding: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 14px;
        color: #fff;
        margin-top: 5px;
        border-radius: 10px;
    }
    .login-body {
        background-color: #ccc;
    }
    .login-body ul {
        list-style: none;
        width: 94vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
    }
    .login-body ul li {
        padding: 5px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 14px;
        color: #fff;
        margin-top: 5px;
        border-radius: 10px;
    }
    .login-body .error-login {
        width: 94vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        padding: 20px;
        background: rgb(231, 12, 12, 0.5);
        font-size: 18px;
        color: #fff;
        margin-top: 5px;
        border-radius: 10px;
    }
    .success-login {
        width: 94vw;
        margin: auto;
        margin-top: 30px;
        text-align: center;
        padding: 10px;
        background: #fff;
        font-size: 14px;
        color: #000;
        margin-top: 5px;
        border-radius: 10px;
        text-align: center;
    }
    .bottom-icons {
        z-index: 10001;
        position: fixed;
        right: 8px;
        bottom: 8px;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        opacity: 0.9;
        background-color: #2f3126;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 30px;
        animation-duration: .8s;
        animation-name: showing;
        animation-fill-mode: backwards;
        animation-delay: 3s;
    }
    .bottom-icons svg {
        width: 45px;
        height: 45px;
    }
    .bottom-icons .first{
        margin-right: 30px;
    }
    .top-header-next {
        z-index: 10000;
        width: 100vw;
        height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px;
        opacity: 0;
        background-color: #2f3126;
        border-bottom: 1px solid #f1f1f1;
    }
    .el-show {
        position: fixed;
        top: 0;
        opacity: 0.95;
    }
    .el-show2 {
        position: fixed;
        top: 0;
        opacity: 1;
    }
    .phone1 a{
        text-decoration: none;
        color: #fff;
        font-size: 19px;
    }
    .bye-button {
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        color: #fff;
        font-size: 19px;
        border: 1px solid #fff;
        border-radius: 20px;
    }

    .header-big {
        display: none;
        animation-duration: .4s;
        animation-name: showing;
        animation-fill-mode: backwards;
    }
    .header-small {
        animation-duration: .4s;
        animation-name: showing;
        animation-fill-mode: backwards;
    }
    .under-top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        margin-bottom: 15px;
        margin-top: 15px;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: .6s;
        animation-fill-mode: backwards;
    }
    .header-text {
        width: 80vw;
        font-size: 18px;
        text-align: center;
    }
    .header-text-2 {
        width: 90vw;
        font-size: 18px;
        text-align: center;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .under-top .menu {
        width: 12vw !important;
        display: flex;
        position: relative;
        z-index: 15000;
        align-items: center;
        justify-content: flex-end;
        margin-right: 15px;
        height: 25px;
    }
    .under-top .menu span {
        height: 4px;
        width: 60%;
        transform: scale(1);
        background-color: #000;
    }
    .under-top .menu::before, .under-top .menu::after {
        content: '';
        position: absolute;
        height: 4px;
        width: 80%;
        background-color: #000;
        transition: all 0.3s ease 0s;
    }
    .under-top .menu::before {
        top:0;
    }
    .under-top .menu::after {
        bottom:0;
    }
    .under-top .menu.active span {
        transform: scale(0);
    }
    .under-top .menu.active::before {
        top: 42%;
        transform: rotate(-45deg) translate(0, -50%);
    }
    .under-top .menu.active::after {
        bottom: 50%;
        transform: rotate(45deg) translate(0, 50%);
    }
    .under-top-wmenu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu {
        width: 100vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #000;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-around;
        height: 0px;
        -moz-transition: height .5s;
        -ms-transition: height .5s;
        -o-transition: height .5s;
        -webkit-transition: height .5s;
        transition: height .5s;
        overflow: hidden;
        padding-right: 20px;
    }
    .mobile-menu a {
        display: block;
        text-decoration: none;
        color: #fff;
        font-size: 18px;
    }
    .mobile-menu a:first-child {
        margin-top: 15px;
    }
    .mobile-menu a:last-child {
        margin-bottom: 15px;
    }
    .mobile-menu div {
        margin-top: 10px;
    }
    .mobile-menu div:last-child {
        margin-bottom: 10px;
    }
    .mobile-menu div:first-child {
        margin-top: 10px;
    }
    .text-top-1 {
        text-align: center;
        width: 100vw;
        font-size: 16px;
        padding: 15px;
        padding-top: 25px;
        padding-bottom: 25px;
        margin:auto;
        /*background-color: #2f3126;*/
        background: linear-gradient(to right, 
    rgba(47, 49, 38, 0.85) 0%, 
    rgba(10, 12, 8, 0.85) 20%, 
    rgba(10, 12, 8, 0.85) 80%, 
    rgba(47, 49, 38, 0.85) 100%
);
        border-radius: 0px;
        color: white;
        line-height: 165%;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: .9s;
        animation-fill-mode: backwards;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
        border: none;
    }
    .banner01 {
        width: 100vw;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: 1.05s;
        animation-fill-mode: backwards;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
        border-radius: 0px;
        margin-top: 0;
        margin-bottom: -12px;
    }
    .text-top-2 {
        text-align: center;
        width: 100vw;
        font-size: 16px;
        padding: 15px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin:auto;
        background-color: transparent;
        border-radius: 0px;
        color: #000;
        line-height: 165%;
        margin-top: 10px;
        animation-duration: .4s;
        animation-name: slidein;
        animation-delay: 1.2s;
        animation-fill-mode: backwards;
        box-shadow: none;
        border-bottom: none;
        border-top: none;
    }
    .program-header {
        width: 100vw;
        text-align: center;
        background: linear-gradient(to right, 
    rgba(47, 49, 38, 0.85) 0%, 
    rgba(10, 12, 8, 0.85) 20%, 
    rgba(10, 12, 8, 0.85) 80%, 
    rgba(47, 49, 38, 0.85) 100%
);
        font-size: 22px;
        color: #fff;
        margin: auto;
        padding: 20px;
        padding-bottom: 27px;
        margin-top: 10px;
        clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 1.5s;
        animation-fill-mode:  backwards;
    }
    .teacher-header {
        width: 100vw;
        text-align: center;
        background: linear-gradient(to left, #2f3126, #21221c);
        font-size: 22px;
        color: #fff;
        margin: auto;
        padding: 15px;
        padding-bottom: 15px;
        margin-top: 10px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 2.1s;
        animation-fill-mode:  backwards;
    }
    .slider-element {
        /*padding-left: 30px;*/
    }
    .box-controls-direction .bx-prev, .box-controls-direction .bx-next{
        top: 230% !important;
    }
    .slwr {
        margin-top: 25px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 1.8s;
        animation-fill-mode: backwards;
    }
    .slwr .numbers {
        width: 50px; 
        line-height: 50px; 
        border-radius: 50%; 
        text-align: center; 
        background-color: #2f3126; 
        color: white; font-weight: bold;
        font-size: 20px;
        margin: auto;
        margin-bottom: 15px;
    }
    .diplom .numbers {
        line-height: 10vw; 
        border-radius: 50%; 
        text-align: center; 
        background-color: #2f3126; 
        color: white; font-weight: bold;
        font-size: 18px;
        margin: auto;
    }
    .diplom1 .numbers {
        line-height: 10vw; 
        border-radius: 50%; 
        text-align: center; 
        background-color: #2f3126; 
        color: white; font-weight: bold;
        font-size: 18px;
        margin: auto;
    }
    .slwr h1 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 15px;
    }
    .slider-element .list-option {
        font-size: 16px;
        padding-left: 20px;
        margin-bottom: 10px;
    }
    /*.slwr2 {
        width: 100vw;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 2.6s;
        animation-fill-mode:  backwards;
    }
    .slwr2 img {
        width: 100vw;
    }*/
    iframe {
        width: 100vw;
        height: 56vw;
        border: 0;
    }
    .teach-small {
        width: 100vw;
        margin-bottom: 20px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 2.8s;
        animation-fill-mode:  backwards;
    }
    .diplom {
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        margin-bottom: 0px;
    }
    .diplom .diplom-line {
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .diplom .diplom-line .numbers-diplom {
        width: 16vw;
    }
    .diplom .diplom-line .text-diplom {
        width: 75vw;
        line-height: 130%;
        margin-right: 15px;
        font-size: 18px;
    }
    .diplom .diplom-line-first {
        margin-top: 20px;
    }
    .final-center-text {
        width: 90vw;
        margin: auto;
        font-size: 19px;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        color: #000;
        line-height: 150%;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .bue-block {
        opacity: 1;
        width: 100vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        padding: 20px;
        padding-left: 0px;
        padding-right: 0px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
    }
    
    .bue-block-main {
        opacity: 1;
        width: 100vw;
        background: linear-gradient(to left, #2f3126, #21221c);
        padding: 20px;
        padding-left: 0px;
        padding-right: 0px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 0px;
        margin-bottom: 30px;
    }
    .order-body {
        background-color: #ccc;
    }
    .bue-block-2 {
        box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
        width: 94vw;
        color: #fff;
        font-size: 24px;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        background: linear-gradient(to left, #2f3126, #21221c);
        border-radius: 30px;
        padding: 25px;
        animation-duration: .5s;
        animation-name: showing;
        animation-fill-mode: backwards;
    }
    .bue-block-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .bue-block-main .bue-text {
        text-align: center;
        font-size: 20px;
    }
    .bue-page .bue-text {
        text-align: center;
        font-size: 20px;
        line-height: 150%;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
    }
    .main-page-a {
        text-decoration: none;
        color: #fff;
        outline: none;
    }
    .bue-page a {
        text-decoration: none;
        color: #fff;
        outline: none;
    }
    .bue-block-main .bue-result {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        margin-left: 14px;
    }
    .bue-block-main .bue-price {
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        margin-top: 25px;
    }
    .bue-block-1 .numbers {
        width: 60px; 
        line-height: 60px; 
        border-radius: 50%; 
        text-align: center; 
        background-color: #fff; 
        color: #2f3126; 
        margin: auto;
        margin-left: 15px;
    }
    .bue-block-2 .bue-button:active{
        transform: scale(0.95);
    }
    .bue-block-2 .bue-button {
        width: 80%;
        margin: auto;
        --border-width: 1px;
        text-align: center;
        font-size: 26px;
        margin-top: 25px;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 30px;
        border: 1px solid #fff;
    }
    .bue-block-2 .bue-button a{
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
    }
    .bue-block-main .bue-button:active {
        transform: scale(0.95);
    }
    .bue-block-main .bue-button a {
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
    }
    .bue-block-main .bue-button{
        width: 95%;
        margin: auto;
        --border-width: 1px;
        text-align: center;
        font-size: 26px;
        margin-top: 25px;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 30px;
        border: 1px solid #fff;
        animation: gradient2 5s alternate infinite;
    }
    .main-iframe{
        width: 100vw;
        height: 56vw;
        margin-bottom: 20px;
        margin-top: 20px;
        animation-duration: .5s;
        animation-name: slidein;
        animation-delay: 1.5s;
        animation-fill-mode:  backwards;
    }
    @keyframes gradient {
        50% {
            opacity: 0.7;
        }
    }
    @keyframes gradient2 {
        10% {background-color: transparent;}
        30% {background-color: transparent;}
        40% {background-color: #2f3126;}
        50% {background-color: #2f3126;}
        80% {background-color: transparent;}
        100% {background-color: transparent;}
    }
    @keyframes moveGradient {
        50% {
          background-position: 100% 50%;
        }
    }
    /*
    @keyframes borderRotate {
        100% {
            --angle: 420deg;
        }
    }
    .bue-block-main .bue-button, .bue-block-2 .bue-button {
        text-align: center;
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
        font-size: 26px;
        margin-top: 25px;
        border: 2px solid #fff;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 20;
        animation: borderRotate var(--d) linear infinite forwards;
    }
    
    .box {
        border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
        animation: borderRotate var(--d) linear infinite forwards;
    }
   .bue-block .bue-button::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 140%;
        background-color: #fff;
        box-shadow: 0 0 20px rgb(8, 8, 8);
        animation: animate 2s linear infinite;
    }
    .bue-block .bue-button::after {
        content: '';
        position: absolute;
        inset: 10px;
        background-color: rgb(4, 75, 97);
        border-radius: 16px;
    }*/
    footer {
        width: 100vw;
        background-color: #2f3126;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 35px;
    }
    .footer2 {
        width: 100vw;
        height: 100vh;
        background-color: #2f3126;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 35px;
    }
    .footer2 .bue-button {
        width: 70%;
        margin: auto;
        --border-width: 1px;
        text-align: center;
        font-size: 26px;
        margin-top: 25px;
        margin-bottom: 25px;
        font-weight: 700;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border-radius: 30px;
        border: 1px solid #fff;
    }
    .footer2 .bue-button a{
        font-size: 20px;
        padding-top: 20px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 20px;
    }
    footer .footer {
        font-size: 14px;
        margin-bottom: 25px;
        margin-top: 10px;
    }
    footer svg {
        width: 35px;
    }
    footer .first {
        margin-right: 50px;
    }
    .footer-c {
        width: 100vw;
        background-color: #2f3126;
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        position: fixed;
        bottom: 0;
    }
    .footer-c .footer {
        font-size: 14px;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    .footer-c svg {
        margin-top: 8px;
        width: 20px;
    }
    .footer-c .first {
        margin-right: 20px;
    }
    .courses-h1 {
        font-size: 14px;
        text-align: center;
        padding: 15px;
    }
    .courses-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .lection-name {
        width: 100vw;
        text-align: center;
        font-size: 15px;
        background: linear-gradient(to left, #2f3126, #21221c);
        padding-top: 10px;
        padding-bottom: 10px;
        color: #fff;
    }
    .courses-buttons {
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 5px;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 40px;
    }
    .courses-button {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 25px;
        padding-right: 25px;
        background: linear-gradient(to left, #2f3126, #21221c);
        color: #fff;
        font-size: 15px;
        border-radius: 20px;
    }
    .courses-button-first {
        visibility: hidden;
    }

    .dropbtn {
        background: linear-gradient(to left, #2f3126, #21221c);
        color: white;
        padding: 12px;
        padding-left: 25px;
        padding-right: 25px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        border-radius: 20px;
      }
      
      /* Dropdown button on hover & focus */
      .dropbtn:hover, .dropbtn:focus {
        background: linear-gradient(to left, #2f3126, #21221c);
      }
      
      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: block;
        margin: auto;
        margin-bottom: 15px;
        text-align: center;
      }
      
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        width: 90vw;
        display: none;
        position: absolute;
        right: 5%;
        background-color: #f1f1f1;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        margin-top: 10px;
      }
      
      /* Links inside the dropdown */
      .dropdown-content a {
        text-align: left;
        color: black;
        padding: 8px 6px;
        text-decoration: none;
        display: block;
        font-size: 15px;
        padding-left: 20px;
      }
      
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {background-color: #ddd;}
      
      /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
      .show {display:block;}
      .oferta {
        display: flex;
        padding: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
      }
      .oferta-1 {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 17px;
        text-align: center;
        font-weight: 600;
      }
      .oferta-2 {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 17px;
        text-align: center;
      }
      .oferta-3 {
        margin-top: 20px;
        margin-bottom: 15px;
        font-size: 16px;
        text-align: center;
      }
      .oferta-4 {
        margin-bottom: 9px;
        font-size: 15px;
        text-align: left;
      }
}
/* ==================================================
   Стили для шапки в один ряд (десктоп)
   ================================================== */

/* --- Стили для больших экранов (больше 900px) --- */
.header-row-container {
    display: flex; /* Включаем Flexbox! */
    align-items: center; /* Выравниваем все по центру по вертикали */
    justify-content: space-between; /* Распределяем пространство */
    gap: 20px; /* Отступ между элементами */
    max-width: 1280px; /* Ограничим ширину для красоты */
    margin: 0 auto; /* Центрируем сам контейнер */
    padding: 20px;
}

/* Переопределяем старые стили, которые могут мешать */
.header-row-container .top-header {
    display: block !important; /* ВАЖНО: возвращаем видимость заголовку */
    flex-grow: 1; /* Разрешаем заголовку занять всё свободное место */
    text-align: center;
}
.header-row-container .courses-h1-mobile {
    font-size: 28px;
}

.header-row-container .userinfo {
    width: auto; /* Сбрасываем старую ширину 80vw/100vw */
    margin: 0;   /* Сбрасываем отступы */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Контент внутри выравниваем вправо */
    font-size: 16px;
    flex-shrink: 0; /* Не сжимать блок */
}

.header-row-container .header-logo-container {
    flex-shrink: 0; /* Не сжимать логотип */
}
.header-row-container .header-logo {
    width: 60px; /* Размер лого на десктопе */
}


/* ==================================================
   Стили для шапки в один ряд (десктоп) - ВЕРСИЯ 2
   ================================================== */

/* --- Стили для больших экранов (больше 900px) --- */
.header-row-container {
    display: flex;
    align-items: center;
    /* ИЗМЕНЕНИЕ №1: Заменяем 'space-between' на 'space-around' */
    justify-content: space-around; /* Элементы равномерно распределятся по всей ширине, с отступами по краям */
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    margin-bottom: -10px;
}

/* Переопределяем старые стили, которые могут мешать */
.header-row-container .top-header {
    display: block !important;
    flex-grow: 1; 
    text-align: center;
}
.header-row-container .courses-h1-mobile {
    font-size: 28px;
}

.header-row-container .userinfo {
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 16px;
    flex-shrink: 0;
}

.header-row-container .header-logo-container {
    flex-shrink: 0;
}
.header-row-container .header-logo {
    /* ИЗМЕНЕНИЕ №2: Увеличиваем размер логотипа */
    width: 100px; 
}


/* --- Возвращаем всё как было на мобильных (меньше 900px) --- */
@media (max-width: 900px) {
    .header-row-container {
        display: block; 
        border-bottom: none;
        margin-bottom: 0;
        padding: 10px 0;
    }

    /* Возвращаем оригинальные стили для лого */
    .header-row-container .header-logo {
        width: 30vw;
        margin: auto;
        display: block;
    }

    /* Возвращаем оригинальные стили для заголовка */
    .header-row-container .courses-h1-mobile {
        font-size: 14px;
        text-align: center;
    }

    /* Возвращаем оригинальные стили для инфо-блока */
    .header-row-container .userinfo {
        width: 100vw;
        margin: auto;
        align-items: center;
        font-size: 15px;
        padding: 15px;
    }
    
    .header-row-container .userinfo > div {
        width: 100%;
        margin-top: 10px;
    }
}
/* --- СТАРЫЕ СТИЛИ (МОЖНО УДАЛИТЬ) --- */
/*
.progress-bar { display: flex; gap: 4px; margin-top: 8px; }
.progress-bar-item { width: 20px; height: 20px; background-color: #e9ecef; border: 1px solid #ccc; flex-shrink: 0; }
.progress-bar-item.completed { background-color: #28a745; border-color: #208338; }
.progress-bar-item.active { background-color: #007bff; border-color: #0056b3; animation: pulse 2s infinite; }
*/


/* --- НОВЫЕ СТИЛИ ДЛЯ НЕПРЕРЫВНОГО ПРОГРЕСС-БАРА --- */
.new-progress-bar {
    position: relative; /* Основа для позиционирования дочерних элементов */
    width: 100%;
    height: 12px; /* Высота нашей полоски */
    margin-top: 12px;
}

.progress-track {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #EBF0E0; /* Цвет фона (непройденной части) */
    border-radius: 6px; /* Скругляем углы */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); /* Легкая внутренняя тень для объема */
}

.progress-fill {
    position: absolute;
    height: 100%;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%); /* Красивый градиент для прогресса */
    border-radius: 6px;
    transition: width 0.6s ease-in-out; /* Плавная анимация при загрузке */
}

.progress-marker {
    position: absolute;
    top: 50%; /* Располагаем по центру вертикали */
    transform: translateY(-50%); /* Точно центрируем, даже если высота изменится */
    width: 22px;
    height: 22px;
    background-color: #007bff; /* Цвет маркера текущего урока */
    border: 3px solid #fff; /* Белая обводка, чтобы он выделялся на любом фоне */
    border-radius: 50%; /* Делаем его круглым */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.7); /* Тень для свечения */
    animation: pulse 2s infinite; /* Используем твою же анимацию пульсации */
    transition: left 0.6s ease-in-out; /* Плавное перемещение маркера */
    z-index: 2; /* Маркер должен быть выше всех */
}

/* Анимация пульсации (она у тебя уже есть, но на всякий случай) */
@keyframes pulse { 
    0% { transform: translateY(-50%) scale(1); } 
    50% { transform: translateY(-50%) scale(1.1); } 
    100% { transform: translateY(-50%) scale(1); } 
}

/* Чтобы контейнер со скроллом не был нужен, но на всякий случай оставим.
   С новой версткой он не должен активироваться. */
.progress-container { 
    margin-top: 5px; 
    /* overflow-x: auto; - это правило больше не нужно, т.к. полоска не выходит за рамки */
}

.video-container {
  position: relative;
  width: 100%; /* Занимает всю доступную ширину родителя */
  padding-bottom: 56.25%; /* Соотношение сторон 16:9 (высота = 9/16 ширины) */
  height: 0;
  overflow: hidden;
  margin: auto; /* Для центрирования контейнера на десктопе */
}

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

/* Мобильная версия: видео занимает 95% ширины видимой части экрана (viewport width) */
@media (max-width: 768px) { /* Например, для экранов шириной до 768px */
  .video-container {
    width: 95vw; /* 95% ширины видимой части экрана */
    padding-bottom: calc(95vw * 9 / 16); /* Сохраняем соотношение сторон 16:9 */
    margin: auto; /* Центрирование */
  }
}

/* Десктопная версия: я рекомендую установить максимальную ширину для видео,
   чтобы оно не было слишком большим на очень широких экранах, но при этом оставалось отзывчивым.
   Например, максимальная ширина 800px или 1000px, и центрирование. */
@media (min-width: 769px) { /* Например, для экранов шириной от 769px */
  .video-container {
    max-width: 900px; /* Максимальная ширина видео на десктопе */
    margin: 20px auto; /* Центрирование и небольшой отступ сверху/снизу */
  }
}