@charset "utf-8";
/* CSS Document */

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 4px 2px -2px gray;
    transition: all 0.3s ease; /* Transición para cambios en el header */
}

.fixed-header .top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    transition: padding 0.3s ease; /* Para suavizar cambios de padding */
}

.fixed-header .logo-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.fixed-header .logo {
    max-height: 80px;
    transition: max-height 0.3s ease; /* Para suavizar cambios de tamaño */
}

.fixed-header .contact-info {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-right: 10%;
}

.fixed-header .contact-info p {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: font-size 0.3s ease; /* Para suavizar cambios de fuente */
}

.fixed-header .contact-info p i {
    font-size: 1.2rem;
    transition: font-size 0.3s ease; /* Para suavizar cambios de iconos */
}

/* Estilos cuando el encabezado está en estado 'scrolled' */
.fixed-header.scrolled .top-header {
    padding: 0.2rem 2rem; /* Reducir padding */
}

.fixed-header.scrolled .logo {
    max-height: 50px; /* Reducir tamaño del logo */
}

.fixed-header.scrolled .contact-info p {
    font-size: 0.8rem; /* Reducir tamaño de fuente */
}

.fixed-header.scrolled .contact-info p i {
    font-size: 0.9rem; /* Reducir tamaño de iconos */
}

.contact-info i {
    margin-right: 5px; /* Espacio entre el icono y el texto */
	color: #f28a21;
}

.fixed-header .contact-info p {
    margin: 0;
    color: #414141;
}

nav {
    background-color: #e4e4e4; /* Color de fondo del menú */
    height: 50px; /* Altura del menú */
    display: flex;
    align-items: center; /* Centra los elementos verticalmente */
    justify-content: center; /* Centra los elementos horizontalmente */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    position: relative;
    margin: 0 1rem;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    padding: 1rem;
    display: block;
    transition: background-color 0.3s, color 0.3s;
}

nav ul li a:hover {
    background-color: #f28a21; /* Fondo del menú al pasar el cursor */
    color: #fff; /* Color del texto al pasar el cursor */
}

nav ul li.dropdown > a::after {
    content: '\25BC'; /* Código Unicode para una flecha hacia abajo */
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.6rem; /* Ajusta el tamaño de la flecha */
    color: #000; /* Color de la flecha */
}

/* Submenú estilos */
nav ul li .submenu {
    display: none;
    position: absolute;
    background-color: #f8f5f5; /* Color de fondo del submenú igual que el menú principal */
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%; /* Ajusta la posición del submenú */
    left: 0;
    width: 280px; /* Ajusta el ancho del submenú */
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Opcional: sombra para mejorar la visibilidad */
}

nav ul li:hover .submenu {
    display: block;
}

nav ul li .submenu li {
    padding: 0; /* Sin padding */
}

nav ul li .submenu li a {
    display: block;
    color: #000; /* Color del texto del submenú */
    padding: 0.5rem 1rem; /* Espaciado alrededor del texto */
    text-decoration: none;
    transition: color 0.3s; /* Cambio suave de color */
}

nav ul li .submenu li a:hover {
    color: #f28a21; /* Color del texto del submenú al pasar el cursor */
    background-color: transparent; /* Asegura que no haya fondo */
}

/* Estilos para el slider */
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: auto; /* Ajusta la altura automáticamente según el contenido */
}

.slider {
    position: relative;
    width: 100%;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
	position: relative;
}

.slide img {
    width: 100%;
    height: auto; /* Mantiene la proporción de las imágenes */
    display: block; /* Elimina espacios debajo de las imágenes */
}

.description {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px; /* Ajusta el tamaño según tus necesidades */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* Sombra */
    width: calc(100% - 40px); /* Ajusta el ancho para el padding */
}

/* Contenido del banner */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 10;
}

.banner-content h1 {
    font-size: 3rem; /* Ajusta el tamaño según tus necesidades */
    font-family: 'SangBleu Kingdom', serif;
    color: #fff; /* Asegúrate de que el texto sea blanco */
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8); /* Sombra más grande y opaca */
    margin-bottom: 10px;
}

.banner-content p {
    font-size: 1.2rem; /* Ajuste de tamaño responsivo */
    margin-bottom: 20px;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8); /* Sombra más grande y opaca */
}

.btn-find-your-trip {
    display: inline-block;
    padding: 15px 30px;
    background-color: #f28a21;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem; /* Ajuste de tamaño responsivo */
    transition: background-color 0.3s, color 0.3s;
}

.btn-find-your-trip:hover {
    background-color: #0b3868; /* Color al pasar el cursor */
}

/* Flechas de navegación */
.prev, .next {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: #f8f5f5;
    border-radius: 50%;
    color: #333;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    user-select: none;
    transition: background-color 0.3s, color 0.3s;
	text-decoration: none;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.prev:hover, .next:hover {
    background-color: #f28a21;
    color: #fff;
}

/* Content */
main section {
    position: relative; /* Para posicionar la línea correctamente */
    padding-bottom: 30px; /* Espacio para la línea horizontal */
}

/* Línea horizontal gruesa entre secciones */
main section:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px; /* Ajusta el grosor de la línea según sea necesario */
    background-color: #6e4f4f; /* Color de la línea horizontal */
    position: absolute;
    bottom: 0; /* Alinea la línea en la parte inferior del contenedor */
    left: 0;
}

/* Estilos para la sección Welcome */
.welcome {
    max-width: 1280px;
    margin: 0 auto; /* Centra la sección horizontalmente */
    padding: 20px;
    text-align: center;
}

.welcome h2 {
    font-size: 2.3rem; /* Ajuste de tamaño responsivo */
    font-family: 'SangBleu Kingdom', serif;
    color: #44313A; /* Ajusta el color según tus necesidades */
    font-weight: 400; /* Haz la fuente menos negra */
    margin-bottom: 20px;
}

.welcome p {
    font-size: 1.2rem; /* Ajuste de tamaño responsivo */
    line-height: 1.6;
}

/* Estilos para la sección Short Tours */
.short-tours {
    max-width: 1280px;
    margin: 0 auto; /* Centra la sección horizontalmente */
    padding: 20px;
    text-align: center;
}

.short-tours h2 {
    font-size: 2.3rem; /* Ajuste de tamaño responsivo */
    font-family: 'SangBleu Kingdom', serif;
    color: #44313A; /* Ajusta el color según tus necesidades */
    font-weight: 400; /* Haz la fuente menos negra */
    margin-bottom: 10px;
}

.short-tours .section-description {
    font-size: 1.2rem; /* Ajuste de tamaño responsivo */
    color: #555; /* Ajusta el color según tus necesidades */
    margin-bottom: 20px;
}

.tours-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Permite que los cuadros se ajusten en dispositivos pequeños */
    gap: 20px; /* Espacio entre los cuadros */
	margin-bottom: 50px; /* Ajusta el margen hacia abajo según sea necesario */
}

.short-tours .tour {
    width: 100%;
    max-width: 400px; /* Ancho máximo de cada cuadro */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Asegura que las imágenes no se desborden */
    background-color: #fff; /* Fondo blanco para los cuadros */
    text-align: center;
    margin: 0 auto;
}

.short-tours .tour img {
    width: 100%;
    border-bottom: 1px solid #eee; /* Línea separadora entre imagen y contenido */
}

.short-tours .tour-content {
    padding: 20px;
}

.short-tours .tour h3 {
    font-size: 24px; /* Tamaño más grande del título */
    font-family: 'Playfair Display', serif; /* Fuente mejorada */
    color: #2B6CB0; /* Color de texto menos oscuro */
    font-weight: 300; /* Menos negrita para el texto */
    margin: 20px 0; /* Margen arriba y abajo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Sombra ligera para mejorar la legibilidad */
}

.short-tours .tour p {
    font-size: 16px;
    margin: 15px 0; /* Más margen arriba y abajo */
}

.short-tours .tour .day {
    font-size: 16px;
    color: #319956; /* Color del texto */
    margin: 10px 0; /* Margen arriba y abajo del día */
}

.short-tours .tour .price {
    font-size: 22px; /* Tamaño más grande para el precio */
    color: #f28a21; /* Color del precio */
    margin: 10px 0; /* Margen arriba y abajo del precio */
}

.discover-button {
    display: inline-block;
    font-size: 20px; /* Tamaño de la fuente del botón */
    background-color: #f28a21;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
	border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
	cursor: pointer;
	margin-top: 20px; /* Margen arriba del botón */
}

.discover-button:hover {
    background-color: #0b3868;
    transform: scale(1.1);
}

/* Contenedor del texto y la flecha */
.recommendations {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    margin-bottom: 20px; /* Espacio debajo del texto */
}

/* Estilo del enlace */
.recommended-link {
    font-family: 'SangBleu Kingdom', serif;
    font-size: 24px;
    color: #06509e; 
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* Flecha */
.arrow {
    margin-left: 8px; /* Espacio entre el texto y la flecha */
    font-size: 20px; /* Tamaño de la flecha */
    color: #0b3868; /* Color de la flecha */
}

/* Estilo al pasar el cursor */
.recommended-link:hover {
    color: #f28a21; /* Color del texto al pasar el cursor */
}

.recommended-link:hover .arrow {
    color: #f28a21; /* Color de la flecha al pasar el cursor */
}

.vacation-packages {
    max-width: 1280px;
    margin: 0 auto; /* Centra la sección horizontalmente */
    padding: 20px;
    text-align: center;
}

.vacation-packages h2 {
    font-size: 2.3rem; /* Ajuste de tamaño responsivo */
    font-family: 'SangBleu Kingdom', serif; /* Fuente mejorada */
    color: #6e4f4f; /* Color del texto menos oscuro */
    font-weight: 300; /* Menos negrita para el texto */
    margin-bottom: 10px;
}

.vacation-packages .section-description {
    font-size: 1.2rem; /* Ajuste de tamaño responsivo */
    color: #555; /* Ajusta el color según tus necesidades */
    margin-bottom: 20px;
}

.packages-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Permite que los cuadros se ajusten en dispositivos pequeños */
    gap: 20px; /* Espacio entre los cuadros */
	margin-bottom: 50px; /* Ajusta el margen hacia abajo según sea necesario */
}

.vacation-packages .package {
    width: 100%;
    max-width: 600px; /* Ancho máximo de cada cuadro */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Asegura que las imágenes no se desborden */
    background-color: #fff; /* Fondo blanco para los cuadros */
    text-align: center;
    margin: 0 auto;
}

.vacation-packages .package img {
    width: 100%;
    border-bottom: 1px solid #eee; /* Línea separadora entre imagen y contenido */
}

.vacation-packages .package-content {
    padding: 20px;
}

.vacation-packages .package h3 {
    font-size: 28px; /* Tamaño más grande del título */
    font-family: 'Playfair Display', serif; /* Fuente mejorada */
    color: #2B6CB0; /* Color de texto menos oscuro */
    font-weight: 300; /* Menos negrita para el texto */
    margin: 20px 0; /* Margen arriba y abajo */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Sombra ligera para mejorar la legibilidad */
}

.vacation-packages .package .short-description {
    font-size: 16px;
    margin: 10px 0; /* Más margen arriba y abajo */
}

.vacation-packages .package .day {
    font-size: 16px;
    color: #319956; /* Color del texto */
    margin: 10px 0; /* Margen arriba y abajo del día */
}

.vacation-packages .package .price {
    font-size: 24px; /* Tamaño más grande para el precio */
    color: #f28a21; /* Color del precio */
    margin: 10px 0; /* Margen arriba y abajo del precio */
}

.details-button {
    display: inline-block;
	padding: 15px 25px; /* Botón más grande */
	font-size: 20px; /* Tamaño de la fuente del botón */
    background-color: #f28a21;
    color: #fff;
    text-decoration: none;
	border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
	cursor: pointer;
	margin-top: 20px; /* Margen arriba del botón */
}

.details-button:hover {
    background-color: #0b3868;
    transform: scale(1.05);
}

/* Contenedor del texto y la flecha */
.vacation-packages .recommendations {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    margin-bottom: 20px; /* Espacio debajo del texto */
}

/* Estilo del enlace */
.vacation-packages .recommended-link {
    font-family: 'SangBleu Kingdom', serif; /* Estilo de fuente */
    font-size: 24px; /* Tamaño de fuente, ajusta según necesidad */
    color: #06509e; /* Color del texto */
    text-decoration: none; /* Quitar subrayado del enlace */
    display: flex;
    align-items: center; /* Alinea verticalmente el texto y la flecha */
}

/* Flecha */
.vacation-packages .arrow {
    margin-left: 8px; /* Espacio entre el texto y la flecha */
    font-size: 20px; /* Tamaño de la flecha */
    color: #0b3868; /* Color de la flecha */
}

/* Estilo al pasar el cursor */
.vacation-packages .recommended-link:hover {
    color: #f28a21; /* Color del texto al pasar el cursor */
}

.vacation-packages .recommended-link:hover .arrow {
    color: #f28a21; /* Color de la flecha al pasar el cursor */
}

.certifications {
    max-width: 1280px;
    margin: 0 auto; /* Centra la sección horizontalmente */
    padding: 20px;
    text-align: center;
}

.certifications h2 {
    font-size: 36px; /* Tamaño más grande del título */
    font-family: 'SangBleu Kingdom', serif; /* Fuente mejorada */
    color: #6e4f4f; /* Color del texto menos oscuro */
    font-weight: 300; /* Menos negrita para el texto */
    margin-bottom: 20px; /* Espacio debajo del título */
}

.certifications-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Permite que los logos se ajusten en dispositivos pequeños */
    gap: 20px; /* Espacio entre los logos */
}

.certification-logo {
    display: inline-block;
    width: 120px; /* Tamaño del logo */
    height: auto;
    transition: opacity 0.3s ease, filter 0.3s ease; /* Transición para el efecto hover */
}

.certification-logo img {
    max-width: 100%; /* Asegura que las imágenes no se desborden */
    height: auto;
}

.certification-logo:hover img {
    filter: brightness(70%); /* Oscurece el logo al pasar el cursor */
}

/* Footer */
footer {
    background-color: #333; /* Fondo negro no tan oscuro */
    color: #fff; /* Color del texto blanco */
    padding: 40px 0;
    font-family: 'SangBleu Kingdom', serif; /* Fuente moderna y bonita */
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.footer-column {
    flex: 1;
    margin: 10px;
    min-width: 200px;
}

.footer-column h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f28a21;
    font-family: 'SangBleu Kingdom', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-media a {
    color: #fff;
    margin: 0 10px;
    font-size: 24px;
    transition: color 0.3s;
}

.social-media a:hover {
    color: #f28a21; /* Color de los iconos al pasar el cursor */
}

.payment-methods img {
    max-width: 100px;
}

.agency-info p,
.explore-more ul,
.payment-methods {
    margin: 5px 0;
}

.explore-more ul {
    list-style: none;
    padding: 0;
}

.explore-more li {
    position: relative; /* Necesario para que el pseudo-elemento funcione correctamente */
}

.explore-more a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    position: relative; /* Mantén el enlace por encima del área táctil */
    z-index: 1; /* Asegura que el enlace esté sobre el pseudo-elemento */
}

.explore-more a::after {
    content: '';
    position: absolute;
    top: -10px; /* Expande el área táctil hacia arriba */
    bottom: -10px; /* Expande el área táctil hacia abajo */
    left: -10px; /* Expande el área táctil hacia la izquierda */
    right: -10px; /* Expande el área táctil hacia la derecha */
    z-index: 0; /* Pseudo-elemento por debajo del texto */
}


.payment-methods img {
    max-width: 100px;
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #f28a21;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    z-index: 9999; /* Ensure the button is on top of other elements */
}

#back-to-top:hover {
    background-color: #0b3868;
    transform: scale(1.1); /* Slightly increase the size on hover */
}

#back-to-top i {
    margin: 0;
}

/* General styles for mobile devices */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Adjust font size */
        padding: 10px; /* Add padding around the content */
    }

    header.fixed-header {
        position: fixed; /* Make header fixed on mobile */
        top: 0;
        left: 0;
        width: 100%; /* Ensure header takes full width */
        z-index: 1000; /* Make sure the header stays on top */
        padding: 10px; /* Add padding to the header */
        background-color: #fff; /* Add background color to the header */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a slight shadow */
    }

    .logo-container img {
        width: 150px; /* Scale down the logo */
    }
	
	    /* Add margin-top to banner to prevent overlap */
    .banner {
        margin-top: 70px; /* Adjust based on header height */
    }

    /* Responsive banner */
    .banner .slider .slide img {
        width: 100%;
        height: auto;
    }

    /* Responsive text sizes */
    .banner-content h1 {
        font-size: 24px;
    }

    .banner-content p {
        font-size: 14px;
    }

    .short-tours .tour, .vacation-packages .package {
        width: 100%; /* Make each tour/package take full width */
        margin-bottom: 20px; /* Add spacing between items */
    }

    .tour-content, .package-content {
        text-align: center; /* Center text for better readability */
    }

    .tour img, .package img {
        width: 100%;
        height: auto;
    }

    .contact-info {
        text-align: center;
        margin-top: 10px;
    }

    /* Footer styles for mobile devices */
    footer .footer-container {
        padding: 20px 10px; /* Add padding to the footer */
    }

    footer .footer-row {
        display: flex;
        flex-direction: column; /* Stack the footer columns vertically */
    }

    footer .footer-column {
        width: 100%; /* Make each footer column take full width */
        margin-bottom: 20px; /* Add spacing between footer columns */
        text-align: center; /* Center text in each footer column */
    }

    footer .footer-column h3 {
        font-size: 18px; /* Adjust footer heading size */
        margin-bottom: 10px; /* Add space below the heading */
    }

    footer .footer-column p, footer .footer-column ul li a {
        font-size: 14px; /* Adjust footer text size */
    }
}

/* General styles for tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    header.fixed-header {
        position: fixed; /* Keep header fixed on tablets */
        top: 0;
        left: 0;
        width: 100%; /* Ensure header takes full width */
        z-index: 1000; /* Ensure the header stays on top */
        padding: 10px 20px; /* Adjust padding for tablets */
        background-color: #fff; /* Add background color to the header */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a slight shadow */
    }
    .logo-container img {
        width: 200px; /* Scale down the logo */
    }
	
	    /* Add margin-top to banner to prevent overlap */
    .banner {
        margin-top: 80px; /* Adjust based on header height */
    }

    .banner-content h1 {
        font-size: 28px;
    }

    .banner-content p {
        font-size: 16px;
    }

    .short-tours .tour, .vacation-packages .package {
        width: 48%; /* Make two items fit per row */
        margin-bottom: 20px;
    }

    /* Footer styles for tablets */
    footer .footer-container {
        padding: 20px; /* Add padding to the footer */
    }

    footer .footer-row {
        display: flex;
        flex-wrap: wrap; /* Allow columns to wrap to the next line */
        justify-content: space-between; /* Space out columns */
    }

    footer .footer-column {
        width: 48%; /* Make two footer columns fit per row */
        margin-bottom: 20px; /* Add spacing between footer columns */
    }

    footer .footer-column h3 {
        font-size: 20px; /* Adjust footer heading size */
        margin-bottom: 10px; /* Add space below the heading */
    }

    footer .footer-column p, footer .footer-column ul li a {
        font-size: 16px; /* Adjust footer text size */
    }
}

/* Estilos generales para el menú */
nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

nav ul li {
    margin-left: 20px;
}

/* Estilos para el menú en pantallas pequeñas */
@media (max-width: 768px) {
    nav ul {
        display: none; /* Oculta el menú original en pantallas pequeñas */
        flex-direction: column;
        position: absolute;
        top: 60px; /* Asegura que el menú no se superponga con el header */
        right: 0;
        background-color: white; /* Cambia el fondo si es necesario */
        width: 100%;
        z-index: 1000; /* Asegura que el menú esté sobre otros elementos */
    }

    nav ul.active {
        display: flex; /* Muestra el menú cuando está activo */
    }

    nav ul li {
        text-align: center;
        margin: 10px 0; /* Añade espacio entre los enlaces del menú */
    }

    /* Ícono de menú hamburguesa */
    .menu-icon {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 20px; /* Ajusta la posición según sea necesario */
        right: 20px;
        z-index: 1001;
    }

    .menu-icon div {
        width: 30px;
        height: 3px;
        background-color: black;
        margin: 6px 0;
    }
}

/* Estilo para la animación del menú hamburguesa */
.menu-icon div {
    transition: 0.4s;
}

/* Cambio de estilo al abrir el menú */
.menu-icon.active div:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-icon.active div:nth-child(2) {
    opacity: 0;
}

.menu-icon.active div:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}