@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Tinos&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Crete+Round&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Croissant+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Sofia+Sans+Semi+Condensed:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family:  'Crimson Text', serif;

}

body{
    

}

/***************************************header***********/

.header{
    background-color:white;
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 95px;
    padding: 5px 5%;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1000;

}

/*****************************LOGO*************/

header .logo{
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
}
.header .logo img{
    height: 100px;
    width: auto;
    transition: all 0.3s;
    border: none;
    border-radius: 50px;
}

.header .logo img:hover{
    transform: scale(1.2);

}

.header .overlay-content img{
    height: 60px;
    width: auto;
    transition: all 0.3s;
    cursor: pointer;
    margin: auto;
    
   
}
.header .overlay-content img:hover{
    transform: scale(1.2);
}


.header .nav-links{
    list-style: none;
   flex-grow: 1;
   margin-left: 300px;

  


}
.header .nav-links li{
    display: inline-block;
    padding: 0 15px;
    

}
.header .nav-links li:hover{
   transform: scale(1.1);
}
.header .nav-links a{
    font-size: 16pt;
    color:#666;
    font-family: 'Poppins', sans-serif;
    
    
    
}
.btn button{
    font-family: Arial, Helvetica, sans-serif;
}
.header .nav-links li a:hover{
    color: orange;

}
.menu-vertical{
    position: absolute;
    display: none;
   list-style: circle;
    width: 400px;
    color: white;
    font-size: 15pt;
    background-color:white

}
.nav-links li:hover .menu-vertical{
    display: block;
   

}
.menu-vertical li :hover{
    color: white;
}
.nav-links .menu-vertical li a{
    display: block;
    padding: 5px 5px;
    color: orange;
    text-decoration: none;
    font-size: 20px;
    list-style: circle;

}
.nav-links .menu-vertical li a:hover{
    color: orange;
}

.menu{
    display: none;
}

.header .btn button{
  
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: none;
    border-radius: 20px;
    padding: 5px 20px;
    background:#f0f0f0;
    color:#000000

}
.header .menu button{
    margin-left: 20px;
    font-weight: 700;
    color: white;
    padding: 9px 25px;
    background:orange;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    font-family: 'Poppins', sans-serif;
}
.header .btn button:hover
{  background-color: #25D366;
  color: white;
  
  transform: scale(1.1);}
.header .menu button:hover{
    background-color: whitesmoke;
    color :orange;
    transform: scale(1.1);

}
@media screen and (max-width: 980px){
    .nav-links, .btn{
    display: none;
}
.menu {
    display: inherit;
}

}



/*****************************************Nav***************************/

.header a{
    text-decoration: none;

}
.header .overlay{
  padding-top: 5px;
  padding-bottom: 10px;
    height: auto;
    width: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color:white ;
    overflow: hidden;
    transition: all 0.3s ease 0s;
}
.header .overlay .overlay-content{
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.header .overlay a{
   margin: auto;
    font-size: 20px;
    display: block;
    transition: all 0.3s ease 0s;
    font-weight: 300;
    color: orange;
}
.header .overlay a:hover,
.header .overlay a:focus{
    color: rgb(77, 65, 42);
}
.header .overlay .close{
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 65px;
}
@media screen and (max-height:450px){
    .header .overlay a{
        font-size: 20px;
    }

.header .overlay .close{
    font-size: 40px;
    top: 15px;
    right: 35px;
}
}

/**********************************************BODY*********************************/
/***************************INDEX**************/
.limpieza{                                                            
   
    background-image: linear-gradient(rgba(35, 47, 77, 0.75), rgba(105, 75, 43, 0.75)),
    url(iconos/imagen1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 485px;
    width: 100%;
    display: flex;
	 justify-content: center;
	flex-direction:column;
	padding-bottom: 78px;
	align-items: center;
	
	
}

.limpiezas{
	
    text-align: center;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
   justify-content: center;
   background-image: linear-gradient(rgba(35, 47, 77, 0.75), rgba(105, 75, 43, 0.75));
   padding-bottom: 50px;
   margin-top: 85px;
   padding-top: 50px;
   
  }

.limpiezas h1{
    font-size: 25pt;
    color: #fbfbfb;
   padding-top: 20px;
   padding-bottom: 1px;
   font-family: 'Merriweather Sans', sans-serif; 
    
}
#nombre{
  font-family: 'Archivo Black', sans-serif;
 color: #fbfbfb;
 text-align: center;
 font-size: 75px;
 
 
  
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s, transform 1s;
  
 
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
  
}


    .empresa {
    font-size: 50px;
   
    }
 
    .empresa p{
      font-size: 30pt;
      color: #fbfbfb;
      text-align: center;
      font-family: 'Bree Serif', serif;
    }
 #descrip{
      color:#ffb677;
      margin-top: 10px;
      font-size: 20pt;
    }
/*
    @media screen and (max-width:800px){
        .empresa h2{
         
         font-size: 28px;
        
        }
        
    }
  */

    
  
    
    /*********************************BOTONES************************************/
    .contacto{
      display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    text-align: center;
        
      
  }
  .contacto a{
    text-decoration: none;
    padding: 15px 25px;
    font-size: 1.4rem;
    margin: 10px;
	  text-align: center;
    font-family: 'Bree Serif', serif;
    
    
  }
  .boton1{
    background: white;
    color:#F2913D;
    border-radius: 50px;
    transition: transform 0.3s ease;
 }
 .boton1:hover{
    transform: translate(-8px, -8px);}

 .boton2{
   background: rgb(77, 231, 77);
    color: white;
    border-radius: 50px;
    transition: transform 0.3s ease;
    text-align: center;
  
 }
 .boton2:hover{
    transform: translate(-8px, -8px);}
    @media (max-width: 768px) {
      .limpieza {
		   padding-top: 50px;
          height: 300px; /* Reducir la altura para dispositivos más pequeños */
      }
  
      .limpiezas {
        padding-top: 25px;
          padding-bottom: 25px;
          height: 40px;
		  text-align: center;
         
          /* Ajustar el margen superior */
      }
  
      .limpiezas h1 {
          font-size: 15px;
		  padding-bottom: 10px;
          /* Reducir el tamaño de fuente para dispositivos más pequeños */
      }
  
      #nombre {
          font-size: 40px; /* Reducir el tamaño de fuente para dispositivos más pequeños */
          margin-top: 22px;
      }
      .empresa p{
        font-size: 20px;
      }
      #descrip{
        font-size: 17px;
       
      }
      .contacto{
        flex-direction: column;
        padding-top: 10px;
      }
      .contacto a{
        padding: 7px 40px;
		  font-size: 17PX;

      }
  }
    /*
    @media (max-width: 768px) {
      .limpieza {
        height: 300px; /* Ajusta la altura para tabletas 
      }
      .limpiezas {
        height: 30px; /* Ajusta la altura para tabletas */
        /* Otros estilos específicos para tabletas 
      }
      .empresa h2 {
        font-size: 40px; /* Ajusta el tamaño de fuente para tabletas */
        /* Otros estilos específicos para tabletas 
      }
      /* Agrega estilos adicionales para tabletas aquí 
    }/*
    
    /* Media Query para dispositivos móviles (ejemplo: 480px) */
    /*
    @media (max-width: 480px) {
      .limpieza {
        height: 200px; /* Ajusta la altura para dispositivos móviles 
      }
      .limpiezas {
        height: 20px; /* Ajusta la altura para dispositivos móviles 
        Otros estilos específicos para dispositivos móviles 
      }
      .empresa h2 {
        font-size: 30px; /* Ajusta el tamaño de fuente para dispositivos móviles 
        /* Otros estilos específicos para dispositivos móviles 
      }
      /* Agrega estilos adicionales para dispositivos móviles aquí 
    }
*/
 /*@media screen and (max-width: 600px) {
      .limpieza {
        height: 600px;
      }

      .limpiezas h1 {
        font-size: 24pt;
      }

      .empresa h2 {
        font-size: 40px;
      }

      .empresa h3 {
        display: none;
        font-family: 'Archivo Black', sans-serif;
      }
      .empresa p {
      font-size: 1px;
      }

      .empresa h4 {
        font-size: 14pt;
      }

      .empresa h5 {
        font-size: 14pt;
      }

      .contacto a {
        padding: 10px 20px;
        font-size: 1rem;
       
      }
      .contacto{
        margin-top: 0px;
        margin-bottom: 10px;
      }
      .boton1{
        display: none;
      }
    
    }
/******************************SERVICOS**************************************/
     .servicios{
       display: flex;
       flex-flow: wrap;
       justify-content: center;
    background:#ff9800;
       width: 100%;
       padding: 20px 0;
      }

       
    
        .limpiamos{
            flex-basis: calc(25% - 1rem);
            margin:0,5rem;
            text-align: center;
            color: white;
  
             
        }
       .limpiamos figure{
        margin-bottom: 10px;
       }
       .limpiamos img{
        max-width: 20%;
        height: auto;
       }

        .limpiezade h5 {
        font-size: 16px;
        margin:0;
        font-family: 'Merriweather Sans', sans-serif;
        padding-bottom: 0,10rem;
        
      
    }
    @media screen and (max-width: 768px) {
        .limpiamos {
            flex-basis: calc(50% - 1rem);
          }
    
        .limpiezade h5 {
          font-size: 14px;
        }
        .servicios {
            padding: 10px 0
        }
      }

      /****************************TARJETAS***********************************/
      .tarjetas {
        background-color: rgb(86, 80, 80);
      }
      .container {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 10px;
        max-width: 1200px;
        flex-wrap: wrap;
        margin: 0 auto;
      }
      .card {
        flex-basis: calc(25% - 20px);
        background-color: whitesmoke;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.25s, box-shadow 0.25s;
        margin-bottom: 0;
      }
      .card:hover {
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(-3%);
      }
      .card img {
        max-width: 100%;
        height: auto;
      }
      .card h3 {
        font-weight: bold;
        color: orange;
        margin-top: 10px;
        text-align: center;
      }
      .card p {
        font-size: 16px;
        line-height: 1.6;
        margin: 10px;
        display: block;
        text-align: justify;
    
      }
      .card .toggle-button{
        display: none;
      }
      
      .card a {
        color: rgb(64, 238, 64);
        text-decoration: none;
        text-align: center;
        display: block;
        font-weight: bold;
        transition: background-color 0.25s;
        padding: 10px;
      }
      .card a:hover {
        background-color: rgba(64, 238, 64, 0.1);
      }
      @media screen and (max-width: 768px) {
        .container {
          flex-direction: column;
          align-items: center;
        }
        .card {
          flex-basis: calc(100% - 20px);
          margin-bottom: 20px;
        }
        .card p{
            display: none;
        }
        .card .toggle-button {
            display: block;
            background-color:rgb(244, 223, 184);
            color: white;
            border: none;
            padding: 10px;
            width: 100%;
            text-align: left;
            cursor: pointer;
            text-align: center;
          }
          .card.active p {
            display: block;
          }
        }
        .tarjeta-container{
          display: flex;
    justify-content: wrap; /* Espacio igual entre las tarjetas */
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;

        }
        .tarje {
          background-color: #fff;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 20px;
          margin: 20px;
          width: 700px;
          max-width: 100%;
          
          
          height: auto; /* Altura de 300px */
          overflow: hidden;
          margin-right: 10px; /* Para que el contenido no se desborde */
      }
      
      .tarje img {
          width: 100%;
          max-height: 300px;
          margin-bottom: 10px;
          
      }
      .tarje h4{
        text-align: left;
        color:#ff9233;
        font-family: 'AR One Sans', sans-serif;
font-family: 'Poppins', sans-serif;

      }
      .tarje p{
        text-align: left;
        font-family: 'Poppins', sans-serif;
font-family: 'Sofia Sans Semi Condensed', sans-serif;
padding-top: 7px;
      }
      @import url('https://fonts.googleapis.com/css2?family=AR+One+Sans&family=Poppins:wght@600&display=swap');
      
      .detalle {
          display: none;
          
          padding-top: 7px;
      }.xx
      
       {
          background-color:#ddd7d2;
          color: #fff;
          border: none;
          padding: 5px 10px;
          border-radius: 3px;
          cursor: pointer;
          margin-top: 7px;
          text-align: left;
      }
      
      .xx:hover {
          background-color: #0056b3;
      }
      @media (max-width: 768px) {
        .tarjeta-container {
          display: flex;
          flex-direction:column;
          align-items: center; /* Cambiamos la dirección del flexbox a column */
        }
    
        .tarje {
          width: 100%; /* Ocupa todo el ancho disponible en dispositivos móviles */
          margin: 10px 0; /* 10px arriba y abajo, 0 en los lados para separar las tarjetas */
        }
      }
  
     /************************************************ARTICULO SECCION PRESENTACIO***************/
  
    .articullo{
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-color: whitesmoke;
      max-width: 100%;
      margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 600px;
    }
    .arti1{
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-image: linear-gradient( rgba(0, 23, 81, 0.75), rgba(255, 255, 255, 0.75));
      max-width: 100%;
      margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
     }
    .articulo{
      max-width: 100%;
      padding: 20px;
      width: 100%;
      display: flex;
    flex-wrap: wrap;
    align-items: center; /* Centra verticalmente */
    justify-content: center
      
        }
.arti2{
  max-width: 100%;
  padding: 20px;
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  

}
    .articulo img{
       max-width: 50%;
      max-height: 70%;
    border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   
       
        
    }
 .arti2 img{
    max-width: 50%;
    max-height: 60%;
  border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
    .articulo1{
      flex-basis: calc(50% - 20px);
      font-size: 20pt;
       margin-top: 10px;
       padding: 20px;
      
      }
 .arti3{
        flex-basis: calc(50% - 20px);
        font-size: 20pt;
         margin-top: 10px;
         padding: 20px;
      }

      @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=swap');
       .articulo1 p{
        padding: 0;
        list-style-type: none;
        font-family: 'Outfit', sans-serif;
        font-weight:900;
        text-align: center;
        font-size: 25pt;
        color: #ff9233;
        padding-bottom: 30px;
        
        
    }
 .arti3 p{
      padding: 0;
      list-style-type: none;
      font-family: 'Outfit', sans-serif;
      font-weight:900;
      text-align: center;
      font-size: 25pt;
      color: #ff9233;
	 padding-bottom:30px;
      
    }
    
.articulo1 li {
      font-family: 'Outfit', sans-serif;
      color: #0a141d;
      font-size: 15pt;
      font-weight: 400;
     text-align:left;
	list-style: inside;
     
     
     
      
          }
 .arti3 li{
            font-family: 'Outfit', sans-serif;
      color: #000080;
      font-size: 15pt;
      font-weight: 600;
     text-align: center;
     list-style: none;
          }
          .conta{
            flex-basis: 100%;
            margin-top: 30px;
            text-align: center;
		
            }
          .conta a{
            text-decoration: none;
            padding: 15px 25px;
            font-size: 1.4rem;
			  font-family: 'Bree Serif', serif;
            border-radius: 50px;
            display: inline-block;
            color: white;
            background-color: rgb(77, 231, 77);
            transition: transform 0, 3s ease;
        }
        
        .conta a:hover{
            transform: translate(-5px, -5px);
        
          }
          @media (max-width: 768px) {
            /* Cambia a columna en dispositivos móviles */
            .articullo {
              flex-direction: column;
              align-items: center;
              height: auto;
            }
			   .arti1{
              flex-direction: column;
              align-items: center;
              height: auto;
            }
            .articulo1{
              font-size: 20pt;
       margin-top: 5px;
       flex-basis: calc(70% - 0px);
       padding: 0px;
       text-align: center;

            }
			    .arti3{
              font-size: 20pt;
              margin-top: 5px;
              flex-basis: calc(70% - 0px);
              padding: 0px;
              text-align: center;
            }
            .articulo1 li{
              text-align: center;
              font-size: 13pt;
            }
			   .arti3 li{
              font-size: 13pt;
			padding-top:5px;
            }
            .articulo1 p{
            font-weight:800;
            text-align: center;
            font-size: 18pt;
            color: #ff9233;
            

          }
			   .arti3 p{
            font-weight:800;
            text-align: center;
            font-size: 17pt;
			line-height: 25px;
            padding-bottom: 10px;
				   
      
           }
          .conta{
            margin-top: 10px;
            margin-bottom:10px;
			  padding-bottom: 15px;

          }
          .conta a{
            padding: 7px 20px;
            font-size: 13pt;
          }
          .articulo img{
            max-width: 70%;
      max-height: 900%;
          }
			    .arti2 img{ 
            max-width: 70%;
            max-height: 900%;;
          }
        }
   .kku{
    background-color: whitesmoke;}

    .articulot{
    
      display: flex;
  background-image: linear-gradient(rgba(0, 23, 81, 0.75), rgb(254, 163, 58));
      color: #f0f0f0;
      max-width: 95%;
      max-height: 100%;
      margin: 0 auto;
      justify-content: space-between;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 100px;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 30px;
      padding-top: 30px;
    }

  .articulot img{

    max-width: 40%;
    margin-top: 10px;
    margin-bottom: 10px;
    max-height: 70%;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
  }
  
        .articulot1{
        
          flex-basis: calc(50% - 20px);
          font-size: 16pt;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 20px;
          padding-bottom: 10px;
          color: white;
          list-style: none;

        }
       
        @import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
        
        @media screen and (max-width: 768px) {
          .articulot {
            flex-direction: column;
            border-radius: 10px/* Cambiar la dirección de los elementos en dispositivos móviles */
          }
      
          .articulot img{
        
            max-width: 100%; /* Aumentar el tamaño de la imagen en dispositivos móviles */
            max-height: auto;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
            margin-top: 5px;
           /* Ajustar la altura automáticamente */
          }
      
          .articulot1 {
            flex-basis: 100%;
            padding-left: 0px;
            padding-right: 0px; /* Ocupar todo el ancho en dispositivos móviles */
          }
          .articulot1 li{
            font-family: 'Outfit', sans-serif;
            color:#f0f0f0;
            font-size: 15pt;
            font-weight: 200;
          }
        }


           
         .articulo4{
      text-align: center;
      background:#ff9233;
      padding-top: 20px;
      padding-bottom: 10px;
      margin-bottom: 30px;
      margin-top: 30px;
    }
    .articulo4 h2, h3, h4{
    
      font-size: 20pt;
      color:white;
      font-family: 'Merriweather Sans', sans-serif;
      
      
    }
  

    .experiencia{
        color: #F2913D;
    }
  
  
  @media screen and (max-width: 767px) {
    .container {
      justify-content: center;
    }
  
    .card {
      flex-basis: calc(50% - 20px);
    }
  
  
}

  
  /*************************************SECTION CARRUSEL**************************/
  .carrusel-container {
    position: relative;
    overflow: hidden;
  }
.carrusel{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
   
    overflow: hidden;
  }
  
  .carrusel-items {
  display: flex;
  animation: desplazar 50s linear infinite;
  }
  
  .carrusel-item {
    min-width: 300px;
    max-width: 300px;
    height: 250px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
   
  }
  
  .carrusel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .carrusel-item:hover {
    transform: scale(1.05);
  }
  @keyframes desplazar {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%); /* Va hacia la izquierda */
    }
    100% {
        transform: translateX(0); /* Vuelve hacia la derecha */
    }
}


  .carrusel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.scroll-left,
.scroll-right {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin: 0 10px;
}



  @media (max-width: 768px) {
    .carrusel {
      margin-bottom: 10px;
    }
    
    .carrusel-item {
      min-width: 250px;
      max-width: 250px;
      height: 150px;
    }
  }
  .bod{
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    height: auto;
    margin: 0;
  }
  .carrd {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 100%;
    width: 100%;
    text-align: left;
}

.carrd-header {
    background-color:#F2913D;
    color: #fff;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.carrd-body {
    padding: 20px;
}

h1 {
    font-size: 24px;
    margin: 0;
}

p {
    font-size: 16px;
}

@media (max-width: 768px) {
    .carrd {
        max-width: 90%;
    }
}




  
  /********************************************NOSOTROS.PHP*******************/
 
  .servise {
    margin-top: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(43, 59, 96, 0.75), rgba(105, 75, 43, 0.75)),
     url('iconos/wepik-export-20230825032121bzZ8.png'),
     url('iconos/wepik-export-20230825032903vw3Q.png');
    background-repeat: no-repeat, no-repeat;
    background-size: 50% 500px, 50% 500px;
    background-position: left top, right top;
    min-height: 500px;
    width: 100%;
  
  }
  .tar {
    width: 100%; /* Anulamos el máximo ancho */
    height: 400px; /* Fijamos la altura en 300px */
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    text-align: center;
    margin-bottom: 50px;
   
  }
  .logs {
    flex: 0 0 30%; /* Divide el espacio en un 50% para ambos divs */
    box-sizing: border-box; /* Asegura que el ancho incluya padding y bordes */
    padding: 10px;
    height: 100%; /* Añade espacio entre los elementos */
  }
  .logs img {
    /* Asegura que la imagen ocupe el 100% del ancho del div .logs */
    height: 400px; /* Asegura que la imagen ocupe el 100% de la altura del div .logs */
     object-fit: cover;/* Ajusta el tamaño de la imagen para llenar el div .logs */
  }

  .contenido {
    flex: 1; /* Divide el espacio en un 50% para ambos divs */
    box-sizing: border-box; /* Asegura que el ancho incluya padding y bordes */
    padding: 10px;
    padding-right: 50px;
    padding-top: 70px;
     /* Añade espacio entre los elementos */
  }
  .contenido p{
    font-size: 20px;
  }

  /* Añade estilos adicionales según sea necesario para hacerlo responsive */
  @media (max-width: 768px) {
    .tar {
      flex-direction: column;
      margin-bottom: 20px;
      height: auto;
      text-align: center; /* Cambia a una disposición de columna en pantallas más pequeñas */
    }
  }









  
  
  .contast{
    text-align: center;
    /* Ajusta la altura según tus necesidades */
  }
  
  
  .servise h1 {
    color: white;
    font-size: 2em;
    background-color: rgba(0, 0, 0, 0.5);
   padding: 10px;
  }



/* Estilos para la sección "pantalla-dividida" */
.pantalla-dividida {
  margin-top: 10px;
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: stretch;
    justify-content: center; /* Alinear elementos verticalmente */
    background-color: white;
    
    
}

.izquierda {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
     /* Centrar verticalmente */
}

.izquierda h5 {
    font-size: 24px;
    margin-bottom: 15px;
}

.izquierda p {
    font-size: 18px;
    line-height: 1,5;
    margin: 15px 0;
    font-family:  Arial, Cambria Cambria o Times New Roman;
}

.conta2 {
    text-align: center; /* Alinear a la derecha */
    margin-top: 15px;
}

.conta2 a {
    text-decoration: none;
    padding: 8px 15px;
    font-size: 20px;
    margin: 2px;
    border: 1px solid rgb(77, 231, 77);
    border-radius: 50px;
    color: white;
    transition: transform 0.3s ease;
}

.conta2 a:hover {
    transform: translate(-3px, -3px);
    background-color: rgb(77, 231, 77);
    color: white;
}

.boton4 {
    background: rgb(77, 231, 77);
    color: white;
    border-radius: 50px;
    transition: transform 0.3s ease;
}

.boton4:hover {
    transform: translate(-8px, -8px);
}
 .error {
            color: red;
            display: none;
        }
        .success {
            color: green;
            display: none;
        }

.derecha {
    flex: 1; /* Ocupar espacio disponible */
   justify-content: center;
   padding-top: 100px;
  
    
}
.derecha img{
  height: 100vh;
;
}
    .todo h5{
        text-align: center;
    }
    .descripciones{
        background-image:url(iconos/PUNTUALIA.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
    display: flex;
    text-align: justify;
    justify-content: left;
    }
    .descripciones p{
    padding-top: 30px;
    }
  .servicioss{

        display: flex;
        flex-flow: wrap;
       margin-top: 85px;
        justify-content: center;
        background-color: white;
        height: auto;
        width: 100%;
       

    }
    @media (max-width: 768px) {
        .pantalla-dividida {
            flex-direction: column; /* Cambiar a una columna */
        }
        
        .derecha {
        display: none;

  
            
        }
        
        
        
        .izquierda {
            background: linear-gradient(rgba(23, 31, 51, 0.75), rgba(70, 50, 29, 0.75)), url(iconos/PUNTUALIA.jpg);
            background-size: cover;
            background-position: center bottom;
            text-align: left; /* Alinear texto a la izquierda */
            color: white;
            text-align: center;
            font-size: 20px;
        }
        
        .izquierda h5 {
            font-size: 20px; /* Ajustar el tamaño de fuente */
        }
      }.izquierda p{
        font-size: 24px;
      }
    
    /******************************CONTACTANOS.PHP********************/
    /*********************section formularios**************/
    
  .formularios {
  background-image: linear-gradient(rgba(43, 59, 96, 0.75), rgba(105, 75, 43, 0.75)), url(iconos/1920-close-up-of-cleaning-man-working-in-shop-clean-on-wood-table.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 500px;
 min-height: 500px;
  display: flex;
  align-items: center;
  margin-top: 86px;
  align-items: center;
  justify-content: center;/*  margin-top: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('iconos/wepik-export-20230825032121bzZ8.png'), url('iconos/wepik-export-20230825032903vw3Q.png');
  background-repeat: no-repeat, no-repeat;
  background-size: 50% 500px, 50% 500px;
  background-position: left top, right top;
  min-height: 500px;*/
 
  
 
}

.intro {
  text-align: center;
}

.intro h2 {
  color: white;
  text-align: center;
  padding-top: 100px;
  font-size: 45px;
}

.contactos {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background-color: #F2913D;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
}

.contactos h4 {
  font-size: 24px;
  margin-top: 20px;
}

.contact {
  color: white;
  text-align: center;
  font-size: 30px;
  padding-top: 80px;
}

.contact p {
  font-size: 20px;
}

form {
  padding: 20px;
  background: #F2913D;
  border-radius: 15px;
  width: 100%;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.form-content {
  display: flex;
  flex-direction: column;
}

label {
  color: white;
  font-size: 18px;
  margin-bottom: 5px;
}

input,
textarea {
  padding: 15px;
  background-color: azure;
  border: 0;
  outline: none;
  border-radius: 15px;
  color: black;
  font-size: 16px;
  margin-bottom: 10px;
}

::placeholder {
  color: rgb(124, 124, 124);
  font-size: 16px;
}

.beten {
  padding: 17px 13px;
  width: 180px;
  align-self: center;
  text-transform: capitalize;
  color: black;
  font-size: 16px;
  cursor: pointer;
  background: orange;
  border: none;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.beten:hover {
  transform: scale(1.05);
}
@media (max-width: 768px) {
    .intro h2 {
        padding-top: 60px;
        font-size: 35px;
    }

    .contact {
        font-size: 24px;
        padding-top: 30px;
    }

    .contact p {
        font-size: 16px;
    }

    form {
        padding: 15px;
    }

    label {
        font-size: 16px;
    }

    input,
    textarea {
        padding: 10px;
        font-size: 14px;
    }

    .beten {
        padding: 12px 10px;
        width: auto;
        font-size: 14px;
    }
}
/**********************************footer**************************************/


.pie-pagina{
    background-color: #0a141d;
    color: white;
    text-align: center;
    padding: 40px 0;
  }
  .grupo-1 {
    max-width: 1200px;
    margin: auto;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajuste de columnas automáticas */
    grid-gap: 30px;
    padding: 30px 0;
}
   .grupo-1 .box  h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 20px;
}

 .red-social a{
    display: inline-block;
    text-decoration: none;
    width: 35px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    margin-right: 10px;
    background-color: #0d2033;
    text-align: center;
    transition: all 300ms ease; transform: 300ms ease;
}
.red-social a:hover{
    color: aqua;

}
 .grupo-2{
    background-color: #0a1a2a;
    padding: 15px 10px;
    color: #fff;
}
 .grupo-2 small{
    font-size: 14px;
}
@media (max-width: 768px) {
    .grupo-1 {
        grid-template-columns: 1fr; /* Cambiar a una sola columna */
        grid-gap: 15px;
        padding: 15px 0;
    }

    .grupo-1 .box {
        text-align: center;
    }

    .red-social {
        margin-top: 10px;
    }
}

.todo{
        display: flex;
       justify-content: space-around;
        flex-flow: wrap;
        background-image: linear-gradient(rgba(5, 7, 12, 0.75), rgba(5, 7, 12, 0.75)),
    url(iconos/PUNTUALIA.jpg);
    background-repeat: no-repeat;
    background-position: center;
        height: auto;
        width: 100%;
        color: whitesmoke;
        
        
        
    }


/*<section class="tarjetas">
    <articulo class="container">
        <div class="card">
            
                <img src="iconos/comunidad3.jpg" alt="servicio de limpieza de comunidades">
                <div class="tarjeta">
          
                <h3>Limpieza de comunidades</h3>
                <button class="toggle-button" aria-label="Mas detalles sobre el servicio de limpieza de comunidades">Ver más</button>
                <p>Nuestra especialidad, nuestra empresa hace 10 años 
                    comenzos brindando servicios de limpieza a fincas de 
                    Barcelona comenzando con 1 y ahora contamos con mas de
                     100 fincas que pueden avalar nuestro trabajo, te ofrecemos 
                     calidad de personal nos adecuamos a tus requerimientos
                     productos, utillajes de calidad y precio justo </p>
                     
                     <a href="Contactanos.php">Solicita un presupuesto</a>
                    
                </div>

        </div>
        <div class="card">
        <img src="iconos/conser.jpg" alt="Servicio de cosergeria">
           <div class="tarjeta">
            <h3>Servicio de Consergeria</h3>
            <button class="toggle-button" aria-label="Mas detalles sobre el servicio de limpieza de comunidades">Ver más</button>
             <p>Realizamos servicios tanto de suplencia del cpnsege titular o conserge fijo, te ofrecemos personal capacitado y garantia de un buen desempeño contamos con servicio diurno o nocurno proporcionamos todos los materiales y recursos necesarios para un buen desempeño contamos con la experiencia
                para brindarte un buen servicio y no tengas que preocuparte de nada</p>
                <a href="Contactanos.php">Solicita un presupuesto</a>
       
           </div>
        </div>
        <div class="card">
           <img src="iconos/final.jpg"alt="limpieza finales de obra">
           <div class="tarjeta">
           <h3>Limpieza de finales de obras</h3>
           <button class="toggle-button" aria-label="Mas detalles sobre el servicio de limpieza de comunidades">Ver más</button>
            <p>Contamos con la experiencia para realizar la limpieza de cualquier tipo de final de obra, logramos una logistica para adecuarnos a tus tiempos, te ofrecemos calidad de materiales de trabajo para lograr quitar todo tipo de manchas y polvo, contamos con personal capacitado
                y con experiencia. Te garatizamos nuestro trabajo y te brindamos un precio justo</p>
                     <a href="Contactanos.php">Solicita un presupuesto</a>
           </div>
          

        </div>
        <div class="card">
           <img src="iconos/IMG_1168.jpg" Limpieza de pisos y departamentos>
           <div class="tarjeta">
                <h3>Limpieza de pisos y multiservicios</h3>
                <button class="toggle-button" aria-label="Mas detalles sobre el servicio de limpieza de comunidades">Ver más</button>
                <p>Realizamos diferentes tipos de servicio de limpieza Pisos,Cristales, oficinas,despachos, tiendas y lo que nos requieras, contamos con experiencia, productos de calidad, calidad de personal, 
                seguridad y garantia nos adecuamos a tu tiempo te brindamos un precio justo</p>
                     <a href="Contactanos.php">Solicita un presupuesto</a>
           </div>
            </div>

.



</section>*/
/*************************SERVICIOSSSSSS**********/
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 25vh;
  margin: 0;
 margin-bottom: 50px;
  padding-bottom: 50px;
  padding-top: 100px;
}

.centered-content article {
  text-align: center;
}

.centered-content ul.horizontal-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra horizontalmente */
}

.centered-content ul.horizontal-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 20px;/* Espacio entre filas */
  text-align: center;
}

.centered-content ul.horizontal-list li img {
  font-size: 24px;
}

.centered-content ul.horizontal-list img {
  max-width: 75px;
}
.centered-content ul.horizontal-list li p{
  max-width: 25vh; /* Igualar ancho al de la imagen */
  text-align: justify;
  margin-top: 10px;
  color: #000000;
  
}
.centered-content ul.horizontal-list li h4{
  color: #000000;
  font-weight: 400;
  font-size: 20px;
  
}
@media (max-width: 768px) {
  .centered-content{
    min-height: 15vh;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 20px;
    justify-content:space-around;
  }
  .centered-content ul.horizontal-list img {
    max-width: 65px;
  }
  .centered-content ul.horizontal-list li p{
    max-width: 20vh;
}
}
@media (max-width: 450px) {
  .centered-content ul.horizontal-list li p{
 display: none;
}
}
.serbise {
   margin-top: 85px;
   width: 100%;
}
.serbise .containert {
  width: 100%;
  height: 400px;
  display: flex;
  background-color: #F2913D;
}
.serbise .containert .left-half,
.serbise .containert .right-half {
  width: 50%; /* Cada mitad ocupa el 50% del ancho del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
}
.serbise .containert .left-half p{
  color: white;
  font-size: 50px;
  font-family: 'Archivo Black', sans-serif;
  color: #fbfbfb;

}

.serbise .containert .right-half img {
  width: 100%; /* La imagen ocupa todo el ancho de la mitad izquierda */
  height: 400px; /* Mantener la proporción de la imagen */
}
#animated-text {
  opacity: 0; /* Inicialmente oculto */
  position: relative;
  right: -100%; /* Empuja el texto fuera de la pantalla por la derecha */
  transition: all 1s ease-in-out; /* Transición suave para cuando el texto se mueva */
}

#animated-text.show {
  opacity: 1; /* Hace visible el texto */
  right: 0; /* Mueve el texto a su posición original */
}
      .exelente{
      text-align: center;
      background-color:  #082e55;
      margin-top: 20px;
    padding-top: 10px;
    
    padding-bottom: 10px;
      margin-bottom: 20px;
     
    }
    .exelente p{
      font-size: 20pt;
      color:rgb(250, 250, 250);
      font-family: 'Merriweather Sans', sans-serif;
      
      
    }




.services {
  
  padding: 20px;
  background:#fbfbfb;
}

.service-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.service-item {
  background-color:white;
  
  margin: 20px;
  padding: 15px;
  width: 350px;
  text-align: center;
 

  
}


.asa {
  margin: 10px;
  padding-top: 50px;
   margin-top: 0;/* Espacio entre párrafos */
  font-family: 'Merriweather Sans', sans-serif;
  color: white;
  font-size: 20px;

}
.asa li{
  margin-top: 10px;
  font-family: 'Merriweather Sans', sans-serif;
}


.nunca{
  background-image: url(iconos/concepto-limpiar-ventana.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size:50% 500px;
  height: 400px;
  width: 100%;
  display: flex;
  
  flex-direction: column;
}
.nuncat
 h1{
text-align:center;
color: white;
  font-size: 2em;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  display: flex;
align-items: start;

}


@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
.service-item img {
  max-width: 30%;
  height: auto;
  margin-bottom: 10px;
 
}

.service-item p {
  font-size: 20px;
  color: #0a1a2a;
  font-family: 'Rubik', sans-serif;
  text-align: center;
  
  
}

.description {
  display: none;
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  text-align: left;
  padding-left: 20px;
  list-style-type: disc;
  font-family: Arial, Helvetica, sans-serif;

}
.description li{
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
}
.ula{
  text-align: center;
  list-style: none;
}
.uta{
text-align: center;
list-style: none;}
.description.expanded {
  display: block;
}


.show-description {
  background-color:#ff9233;
  color: #fff;
  border: none;
  padding: 5px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
  text-align: end;
  font-size: 15px;
  font-family: 'Rubik', sans-serif;
  text-align: left;
  
}


/*seccion galeria*********************/
/*  .carrusel-container {
    position: relative;
    overflow: hidden;
  }
.carrusel{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
   
    overflow: hidden;
  }
  
  .carrusel-items {
  display: flex;
  animation: desplazar 50s linear infinite;
  }
  
  .carrusel-item {
    min-width: 300px;
    max-width: 300px;
    height: 250px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
   
  }
  
  .carrusel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .carrusel-item:hover {
    transform: scale(1.05);
  }
*/
.gallery {
  display: flex; /* Cambiamos de grid a flex */
  flex-wrap: nowrap; /* Para evitar el salto de línea */
  overflow-x: auto; /* Agregamos scroll horizontal en caso de muchas imágenes */
  padding: 20px;
  
}

.image-container {
  min-width: 300px;
  max-width: 300px;
  height: 250px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container:hover {
  transform: scale(1.1);
}



/* Estilos para el texto dentro de la tarjeta */


/* Estilos para la imagen */

 /***************
 <H5>Puntualia<br>
 General i manteniments</h5>
<P>Somos una empresa que se estableció en el año 1000 con la firme misión de brindar servicios de limpieza de alta confiabilidad y calidad.
Iniciamos como un negocio familiar, atendiendo no más de tres comunidades de propietarios y ocasionalmente realizando limpiezas de pisos y finales de obra. Gracias a las recomendaciones apreciadas de nuestros valiosos clientes, nuestro crecimiento ha sido constante y, con el tiempo, se ha vuelto exponencial.

Esta evolución nos ha otorgado una valiosa experiencia, que ahora ponemos a tu disposición para ofrecerte un servicio de la más alta calidad. Nuestro enfoque abarca una amplia gama de soluciones, desde servicios de limpieza y mantenimiento hasta conserjería y control de accesos en estacionamientos, centrados en las comunidades de propietarios en Barcelona. Además, extendemos nuestra experiencia tanto a particulares como a empresas, proporcionando servicios de limpieza para oficinas, comercios y hogares.

En cada tarea que emprendemos, aplicamos la destreza acumulada a lo largo de los años para garantizar un desempeño excepcional. Nuestra trayectoria habla de nuestro compromiso con la satisfacción del cliente y la entrega de resultados sobresalientes en cada proyecto. Estamos listos para brindarte un servicio que supere tus expectativas y refleje la dedicación y experiencia que hemos cultivado a lo largo de nuestra historia
</p>
*/