*{

    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Animación */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slide-in 1s ease-out;
}

body, html{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

header{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

.container-logo{
    width: 100%;
    display: flex;
    height: auto;
    justify-content: space-around;
    background-color: #fff;
}
.logo{
    width: 25%;
    padding: 1%;
    height: auto;
    justify-content: center;
    align-items: center;
    display: flex;
}
.logo img{
    width: 85%;
  
}
.container-f .logo img{
    width: 85%; 
}
.container-f .logo{
    width: 25%;
    padding: 1%;
    height: auto;
    justify-content: center;
    align-items: center;
    display: flex;
}
.container-f{
    width: 100%;
    display: flex;
    height: auto;
    justify-content: space-around;
}

nav, .container-f nav{
    width: 75%;
    padding-right: 5%;
justify-content:right;
align-items: center;
display: flex;
}
.container-f nav a{
    text-decoration: none;
    padding-right: 8%;
    font-weight: 700;
    font-size: 25px; 
    color: #fff;
}
nav a{
    color:#122658;
    text-decoration: none;
    padding-right: 8%;
    font-weight: 700;
    font-size: 25px;
}
nav a:hover{
    animation:pulse 1s infinite;  
    color:#0264D1;
}
.container-home{
    width: 100%;
    display: flex;
    height: auto ;
    background-image: url(/img/tecnicos-especializados-background.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.titulo h1{
    color:#122658;
    font-size:50px ;
    font-weight: 700;
    width:100%;
    padding: 2%;
    padding-right: 12%;
}
.titulo p{
    color:#0264D1 ;
    font-size: 22px;
    width: 70%;
    padding: 4%;}

.titulo button{
    background-color:#0264D1 ;
    border-radius: 10px;
    padding: 10px 3px;
    width: 30%;
    margin-left: 5%;
    justify-content: center;
    align-items: center;

}
.titulo button:hover{
    animation: pulse 1s infinite;
}
.titulo button a{
    text-decoration: none;
    font-size: 25px;
    color: #fff;
}
.titulo{
    width: 50%;
    height: auto;
    padding-bottom: 1%;
    display: flex;
    flex-direction: column;
}
.electrodomesticos{
    width: 50%;
    display: flex;
    flex-direction: column;
}
.electrodomesticos img{
    width: 100%;
    height: auto;
    max-height: 100%;

}
.elegirnos{
    width: 100%;
    height: auto;
  justify-content: center;
  text-align: center;
  background-color:#0264D1 ;
  padding-bottom: 2%;
}
.elegirnos p{
    color: #fff;
    font-size: 25px;
    width: 100%;
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
}

.elegirnos h2, .servicios h3{
    color: #fff;
    text-align: center;
    font-weight: 700;
  
}

.elegirnos h2{
    font-size: 35px;
    font-weight: 600;
}
.servicios p{
    color: #fff;
}
.servicios{
    width: 100%;
    padding: 3%;
    height: auto;
    display: flex;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    padding-bottom: 1%;

}
.servicios .card{
    width: 23%;
    text-align: center;
    height: auto;
    border: 1px solid  #22f3ff; 

}
.servicios .card img{
    width: 40%;  /* Hace que la imagen ocupe todo el ancho de la tarjeta */
    height: auto; /* Mantiene la proporción de la imagen */
    max-height: 150px;  
}
.servicios .card p{
height: auto;
padding: 0;
font-size: 20px;
}
.servicios .card h3{
    font-size: 20px;
}
.elegirnos button{
background-color:#0A3558 ;
border-radius: 8px;
padding: 10px 5px;
width: 20%;
justify-content: center;
align-items: center;

}
.elegirnos button:hover{
animation: pulse 1s infinite;

}
.elegirnos button a:hover{
    color: #fff;
}
.elegirnos button a{
text-decoration: none;
font-size: 25px;
color: #22f3ff;
}
.nuestros-servicios{
background-color: #0A1E65;
width: 100%;
}

.experiencia{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

}
.experiencia h2{
    color: #fff;
    font-size: 30px;
}
.experiencia h3{
    width: 80%;
    font-size: 25px;
}
.containerf{
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}
.containerf .imagen{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2%;
    padding-top: 2%;

    
}
.imagen img{
    width: 80%;
    height: auto;
    padding-top: 2%;
}
.containerf .imagen button{
    background-color:#0A3558 ;
    border-radius: 8px;
    padding: 10px 3px;
    width: 30%;
    justify-content: center;
    align-items: center;
    margin-top: 1%; 
}
.containerf .imagen button:hover{
    animation: pulse 1s infinite;
}
.containerf .imagen button a{
    text-decoration: none;
    font-size: 25px;
    color: #22f3ff;
}

.servicios-c{
    width: 100%;
    justify-content: space-around;
    display: flex;
    padding: 4%;
    align-items: flex-start; 
    height: auto;
    padding-top: 2%;
}
.servicios-c .cards{
    width: 25%;
    height: 58vh;
    color: #fff;
}
.servicios-c .cards h3{
    font-size: 21px;
}

.servicios-c .cards p{
    font-size: 18px;
}

/*formulariooo*/

.formulario{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background-image: url(/img/tecnicos-especializados.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}
.contact-form {

    padding: 20px;
 
   height:95%;
    width:40%; /* O ajusta según la necesidad */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave alrededor del formulario */
    text-align: center; /* Centrar el texto y los elementos del formulario */
 
padding-top: 6px;
}

#contactForm label {
    display: block; /* Los labels en su propia línea */
    margin-top: 10px; /* Margen superior */
    margin-bottom: 2px; /* Espaciado antes de cada input */
    color: #333333; /* Color del texto de las etiquetas */
}
#contactForm textarea {
    width: 100%; /* Ocupa todo el ancho del contenedor del formulario */
    height: 130px; /* Ajusta esto según cuánto quieras que sea alto el cuadro de texto */
    padding: 7px; /* Espacio interior alrededor del texto */
    margin-bottom: 15px; /* Espaciado después del textarea */
    border-radius: 1px; /* Bordes redondeados para el textarea */
    box-sizing: border-box; /* El width incluye el padding y border */
    resize: vertical; /* Permite al usuario cambiar el tamaño verticalmente si es necesario */
}


#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm textarea {
    width: calc(100% - 20px); /* Ancho menos el padding */
    padding: 8px; /* Espacio interior para escribir */
    margin-bottom: 15px; /* Espaciado después de cada input */
    border-width:2px ;
    box-sizing: border-box; /* El width incluye el padding y border */
}

#contactForm input[type="submit"] {
    
    font-weight: 600;
    font-size: 20px;
    width: 100%; /* El botón de envío ocupa todo el ancho */
    padding: 10px; /* Espacio interior del botón */
    background-color: #002248;
    color:#fff; /* Texto blanco en el botón */
    border: none; /* Sin bordes */
    border-radius: 5px; /* Bordes redondeados del botón */
    cursor: pointer; /* Cursor de mano al pasar por encima */
    margin-top: 3px; /* Margen superior para separar del último input/textarea */
}

#contactForm input[type="submit"]:hover {
    background-color: #0264D1; /* Color del botón al pasar el cursor por encima */
    color: #fff;
}

#contactForm input:invalid,
#contactForm textarea:invalid {
    border-color:  2A3747;
     /* Color de borde para campos inválidos */
}

.contact-form h2 {
    margin-bottom: 15px;
    font-size: 45px;
    color:#122658;
}
.contact-form h3{
    color:#0264D1;
    font-size: 25px;
}
.contact-form form {
    display: flex;
    flex-direction: column;
}
.g-recaptcha{
    width: 100%;
    height: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    display: flex;
    justify-content: center;
}


.copyright{
    text-align: center;
 
}
.copyright A{
    text-decoration: none;
    color: #FFF;
}
footer{
    background-color: #002248;
}
.whatsapp-fixed {
    position: fixed;
    right: 3%; /* Ajusta según tus preferencias */
    bottom:36%;/* Distancia desde el fondo para no superponer el footer */
    color: white;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2px; /* Tamaño del círculo */
    height:2px; /* Tamaño del círculo */
    text-decoration: none;
    z-index: 1000; /* Asegúrate que esté sobre otros elementos */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* Opcional: Añade sombra para mejor visibilidad */
}
.whatsapp-fixed:hover{
    animation: pulse 1s infinite; 
}

.call-fixed {
    position: fixed;
    right: 3%; /* Ajusta según tus preferencias */
    bottom:25%; /* Distancia desde el fondo para no superponer el footer */
    color: white;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1%; /* Tamaño del círculo */
    height: 1%; /* Tamaño del círculo */
    text-decoration: none;
    z-index: 1000; /* Asegúrate que esté sobre otros elementos */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.call-fixed img{
    width: 6rem;
    height:6rem;
}
.call-fixed i {
    font-size: 30px; /* Aumenta el tamaño del ícono del teléfono */
}
.call-fixed:hover{
    animation: pulse 1s infinite; 
}
/*garantia*/
.politica{
    width: 100%;
    padding: 2%;
    height: auto;
    display: flex;
    background-image: url(/img/tecnicos-especializados-bacground.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.politica .garantia{
    width: 50%;
    padding-top: 3%;
    padding-bottom: 3%;
}
.garantia h1{
    width: 100%;
    font-size: 50px;
    text-align: center;
}
.garantia p{
    width: 90%;
    font-size: 20px;
    padding: 2%;
}
.politica .imagen{
    width: 50%;
   
    display: flex;
}
.politica .imagen img{
    width: 100%;
    height: auto;
}

/*-------------------------------------------------------como funciona------------------------------------*/
.funcionamiento{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2%;
    padding-bottom: 5%;
    background-color:#D8E2E4 ;
}
.funcionamiento h2{
    font-size: 30px;
    font-weight: 700;
    padding-left: 5%;
}
.servicios-f{
    width: 100%;
    height: auto;
    display: flex;
}
.servicios-f .imagen{
    width: 40%;
    height: auto;
}
.servicios-f .imagen img{
    width: 90%;
    height: auto;
}

.nuestro-servicio{
    width: 60%;
    height: auto;
    padding-top: 2%;
}
.nuestro-servicio .cards{
    padding: 0;
    margin: 0;
    display: flex;
    width:100%;
    height:auto;
    align-items: center;
    text-align: left;
}
.nuestro-servicio .cards p{
 font-size: 19px;
 padding-right: 8%;
 padding-left: 2%;
 color: #000;
}
.nuestro-servicio .cards p strong{
font-weight: 700;
font-size: 22px;
text-align: left;
color: #002248;

}

.nuestro-servicio .cards img{
    width: 12%;
    height: auto;
    max-height: 120px;
}
@media (min-width: 300px) and (max-width:798px){
    .container-logo{
        flex-direction: column;
        display: flex;
    }
    nav{
        width: 100%;
        padding: 0;
        align-items: center;
        justify-content:center;
        padding-bottom: 2%;
        padding-top: 2%;

    }
    nav a{
        font-size: 18px;
        padding: 1%;
    }
    .titulo h1{
       width: 100%; 
       font-size: 28px;
    }
    .titulo p{
        width: 100%;
    }
    .container-home, .servicios, .funcionamiento{
        flex-direction: column;
    }
    .titulo, .electrodomesticos, .servicios, .logo {
        width: 100%;
    }
.card{
    width: 90%;
}
.titulo button, .funcionamiento .imagen button {
    width: 50%;
}
.titulo{
    padding-bottom: 2%;
}
.funcionamiento, .funcionamiento .imagen, .como-funciona{
    width: 100%;
    height: auto;
}

.servicios-c{
    flex-direction: column;
    width: 100%;
    height: auto;
}
.servicios-c .cards{
    width: 100%;
    height: auto;
    margin-bottom: 2%;
}
.servicios-f{
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.funcionamiento h2{
    text-align: center;
}
.servicios-f .imagen{
    justify-content: center;
    display: flex;
}
    .servicios-f .imagen img {
    width: 70%;
}
.nuestro-servicio{
    width: 100%;

}
.nuestro-servicio .cards {
    width: 100%;
    height: auto;
    flex-direction: column;
}
.nuestro-servicio .cards img{
    width: 25%;
}
.como-funciona .cards {
    align-items: center;
}
.como-funciona .cards img{
    width: 30%;
    height: 12vh;
}
.como-funciona .cards p{
    width: 70%;
}
.contact-form{
    width: 95%;
    height: auto;
    margin-bottom: 2%;
}
.elegirnos p{
    width: 100%;
    padding: 2%;
}
.servicios .card {
    width: 100%;
    height: auto;
    padding: 2%;
}
.separator{
    display: none;
 

}
.contact-form h2{
    width: 100%;
    padding: 0;
    text-align: center;
    font-size: 33px;
}

.separator img{
width: auto;
height: auto;
}
.formulario{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.formulario .imagen {
    width: 100%;
    justify-content: center;
    display: flex;
}
.como-funciona{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
}
.como-funciona .cards{
    width: 90%;
    height: auto;
}
.como-funciona .cards p{
    width: 90%;
    font-size: 22px;
}
.como-funciona .cards h3{
    width: 95%;
    font-size: 25px;
}
.experiencia h3 {
    width: 95%;
}
.elegirnos button{
    width: 50%;
}

.politica{
    flex-direction: column;
    justify-content: center;
}
.politica .garantia{
    width: 100%;
}
.garantia p {
    width: 100%;
}
.politica .imagen{
    width: 100%;
}
.call-fixed, .whatsapp-fixed {right: 16%;}
.container-f{
flex-direction: column;
justify-content: center;
}
.container-f .logo {
    width: 100%;
}
.container-f nav{
    width: 100%;
    padding: 0;
    align-items: center;
    justify-content: center;
    padding-bottom: 2%;
    padding-top: 2%;
}
.container-f nav a{
    font-size: 18px;
    padding: 1%;
}

}
@media (min-width: 1300px) and (max-width:1439px){
    .titulo h1{
        width: 78%;
    }
    .como-funciona .cards{
    width: 18%; /* Ancho de cada tarjeta, ajusta según necesites */
    height: 60vh;
    margin: 10px; /* Espacio entre las tarjetas */
    padding: 20px; /* Espaciado interno de cada tarjeta */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Sombra opcional para un efecto 3D */
    color: white; /* Color de texto */
    text-align: center; /* Alineación del texto */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical de contenido */
    align-items: center; /* Centrado horizontal de contenido */
    border-radius: 10px; /* Bordes redondeados */
}
.como-funciona .cards h3{
    color: #fff;
    min-height: 70px;
    width: 98%;
}
.como-funciona .cards p{
 padding: 2%;
 width: 90%;
 color: #fff;
 min-height: 220px;
}
.como-funciona .cards p strong{
font-weight: 600;
text-align: start;
justify-content: left;
}

.como-funciona .cards img{
    width: 80px;  /* O el tamaño que prefieras, pero mantén un valor fijo */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: 15px; /* Espacio entre la imagen y el texto debajo */
    display: block; /* Asegura que la imagen no tenga elementos a su lado */
    margin-left: auto; /* Junto con margin-right, centra la imagen horizontalmente */
    margin-right: auto;
}
}
@media (min-width: 1700px) and (max-width:2000px){
    .card img{
        width: 30%;
        height: auto;
    }
    .como-funciona .cards{
        height:40vh;
    }
    
}
@media (min-width: 1300px) and (max-width:1400px){
    

    .servicios .card p {
  width: 100%;
  padding-left: 1%;
  padding-right: 1%;
    }
}
@media (min-width: 1300px) and (max-width:1400px){
    .servicios .card img {
        width: 40%;
        height: auto;
        max-height: 220px;
    }
}