body {
            font-family: sans-serif,arial,"helvetica";
            margin: 0;
            padding: 0;
            background-color: #003366; /* Fondo azul marino */
        }
h4 {
            color: #003366;
            font-size: 0.9em;
            font-style: inherit;
        }
.header {
            background-color: #fff; /* blanco */
            color: black;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap; /* Para que los elementos se ajusten en pantallas pequeñas */
        }
.logo {
            font-size: 2em;
            font-weight: bold;
            display: flex;
            align-items: center; /* Alinea verticalmente los elementos */
            gap: 10px; /* Espacio entre los logos */
        }
.logo1 {
            font-size: 1.5em;
            font-family: "helvetica";
            font-weight: bold;
            font-style: bold;
            color: #003366;
            margin: 0; /* Elimina el margen predeterminado del h1 */
        }
.menu-icon {
            font-size: 1.5em;
            cursor: pointer;
            display: block; /* Siempre visible */
        }
.banner {
            background-image: url('image/fondo.png'); /* Reemplaza con la URL de tu imagen */
            background-size: cover;
            background-position: center;
            height: 80vh; /* Usamos viewport height para que sea responsive */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            padding: 0 20px; /* Añadimos padding para evitar que el texto toque los bordes */
            position: relative; /* Para posicionar el overlay */
        }
        /* Línea amarilla de 6px arriba del banner */
.banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px; /* Altura de la línea amarilla */
            background-color: #FFD700; /* Color amarillo */
            z-index: 2; /* Asegura que esté por encima del overlay */
        }
.banner::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); /* Overlay semitransparente (ajusta el valor para cambiar la opacidad) */
            z-index: 1; /* Coloca el overlay debajo de la línea amarilla */
        }
        .banner h1, .banner p {
            position: relative; /* Asegura que el texto esté por encima del overlay */
            z-index: 3; /* Coloca el texto sobre el overlay y la línea amarilla */
            padding: 10px 20px;
            border-radius: 5px;
        }
        .banner h1 {
            font-family: "arial";
            font-size: 5em; /* Tamaño de fuente relativo */
            margin-bottom: 10px;
            animation: fadeIn 3.0s ease-in-out; /* Aplica la animación fadeIn */
        }
        .banner p {
            font-family: "arial";
            font-size: 1em; /* Tamaño de fuente relativo */
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px); /* Efecto de desplazamiento */
            }
            to {
                opacity: 0;
                transform: translateY(0);
            }
        }
        .content {
            padding: 20px;
            text-align: center;
        }
        img {
            max-width: 100%; /* Las imágenes se ajustan al ancho del contenedor */
            height: auto; /* Mantiene la proporción de la imagen */
        }
        .services {
            padding: 40px 20px;
            text-align: center;
            background-color: #f0f0f9;
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);   
            position: relative;
            overflow: hidden;
        }
        .services h2 {
            font-size: 2rem;
            margin-bottom: 1%;
            color: #003366; /* Azul marino */
        }
        .services p {
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            margin-bottom: 2%;
            color: #555;
        }
        .carousel-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .service-card {
          /*  background-color: #fff; */
          /*  border: 0px solid #ddd;*/
            border-radius: 10px;
            padding: 20px;
            width: 210px; /* Ancho fijo para cada tarjeta */
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            flex: 0 0 210px; /* Ancho fijo para cada tarjeta */
            margin: 10px 10px; /* Espacio entre tarjetas */
        }
        .service-card:hover {
            transform: translateY(-10px);
            /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
        }
        .service-card h3 {
            font-size: 1.5em;
            color: #003366; /* Azul marino */
            margin-bottom: 10px;
            width: 130%;
           
        }
        .service-card p {
            font-size: 1em;
            color: #555;
        }
        .carousel-controls {
            position: absolute;
            top: 70%;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            transform: translateY(50%);
        }
        .carousel-controls button {
        	   background-color: rgba(0, 0, 0, 1);
            border: none;
            color: #fff;
            font-size: 1rem;
            padding: 10px;
            cursor:progress;
            border-radius: 50%;
        }
        .carousel-controls button:hover {
            background-color: rgba(0, 0, 0, 1);
        }
        .icono{height: 100%;
        margin: 2px;
        }
        nav {
            display: none; /* Oculto por defecto */
            flex-direction: column;
            gap: 10px; /* Espacio entre enlaces */
            position: absolute;
            top: 60px; /* Ajusta según la altura del header */
            left: 20px; /* Menú a la izquierda */
            background-color: #fff;
            padding: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
        }
        nav.active {
            display: flex; /* Mostrar el menú cuando está activo */
        }
        nav a {
            color: black;
            text-shadow: 3px;
            text-decoration: inherit;
            font-size: 1em;
        }
        nav a:hover {
            color: #007BFF; /* Color al pasar el mouse */
            
        }
        footer {
            background-color: #003366; /* Azul marino */
            color: #fff;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
        }
        footer p {
            margin: 2%;
            padding: 0 20;
        }
        .services, .about, .contact {
            padding: 40px 20px;
            text-align: center;
            background-color: #fff; /* Fondo blanco */
            margin: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .services h2, .about h2, .contact h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: #003366; /* Azul marino */
        }

        /* Media Queries para ajustes adicionales */
        @media (max-width: 768px) {
            .header {
                padding: 10px;
            }
            .logo {
                font-size: 0.75em;
                height: 2%;
            }
            .menu-icon {
                font-size: 1.2em;
            }
            .banner h1 {
                font-size: 1.5em;
            }
            .banner p {
                font-size: 1em;
            }
        }

        @media (max-width: 480px) {
            .banner h1 {
                font-size: 1.2em;
            }
            .banner p {
                font-size: 0.9em;
            }
            .logo {
                flex-direction: column; /* Apilar logos en móviles */
                gap: 6px;
            }
        }