/* ================================
   COLORES Y FONDOS
   ================================ */
button {
    background-color: #37353E;
    color: aliceblue;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 0.5em;
}

.services-section-and-opening-hours {
    background-image: url(../assest/imagen/background//photo-1503951914875-452162b0f3f1ee.jpg);
}

.gallery-section {
    background-image: url(../assest/imagen/background/23897sdf.jpg);
}

.services-section-and-opening-hours,
.gallery-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.days-of-attention,
.prices-section,
.testimony-card,
#menu-btn {
    background-color: #fff;
    color: #37353E;
}

.testimony-section,
.contact-section-ext {
    background-color: #9D9570;
}

.contact-section {
    background-color: #292d33;
}


/* ================================
   COLOR DE TEXTO
   ================================ */
.about-us,
.gallery-section,
.testimony-section h1,
.contact-section-ext {
    color: #fff;
}


/* ================================
    GALERÍA
   ================================ */
.gallery-section li {
    border: 2px solid #9D9570;
}

.gallery-section img {
    transition: 0.3s;
}

.gallery-section img:hover {
    transform: scale(1.2);
}


/* ================================
    DETALLES VISUALES
   ================================ */
.testimony-section hr {
    border-color: #F5F5F5;
}

input,
textarea {
    border-bottom: 2px solid #9D9570;
}


/* ================================
    TIPOGRAFÍA
   ================================ */
body {
    font-family: "Arimo", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.title-home {
    font-family: "Archivo Black", sans-serif;
}






/*-- efecto carrucel --*/
.carousel-container {
    width: 100%;
    position: relative;

    /* Efecto de desvanecimiento lateral */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;

    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.carousel-track {
    animation: slide 30s linear infinite;
    width: max-content;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-300px * 3 - 1.5rem * 3));
    }
}

@media (max-width: 640px) {
    .carousel-track {
        animation-duration: 25s;
    }
}

/*-- efecto carrucel --*/