body {
    font-family: "Inter", sans-serif;
    font-weight: 400; /* Default weight */
    color: #5d4b3e;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/* ---------- HEADER --------- */
header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    width: 100vw;
    height: 100px;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.00), 0px 26px 10px 0px rgba(0, 0, 0, 0.04), 0px 15px 9px 0px rgba(0, 0, 0, 0.13), 0px 7px 7px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
}

.navigation-container {
    padding: 16px 0;
    position: relative;
    background-color: #ffffff;
}

.link:hover {
    text-decoration: underline;
}

.link {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
}

.logo {
    height: 130px;
}

.burger-menu {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.navigation ul.active {
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 100%;
    top: 100px;
    left: 0;
    background-color: #ffffff;
    z-index: 1000; /* the higher the number, the closer the element is to the user. Default = 0. I set it to one so that the burger menu items are above the logo */
}

.navigation ul {
    display: none;
}

.navigation ul li {
    margin: 16px 0;
    text-align: center;
}

.burger-menu .line {
    width: 25px;
    height: 2px;
    background-color: #000;
    margin: 3px 0;
    border-radius: 30px;
}

.link {
    color: rgb(0, 0, 0);
}

.active-link {
    color: white;
    background-color: #da6382;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 100px;
    font-family: "Inter", sans-serif;
    width: 100px;
}

header .logo img {
    width: 60px;
    position: fixed;
}

header .icons a img {
    width: 25px;
    margin-left: 250px;
    margin-top: 15px;
}

/* --------- HEADER END ---------- */



.main-banner-menu {
    position: relative;
    text-align: center;
    margin-top: 330px;
    z-index: 0;
}

.main-banner-menu img {
    width: 100%;
    height: auto;
    margin-top: 3000px;
}

.text-overlay-menu {
    position: absolute;
    /* Ajustado para alinear mejor el título "Menu" */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:32px; /* Ajusté el tamaño de la fuente */
    color: #EEEB56;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-top: -400px;
}

.text-overlay-bestsellers {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px; /* Tamaño de fuente más grande para mejor visibilidad */
    color: #ffffff;
    font-weight: 100;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-top: -360px;
}

/* --- Carrusel Section --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin-top: -20px;
    display: flex;
    justify-content: center;
    flex-direction: column; /* Cambiado para que los elementos se apilen uno debajo del otro */
    align-items: center;
    height: 100%;
    background-color: #f7f7f7;
    margin: 0; /* Quité el margin-top:auto para evitar problemas de centrado */
    position: absolute;

}

/* Carrusel contenedor */
.carousel {

    width: 80%;
    max-width: 800px;
    overflow: hidden;
    margin-top: -220px; /* Reducido para subir el carrusel más cerca del título "BESTSELLERS" */
    position: absolute;
    top: 80%; /* Ajustado para alinear mejor el título "Menu" */
    left: 50%;
    transform: translate(-50%, -50%);
}

.carousel-track-container {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

/* Carrusel slides */
.carousel-slide {
    min-width: 100%;
}

.carousel-slide img {
    width: 100%;
    display: block;
    border-radius: 10px; /* Para redondear las esquinas de las imágenes */
}

/* Botones del carrusel */
.carousel-button {
    position: absolute;
    top: 35%; /* Centrado verticalmente */
    transform: translateY(-50%);
    background-color: #EEEB56;
    border-radius: 50px;
  
    border: none;
    padding: 15px;
    cursor: pointer;
    width: 10px;
}

.left {
    left: 10px;
}

.right {
    right: 10px;
}

/* --- Ajustes adicionales --- */

/* Espaciado adicional entre secciones */
.menu-header {
    margin-bottom: 0px; /* Reducido para subir más el carrusel */
}


.breakfast-title {
    position: relative;
    margin-left: 40px;
    margin-top: 180px;
    font-size: 24px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color:#2C76A8;
}

.click-info {
    position: right;
    margin-left: 251px;
    font-size: 12px;
    margin-top: -22px;
    color:#CBCBCB;
}

.baked-buns {
    margin-left: 40px;
    margin-top: 20px;
    position: relative;
}


.creamy-egg {
    margin-left : 220px;
    margin-top: -306px;
    z-index: 99999;
}

.main-banner-menu2 img {
    width: 100%;
    height: auto;
    margin-top: -240px;
    z-index: 1;
    position:absolute;
}

.roasted-vegetable-bread-2{
    margin-left: 40px;
    margin-top: 20px;
        z-index: 2;
    display: flex;
    position:relative;
}

.porridge {
    margin-left : 220px;
    margin-top: -320px;
    z-index: 2;
    display: flex;
    position:relative;
}

.lunch-heading {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color:#EEEB56;
    z-index: 2;
    position:relative;
    font-size: 24px;
    margin-left: 40px;
    margin-top: 60px;
    font-weight: bold;
}

.click-info2 {
    position: right;
    margin-left: 220px;
    font-size: 12px;
    z-index: 2;
    position:relative;
    margin-top: -30px;
    color:#F8D9E1; /*find the click info*/
}

.sesame-roasted {
    margin-left: 40px;
    margin-top: 30px;
    z-index: 2;
    display: flex;
    position:relative;
}

.open-veggie {
    z-index: 2;
    display: flex;
    position:relative;
    margin-left : 220px;
    margin-top: -320px;
}

.salad-cryspy {
    margin-left: 40px;
    margin-top: 30px;
    z-index: 2;
    display: flex;
    position:relative;
    margin-bottom: 10px;
}

.salad-crunchy {
    z-index: 2;
    display: flex;
    position:relative;
    margin-left : 220px;
    margin-top: -332px;
}

.oriental-bigotto {
    margin-left: 40px;
    margin-top: 40px;
}

.drinks-title {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #da6382;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}


/* ------------ FOOTER ---------------- */
.footer {
    height: 650px;
    width: 100vw;
    background-color: #d9d9d9;
    border-radius: 30px 30px 0 0;
    margin-top: 50px;
    align-items: c;
}

.footer h5 {
    margin-left: 70px;
}

.mapstyle {
    margin-top: 50px;
    margin-left: 40px;
    margin-bottom: 20px;
    width: 350px;
}

.footer-links {
    display: flex;
    flex-direction: space-between;
    align-items: center;
    justify-content: center;
    background-color: #da6382;
    width: 350px;
    height: 31px;
    border-radius: 20px;
    margin-left: 42px;
    margin-top: 20px;
}

.footer-links a {
    text-decoration: none;
    margin-right: 10px;
    margin-left: 10px;
    color: #ffffff;
    font-size: 12px;
}

.text-footer {
    margin-top: 30px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;

}

.logo-footer {
    width: 67px;
    margin-left: 185px;
}

.rights {
    margin-top:10px;
    text-align: center;
    margin-bottom: 20px;
}
/* ------------ FOOTER END -------------- */