body {
    display: flex;
    justify-content: center;
    background-color: #000000;
    overflow: hidden;
  }


.bg1 {
    position: fixed;
    bottom: 0;
    opacity: 0.95;
    
    height: 100vh;
    right: 0;
   
   
    backdrop-filter: blur(15px); 
    filter: blur(5px);
    z-index: 1;
}

.bg1_1 {
    display: none;
}

.bg2 {
    position: fixed;
    right: 0;
    bottom: 0;   
    height: 100vh;
    width: 100vw;
    z-index: 6;
}

.bg3 {
    position: fixed;
    bottom: 0vh;   
    width: 101vw;
    z-index: 6;
}

.bg4 {
    position: fixed;
    bottom: 0;   
    width: 100vw;
    z-index: 6;
}

.drg {
    position: fixed;
    right: 10vw;
    bottom: 0;
    height: 95vh;
    z-index: 5;
}

.logo {
    position: fixed;
    top: 5vh;
    left: 5vh;
    height: 8vh;
    z-index: 7;
}

.m1 {
    position: fixed;
    right: 0;
    bottom: 25vh;
    height: 30vh;
    z-index: 6;
}

.m2 {
    position: fixed;
    left: 38vw;
    top: 11vh;
    height: 18vh;
    z-index: 5;
}

.m3 {
    position: fixed;
    right: 1vw;
    top: 0vh;
    height: 40vh;
    z-index: 5;
}

.m4 {
    position: fixed;
    left: 11vw;
    bottom: 0vh;
    height: 73vh;
    z-index: 5;
}

.m5 {
    position: fixed;
    left: 17vw;
    top: 0;
    height: 18vh;
    z-index: 6;
}

.m5_1 {
   position: absolute;
    width: auto;
    top: 0;
   display: none;
    
}

.m6 {
   display: block;
    position: fixed;
    top: 26vh;
    left: 39vw;
    width: 7vw;
    z-index: 7;
}

.m7 {
    display: block;
    position: fixed;
    bottom: 17vh;
    height: 18vh;
    left: 0;
    z-index: 7;
}


.text {
    position: fixed;
    left: 5vh;
    margin-top: 23vh;
    height: 27vh;
    z-index: 7;
}

.button {
    position: fixed;
    left: 5vh;
    margin-top: 55vh;
    height: 8vh;
    z-index: 7;
    cursor: pointer;
}

.button:hover {
   scale: 1.05;
}

.footer {
    position: fixed;
    width: 95%;
    max-width: 95vw;
    margin-top: 80vh;
    z-index: 9;
}




@media (max-width: 1023px) and (min-height: 581px) {


    .bg1 {
display: none;
}

.bg1_1 {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100vw;
}

.bg2 {     
    display: none;
}

.bg3 {
  bottom: 0;
  height: 25vh;
  width: 100vw;
  width: auto;
  z-index: 9;
}



.drg {
    
    right: auto;
    left: auto;
    bottom: -1vh;   
    height: 65vh;
    z-index: 4;
    
  
   
}

.logo {
    position: fixed;
    top: 3.5vh;
    left: 2.5vh;
    height: 5vh;
    z-index: 2;
}

.m1 {
    left: auto;
    top: auto;
    right: -30vw;
    bottom: 16vh;
   z-index: 5;
   height: 30vh;
   width: auto;

}

.m2 {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    right: auto;
    left: -4vw;
    top: 45vh;
    height: 10vh;
    z-index: 3;
}

.m3 {
   display: none;
}

.m4 {
    right: -42vw;
    top: auto;
    margin: 0 0 0 0;
    bottom: -10vh;
    left: auto;
    height: 62vh;
    z-index: 8;
}

.m5 {
    left: auto;
    right:-3vw;
    top: -4vh;
   display: none;
    
}

.m5_1 {
   width: 79vw;
   height: auto;
  right: 0;
   display: block;
    
}

.m6 {
    display: block;
    position: fixed;
    top: 53vh;
    left: auto;
    right: -15vw;
    width: 28vw;
    z-index: 7;
}


.m7 {
    display: none;
}

.text {
    position: fixed;
    left: auto;
    margin-top: 12vh;
    height: 17vh;
    z-index: 3;
}

.button {

    position: relative;
    left: auto;
    margin-top: 32.5vh;
    height: 8.7vh;
    z-index: 6;

}

.footer {
    height: 13vh;
  width: auto;
    max-width: 1000vw;
    margin-top: 83vh;
    z-index: 10;
}


.offer {

position: fixed;
text-align: center;


z-index: 6;

}


@keyframes carousel {
0% {
transform: translateX(61%); /* Начало: все элементы на экране */
}
100% {
transform: translateX(-66%); /* Перемещение всех элементов за пределы экрана */
}
}

.footer {
animation: carousel 8.5s linear infinite; /* Бесконечная анимация */
}

/* Размножим элементы, чтобы они были зациклены */
.footer::before,
.footer::after {

flex-shrink: 0;
width: 100%; /* Применяем ширину в 100%, чтобы они перекрывали экран */
height: 100%;
display: inline-block;
}


}