*{
   
    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: #000;
}
.logo{
    width: 25%;
    padding: 1%;
    height: auto;
    justify-content: center;
    align-items: center;
    display: flex;
}
.logo img{
    width: 55%;
  
}
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: 23px;
}
nav a:hover{
    animation:pulse 1s infinite;  
    color:#FFE604;
}
.nosotros{
    display: flex;
    width: 100%;
    padding: 2%;
    height: auto;
    background-image:url(/img/background.png) ;
    background-size: cover;
    background-repeat: no-repeat;
}
.container-home{
    display: flex;
    width: 100%;
    padding: 2%;
    height: auto;
    background-image:url(/img/background-map.png) ;
    background-size: cover;
    background-repeat: no-repeat;
}
.electrodomesticos, .titulo, .nosotrosT, .nosotros-img{
    width: 50%;
    height: auto;
}
.electrodomesticos img{
width: 100%;
height: auto;
}
.titulo{
padding-left: 5%;
}
.titulo button{
    width: 60%;
    padding: 10px 3px;
    background-color: #fff;
    border-radius: 10px;

}
.titulo button:hover{
    animation: pulse 1s infinite;
}
.titulo button a{
    color: #000;
    font-size: 20px;
    text-decoration: none;
    font-weight: 700;
 
}
.titulo h1{
    padding-top: 5%;
    width: 62%;
    font-size: 38px;
    color: #fff;
    font-weight: 700;
}
.titulo h1 strong{
    color: #FFE604;
}
.titulo h2{
    color: #fff;
    width: 42%;
}
.nuestros-servicios, .textimonios {
    display: flex;
    width: 100%;
    padding: 2%;
    height: auto;
    justify-content: center;
}
.nuestros-servicios{
    background-image:url(/img/background.png) ;
    background-size: cover;
    background-repeat: no-repeat;
}
.nuestros-clientes {
    background-image:url(/img/background.png) ;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}
.nuestros-clientes h2{
    color: #fff;
    font-size: 26px;
    font-weight: 600;
}
.textimonios .card{
    background-color: #A3A3A3;
    text-align: center;
    margin: 2%;
}
.nuestros-servicios .card, .textimonios .card{
    width: 30%;
    height: auto;
    padding: 2%;
}
.nuestros-servicios .card h2{
    color: #FFE604;
    font-size: 22px;
    font-weight: 600;
}
.nuestros-servicios .card p{
    font-size: 20px;
    color: #fff;
}
.nuestros-servicios .card:hover{
    background-color:#2A2A2A ;
    color: #fff;
}
.nuestros-servicios .card h2:hover{
    color: #fff;
}

.nuestros-servicios  .card:hover img {
    filter: invert(100%) brightness(200%) contrast(100%);
}
   
 

.nosotrosT{
    color: #fff;
    font-size: 20px;
}
.nosotros-img{
    width: 50%;
    height: auto;
}
.nosotros-img img{
    width: 100%;
    height: auto;
}
/*formulariooo*/

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

}
form{
    width: 80%;
    justify-content: center;
}
.formulario .imagen img{
width: 100%;
height: auto;

}
.contact-form {

    padding: 20px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
   height:auto;
    width:50%; /* 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:#918b8bfa;
    color:#000; /* 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: #fff; /* Color del botón al pasar el cursor por encima */
    color: #000;
}

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

.contact-form h2 {
    margin-bottom: 15px;
    font-size: 40px;
    color:#fff;
    width: 80%;
}
.contact-form h3{
    color:#FFE604;
    font-size: 20px;
    width: 80%;
}
.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;
}
.formulario .imagen{
    width: 50%;
    height: auto;
    background-image: url(/img/nevecones-24-horas.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.formulario .imagen img{
    width: 80%;
    height: auto;
}
.copyright{
    text-align: center;
 
}
.copyright A{
    text-decoration: none;
    color: #FFF;
}
.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; 
}
.marcas{
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    padding: 2%;

}
.marcas img{
    width: 12%;
    height:auto;
    max-height: 100px;
}
.copyright{
    background-color: #000;
}
@media (min-width: 300px) and (max-width:798px){
.container-logo, .container-home, .nuestros-servicios, .nuestros-servicios, .nosotros, .textimonios, .formulario{
    flex-direction: column;
    width: 100%;
}
.container-logo .logo,.contact-form, .electrodomesticos,.formulario .imagen, .titulo, .textimonios .card, .nuestros-servicios .card, .nosotrosT, .nosotros-img, .imagen{
    width: 100%;
}
.titulo h1, .titulo h2{
    width: 100%;
    padding: 0;
}
.titulo{
    justify-content: center;
    padding: 0;
}
nav{
    width: 100%;
    text-align: center;
    padding: 1%;
    align-items: center;
    display: flex;
    justify-content: center;
}
nav a{
    padding: 2%;
    font-size: 16px;
}
.textimonios{
    width: 100%;
    justify-content: center;
    padding: 2%;
}
.textimonios .card{
    width: 95%;
}
.contact-form form{
    width: 100%;
}
.whatsapp-fixed, .call-fixed{
    right: 12%;
}

}