.content {
    width: 100%;
    max-width: 1920px;
    flex: 1;
    box-sizing: border-box;
    padding: 0 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: opacity 0.6s ease-in-out;
gap: 112px;
}

.hideContent {
    opacity: 0.3;
}
.pincolor{
    color: var(--highlight) !important;
}


.headerContainerLeft{
    display: flex;
    align-items: center;
    gap: 16px;
}
.headlineRespPins h2{
font-size: 16px;

}

@keyframes headlinePins{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        display: none;
    }
}

.lettering {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
    opacity: 1;
    margin-top: 112px;
    margin-bottom: 56px;



}

.letteringContainer {
    width: fit-content;
}

.lettering span {
    font-size: 120px;
    font-weight: bold;
    color: var(--secondary);
}




.sliderOpacity {
    opacity: 0.5;
}




@media(max-width:1600px) {
    .lettering span {
        font-size: 110px;
    }
}

@media(max-width:1200px) {
    .lettering span {
        font-size: 100px;
    }

    .lettering {
        transform: translateX(0) !important;
    }
}

@media(max-width:1050px) {
    .content {
        padding: 0 56px;
    }

    .lettering {
        justify-content: center;
    }
.content{
    gap: 32px;
}

}

@media(min-width:1050px) {
.logoOpacity{
    opacity: 0;
}
}

@media(max-width:800px) {
    .lettering span {
        font-size: 80px;
    }
}


@media(max-width:500px) {
    .lettering span {
        font-size: 60px;
    }
}

@media(max-width:400px) {
    .lettering span {
        font-size: 48px;
    }
}

@media(max-width:670px) {
    .content {
        padding: 0 20px;
    }

}

@media(max-width:400px) {
    .content {
        padding: 0 20px;
    }

    .lettering {
        justify-content: center;
    }
}