<style>
    body {
        background-color: #d4ded4;
        color: #333;
    }

    .container {
        max-width: 90%;
        margin: 0 auto;
        padding: 10px;
    }

/* Encabezado */
    header {
      	display: flex;
    	justify-content: center; /* Centra los elementos del header */
    	align-items: center; /* Alinea verticalmente */
    	padding: 12px 5%; /* Ajusta el padding según sea necesario */
   		flex-wrap: wrap; /* Permite que los elementos se envuelvan si es necesario */

    }

    header h1 {
        font-size: 1.8em;
        color: #3a7b3a;
    }

    nav ul {
        list-style: none;
        display: flex;
        gap: 15px;
    }

    nav ul li a {
        text-decoration: none;
        color: #3a7b3a;
        font-weight: bold;
    }
  
    .navbar{
	margin: 0;
    }
    nav ul li a {
      text-decoration: none;
      color: #3a7b3a; /* Color del texto */
      font-weight: bold;
      padding: 10px 0px; /* Espaciado interno */
      border-radius: 5px; /* Bordes redondeados */
      transition: background-color 0.3s, color 0.3s; /* Transición suave */
  	}	

/* Estilo al pasar el mouse */
 	nav ul li a:hover {
      background-color: white; /* Fondo blanco */
      color: #3a7b3a; /* Color del texto (puedes cambiarlo si lo deseas) */
  	}

    .login-button {
        background-color: #3a7b3a;
        color: #fff;
        border: none;
        padding: 5px 15px;
        border-radius: 20px;
        cursor: pointer;
    }
  
/* Estilos para hacer el header fijo */
    .fixed-header {
   		position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	z-index: 0; /* Asegura que el header esté por encima del resto del contenido */
    	background-color: #e6ede6; /* Color de fondo del header */
    	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para darle relieve */
     }
 	 @media (max-width: 768px) {
   		nav ul {        	
        align-items: center; /* Centra los elementos */
    	}
	}

/* Sección principal */
    .main-content {
        text-align: center;
        padding: 40px 0;

    }
    .intro {
    	display: flex;
    	justify-content: center; /* Centra horizontalmente */
    	align-items: center; /* Centra verticalmente */
    	flex-direction: column; /* Asegura que los elementos estén en columna */
    	text-align: center; /* Alinea el texto al centro */
    	padding: 30px 20px; /* Ajusta el padding según sea necesario */
	}

    .intro h2 {
        font-size: 14vw;
        color: #3a7b3a;
		font-weight: bold;
        margin-bottom: 10px;
    }
    .intro p {
        color: #3a7b3a;
        font-size: 2em;
        margin-bottom: 10px;
		font-weight: bold;
    }
  
    .cta-button {
        margin: 10px 5px;
        padding: 10px 20px;
        background-color: #3a7b3a;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .cta-button.secondary {
        background-color: #fff;
        color: #3a7b3a;
        border: 2px solid #3a7b3a;
    }

/* Sección Sobre Nosotros */
    .aboutus-section {
        text-align: center;
        padding: 30px 20px;
		background-color: #e6ede6;
		margin-bottom: 20px;
    }

    .aboutus-section h2 {
        color: #3a7b3a;
        margin-bottom: 20px;
    }
  
    .aboutus-section p {
		font-size: 1.2em;
        margin-bottom: 0px;
    }
  
    .aboutus-card {
		background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }	

/* Sección de Servicios */
    .services-section {
        text-align: center;
        padding: 30px 20px;
        background-color: #e6ede6;
    }

    .services-section h2 {
        color: #3a7b3a;
        margin-bottom: 20px;
    }

    .services-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

 /* Tarjeta de Servicio */
    .service-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        width: 300px;
        padding: 20px;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s;
    }

    .service-card:hover {
        transform: translateY(-5px);
    }

    .service-card img {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .service-card h3 {
        font-size: 1.0em;
        color: #3a7b3a;
        margin-bottom: 10px;
        text-align: center;
    }

    .service-card p {
        font-size: 0.95em;
        color: #333;
        text-align: left;
        line-height: 1.6;
    }
  
/* Carrusel de logos de clientes */
    .clients-section {
        padding: 30px 20px;
        background-color: #e6ede6;
        margin-bottom: 20px;
        margin-top: 20px; /* Aumenta este valor según la altura de tu header */
        overflow: hidden; /* Oculta el desbordamiento */
        position: relative;
    }

    .clients-section h2 {
        color: #3a7b3a;
        background-color: #e6ede6;
    }

    .carousel {
        display: flex;
        width: 100%;
        padding: 10px 0; /* Reduce el padding para ajustar el espacio */
        animation: scroll 15s linear infinite; /* Controla la velocidad del desplazamiento */
    }

    .carousel-track {
        display: flex;
    }

    .carousel-item {
        min-width: 100px; /* Ajusta el ancho según el tamaño de tus logos */
        margin: 0 5px; /* Espacio entre logos */
    }

    .carousel img {
        width: 100%; /* Ajusta el tamaño de la imagen al contenedor */
        height: auto; /* Mantiene la proporción */
        max-height: 50px; /* Limita la altura máxima de las imágenes */
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-25%); /* Desplazamiento total */
        }
    }

/* Sección de contacto */
    .contact-section {
        text-align: center;
        padding: 30px 20px;
        background-color: #e6ede6;
      	margin-top: 20px;
    }

    .contact-section h2 {
        color: #3a7b3a;
        margin-bottom: 20px;
    }

    .contact-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        max-width: 500px;
        margin: 0 auto;
    }

    .contact-form label {
        font-weight: bold;
        color: #3a7b3a;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1em;
    }

    .contact-form button {
        width: 50%;
        background-color: #3a7b3a;
        color: #fff;
        border: none;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }
  
<!--    .contact-info {
      margin-bottom: 20px; /* Espacio entre la información y el formulario */
      text-align: left; /* Alineación del texto */
    }

    .contact-info p {
      margin: 5px 0; /* Espaciado entre líneas */
      color: #3a7b3a; /* Color del texto */
    }
-->

/* Footer */
    footer {
        text-align: center;
        padding: 20px;
        font-size: 0.9em;
        color: #666;
    }
/* Botón de Instagram */
    .instagram-button {
      	position: fixed;
     	bottom: 20px;
    	right: 20px;
      	background-color: #FFFFFF;
    	color: white;
      	border: none;
      	border-radius: 50%;
      	width: 80px;
      	height: 80px;
      	display: flex;
      	justify-content: center;
      	align-items: center;
      	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      	cursor: pointer;
      	transition: background-color 0.3s;
    }
    .instagram-button:hover {
      	background-color: #128C7E;
    }
/* Botón de WhatsApp */
    .whatsapp-button {
      	position: fixed;
     	bottom: 120px;
    	right: 20px;
      	background-color: #FFFFFF;
    	color: white;
      	border: none;
      	border-radius: 50%;
      	width: 80px;
      	height: 80px;
      	display: flex;
      	justify-content: center;
      	align-items: center;
      	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      	cursor: pointer;
      	transition: background-color 0.3s;
    }
  
    .whatsapp-button:hover {
      	background-color: #128C7E;
    }
</style>