:root {
    --img-bg: url('/images/HomeImages/IndexImages/ReviewsSectionImages/reviews_background.png');
    --phone-img-bg: url('/images/HomeImages/IndexImages/ReviewsSectionImages/reviews_phone_bg.png');
    --review-card: linear-gradient(to right, #20338A, #000B3C);
    --review-card-border: #003D7B;
    --reviews-bg-dark: linear-gradient(270deg, rgba(2, 11, 31, 0) 0%, #020B1F 48%);
}

.reviews-container {
    background-image: var(--img-bg),var(--phone-img-bg);
    background-position: center, center;
    background-size: cover, 420px 856px;
    background-repeat: no-repeat, no-repeat;
    height: 960px;
}

.reviews-text-container {
    width: 420px;
    padding-top: 80px;
    padding-right: 60px;
    padding-left: 60px;
}



.review-card {
    flex: 0 0 calc(100% / 3);
    height: 187px;
    background: var(--review-card);
    border-style: solid;
    border-color: var(--review-card-border);
    border-width: 1px;
    border-radius: 12px;
    padding: 16px;
}

.full-name-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 120%;
    color: var(--main-page-text-color);
    margin-bottom: 0px;
    padding-left: 16px;
}

.user-role-text {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 16px;
    line-height: 120%;
    color: var(--main-page-text-color);
    margin-top: 8px;
    margin-bottom: 16px;
}

.user-comment-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: var(--main-page-text-color);
    display: -webkit-box; /* дозволяє використовувати line-clamp */
    -webkit-box-orient: vertical; /* вертикальна орієнтація блоку */
    -webkit-line-clamp: 3; /* максимум рядків */
    overflow: hidden; /* обрізаємо зайвий текст */
    text-overflow: ellipsis;
}

.avatar-img {
    border-radius: 50%;
    object-fit: cover;
    width: 42px;
    height: 42px;
}


#reviews-section {
    position: relative;
}
.cards-container {
    width: 100%;
}

@media (min-width: 768px) {
    #reviews-section::before, #reviews-section::after {
        content: "";
        position: absolute;
        top: 0;
        background: var(--reviews-bg-dark);
        z-index: 1;
        pointer-events: none;
        width: 250px;
        height: 100%;
    }

    #reviews-section::after {
        right: 0;
        transform: scaleX(-1);
    }
}

@media (max-width: 768px) {

    .reviews-text-container{
        width:100%;
    }

    .reviews-container {
        background-size: cover, 353px 856px;
    }

    .cards-container {
        width: 353px;
    }

    .review-card {
        flex: 0 0 90%;
        height: 187px;
        background: var(--review-card);
        border-color: #003D7B;
        border-width: 1px;
        border-radius: 12px;
        padding: 16px;
    }

    .carousel-container {
        overflow-x: auto
    }

        .carousel-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
}

/*.carousel-track {
    display: flex;
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);*/ /* половина ширини, бо продублюємо елементи */
/*}
}*/