@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

body{
    background-color: #eee7e7;
}
h1{
    margin-bottom: 20px;
}
p{
    margin-bottom: 30px;
}

h2{
    margin-bottom: 20px;
    margin-top: 10px;
}

h3{
    margin-bottom: 20px;
    margin-top: 10px;
}

h4{
    margin-bottom: 20px;
}

h5{
    margin-bottom: 20px;
}

.float {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    bottom: 30px;
    right: 20px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    z-index: 999;
}

.fa-whatsapp {
    font-size: 50px;
}

.float:hover {
    background-color: #1b9b4a;

}


nav{
    background:rgb(0, 0, 0);
    height: 40px;
    width: 100%;   
}
.nav2 p{
    text-align: center;
    font-size: clamp(0.1em, 1.3vw, 0.8em);
    padding-top: 20px;   
}
.navp{
    float: right;
    margin-top: -50px;
    margin-right: 20px;
    
}
.navp button{
    width: 160px;
    height: 32px;
    margin-right: 30px;
    font-size:16px;
    border-radius: 10px;
    cursor: pointer;
    background:rgba(0, 0, 0, 0.822);
    color: white;
    transition: all 0.3s ease 0s;
}
.navp button:hover{
    background: black;
    color: yellow;
    transform: scale(1.1);
}
nav .logo{
    visibility: hidden;
}
.enlace{
    position: absolute;
    padding: 7px 10px;
}
.logo{
    height: 40px;
    width: 20vw;
    margin-top: 5px;
    
    
}
nav ul{
  text-align: center;
}
nav ul li{
    display: inline-block;
    line-height: 40px;
    margin: 0 1px;
    text-transform: uppercase;
}
nav li ul{
    display: none;
    position: absolute;
    background-color:black;
    border-radius: 7px;
    width: 30vw;
    
    
}
nav li:hover > ul{
    display: block;

}
nav li ul li{
    display: block;
    min-width: 140px;
    line-height: 60px;
}
nav ul li a{
    color:white;
    font-size: clamp(0.5em, 1.1vw, 0.9em);
    padding: 4px;
    border-radius: 2px;
    text-decoration: none;
    font-family:sans-serif;
}
li a.active, li a:hover{
    background: rgb(153, 153, 153);
    transition: .5s;
}

nav li ul li a{
    font-size: 13px;
    

}
.checkbtn{
    font-size: 28px;
    color: black;
    float: right;
    line-height: 80px;
    margin-right: 45px;
    cursor: pointer;
    display: none ;
}
#check{
    display: none;
}

.principal{
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2px 3%;
    background: linear-gradient(rgb(20, 86, 117),rgb(104, 133, 146));
    background-size: cover;   
}
.principal .texto-p p{
    font-size: 17px;
}

.img-p{
    float: right;
    width: 580px;
    height: 535px;
    
   
    
    
}
.principal .texto-p{
    text-align: center;
    margin-top: 8%; 
    padding: 1px 1px;  
}
.texto-p a{
    display: flex;
    justify-content: center;
    padding: 1px 1px;
    text-decoration: none;    
}
.texto-p h1{
    font-size: 45px;
    color: white;
    text-shadow: 2px 2px rgb(0, 0, 0);
    margin-top: -50px;
}

.texto-p h4{
    font-size: 26px;
}

.texto-p h6{
    font-size: 24px;
}
.texto-p button{
    width: 50%;
    border-radius: 10px;
    cursor: pointer;
    padding: 5px 5px;
    margin-block-end:7px;
    background-color: gray;
    transition: all 0.3s ease 0s;
    color: black;

}
.texto-p button:hover{
    color: yellow;
    background-color: black;
    transform: scale(1.1);
}

.Bienvenidos .sociales1{
    text-align: center;
    

}
.fb{
    background: white;
    padding: 1px 3px ;
    border-radius: 10px;
    color: black;
    margin: 4px;
    cursor: pointer;
    transition: all 0.3s ease 0s;

    
}
.tw{
    background:white;
    padding: 1px 3px;
    border-radius: 10px;
    color: black;
    margin: 4px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.yo{
    background: white;
    padding: 1px 1px;
    border-radius: 10px;
    color: black;
    margin: 4PX;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.in{
    background: white;
    padding: 1px 3px;
    border-radius: 10px;
    color: black;
    margin: 4PX;
    cursor: pointer;

}
.fb:hover{
    background: white;
    color: blue;    
}
.tw:hover{
    color: rgb(144, 144, 252);
}
.yo:hover{
    color: red;
}
.in:hover{
    color: white;
    background: rgb(245, 99, 99);
}




h2{
    text-align: center;
    font-size: 25px;
}
.servicios{
    display: flex;
     padding: 30px 20px;
     width: 100%;
     text-align: center;

}
.servicios h2{
    font-size: 20px;
}
.servicios p{
    text-align: justify;
    padding: 2px 2px;
    font-size: 15px;
    
}

.publi{

   display: flex;
   margin: 10px 10px;
   justify-content: center;
   padding: 5px 5px;
   border-radius: 10px;
   background: rgb(196, 195, 195);
}

.publi img{
    display: flex;
    width: 100%;
    border-radius: 5px;
    text-align: center;
    
}
.publi p{
    text-align: center;
}
.servicios2{
    display: flex;
    width: 100%;
    padding: 20px 30px;
    
}
.servicios2 img{
    float: left;
    width: 300px;
    height: 300px;
    padding: 1px 1px;
    border-radius: 8px;
    margin: 10px;
}
.servicios2 p{
    text-align: justify;
    padding: 10px 10px;
    margin-right: 3px;
    font-size: 16px;
    
}
.bloque1{
    background-color: rgb(0, 0, 0);
    display: flex;
    width: 100%;
    height: 120px;
    margin-top: -30px;

}
.bloque1 h3{
    margin-top: 40px;
    font-size: 28px;
    text-shadow: 2px 2px rgb(10, 10, 10);
    color: white;
    margin-left: 15px;
}
.bloque1 button{
    height: 50px;
    width: 300px;
    border-radius: 10px;
    margin-top: 35px;
    cursor: pointer;
    margin-left: 2cm;
    background-color: rgb(158, 157, 157);
    transition: all 0.3s ease 0s;    
}
.bloque1 button:hover{
    background-color: black;
    color: yellow;
    transform: scale(1.1);
}
.fumigacion{
padding: 2px 20px;
margin-left: 20px;
margin-right: 20px;
}
.fumigacion p{
    text-align: justify;
    font-size: 15px;
    
    
}
.fumigacion img{
height: 300px;
width: 300px;
float: right;
margin-left: 1.5cm;
}
.fumigacion a{
    display: flex;
    justify-content: center;
    text-decoration: none;
    
}
.fumigacion button{
    width: 20%;
    border-radius: 10px;
    cursor: pointer;
    padding: 5px 5px;
    background-color: gray;
    color: black;
    transition: all 0.3s ease 0s;

}
.fumigacion button:hover{
    color: yellow;
    background-color: black;
    transform: scale(1.1);
}
.pie{
    background-color: rgb(185, 185, 185);
}
.header2{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

.logo img{
    width: 320px;
    
}
.section1{
    display: flex;
    justify-content: space-evenly;
    
}
.section1 div{
    display: flex;
    flex-direction: column;
}
.section1 h2{
    color: white;
    padding: 5px 0;
}
.derechos{
    text-align: center;
    background-color: white;
    font-size: 15px;
}

.section1 a{
    text-decoration: none;
    color: black;
    padding: 4px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 18px;
    
}
.section1 a:hover{
    color: blue;

}
.contactos2{
    width: 100%;
    display: flex;
}
.card{
    width: 100%;
    margin: 2px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #9e7979;
    box-shadow: 0px 1px 10px rgba(158, 132, 132, 0.2);
    cursor: default;
    transition: all 400ms ease;
    }
.card:hover{
        box-shadow: 5px 5px 20px rgba(49, 53, 49, 0.4);
        transform: translateY(-1%);
    }
    
.card .contenido1{
        padding: 16px;
        text-align: center;
    }
.card .contenido1 p{
        line-height: 1.5;
        color: rgb(15, 15, 15);
    }
.card .contenido1 h2{
        font-weight: 500;
        margin-bottom: 15px;
    }
.input-group{
        display: flex;
        flex-direction: column;
        text-align: left;
        }
 label{
            color: beige;
            font-size: 18px;
            font-weight: 100px;
            margin-bottom: 15px;
        }
 input, textarea {
            padding: 17px 26px;
            border-radius: 15px;
            margin-bottom: 10px;
            color: black;   
         }   
.contenido1 iframe{
 margin-right: 400px;
 width: 100%;
 border-radius: 7px;
            } 
.Bienvenidos{
    padding: 10px 10px;
    background: linear-gradient(rgb(20, 86, 117),rgb(104, 133, 146));
    padding-top: 20px;
    
}   

.Bienvenidos h1{
    text-align: center;
    font-size: 30px; 
    color:white;
    text-shadow: 1px 1px black;
    text-transform: uppercase;
}
.Bienvenidos h2{
    text-align: center;
    color: rgb(206, 203, 203);
    text-shadow: 1px 1px black;
}

.Bienvenidos p{
    text-align: center;
    font-size: 17px; color: white; 
    text-shadow: 1px 1px black;
}

.produc-1{
    width:100%;
    height: 50%;
    padding: 20px 100px;
    
    
   
}
.produc-1 img{
    width: 40%;
    border-radius: 15px ;
    float: left;
    margin-right: 35px;
    margin-left:20px ;
    margin-bottom: 12px;
}
.produc-1 .img-prod1{
    width: 30%;

}
.produc-1 h2{
    color:black; 
    text-align: center; 
    font-size: 25px;
    padding: 0 10px;
}
.produc-1 p{
    text-align: justify;
    font-size: 16px;
}
.produc-1 h4{
    font-size: 25px;
}
.produc-1 a{
    text-align: center;
    font-size: 18px;
    

}
.btn-prod{
    text-decoration: none;
    display: block;
    border-radius: 8px;
    width: 300px;
    height: 40px;
    padding-top: 5px;
    margin: auto;
    background-color:rgb(75, 75, 253);
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom: black; 
    font-size: 17px;  
}
.btn-prod:hover{
    background-color:black;
    color: white; 
    
}   
.productos-similares{
    display: flex;
    width: 100%;
    
}

.boton-servicios{
    text-align: center;
}
.boton-servicios a{
    display: flex;
    justify-content: center;
    padding: 5px 5px;
    text-decoration: none;  
}

.boton-servicios button{
    width: 70%;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    padding: 5px 5px;
    margin-block-end:7px;
    background-color: rgb(185, 184, 184);
    transition: all 0.3s ease 0s;   
}
.boton-servicios button:hover{
    color: white;
    background-color: black;
    transform: scale(1.1);  
}
.productos-similares2{
    display: flex;
    justify-content:space-around;
    padding-bottom: 10px;
}

.productos-similares2 img{
    width: 290px; 
    border-radius: 10px;
    margin-bottom: 5px;
    text-align: center;
}
.productos-similares2 h4{
    text-align: center;
    font-size: 16px;
     margin-bottom: 10px;

}
.link-inicio{
    display: flex;
}
.link-inicio a{
    font-size: 15px;
    text-decoration: none;
}
.link-inicio h5{
    font-size: 15px;
    color: rgba(0, 0, 0, 0.726);
}
.produc-1 .preguntas-1 h3{
    text-align: center;
    font-size: 30px;
}
.produc-1 .preguntas-1 p{
    padding: 200px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.desplegable{
    display: none;
    width: 100%;
}
.show{
    display: block;
}

.produc-1 .preguntas-1 .desagradables-btn{
    border: none;
    cursor: pointer; 
    text-align: center;
    color: blue;
    background-color: #eee7e7; 
    font-size: 17px; 
    width: 38%;
}

.produc-1 .preguntas-1 button:hover{
    color: black;
}


.video1 .video2{
 text-align: center;
}
.video2 iframe{
    padding: 5px 5px;
    margin-inline: 20px;
    margin-top: 5px;
}
.preguntas-fre{
    width: 100%;
    max-width: 900px;
    margin: auto;
    margin-top: 30px;  
}

.preguntas-fre h2{
    text-align: center;
    font-size: 25px;
    margin-bottom: 35px;
    background: black;
    color: white;
}
.acordion{
    background-color: white;
}
.acordion label{
    display: block;
    padding: 20px;
    font-size: 16px;
    background: black;
    color: white;
    cursor: pointer;
    margin-bottom: 2px;
    transition: all 300ms ease;

}
.acordion label:hover{
    background: #a59898;

}
.acordion .contenido-acordion1{
    padding: 0px;
    margin: 0px 20px;
    max-height: 0px;
    overflow: hidden;
    transition: all 300ms ease;
}
.btn-acordion:checked ~ .contenido-acordion1{
    max-height: 600px;
    padding: 15px 0px;

} 
.btn-acordion{
    display: none;
}
.contenido-acordion1 p{
    font-size: 17px;
}


    
@media (max-width: 1080px){

    .enlace{
        padding-left: 20px;
    }
    nav ul li a{
        font-size: 16px;
    }   

}

@media (max-width: 740px){
 
     
.principal{
    display: block;
    width: 100%;
    margin-top: 10px;   
}

.servicios{
    display: block;
    
}
.servicios p{
    margin: 10px 10px;
}
.publi img{
    width: 100%;
    padding: 35px 35px;
    border-radius: 50px;

}
.servicios2{
    display: block;
    width: 100%;
    padding: 25px 25px;
}
.tex1{
    margin: 5px 5px;
    width: 100%;
}
.servicios2 img{
    width: 80vw;
    padding: 10px 10px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
}
.texto-p h1{
    font-size: 28px;
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 0px;
}

.texto-p h6{
    font-size: 24px;
    margin-bottom: 5px;
}
.texto-p h4{
    font-size: 25px;
}
.bloque1{
    display: block;
    text-align: center;
    height: 200px;
}
.publi2{
    display: block;

}


.img-p{
display: none ;
   
}
.checkbtn{
    display: block;
    color: rgb(240, 240, 248);
    width: 20px;    
}
ul{
    position: fixed;
    width: 100%;
    height: 70vh;
    background: rgb(148, 148, 148);
    top: 80px;
    left: 100%;
    text-align: center;
    transition: all .5s;

}
nav{
    height: 75px;
    position: fixed;
    background-color: rgb(160, 159, 159);
    top: -1px;
    width: 100vw;

    
    
}
.nav2{
visibility: hidden;
width: 100%;

}
nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 7px;    
}
nav ul li a{
    font-size: 16px;
}
li a:hover, li a.active{
    background: none;
    color: white;

}
#check:checked ~ ul{
    left: 0;

}
.contactos2{
    display: block;
    width: 95%;
    margin: 2%;
    margin-right: 2%;   
}
.contactos1 form{
    padding-left: 0.8cm;
}
.pie{
    display: block;
}
.section1{
    display: block;
    text-align: center;
}
.produc-1{
    width: 100%;
    padding: 0 20px;
}
.produc-1 h2{
    font-size: 20px;

}
.produc-1 p{
    font-size: 15px;
    
}
.produc-1 h4{
    font-size: 17px;
}
.produc-1 h3{
    font-size: 16px;
}
.produc-1 img{
    width: 86%;
}
.productos-similares{
    display: block;
    width: 100%;
    justify-content: center;
    
}
.productos-similares img{
    width: 320px;
}
.productos-similares h4{
    text-align: center;
    font-size: 16px;   
}
.fumigacion img{
    width: 100%;
    
}
nav .logo{
    height: 40px;
    width: 200px;
    visibility: visible;
}
.principal .texto-p p{
    font-size: 15px;
}
.bloque1{
    height: 155px;
}
.bloque1 h3{
    font-size: 22px;
}
.bloque1 button{
    width: 50%;
    margin-right: 2cm;
}
.productos-similares2{
    display: block;
    margin-left: 10px;
}
.productos-similares2 img{
    width: 95vw;
    padding:18px 18px ;
    border-radius: 30px;    
}
.productos-similares2 h4{
    font-size: 18px;
}
.header2 img{
    width: 170px;
}
.link-inicio a{
    font-size: 14px;

}
.link-inicio h5{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.726);
}
.produc-1 .preguntas-1 p{
    padding: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.produc-1 .productos-similares2 img{
    width: 85vw; 
    margin-left: 0cm;
    justify-content: center;

}

.video2 iframe{
   width: 80vw;
   height: 450px;
   text-align: center;
}
.preguntas-fre{
    width: 90%;
}
.fumigacion button{
    width: 40%;
}


}