/* --- style_video.css - Общие стили  ВИДЕО --- */
   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
  }

    body {
        font-family: Arial, sans-serif;
        background-color:  #fafaf0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
  }

                            /* ---  Ш А П К А  Новый стиль для шапки на другой странице --- */
                                           /* --- Версия для ПК --- */

  header {
        background-color:  #f6fbff;  /* #f2f3f8;  /* #f6f6f6;  Фон шапки */
        height: 200px;    /* Фиксированная высота шапки */
        padding: 5px 20px;  /* 10px; - Задает верхний и нижний отступы.  10px - Задает левый и правый отступы */
        display: flex;  /* Flexbox для расположения элементов */
        justify-content: space-between; /* Распределение элементов */
        align-items: center; /* Выравнивание по вертикали */
        position: relative; /* Относительное позиционирование */
        z-index: 10;  /* Порядок отображения */
  }

   .header-content {
        display: flex; /* Flexbox для центрирования */
        flex-direction: column; /* Элементы сверху вниз */
        align-items: center; /* Центрирование по горизонтали */
        justify-content: center; /* Центрирование по вертикали */
        height: 100%;  /* Контейнер занимает всю высоту шапки */
 }

   .header-image {
        height: 200px;  /* Изображение занимает всю высоту родительского блока */
        width: auto;  /* Пропорциональное масштабирование ширины */
        object-fit: contain; /* Сохраняет пропорции изображения. Могут быть пустые области сверху/снизу или слева/справа) */
       /* object-fit: cover; /* Сохраняем пропорции и обрезаем лишнее */
        flex-shrink: 0; /* Запрещаем сжатие изображения */
  }




   .logo-container {
        display: flex;    /* Использование Flexbox для расположения элементов */
        width: 150px;   /* Фиксированная ширина контейнера для логотипа */
        justify-content: center;  /* Выравнивает содержимое по центру по горизонтали */
        gap: 10px;    /* Расстояние между элементами внутри контейнера (например, между логотипом и текстом) */
        /* margin-left: 0px;     /* Отступ слева — расстояние от левого края шапки до логотипа */
        /* align-items: center;    /* Выравнивает содержимое по центру по вертикали */
  }


   .logo {
        width: 85px;
        height: auto;
  }


                            /* --- Телефон в правой части шапки — по центру правого столбца --- */
   .phone-container {
        display: flex;
        flex-direction: column;
        width: 150px;
        align-items: center;
        justify-content: center;
        gap: 5px;
  }

   .phone-icon {
        width: 45px;
        height: auto;
  }

   .phone-number {
        font-size: 16px;
        color: #0000ff;
        display: block;    /* Номер телефона виден на десктопе */
  }

   .mobile-phone-number {
        display: none;      /* Номер телефона под Картинкой  скрыт на десктопе */
        font-size: 14px; /* Размер текста */
        color: #0000ff;  /* Цвет текста */
        text-align: center; /* Выравнивание по центру */
        margin-top: 5px;    /* Отступ сверху */
 }


                                /* --- Основной макет --- */
   .main-layout {
        display: flex;
        flex: 1;
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
  }

                                 /* --- ЛЕВЫЙ столбец (меню) --- */
   .sidebar-left {
        width: 150px;     /* Фиксированная ширина левого меню */
        background-color: #e6f2ff;   /* Светло-голубой фоновый цвет */
        padding: 15px 0;   /* Отступы сверху и снизу 15px, по бокам 0 */
        display: flex;    /* Использование Flexbox для вертикального расположения */
        flex-direction: column;   /* Элементы располагаются в колонку */
        align-items: center;   /* Выравнивание элементов по центру */
        gap: 5px;     /* Расстояние между элементами 5px */
                  /* Не фиксирован — встроен в макет для ПК */
 }



   .menu-item {
        width: 100%;  /* Ширина кнопок (например, 90% от ширины левого столбца) */
        padding: 8px 12px;   /* Внутренние отступы: сверху/снизу 8px,  по бокам 10px */
        margin: 2px 2px;     /* Расстояние между кнопками (сверху и снизу) */
        background-color: #99ccff;  /* Цвет фона кнопок (голубой) */
        font-weight: bold;   /* Полужирный текст */
        border-radius: 5px;  /* Скругленные углы кнопок */
        text-align: center;  /* Текст по центру */
        font-size: 14px;    /* Размер шрифта 14px */
        color: #000070;      /* Цвет текста темно-синий */
        text-decoration: none;      /* Убрано подчеркивание текста */
        transition: background-color 0.2s;   /* Плавный переход цвета за 0.2 секунды */
 }


   .menu-item:hover {
        background-color: #f9ffea;   /* Цвет фона при наведении (темнее) */
  }



                                        /* --- ЦЕНТРАЛЬНЫЙ  БЛОК --- */

   .main-content {
        flex: 1;         /* Занимает всё доступное пространство в контейнере */
        padding: 10px;  /* Внутренние отступы по всем сторонам: 20px */
        display: flex;  /* Использование Flexbox для расположения элементов */
        flex-direction: column;  /* Элементы располагаются в колонку (вертикально) */
        align-items: center;   /* Выравнивает содержимое по центру по горизонтали */
        justify-content: center;  /* Выравнивает содержимое по центру по вертикали */
        min-height: 500px;   /* Минимальная высота блока — 500px, чтобы контент не сжимался слишком сильно */
  }


                           /*  ЗАГОЛОВОК ВЕРХ СТРАНИЦЫ  Стиль для родительского блока */
   .custom-block {
        max-width: 900px;   /* Максимальная ширина для десктопа */
        width: 100%;    /* Блок занимает всю доступную ширину контейнера */
        margin: 0 auto;
        background-color: #c4e1ff;
        padding: 6px;
        border-radius: 6px;
        display: flex;      /* Используем Flexbox для центрирования содержимого */
        justify-content: center; /* Центрируем содержимое по горизонтали */
        align-items: center;     /* Центрируем содержимое по вертикали */
        text-align: center;    /* Выравниваем текст внутри параграфа по центру */
        box-sizing: border-box;    /* Учитываем padding и border в размерах блока */
  }

   .custom-block p {
        color: #0000ff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-weight: bold;
        word-spacing: 10px; /* Увеличивает расстояние между словами */
        margin: 0;
 }



   .form-text li:last-child {
       border-bottom: none;
 }


                                  /* Общие стили для всех ССЫЛОК на странице */
   a {
        color: #1414FF;        /* Синий цвет ссылок */
        text-decoration: none; /* Убираем подчеркивание */
        transition: color 0.3s ease; /* Плавный переход при наведении */
 }

                            /* Эффект при наведении на ссылку */
   a:hover {
        color: #00009E; /* Более темный оттенок синего */
 }




   .divider {                              /* Горизонтальная  линия  */
        width: 90%;   /* Ширина линии */
        height: 3px;   /* Толщина линии */
        background-color: #007000; /* Цвет линии */
        margin: 40px 0; /* Отступы сверху и снизу */
        border: none;  /* Убираем границу */
  }



   .text-box {                       /* фон для блока ТЕКСТА */
        background-color: #ebffe4;   /* Цвет фона */
        padding: 10px;       /* Внутренние отступы */
        border: 1px solid #cccccc;   /* Рамка */
        width: 520px;     /* Ширина блока */
        margin: 0 auto;    /* Центрирование блока */
        text-align: justify;   /* Выравнивание текста по ширине */
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        font-weight: bold;
        color: #0000F5;
  }



                                        /* ВИДЕО - Базовые стили */

   .media-gallery {
        display: grid;   /* Используем CSS Grid */
       /* display: flex;  */
        flex-wrap: wrap;   /* Важно для переноса элементов */
        grid-template-columns: repeat(2, 1fr);  /* Два столбца */
        gap: 10px; /* Отступ между видео */
        max-width: 1000px; /* Максимальная ширина контейнера */
        margin: 0 auto;   /* Центрируем контейнер */
 }

                                    /* Стили для отдельного видео */
   .video-item {
        text-align: center;  /* Центрируем текст и видео */
 }

                                    /* Стили для контейнера видео */
   .video-container {
        position: relative;
        width: 450px;   /* Фиксированная максимальная ширина видео */
        margin: 0 auto;  /* Центрируем видео */
 }


   .video-container video,
   .video-container iframe {
        width: 100%;   /* Видео занимает всю ширину контейнера */
        height: auto;  /* Пропорциональная высота */
        aspect-ratio: 16 / 9;   /* Сохраняем соотношение сторон */
        border-radius: 8px;   /* Скругленные углы */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Легкая тень */
 }

                                        /* Стили для описания видео */
   .video-description {
        font-size: 16px; /* Размер шрифта */
        color: #000000; /* Цвет текста */
        margin-top: 6px; /* Отступ сверху */
  }






                                 /* Убираем  ФОТО ПОД ТЕКСТОМ  для ПК  */
   .mobile-image {
        display: none;  /* Скрываем изображение по умолчанию */
        text-align: center; /* Центрируем изображение */
        margin-top: 10px;  /* Отступ сверху */
 }




  form {
        display: flex;
        justify-content: center;  /* Центрирование кнопки */
        margin: 0 auto;   /* Автоматические отступы по бокам */
 }

                               /* ЗАПИСЬ  Кнопки  в  центральном блоке */
   .zapis-btn  {
        background-color: #389CFF; /* Цвет фона кнопки */
        border: none;  /* Убирает границу */
        width: auto;
        height: 35px;
        color: white;     /* Белый цвет текста */
        font-size: 16px;  /* Размер текста на кнопке */
        padding: 8px 10px;    /* Внутренние отступы для текста внутри кнопки- сверху/снизу 6px, слева/справа 5px */
        border-radius: 4px;   /* Скругляет углы кнопки */
        text-align: center;  /* Выравнивает текст по центру */
        text-decoration: none;  /* Убирает подчеркивание у ссылки */
        margin-bottom: 0px;    /* Отступ снизу */
        display: inline-block;  /* Делает кнопку блочным элементом */
        cursor: pointer;   /* Курсор "рука" при наведении */
 }


   .zapis-btn:hover {
        background-color:  #0037db;    /* Темно-синий цвет при наведении */
 }










                                          /* --- П О Д В А Л --- */
 footer {
        width: 100%;   /* На всю ширину экрана */
        padding: 15px 10px;    /* 10px — это отступ сверху и снизу = 15px — это отступ слева и справа */
        font-size: 16px;   /* Размер шрифта */
        background-image: url('https://www.shkola-sobak.ru/fon-briz.jpg'); /* Фоновое изображение */
        background-size: cover;    /* Фон покрывает всю область */
        background-repeat: no-repeat;    /* Фон не повторяется */
       /* height: 50px;     /* Фиксированная высота подвала */
        height: auto;    /* Высота автоматическая (адаптируется под содержимое) */
        flex-direction: row;   /* Элементы в одну строку */
        text-align: center;   /* Текст по центру */
        display: flex;   /* Делает футер гибким контейнером */
        align-items: center;   /* Выравнивание содержимого по вертикали (по центру) */
        justify-content: center;    /* Выравнивание содержимого по горизонтали (по центру) */
  }



                              /* --- Бургер-меню --- */
   .burger-menu {
        display: none;
        flex-direction: column;
        cursor: pointer;
        gap: 4px;
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 11;
  }

   .burger-menu div {
        width: 25px;
        height: 3px;
        background-color: #000;
        transition: 0.3s;
 }



                                       /* --- ===============================
                                          М О Б И Л Ь Н А Я   В Е Р С И Я --- */
  @media (max-width: 768px) {
   .main-layout {
        flex-direction: column;
  }

                            /* --- ИСПРАВЛЕНО: меню теперь правильно позиционируется и выдвигается --- */
   .sidebar-left {
        position: fixed;
        top: 110px;
        left: 0;
        bottom: 50px;
        width: 150px;
        background-color: #e6f2ff;
        padding: 15px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transform: translateX(-150px); /* Скрыто по умолчанию */
        z-index: 100;
 }

   .sidebar-left.active {
        transform: translateX(0); /* Выдвигается при активации */
 }

   .main-content, .sidebar-right {
        width: 100%;
        padding: 15px;
  }

   .sidebar-right {
        order: 2;
        position: static;   /* Возвращаем правый столбец в поток */
  }

   .main-content {
        order: 1;
  }


   .phone-icon {
        display: none;    /* Скрываем картинку телефона на маленьких экранах */
  }

   .phone-number {
        display: none;    /* Скрываем  номер телефона  для мобильной версии */
  }


   header {
       /* height: 150px;    /* Фиксированная высота ШАПКИ для  Мобильной версии */
        height: auto; /
        flex-direction: column; /* Элементы сверху вниз */
       /* align-items: center;   /* Центрирование по горизонтали */
        justify-content: center; /* Центрирование по вертикали */
        height: auto;    /* Автоматическая высота шапки */
        padding: 10px;   /* Уменьшенные отступы */
  }


                                  /*  ЛОГО  Шапка   */
   .logo-container {
        order: 1;      /* Логотип первый слева */
        align-self: flex-start;   /* Логотип остается слева */
        margin-right: 10px;     /* Увеличивает отступ справа от логотипа */
  }



   .header-content {
        order: 2;        /* Картинка и текст по центру */
        text-align: center;    /* Выравнивание текста по центру */
        margin-left:   auto; /* Картинка смещается к центру */
        margin-right:   auto; /* Картинка смещается к центру */
  }



   .header-image {
        max-height: 120px; /* Фиксированная высота картинки для мобильной версии */
        width: auto; /* Пропорциональное масштабирование ширины */
        object-fit: contain; /* Сохраняет пропорции изображения */
  }


                                            /* Стили для нового показа  номера телефона */
   .mobile-phone-number {
        display: block; /* Показываем номер телефона под картинкой */
        font-size: 16px;  /* Размер текста номера телефона */
        color: #0000ff;   /* Цвет текста номера телефона */
        text-align: center; /* Выравнивание по центру */
        display: block;    /* Делаем элемент блочным */
        margin-top: 5px;  /* Отступ сверху */
  }

   .phone-container {
        display: none;  /* Скрываем телефон справа для мобильной версии */
  }


   .custom-block {          /* Строка  ОГЛАВЛЕНИЕ  Централ. Блок  Мобильная  */
        flex-direction: column; /* Если нужно, элементы будут располагаться в колонку */
        padding: 10px;    /* Добавляем внутренние отступы для лучшего восприятия на маленьких экранах */
  }

   .custom-block p {
        font-size: 18px; /* Уменьшаем размер шрифта для мобильных устройств */
        margin: 0; /* Убираем внешние отступы, чтобы избежать конфликтов */
  }


   .center-text-container {
        max-width: 100%; /* Контейнер занимает всю ширину экрана */
        padding: 15px;   /* Уменьшаем внутренние отступы */
        font-size: 16px; /* Уменьшаем размер шрифта */
  }


   .text-box {
        max-width: 100%; /* Контейнер занимает всю ширину экрана */
        padding: 20px;   /* Уменьшаем внутренние отступы */
        font-size: 16px; /* Уменьшаем размер шрифта */
  }


                           /* Убираем  Правый столбец  для Мобил. версии */
   .sidebar-right {
        display: none;   /* Полностью скрываем элемент */
   }


                                        /* Стиль для  ФОТО под текстовым блоком в мобильной версии */

                            /* Показываем  Ф О Т О   в мобильной версии */
   .mobile-image {
        display: block;      /* Показываем Фото под Тектом  */

 }
   .mobile-image img {
       /* max-width: 100%; */
        max-width: 200px;    /* ограничить ширину изображения */
        height: auto;     /* Сохраняет пропорции */
        border-radius: 6px;  /* Легкое скругление углов */
       /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень для эффекта карточки */
  }

                        /* Стиль для  ФОТО в текстовым блоком в мобильной версии */
   .photo-row {
        flex-direction: column; /* Размещение фото вертикально */
        gap: 10px;   /* Уменьшаем промежуток между фото */
  }

   .photo-item {
        width: 100%;   /* Каждое фото занимает всю ширину контейнера */
  }


                            /* ВИДЕО - Блок Мобильн. */
   video {
        max-width: 350px; /* Максимальная ширина видео */
        width: 100%; /* Ширина видео адаптируется под экран */
        aspect-ratio: 3 / 4; /* Портретный формат */
        margin: 0 auto; /* Центрирование видео по горизонтали */
  }

   .media-gallery {
        grid-template-columns: 1fr;   /* Один столбец для мобильных устройств */
  }

   .video-item {
        width: 100%;  /* Одно видео в ряд */
  }


   .video-container iframe {
        max-width: 350px;   /* Уменьшаем максимальную ширину для мобильных устройств */
        width: 100%; /* Ширина видео адаптируется под экран */
  }

   .video-description {
        width: 350px; /* Фиксированная ширина для мобильных устройств */
        margin: 0 auto; /* Центрирование текста */
        word-wrap: break-word; /* Перенос длинных слов */
        overflow-wrap: break-word; /* Альтернативный перенос слов */
  }






                                 /*  БУРГЕР  МЕНЮ  Мобильная версия */
   .burger-menu {
        display: flex;
  }

   .burger-menu.active div:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
  }

   .burger-menu.active div:nth-child(2) {
        opacity: 0;
  }

   .burger-menu.active div:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
 }

   .main-image {
        max-width: 90%;
  }

   .info-button {
        width: 90%;
        max-width: 100%;
  }

   .price-btn {
        width: 100%;
  }

   .price-tag {
        width: 140px;
        height: 35px;
        text-align: center;  /* Выравнивает текст по центру */
  }

   .recall-photo img {
        width: 90%;
  }

   footer {
        flex-direction: column;   /* Располагает элементы в столбик */
        font-size: 12px;
        padding: 8px;
  }



    .styled-text {
        width: 100%;  /* Ширина станет равной ширине экрана */
        font-size: 16px; /* Уменьшаем размер шрифта для мобильных */
   }
 }