@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

*{
    box-sizing: border-box;
}

body { 
    background-color: #f4f4f4;
    font-family: 'Cairo' , sans-serif;
    display: flex;
    align-items:center; 
    justify-content: center;
    height: 100vh; 
    overflow: hidden ;
    margin:0; 
    padding: 10px
}

.testimonial-container {
    background-color: #476de4;
    color : white ; 
    border-radius: 15px;
    margin: 20px auto ;
    padding : 50px 80px ;
    max-width: 786px;
    position: relative;
}

.fa-quote {
    color: rgb(255 255 255 / 35%) ; 
    font-size : 28px ;  
    position: absolute;
    top: 70px ;
}

.fa-quote-right {
    left: 40px;
}

.fa-quote-left {
    right:20px ; 

}

.testimonial {
    line-height: 28px;
    text-align: end;
}

.user { 
    display: flex;
    align-items: center;
    justify-content: center;

}
.user .user-image {
    border-radius: 50%;
    height:75px ;
    width:75px ;
    object-fit: cover;
}
.user .user-details { 
    margin-left: 3px;
}


.user .user-name {
    font-weight: normal;
    margin: 0px;
}

.user .rolse {
    font-weight: normal;
    margin: 2px 0px;
}

.progress-bar { 
    background-color: white;
    height: 4px; 
    width: 100% ;
    animation: grow 5s linear infinite;
    transform-origin: right;

}

@keyframes grow {
    0% {
        transform:  scaleX(0);
}
}

@media (max-width: 768px) {
    .testimonial-container {
        padding: 20px 30px !important;
    }

    .fa-quote{
        display: none !important ;
        
}
}