.header {
    width: auto;
    background-image: url("../assets/images/sliders/mnosotros.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    background-attachment: fixed;
}

.navbar .nav-item .nosotros {
    color: #683A8A;
}

.ntitle {
    color: #683A8A;
}

.textNos {
    font-weight: 700;
    font-size: var(--size-subtitle-mobile);
}

.textNos p {
    display: inline;
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-250px * 27));
        transform: translateX(calc(-250px * 27));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-250px * 27));
        transform: translateX(calc(-250px * 27));
    }
}

.slider {
    background: pr;
    /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    transition: transform 0.8s ease;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100px;
    position: absolute;
    width: 40px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
    display: flex;
    width: calc(250px * 27);
    /* height: calc(250px * 14); */
}

.slider .slide {
    height: 100px;
    width: 250px;
}


/* .slider:hover {
    transform: scale(1.1);
} */

.card {
    width: 19rem;
    height: 25rem;
    border-radius: 20px;
    border: transparent;
    background-color: transparent;
    transition: .8s;
    box-shadow: inset 0 -50vh 0 -1px transparent;
    /* transition: box-shadow .6s ease-in-out; */
}

.card:hover .svgcolor {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    transform: scale(1.1);
}

.cnosotros .svgcolor {
    width: 35%;
    filter: invert(30%) sepia(8%) saturate(5114%) hue-rotate(233deg) brightness(87%) contrast(92%);
}

.cnosotros:hover {
    box-shadow: inset 0 -100vh 0 -1px #633882;
    color: white;
}

.iconpur {
    background-color: #633882;
    color: #FFFFFF;
}

.purplecard {
    width: 19rem;
    height: 15rem;
    border-radius: 20px;
    border: transparent;
    background-color: transparent;
}

.efectoimg {
    margin-top: 25%;
    margin-bottom: 25%;
}

.imgnos {
    width: 100%;
}

.otro2 {
    position: relative;
}

.otro {
    position: absolute;
    display: inline-block;
    top: -55%;
    left: 0%;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 40px;
}

.textsl {
    color: white;
    font-size: var(--size-subtitle-mobile);
}

.cuadro {
    font-size: 15px;
}

input[type],
textarea#texto {
    border-radius: 20px;
    background-color: white;
}

input[type]::placeholder,
textarea#texto::placeholder {
    color: black;
}

@media only screen and (min-width: 768px) {
    .textsl {
        font-size: 34px;
    }
    .header {
        background-image: url("../assets/images/sliders/nosotros.jpg");
    }
    .otro {
        top: -100%;
        left: 15%;
    }
    .efectoimg {
        margin-top: 15%;
        margin-bottom: 15%;
    }
    .cuadro {
        font-size: 20px;
    }
    .slider .slide-track {
        width: calc(250px * 54);
        /* height: calc(250px * 14); */
    }
}

@media only screen and (min-width: 1024px) {
    .textNos {
        font-size: var(--size-subtitle);
    }
    .imgnos {
        width: 100%;
    }
    .otro {
        top: -130%;
        left: 26%;
    }
    .efectoimg {
        margin-top: 15%;
        margin-bottom: 15%;
    }
    .slider::before,
    .slider::after {
        background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }
    .cuadro {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1440px) {
    .otro {
        top: -150%;
        left: 28%;
    }
    .efectoimg {
        margin-top: 15%;
        margin-bottom: 15%;
    }
    .cuadro {
        font-size: 20px;
    }
}