body, html {
        height: 100%;
        font-family: Comfortaa, sans-serif;
        background-color: #0e0b1f;
        scroll-behavior: smooth;



    }

.hero-section {
    height: 100vh;
    background-color: #0e0b1f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;

    opacity: 0;
    transform: translateX(100%); /* Start von rechts */
    animation: fadeInFromRight 3s ease-out forwards;

    @media (max-width: 768px) {
        .hero-section {
            height: 100vh;
            background-color: #0e0b1f;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;

        }
    }
}

    .hero-section h1 {
        font-size: 100px; /* Standard für große Bildschirme */
        color: #00ffb8;
        text-transform: uppercase;
        font-family: Comfortaa, sans-serif;
        text-align: center; /* Zentriere den Text */
    }

    @media (max-width: 768px) {
        .hero-section h1 {
            font-size: 50px; /* Verkleinere die Schriftgröße für mobile Geräte */
            word-wrap: break-word; /* Lasse den Text umbrechen, wenn er zu lang ist */
        }
    }


/* Project Rows */
.project-row {
    display: flex;
    align-items: center;
    font-family: 'Comfortaa', sans-serif;

    opacity: 0;
    transform: translateX(100%); /* Start von rechts */
    animation: fadeInFromRight 3s ease-out forwards;
    position: relative;
    z-index: 1;
}

.project-text {
    padding: 20px;
    font-family: 'Comfortaa', sans-serif;

}

.project-image img {
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;

}


    .vertical-text {
        writing-mode: vertical-rl;  /* Schreibrichtung vertikal, von rechts nach links */
        transform: rotate(0deg);  /* Text drehen, damit er von oben nach unten lesbar ist */
        font-size: 104px;  /* Schriftgröße */
        letter-spacing: 10px;  /* Abstand zwischen den Buchstaben */
        position: fixed;  /* Fixiert den Text beim Scrollen */
        right: 25px;  /* Direkt an den rechten Rand des Bildschirms */
        top: 50px;  /* Abstand von der Oberkante */
        color: white;  /* Schriftfarbe */
        padding-right: 10px; /* Ein wenig Abstand vom Rand */
        z-index: -1;
        opacity: 0.2;
    }
    /* Media Query: Verstecke die Schrift auf Bildschirmen mit Breite unter 768px */
    @media screen and (max-width: 768px) {
        .vertical-text {
            display: none;  /* Verstecke die vertikale Schrift komplett auf kleinen Bildschirmen */
        }
    }




    /* Container für die Animation */

    /* Der Pfeil nach unten */
    .arrow {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 30px solid #00ffb8; /* Farbe des Pfeils */
        animation: moveDown 2s ease-in-out infinite alternate;
        position: absolute;
        justify-content: center;
        top: 60%;
        right: 50%;
        align-items: center;
    }

    @media screen and (max-width: 768px) {
        .arrow {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 30px solid #00ffb8; /* Farbe des Pfeils */
            animation: moveDown 2s ease-in-out infinite alternate;
            position: absolute;
            justify-content: center;
            top: 60%;
            right: 45%;
            align-items: center;
        }
    }






    /* Definieren der Animation */
    @keyframes moveDown {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        50% {
            transform: translateY(10px); /* Pfeil bewegt sich nach unten */
            opacity: 0.7;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }