/* Gallery Section */
.gallery-section {
    background-color: #f8f9fa;
    padding-top: 50px;
}

.gallery-section h2 {
    font-family: 'Arial', sans-serif;
    font-size: 36px;
    color: #343a40;
}

.gallery-section p {
    font-size: 18px;
    color: #6c757d;
    margin-bottom: 40px;
    text-align: center;
}

/* Card Hover Effect */
.card {
    border: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(50px); /* Start with a slight downward translation */
}

/* Animate the cards into view */
.card.show {
    opacity: 1;
    transform: translateY(0); /* Bring back to the original position */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hover effect to zoom the images */
.card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* On hover, scale up the image */
.card:hover img {
    transform: scale(1.1); /* Zoom in */
}

/* Box-shadow on hover */
.card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Pagination Styling */
.pagination {
    margin-top: 30px;
}

.pagination .page-item .page-link {
    background-color: #f17945;
    color: white;
    border-radius: 50px;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
}

.pagination .page-item .page-link:hover {
    background-color: #fd7e14;
}

/* Disabled state for pagination */
.pagination .page-item.disabled .page-link {
    background-color: #e9ecef;
    color: #6c757d;
}

/* Modal Image Styling */
#imageModal img {
    width: 100%;
    max-height: 95vh;
    object-fit: cover;
}