/* Container for the reviews grid */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Show 2 reviews per row */
    gap: 1rem; /* Space between reviews */
}

/* Style each review card */
.review-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Card title styling */
.card-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Card subtitle for rating */
.card-subtitle {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #666;
}

/* Card text styling */
.card-text {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Date styling */
.text-muted {
    font-size: 0.8rem;
}

/* Media queries for responsiveness */

/* On screens smaller than 768px (tablets and smaller) */
@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: repeat(1, 1fr); /* Show 1 review per row */
    }

    .review-card {
        padding: 10px; /* Reduce padding for smaller screens */
    }
}

/* On screens smaller than 480px (mobile phones) */
@media (max-width: 480px) {
    .reviews-grid {
        grid-template-columns: repeat(1, 1fr); /* Show 1 review per row */
    }

    .review-card {
        padding: 8px; /* Further reduce padding */
    }

    .card-title {
        font-size: 1rem; /* Reduce font size for smaller screens */
    }

    .card-subtitle, .card-text {
        font-size: 0.85rem; /* Reduce font size for smaller screens */
    }

    .text-muted {
        font-size: 0.7rem; /* Reduce date font size */
    }
}









/* Custom styles for the review submission modal */
.modal-content {
    background-color: #f9f9f9; /* Light gray background for the modal */
    border: 1px solid #ffa500; /* Orange border to match the theme */
    color: #333; /* Dark text color for readability */
    border-radius: 8px; /* Rounded corners for a smoother look */
}

.modal-header {
    background-color: #ffa500; /* Orange header */
    color: #fff; /* White title text */
    border-top-left-radius: 8px; /* Rounded top-left corner */
    border-top-right-radius: 8px; /* Rounded top-right corner */
}

.modal-footer {
    background-color: #f1f1f1; /* Light gray footer to soften contrast */
    border-bottom-left-radius: 8px; /* Rounded bottom-left corner */
    border-bottom-right-radius: 8px; /* Rounded bottom-right corner */
}

.modal-body {
    background-color: #fff; /* White body */
    color: #333; /* Dark text color in body */
    padding: 20px; /* Add padding for better spacing */
}

.modal-title {
    font-size: 1.25rem;
    font-weight: bold; /* Slightly bolder title for emphasis */
}

.btn-close {
    background-color: #ffa500; /* Orange close button */
    border-color: #ffa500; /* Orange border */
    color: #fff; /* White text for the close button */
    border-radius: 50%; /* Rounded close button */
    padding: 8px 12px; /* Padding for the close button */
}

.btn-close:hover {
    background-color: #ff8c00; /* Slightly darker orange on hover */
    border-color: #ff8c00; /* Border matches the hover color */
}

.btn-secondary {
    background-color: #ffa500; /* Orange button */
    color: white;
    border: none;
    border-radius: 4px; /* Rounded corners for buttons */
    padding: 8px 16px; /* Better button padding */
}

.btn-secondary:hover {
    background-color: #ff8c00; /* Slightly darker orange on hover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
}