* {
           padding: 0;
           margin: 0;
           font-family: 'Roboto Condensed', sans-serif;
           font-size: 18px;
       }

       body {
           overflow-x: hidden;
           background-color: #ffffff;
           --fff: #fff;
           --fff_1: #f5f5f5;
           --grey: #ddd;
           --grey_1: #dee2e6;
           --grey_2: #808080;
           --green: #299f16;
           --green_1: #4CAF50;
           --blue: #2c70dd;
            --red: #ff0000;
            --orange: #ffc107;
            --dark: #000;
           --my-box-shadow: 0px 0px 8px 5px rgba(34, 60, 80, 0.2);
           --my-box-shadow-hover: 0px 0px 8px 5px rgba(34, 60, 80, 0.4);
           color: var(--dark);
       }

       .wrapper {
           max-width: 1350px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding: 0 15px;
           margin: 0 auto;
       }

       h1 {
           margin-top: 50px;
           margin-bottom: 30px;
           text-align: center;
           font-size: 28px;
           font-weight: bold;
       }

       h1 a {
           color: var(--dark);
           text-decoration: none;
           transition: all 0.3s ease;
       }

       h2 {
           margin-top: 25px;
           margin-bottom: 15px;
           text-align: center;
           font-size: 24px;
           font-weight: bold;
       }

       h3 {
           text-align: center;
           font-size: 22px;
           font-weight: bold;
           padding: 30px 0;
       }

       h4 {
           text-align: left;
           font-size: 20px;
           font-weight: bold;
           padding: 15px 0 10px;
       }

       .bold {
           font-weight: bold;
       }

       .txt_big {
           font-size: 20px;
       }

       .txt_red {
           color: var(--red);
       }

       .txt_green {
           color: var(--green);
       }

       .txt_underline {
           text-decoration: underline;
       }

       .mr-t-30 {
           margin-top: 30px;
       }

       .txt_content {
           font-size: 18px;
           max-width: 900px;
           margin: 0 auto;
           line-height: 1.6;
           margin-bottom: 20px;
       }

       .txt_content p {
           margin-bottom: 15px;
           font-size: 18px;
       }

       .txt_content_img {
           width: 100%;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 15px;
           margin: 20px 0;
       }

       .txt_content_img img {
           width: 100%;
           max-width: 220px;
           height: auto;
           border-radius: 8px;
           box-shadow: var(--my-box-shadow);
       }

       .txt_content ul {
           padding-left: 20px;
           margin-bottom: 20px;
       }

       .txt_content li {
           margin-left: 10px;
           margin-bottom: 10px;
           font-size: 18px;
           line-height: 1.6;
       }

       .display_none {
           display: none;
       }

       .table {
           width: 100%;
           margin-bottom: 1rem;
           color: var(--dark);
           border-collapse: collapse;
           display: table;
           border-spacing: 2px;
           margin: 30px auto;
           box-shadow: var(--my-box-shadow);
       }

       .table a {
           text-decoration: none;
           color: var(--blue);
           font-weight: bold;
       }

       tbody {
           display: table-row-group;
           vertical-align: middle;
       }

       .table-striped tbody tr:nth-of-type(odd) {
           background-color: var(--fff_1);
       }

       .table-striped tbody tr:nth-of-type(even) {
           background-color: var(--fff);
       }

       tr {
           display: table-row;
           vertical-align: inherit;
       }

       .table td,
       .table th {
           padding: 1rem;
           vertical-align: top;
           border-top: 1px solid var(--grey_1);
           text-align: left;
           word-wrap: break-word;
       }

       table th {
           background-color: var(--blue);
           color: var(--fff);
           text-align: center;
           font-weight: bold;
           font-size: 18px;
       }

       .table td {
           text-align: left;
           font-size: 16px;
       }

       /* Responsive table */
       @media screen and (max-width: 768px) {
           .table {
               display: block;
               width: 100%;
           }

           .table thead,
           .table tbody,
           .table tr,
           .table th,
           .table td {
               display: block;
           }

           .table thead tr {
               position: absolute;
               top: -9999px;
               left: -9999px;
           }

           .table tr {
               border: 1px solid var(--grey);
               margin-bottom: 1rem;
           }

           .table td {
               border: none;
               border-bottom: 1px solid var(--grey_1);
               position: relative;
               padding-left: 50%;
               text-align: right;
           }

           .table td:before {
               position: absolute;
               top: 6px;
               left: 6px;
               width: 45%;
               padding-right: 10px;
               white-space: nowrap;
               text-align: left;
               font-weight: bold;
               content: attr(data-label);
           }
       }

       .container_button_test {
           margin: 40px auto;
           text-align: center;
       }


       .rustore-button-rustore {
           height: 50px;
           /* Фиксированная высота */
           display: inline-flex;
           align-items: center;
           justify-content: center;
           box-sizing: border-box;
           padding: 10px 20px;
           font-size: 25px;
           margin-top: 20px;
           transition: 0.5s;
           text-decoration: none;
       }

       .rustore-button-rustore {
           background: var(--blue);
           color: var(--fff);
           font-weight: bold;
           margin-left: 20px;
       }

       .rustore-button-rustore:hover {
           color: var(--blue);
           background: var(--fff);
           border: 1px solid var(--blue);
       }

       .rustore-icon-rustore {
           width: 24px;
           height: 24px;
           margin-right: 10px;
           background: white;
           border-radius: 6px;
           border: 1px solid var(--blue);
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: bold;
           color: var(--blue);
       }

       .rustore-icon-rustore:hover {
           color: var(--blue);
       }


       .telegram-link {
           color: var(--blue);
           text-decoration: none;
           font-weight: bold;
       }

       .telegram-link:hover {
           text-decoration: underline;
       }

       .footer-note {
           max-width: 900px;
           margin: 40px auto;
           padding: 20px;
           background-color: var(--fff_1);
           border-left: 5px solid var(--grey_2);
           font-size: 16px;
           line-height: 1.6;
           color: var(--grey_2);
       }

       /* start menu */
       .hamburger {
           position: fixed;
           top: 20px;
           left: 20px;
           z-index: 100;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       .hamburger:hover {
           opacity: 0.8;
       }

       .hamburger__line {
           width: 30px;
           height: 3px;
           background: var(--dark);
           margin: 5px 0;
           transition: all 0.3s ease;
       }

       .hamburger.active .hamburger__line:nth-child(1) {
           transform: translateY(8px) rotate(45deg);
           background: var(--red);
       }

       .hamburger.active .hamburger__line:nth-child(2) {
           opacity: 0;
       }

       .hamburger.active .hamburger__line:nth-child(3) {
           transform: translateY(-8px) rotate(-45deg);
           background: var(--red);
       }

       .nav-menu {
           position: fixed;
           top: 0;
           left: 0;
           width: 400px;
           height: 100%;
           background: var(--fff);
           transform: translateX(-100%);
           /* Полностью скрываем за экраном */
           transition: all 0.3s ease;
           z-index: 99;
           padding: 70px 20px 20px;
           box-sizing: border-box;
           /* Учитываем padding в общей ширине */
           overflow-y: auto;
           /* Добавляем вертикальную прокрутку */
       }

       .nav-menu.active {
           transform: translateX(0);
           /* Показываем меню */
           box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
       }

       .nav-menu ul {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .nav-menu ul li a {
           display: block;
           padding: 10px;
           color: var(--dark);
           text-decoration: none;
           transition: all 0.3s ease;
       }

       .nav-menu ul li a:hover {
           background: var(--fff_1);
           padding-left: 15px;
       }

       .overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.3);
           opacity: 0;
           visibility: hidden;
           transition: all 0.3s ease;
           z-index: 98;
       }

       .overlay.active {
           opacity: 1;
           visibility: visible;
       }

        /* end menu */

        /* start telegram icon in menu */
        .telegram-icon {
            width: 20px;
            height: 20px;
            margin-left: 8px;
            vertical-align: middle;
        }
        /* end telegram icon in menu */

        /* start shuffle link */
        .nav-shuffle-link {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            color: var(--grey_2) !important;
            text-decoration: none;
        }

        .nav-shuffle-icon {
            width: 22px;
            height: 22px;
            fill: var(--grey_2);
            transition: transform 0.4s ease, fill 0.3s ease;
        }

        .nav-shuffle-link:hover .nav-shuffle-icon {
            transform: rotate(180deg);
        }

        .nav-shuffle-link.is-active .nav-shuffle-icon,
        .nav-shuffle-link.is-active .nav-shuffle-icon g,
        .nav-shuffle-link.is-active .nav-shuffle-icon path {
            fill: var(--orange) !important;
            color: var(--orange) !important;
        }

        .nav-shuffle-link.is-active:hover .nav-shuffle-icon path {
            fill: var(--orange) !important;
        }

        .nav-shuffle-link.is-active:hover .nav-shuffle-icon {
            transform: rotate(180deg);
        }
        /* end shuffle link */

        /* start clear favorites */
        .nav-clear-favorites {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            color: var(--grey_2) !important;
            text-decoration: none;
        }

        .nav-clear-icon {
            width: 22px;
            height: 22px;
            fill: var(--grey_2);
            transition: transform 0.3s ease, fill 0.3s ease;
        }

        .nav-clear-favorites:hover {
            color: var(--red) !important;
        }

        .nav-clear-favorites:hover .nav-clear-icon {
            fill: var(--red);
        }
        /* end clear favorites */

        /* start menu separator */
        .menu-separator {
            list-style: none;
            border-bottom: 2px solid var(--grey_2);
            margin: 10px 0;
            padding: 0;
            width: 100%;
        }
        /* end menu separator */

        /* start Modal Styles - Стили для модального окна */
       .modal {
           display: none;
           /* Скрыто по умолчанию */
           position: fixed;
           z-index: 1000;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           overflow: auto;
           background-color: rgba(0, 0, 0, 0.85);
           /* Затемненный фон */
           justify-content: center;
           align-items: center;
       }

       .modal-content {
           position: relative;
           margin: auto;
           padding: 0;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       /* ИЗМЕНЕНИЕ ЗДЕСЬ */
       .modal-image {
           max-width: 90vw;
           /* Макс. ширина 90% от ширины экрана */
           max-height: 90vh;
           /* Макс. высота 90% от высоты экрана */
           object-fit: contain;
           /* Сохраняет пропорции изображения */
       }

       /* Кнопка закрытия */
       .modal-close {
           position: absolute;
           top: 15px;
           right: 35px;
           color: #fff;
           font-size: 40px;
           font-weight: bold;
           transition: 0.3s;
           cursor: pointer;
       }

       .modal-close:hover,
       .modal-close:focus {
           color: #bbb;
           text-decoration: none;
       }

       /* Кнопки навигации "Вперед" и "Назад" */
       .modal-prev,
       .modal-next {
           cursor: pointer;
           position: absolute;
           top: 50%;
           width: auto;
           padding: 16px;
           margin-top: -50px;
           color: white;
           font-weight: bold;
           font-size: 24px;
           transition: 0.3s ease;
           border-radius: 0 3px 3px 0;
           user-select: none;
           /* Запретить выделение текста */
           background-color: rgba(0, 0, 0, 0.3);
       }

       .modal-next {
           right: 0;
           border-radius: 3px 0 0 3px;
       }

       .modal-prev {
           left: 0;
       }

       .modal-prev:hover,
       .modal-next:hover {
           background-color: rgba(0, 0, 0, 0.6);
       }

       /* end Modal Styles - Стили для модального окна */