#testimonials {
    width: 65%;
}

.testimonial-container > div > svg {
    width: 60px;
    height: 60px;
    color: var(--fg3);
    margin: 65px;
    cursor: pointer;
}

.testimonial {
    position: relative;
    margin: 0 auto;
    display: none;
    transition: opacity 500ms ease;
}

.testimonial-container > h2 {
    margin: -1px;
    padding: 10px;
    background-color: var(--bg2);
    color: var(--fg2);
    text-align: center;
}

.testimonial h1,
.testimonial h2,
.testimonial h3,
.testimonial h4,
.testimonial p {
    width: 45%;
}

.testimonial figure {
    width: 50%;
    height: 100%;
    right: 0px;
    top: 0;
    position: absolute;
    display: flex;
    align-items: center;
}

.testimonial figure a {
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.testimonial figure a img,
.testimonial figure img {
    margin: 0 auto;
    max-height: 100%;
}

.pagination-dots {
    display: flex;
    justify-content: center;
}

.dot {
    display: inline-block;
    background: black;
    margin: 4px;
    vertical-align: middle;
    border-radius: 10px;
    transition: height 1s ease, width 1s ease;
    width: 8px;
    height: 8px;
}

.dot.active {
    width: 10px;
    height: 10px;
    background: #F5A85C;
}

@media only screen and (max-width: 700px) {
    .testimonial figure {
        display: none;
    }

    .testimonial h1,
    .testimonial h2,
    .testimonial h3,
    .testimonial h4,
    .testimonial p {
        width: 100%;
    }

    #testimonials {
        width: 90%;
    }

    .testimonial-container > div > svg {
        margin: 35px;
    }
}