/* .queHacemos{
    background-color: var(--whiteDark);
    height: 30rem;
} */
    /* .qh--conteiner{ 
        box-sizing: content-box;
        display: flex; flex-direction: row; 
        align-items: center; justify-content: space-evenly;

        height: 97%; width: 90%; 
        border-radius: 10px; margin: 0rem auto; 

        box-shadow: 0px 0px 20px -12px black ;
        background-color: var( --white );
    } */
        /* .qh--items{
            display: flex; flex-direction: column; justify-content: space-evenly;
            min-height: 20rem; width: 15rem; border-radius: 8px;

            box-shadow: 0px 0px 20px 5px var( --greenLight ) ;
            background-color: var( --white );
        } */
            /* .ii--img{
                display: inline-block;
                filter: invert(64%) sepia(26%) saturate(1178%) hue-rotate(61deg) brightness(98%) contrast(100%); 
              
                height: 5rem; width: 5rem;
                margin: 1rem;
    
            } */      /* filter : invert(0.4) sepia(1) hue-rotate(20deg) saturate(1000%) ; */
            /* .ii--titulo{
                margin: 1rem;

                color: var( --black );
            } */
            /* .ii--text{
                margin: 0.6rem; padding: 1rem;

                line-height: 1.4rem;
                font-size: 16px;
                color: var( --gray );
            } */

/*------------     -----------------         -----------------   Idea 2      ---------------        -----------------*/
/*todo: Falta el responsive para pantallas enormes */


.queHacemos{
    
    height: auto; width: var( --width--conteiner ); 
    margin: 0px auto 0rem auto;
    background-color: var(--whiteDark);
}
    .qh--conteiner--tilte{
        height: 18rem; width: 100%; margin: 5rem auto ;
        display: flex; flex-direction: column; 
        justify-content: center;

    }
        .qh--title{
            padding: 1rem;
            color: var(--black);
            letter-spacing: 1.5px;
            font-size: 3rem;
        }
        .qh--text{
            padding: 1.5rem 7rem;
            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
        }

    .qh--conteiner{ 
        box-sizing: content-box;                           /*  Vercion cuadrada */

        display: grid; grid-template-columns:  1fr 1fr 1fr ; grid-template-rows: 1fr 1fr 1fr; 
        gap: 2rem  0rem;
        grid-template-areas: 
        "   fumigacion       mantenimiento          paisajismo     "
        "   cesped           jardinesVerticales     riego     "
        "   desmalezado      podaAltura             construccion  "
        ;

        height: 97%; width: 100%; 
        border-radius: 10px; 
        margin: 2rem auto; 

        /* box-shadow: 0px 0px 20px -12px black ; */
        background-color: var( --white );
    }
        .qh--items{
            display: flex; flex-direction: column; 
            justify-content: flex-start;
            height: 24rem; width: 23rem; border-radius: 5px; 
            margin: auto ;


        }

        .fumigacion{
            grid-area: fumigacion;
            background-image: url("../pisctures/servicios/fumigacion8.jpg "); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .mantenimiento{
            grid-area: mantenimiento ;
            background-image: url("../pisctures/servicios/mantenimiento.jpg"); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .desmalezado{
            grid-area: desmalezado;
            background-image: url("../pisctures/servicios/desmalezado2.jpg "); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .cesped{
            grid-area: cesped;
            background-image: url("../pisctures/servicios/colocacionCesped.jpeg"); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .jardinesVerticales{
            grid-area: jardinesVerticales;
            background-image: url("../pisctures/servicios/jardinVertical.jpg"); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .riego{
            grid-area: riego;
            background-image: url("../pisctures/servicios/riego2.jpg"); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .paisajismo{
            grid-area: paisajismo;
            background-image: url("../pisctures/servicios/paisajismo.jpg"); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .podaAltura{
            grid-area: podaAltura;
            background-image: url("../pisctures/servicios/podaAltura5.jpeg"); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .construccion{
            grid-area: construccion;
            background-image: url("../pisctures/servicios/construccion.jpg "); 
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
            .into--item{
                /**VERCION ANTERIOR*/
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%;
                background:none; */

                /**Vercion Blue*/
                height: 28%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  40% auto 0px auto; 

                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; 
                align-items: center; align-content: center; align-items: center;

                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            }
                .ii--titulo{
                /**Vercion Anterior*/
                /* box-sizing: border-box!important;
                display: flex; flex-direction: column; justify-content: center;
                height: 24%; width: 90%;
                padding: 0.4rem 2rem;
                margin:  20px auto; 
                border-radius: 5px;
                
                background-color: var(  --grayLightOpacity );    color: black ;
                font-size: 20px; font-weight: 400;
                letter-spacing: 0.7px; 
                line-height: 27px; */

                /**Vercion Blue*/
                width: 100%;
                padding: 0%;
                margin: 0%;
                box-sizing: border-box!important;
           
                background:none; 
                color: rgb(240, 240, 240) ;
                /* color: var( --greenDarck ); */
                /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
                
                font-size: 35px; font-weight: 400;
                letter-spacing: 1px; 
                line-height: 29px;
                /* background-color: rgba(28, 135, 28, 0.62); */



            }
            .ii--text{
                /**Vercion Anterior*/
                /* display: none;
                margin: 0.6rem; padding: 1rem;

                line-height: 1.4rem;
                font-size: 16px;
                color: var( --gray ); */

                /**Vercion Blue*/
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 


/*todo:  la foto de poda en altura cambiala y la de fumigacion */

@media (max-width: 1250px) {
    
.queHacemos{

    height: auto; width: 100%; 
    margin: 0px auto;

    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        display: flex; flex-direction: column; justify-content: center;
        height: 22rem; width: 100%;
       
    }
        .qh--title{
            padding: 1rem;
            font-size: 3rem;
            letter-spacing: 1.5px;
        }
        .qh--text{
            padding: 1.5rem 5.5rem;
            line-height: 32px;

            letter-spacing: 0.3px;
        }

    .qh--conteiner{ 
        
        height: auto ; 
        width: 100%; 
        margin: 2rem auto;  padding: 0rem 5.5rem  ; 
        
        overflow: hidden;
        box-sizing: border-box!important;                        

        display: grid; grid-template-columns:  1fr 1fr 1fr ; grid-template-rows: 1fr 1fr 1fr; 
        gap: 1.5rem 1rem;
        grid-template-areas: 
        "   fumigacion       mantenimiento          paisajismo     "
        "   cesped           jardinesVerticales     riego     "
        "   desmalezado      podaAltura             construccion  "
        ;

       

        /* background-color: blue; */
    }
    
        .qh--items{
            height: 22rem ; 
            width: 20rem; 
            margin: 0rem auto;

            display: flex; flex-direction: column; 
          
         


            /* background-color: var( --white ); */
        }

            .into--item{
                height: 28%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  40% auto 0px auto; 

                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
          

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
               
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
                    
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}
@media (max-width: 1160px) {

.queHacemos{
    background-color: var(--whiteDark);
    height: auto; width: 100%; margin: 0px auto;
    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        height: 25rem; width: 90%;
        padding: 2.5rem 0rem 0rem 0rem; margin: 0% auto;
        box-sizing: border-box;

        display: flex; 
        flex-direction: column; justify-content: center;
       
        
    }
        .qh--title{
            padding: 1rem;
       
            letter-spacing: 1.5px;
        }
        .qh--text{
            padding: 1.5rem 5rem;

            line-height: 32px;
            letter-spacing: 0.3px;
        }

    .qh--conteiner{ 
        
        /* height: auto ;  */
        width: 90%; 
        margin: 2rem auto;  padding: 0rem ; 
        
        overflow: hidden;
        box-sizing: border-box!important;                        

        display: grid; grid-template-columns:  1fr 1fr 1fr ; grid-template-rows: 1fr 1fr 1fr; 
        gap: 1.5rem 1rem;
        grid-template-areas: 
        "   fumigacion       mantenimiento          paisajismo     "
        "   cesped           jardinesVerticales     riego     "
        "   desmalezado      podaAltura             construccion  "
        ;

        justify-self: center;

        background-color: var( --white ); 
        /* background-color: blue; */
    }
    
        .qh--items{
            
            /* height: 21rem ;  */
            width: 19rem; width: 100%;
            border-radius: 5px; 

            display: flex; flex-direction: column; 
   
            /* background-color: var( --white ); */
        }

            .into--item{
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%; */
    
                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                height: 28%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  40% auto 0px auto; 
                border-radius: 5px;
                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}
@media (max-width: 1020px) {


.qh--items{  
    /* height: 21rem ;  */
    width: 18rem; 
  
}

}
@media (max-width: 987px) {
    
.queHacemos{
    background-color: var(--whiteDark);
    height: auto; width: 100%; margin: 0px auto;
    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        display: flex; flex-direction: column; justify-content: center;
        height: 27rem; width: 100%;
    }
        .qh--title{
            padding: 1rem;
            color: var(--black);
            letter-spacing: 1.5px;
        }
        .qh--text{
            padding: 1.5rem 5.5rem;
            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
        }

    .qh--conteiner{ 
        
        height: auto ; 
        width: 100%; 
        
        margin: 2rem auto;  padding: 0rem 2rem  ; 
        overflow: hidden;
        box-sizing: border-box!important;   

        /* display: flex ; flex-flow: row wrap; justify-content: space-around; align-items: center; align-content: center; */

        display: grid; 
        grid-template-columns:  1fr 1fr ; 
        grid-auto-rows: 1fr 1fr 1fr 1fr 1fr; 
    
        grid-template-areas: 
        "fumigacion mantenimiento"
        "paisajismo cesped"
        "jardinesVerticales riego"
        "desmalezado podaAltura"
        "construccion none";

        gap: 3rem 0rem;
        justify-items: center; 

        /* box-shadow: 0px 0px 20px -12px black ; */
        background-color: var( --white );
        /* background-color: blue; */
    }
    
        .qh--items{
            display: flex; flex-direction: column; 
            /* justify-content: flex-start; */
            /* height: 20rem ;  */
            width: 23rem; 
            border-radius: 5px; 
            margin: 0rem ;

            /* box-shadow: 0px 0px 10px 2px var( --gray ) ; */
            /* background-color: var( --white ); */
        }

            .into--item{
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%; */
    
                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                height: 28%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  30% auto 0px auto; 
                border-radius: 5px;
                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}
@media (max-width: 930px) {

.queHacemos{
    background-color: var(--whiteDark);
    height: auto; width: 100%; margin: 0px auto;
    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        display: flex; flex-direction: column; justify-content: center;
        height: 28rem; width: 100%;
    }
        .qh--title{
            padding: 1rem;
            color: var(--black);
            letter-spacing: 1.5px;
        }
        .qh--text{
            padding: 1.5rem 5.5rem;
            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
        }

    .qh--conteiner{ 
        
        height: auto ; 
        width: 100%; 
        
        margin: 2rem auto;  padding: 0rem 2rem  ; 
        overflow: hidden;
        box-sizing: border-box!important;   

        /* display: flex ; flex-flow: row wrap; justify-content: space-around; align-items: center; align-content: center; */

        display: grid; 
        grid-template-columns:  1fr 1fr ; 
        grid-auto-rows: 1fr 1fr 1fr 1fr 1fr; 
    
        grid-template-areas: 
        "fumigacion mantenimiento"
        "paisajismo cesped"
        "jardinesVerticales riego"
        "desmalezado podaAltura"
        "construccion none";

        gap: 3rem 0rem;
        justify-items: center; 


    }
    
        .qh--items{
            display: flex; flex-direction: column; 
            /* justify-content: flex-start; */
            /* height: 18rem ;  */
            width: 22rem; 
            border-radius: 5px; 
            margin: 0rem ;

        }

            .into--item{
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%; */
    
                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                height: 28%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  30% auto 0px auto; 
                border-radius: 5px;
                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}

@media (max-width: 820px) {

.queHacemos{
    background-color: var(--whiteDark);
    height: auto; 
    width: 100%; margin: 0px auto;
    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        height: 29rem; width: 100%; padding: 8rem 0rem 4rem 0rem;
        display: flex; flex-direction: column; justify-content: center;
   
    }
        .qh--title{
            padding: 1rem;
      
            letter-spacing: 1.5px;
            font-size: 3.2rem;
        }
        .qh--text{
            padding: 1.5rem 5.5rem;

            line-height: 32px;
            letter-spacing: 0.3px;
            font-size: 17px;
        }

    .qh--conteiner{ 
        
        height: auto ; 
        width: 100%; 
        
        margin: 3rem auto;  padding: 0rem 2rem  ; 
        overflow: hidden;
        box-sizing: border-box!important;   

        display: flex ; flex-flow: column; justify-content: center; align-items: center; align-content: center;

       
        background-color: var( --white );
        /* background-color: blue; */
    }
    
        .qh--items{
            display: flex; flex-direction: column; 
    
            /* height: 18rem ;  */
            width: 42rem; 
            border-radius: 5px; 
            margin: 0rem ;

            /* background-color: var( --white ); */
        }

            .into--item{
        
                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                height: 32%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  15% auto 0px auto; 
                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
                }
                .ii--text{
                    display: block;
                    width: 100%;
                    margin: 0rem 0rem 0rem 0rem; padding: 0rem;

                
                    line-height: 1.4rem;
                    font-size: 22px;
                    letter-spacing: 1px; 
                    /* color: var( --gray );      */
                    /* color: var( --greenDarck ); */
                    color: rgb(240, 240, 240) ;

                    /* background-color: rgba(135, 126, 28, 0.62); */
                } 
}
@media (max-width: 735px) {

.queHacemos{
    background-color: var(--whiteDark);
    height: auto; 
    width: 100%; margin: 0px auto;
    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        display: flex; flex-direction: column; justify-content: center;
        height: 27rem; width: 100%;
    }
        .qh--title{
            padding: 1rem;
            color: var(--black);
            letter-spacing: 1.5px;
            font-size: 3.2rem;
        }
        .qh--text{
            padding: 1.5rem 5.5rem;

            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
            font-size: 17px;
        }

    .qh--conteiner{ 
        
        height: auto ; 
        width: 100%; 
        
        margin: 3rem auto;  padding: 0rem 2rem  ; 
        overflow: hidden;
        box-sizing: border-box!important;   

        display: flex ; flex-flow: column; justify-content: center; align-items: center; align-content: center;

        
        /* background-color: blue; */
    }
    
        .qh--items{
            display: flex; flex-direction: column; 
    
            /* height: 18rem ;  */
            /* width: 32rem;  */
            width: 100%;
            border-radius: 5px; 
            margin: 0rem ;

        }

            .into--item{
        
                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                height: 32%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  20% auto 0px auto; 
                
            

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}

@media (max-width: 630px) {

.queHacemos{
    background-color: var(--whiteDark);
    height: auto; 
    width: 90%; margin: 0px auto;
    /* background-color: aquamarine; */
}
    .qh--conteiner--tilte{
        box-sizing: border-box;
        display: flex; flex-direction: column; justify-content: center;
        height: 28rem; width: 100%;
        padding: 1rem 0rem ;
    }
        .qh--title{
            padding: 0.5rem;
            color: var(--black);
            letter-spacing: 1.5px;
        }
        .qh--text{
            padding: 0.5rem;

            line-height: 32px;
            color: var(--gray);
            letter-spacing: 0.3px;
            font-size: 16px;
        }

    .qh--conteiner{ 
        
        height: auto ; 
        width: 100%; 
        
        margin: 3rem auto;  padding: 0rem 2rem  ; 
        overflow: hidden;
        box-sizing: border-box!important;   

        display: flex ; flex-flow: column; 
        justify-content: center; align-items: center; align-content: center;

        /* display: grid; 
        grid-template-columns:  1fr 1fr ; 
        grid-auto-rows: 1fr 1fr 1fr 1fr 1fr; 
    
        grid-template-areas: 
        "fumigacion mantenimiento"
        "paisajismo cesped"
        "jardinesVerticales riego"
        "desmalezado podaAltura"
        "construccion none"; */

        /* gap: 3rem 0rem; */
        

        /* box-shadow: 0px 0px 20px -12px black ; */
        background-color: var( --white );
        /* background-color: blue; */
    }
    
        .qh--items{
            display: flex; flex-direction: column; 
            /* justify-content: flex-start; */
            /* height: 18rem ;  */
            width: 29rem; 
            border-radius: 5px; 
            margin: 0rem ;

            /* box-shadow: 0px 0px 10px 2px var( --gray ) ; */
            /* background-color: var( --white ); */
        }

            .into--item{
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%; */
    
                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;

                height: 32%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  20% auto 0px auto; 
                border-radius: 5px;
                
                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
                .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
                    font-size: 35px; font-weight: 400;
                    letter-spacing: 1px; 
                    line-height: 29px;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 1.4rem;
                font-size: 20px;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;

                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}

@media (max-width: 541px) {
    
.queHacemos{
    background-color: var(--whiteDark);
    height: auto; width: 100%; margin: 0px;
}
    .qh--conteiner--tilte{
       
        box-sizing: border-box!important;
        display: flex; flex-direction: column; justify-content: center;
        height: 27rem; width: 100%;
    }
        .qh--title{
            width: 100%;
            padding: 1rem;
            
            color: var(--black);
            letter-spacing: 1.5px;
            font-size: 2.5rem;
        }
        .qh--text{
            width: 100%;
            padding: 1rem 1rem 1rem 1rem;
            
            line-height: 30px;
            color: var(--gray);
            letter-spacing: 0.3px;
            font-size: 15px;
        }

    .qh--conteiner{ 
        
        height: 97%; width: 100%; border: none;
        margin: 4rem 0rem ;  padding: 0rem;

        overflow: scroll;
        box-sizing: border-box!important;                          
        display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center;
        gap: 2rem ;

  
        background-color: var( --white );
        /* background-color: red; */
    }
        .qh--items{
        
            height: 18rem; width: 90%; border-radius: 5px; 
            margin: 0rem ;

            box-sizing: border-box!important;     
            display: flex; flex-direction: column; justify-content: center;

            /* box-shadow: 0px 0px 10px 2px var( --gray ) ; */
            /* background-color: var( --white ); */
        }


            .into--item{
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%; */
                
                height: 35%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  5% auto 0px auto; 
                border-radius: 5px;

                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;


                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
            .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
          
                    letter-spacing: 1.5px; 
                    line-height: 2rem;
                    font-size: 2.5rem ; font-weight: 400;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 2rem;
                font-size: 1.5rem ;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;


                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}

@media (max-width: 430px) {

.queHacemos{
    background-color: var(--whiteDark);
    height: auto; width: 100%; margin: 0px;
}
    .qh--conteiner--tilte{
        height: 29rem; width: 100%; padding: 2rem 0rem 0rem 0rem;
        box-sizing: border-box!important;

        display: flex; flex-direction: column; justify-content: center;
     
    }
        .qh--title{
            width: 100%;
            padding: 1rem;
            
            color: var(--black);
            letter-spacing: 1.5px;
            font-size: 2.5rem;
        }
        .qh--text{
            width: 100%;
            padding: 1rem 1rem 1rem 1rem;
            
            line-height: 30px;
            color: var(--gray);
            letter-spacing: 0.3px;
            font-size: 15px;
        }

    .qh--conteiner{ 
        
        height: 97%; width: 100%; border: none;
        margin: 4rem 0rem ;  padding: 0rem;

        overflow: scroll;
        box-sizing: border-box!important;                          
        display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center;
        gap: 2rem ;

    
        background-color: var( --white );
        /* background-color: red; */
    }
        .qh--items{
        
            height: 18rem; width: 90%; border-radius: 5px; 
            margin: 0rem ;

            box-sizing: border-box!important;     
            display: flex; flex-direction: column; justify-content: center;

            /* box-shadow: 0px 0px 10px 2px var( --gray ) ; */
            /* background-color: var( --white ); */
        }


            .into--item{
                /* height: 100%; width: 100%;
                padding: 0% ; margin: 0%; */
                
                height: 35%; width: 100%;
                padding: 0.3rem 0.5rem;
                margin:  5% auto 0px auto; 
                border-radius: 5px;

                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;


                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
            .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                
                    background:none; 
                    color: rgb(240, 240, 240) ;
                    /* color: var( --greenDarck ); */
                    /* font-family:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; */
            
                    letter-spacing: 1.5px; 
                    line-height: 2rem;
                    font-size: 2.5rem ; font-weight: 400;
                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 2rem;
                font-size: 1.5rem ;
                letter-spacing: 1px; 
                /* color: var( --gray );      */
                /* color: var( --greenDarck ); */
                color: rgb(240, 240, 240) ;


                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
}

@media (max-width: 385px) {

.queHacemos{
    overflow: hidden;
    box-sizing: border-box!important;
    height: auto; width: 100%; margin: 0px;
}
    .qh--conteiner--tilte{
        height: 30rem; width: 100%; padding: 0%; margin: 1rem 0rem;     
        box-sizing: border-box!important;
        
        display: flex; flex-direction: column; justify-content: center;
   
        /* background-color: aqua; */
    }
        .qh--title{
            width: 100%;
            padding: 1rem 1rem 0.6rem 1rem;
            
            color: var(--black);
            letter-spacing: 1.5px;
            font-size: 2.4rem;
        }
        .qh--text{
            width: 100%;
            padding: 1rem 1rem 0.6rem 1rem;
            
            line-height: 28px;
            color: var(--gray);
            letter-spacing: 0.3px;
            font-size: 14px;
        }

    .qh--conteiner{ 
        
        height: 97%; width: 100%; border: none;
        margin: 4rem 0rem ;  padding: 0rem;

        overflow: scroll;
        box-sizing: border-box!important;                          
        display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center;
        gap: 2rem ;

    
        background-color: var( --white );
        /* background-color: red; */
    }
        .qh--items{
        
            height: 18rem; width: 90%; 
            margin: 0rem ;

            box-sizing: border-box!important;     
            display: flex; flex-direction: column; justify-content: center;

            /* background-color: var( --white ); */
        }


            .into--item{
                box-sizing: border-box;
                height: 36%; width: 100%;
                padding: 0.3rem 0.2rem;
                margin:  0% auto 0px auto; 

                display: flex; flex-direction: column; 
                justify-content: space-evenly!important; align-items: center; align-content: center; align-items: center;


                background-color: var(  --grayLightOpacity );    
                /* background-color: rgba(28, 135, 28, 0.62); */
                background-color: rgba(20, 53, 107, 0.62);
                /* background-color: rgba(6, 7, 7, 0.62); */

                /* background-color: var(--grayLightOpacity); color: var( --gray );    */
            

            }
            .ii--titulo{
                    width: 100%;
                    padding: 0%;
                    margin: 0%;
                    box-sizing: border-box!important;
                  
                    letter-spacing: 1.5px; 
                    line-height: 2rem;
                    font-size: 2.1rem ; font-weight: 400;

                    /* background-color: rgba(28, 135, 28, 0.62); */
            }
            .ii--text{
                display: block;
                width: 100%;
                margin: 0rem 0rem 0rem 0rem; padding: 0rem;

            
                line-height: 2rem;
                font-size: 1.2rem ;
                letter-spacing: 1.5px; 


                /* background-color: rgba(135, 126, 28, 0.62); */
            } 
    }

@media (max-width: 290px) {

.qh--conteiner--tilte{
    height: 39rem; 
}
    }