.hero {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 50vw;
}

.hero .hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    font-family: 'Inter', sans-serif;
}

.hero .hero-left .hero-left-container {
    display: flex;
    flex-direction: column;
    padding: 0 10vw;
}

.hero .hero-left .hero-left-container .hero-left-container-subtitle {
    font-size: 0.8vw;
    margin-left: 0.2vw;
}

.hero .hero-left .hero-left-container .hero-left-container-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;
    font-size: 5vw;
    margin-bottom: 1vw;
    letter-spacing: 1vw;
}

.hero .hero-left .hero-left-container .hero-left-container-title b {
    color: var(--accent-color);
}

.hero .hero-left .hero-left-container .hero-left-container-description {
    font-family: 'Montserrat', sans-serif;
    width: 30vw;
    font-size: 0.8vw;
    line-height: 1vw;
    margin-bottom: 3vw;
}

.hero .hero-left .hero-left-container .hero-left-container-description b {
    color: var(--accent-color);
}

.hero .hero-left .hero-left-container .hero-left-container-social {
    display: flex;
    flex-direction: row;
    gap: 0.7vw;
}

.hero .hero-left .hero-left-container .hero-left-container-social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.3vw;
    height: 2.3vw;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    transition: all 0.5s;
    cursor: pointer;
    font-size: 1.2vw;
    padding: 0 0.015vw 0.023vw 0;
}

.hero .hero-left .hero-left-container .hero-left-container-social a:hover {
    background-color: transparent;
}

.hero .hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    position: relative;

}

.hero-right {
    perspective: 500px; /* Perspektif mesafesini ayarlayın */
}


#imgui-menu {
    transform-style: preserve-3d;
    transition: transform 0.1s; /* Pürüzsüz geçiş için */
    width: 70%; /* Örnek: orijinal boyutun %80'i */
    height: auto; /* Yüksekliği orantılı olarak ayarlar */
    /* Diğer stil ayarlamaları */
}

#imgui-menu2 {
    transform-style: preserve-3d;
    transition: transform 0.1s; /* Smooth transition */
    width: 50%; /* Example: 50% of the original size */
    height: auto; /* Adjusts the height proportionally */
}

.hero .hero-right .hero-right-container {
    width: 35vw;
    height: 20vw;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    border-radius: 2vw;
}

.hero .hero-right .hero-right-container iframe {
    width: 35vw;
    height: 20vw;
    border-radius: 2vw;
}