@media (max-width: 768px) {
    h1 {
        font-size: 150% !important; 
       padding-top: 20%;
       padding-bottom: 5%;
    }

    h2 {
        font-size: 110%;
        
    }

    p, li {
        font-size: 14px;
    }


    @media (max-width: 768px) {
        /* Ajustar el contenedor principal */

        header .logo {
            width: 108px;
            height:60px;
           margin-left: 0% !important;
           margin-right: 15%;
        }
        .img-text-container {
            flex-direction: column; /* Cambiar a diseño vertical */
            
        }
    
        .section.img-text-container {
            flex-direction: column-reverse;
            position: absolute;
            margin: 0;
            padding: 0;
            left: 10%;                /* Mueve el contenedor al 50% de la ventana */
            transform: translateX(-5%);  /* Ajusta la posición para centrar el contenedor */
        }
        
        
       
        .carousel {
            max-width: 100%;
            box-shadow: none; /* Opcional: para simplificar el diseño en pantallas pequeñas */
            border: none; /* Opcional */
            display: flex; /* Usamos flexbox para asegurar que los elementos se ajusten bien */
            flex-direction: column; /* En caso de que quieras que las imágenes se apilen verticalmente */
            height: 100%; /* Asegura que ocupe toda la altura disponible */
            padding: 0; /* Elimina padding adicional */
            margin: 0; /* Elimina márgenes */
        }
        
        .carousel-images {
            display: flex;
            flex-shrink: 0;
            width: 100%;
            height: 100%; /* Asegura que las imágenes ocupen toda la altura disponible */
        }
        
        .carousel-images img {
            width: 100%;
            height: 100%; /* Hace que las imágenes ocupen toda la altura del contenedor */
            object-fit: cover; /* Asegura que las imágenes se ajusten bien sin distorsionarse */
            display: block; /* Elimina espacio debajo de la imagen */
        }
        
        .carousel-buttons button {
            padding: 5px 10px;
            font-size: 14px; /* Reduce el tamaño de los botones */
        }
        
        .img-text-container .text,
        .img-text-container .carousel {
            width: 100%; /* Ocupa todo el ancho disponible */
        }
        
    
        /* Ajustar la barra de navegación y logotipos */
        header {
           
            text-align: center;
        }

        .ts {
    margin-top: 270%;
}

       

        .phiddenm { 
            display: none;
            
        }


        .social-icons {
            margin: 10px 0; /* Espaciado arriba y abajo */
            justify-content: center; /* Centrar los iconos */
        }
    
        /* Formulario y sección de información */
        .form-container {
            position: absolute;
            margin-top: 134% !important;
            flex-direction: column; /* Cambiar a diseño en columna */
            gap: 15px; /* Espaciado más pequeño */
        }
    
        .form-section,
        .form-sectioninfo {
            width: 100% !important; /* Cada sección ocupa el 100% del ancho */
        }
    
        .form-section input,
        .form-section textarea {
            width: 95%; /* Mayor ancho en móviles */
            font-size: 14px; /* Reducir tamaño del texto */
        }
    
        .form-sectioninfo img {
            max-width: 60%; /* Ajustar imágenes para móviles */
        }
    
       
    
        /* Servicios */
        .sectionservicios{
            
            padding-top: 150%;
        }
        .services {
            flex-direction: column; /* Apilar los servicios */
            align-items: center; /* Centrar los círculos */
        }
    
        .service {
            width: 100px; /* Reducir el tamaño en móviles */
            height: 100px;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    
        /* Ajustar la dirección y bloques de contacto */
        .address-container {
            flex-direction: column; /* Bloques uno sobre otro */
            margin-bottom: 30% !important;
            
        }
    
        .address-block {
            width: 100% !important; /* Ocupa todo el ancho */
          
        }

        footer{
            margin-top: 50% !important;
        }
    }
    
}