@font-face {
        font-family: 'Druk Wide Bold Italic';
        font-style: normal;
        font-weight: normal;
        src: url('/fonts/DrukWideBoldItalic.woff') format('woff');
    }

    @font-face {
        font-family: 'Favorit';
        font-weight: normal;
        font-style: normal;
        src: url('/fonts/FavoritExtraBold.ttf') format('truetype');
    }

    @font-face {
        font-family: 'DrukWide-Bold';
        src: url('/fonts/DrukWide-Bold-Web.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'DrukWide-Medium';
        src: url('/fonts/DrukWide-Medium-Web.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'FavoritStd-Regular';
        src: url('/fonts/FavoritStd-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @keyframes glow {
        0% {
            box-shadow: 0 0 5px rgba(255, 183, 98, 0.5), 0 0 10px rgba(255, 183, 98, 0.5), 0 0 15px rgba(255, 183, 98, 0.5); /* #FFB762 */
        }
        3.125% {
            box-shadow: 0 0 5px rgba(255, 60, 120, 0.5), 0 0 10px rgba(255, 60, 120, 0.5), 0 0 15px rgba(255, 60, 120, 0.5); /* #FF3C78 */
        }
        6.25% {
            box-shadow: 0 0 5px rgba(255, 183, 98, 0.5), 0 0 10px rgba(255, 183, 98, 0.5), 0 0 15px rgba(255, 183, 98, 0.5); /* #FFB762 */
        }
        9.375% {
            box-shadow: 0 0 5px rgba(0, 253, 201, 0.5), 0 0 10px rgba(0, 253, 201, 0.5), 0 0 15px rgba(0, 253, 201, 0.5); /* #00fdc9 */
        }
        12.5% {
            box-shadow: 0 0 5px rgba(24, 107, 255, 0.5), 0 0 10px rgba(24, 107, 255, 0.5), 0 0 15px rgba(24, 107, 255, 0.5); /* #186bff */
        }
        15.625% {
            box-shadow: 0 0 5px rgba(233, 0, 255, 0.5), 0 0 10px rgba(233, 0, 255, 0.5), 0 0 15px rgba(233, 0, 255, 0.5); /* #e900ff */
        }
        18.75% {
            box-shadow: 0 0 5px rgba(24, 107, 255, 0.5), 0 0 10px rgba(24, 107, 255, 0.5), 0 0 15px rgba(24, 107, 255, 0.5); /* #186bff */
        }
        21.875% {
            box-shadow: 0 0 5px rgba(4, 255, 127, 0.5), 0 0 10px rgba(4, 255, 127, 0.5), 0 0 15px rgba(4, 255, 127, 0.5); /* #04ff7f */
        }
        25% {
            box-shadow: 0 0 5px rgba(0, 253, 201, 0.5), 0 0 10px rgba(0, 253, 201, 0.5), 0 0 15px rgba(0, 253, 201, 0.5); /* #00fdc9 */
        }
        28.125% {
            box-shadow: 0 0 5px rgba(0, 0, 175, 0.5), 0 0 10px rgba(0, 0, 175, 0.5), 0 0 15px rgba(0, 0, 175, 0.5);
        }
        31.25% {
            box-shadow: 0 0 5px rgba(0, 100, 255, 0.5), 0 0 10px rgba(0, 100, 255, 0.5), 0 0 15px rgba(0, 100, 255, 0.5); 
        }
        34.375% {
            box-shadow: 0 0 5px rgba(0, 175, 255, 0.5), 0 0 10px rgba(0, 175, 255, 0.5), 0 0 15px rgba(0, 175, 255, 0.5); 
        }
        37.5% {
            box-shadow: 0 0 5px rgba(0, 255, 150, 0.5), 0 0 10px rgba(0, 255, 150, 0.5), 0 0 15px rgba(0, 255, 150, 0.5); 
        }
        40.625% {
            box-shadow: 0 0 5px rgba(127, 255, 125, 0.5), 0 0 10px rgba(127, 255, 125, 0.5), 0 0 15px rgba(127, 255, 125, 0.5); 
        }
        43.75% {
            box-shadow: 0 0 5px rgba(255, 255, 125, 0.5), 0 0 10px rgba(255, 255, 125, 0.5), 0 0 15px rgba(255, 255, 125, 0.5); 
        }
        46.875% {
            box-shadow: 0 0 5px rgba(255, 175, 0, 0.5), 0 0 10px rgba(255, 175, 0, 0.5), 0 0 15px rgba(255, 175, 0, 0.5); 
        }
        50% {
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 10px rgba(0, 255, 0, 0.5), 0 0 15px rgba(0, 255, 0, 0.5); 
        }
        53.125% {
            box-shadow: 0 0 5px rgba(127, 255, 0, 0.5), 0 0 10px rgba(127, 255, 0, 0.5), 0 0 15px rgba(127, 255, 0, 0.5); 
        }
        56.25% {
            box-shadow: 0 0 5px rgba(255, 255, 0, 0.5), 0 0 10px rgba(255, 255, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.5); 
        }
        59.375% {
            box-shadow: 0 0 5px rgba(255, 127, 0, 0.5), 0 0 10px rgba(255, 127, 0, 0.5), 0 0 15px rgba(255, 127, 0, 0.5); 
        }
        62.5% {
            box-shadow: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.5), 0 0 15px rgba(255, 0, 255, 0.5); 
        }
        65.625% {
            box-shadow: 0 0 5px rgba(148, 0, 211, 0.5), 0 0 10px rgba(148, 0, 211, 0.5), 0 0 15px rgba(148, 0, 211, 0.5); 
        }
        68.75% {
            box-shadow: 0 0 5px rgba(75, 0, 130, 0.5), 0 0 10px rgba(75, 0, 130, 0.5), 0 0 15px rgba(75, 0, 130, 0.5); 
        }
        71.875% {
            box-shadow: 0 0 5px rgba(0, 0, 255, 0.5), 0 0 10px rgba(0, 0, 255, 0.5), 0 0 15px rgba(0, 0, 255, 0.5); 
        }
        75% {
            box-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.5); 
        }
        78.125% {
            box-shadow: 0 0 5px rgba(0, 255, 150, 0.5), 0 0 10px rgba(0, 255, 150, 0.5), 0 0 15px rgba(0, 255, 150, 0.5); 
        }
        81.25% {
            box-shadow: 0 0 5px rgba(127, 255, 255, 0.5), 0 0 10px rgba(127, 255, 255, 0.5), 0 0 15px rgba(127, 255, 255, 0.5); 
        }
        84.375% {
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.5); 
        }
        87.5% {
            box-shadow: 0 0 5px rgba(255, 255, 0, 0.5), 0 0 10px rgba(255, 255, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.5);
        }
        90.625% {
            box-shadow: 0 0 5px rgba(255, 127, 0, 0.5), 0 0 10px rgba(255, 127, 0, 0.5), 0 0 15px rgba(255, 127, 0, 0.5); 
        }
        93.75% {
            box-shadow: 0 0 5px rgba(0, 255, 0, 0.5), 0 0 10px rgba(0, 255, 0, 0.5), 0 0 15px rgba(0, 255, 0, 0.5); 
        }
        96.875% {
            box-shadow: 0 0 5px rgba(0, 100, 255, 0.5), 0 0 10px rgba(0, 100, 255, 0.5), 0 0 15px rgba(0, 100, 255, 0.5); 
        }
        100% {
            box-shadow: 0 0 5px rgba(0, 0, 175, 0.5), 0 0 10px rgba(0, 0, 175, 0.5), 0 0 15px rgba(0, 0, 175, 0.5); 
        }
    }


    @keyframes rainbow {
        0% { background-color: transparent; }
        4% { background-color: rgba(0, 255, 255, 0.5); } 
        8% { background-color: rgba(255, 255, 0, 0.5); } 
        12% { background-color: rgba(127, 255, 0, 0.5); } 
        16% { background-color: rgba(0, 255, 0, 0.5); } 
        20% { background-color: rgba(0, 255, 127, 0.5); } 
        24% { background-color: rgba(255, 127, 0, 0.5); } 
        28% { background-color: rgba(0, 127, 255, 0.5); } 
        32% { background-color: rgba(0, 0, 255, 0.5); } 
        36% { background-color: rgba(75, 0, 130, 0.5); } 
        40% { background-color: rgba(148, 0, 211, 0.5); } 
        44% { background-color: rgba(255, 0, 255, 0.5); } 
        48% { background-color: rgba(255, 50, 150, 0.5); }
        52% { background-color: rgba(255, 255, 150, 0.5); }
        56% { background-color: rgba(127, 255, 150, 0.5); }
        60% { background-color: rgba(0, 255, 150, 0.5); } 
        64% { background-color: rgba(0, 175, 255, 0.5); } 
        68% { background-color: rgba(0, 100, 255, 0.5); } 
        72% { background-color: rgba(0, 0, 175, 0.5); } 
        76% { background-color: rgba(75, 0, 200, 0.5); } 
        80% { background-color: rgba(148, 0, 255, 0.5); } 
        84% { background-color: rgba(255, 0, 175, 0.5); } 
        88% { background-color: rgba(255, 0, 100, 0.5); } 
        92% { background-color: rgba(255, 50, 50, 0.5); } 
        96% { background-color: rgba(255, 75, 75, 0.5); } 
        100% { background-color: transparent; }
    }

    @keyframes flash {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }
        50% {
            opacity: 1;
            transform: scale(1.2);
        }
        100% {
            opacity: 0;
            transform: scale(1);
        }
    }

    @keyframes wave {
        0% {
            transform: translateZ(0);
        }
        100% {
            transform: translateZ(-50px);
        }
    }

    @keyframes move {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

    body {

        background-color: black; /* Устанавливаем черный фон для всей страницы */
        margin: 0; /* Убираем отступы */
        padding: 0; /* Убираем внутренние отступы */
        height: 100vh; /* Высота страницы на весь экран */
        overflow-x: hidden; /* запрет только на горизонтальную прокрутку страницы */
        overflow-y: auto;
        margin: 0;
        font-family: 'Favorit', sans-serif;
        /*cursor: url('brush.cur'), auto; */
        }
    /* Стиль для заголовка */
    .title {
    	padding: 0;
        margin: 0;
        font-family: 'Druk Wide', sans-serif; 
        src: url('/fonts/Druk-Wide-Web-Bold-Regular.ttf') format('ttf');
        }

    html {scroll-behavior: smooth;
      height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.ac-block.glow-effect {
  animation: glow 25s infinite alternate, move 20s linear;
  transition: background 0.8s ease, box-shadow 0.8s ease, color 0.8s ease-in-out;
}


@keyframes glow-fade {
  0% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }
  20% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  }
  40% {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
  }
  60% {
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
  }
  80% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }
}

    * {
        box-sizing: border-box;
        font-size: clamp(14px, 2vw, 20px); 
    }

    .mainbg {
        height: auto;
    }

    .mainbg video {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        z-index: -1;
    }

     /* Шапка с горизонтальными кнопками */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
        padding: 5px 10px;
        z-index: 2;
        padding-left: 0;
        padding-right: 0;
        display: flex;            /* делаем контейнер флексом */
        align-items: center;      /* выравнивание по центру по вертикали */
        max-height: 99%;         /* ← например, задаём максимум высоты */
    }
    
    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    .header-controls {
        margin-right: 12px; /* или меньше — подбирай по вкусу */
    }
    .header-controls button:nth-child(2) {
        margin-left: 7px;
    } 

    .header-links {
        display: flex;
        gap: 25px;
        justify-content: center;
        flex: 1;
        line-height: 1.2;
        padding-left: 5;
        padding-right: 5;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header-links a {
	    font-family: 'Favorit', sans-serif;
        color: white;
	    border: none;
	    background: transparent; /* Начальное состояние: фон невидим */
        
        transition: background 0.8s ease, box-shadow 0.8s ease, color 0.8s ease-in-out; /* Плавные переходы для всех свойств */
        /* border: 2px solid white;*/
        padding: 8px 15px;
        border-radius: 4px;
        text-decoration: none;
        transition: background-color 2s ease, color 3s ease, transform 0.3s ease;	
        position: relative;
        overflow: hidden;
	    z-index: 1; /* Текст выше эффекта */
	    flex-shrink: 0; /* Не позволяет кнопкам сжиматься */
        transform: translate(-50%, -50%), scale(1), skewX(-10deg); /* Масштабирование эффекта */
        line-height: 1.2;
      }

    .header-links a:hover::before {
    	opacity: 1; /* Появление эффекта */
    	transform: translate(-50%, -50%), scale(1), skewX(-10deg); /* Масштабирование эффекта */
        outline: 10px solid rgba(255, 255, 255, 0); /* прозрачный, чтобы "оттолкнуть" границы */
        outline-offset: 10px; /* раздвигает границы вокруг glow */
    }
    .header-links a:hover {
    	
        color: white;
    	background: linear-gradient(45deg, #FFB762, #FF3C78, #42B7F5, #72FF84, #FFB762);
    	background-size: 200% auto;
    	animation: glow 15s infinite alternate, move 20s linear infinite;
    	border-radius: 4px;
    	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.3);
    	text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    	mix-blend-mode: difference;
    	transition: background 0.8s ease, box-shadow 0.8s ease, color 0.8s ease-in-out;
    	transform-origin: center;
    	transform: scale(1.05);
    }
    
    .header-scroll {
        display: flex;
        align-items: center;
        gap: 16px;
        overflow-x: auto;
        white-space: nowrap;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    
    .header-scroll.dragging {
        cursor: grabbing;
        user-select: none;
    }

    .header-scroll::-webkit-scrollbar {
        display: none; 
    }
    
    .header-scroll a,
    .header-scroll .btn-header {
        flex-shrink: 0;
    }
    
    .btn-header {
        font-family: 'Favorit', sans-serif;
        font-size: 16px;
        padding: 10px 26px;
        border-radius: 8px;
        color: black; /* чёрный текст сразу */
        background: #FFB762;
        font-weight: bold;
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(255, 183, 98, 0.4);
		line-height: 1;
    }

    .btn-header::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 115%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        font-size: 11px;
        padding: 6px 10px;
        border-radius: 4px;
        white-space: pre-line;     /* ← учитываем \n и 
 */
        max-width: 280px;          /* ← даём больше ширины */
        min-width: 160px;          /* ← не даём стать узким */
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 10;
        box-sizing: border-box;
    }
    
    .btn-header:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(4px);
    }
    

    .btn-header:hover {
        transform: scale(1.05);
        background: white;
        color: black;
    }			

    /* Контент */
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 180px;
        padding-bottom: 20vh;
        color: white;
        text-align: center;
        position: relative;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .contentbtn {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
        gap: 15px;
        margin-bottom: 40px;
        order: -1;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    .contenthead a {
        text-decoration: none;
    }

    .contentheading {
        font-family: 'Druk Wide Bold Italic', sans-serif;
        font-size: 48px;
    	color: #FFB762;
        margin-bottom: 20px;
        text-shadow: 0 0 2px #fff;
        position: relative;
        z-index: 2;
    }

    .contenthead.expand {
        transform: scale(50); /* Увеличивает текст до значительных размеров */
        opacity: 0; /* Постепенно скрывает текст */
        transition: transform 1s ease, opacity 1s ease;
        z-index: 10;
    }

    .contentbtn button,
    .contentbtn a {	 
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.3s ease; /* Плавный эффект при наведении */	
        width: 100%;
        margin-bottom: 20px;
        border-radius: 5px;
        transition: all 0.15s ease;
        letter-spacing: 0.025em;
        text-shadow: 0 0 1px #fff;
        text-decoration: none;
        display: flex; 
        justify-content: center;
        align-items: center;
        height: 50px;
    	font-family: 'Favorit', sans-serif;
        font-size: 10px !important;
        color: white;
        background-color: transparent;
        padding: 0;
        position: relative;
    }

    .contentbtn button:hover,
    .contentbtn a:hover {
        animation: glow 4.5s infinite alternate;
    	transition: background 0.8s ease, box-shadow 0.8s ease, color 0.8s ease-in-out;
    	border: none;
        color: black;
        background-color: #fff;
    	transform: rotate(-10deg) scale(1.05); /* Легкое увеличение при наведении */
    }

    .cursor {
        display: inline-block;
        width: 4px; /* Ширина курсора для жирности */
        height: 1.3em; /* Удлиненный курсор */
        background-color: #fff;
        transform: skewX(-10deg); /* Наклон вправо */
    	margin-left: 8px;
    	animation: blink 0.8s infinite step-end;
    }

    @keyframes blink {
        50% { opacity: 0; }
    }

    .gallery-container {
        display: flex;
        justify-content: center; /* Центрирует содержимое по горизонтали */
        align-items: flex-end; /* Привязывает содержимое к низу */
        position: fixed; /* Фиксирует галерею */
        bottom: 0; /* Прикрепляет галерею к низу экрана */
        left: 0; /* Привязывает к левому краю */
        right: 0; /* Привязывает к правому краю */
        height: auto; /* Автоматическая высота */
    }

    .gallery {
        display: flex;
        flex-wrap: wrap; /* Позволяет элементам заполнять строки */
        justify-content: center; /* Центрирует элементы внутри галереи */
    }

    .gallery-item {
        position: relative; /* Для позиционирования */
        margin: 0 5px; /* Отступы между изображениями */
        cursor: pointer; /* Указывает на кликабельность */
        transition: transform 0.3s ease; /* Плавное увеличение */
        width: 200px; /* Ширина всех изображений */
        height: 200px; /* Высота всех изображений */ 
        overflow: hidden; /* Скрывает часть изображения, выходящую за границы */
    }

    .gallery-item img {
        display: block; /* Убирает пробелы под изображениями */
        max-width: 100%; /* Ширина изображения не превышает ширину контейнера */
        max-height: 100%; /* Высота изображения не превышает высоту контейнера */
        object-fit: contain; /* Обрезает изображение, чтобы заполнить контейнер */
    }

    /* Увеличение для меньших изображений */
    .gallery-item.small {
        transform: scale(1.1); /* Увеличение для изображений с классом small */
    }

    .gallery-item.zoomed {
        transform: scale(1.7); /* Увеличивает элемент на 70% */
        z-index: 10; /* Повышает уровень наложения увеличенного изображения */
    }

    .rounded img {
        border-radius: 2px; /* Увеличенное скругление для первых трех изображений */
    }

    /* Эффект увеличения при наведении */
    .gallery-item:hover {
        transform: scale(1.1); /* Увеличивает изображение на 10% */
    }

    /* Эффект увеличения при нажатии */
    .gallery-item.zoomed {
        transform: scale(5); /* Увеличивает изображение на 70% */
    }
   .footer-text {font-size: 16px;}
    .footer {
        font-family: 'Favorit', sans-serif;
		font-size: 16px;
        position: absolute; /* Фиксирует футер внизу */
        bottom: 0 !important;
        transform: translateX(-50%); /* Точное центрирование */
        text-align: center;
        padding: 10px;
        color: white; /* Цвет текста */
        width: auto; /* Ширина по содержимому */
        z-index: 1000;
        border-radius: 4px; /* Скругление углов */
        /* white-space: nowrap; Текст в одну строку */
        left: 50% !important;
        transform: translateX(-50%) !important;
        }

    /* Увеличьте отступ снизу для контента */
    .content {
        padding-bottom: 100px !important;
    }
    .animatedText2 {
        text-shadow: 0 1px 6px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.25) !important;
        height: 5vh;
        padding-bottom: 28px;
        font-family: 'Favorit', sans-serif;
        font-size: 10px;
        text-shadow: 0 0 5px #fff;
        width: 100%;
        position: relative;
        z-index: 1;
        overflow: hidden; /* ← предотвращает выход за пределы */
        white-space: nowrap; /* ← не переносим текст на новую строку */
    }

    @media screen and (min-width: 1400px) {
  .header-links {
    padding-left: 182px; /* ← отступ слева */
    padding-right: 18px; /* ← отступ слева */
    gap: 16px; /* ← пространство между ссылками */
  }
    .btn-header:first-of-type {
    margin-left: 352px; /* ← отступ между ссылками и первой кнопкой */
  }
}

@media screen and (max-width: 768px) {
  html, body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .mainbg {
    position: relative;
    height: auto !important;
  }

  .content {
    padding-top: 140px !important;
    padding-bottom: 100px !important;
  }

  .ac-services {
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
  }

.ac-block {
  min-width: 80vw;
  max-width: 90vw;
  aspect-ratio: 1/1;
  margin-bottom: 16px;
  font-size: 12px;
}

/* Только первый блок */
.ac-block:first-child {
  margin-top: 300px;
}

  .ac-front {
    font-size: 16px;
  }

  .ac-back {
    font-size: 11px;
  }

  footer.footer {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    height: auto !important;
	font-size: 22px;
  }
}

    .btn-about {
		line-height: 1;
		padding: -11px 12px;
        z-index: 9000;
    }
/* Мобильная адаптивность */
@media (max-width: 1400px) {
    .animatedText2 {
        text-shadow: 0 1px 6px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.25) !important;
        height: 5vh;
        padding-bottom: 28px;
        font-family: 'Favorit', sans-serif;
        font-size: 10px;
        text-shadow: 0 0 5px #fff;
        width: 100%;
        position: relative;
        z-index: 1;
        display: inline-block;
        white-space: normal !important;
        overflow: unset !important;
    }

    .footer {
        font-size: clamp(12px, 3vw, 14px); /* Адаптивный размер шрифта */
        line-height: 1.4; /* Увеличиваем межстрочный интервал */
        padding: 8px 10px; /* Ещё меньше отступы */
        width: 95%; /* Шире контейнер */
    }

    .gallery-container {
        position: relative; /* Сбрасывает фиксированное позиционирование */
        top: 0; /* Привязывает к верху экрана */
        height: auto; /* Автоматическая высота */
    }
    .contentheading {
        font-size: 36px;
        text-shadow: 0 1px 6px rgba(0,0,0,.35), 0 0 1px rgba(255,255,255,.25) !important;
    }

	.contentbtn button,
	.contentbtn a {
		overflow-x: auto; /* Включаем горизонтальную прокрутку */
		max-width: 90%; /* Устанавливаем максимальную ширину */
		width: auto; /* Ширина по умолчанию */
		padding: 10px; /* Убедитесь, что padding не слишком большой */
		cursor: pointer; /* Указатель курсора */
	}
    .header-controls {
    margin-right: 10px; /* или меньше — подбирай по вкусу */
      }
    .header-scroll {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 16px;
        scrollbar-width: none;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: visible;
        width: 100%;
        scroll-behavior: smooth;

        }
    
    .header-scroll::-webkit-scrollbar {
        display: none;
    }
    
    /* Унифицированный стиль для всех ссылок и кнопок */
    .header-links a,
    .btn-header,
    .btn-about,
    .contentbtn button,
    .contentbtn a {
      font-size: 11px !important;
      padding: 6px 12px;
      border-radius: 6px;
      min-width: unset;
      white-space: nowrap;
      line-height: 1.1;
      flex-shrink: 0;
      z-index: 9000;
    }

    /* Обводка вместо заливки (для компактного стиля) */
    .btn-header,
    .btn-about,
    .header-links a,
    .contentbtn button,
    .contentbtn a {
        background: transparent;
        border: 1px solid #FFB762;
        color: #FFB762;
        box-shadow: none;
    }

    .btn-about {
        font-size: 1.3em !important;
		
    }

    /* Поведение при наведении */
    .btn-header:hover,
    .btn-about:hover,
    .header-links a:hover,
    .contentbtn button:hover,
    .contentbtn a:hover {
        background: #FFB762;
        color: white;
    }
    .btn-header {
        font-family: 'Favorit', sans-serif;
        font-size: 9px;
        padding: 5px 13px;
        border-radius: 8px;
        color: black; /* чёрный текст */
        background: #FFB762;
        font-weight: bold;
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(255, 183, 98, 0.4);
        flex-shrink: 0;
    }

    .btn-header:hover {
        background: white;
        color: black;
        transform: scale(1.05);
    }
    .header-scroll::-webkit-scrollbar {
        display: none;
    }
      
	/* Кнопка воспроизведения видео на мобильных устройствах */
	.video-play-button {
		position: absolute;
		top: 50%; /* Центрируем по вертикали */
		left: 50%; /* Центрируем по горизонтали */
		transform: translate(-50%, -50%); /* Корректируем смещение для точного центрирования */
		z-index: 3;
		background-color: transparent;
		border: none;
		padding: 10px 15px;
		font-size: 8px;
		color: transparent;
		cursor: pointer;
		outline: none; /* Убираем выделение при нажатии */
		display: none; /* Скрываем кнопку на десктопах */
	}

    .header-controls button:nth-child(2) {
        margin-left: 7px;
    }

	.video-play-button:focus {
		outline: none;
		background-color: transparent; /* Убираем белый фон при фокусе */
	}
    .header-links {
        gap: 6px;
        }
    .header-links a {
        padding: 6px 10px;
        font-size: 11px;
    }
    .header-scroll {
        padding-right: 12px;
        overflow-x: auto;
    }
}


@media (max-width: 768px) {
  .header-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
}
@media screen and (max-height: 400px) {
  .animatedText2 {
    font-size: 9px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.25) !important;
    height: auto !important;
    max-height: 2.8vh;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-bottom: 6px !important;
    line-height: 1.1;
  }

  .btn-about-wrapper {
    margin-top: 10px !important;
    transform: scale(0.9);
  }

  .content {
    padding-top: 40px !important;
    padding-bottom: 8vh !important;
  }
   title {
	   padding-top: -10px !important;
	   }
  .contentheading {
	padding-top: 10px !important;  
    font-size: 12px !important;
  }


  footer.footer,
  .footer {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
  }

}


/* === Приоритет для кнопки "О нас" === */
.btn-about-wrapper {
  position: relative;     /* создаём локальный контекст */
  z-index: 30010;         /* выше любых декоративных слоёв */
}

.btn-glow {
  position: absolute;
  z-index: 30009;         /* фон под кнопкой, но выше окружения */
  pointer-events: none;   /* не перехватывает клики */
}

.btn-about {
  position: relative;     
  z-index: 30011;         /* САМАЯ верхняя — кликается всегда */
  pointer-events: auto;
}