/*-----------------------------------*\
  #REVIEWS SECTION
\*-----------------------------------*/


.reviews-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 96px;
    position: relative;
    background-image: url('../images/Textures/paper-texture.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.reviews-main-container {
    width: 1280px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
}


.reviews-title-container {
    width: 508px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0px;
    border-top: solid 3px var(--border-primary);
    border-bottom: solid 3px var(--border-primary);
}

.reviews-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.single-review-card {
    width: 220px;
    height: 302px;
    border: solid 2px var(--border-primary);
    background-color: var(--beige-02);
    padding: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}


.review-comment-icon-container {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--neutral-18);
    border-radius: 50%;
}

.review-comment-icon-container.red {

    background-color: var(--brand-red-02);
}



.reviewer-name {
    margin-top: 8px;
}

.review-stars-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
}


.review-star {
    filter: var(--brand-red-02-filter);
}

.review-message {
    margin-top: 16px;
    color: var(--tertirary);
}


.reviews-ilustration {
    position: absolute;

    top: -96px;
    left: -24px;
}


@media (width < 1320px) {

    .reviews-section {
        padding: 96px 0px;
    }

    .reviews-main-container {
        width: 1000px;
        gap: 32px;
    }


    .reviews-title-container {
        width: 368px;

    }

    .reviews-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
    }

    .single-review-card {
        width: 188px;
        height: 320px;

        padding: 24px 16px;

    }


    .review-comment-icon-container {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

}

@media (width < 1100px) {

    .reviews-section {
        padding: 96px 48px;
    }

    .reviews-main-container {
        width: 100%;
        gap: 32px;
    }


    .reviews-title-container {
        width: 368px;

    }

    .reviews-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
    }

    .single-review-card {
        width: calc((100% -400px) / 3);
        height: auto;
        min-height: 320px;
        padding: 24px 16px;

    }


    .review-comment-icon-container {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }


    .reviews-ilustration {
        height: 180px;
    }

    .reviews-title {
        font-size: 32px !important;
        line-height: 40px !important;
    }

}

@media (width < 970px) {
    .reviews-main-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .reviews-title-container {
        width: 100%;

    }


    .reviews-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .single-review-card {
        width: 220px;
        height: 302px;
        padding: 24px;

        gap: 8px;
    }


    .review-comment-icon-container {
        width: 48px;
        height: 48px;

    }

    .reviews-title {
        font-size: 32px !important;
        line-height: 40px !important;
        max-width: 560px;
    }
}

@media (width < 900px) {
    .reviews-section {
        padding: 96px 32px;
    }
}

@media (width < 700px) {
    .reviews-section {
        padding: 96px 20px;
    }

    .reviews-title {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .reviews-container {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
    }
    
    .single-review-card {
        flex: 0 0 auto; /* Prevent shrinking */
        scroll-snap-align: start;
        min-width: 220px;  /* or your desired card width */
        height: auto;
    }

    .reviews-container::-webkit-scrollbar {
        display: none;
    }
    .reviews-container {
        -ms-overflow-style: none; 
        scrollbar-width: none;
    }
}


@media (width < 550px) {
.reviews-ilustration {
    height: 150px;
    top: -56px;

}

}