/* ===========================
   Sunnah.pk Google Reviews
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:#ffffff;
    color:#222;
}

.reviews-section{

    position:relative;

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:24px 0;

    overflow:hidden;

}

.reviews-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.reviews-summary{

    display:flex;

    align-items:center;

    gap:12px;

}

.stars{

    color:#fbbc04;

    font-size:22px;

    letter-spacing:2px;

}

#rating{

    font-size:22px;

    font-weight:700;

}

.divider{

    color:#bbb;

}

#reviewCount{

    color:#666;

    font-size:15px;

}

.google-logo{

    width:26px;

    height:26px;

    transition:.25s;

}

.google-logo:hover{

    transform:scale(1.08);

}

#marquee{

    overflow:hidden;

    width:100%;

}

#track{

    display:flex;

    gap:20px;

}

/* ===========================
   Review Cards
=========================== */

.card{

    width:340px;

    min-height:190px;

    background:#fff;

    border-radius:20px;

    padding:20px;

    flex-shrink:0;

    box-shadow:
        0 8px 28px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 16px 40px rgba(0,0,0,.10);

}

.card-top{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;

}

.avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    object-fit:cover;

    background:#eee;

    flex-shrink:0;

}

.author{

    font-size:16px;

    font-weight:600;

    color:#222;

}

.time{

    margin-top:3px;

    font-size:13px;

    color:#8a8a8a;

}

.card-stars{

    color:#fbbc04;

    font-size:17px;

    margin-bottom:12px;

    letter-spacing:1px;

}

.review{

    color:#555;

    font-size:14px;

    line-height:1.65;

    display:-webkit-box;

    -webkit-line-clamp:4;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.card a{

    color:inherit;

    text-decoration:none;

}

.fade-left,
.fade-right{

    position:absolute;

    top:70px;

    bottom:0;

    width:90px;

    pointer-events:none;

    z-index:20;

}

.fade-left{

    left:0;

    background:linear-gradient(
        to right,
        #fff,
        transparent);

}

.fade-right{

    right:0;

    background:linear-gradient(
        to left,
        #fff,
        transparent);

}

@media(max-width:768px){

    .reviews-header{

        flex-wrap:wrap;

        gap:12px;

    }

    .card{

        width:290px;

    }

}

#track{

    display:flex;

    gap:20px;

    width:max-content;

    animation:scrollReviews 60s linear infinite;

    will-change:transform;

}

#marquee:hover #track{

    animation-play-state:paused;

}

@keyframes scrollReviews{

    from{
        transform:translateX(0);
    }

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

}