/* =========================
SECTION
========================= */

.home{
    width:100%;
    display:flex;
    justify-content:center;
    margin:20px 0 10px;
}

.home-section{
    width:95%;
    background:#D9D0E1;
    border-radius:18px;
    padding:30px 20px;
    overflow:hidden;
}

/* =========================
TITLE
========================= */

.service-title{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:32px;
}

.service-title::before,
.service-title::after{
    content:"";
    flex:1;
    height:1px;
    background:#431469;
}

.service-title span{
    padding:10px 24px;
    background:#431469;
    color:#fff;
    border-radius:40px;
    font-size:17px;
    font-weight:600;
}

/* =========================
SLIDER
========================= */

.review-slider{
    overflow:hidden;
    position:relative;
    width:100%;
}

.review-track{
    display:flex;
    gap:22px;
    width:max-content;
    animation:scrollReviews 45s linear infinite;
}

.review-slider:hover .review-track{
    animation-play-state:paused;
}

/* =========================
CARD
========================= */

.review-card{
    width:290px;
    min-height:255px;
    background:#fff;
    border-radius:20px;
    padding:18px;
    flex-shrink:0;
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    border:1px solid rgba(67,20,105,0.06);

    box-shadow:
    0 4px 12px rgba(67,20,105,0.08);

    transition:0.3s ease;
}

.review-card:hover{
    transform:translateY(-5px);

    box-shadow:
    0 10px 24px rgba(67,20,105,0.14);
}

/* TOP BAR */

.review-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(to right,#431469,#8e44ec);
}

/* =========================
HEADER
========================= */

.review-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
}

/* IMAGE */

.review-avatar{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #f1e7fb;
    flex-shrink:0;
}

/* USER INFO */

.review-user{
    flex:1;
}

.review-user h3{
    font-size:16px;
    color:#2d163f;
    margin-bottom:4px;
    font-weight:700;
}

.review-time{
    font-size:12px;
    color:#8d7d98;
}

/* =========================
STARS
========================= */

.review-stars{
    color:#f5b301;
    font-size:15px;
    letter-spacing:1px;
    margin-bottom:12px;
}

/* =========================
TEXT
========================= */

.review-content{
    flex:1;
    display:flex;
    flex-direction:column;
}

.review-text{
    font-size:14px;
    line-height:1.7;
    color:#555;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;

    overflow:hidden;
    text-overflow:ellipsis;
}

/* EXPAND */

.review-card.active .review-text{
    -webkit-line-clamp:unset;
    overflow:visible;
}

/* MORE BUTTON */

.read-more{
    margin-top:8px;
    font-size:13px;
    font-weight:600;
    color:#6d2ea6;
    cursor:pointer;
    display:none;
    width:fit-content;
}

/* =========================
ANIMATION
========================= */

@keyframes scrollReviews{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

    .review-card{
        width:250px;
        min-height:240px;
    }
}

@media(max-width:480px){

    .review-track{
        gap:16px;
    }

    .review-card{
        width:225px;
        padding:16px;
    }

    .review-avatar{
        width:52px;
        height:52px;
    }
}