/*//------------ STAR RATING -----------------*/
[style^=--rating]::after {
    content: "★★★★★";
    font-size: 2em;
    white-space: nowrap;
    background: linear-gradient(90deg, #fb0 calc(var(--rating) * 20%), #ddd calc(var(--rating) * 20%));
    background-clip: text;
    -webkit-background-clip: text;
    color: #0000;
}
/*//------------ STAR RATING -----------------*/


/*//----------------- USER REVIEW -----------------------------------*/
.review-container {
    width: 100%;
    padding-top:30px;
    padding-bottom:20px;
    color:black;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.description {
    text-align: center;
    width: 43%;
    color:grey;
}

.clientImage {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.clientImage span {
    margin-left: 10px;
}

.clientImage img {
    width: 40px;
}

.reviewSection {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.reviewItem {
    width: 300px;
    padding: 10px;
    margin: 1rem;
    cursor: pointer;
    border-radius: 10px;
    
    border: 1px solid #10102a;
    transition: all .2s linear;
}

.reviewItem:hover {
    border-color: aqua;
    transform: scale(1.01);
    
    box-shadow: 0 0px 5px 0px #cbc0c0;
}

.top {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.top ul {
    display: flex;
    list-style: none;
}

.top ul li {
    padding-left: 4px;
}

article p {
    font-size: 15px;
    font-weight: 100;
    margin-bottom: 1rem;
}


@media screen and (max-width:700px) {
    .review-container {
        height: auto;
    }

    .description {
        width: 90%;
    }
}

@media screen and (max-width:375px) {
    .reviewSection {
        padding: 0;
    }

    .reviewItem {
        width: 100%;
    }

    .clientImage {
        margin-bottom: 0.6rem;
    }

    .top {
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
}
/*//----------------- USER REVIEW -----------------------------------*/

/*//----------------- PROGRESS BAR-----------------------------------*/

@property --progress-value {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

:root {
    --progress-bar-color: #cfd8dc;
    --progress-value-color: #2196f3;
    --progress-empty-color-h: 4.1;
    --progress-empty-color-s: 89.6;
    --progress-empty-color-l: 58.4;
    --progress-filled-color-h: 122.4;
    --progress-filled-color-s: 39.4;
    --progress-filled-color-l: 49.2;
}


.col-md-8 progress {
    height: 5px;
}

progress[value] {
    display: block;
    position: relative;
    appearance: none;
    width: 80%;
    height: 10px;
    border: 0;
    --border-radius: 10px;
    border-radius: var(--border-radius);
    counter-reset: progress var(--progress-value);
    --progress-value-string: counter(progress) '%';
    --progress-max-decimal: calc(var(--value, 0) / var(--max, 0));
    --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0));

    @supports selector(::-moz-progress-bar) {
        --progress-value-decimal: calc(var(--value, 0) / var(--max, 0));
    }

    --progress-value-percent: calc(var(--progress-value-decimal) * 100%);
    --progress-value-color: hsl( calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg) calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%) calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%) );
    animation: calc(3s * var(--progress-max-decimal)) linear 0.5s 1 normal both progress;
}

    progress[value]::-webkit-progress-bar {
        background-color: var(--progress-bar-color);
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    progress[value]::-webkit-progress-value {
        width: var(--progress-value-percent) !important;
        background-color: var(--progress-value-color);
        border-radius: var(--border-radius);
    }

    progress[value]::-moz-progress-bar {
        width: var(--progress-value-percent) !important;
        background-color: var(--progress-value-color);
        border-radius: var(--border-radius);
    }

    progress[value]::after {
        display: flex;
        align-items: center;
        justify-content: center;
        --size: 32px;
        width: var(--size);
        height: var(--size);
        position: absolute;
        left: var(--progress-value-percent);
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: var(--progress-value-color);
        border-radius: 50%;
        content: attr(value);
        content: var(--progress-value-string, var(--value));
        font-size: 12px;
        font-weight: 700;
        color: #fff;
    }

@keyframes progress {
    from {
        --progress-value: 0;
    }

    to {
        --progress-value: var(--value);
    }
}
/*//----------------- PROGRESS BAR-----------------------------------*/