.nav-menu {
    background-color: #C81A7C;
}

@media (max-width: 991px) {
    .content-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .header-container {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .nav-menu {
        padding: 0 20px;
    }
}

.main-content {
    display: flex;
    margin-top: 200px;
    flex-direction: column;
    font-family: Rokkitt, sans-serif;
    color: #000;
    justify-content: start;
}

@media (max-width: 991px) {
    .main-content {
        max-width: 100%;
        margin-top: 40px;
    }
}

.intro-section {
    display: flex;
    width: 1004px;
    max-width: 100%;
    flex-direction: column;
    justify-content: start;
}

.main-title {
    font-size: 40px;
    font-weight: 500;
    line-height: 45px;
}

@media (max-width: 991px) {
    .main-title {
        max-width: 100%;
    }
}

.intro-text {
    font-size: 32px;
    font-weight: 400;
    line-height: 38px;
    margin-top: 128px;
}

@media (max-width: 991px) {
    .intro-text {
        max-width: 100%;
        margin-top: 40px;
    }
}

.main-image {
    aspect-ratio: 2.34;
    object-fit: contain;
    object-position: center;
    width: 100%;
    border-radius: 16px;
    margin-top: 202px;
}

@media (max-width: 991px) {
    .main-image {
        max-width: 100%;
        margin-top: 40px;
    }
}

.services-intro {
    color: #000;
    margin-top: 50px;
    width: 894px;
    font: 400 32px/38px Rokkitt, sans-serif;
}

@media (max-width: 991px) {
    .services-intro {
        max-width: 100%;
        margin-top: 40px;
    }
}

.opening-hours {
    margin-top: 248px;
}

@media (max-width: 991px) {
    .opening-hours {
        max-width: 100%;
        margin-top: 40px;
    }
}

.opening-hours-content {
    gap: 20px;
    display: flex;
}

@media (max-width: 991px) {
    .opening-hours-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0px;
    }
}

.opening-hours-text {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 0px;
}

@media (max-width: 991px) {
    .opening-hours-text {
        width: 100%;
    }
}

.opening-hours-description {
    color: #000;
    letter-spacing: 0.48px;
    margin-top: 116px;
    font: 400 24px/31px Rockwell, sans-serif;
}

@media (max-width: 991px) {
    .opening-hours-description {
        max-width: 100%;
        margin-top: 40px;
    }
}

.opening-hours-image-wrapper {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 50%;
    margin-left: 20px;
}

@media (max-width: 991px) {
    .opening-hours-image-wrapper {
        width: 100%;
    }
}

.opening-hours-image {
    aspect-ratio: 1.46;
    object-fit: contain;
    object-position: center;
    width: 100%;
    border-radius: 16px;
    flex-grow: 1;
}

@media (max-width: 991px) {
    .opening-hours-image {
        max-width: 100%;
        margin-top: 30px;
    }
}

.cta-text {
    color: #000;
    text-align: center;
    align-self: center;
    margin-top: 139px;
    font: 500 40px/48px Rokkitt, sans-serif;
}

@media (max-width: 991px) {
    .cta-text {
        max-width: 100%;
        margin-top: 40px;
    }
}

.logo-footer {
    aspect-ratio: 1.91;
    object-fit: contain;
    object-position: center;
    width: 378px;
    align-self: center;
    margin-top: 167px;
    max-width: 100%;
}

@media (max-width: 991px) {
    .logo-footer {
        margin-top: 40px;
    }
}

.circle-decoration {
    background-color: #C81A7C;
    border-radius: 50%;
    align-self: center;
    display: flex;
    margin-top: 133px;
    width: 96px;
    height: 96px;
    position: relative; /* Pozícionálhatóvá tesszük a belső elemekhez */
}

.circle-decoration img {
    position: absolute; /* A kép abszolút pozícionálású lesz */
    top: 50%; /* A kör függőleges közepére igazítás */
    left: 50%; /* A kör vízszintes közepére igazítás */
    transform: translate(-50%, -50%); /* Pontosan középre igazítás a szélesség és magasság alapján */
}

@media (max-width: 991px) {
    .circle-decoration {
        margin-top: 40px;
    }
}

.footer {
    background-color: #C81A7C;
}

@media (max-width: 991px) {
    .footer {
        max-width: 100%;
        margin-top: 40px;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#card1 .card-body {
    background-color: #F1206D;
}

#card2 .card-body {
    /* background-color: #7EC4CF; */
    background-color: #F04383;
}

#card3 .card-body {
    background-color: #EA6F9C;
}

:root {
    --cards: 3;
    --cardHeight: 87vh;
    --cardTopPadding: 6em;
    --cardMargin: 4vw;
}

.container {
    width: 100%;
    margin: 0 auto;
}

#cards {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--cards), var(--cardHeight));
    gap: var(--cardMargin);
    padding-bottom: calc(var(--index) * var(--cardTopPadding));
    margin-bottom: var(--cardMargin);
    max-height: 140vh;
    /* Vagy egy másik fix magasság */
    overflow-x: hidden;
    /* Horizontal scroll elrejtése */
    overflow-y: scroll;
}

#cards::-webkit-scrollbar {
    display: none;
    /* Webkit alapú böngészőkben (Chrome, Safari) elrejti a scrollbart */
}

#cards {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

#card1 {
    --index: 1;
}

#card2 {
    --index: 2;
}

#card3 {
    --index: 3;
}

.card {
    top: 0;
    padding-top: calc(var(--index) * var(--cardTopPadding));
}

.card-body {
    display: flex;
    flex-direction: column; /* Egymás alá rendezi az elemeket */
    justify-content: flex-start; /* A tartalom a tetején kezdődik */
    align-items: flex-start; /* A tartalom balra igazodik */
    padding: 30px;
    border-radius: 50px;
    box-shadow: none;
    height: var(--cardHeight);
    transition: all 0.5s;
}

.card-body h2, 
.card-body p {
    color: #fff; /* Fehér szöveg */
}