@keyframes fade-in {
    from{opacity: 0;}
    to{opacity: 1;}
}

body{
    background: black;
    font-family: Arial;
    color:white;
}

a{
    text-decoration: none;
    color:white;
}
.header{
    display: flex;
    align-items: center;
    gap:20%;
}
.header-logo{
    width:15%;
}

.menu-header{
    gap:93px;
    display: flex;
    background-color: #3C3C3C;
    padding:1%;
    border-radius: 10px;
}

.menu-header a{
    text-decoration: none;
    color:white;
}

.lang-bar{
    gap:100px;
}

.hero-content{
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap:10%;
    animation:fade-in 2s;
}

.hero-content img{
    width:25%;
}

.icons{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:289px;
}

.icon{
    display:block;
    align-items: center;
    justify-items:center;
}


.demo-button{
    display:block;
    margin-left:auto;
    margin-right:auto;
    font-size: x-large;
    border-color: white;
    background-color: black;
    color:white;
    border-width: 3px;
    border-radius: 10px;
}

.split-menu{
    justify-items: center;
    gap:90px;
    justify-content: center;
    display: flex;
    align-items: center;

}

.video-menu{
    padding:1%;
    width:25%;
    background-color: #D9D9D9;
    border-radius: 10px;
}

.video-menu video{
    border-radius: 10px;
    width:100%;
}

.suitable{
    background-color: rgb(255,255,255,0.52);
    padding:7%;
    border-radius: 10px;
}

.buttons-flex{
    display: flex;
    flex-direction: row;
    gap:20px;
    align-items: center;
    justify-content: center;
}

.footer{
    background-color: #3C3C3C;
}

footer img{
    display: block;
    margin-left:auto;
    margin-right: auto;
}

@media (max-width:768px) {
    
    .header-logo{
        width:50%;
    }
    .header{
        flex-direction: column;
        gap:10px;
    }

    .menu-header{
        width:100%;
        gap:10%;
        justify-content: center;
    }

    .hero-content{
        flex-direction: column;
    }

    .hero-content img{
        width:60%;
    }

    .hero-content h1{
        font-size: large;
    }

    .icons{
        flex-direction: column;
        gap:100px;
    }
    .split-menu{
        flex-direction: column-reverse;
    }
    .video-menu{
        width:100%;
    }

}