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


body {
    background-image: url('../img/fondogrande.jpg');
    background-attachment: fixed;
     background-size: cover; 
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    height: 100vh; /* Asegura que el body ocupe toda la altura de la pantalla */
    margin: 0;
}


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;
  margin-bottom:50px;



}

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



}


.cars .card{
        height:600px;
        background-color: rgba(234, 0, 255, 0.464);
        backdrop-filter: blur(5px);
        width: 90%;
        margin:20px;
        box-shadow: 
        0px 4px 6px rgba(0, 0, 0, 0.1),  
        0px 10px 15px rgba(0, 0, 0, 0.1),  
        0px 20px 25px rgba(0, 0, 0, 0.15);  
       transition: transform 0.2s, box-shadow 0.2s;

      
     
     
}
.card h2{
    font-size:30px;
    flex-wrap: wrap;
    margin-top:10px;
}

.ima1{
    height: 200px;
    width: 100%;
    background-image: url(../img/gateador.jpeg);
    background-size: 100% 100%; /* Estira la imagen para llenar el contenedor */
    background-position: center;
    background-repeat: no-repeat;
}

.ima2{
     height: 200px;
    width: 100%;
    background-image: url(../img/caminadores.jpeg);
    background-size: 100% 100%; /* Estira la imagen para llenar el contenedor */
    background-position: center;
    background-repeat: no-repeat;
}

.ima3{
     height: 200px;
    width: 100%;
    background-image: url(../img/parvulos2.jpeg);
    background-size: 100% 100%; /* Estira la imagen para llenar el contenedor */
    background-position: center;
    background-repeat: no-repeat;
}

.ima4{
     height: 200px;
    width: 100%;
    background-image: url(../img/prejardin.jpeg);
    background-size: 100% 100%; /* Estira la imagen para llenar el contenedor */
    background-position: center;
    background-repeat: no-repeat;
}

.ima5{
     height: 200px;
    width: 100%;
    background-image: url(../img/jardin.jpeg);
    background-size: 100% 100%; /* Estira la imagen para llenar el contenedor */
    background-position: center;
    background-repeat: no-repeat;
}

.img1{
    width: 300px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    font-family: btnletter;
    font-size:25px;
   
}

.img2{
     width: 300px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    font-family: btnletter;
    font-size:25px;
    
 }
 .img3{
    width: 300px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    font-family: btnletter;
    font-size:25px;
   
 }
 .img4{
    width: 300px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    font-family: btnletter;
    font-size:25px;
    
 }

 .img5{
    width: 300px;
    background: white;
    padding: 20px;
    box-sizing: border-box;
    font-family: btnletter;
     font-size:25px;
    
    
 }
 .cars1{
  margin-top: 40px;
 
  

 }

 .c1{
    width: 90%;
    height: 500px;
    background-color: rgba(169, 0, 202, 0.5);
    display: flex;
    flex-wrap:wrap ;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom:20px;
    box-shadow: 
        0px 4px 6px rgba(0, 0, 0, 0.1),  
        0px 10px 15px rgba(0, 0, 0, 0.1),  
        0px 20px 25px rgba(0, 0, 0, 0.15); 


 }
 .c2{
    width: 90%;
    height: 500px;
    background-color: rgba(255, 255, 255,0.5);
    display: flex;
    flex-wrap:wrap ;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom:20px;
     box-shadow: 
        0px 4px 6px rgba(0, 0, 0, 0.1),  
        0px 10px 15px rgba(0, 0, 0, 0.1),  
        0px 20px 25px rgba(0, 0, 0, 0.15); 

 }

 .c3{
    width: 90%;
    height: 500px;
    background-color: rgba(169, 0, 202, 0.5);
    display: flex;
    flex-wrap:wrap ;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom:20px;
     box-shadow: 
        0px 4px 6px rgba(0, 0, 0, 0.1),  
        0px 10px 15px rgba(0, 0, 0, 0.1),  
        0px 20px 25px rgba(0, 0, 0, 0.15); 

 }

 .c4{
   width: 90%;
    height: 500px;
    background-color: rgba(255, 255, 255,0.5);
    display: flex;
    flex-wrap:wrap ;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom:20px;
     box-shadow: 
        0px 4px 6px rgba(0, 0, 0, 0.1),  
        0px 10px 15px rgba(0, 0, 0, 0.1),  
        0px 20px 25px rgba(0, 0, 0, 0.15); 

}

 .c5{
   width: 90%;
    height: 500px;
    background-color: rgba(169, 0, 202, 0.5);
    display: flex;
    flex-wrap:wrap ;
    margin: auto;
    justify-content: space-evenly;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom:20px;
     box-shadow: 
        0px 4px 6px rgba(0, 0, 0, 0.1),  
        0px 10px 15px rgba(0, 0, 0, 0.1),  
        0px 20px 25px rgba(0, 0, 0, 0.15); 

}


 .i1{
    background-image: url('../img/bebecominedo.jpeg');
    width: 220px;
    height:220px;
    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: 220px;
   height:220px;
   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: 220px;
   height:220px;
   background-size: cover;
   border-radius: 50%;
   margin: 4px;
 
}

.i22{
  background-image: url('../img/trenanimalitos.jpeg');
  width: 220px;
  height:220px;
  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: 220px;
   height:220px;
   background-size: cover;
   border-radius: 50%;
   margin: 4px;
 
}

.i33{
  background-image: url('../img/beba.jpeg');
  width: 220px;
  height:220px;
  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/ninosamigos1.jpeg');
   width: 220px;
   height:220px;
   background-size: cover;
   border-radius: 50%;
   margin: 4px;
 
}

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

}


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

}


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

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

}

 p{
    width: 60%;
    font-family: btnletter;
    font-size:28px ;
    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);
  }
  
    .ds5{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(247, 126, 4, 0.608);
    backdrop-filter: blur(5px);
  }
  
    .ds6{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(247, 126, 4, 0.608);
    backdrop-filter: blur(5px);
  }
  
  
      .ds7{
    display: flex;
    flex-wrap: nowrap;
    background-color: rgba(247, 126, 4, 0.608);
    backdrop-filter: blur(5px);
  }
  
        .ds8{
    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);
    
}

.c1 h2{
 font-weight: bold; 
 font-size: 40px;
 color:#fff;
}
.c2 h2{
 font-weight: bold; 
 font-size: 40px;
 color:#a900cae6;
}
.c3 h2{
 font-weight: bold; 
 font-size: 40px;
 color:#fff;
}
.c4 h2{
 font-weight: bold; 
 font-size: 40px;
 color:#a900cae6;

}

.c5 h2{
 font-weight: bold; 
 font-size: 40px;
 color:#fff;
}
  @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;

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

  }
  
  
  
.card {
    width: 350px;
    height: 250px;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

.card:hover {
    transform: perspective(500px) translateZ(10px);
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.3);
}


 .swiper {
            width: 90%;
            height: 90vh; /* Ocupará el 90% de la pantalla */
            margin: auto;
            overflow: hidden;
             position: relative;
            
        }
        
        

        .swiper-slide {
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
        
            padding: 10px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            height: 100%; /* Para que el slide ocupe todo el contenedor */
            transition: transform 0.5s ease-in-out;
            
        }
         
      .swiper-slide  #slider1{
            width: 100%;
            background-image: url(../img/et2.jpg);
            height: auto;
            max-height: 300px;
            background-size: cover;
            border-radius: 10px;
           
        }

        .swiper-slide h3 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #007bff;
        }

        .swiper-slide p {
            font-size: 18px;
            color: #333;
            max-width: 80%;
        }

        .swiper-button-next, .swiper-button-prev {
            color: #007bff;
        }

        .swiper-pagination-bullet {
            background: #007bff;
        }










/* 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 */
   }
    .img1, .img2, .img3, .img4, .img5{
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    height: 100%; /* Ajusta la altura al 100% del contenedor */
    background-size: contain; /* Asegura que toda la imagen sea visible sin recortes */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.card {
    width: 100%; /* O un ancho específico, por ejemplo: 300px */
    height: 300px; /* Ajusta la altura según necesites */
    overflow: hidden; /* Evita que el contenido dentro del card se desborde */
}

 
   .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 */
   }
   
.cars article{
    
}
   /* 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,.img5{
    height: 500px; /* Altura de las imágenes */
    background-size: cover; /* Asegura que la imagen cubra toda la pantalla */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    height: 100vh; /* Asegura que el body ocupe toda la altura de la pantalla */
    margin: 0;
   
 }
 
 .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 */
   }
  
    .img1, .img2, .img3, .img4,.img5 {
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    height: 100%; /* Ajusta la altura al 100% del contenedor */
    background-size: contain; /* Asegura que toda la imagen sea visible sin recortes */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.card {
    width: 100%; /* O un ancho específico, por ejemplo: 300px */
    height: 300px; /* Ajusta la altura según necesites */
    overflow: hidden; /* Evita que el contenido dentro del card se desborde */
}
 
   .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 */
   }
   
     .img1, .img2, .img3, .img4,.img5 {
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    height: 100%; /* Ajusta la altura al 100% del contenedor */
    background-size: contain; /* Asegura que toda la imagen sea visible sin recortes */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.card {
    width: 100%; /* O un ancho específico, por ejemplo: 300px */
    height: 300px; /* Ajusta la altura según necesites */
    overflow: hidden; /* Evita que el contenido dentro del card se desborde */
}
 
   .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 */
   }
 }