/* Background color for elements with class .bg-green */
.bg-green {
    background-color: #2e137e;
}

/* Text color for elements with class .txt-white */
.txt-white {
    color: white;
}

/* Main container styling */
main.reviews {
    font-family: Arial, sans-serif;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns on desktop */
    gap: 15px; /* Space between cards */
    margin: 0;
    width: 100%;
    position: relative;
}

/* Styling for each review card */
.review-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    box-sizing: border-box; /* Include padding in the width */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Distribute space between content and footer */
    min-height: 350px; /* Minimum height to ensure consistency */
}

/* Header styling within each review card */
.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Author photo styling */
.author-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f39c12;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    margin-right: 10px;
}

/* Author info container styling */
.author-info {
    display: flex;
    flex-direction: column;
}

/* Author name styling */
.author-name {
    margin: 0;
    font-size: 18px;
}

/* Review rating styling */
.review-rating {
    color: #f39c12;
}

/* Star icon styling */
.star {
    font-size: 18px;
}

/* Review text styling */
.review-text {
    margin: 15px 0;
    line-height: 1.5;
}

/* Review date styling */
.review-date {
    font-size: 12px;
    color: #999;
}

/* Styling for pill-shaped white button */
.btn-pill-white {
    display: inline-block; /* Ensure the button is treated as an inline element */
    padding: 0.5rem 1rem; /* Add padding to the button */
    font-size: 1rem; /* Set font size */
    color: black; /* Text color */
    background-color: white; /* Background color */
    border-radius: 50px; /* Make the button pill-shaped */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effects */
}

/* Styling for visited button state */
.btn-pill-white:visited {
    color: black; /* Maintain text color after clicking */
    background-color: white; /* Maintain the same background color */
    text-decoration: none; /* Ensure underline is removed after visit */
}

/* Styling for button hover state */
.btn-pill-white:hover {
    background-color: white; /* Background color on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    text-decoration: none; /* Ensure underline is removed on hover */
    color: black; /* Ensure text color stays the same on hover */
}

/* Styling for button active state */
.btn-pill-white:active {
    background-color: white; /* Background color when button is pressed */
    transform: scale(1.05); /* Keep the enlarged state when actively pressed */
    text-decoration: none; /* Ensure underline is removed on click */
}

/* green pill */

/* Styling for pill-shaped white button */
.btn-pill-green {
    display: inline-block; /* Ensure the button is treated as an inline element */
    padding: 0.5rem 1rem; /* Add padding to the button */
    font-size: 1rem; /* Set font size */
    color: #fff; /* Text color */
    background-color: #2e137e; /* Background color */
    border-radius: 50px; /* Make the button pill-shaped */
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition effects */
}

/* Styling for visited button state */
.btn-pill-green:visited {
    color: #fff; /* Maintain text color after clicking */
    background-color: #2e137e; /* Maintain the same background color */
    text-decoration: none; /* Ensure underline is removed after visit */
}

/* Styling for button hover state */
.btn-pill-green:hover {
    background-color: #2e137e; /* Background color on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    text-decoration: none; /* Ensure underline is removed on hover */
    color: #fff; /* Ensure text color stays the same on hover */
}

/* Styling for button active state */
.btn-pill-green:active {
    background-color: #2e137e; /* Background color when button is pressed */
    transform: scale(1.05); /* Keep the enlarged state when actively pressed */
    text-decoration: none; /* Ensure underline is removed on click */
}

/* Responsive design adjustments */
@media (max-width: 1200px) {
    main.reviews {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
    }
}

@media (max-width: 768px) {
    main.reviews {
        grid-template-columns: 1fr; /* One column on mobile screens */
    }
}