@font-face{
   src:url('../fonts/Handlee-Regular.ttf');
   font-family:btnletter;
}


body {
    background-image: url('../img/fondo.jpg');
    background-attachment: fixed;
    background-size: cover; /* Ajusta según sea necesario */
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0; /* Elimina el padding predeterminado del body */
}


canvas { 
  
   width:100vw;
   height:200vh;
   background-color:transparent;
   position: absolute;
    z-index: 1;
}
main{
   
margin-top: 190px;
 
}



.cars{

  display: flex;
  flex-wrap: nowrap;
  background-color:0;
  justify-content: space-evenly;


}

#servicio{
   font-family: btnletter;
   font-size: 30px;
   margin: auto;
   width: 100%;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-top: 40px;
   font-weight: bold;
   color: rgb(130, 3, 155);
  



}


.card{
    height: 400px;
      /* background-color: rgba(234, 0, 255, 0.464);
     
       backdrop-filter: blur(5px);*/
       width: 22%;
      
     
     
}

.img1{
   background-image: url('../img/3.png');
   opacity: 0.9;
   width: 100%;
   height: 400px;
    background-size:contain;
      background-repeat: no-repeat;

   
}

.img2{
    background-image: url('../img/card1.png');
    opacity: 0.8;
    width: 100%;
    height: 400px;
     background-size:contain;
      background-repeat: no-repeat;
    
 }
 .img3{
    background-image: url('../img/1.png');
    opacity: 0.8;
   
    width: 100%;
    height: 400px;
     background-size:contain;
      background-repeat: no-repeat;
    
 }
 .img4{
    background-image: url('../img/4.png');
    opacity: 0.8;
    width: 100%;
    height: 400px;
    background-size:contain;
      background-repeat: no-repeat;
    
 }

 .cars1{
  margin-top: 40px;
 
  

 }

 .c1{
    width: 98%;
    height: 150px;
    background-color: rgba(253, 0, 156,0.5);
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;


 }
 .c2{
    width: 98%;
    height: 150px;
    background-color: rgba(133, 6, 158,0.5);
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;

 }

 .c3{
    width: 98%;
    height: 150px;
    background-color: rgba(253, 0, 156,0.5);
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;

 }

 .c4{
   width: 98%;
   height: 190px;
   background-color: rgba(4, 202, 31, 0.5);
   display: flex;
   margin: auto;
   justify-content: space-evenly;
   padding-top: 20px;
   padding-bottom: 20px;

}


 .i1{
    background-image: url('../img/bebecominedo.jpeg');
    width: 140px;
    height:140px;
    background-size: cover;
    border-radius: 50%;
    margin: 4px;
  
 }

 .i11{
   background-image: url('../img/Niña\ linda\ jugando\ con\ bolas\ de\ colores\ _\ Vector\ Premium.jpeg');
   width: 140px;
   height:140px;
   background-size: cover;
   border-radius: 50%;
   margin:4px ;
 
}


.i111{
   background-image: url('../img/Feliz\ niño\ pequeño\ niño\ y\ niña\ hacen\ pose\ de\ yoga\ _\ Vector\ Premium.jpeg');
   width: 140px;
   height:140px;
   background-size: cover;
   border-radius: 50%;
   margin:4px ;
 
}

.i2{
   background-image: url('../img/parque.jpeg');
   width: 140px;
   height:140px;
   background-size: cover;
   border-radius: 50%;
   margin: 4px;
 
}

.i22{
  background-image: url('../img/trenanimalitos.jpeg');
  width: 140px;
  height:140px;
  background-size: cover;
  border-radius: 50%;
  margin:4px ;

}


.i222{
  background-image: url('../img/ninosletras.jpeg');
  width: 140px;
  height:140px;
  background-size: cover;
  border-radius: 50%;
  margin:4px ;

}

.i3{
   background-image: url('../img/bebec.jpeg');
   width: 140px;
   height:140px;
   background-size: cover;
   border-radius: 50%;
   margin: 4px;
 
}

.i33{
  background-image: url('../img/beba.jpeg');
  width: 140px;
  height:140px;
  background-size: cover;
  border-radius: 50%;
  margin:4px ;

}


.i333{
  background-image: url('../img/beben.jpeg');
  width: 140px;
  height:140px;
  background-size: cover;
  border-radius: 50%;
  margin:4px ;

}


.i4{
   background-image: url('../img/aco2.png');
   width: 140px;
   height:140px;
   background-size: cover;
   border-radius: 50%;
   margin: 4px;
 
}

.i44{
  background-image: url('../img/arbolacom.png');
  width: 140px;
  height:140px;
  background-size: cover;
  border-radius: 50%;
  margin:4px ;

}


.i444{
  background-image: url('../img/beben.jpeg');
  width: 140px;
  height:140px;
  background-size: cover;
  border-radius: 50%;
  margin:4px ;

}

 p{
    width: 60%;
    font-family: btnletter;
    font-size:20px ;
    padding: 5px;
    text-align: justify;


 }

 .cars2{
    margin-top: 80px;


      
     
  
 }


 .swiper {
    width: 100%;
    height: 400px;
  }


  .ds1{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(46, 197, 8, 0.8);
    
  }
  .ds1 h2{
    font-size: 30px;
  }
  .ds11{
    background-image: url('../img/logodul.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 30%;
    padding: 20px;
    margin-top: 20px;
    margin-left: 40px;

  }

  .ds12{
   
    width: 50%;
    padding: 20px;

  }

  .nos{
    width: 100%;
    
    background-color:0;
    margin-right: auto;
  }


  .ds2{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(251, 43, 130, 0.7);
    backdrop-filter: blur(5px);
  }

  .ds2 h2{
    font-size: 30px;
  }
  .ds3{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(47, 229, 253, 0.608);
    backdrop-filter: blur(5px);
  }

  .ds3 h2{
    font-size: 30px;
  }

  .ds4{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(247, 126, 4, 0.608);
    backdrop-filter: blur(5px);
  }

  .ds4 h2{
    font-size: 30px;
  }

  .ds4 ol{
    font-size: 16px;
    font-family: btnletter;
  }

#contactofoot{
    font-family: btnletter;
   font-size: 30px;
   margin: auto;
   width: 100%;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-top: 40px;
   font-weight: bold;
   color: rgb(130, 3, 155);
    
}

  @keyframes show {
   from{
      opacity: 0;
      scale: 25%;
   }
   to{
      opacity: 1;
      scale: 100%;
   }
   
  }

  .c1 {
   view-timeline: --image;
   view-timeline-axis: block;
   animation-timeline: --image;
   animation-name: show;
   animation-range: entry 25% cover 50%;
   animation-fill-mode: both;

  }
  .c2 {
   view-timeline: --image;
   view-timeline-axis: block;
   animation-timeline: --image;
   animation-name: show;
   animation-range: entry 35% cover 40%;
   animation-fill-mode: both;

  }
  .c3 {
   view-timeline: --image;
   view-timeline-axis: block;
   animation-timeline: --image;
   animation-name: show;
   animation-range: entry 45% cover 30%;
   animation-fill-mode: both;

  }


  .c4 {
   view-timeline: --image;
   view-timeline-axis: block;
   animation-timeline: --image;
   animation-name: show;
   animation-range: entry 45% cover 30%;
   animation-fill-mode: both;

  }


/* Estilos generales para pantallas más pequeñas */
@media screen and (max-width: 767px) {
   .headeruno,
   .headerdos {
     height: 80px; /* Ajusta la altura del encabezado para pantallas pequeñas */
   }
 
   .logo,
   .logodos {
     width: 60px;
     height: 40px;
     /* Ajusta el tamaño del logo para pantallas pequeñas */
   }
 
   .headeruno li,
   .headerdos li {
     width: auto;
     padding: 5px;
     /* Ajusta el tamaño de los elementos de la barra de navegación para pantallas pequeñas */
   }
 
   .redes a img,
   .redes a #ac {
     width: 30px;
     height: 30px;
     padding: 10px;
     /* Ajusta el tamaño de los iconos de redes sociales para pantallas pequeñas */
   }
 
   nav {
     width: 70%;
     /* Ajusta el ancho de la barra de navegación para pantallas pequeñas */
   }
 
   main {
     margin-top: 100px; /* Ajusta el margen superior para pantallas pequeñas */
   }
   /* Estilos generales para la sección de cars */
.cars {
   display: flex;
   flex-direction: column; /* Asegura que los elementos estén en columna */
   align-items: center; /* Centra los elementos horizontalmente */
   height: auto;
 }
 
 /* Estilos específicos para cada tarjeta */
 .card {
   width: 90%;
   margin: 10px auto; /* Centra la tarjeta y agrega espacio entre ellas */
   height: 100%;
 }
 
 /* Puedes ajustar estos estilos según tus necesidades */
 .img1, .img2, .img3, .img4 {
   height: 500px; /* Altura de las imágenes */
   background-size: cover;
 }
 
 .txt {
   height: 50px; /* Altura del texto (ajusta según sea necesario) */
   background-color: #fff; /* Fondo blanco para el área de texto */
 }
 .c1{
   height: auto;
 }
 .c2{
   height: auto;
 }
 .c3{
   height: auto;
 }
 .c4{
   height: auto;
 }
 
 }
 
 /* Estilos específicos para pantallas medianas */
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .headeruno,
   .headerdos {
     height: 120px; /* Ajusta la altura del encabezado para pantallas medianas */
   }
 
   .logo,
   .logodos {
     width: 100px;
     height: 70px;
     /* Ajusta el tamaño del logo para pantallas medianas */
   }
 
   .headeruno li,
   .headerdos li {
     width: auto;
     padding: 10px;
     /* Ajusta el tamaño de los elementos de la barra de navegación para pantallas medianas */
   }
 
   .redes a img,
   .redes a #ac {
     width: 40px;
     height: 40px;
     padding: 15px;
     /* Ajusta el tamaño de los iconos de redes sociales para pantallas medianas */
   }
 
   nav {
     width: 80%;
     /* Ajusta el ancho de la barra de navegación para pantallas medianas */
   }
 
   main {
     margin-top: 130px; /* Ajusta el margen superior para pantallas medianas */
   }
 }
 
 /* Estilos específicos para pantallas más grandes (a partir de 1024px) */
 @media screen and (min-width: 1024px) {
   .headeruno,
   .headerdos {
     height: 140px; /* Ajusta la altura del encabezado para pantallas más grandes */
   }
 
   .logo,
   .logodos {
     width: 160px;
     height: 100px;
     /* Ajusta el tamaño del logo para pantallas más grandes */
   }
 
   .headeruno li,
   .headerdos li {
     width: auto;
     padding: 15px;
     /* Ajusta el tamaño de los elementos de la barra de navegación para pantallas más grandes */
   }
 
   .redes a img,
   .redes a #ac {
     width: 50px;
     height: 50px;
     padding: 20px;
     /* Ajusta el tamaño de los iconos de redes sociales para pantallas más grandes */
   }
 
   nav {
     width: 90%;
     /* Ajusta el ancho de la barra de navegación para pantallas más grandes */
   }
 
   main {
     margin-top: 160px; /* Ajusta el margen superior para pantallas más grandes */
   }
 }