body {
    font-family: 'Inter', sans-serif;
}
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem; /* Rounded corners for the carousel */
}
.carousel-slide {
    display: none; /* Hide all slides by default */
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}
.carousel-slide.active {
    display: block; /* Show active slide */
    opacity: 1;
}
.carousel-slide img {
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 1rem;
}

/* Adjust height for smaller screens */
@media (max-width: 768px) {
    .carousel-slide img {
        height: 250px;
    }
}

/* Testimonial Carousel Specific Styles */
.testimonial-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.testimonial-carousel-inner {
    display: flex; /* Use flexbox for horizontal layout */
    transition: transform 0.5s ease-in-out; /* Smooth slide transition */
}
.testimonial-carousel-slide {
    min-width: 100%; /* Each slide takes full width of its container */
    box-sizing: border-box; /* Include padding/border in width */
    padding: 1rem; /* Add some internal padding */
}
/* Hide navigation buttons on smaller screens if needed, or adjust their size */
@media (max-width: 768px) {
    .testimonial-carousel-nav-btn {
        padding: 0.5rem;
        font-size: 1rem;
    }
}

/* Gallery Image Sizing for a 1280x1165px proportion */
/* This uses padding-bottom trick for aspect ratio */
.gallery-item {
    position: relative;
    width: 100%;
    padding-bottom: calc(1165 / 1280 * 100%); /* Maintain 1280x1165 aspect ratio */
    overflow: hidden;
    border-radius: 0.5rem; /* Slightly rounded corners for gallery images */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Tailwind's shadow-lg */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Tailwind's shadow-xl */
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the area without distortion */
    border-radius: 0.5rem;
}

/* Responsive grid adjustments for gallery */
/* For very small screens, maybe 1 column or 2 */
.grid-cols-2-xs {
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* Default 1 column */
}
@media (min-width: 480px) { /* Extra Small screens (e.g., small phones in landscape) */
    .grid-cols-2-xs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 640px) { /* Small screens (sm) */
    .grid-cols-2-sm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 768px) { /* Medium screens (md) */
    .grid-cols-3-md {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* Large screens (lg) */
    .grid-cols-4-lg {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1280px) { /* Extra large screens (xl) - For potentially more columns */
    .grid-cols-5-xl {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}