body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo{
    width: 50px;
    height: 50px;
    border-radius: 30px;
}

.sidebar{
    align-items: center;
    justify-content: center;
    width: 500px;
    height: 300px;
    display: flex;
    border-radius: 20px;
    margin-top: 50px;

}

header{
    background-color: rgb(44, 44, 44);
    color: aliceblue;
}

.class1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}


.class2{
    padding: 60px 0;

}

.class2-container{
    display: flex;
    align-items: center;
    gap: 40px;
}

.class2-text{
    align-items: center;
    justify-content: center;
}



.class2-image{
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    display: flex;
    border-radius: 20px;
}

.features{
    padding: 60px 0 ;
}

.features-class3{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.feature{
    background-color: rgb(44, 44, 44); ;
    padding: 20px;
    border-radius: 20px;
    width: 300px;
    height: 300px;
    color: aliceblue;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: background-color 0.3s ease 0.1s;
}


.class4{
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 500px){
.class2-container {
    gap: 20px;
    flex-direction: column;
}
.class2-image{
    width: 95%;
    height: 400px;
}

.container{
    padding: 0 16px;
}
.features-class3{
    flex-direction: column;
}
.feature{
width: 90%;
}
}

.syn_hyini{
    color: rgb(255, 255, 255);
}

.syn_hyini:hover{
    color: rgb(255, 0, 0);
}