.light {
    color: gray;
}

.info {
    font-weight: 700;
    font-size: 100%;
    padding-top: 5vh;
}

.testimonial {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: auto;
    padding: 10vh 15vh 0;
    margin-bottom: 5%;
}

#header-testi{
    box-shadow: 0 2px 20px #452f93;
}

#footer-testi{
    box-shadow: 0px -2px 20px #452f93;
}

.testimonial-text {
    z-index: 1;
    animation-duration: 2s;
}

.testimonial-text2 {
    display: none;
    z-index: 1;
    animation-duration: 2s;
}

.statement{
    font-size: large;
    padding-right: 25%;
    text-align: justify;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.images {
    position: relative;
}

.images .img1 {
    width: 100%;
    margin: auto;
    animation-duration: 1.7s;
}

@keyframes rotate {
    0% {}

    100% {
        transform: rotateY(360deg);
    }
}

.images .img2 {
    display: none;
    width: 100%;
    margin: auto;
    animation-duration: 1.7s;
}

.testi-buttons {
    background: #bfadff;
    border-radius: 20px;
    font-size: 200%;
    display: flex;
    justify-content: space-around ;
    margin-top: 5%;
}

.testi-buttons p {
    padding: 1% 0;
    cursor: pointer;
}


@media (max-width: 600px) {
    .testi-buttons {
        font-size: 150%;
    }

    .testimonial {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .images img {
        max-width: 80%;
        padding: 20vh 0 2vh;
    }

    .images .img1 {
        width: 60%;
        margin: auto;
        padding-left: 6vw;
    }

    .images .img2 {
        width: 60%;
        margin: auto;
    }

    .images {
        grid-row: 1/2;
        display: flex;
        flex-direction: column;
    }

    .text {
        grid-row: 2/3;
        align-items: start;
    }

    .statement {
        padding: 0 5% 0 5%;
    }

    .info {
        padding: 2vh 0 20vh;
    }

    .testimonial-text {
        position: relative;
        margin-top: 5vh;
        max-width: 900px;
        margin-right: 0px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
    }

    .testimonial-text2 {
        position: relative;
        margin-top: 5vh;
        max-width: 900px;
        margin-right: 0px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
    }

    .text img {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 70px;
    }

    footer {
        z-index: 3;
    }
}