.gallery-item {
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    border: 2px solid #ddd; /* Light border around the gallery item */
    border-radius: 12px; /* Rounded corners */
    margin: 8px; /* Adds space between the gallery items */
    position: relative; /* Ensure position relative for correct layout */
}

.gallery-image {
    position: relative; /* Set the parent container to relative positioning */
    width: 100%;
    height: 500px; /* Adjust height to your desired look */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures that the image does not overflow out of the div */
}

.gallery-image img {
    position: absolute; /* Position the image absolutely within the parent */
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the area without distorting */
    transform: translate(-50%, -50%); /* Center the image within the container */
    transition: transform 0.3s ease;
    border-radius: 12px; /* Matches the rounded corners */
    border: 2px solid rgba(0, 0, 0, 0.1); /* Subtle border around the image */
}

.gallery-item:hover .gallery-image img {
    transform: translate(-50%, -50%) scale(1.05); /* Slight zoom effect on hover */
    border-color: #f39c12; /* Changes the border color on hover */
}

/* Optional: spacing adjustments for a clean gallery look */
.row.g-4 > [class*='col-'] {
    padding: 0.5rem;
}