@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
:root {

    --color-background-white: #ffffff;
    --color-background-blue: #1b202e;
    --color-background-gray: #d8d8d8;
    --letters-white: #ffffff;
    --letters-blue: #1b202e;
    --letters-black: #000;
    --letters-bluesky: #72d4ff;
    --letters-CT: #fb5a86;
    --letters-plazas: #0096ff;
    --letters-colab: #ff9f23;
    --letters-subtitle-gray: #424242;
    --color-background-blueOP: rgba(27, 32, 46, 0.3);
    --color-background-gray: rgb(236, 236, 236);
    --color-background-gray2: rgba(236, 236, 236, 0.3);


    --first-color: hsl(82, 60%, 28%);
    --title-color: hsl(0, 0%, 95%);
    --text-color: hsl(0, 0%, 95%);
    --body-color: hsl(0, 0%, 95%);
    --container-color: hsl(0, 0%, 100%);

    --body-font: "Poppins", sans-serif;
    --h2-font-size: 1.25rem;
    --small-font-size: .813rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}


::selection {
    background: var(--green-color);
    color: var(--white-color);
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    font-size: 90%;
}
section {
    padding: 0 10rem;
    width: 100%;
}
.feedback {
    background-position: center;
    background-size: cover;
    padding-top: 11.5rem;
    padding-bottom: 5rem;
    max-width: 1920px;
    margin: 0 auto;
}

.feedback .container {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.feedback .container h4 {
    color: var(--letters-blue);
    font-size:45px;


}

.feedback .container h2 {
    max-width: 35rem;
    color: var(--letters-subtitle-gray);
    text-align: center;
}

.feedback .container p {
    color: var(--letters-subtitle-gray);
    font-size: 1.2rem;
    margin-top: 1rem;
    text-align: center;
}

.feedback .voices {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
}

.feedback .voices .voice {
    flex: 1 0 400px;
    background: white;
    padding: 2rem;
    border-radius: .7rem;
}

.feedback .voices .voice .profile {
    display: flex;
    align-items: center;
}

.feedback .voices .voice .profile img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
    border-radius: 2rem;
}
.feedback .voices .voice img {
    width: 20px;
    height: 20px;
    object-fit: cover;
    object-position: center;
    border-radius: 2rem;
    margin-bottom: -5px;
}

.feedback .voices .voice .profile .detail {
    margin-left: 1rem;
}

.feedback .voices .voice .profile .detail li {
    list-style: none;
}

.feedback .voices .voice .profile .detail li:first-child {
    font-size: 1.1rem;
    color: #000;
    font-weight: 600;
}

.feedback .voices .voice p {
    margin-top: -1rem;
}
.feedback .voices .voice a{
    color: blue;
    font-weight: 500;
}


.feedback .container .label,
.feedback .container .heading,
.feedback .container .paragraph {
    transform: translate(0, 10px);
    opacity: 0;
}

.feedback .voices .voice {
    transform: translate(0, 100px);
    opacity: 0;
}

@media (max-width: 430px){
    section{
        padding: 0 2rem;
    }
    .feedback .voices .voice{
        flex: 1 0 200px;
    }
}
@media (max-width: 390px){
    section{
        padding: 0 2rem;
    }
    .feedback .voices .voice{
        flex: 1 0 200px;
    }
}