body{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'ArmAvangard';
    src: url('fonts/Armavangard-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }

.back1 {
    background-image: url('img/blue.jpg');
    background-position: center; /* Центрирует изображение */
    background-repeat: no-repeat; /* Запрещает повторение изображения */
    length: 100%;
    height: 730px;
    border-style: none;
    border-width: 0px;
    min-height: 100%;
}

/* Анимация для появления сверху */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Анимация для появления снизу */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.top-center-image {
    position: absolute; /* Абсолютное позиционирование */
    top: 20px; /* Отступ сверху */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    text-align: center; /* Центрирование содержимого */
    animation: fadeInDown 1s ease-out forwards; /* Анимация появления сверху */
    opacity: 0; /* Начальная прозрачность */
}

.smartlinepic{
    width: 70px;
    height: 75px;
}

.top-center-image img {
    width: 70px; /* Ширина картинки */
    height: auto; /* Автоматическая высота для сохранения пропорций */
}

.bottom-center-text {
    position: absolute; /* Абсолютное позиционирование */
    top: 100px; /* Отступ снизу */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    text-align: center; /* Центрирование содержимого */
    font-size: 7px; /* Размер текста */
    font-family: 'Roboto', sans-serif; /* Шрифт */
    font-style: italic;
    font-weight: bold;
    animation: fadeInUp 1s ease-out 0.5s forwards; /* Анимация появления снизу с задержкой */
    opacity: 0; /* Начальная прозрачность */
}

.smart-text {
    color: #5FCAC0; /* Цвет для текста SMART */
}

.line-text {
    color: #FFFFFF; /* Цвет для текста LINE */
    margin-left: 2px; /* Пробел между SMART и LINE */
}

.bottom-center-text2{
    position: absolute; /* Абсолютное позиционирование */
    top: 125px; /* Отступ снизу */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
    text-align: center; /* Центрирование содержимого */
    font-size: 20px; /* Размер текста */
    font-family: "Squada One", sans-serif;
    font-style: normal;
    font-weight: normal;
    animation: fadeInUp 1s ease-out 0.5s forwards; /* Анимация появления снизу с задержкой */
    opacity: 0; /* Начальная прозрачность */
}

.internet-text{
    color: #5FCAC0; 
}

.provider-text{
    color: #5FCAC0; 
    margin-left: 5px;
}

.neon-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(0.6); /* Сжатие по вертикали на 60% */
    text-align: center;
    font-family: "Squada One", sans-serif;
    font-size: 12rem; /* Большой размер текста */
    color: #5FCAC0; /* Внутренний цвет текста */
    letter-spacing: 10px; /* Разряженный текст (расстояние между буквами) */
    text-shadow:
        0 0 10px #4c9bd0,
        0 0 20px #4c9bd0,
        0 0 40px #4c9bd0,
        0 0 80px #4c9bd0,
        0 0 120px #4c9bd0; /* Неоновый эффект */
    z-index: 1; /* Убедитесь, что текст находится под верхними элементами */
    white-space: nowrap; /* Запрет переноса текста на новую строку */
    opacity: 0; /* Начальная прозрачность для анимации */
    animation: fadeInScale 1.5s ease-out forwards; /* Анимация появления */
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleY(0.6) scale(0.8); /* Начальный масштаб */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleY(0.6) scale(1); /* Конечный масштаб */
    }
}

.smart, .line {
    display: inline-block;
    vertical-align: baseline; /* Выравнивание по базовой линии */
    color: #00ffe8;
}

.smart {
    margin-right: 5px; /* Расстояние между словами */
}

.planet {
    position: absolute;
    bottom: 20px; /* Расположение внизу */
    left: 50%;
    transform: translateX(-50%);
    width: 75px; /* Размер планеты */
    height: 75px;
    z-index: 2; /* Убедитесь, что планета выше других элементов */
}

.planet img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Сохраняет пропорции изображения */
}

@keyframes rotatePlanet {
    from {
        transform: translateX(-50%) rotate(0deg);
    }
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

.planet {
    animation: rotatePlanet 20s linear infinite; /* Вращение планеты */
}

.back2{
    background-image: url(img/back2.png);
    height: 2000px;
    background-position: center; /* Центрирует изображение */
    length: 100%;
    border-style: none;
    border-width: 0px;
    min-height: 100%;
}


.bottom-center-text34{
    position: absolute; /* Абсолютное позиционирование */
    top: 750px; /* Отступ снизу */
    left: 50%; /* Центрирование по горизонтали */
    transform: translateX(-50%); /* Точное центрирование */
}

.bottom-center-text3{
    text-align: center; /* Центрирование содержимого */
    font-size: 60px; /* Размер текста */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
   
}

.image-container1 {
    position: absolute; /* Абсолютное позиционирование */
    top: 1200px; /* Центрирование по вертикали */
    left: 50%; /* Позиция по горизонтали (можно изменить) */
    transform: translate(-50%, -50%); /* Точное центрирование по вертикали */
    width: 100%;
    max-width: 1200px;
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
    justify-content: center; /* Центрирование картинок по горизонтали */
    align-items: center; /* Выравнивание картинок по вертикали */
  }
  
.image-right1 {
    width: 130px; /* Ширина каждой фотографии */
    height: 130px; /* Сохранение пропорций */
    /*object-fit: cover; /* Обрезка изображения, если нужно */
    margin-left: 1%; /* Зазор между фотографиями */
}
  
.image-left1 {
    width: 130px; /* Ширина каждой фотографии */
    height: 130px; /* Сохранение пропорций */
    /*object-fit: cover; /* Обрезка изображения, если нужно */
    margin-right: 1%; /* Зазор между фотографиями */
}
  
.text-container1 {
    position: absolute; /* Абсолютное позиционирование */
    top: 1175px; /* Отступ снизу */
    transform: translate(-0%, -0%);
    width: 8.5%;
    height: 5%;
    left: 26.7%;
    right: 74.3%;
}

.top-word1 {
    position: absolute;
    font-size: 15px; /* Размер шрифта первого слова */
    left: 57%; /* Смещение на 50% вправо */
  
    text-align: left;
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}
  
.bottom-word1 {
    position: absolute;
    top: 50%;
    text-align: center;
    font-size: 15px; /* Размер шрифта второго слова */
    margin-top: auto; /* Перемещает второе слово вниз */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}

.text-container2 {
    position: absolute; /* Абсолютное позиционирование */
    top: 1175px; /* Отступ снизу */
    width: 250px;
    height: 50px;
    right: 21.1%;
}

.top-word2 {
    position: absolute;
    font-size: 15px; /* Размер шрифта первого слова */
    left: 0%; /* Смещение на 50% вправо */
    text-align: left;
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}
  
.bottom-word2 {
    position: absolute;
    top: 50%;
    
    font-size: 15px; /* Размер шрифта второго слова */
    margin-top: auto; /* Перемещает второе слово вниз */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}

.image-container2 {
    position: absolute; /* Абсолютное позиционирование */
    top: 1359px; /* Центрирование по вертикали */
    left: 50%; /* Позиция по горизонтали (можно изменить) */
    transform: translate(-50%, -50%); /* Точное центрирование по вертикали */
    width: 100%;
    max-width: 1200px;
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
    justify-content: center; /* Центрирование картинок по горизонтали */
    align-items: center; /* Выравнивание картинок по вертикали */
  }
  
.image-right2 {
    width: 130px; /* Ширина каждой фотографии */
    height: 130px; /* Сохранение пропорций */
    /*object-fit: cover; /* Обрезка изображения, если нужно */
    margin-left: 1%; /* Зазор между фотографиями */
}
  
.image-left2 {
    width: 130px; /* Ширина каждой фотографии */
    height: 130px; /* Сохранение пропорций */
    /*object-fit: cover; /* Обрезка изображения, если нужно */
    margin-right: 1%; /* Зазор между фотографиями */
}

.text-container3 {
    position: absolute; /* Абсолютное позиционирование */
    top: 1332px; /* Отступ снизу */
    width: 300px;
    height: 50px;
    left: 363px;
}

.top-word3 {
    position: absolute;
    font-size: 15px; /* Размер шрифта первого слова */
    left: 0%; /* Смещение на 50% вправо */
  
    text-align: left;
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}
  
.bottom-word3 {
    position: absolute;
    top: 50%;
    text-align: center;
    font-size: 15px; /* Размер шрифта второго слова */
    margin-top: auto; /* Перемещает второе слово вниз */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}

.text-container4 {
    position: absolute; /* Абсолютное позиционирование */
    top: 1332px; /* Отступ снизу */
    width: 350px;
    height: 50px;
    right: 14.6%;
}

.top-word4 {
    position: absolute;
    font-size: 15px; /* Размер шрифта первого слова */
    left: 0%; /* Смещение на 50% вправо */
    text-align: left;
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}
  
.bottom-word4 {
    position: absolute;
    top: 50%;
    
    font-size: 15px; /* Размер шрифта второго слова */
    margin-top: auto; /* Перемещает второе слово вниз */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #00ffe8;
}

.logoimg{
    top: 1500px;
    display: flex;
    height: 200px;       /* Задай нужную высоту контейнера */
    right: 18%;
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Позиция по горизонтали (можно изменить) */
    transform: translate(-50%, -50%); /* Точное центрирование по вертикали */
    width: 100%;
    max-width: 1200px;
    display: flex;
    padding-top: 80px;
    padding-bottom: 30px;
    justify-content: center; /* Центрирование картинок по горизонтали */
    align-items: center; /* Выравнивание картинок по вертикали */
}

.logoimg2{
    align-items: center;
}

.hnga{
    position: absolute;
    top: 1740px;
    right: 6%;
  


}

.hngankyun{
    width: 500px;
    height: 500px;
}

.ether{
    position: absolute;
    top: 1858px;
    right: 6.7%;

 
}

.ethernet{
    width: 480px;
    height: 285,7px;
}

.ether2{
    position: absolute;
    top: 2069.5px;
    right: 24%;

 
}

.ethernet2{
    width: 300px;
    height: 168,9px;
}

.textback{
    position: absolute;
    top: 1810px;
    left: 11%;
}

.text-cont-back{
    position: absolute; /* Абсолютное позиционирование */
    top: 1845px; /* Отступ снизу */
    width: 400px;
    height: 350px;
    left: 15%;
}

.word1{
    position: absolute;
    top: 0.5%;
    font-size: 15px; /* Размер шрифта второго слова */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #000000;
}

.stroke1{
    position: absolute;
    top: 15%;
    font-size: 20px; /* Размер шрифта второго слова */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #383e3e;
}

.word2{
    position: absolute;
    top: 27%;
    font-size: 15px; /* Размер шрифта второго слова */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #000000;
}

.stroke2{
    position: absolute;
    top: 51%;
    font-size: 20px; /* Размер шрифта второго слова */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #383e3e;
}

.word3{
    position: absolute;
    top: 63%;
    font-size: 15px; /* Размер шрифта второго слова */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #000000;
}

.stroke3{
    position: absolute;
    top: 78%;
    font-size: 20px; /* Размер шрифта второго слова */
    font-family: 'ArmAvangard', sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #383e3e;
}

.finiimag{
    position: absolute;
    width: 1202px;
    top: 2400px;
    display: flex;
    height: 300px;       /* Задай нужную высоту контейнера */
    left: 50%; /* Позиция по горизонтали (можно изменить) */
    transform: translate(-50%, -50%); /* Точное центрирование по вертикали */
    width: 100%;
    max-width: 1200px;
    display: flex;
    padding-top: 80px;
    padding-bottom: 30px;
    justify-content: center; /* Центрирование картинок по горизонтали */
    align-items: center; /* Выравнивание картинок по вертикали */
}

.fini{
    width: 900px;
    height: 219px;

}

.support{
    position: absolute;
    top: 350%;
    right: 1%;
    width: 50px;
    height: 150px;
}

.support4{
    position: absolute;
    top: 2555px;
    right: 1%;
    width: 50px;
    height: 150px;
}

.phone{
    width: 40px;
    height: 40px;
}

.facebook{
    margin-top: 10px;
    width: 40px;
    height: 40px;
}

.mail{
    margin-top: 10px;
    width: 40px;
    height: 40px;
}

.support img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.support img:hover {
    transform: scale(1.2);
    opacity: 0.8;
}

.image-left2 {
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Крутая анимация при наведении */
.image-left2:hover {
    animation: shake 0.5s ease-in-out infinite alternate;
    transform: scale(1.2) rotate(-10deg);
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
}

/* Анимация "покачивания" */
@keyframes shake {
    0% { transform: translateX(0); }
    100% { transform: translateX(5px); }
}

.image-right1 {
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Крутая анимация при наведении */
.image-right1:hover {
    animation: shake 0.5s ease-in-out infinite alternate;
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
}

/* Анимация "покачивания" */
@keyframes shake {
    0% { transform: translateX(0); }
    100% { transform: translateX(5px); }
}

.ether:hover .ethernet {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) 
            drop-shadow(0 0 20px rgba(0, 255, 255, 0.6)) 
            drop-shadow(0 0 30px rgba(0, 255, 255, 0.4));
    animation: neon-pulse 1.5s ease-in-out infinite;
}

@keyframes neon-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) 
                drop-shadow(0 0 20px rgba(0, 255, 255, 0.6)) 
                drop-shadow(0 0 30px rgba(0, 255, 255, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 1)) 
                drop-shadow(0 0 30px rgba(0, 255, 255, 0.8)) 
                drop-shadow(0 0 45px rgba(0, 255, 255, 0.6));
    }
}

@media (min-width: 370px) and (max-width: 934px){
        .smartlinepic{
            width: 50px !important;
            height: 52px !important;
        }

        .bottom-center-text{
            top: 80px;
        }

        .bottom-center-text2{
            
            width: 200px;
            top: 100px;

        }

        .neon-text{
            font-size: 3.7rem;
            top: 200px;
        }

        .planet{
            
           width: 55px;
           height: 55px;

        }

        .bottom-center-text3{
            font-size: 24px;
        }

        .image-container1{
            top: 1000px;
            padding-bottom: 15px;
            padding-top: 15px;

        }

        .image-left1{
            
            width: 65px;
            height: 65px;

        }

        .image-right1{
            
            width: 65px;
            height: 65px;

        }

        .text-container1{
            
            top: 988px;
            left: 56px;


        }

        .top-word1{
            font-size: 5px;

        }

        .bottom-word1{
            font-size: 5px;
        }

        .image-container2{
            top: 1075px;
            padding-bottom: 15px;
            padding-top: 15px;

        }

        .image-left2{
            
            width: 65px;
            height: 65px;

        }

        .image-right2{
            
            width: 65px;
            height: 65px;

        }

        .text-container2{
            
            left: 270px;
            width: 90px;
            top: 986px;
            right: 56px;


        }

        .top-word2{
            font-size: 5px;

        }

        .bottom-word2{
            font-size: 5px;
            top: 18px;
            
        }

        .text-container4{
            
           
            right: 0px;
            left: 270px;
            top: 1060px;


        }

        .top-word4{
            font-size: 5px;

        }

        .bottom-word4{
            font-size: 5px;
            top: 18px;
           
            
        }

        .text-container3{
            
            left: 37px;
            top: 1060px;
            width: 80px;

          


        }

        .top-word3{
            font-size: 5px;

        }

        .bottom-word3{
            font-size: 5px;
            top: 18px;
           
           
            
        }

        .logoimg{
            top: 1150px;
            width: 200px;
            height: 50px;


        }

        .logoimg2{
            height: 65px;
        }

        .hnga{
            top: 1300px;
            width: 150px;
            left: 220px;
        }

        .hngankyun{
            width: 150px;
            height: 150px;
        }

        .ether{
            top: 1330px;
            right: 0px;
            width: 140px;
            left: 215px;
                  
        }

        .ethernet{
            width: 160px;
        }

        .ether2{
            top: 1405.5px;
            left: 194px;
        }

        .ethernet2{
            width: 90px;
        }

        .textback{
            top: 1315px;
            width: 170px;
            height: 130.625;
            left: 15px;
        }

        .texttextback{
            width: 160px;
        }

        .text-cont-back{
            
            width: 160px;
            top: 1330px;
            height: 120px;
            left: 25px;


        }

        .word1{
            font-size: 4.5px; /* Размер шрифта второго слова */
        }
        
        .stroke1{
            font-size: 5px; /* Размер шрифта второго слова */
        
        }
        
        .word2{
            font-size: 4.5px; /* Размер шрифта второго слова */
        }
        
        .stroke2{
            font-size: 5px; /* Размер шрифта второго слова */
        }
        
        .word3{
            font-size: 4.5px; /* Размер шрифта второго слова */
        }
        
        .stroke3{
            font-size: 5px; /* Размер шрифта второго слова */
        }

        .finiimag{
            
            width: 300px;
            height: 150px;
            top: 1600px;

        }

        .fini{
            
            width: 300px;
            height: 78px;

        }

        .support{
            
            width: 25px;
            height: 95px;
            top: 1700px;

        }

        .phone{
            width: 20px;
            height: 20px;
        }
        
        .facebook{
            margin-top: 10px;
            width: 20px;
            height: 20px;
        }
        
        .mail{
            margin-top: 10px;
            width: 20px;
            height: 20px;
        }

        .back2{
            height: 1070px;
        }


     
}