/* 
    Table of content
    0. NAV
    1. LOGOS
    2. EXPERIENCES
    3. BLOG
    4. USPS
*/

/* 0. NAV */
.swiper-custom-button-prev,
.swiper-custom-button-next {
    position: absolute;
    top: calc( 50% - 2.5rem );
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: .1rem solid var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-black);
    cursor: pointer;
    transition: .3s;
}

.swiper-custom-button-prev {
    left: -10rem;
}

.swiper-custom-button-next {
    right: -10rem;
}

.swiper-custom-button-prev:hover,
.swiper-custom-button-next:hover {
    background-color: var(--color-black);
    color: white;
}

/* 1. LOGOS */
.slider-logos {
    overflow: hidden;
}

.slider-logos .content-wrapper {
    max-width: var(--grid-size-md);
    margin: 0 auto;
    text-align: center;
}

.slider-logos .ticker {
    margin-top: 5rem;
}

.slider-logos .js-marquee {
    display: flex;
    gap: 3rem;
}

.slider-logos a {
    width: 16rem;
    height: 12rem;
    padding: 2rem;
    border: .1rem solid #eee;
    border-radius: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-logos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: .5;
    filter: grayscale(100%);
    transition: .3s;
}

.slider-logos a:hover img {
    opacity: 1;
    filter: grayscale(0);
}

/* 2. EXPERIENCES */
.slider-experiences {
    overflow: hidden;
}

.slider-experiences .content-wrapper {
    max-width: var(--grid-size-md);
    margin: 0 auto;
    text-align: center;
}

.slider-experiences .experiences-wrapper {
    position: relative;
}

.slider-experiences .swiper {
    margin-top: 5rem;
}

.slider-experiences .swiper-slide {
    position: relative;
    padding: 3rem;
    border-radius: 1rem;
    background-color: white;
}

.slider-experiences .swiper-slide::before {
    content: '';
    position: absolute;
    z-index: 1;
    right: 3rem;
    bottom: 3rem;
    width: 5.4rem;
    height: 3rem;
    background-image: url(../images/logo-w-color.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    opacity: .2;
}

.slider-experiences .author-wrapper {
    margin-top: 4rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.slider-experiences .image {
    flex: 0 0 7rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
}

.slider-experiences .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slider-experiences .author {
    flex: 1 1 auto;
    line-height: 1.3;
}

.slider-experiences h5 {
    margin-bottom: 0;
}

.slider-experiences .position {
    font-size: 1.6rem;
}

/* 3. BLOG */
.slider-blog {
    overflow: hidden;
}

.single-post .slider-blog {
    background-color: var(--color-lightpurple);
}

.slider-blog .container > .content-wrapper {
    max-width: var(--grid-size-md);
    margin: 0 auto;
    text-align: center;
}

.slider-blog .blog-wrapper {
    position: relative;
}

.slider-blog .swiper {
    margin-top: 5rem;
}

.slider-blog .link-wrapper {
    margin-top: 5rem;
    text-align: center;
}

/* 4. USPS */
.slider-usps {
    overflow: hidden;
}

.slider-usps .content-wrapper {
    max-width: var(--grid-size-md);
    margin: 0 auto;
    text-align: center;
}

.slider-usps .usps-wrapper {
    position: relative;
}

.slider-usps .swiper {
    margin-top: 5rem;
}

.slider-usps .item {
    padding: 3rem;
    border-radius: 1rem;
    text-align: center;
}

.slider-usps .image {
    width: 5rem;
    height: 5rem;
    margin: 0 auto;
}

.slider-usps .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.slider-usps h4 {
    margin: 2rem 0 1rem;
}

.slider-usps .text-wrapper {
    font-size: 1.6rem;
    line-height: 1.5;
}

/* RESIZE */
@media (max-width: 1500px) {
    /* 0. NAV */
    .swiper-custom-button-prev,
    .swiper-custom-button-next {
        top: inherit;
        bottom: -8.5rem;
        width: 4rem;
        height: 4rem;
    }

    .slider-usps .swiper-custom-button-prev,
    .slider-usps .swiper-custom-button-next,
    .slider-experiences .swiper-custom-button-prev,
    .slider-experiences .swiper-custom-button-next {
        bottom: -6rem;
    }

    .swiper-custom-button-prev {
        left: inherit;
        right: 4.5rem;
    }

    .swiper-custom-button-next {
        right: 0;
    }
}

@media (max-width: 1340px) {
    /* 2. EXPERIENCES */
    .slider-experiences .swiper {
        overflow: visible;
    }

    /* 3. BLOG */
    .slider-blog .swiper {
        overflow: visible;
    }

    /* 4. USPS */
    .slider-usps .swiper {
        overflow: visible;
    }
}

@media (max-width: 1024px) {
    /* 0. NAV */
    .swiper-custom-button-prev,
    .swiper-custom-button-next {
        display: none;
    }

    /* 1. LOGOS */
    .slider-logos .js-marquee {
        gap: 2rem;
    }

    /* 4. USPS */
    .slider-usps .item {
        background-color: var(--color-lightpurple);
    }
}

@media (max-width: 899px) {
    /* 2. EXPERIENCES */
    .slider-experiences .position {
        font-size: 1.4rem;
    }

    /* 4. USPS */
    .slider-usps .text-wrapper {
        font-size: 1.4rem;
    }
}

@media (max-width: 767px) {
    /* 1. LOGOS */
    .slider-logos .ticker {
        margin-top: 3rem;
    }

    /* 2. EXPERIENCES */
    .slider-experiences .swiper {
        margin-top: 3rem;
    }

    .slider-experiences .image {
        flex: 0 0 6rem;
        width: 6rem;
        height: 6rem;
    }

    /* 3. BLOG */
    .slider-blog .swiper {
        margin-top: 3rem;
    }

    .slider-blog .link-wrapper {
        margin-top: 3rem;
    }

    /* 4. USPS */
    .slider-usps .swiper {
        margin-top: 3rem;
    }
}

@media (max-width: 599px) {
    /* 1. LOGOS */
    .slider-logos .js-marquee {
        gap: 1.5rem;
    }

    .slider-logos img {
        opacity: 1;
        filter: grayscale(0);
    }
}

@media (max-width: 499px) {
    /* 2. EXPERIENCES */
    .slider-experiences .swiper-slide::before {
        display: none;
    }
}