/* Reviews section styling */
#reviews {
    padding: 20px; /* Padding around the reviews section */
    /* background-color: #1F96FF; /* Light background color for contrast */
    color: #333; /* Dark text color for readability */
    overflow: hidden; /* Hide any content that overflows the section */
}

/* Container for the reviews */
.reviews-container {
    max-width: 1200px; /* Max width to center the content */
    margin: 0 auto; /* Center the container horizontally */
    text-align: center; /* Center-align the text */
    position: relative; /* Relative positioning for flexibility */
	/* background-color: #1F96FF; /* Light background color for contrast */
}

/* Styling for the section heading */
.reviews-container h2 {
	font-size: 24px;
	font-family: "Montserrat", sans-serif;
	font-weight: 900;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: var(--blue);
	text-align: left; /* left-align the text */
}

.reviews-container p {
	font-size: 18px;
	line-height: 28px;
}

/* Slider that holds and scrolls the reviews */
.reviews-slider {
    display: flex; /* Flexbox layout for horizontal alignment */
    justify-content: space-around; /* Space between review boxes */
    align-items: center; /* Center items vertically */
    flex-wrap: nowrap; /* Prevent wrapping, keep reviews in one line */
    gap: 20px; /* Space between each review box */
    animation: scrollReviews 15s linear infinite; /* Smooth, infinite scrolling animation */
}

/* Styling for each individual review box */
.review-box {
    min-width: 300px; /* Minimum width for each review box */
    padding: 15px; /* Padding inside each box */
    /* background: #808080; /* Grey background for the review box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    border-radius: 8px; /* Rounded corners for the review box */
    font-size: 1rem; /* Standard font size for readability */
}

/* Styling for the star ratings */
.stars {
    margin-top: 10px; /* Space above the star ratings */
    font-size: 1.5rem; /* Larger font size for visibility */
    color: #FFA500; /* Gold color for the stars */
}

/* Keyframes for the scrolling animation */
@keyframes scrollReviews {
    0% {
        transform: translateX(100%); /* Start with the content off-screen to the right */
    }
    100% {
        transform: translateX(-100%); /* End with the content off-screen to the left */
    }
}