/* Mejorar solo la imagen de fondo de Services en móviles */
@media (max-width: 680px) {
    .Services-bg-img {
    object-fit: cover !important;
    width: 100vw !important;
    height: 45vh !important;
    left: 0;
    top: 0;
    transform: none;
    filter: brightness(0.7) blur(0.5px) !important;
    opacity: 1;
    z-index: 1;
    border-radius: 0 0 18px 18px;
    background: #fff;
    }
}

/* En móviles, en Co-visions y reverse, imagen arriba y texto abajo */
@media (max-width: 980px) {
  .Co-visions, .Co-visions.reverse {
    flex-direction: column !important;
    height: auto;
    min-height: unset;
    padding: 2vw 0;
  }
  .Co-visions .vision-content, .Co-visions.reverse .vision-content {
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    gap: 2vw;
    width: 98vw;
    margin-left: 0;
    margin-right: 0;
    padding: 2vw 2vw;
    text-align: center;
  }
  .Co-visions .vision-image, .Co-visions.reverse .vision-image {
    order: 1;
    width: 90vw;
    max-width: 98vw;
    min-width: 0;
    margin: 0 auto 2vw auto;
    justify-content: center;
    align-items: center;
    flex: none;
  }
  .Co-visions .vision-text, .Co-visions.reverse .vision-text {
    order: 2;
    padding: 0;
    text-align: center;
    width: 100%;
  }
}
@media (max-width: 680px) {
    .menu-toggle {
        display: block; /* Mostrar el botón del menú en pantallas pequeñas */
    }

    .logo {
        max-height: 50vw; /* Ajusta el tamaño del logo para que sea proporcional */
        width: auto; /* Ajusta la altura para que se adapte al contenedor */
    }

    #logo-lightened {
        max-width: 55vw; /* Ajusta el tamaño del logo para que sea proporcional */
        height: auto; /* Ajusta la altura para que se adapte al contenedor */
    }

    .top-bar {
        justify-content: space-between; /* Asegurarse de que el contenido esté bien alineado */
        height: 15%;
        padding:0;
    }
    .top-bar:hover{
        background-color: rgba(0, 23, 10, 0.7);
    } 

    .right-Content {
        margin-right: 6vw;
    }


    .logo-container {
        margin-top: 4vw;
        height: 6vh;
    }

    #Logo-C {
        max-width: 5vh; /* Ajusta el tamaño del logo para que sea proporcional */
        height: auto;
    }


    .slide-text h1 {
        font-size: 6vh; /* Ajusta el tamaño del título para pantallas pequeñas */
    }

    .slide-text p {
        font-size: 3vh; /* Ajusta el tamaño del párrafo para pantallas pequeñas */
    }

    .dropdown-content {
        display: none; /* Asegurarse de que el menú desplegable esté oculto en móviles */
    }

    .show-menu {
        display: flex; /* Mostrar el contenido del menú en móviles */
        margin-top: auto;
        right: 0;
    }

    .navbar ul {
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        height: 95vh; /* Asegura que ocupe toda la altura de la pantalla */
        width: 60vw;
        max-width: 80vw;
        background-color: rgba(255,255, 255, 0.9);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 20;
        padding-top: 6em;
        overflow:initial;
    }

    .navbar ul li {
        margin: 0;
        padding: 10px;
        text-align: start;
    }


    .close-menu {
        display: block;
        font-size: 2rem;
        color:rgba(0, 23, 10, 0.7);
        cursor: pointer;
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 21;
    }

    .navbar ul.show-menu {
        transform: translateX(0);
    }


    .submenu-container {
        display: none; /* Ocultar todos los submenús por defecto */
        flex-direction: column; /* Alinear submenús verticalmente */
        max-width:60vw;
        max-height:80%;
        margin-left: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .submenu-content {
        display: none; /* Ocultar contenido de cada sección por defecto */
        margin-left: 15px; /* Añadir un pequeño margen a la izquierda */
    }

    .show .submenu-container,
    .show .submenu-content {
        display: block; /* Mostrar contenido cuando la clase 'show' esté presente */
    }

    .submenu-header {
        cursor: pointer; /* Indicar que el encabezado es interactivo */
        margin: 5px 0; /* Espacio entre encabezados */
        display: flex; /* Para alinear el botón con el texto */
        justify-content: space-between; /* Alinear botón y texto */
        align-items: center; /* Centrar verticalmente */
    }

    .expand-submenu {
        display: table-row;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #333;
        margin-left: 10px;
    }


    .dropdown.show .submenu-container {
        display: block;
    }
    .submenu{
        flex-direction: column;
        overflow-y: auto;
        height: 175vw;
        width: 80vw;
        margin: 0;
        padding: 0;
    }
    .submenu-column {
        white-space: nowrap; /* Evita que el texto se envuelva */
    }
    .submenu-column h1{
        font-size: 1.25em;
        padding-left: 0;
    }
    .submenu-column a{
        font-size: 0.8em;
        margin: 0.25em;
    }
    .separator{
        width: 60%;
        margin-left: 0.5em;
    }
    .slide-content {
        flex-direction: row; /* Mantiene texto e imagen en fila */
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
    }
    
    .image-container {
        display: none;
    }
    
    .Logo-Over-Image {
        max-width: 80%;  /* O prueba con 60% si quieres que sea más pequeña */
        max-height: 25vw;
        height: auto;
        object-fit: contain;
    }
    
}

@media (max-width: 300px) {
    .navbar ul{
        width: 70vw;
    }
    .submenu-container{
        max-width: 75vw;
    }
    .submenu-column a{
        font-size: 0.7em;
        margin: 0.25em;
    }
}