div.tec_responsive{
    position: relative;
    width: 100%;
}


div.tec_inicio {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-bottom: 2%;
    flex-wrap: wrap;
}
.carrusel {
    display: flex;
    overflow-x: scroll;
    width: 90%;
    gap: 20px;
    margin: auto; 
   scrollbar-width: thin;
    scrollbar-color: #036ee7 transparent;
}

 .carrusel > div {
    scroll-snap-align: center;
    margin: 10px;
    min-width: calc(100% - 20px); 
}

div.eslogan_1 {
    position: relative;
    
    h1{
    position: absolute;
    top: 10%;
    left: 10%;
    }

    p{
    position: absolute;
    top: 35%;
    left: 10%;  
    }
     img.inicio{
        position: relative;
        left: 45%;
        width: 50%;
     }

}

div.eslogan_1 h1 span {
    color: var(--color-font);
}

div.eslogan_2 {
    position: relative;

    h1{
     position: absolute;
     top: 10%;
    left: 5%;
    }

    p{
    position: absolute;
    top: 30%;
    left: 5%;
    width: 40%;
    }

    img{
    position: relative;
    left: 50%;
    width: 50%;
    }
}

div.eslogan_2 h1 span {
    color: var(--color-font);
}

div.eslogan_3 {
    position: relative;

     h1{
     position: absolute;
     top: 10%;
    left: 10%;
    }

    p{
    position: absolute;
    top: 30%;
    left: 10%;
    width: 40%;
    }

    img{
    position: relative;
    left: 50%;
    width: 15%;
    }
     
}

div.eslogan_3 h1 span {
    color: var(--color-font);
}

div.tec_phone {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-bottom: 0%;
    flex-wrap: wrap;
    width: 100%;
}

div.tec_phone img {
    width: 100%;
}

div.tec_body_txt {
    position: absolute;
    left: 65%;
    top: 20%;
    color: #fafafa;
    h1{
        font-size: 50px;
    }

    p{
        font-size: 20px;
    }
}

div.tec_back {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-bottom: 0%;
    flex-wrap: wrap;
    width: 100%;
}

div.tec_back img {
    width: 100%;
}

div.tec_txt {
    position: absolute;
    top: 50%;
    left: 35%;
    color: rgb(255, 255, 255);
    font-size: 25px;
}


@media (max-width: 992px) {
    div.tec_inicio {
        margin-bottom: 4%;
    }
    
    div.tec_body_txt {
        left: 58%;
        top: 20%;
        h1{
            font-size: 20px;
        }
        p{
            font-size: 15px;
        }
    }
    
    div.tec_txt {
        left: 32%;
        top: 48%;
        font-size: 18px;
    }
    
  .carrusel {
    display: flex;
    gap: 5px;
    overflow: hidden;
    margin: auto;
}


 .carrusel > div {
    width: auto;
    scroll-snap-align: center;
    margin: 10px;
    min-width: calc(100% - 20px); 
}

div.eslogan_1 {
    position: relative;
    width: auto;
    h1{
    position: absolute;
    top: 0%;
    left: 5%;
    font-size: 20px;
    }

    p{
    position: absolute;
    top: 30%;
    left: 5%;  
    font-size: 12px;
    }
     img.inicio{
        position: relative;
        left: 50%;
        width: 50%;
     }

}

div.eslogan_1 h1 span {
    color: var(--color-font);
}

div.eslogan_2 {
    display: none;
}


div.eslogan_3 {
    display: none;
     
}
    
 
}

@media (max-width: 768px) {
 
    div.tec_inicio {
        margin-bottom: 8%;
    }
    
    
    
    div.tec_phone,
    div.tec_back {
        position: relative;
        margin-bottom: 0px;
    }
    
    div.tec_body_txt {

    position: absolute;
    left: 60%;
    top: 20%;
    color: #fafafa;
    width: 40%;

    h1{
         font-size: 9px;
    }

    p{
         font-size: 7px;
    }

    }

    .carrusel {
    display: flex;
    gap: 5px;
    margin: auto;
    overflow: hidden;
}



 .carrusel > div {
    width: auto;
    scroll-snap-align: center;
    margin: 10px;
    min-width: calc(100% - 20px); 
}

div.eslogan_1 {
    position: relative;
    width: auto;
    h1{
    position: absolute;
    top: 0%;
    left: 5%;
    font-size: 10px;
    }

    p{
    position: absolute;
    top: 30%;
    left: 5%;  
    font-size: 8px;
    }
     img.inicio{
        position: relative;
        left: 50%;
        width: 50%;
     }

}

div.eslogan_2 {
    display: none;
}


div.eslogan_3 {
    display: none;
     
}
    
    div.tec_txt {
        position: absolute;
        left: 30%;
        top: 50%;
        width: 50%;
        text-align: left;
        font-size: 7px;
        color: rgb(255, 255, 255);
        transform: none;
        background-color: transparent;
        padding: 0;
    }
    
    div.tec_phone img,
    div.tec_back img {
        height: auto;
        object-fit: cover;
        margin: 0;
    }
}