/* ==========================================
   ALL PAWS LONDON
   TESTIMONIAL CAROUSEL
   ========================================== */


#testimonials {

    margin-top: 3rem;
    text-align: center;

}


/* Main testimonial container */

.testimonial-card {

    max-width: 650px;
    margin: auto;
    padding: 2rem;

    opacity: 1;

    transition: opacity 1.5s ease-in-out;

}


/* Pet image */

.testimonial-photo {

    width: 140px;
    height: 140px;

    border-radius: 50%;

    object-fit: cover;

    border: solid 3px rgba(255,255,255,.25);

    margin-bottom: 1.2rem;

    transition: transform .5s ease;

}


.testimonial-photo:hover {

    transform: scale(1.05);

}



/* Pet name */

.testimonial-pet,
#testimonial-pet {

    margin-bottom: .5rem;

}



/* Stars */

.testimonial-stars {

    color: #FFD700;

    font-size: 1.2rem;

    letter-spacing: .1em;

    margin-bottom: 1rem;

}



/* Review text */

#testimonial-text {

    font-style: italic;

    line-height: 1.8;

    margin-bottom: 1.5rem;

}



/* Owner */

#testimonial-owner {

    font-weight: 600;

    letter-spacing: .08em;

    margin-bottom: 2rem;

}



/* Controls */

.testimonial-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1rem;

}



/* Mobile arrows */

.testimonial-controls button {

    background: transparent;

    border: none;

    color: white;

    font-size: 2rem;

    cursor: pointer;

    transition: opacity .3s ease;

}


.testimonial-controls button:hover {

    opacity: .6;

}



/* Dots */

#testimonial-dots {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: .7rem;

}



/* Individual dots */

.dot {

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: rgba(255,255,255,.35);

    cursor: pointer;

    transition:

        background .5s ease,

        transform .5s ease;

}



.dot.active {

    background: white;

    transform: scale(1.25);

}



/* ==========================================
   DESKTOP
   Remove arrows but keep dots
   ========================================== */


@media screen and (min-width: 769px) {


    #testimonial-prev,
    #testimonial-next {

        display: none;

    }


}