#testimonials {}

/*----------------------------------------------------------------------------------------------------*/

#testimonials > .content-wrapper { text-align: center; }
#testimonials > .content-wrapper:first-child {
    position: relative;
    margin-bottom: 50px;
}
#testimonials > .content-wrapper > .hook {
    margin-bottom: 15px;
    
    font-weight: 700;
    font-style: italic;
}
#testimonials > .content-wrapper > .hook > span { font-weight: 100; }
#testimonials > .content-wrapper > .title { font-weight: 700; }
#testimonials > .content-wrapper > .title > span { font-weight: 100; }
@media (min-width: 1100px)    { #testimonials > .content-wrapper > .title { font-size: 35px; } }
@media (max-width: 1099.99px) { #testimonials > .content-wrapper > .title { font-size: 30px; } }
@media (min-width: 650px) {
    #testimonials > .content-wrapper > .numbers {
        position: absolute; bottom: -75px; left: 0;
        display: flex; height: 100px; width: 100px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        row-gap: 5px;

        background-color: var(--main-color);
        border-radius: 50%;
        
        text-align: center;
    }
    #testimonials > .content-wrapper > .numbers > .value {
        line-height: 28px;
        font-size: 34px;
        font-weight: 700;
    }
    #testimonials > .content-wrapper > .numbers > .label {
        line-height: 10px;
        font-size: 14px;
        font-weight: 300;
    }
}
@media (max-width: 649.99px) {
    #testimonials > .content-wrapper > .numbers { display: none; }
}

/*----------------------------------------------------------------------------------------------------*/

#testimonials > .background { margin-bottom: calc(-14% - 25px); }
#testimonials > .background > img {
    display: block; height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: top center;
}

/*----------------------------------------------------------------------------------------------------*/

#testimonials > .swiper { padding: 0 max(50px, (100vw - 750px) / 2) 30px; }
@media (min-width: 900px)    { #testimonials > .swiper { margin-bottom: 70px; } }
@media (max-width: 899.99px) { #testimonials > .swiper { margin-bottom: 35px; } }
#testimonials > .swiper > .buttons {
    position: absolute; top: 25px; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    pointer-events: none;
}
#testimonials > .swiper > .buttons > .button {
    position: relative;
    display: block;
    
    background-color: #FFF;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    
    pointer-events: auto;
}
.loaded #testimonials > .swiper > .buttons > .button { transition: background-color .2s ease-out; }
#testimonials > .swiper > .buttons > .button:hover { background-color: var(--main-color); }
#testimonials > .swiper > .buttons > .button:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-color: #000;
    
    -webkit-mask-image: url("../../images/icons/arrow.link.svg");
    mask-image: url("../../images/icons/arrow.link.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 40% auto;
    mask-size: 40% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    cursor: pointer;
}
#testimonials > .swiper > .buttons > .button.prev-button:after { transform: scaleX(-1); }
@media (min-width: 900px) {
    #testimonials > .swiper > .buttons { width: 850px; }
    #testimonials > .swiper > .buttons > .button { height: 100px; width: 100px; }
}
@media (max-width: 899.99px) {
    #testimonials > .swiper > .buttons { width: calc(100% - 50px); }
    #testimonials > .swiper > .buttons > .button { height: 50px; width: 50px; }
}

/*----------------------------------------------------------------------------------------------------*/

#testimonials > .content-wrapper:last-child {}
#testimonials > .content-wrapper:last-child > .arrow-link { text-align: left; }
@media (min-width: 1100px)    { #testimonials > .content-wrapper:last-child { padding: 40px 0; } }
@media (max-width: 1099.99px) { #testimonials > .content-wrapper:last-child { padding: 30px 0; } }