*{
   
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}
p{font-size: 19px;}
@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;
    }
}
@keyframes slide{
    from {
        transform: translateX(100%); /* Comienza desde la derecha fuera de la pantalla */
        opacity: 0;
    }
    to {
        transform: translateX(0); /* Termina en su posición original */
        opacity: 1;
    }
}

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

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

header{
    width: 100%;
    padding: 0;
    margin: 0;
}
header .tittle{
    background-color:#0071BC ;
    width: 100%;
    padding: 1%;
    display: flex;
    justify-content: center;
    align-items:center;
    animation: slide-in 1s ease-out;
}
header .tittle img{
    width: 3%;
    height: auto;
    max-height: 40px;
padding-right: 5px;
}
header .tittle h2{
    color: #fff;
    text-align: center;
    font-weight: 800;
}
.container-logo{
    width: 100%;
    display: flex;
    height: auto;
    justify-content: space-around;
    background-color: #002248;
}
.logo{
    width: 25%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.logo img{
    width: 90%;
    height: auto;
    padding-left: 13%;
    animation: slide 2s;
  
}
nav{
    width: 75%;
    padding-right: 5%;
justify-content:right;
align-items: center;
display: flex;
}
nav a{
    color: #fff;
    text-decoration: none;
    padding-right: 8%;
    font-weight: 700;
    font-size: 25px;
}
nav a:hover{
    animation:pulse 1s infinite;  
    color: #FD1A52;
}
.titulo{
    width: 50%;
    height: auto;
  
}
.container-home{
    width: 100%;
    display: flex;
    height: auto;
}
.container-home .titulo{
    background-image: url(/img/tecnico-experto-en-neveras.png);
    padding-bottom: 10%;
    background-size: cover;
    background-position: bottom;
    display: flex;
    justify-content: left;
    align-items: start;
    
}
.titulo h1{
    color:#002248 ;
    font-size:45px ;
    font-weight: 800;
    width: 100%;
    padding: 2%;
    padding-left: 13%;
    padding-right: 27%;

}
.titulo h1 strong{
    color:#808080 ;
    font-weight: 600;
    font-size: 25px;
}
.titulo button{
    background-color:#002248 ;
    border-radius: 8px;
    padding: 10px 5px;
    width: 30%;
    justify-content: center;
    align-items: center;
    margin-left: 13%;

}
.titulo button:hover{
    animation: pulse 1s infinite;
}
.titulo button a{
    text-decoration: none;
    font-size: 25px;
    color: #fff;
}
.titulo, .electrodomesticos{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.electrodomesticos img{
    width: 80%;
    height: auto;
}
.elegirnos{
    width: 100%;
    height: auto;
    background-color: #002248;
}
.elegirnos p{
    color: #fff;
    font-size: 25px;
    width: 100%;
    padding-left: 20%;
    padding-right: 20%;
    text-align: center;
}
.elegirnos h2, .servicios h3{
    color:#FD1A52  ;
    text-align: center;
    padding-top: 1%;
  
}

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

}
.servicios .card{
    width: 23%;
    background-color: #002248;
    padding-top: 2%;
    height: 60vh;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;

}
.servicios .card p{
    font-size: 18px;
    height: 80%;
padding: 0;
padding: 1%;
}
.servicios .card h3{
    color: #fff;
}

.servicios .card img{
    width: 60%;
    height: auto;
  
}

.experiencia{
    width: 100%;
    height: 80vh;
    margin: 0;
    padding: 0;
    text-align: center;
    background-image: url(/img/reparaciones-background.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.experiencia h2{
    font-size: 35px;
}
.experiencia h3{
    width: 70%;
    height: 15vh;
padding-left: 5%;
padding-right: 5%;
    font-size: 20px;

}
.funcionamiento{
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    padding-bottom: 5%;
    padding: 0;
    background-image: url(/img/todos-08.png);
    background-size: cover;
    background-position: bottom;

}
.funcionamiento .imagen{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 12%;
    padding-top: 2%;
 
    
}
.imagen img{
    width: 80%;
    height: auto;
    padding-top: 2%;

}
.funcionamiento .imagen button{
    background-color:#002248 ;
    border-radius: 8px;
    padding: 10px 3px;
    width: 30%;
    justify-content: center;
    align-items: center;
    margin-top: 1%; 
}
.funcionamiento .imagen button:hover{
    animation: pulse 1s infinite;
}
.funcionamiento .imagen button a{
    text-decoration: none;
    font-size: 25px;
    color: #fff;
}

.como-funciona{
    width: 50%;
    text-align: center;
    height: auto;
    padding-top: 2%;
}
.como-funciona .cards{
    padding: 0;
    margin: 0;
    display: flex;
    width: 95%;
    height:auto;
    text-align: left;
}
.como-funciona .cards p{
 font-size: 18px;
 padding-right: 7%;
 padding-left: 1%;
}
.como-funciona .cards p strong{
font-weight: 600;
text-align: left;

}

.como-funciona .cards img{
    width: 17%;
    height: auto;
}
/*formulariooo*/

.formulario{
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background-image: url(/img/servicios-de-reparacion-en-medellin.png);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
}
.contact-form {

    padding: 20px;
 
   height:95%;
    width:30%; /* 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-family: "Ga Maamli", sans-serif;
    font-weight: 400;
    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: white; /* 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: #FD1A52; /* Color del botón al pasar el cursor por encima */
}

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

.contact-form h2 {
    margin-bottom: 15px;
    font-size: 38px;
    color: #002248;
}
.contact-form h3{
    color:#FD1A52;
    font-size: 25px;
}
.contact-form form {
    display: flex;
    flex-direction: column;
}
.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: 2.5%; /* 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/todos-03.png);
    background-size: cover;
    background-position: center;
}
.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%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.politica .imagen img{
    width: 80%;
    height: auto;
}
@media (min-width: 300px) and (max-width:798px){
    .container-logo{
        flex-direction: column;
        display: flex;
    }
    .tittle{
        flex-direction: column;
    }
    header .tittle img {
        width: 15%;
        max-height: 50px;
        padding-top: 2%;
    }
    .titulo h1{
        width: 98%;
        padding: 0;
        padding-right: 16%;
        font-size: 40px;
    }
    nav{
        width: 100%;
        padding: 0;
        align-items: center;
        justify-content:center;
        padding-bottom: 2%;
        padding-top: 2%;

    }
    nav a{
        font-size: 18px;
        padding: 1%;
   
    }
    .container-home, .servicios, .funcionamiento{
        flex-direction: column;
        display: flex;
    }
    .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;
}
.como-funciona{
    height:auto;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: 35%;
}
.como-funciona .cards {
    align-items: center;
    width: 98%;
}
.como-funciona .cards img{
    width: 30%;
    height: 12vh;
}
.como-funciona .cards p{
    width: 70%;
    font-size: 20px;
}
.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;
 

}
.separator img{
width: auto;
height: auto;
}
.call-fixed, .whatsapp-fixed {right: 16%;}


.politica{
    flex-direction: column;
    justify-content: center;
}
.politica .garantia{
    width: 100%;
}
.garantia p {
    width: 100%;
}
.politica .imagen{
    width: 100%;
}
}
@media (min-width: 400px) and (max-width:450px){
    .call-fixed, .whatsapp-fixed {right: 12%;}   
}
@media (min-width: 600px) and (max-width:798px){
    nav a{
        padding-left: 3%;
    }
    .call-fixed, .whatsapp-fixed {right: 9%;}  
    .como-funciona .cards img{
        width: 25%;
    }
    .servicios h3{
        font-size: 25px;
    }
}
   
@media (min-width: 1300px) and (max-width:1400px){

    .experiencia h2{
        font-size: 39px;
        font-weight: 700;
    
}
.experiencia h3{
    width: 80%;
    font-size: 22px;
}
.como-funciona .cards img{
    width: 25%;
}
}