body {
    font-family: "Exo 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    background-color: black;
	cursor: pointer;
}

.promo {
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.promo-bold {
    font-family: "Amatic SC", sans-serif;
    font-weight: 800;
    font-style: normal;
}

video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

@keyframes fade {
    from { opacity: 1; }
    to { opacity: 0.8; }
}

#background-video {
    opacity: 1; /* Начальное состояние */
    animation: fade 3s infinite alternate;
}

#background-video {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0; 
    z-index: 1; 
}

.item {
    position: absolute;
    width: 20%;
    aspect-ratio: 1 / 1; 
    background: url(../media/point.gif) no-repeat center center;
    background-size: contain;
    -moz-background-size: contain;
    opacity: 0.3;
    z-index: 10; 
}

.item-text {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 5% 0 5%;
    font-size: 2.2rem;
    color: white;
    line-height: 1.1;
    width: 20%;
    aspect-ratio: 1 / 1; 
    z-index: 11; 
}

@keyframes blink {
    0% {
    color: #5dbeeb; /* Начальный цвет */
    }
    100% {
    color: #fff; /* Конечный цвет */
    }
}

/* Применяем анимацию к элементу */
.item-text {
    animation-name: blink; /* Название анимации */
    animation-duration: .8s; /* Длительность цикла */
    animation-iteration-count: infinite; /* Повторять бесконечно */
    animation-direction: alternate; /* В каждом цикле проигрывать в обратном направлении */
}

.lt {
    top: 18%;
    left: 15%;
}
.rt {
    top: 18%;
    right: 15%;
}
.lb {
    bottom: 5%;
    left: 15%;
}
.rb {
    bottom: 5%;
    right: 15%;
}

@media only screen and (max-width: 1300px) {
    .item, .item-text  {
    width: 25%; 
    }
    .item-text  {
    font-size: 1.9rem; 
    }
    .lt  {
    left: 12%;
    }
    .rt  {
    right: 12%;
    }
    .lb  {
    left: 12%;
    bottom: 10%;
    }
    .rb  {
    right: 12%;
    bottom: 10%;
    }
}

@media only screen and (max-width: 900px) {
    .item, .item-text  {
    width: 35%; 
    }
    .item-text  {
    font-size: 1.4rem; 
    }
    .lt  {
    left: 5%;
    }
    .rt  {
    right: 5%;
    }
    .lb  {
    left: 5%;
    bottom: 13%;
    }
    .rb  {
    right: 5%;
    bottom: 13%;
    }
}

.lang-switcher {
    position: absolute;
    display: block;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 2%;
    margin: 0 auto;
    z-index: 99;
}
.lang-switcher-btn {
    font-weight: 600;
}
.btn-info {
    background-color: #006699!important;
    border-color: #006699!important;
    color: aqua;
}

#logo {
    max-width: 220px;
    margin: 30px auto;
}