/* --------- */
/* МЕТАСТИЛИ */
/* --------- */
html, body {
    margin: 0;
    padding: 0;
}
ul { list-style: none; }
.bg {
    /* МЕТАСТИЛЬ БЭКГРАУНДА */
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-family: "Caviar",  sans-serif;   
}
.bg#one{
    /* ЭКРАН 1 */
    background-image: url('media/background_1.png');
    aspect-ratio:  16 / 9; /* пропорции бг-пикчи */
}
.bg#two{   
    /* ЭКРАН 2 */
    aspect-ratio: 16 / 7.22; 
    background-image: url('media/background_2.png');
}
.bg#three{
    /* ЭКРАН 3 */
    /* aspect-ratio: 16 / 5.875; */
    /* aspect-ratio: 16 / 15.942; */
    aspect-ratio: 16 / 10; 
    background-image: url('media/background_3.png');
}
.bg#four{
    /* ЭКРАН 4 */
    aspect-ratio: 16 / 6.875;
    background-image: url('media/background_4.png');
}
.bg#five{
    /* ЭКРАН 5 */
    aspect-ratio: 16 / 30.49;
    background-image: url('media/background_5.png');
}

@font-face {
    /* ИНИЦИАЛИЗАЦИЯ ШРИФТОВ */
    font-family: "Caviar";
    src: url("font/CaviarDreams.ttf");
    src: url("font/CaviarDreams_Bold.ttf");
}
.main-content{
    /* область контента */
    font-family: "Caviar",  sans-serif;
    position: relative;
    padding: 0 11.75% 0 11.75%;
}
.head-menu{
    font-weight: 400;
    aspect-ratio: 16 / 1.375; 
    align-items: center;
    padding: 0 11.75% 0 11.75%;
    display: flex;
    text-align: center;
}
.head-menu-item{
    font-weight: 400;
    width: 25%;
    max-width: 25%;
    text-align: center;
    font-size: 1.72vw;
    font-weight: 800;
}
.main-text{
    position: absolute;
    font-weight: 800
}
/* ------*/
/* ЦВЕТА */
/* ----- */
.color-choco{
    color: #645342;
}
.color-white{
    color: #fff;
}
.color-gold{
    color: #FEA638;
}
.color-d-gold{
    color: #B25706
}
/* -------- */
/* КАРТИНКИ */
/* -------- */
.pic01{
    margin: 1.8% 0 0 41.5%;
    position: absolute;
    width: 10%;
}
.pic02{
    position: absolute;
    width: 12%;
    margin: 15.5% 0 0 5%;
}
.pic03{
    position: absolute;
    margin: 20.5% 0 0 45%;
    width: 26%;
}
.pic04{
    position: absolute;
    margin: 24.5% 0 0 34.5%;
    width: 20%;
    z-index: 1;
}
.pic05{
    position: absolute;
    margin: 20% 0 0 5%;
    width: 13%;
}
.pic06{
    position: absolute;
    margin: 4.5% 0 0 52%;
    width: 23%;
}
.pic07{
    position: absolute;
    margin: 23% 0 0 55%;
    width: 13%;
}
.pic08{
    position: absolute;
    margin: 23.5% 0 0 5%;
    /* width: 76.5%; */
    width: 66.5%;
}
.pic09{
    position: absolute;
    margin: 147.5% 0 0 42.5%;
    /* width: 76.5%; */
    width: 10%;
}
.pic10{
    position: absolute;
    margin: 105% 0 0 22.5%;
    /* width: 76.5%; */
    width: 37%;
}
.pic11{
    width: 76.5%;
    position: absolute;
    margin: 175% 0 0 0;
}
.pic12{
    width: 32%;
    position: absolute;
    margin: 27  .5% 0 0 17%;
}
.pic13{
    width: 33%;
    position: absolute;
    margin: 26% 0 0 49.5%;
    cursor: pointer;
}
/* ---------------------------------------- */
/* ТЕКСТОВАЯ ИНФОРМАЦИЯ В ПОРЯДКЕ ПОЯВЛЕНИЯ */
/* ---------------------------------------- */
.text-1{
    margin: 3% 0 0 5%;
    font-size: 4.3vw;
    line-height: 1.1;
}
.text-2{
    margin: 17.5% 0 0 21.2%;
    font-size: 1.376vw;
}
.text-3{
    margin: 26.5% 0 0 39%;
    position: absolute;
    font-size: 1.376vw;
    z-index: 2;
}
.text-4{
    margin: 4.7% 0 0 5%;
    font-size: 4.3vw;
    line-height: 1.1;
}
.text-5{
    margin: 22% 0 0 21.2%;
    font-size: 1.376vw;
}
.text-6{
    margin: 31.5% 0 0 5%;
    font-size: 1.376vw;
}
.text-7{
    font-size: 4.3vw;
    line-height: 1;
}
.text-8{
    margin: 39% 0 0 5%;
    font-size: 0.75vw;
}
.text-9{
    margin: 8% 0 0 8%;
    font-size: 2.7vw;
    text-align: center;
}
.text-10{
    margin: 5% 0 0 5%;
    font-size: 2.7vw;
}
.text-11{
    margin: 0% 0 0 58%;
    font-size: 2.7vw;
    width: 70%;
}
.text-12{
    margin: 8% 0 0 17%;
    font-size: 2.7vw;
    line-height: 1.1;
}
.text-13{
    margin: 20% 0 0 50%;
    font-size: 1.3vw;
    line-height: 1.1;
}
.text-14{
    margin: 28% 0 0 50%;
    font-size: 1.3vw;
    line-height: 1.1;
}
.text-15{
    margin: 26.4% 0 0 49.8%;
    background-color: #D77D1A;
    color: white;
    z-index: 10;
    border-radius: 2vw;
    width: 31.4vw;
    height: 2.7vw;
    text-align: center;
    font-size: 1.3vw;
    display: inline-block; 
    vertical-align: middle;
    cursor: pointer;
}
.text-16{
    background-color: #D77D1A;
    color: white;
    border-radius: 2vw;
    display: inline-block; 
    vertical-align: middle;
    cursor: pointer;
    z-index: 10;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size: 2.7vw;
}
.text-15:hover {
    background: #645342;   
}
.text-16:hover {
    background: #645342;   
}
/* ------ */
/* ВИДОСЫ */
/* ------ */
.video01{
    position: absolute;
    z-index: 1;
    margin: 63.2% 0 0 -40.6%;
}
.video02{
    position: absolute;
    margin: 145.6% 0 0 -38.5%;
    z-index: 1;
}
.video03{
    position: absolute;
    z-index: 1;
    margin: 232.5% 0 0 -40.6%;
}

.carousel {
    /* width: 100%; */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn {
    width: 3.8vw;
    height: 3.8vw;
    color: white;
    display: flex;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    z-index: 1;
    position: absolute;
}

.cbtn-left{
    margin-left: -47.2%;
}
.cbtn-right{
    margin-right: -48.4%;
}
.cbtn-one{
    margin-top: 87.7%
}
.cbtn-two{
    margin-top: 213.4%;
}
.cbtn-three{
    margin-top: 256.9%;
}

.video-container {
  width: 40.8vw;
  height: 23.9vw;
  /* border-radius: 16px; */
  overflow: hidden;
  margin: 0 auto;
}
.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.app{
    display: flex;
    align-items: center;
    justify-content: center;
}

.left{
    position: absolute;
    width: 21%;
    z-index: 1;
}
.right{
    position: absolute;
    width: 23.5%;
    z-index: 2;
}
.center{
    position: absolute;
    text-align: center;
    width: 55.5%;
}
/* ------- */
/* МОДАЛКИ */
/* ------- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 24px;
    border-radius: 12px;
    width: 60vw;
    height: 60vh;
    max-width: 90%;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    z-index: 1000;
    overflow-y: auto;
}

.modal-lvl-0 { z-index: 1000; }
.modal-lvl-1 { 
    z-index: 1010; 
    font-weight: 300;
}
.modal-lvl-2 { z-index: 1020; }

.btn {
    margin: 10px 0;
    padding: 10px 16px;
    background: #FEA638;;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: "Caviar",  sans-serif;

}

.btn:hover {
    background: #645342;   
}

.district:hover{
    color: #FEA638;
}
/* ------------------ */
/* КАРУСЕЛЬ В МОДАЛКЕ */
/* ------------------ */

.image-single,
.image-carousel {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  margin: 16px auto;
  display: block;
}
.img-carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.img-carousel-btn {
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
}
/* --------------- */
/* ССЫЛКИ В ФУТЕРЕ */
/* --------------- */
.ref-site{
    width: 2.1vw;
    height:  2.1vw;
    border-radius: 100%;
    margin: 0 0 0 7%  ;
}
.ref-vk{
    width: 2.1vw;
    height:  2.1vw;
    border-radius: 100%;
    margin: 0 0 0 13.8%;
}
.ref-ok{

    width: 2.1vw;
    height:  2.1vw;
    border-radius: 100%;
    margin: 0 0 0 13.8%;
}
.ref{
    margin: 238.5% 0 0 29%;
    width: 25%;
}
/* ------- */
/* БАННЕРЫ */
/* ------- */
/* Стили для баннера */
.banner-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
}

.banner {
  position: relative;
  width: 15vw; /* Квадратный размер */
  height: 15vw; /* Квадратный размер */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 2px solid #645342;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #645342;   
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
}

.close-btn:hover {
  background: #FEA638;   
}

.banner-content {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.slides-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.indicators {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 5;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
}

.indicator.active {
  background: #FEA638;   
  transform: scale(1.2);
}

.indicator:hover {
  background: rgba(254, 166, 56, 0.8);
}

/* Анимации */
.banner {
  animation: slideInUp 0.5s ease-out;
}

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