body {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    
}

.header {
    background-image: url('../../bg.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.content-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.content-header .logo {
    width: 400px;
    height: 400px;
}

.content-header h1 {
    font-family: gilroy-bold;
    font-size: 3rem;
    margin: 0;
    color: white;
}

.content-header h2{
    width: 60%;
    font-family: gilroy-light;
    text-align: center;
    font-weight: 100;
    font-size: 2rem;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;

}

/* ---------------------------------- */


.choose_menu {
    display: flex;
    height: 30vh;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    
}

.choose_menu a {
    text-decoration: none;

}


.selector img {
    width: 64px;
    height: 64px;
    margin-right: 20px;
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: all .25s ease;
}

.selector:hover img {
    filter: brightness(0) saturate(100%) invert(88%)        ia(14%) saturate(1087%) hue-rotate(356deg) brightness(98%) contrast(99%);}

.selector  h1 {
    font-family: gilroy-bold;
    font-size: 2rem;
    color: white;
    margin: 0;
    transition: all .25s ease;
}

.selector:hover {
    border-bottom: solid 4px var(--main-color);
    transition: all .25s ease;
}

.selector:hover h1 {
    color: var(--main-color);

}

.selector:hover img {
    filter: brightness(0) saturate(100%) invert(88%) sepia(14%) saturate(1087%) hue-rotate(356deg) brightness(98%) contrast(99%);
}

.break {
    width: 10%;
    height: 5px
}

/* ---------------------------------- */

.section-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
    padding: 20px;
    margin-bottom: 100px;
}

.section-menu h1 {
    font-family: bakery_roast_regular;
    font-size: 4rem;
    color: white;
    margin: 0;
}

.items {
    display: flex;
    margin-top: 20px;
    width: 70%;
    justify-content: center

}


.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    margin-top: 20px;
    width: 33%;
    height: 425px;
    flex-shrink: 0;
    margin-bottom: 50px;
}

.item img {
    width: 50%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.item h2 {
    font-family: aboretoregular;
    font-size: 1.7rem;
    color: var(--menu-title);
    font-weight: 100;
    margin: 0;
    text-align: center;
}

.item p {
    height: 125px;
    font-family: gilroy-light;
    font-size: 1.25rem;
    color: var(--menu-text);
    font-weight: 100;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    flex-grow: 1; /* This property ensures the text takes up remaining space */
    margin: 30px;

}

.item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.item .btn {
    width: 250px;
    font-size: 1.25rem;
}

/* 4K */
@media screen and (min-width: 2500px) {
    .section-menu {
        height: 40vh;
        margin-bottom: 17.5vh;
    }

    .carousel-buttons {
        margin-top: 17.5vh !important;
    }

}