/* CSS to reviews */

#reviews{
    height:auto;
    background-color: #f5f5f5;
}

.reviews{
    height:100%;
    background-color: #F3DCED;
    display: flex;
    padding-left: 9vw;
    padding-right: 9vw;
    padding-bottom: 4%;
}

.content-reviews{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.content-reviews h1{
    margin-top: 10vh;
    width:100%;
    background-color: transparent;
    text-align: center;
}

.cards-reviews{
    width:100%;
    margin-top: 2%;
}

.media-scroller2{
    width:100%;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns: 30%; /*deixar valor que deixa o ultimo item meio tapado meio de fora para mostrar que continua*/
    /*background-color: peru;*/
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    gap: 16px;
    padding-right: 6%;
}

.review-card {
    margin: 8%;
    width: 100%;
    height: 35vw;
    border-radius: 30px;
    overflow: hidden; /* Prevents scrollable content from overflowing outside */
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
    background-color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    padding: 12% 10%;
    position: relative; /* Ensures overlay is positioned relative to the card */
}

.review-card-content {
    overflow-y: auto; /* Makes only the content scrollable */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    position: relative; /* Keeps content stacking context */
    z-index: 1; /* Ensures content is above the background */
}

.blur-overlay {
    position: absolute; /* Positions the overlay relative to the card */
    top: 0;
    left: 0;
    width: 100%; /* Spans the width of the card */
    height: 100%; /* Spans the height of the card */
    backdrop-filter: blur(8px); /* Adds blur effect */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    z-index: 2; /* Ensures the overlay is above the content */
    background-color: rgba(255, 255, 255, 0.3); /* Adds a semi-transparent background */
    pointer-events: none; /* Prevents interaction with the overlay */
    transition: opacity 0.3s ease; /* Smooth opacity transition on hover */
}

.review-card:hover .blur-overlay {
    opacity: 0; /* Hides the overlay on hover */
}

.review-card:not(:hover) .blur-overlay {
    opacity: 1; /* Displays the overlay when not hovered */
}


.review-card:hover {
    transform: translateY(-10px); /* Moves the card up by 10px */
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2); /* Enhances shadow on hover */
}

.review-card p{
    font-size: 17px;
    line-height: 22px;
}

.review-card img {
    height: auto; /* Ensure the aspect ratio is maintained */
    width: 25%; /* Occupy 30% of the card width */
    margin-right: 20px; /* Add space between the image and text */
    border-radius: 15px; /* Optional: Add rounding to the image */
    object-fit: contain; /* Ensure the image is resized without distortion */
    align-self: flex-start; /* Align the image to the top of the card */
    margin-bottom: 6%;
}

/* Always-visible blur overlay */
/*
.blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    /*
    right: 0;
    bottom: 0;
    */
    /*
    width:100%;
    height:100%;
    backdrop-filter: blur(8px); /* Always blur the content behind */
    /*
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    /*
    z-index: 100; /* Place overlay above the content */
    /*
    background-color: rgba(255, 255, 255, 0.3); /* Optional: Add a semi-transparent white background */
    /*
    pointer-events: none; /* Prevent overlay from blocking interaction */
    /*
}

.review-card:hover .blur-overlay {
    opacity: 0; /* Hide the overlay on hover */
    /*
}

.review-card:not(:hover) .blur-overlay {
    opacity: 1;
}
    */