@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

*{ 
    box-sizing: border-box;
    font-family: 'Poppins' , 'sans-serif' ;
}

.modalSlider_conteiner{
    z-index: -11;
    /* z-index: 2000; */
    position: fixed; 
    bottom: 0rem; right: 0%;

    height: 100vh; width: 100vw; 
    padding: 0%; border: none; margin: 0%;

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

    background-color: var(--opacity2); 
    opacity: 0;
    /* opacity: 1; */
    /* pointer-events: none;  */
    transition: all 0.3 ;
    
}
.modalSlider_conteiner::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.572);
    /* background-color: rgba(240, 248, 255, 0.33); */
    backdrop-filter: blur(5px);
    /* filter: blur(50px);  */

  }
/** Parte de JS*/
.show{ 
    z-index: 2000;
    opacity: 1; 
    pointer-events: initial;
}

/*----------------- B T N    D E L E T E ------------*/

    .modalSlider_btn_delete{
        position: absolute ; bottom: 4%; left: 47%;

        height: 4rem; width: 4rem; 
        padding: 0%; border: none; 
        margin: 0rem ;
      
        font-size: 2rem;
        border-radius: 50% ;
        background-color: var( --opacity2 );
        color: var( --white );

        display: flex; flex-direction: column;
        justify-content: center; 
        align-content: center; align-items: center;
    
        &:hover , &:active {
            opacity: 0.9;
            transform: scale(0.9);

        }
    }


/** C A R R U S E L*/

.mdlCrs_conteiner{ 
    height: 80%; width: min(68rem,90%) ; 
    padding: 0rem ; margin: -10% auto 0rem auto;
   
    overflow: hidden; 

    display: flex; flex-direction: row; 
    align-items: center; justify-content: center; align-content: center;
}
.mdlCrs_conteiner .mdlCrs_row{
    height: 100%; width:  100% ; 
    padding: 0rem ;
    margin: 0rem auto; border: none;

    /* border: solid 2px yellow; */
    border-radius: 5px;

    display: grid; 
    gap: 0rem;
    grid-template-columns: repeat(7, 100%);          /*Esto hace que se posisionen horizontalmente, es bueno para la animacion. */
                                                                    /*Si esto funciona igual*/
    /*Scroll canchero */    
    overflow-y: hidden;
    /*Este valor me genera la barra horizontal y hace que pueda desplazar con el dedo*/
    /* overflow-x: auto;  */
     /*Este valor me genera la barra horizontal y hace que pueda desplazar con el dedo, se hace scroll sobre el slider y no sobre el body*/
     /* overflow-x: scroll;  */
    /*Este valor me saca la barra horizontal y hace que NO pueda desplazar con el dedo*/
    overflow-x: hidden;
    /*Esto indica que capturamos el scrool x y q cuando se deje de hacer scroll nunca quede entre dos imagenes*/
    /* scroll-snap-type: x mandatory; */
     /*Esta propiedad te genera una transision suave pero no tiene que estar el valor mandatory */
    scroll-behavior: smooth;              
}

.mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
        position: relative; 
        box-sizing: border-box;

        height: 100%; width: 100%; 
        padding: 0rem;
        margin: auto ; border: none;

        display: flex; flex-direction: row; 
        align-items: center; justify-content: center; align-content: center;

       scroll-snap-align: start;       /*Empieza por el primer componente  */
        
    }
        .tarjeta_item{   
            height: 90%; width: 83%;
            background-color: transparent;

            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;

        }
     

    #mdlCrs_tarjeta-1 .tarjeta_item{ background-image: url("../img/fh2.jpg") }
    #mdlCrs_tarjeta-2 .tarjeta_item{ background-image: url("../img/fumigacion7.jpg") }
    #mdlCrs_tarjeta-3 .tarjeta_item{ background-image: url("../img/fumigacion6.webp")}
    #mdlCrs_tarjeta-4 .tarjeta_item{ background-image: url("../img/fumigacion5.jpg")}
    #mdlCrs_tarjeta-5 .tarjeta_item{ background-image: url("../img/fh1.jpg")}
    #mdlCrs_tarjeta-6 .tarjeta_item{ background-image: url("../img/Video\ de\ WhatsApp\ 2024-04-15\ a\ las\ 19.29.22_3ff6b896.mp4")}
    #mdlCrs_tarjeta-7 .tarjeta_item{ background-image: url("../img/fh3.jpg")}



    /*----------------ARROW---------------------------*/

        .mdlCrs_arow_link_l{
            position: absolute; 
            top: 43%; left: 0%;
            height: 8rem; width: 5.5rem; 
            padding: 0rem 0rem;

            /* background-color: rgba(145, 142, 142, 0.471); */

        } 
        .mdlCrs_arow_link_r{
            position: absolute; 
            top: 43%; right: 0%;
            height: 8rem; width: 5.5rem; 
            padding: 0rem 0rem;

            /* background-color: rgba(145, 142, 142, 0.471); */

        } 
            .mdlCrs_arow_link{
                /* z-index: 2; */
                height: 7rem; width: 5.5rem;
                /* background-color: rgba(145, 142, 142, 0.47); */
                
                border-radius: 9px;
                text-decoration: none!important;
                font-size: 4rem;
                color: var(--white);

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

                &:hover , &:active{
                    background-color: rgb( 0, 0, 0, .6);
                    opacity: 0.9;
                    transform: scale(0.9);
                }

            }
           
        

@keyframes fade { 
    /*trate de ponerlo en el css con una condicion :active y un + pero no me funciono*/
    /*La otra es crea la clase .fade{} ponele las animacion y desde un .js sacas y pones la clase*/
    from{ opacity: .4 }
    to{ opacity: 1 }
}


    /*?----------------------- R E S P O N S I V E ----------------------------------*/

@media(max-width: 1030px){

    /*------------ B T N     D E L E T E-----------------*/
    
        .modalSlider_btn_delete{
            height: 4rem; width: 4rem; 
          
            font-size: 2rem;
        }
    
    /** C A R R U S E L*/
    
    .mdlCrs_conteiner{
        height: 82%; width: min(68rem,90%) ; 
        margin: -10% auto 0rem auto;

    }
            .tarjeta_item{   
                height: 90%; width: 80%;
    
            }
    
        /*----------------ARROW---------------------------*/
    
            .mdlCrs_arow_link_l{
                top: 48%; 
    
                height: 5.5rem; width: 4.5rem; 
                
                background-color: rgba(145, 142, 142, 0.471);
            } 
            .mdlCrs_arow_link_r{
                top: 48%; 

                height: 5.5rem; width: 4.5rem; 
    
                background-color: rgba(145, 142, 142, 0.471);
            } 
                .mdlCrs_arow_link{
                    height: 5.5rem; width: 4.5rem;
                    
                    font-size: 2.8rem;
                }
    
}

/*Cambio de imgs*/
@media(max-width: 913px){
    #mdlCrs_tarjeta-2 .tarjeta_item{ background-image: url("../img/fumigacion5.jpg");}
    #mdlCrs_tarjeta-4 .tarjeta_item{ background-image: url("../img/fh1.jpg");}
    #mdlCrs_tarjeta-5 .tarjeta_item{ background-image: url("../img/fumigacion7.jpg");}
}

@media(max-width: 830px){

    /*------------ B T N     D E L E T E-----------------*/
    
        .modalSlider_btn_delete{
            height: 4rem; width: 4rem; 
          
            font-size: 2rem;
        }
    
    
    /** C A R R U S E L*/
    
    .mdlCrs_conteiner{
        height: 40rem; width: min(68rem,90%) ; 
        padding: 0rem ; margin: -15% auto 0rem auto;

    }
    .mdlCrs_conteiner .mdlCrs_row{
        height: 100%; width:  100% ; 
        padding: 0rem ;
        margin: 0rem auto; border: none;
                    
    }
    
    .mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
            position: relative; 
    
            height: 100%; width: 100%; 
            padding: 0rem;
            margin: auto ; border: none;

        }
            .tarjeta_item{   
                height: 90%; width: 80%;
    
                background-size: contain;
            }
    
        /*----------------ARROW---------------------------*/
    
            .mdlCrs_arow_link_l{
                position: absolute; 
                top: 43%; left: 0%;
    
                height: 5.5rem; width: 3.8rem; 
                padding: 0rem;
            } 
            .mdlCrs_arow_link_r{
                position: absolute; 
                top: 43%; right: 0%;
                height: 5.5rem; width: 3.8rem; 
                padding: 0rem ;
            } 
                .mdlCrs_arow_link{
                    height: 5.5rem; width: 3.8rem;
                    
                    font-size: 2.8rem;
                }
               
}

@media(max-width: 730px){

  
/*------------ B T N     D E L E T E-----------------*/

    .modalSlider_btn_delete{
        height: 4rem; width: 4rem; 
        
        font-size: 1.8rem;
    }
    
    
    /** C A R R U S E L*/
    
    .mdlCrs_conteiner{
        height: 40rem; width: min(68rem,90%) ; 
        padding: 0rem ; margin: -18% auto 0rem auto;

    }
    .mdlCrs_conteiner .mdlCrs_row{
        height: 100%; width:  100% ; 
        padding: 0rem ;
        margin: 0rem auto; 
                    
    }
    
    .mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
            position: relative; 
    
            height: 100%; width: 100%; 
            padding: 0rem;
            margin: auto ;

        }
            .tarjeta_item{   
                height: 90%; width: 80%;

                background-size: contain;
            }
    
        /*----------------ARROW---------------------------*/
    
            .mdlCrs_arow_link_l{
                height: 5rem; width: 3rem; 
            } 
            .mdlCrs_arow_link_r{
                height: 5rem; width: 3rem; 
            } 
                .mdlCrs_arow_link{
                    height: 5rem; width: 3rem;
                    
                    font-size: 2.5rem;
                }
               
}

@media(max-width: 630px){

  
    /*------------ B T N     D E L E T E-----------------*/
    
        .modalSlider_btn_delete{
            bottom: 3%;
            height: 3.8rem; width: 3.8rem; 
          
            font-size: 1.6rem;
        }
    
    
    /** C A R R U S E L*/
    
    .mdlCrs_conteiner{
        height: 40rem; width: min(68rem,95%) ; 
        padding: 0rem ; margin: -20% auto 0rem auto;

    }
    .mdlCrs_conteiner .mdlCrs_row{
        height: 100%; width:  100% ; 
        padding: 0rem ;
        margin: 0rem auto; 
                    
    }
    
    .mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
            position: relative; 
    
            height: 100%; width: 100%; 
            padding: 0rem;
            margin: auto ;

        }
            .tarjeta_item{   
                height: 90%; width: 80%;

                background-size: contain;
            }
    
        /*----------------ARROW---------------------------*/
    
            .mdlCrs_arow_link_l{
                position: absolute; 
                top: 48%; left: 0%;
                height: 4rem; width: 3rem; 
            } 
            .mdlCrs_arow_link_r{
                position: absolute; 
                top: 48%; right: 0%;
                height: 4rem; width: 3rem; 
            } 
                .mdlCrs_arow_link{
                    height: 4rem; width: 3rem;
                    
                    font-size: 2.5rem;
                }
               
}

@media(max-width: 530px){

  
    /*------------ B T N     D E L E T E-----------------*/
    
        .modalSlider_btn_delete{
            bottom: 4%; left: 44%;
            height: 4rem; width: 4rem; 
          
            font-size: 1.8rem;
        }
    
    
    /** C A R R U S E L*/
    
    .mdlCrs_conteiner{
        height: 40rem; 
        padding: 0rem ; margin: -25% auto 0rem auto;

    }
    .mdlCrs_conteiner .mdlCrs_row{
        height: 100%; width:  100% ; 
        padding: 0rem ;
        margin: 0rem auto; 
                    
    }
    
    .mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
            position: relative; 
    
            height: 100%; width: 100%; 
            padding: 0rem;
            margin: auto ;

        }
            .tarjeta_item{   
                height: 90%; width: 99%;

                background-size: contain;
            }
    
        /*----------------ARROW---------------------------*/
    
            .mdlCrs_arow_link_l{
                position: absolute; 
                top: 48%; left: 0%;
                height: 5rem; width: 3rem; 
            } 
            .mdlCrs_arow_link_r{
                position: absolute; 
                top: 48%; right: 0%;
                height: 5rem; width: 3rem; 
            } 
                .mdlCrs_arow_link{
                    height: 5rem; width: 3rem;
                    
                    font-size: 2.5rem;
                }
               
}

@media(max-width: 430px){

  
    /*------------ B T N     D E L E T E-----------------*/
    
        .modalSlider_btn_delete{
            position: absolute ; bottom: 4%; left: 42%;
    
            height: 4rem; width: 4rem; 
          
            font-size: 1.6rem;
        }
    
    
    /** C A R R U S E L*/
    
    .mdlCrs_conteiner{
        height: 40rem; 
        padding: 0rem ; margin: -25% auto 0rem auto;

    }
    .mdlCrs_conteiner .mdlCrs_row{
        height: 100%; width:  100% ; 
        padding: 0rem ;
        margin: 0rem auto; 
                    
    }
    
    .mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
            position: relative; 
    
            height: 100%; width: 100%; 
            padding: 0rem;
            margin: auto ;

        }
            .tarjeta_item{   
                height: 90%; width: 99%;
            }
    
        /*----------------ARROW---------------------------*/
    
            .mdlCrs_arow_link_l{
                position: absolute; 
                top: 46%; left: 0%;
                height: 4.8rem; width: 2.6rem; 
            } 
            .mdlCrs_arow_link_r{
                position: absolute; 
                top: 46%; right: 0%;
                height: 4.8rem; width: 2.6rem; 
            } 
                .mdlCrs_arow_link{
                    height: 4.8rem; width: 2.6rem;
                    
                    font-size: 2.5rem;
                }
               
}



@media(min-height: 1300px){


/*------------ B T N     D E L E T E-----------------*/

    .modalSlider_btn_delete{
        bottom: 4%;
        height: 4.5rem; width: 4.5rem; 
        
        font-size: 2rem;
    }


/** C A R R U S E L*/

.mdlCrs_conteiner{
    height: 78%; width: min(68rem,90%) ; 
    margin: -10% auto 0rem auto;

}
        .tarjeta_item{   
            height: 90%; width: 99%;

        }

    /*----------------ARROW---------------------------*/
    .mdlCrs_arow_link_l{
        top: 49%; left: 0%;
        height: 8rem; width: 5.5rem; 
    } 
    .mdlCrs_arow_link_r{
        top: 49%; right: 0%;
        height: 8rem; width: 5.5rem; 
      
    } 
        .mdlCrs_arow_link{
            height: 8rem; width: 5.5rem;
    
            font-size: 4rem;
        }     
}

@media(max-height: 680px){

  
/*------------ B T N     D E L E T E-----------------*/

    .modalSlider_btn_delete{
        bottom: 3%;
        height: 3.6rem; width: 3.6rem; 
        
        font-size: 1.6rem;
    }


/** C A R R U S E L*/

.mdlCrs_conteiner{
    height: 78%; width: min(68rem,90%) ; 
    padding: 0rem ; margin: -5% auto 0rem auto;

}
.mdlCrs_conteiner .mdlCrs_row{
    height: 100%; width:  100% ; 
    padding: 0rem ;
    margin: 0rem auto; border: none;
                
}

.mdlCrs_conteiner .mdlCrs_row  .mdlCrs_tarjeta{  
        position: relative; 

        height: 100%; width: 100%; 
        padding: 0rem;
        margin: auto ; border: none;

    }
        .tarjeta_item{   
            height: 90%; width: 99%;

            background-size: contain;
        }

    /*----------------ARROW---------------------------*/

        
    
}