/* Carousel Container */
.carousel-container {
    position: relative;
    width: 100%; /* Full width of the parent section */
    overflow: hidden; /* Hide items outside the viewport */
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10px 0; /* Add some top and bottom spacing */
}

/* Carousel Wrapper */
.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px; /* Spacing between items */
}

/* Carousel Item */
.carousel-item {
    flex-shrink: 0; /* Prevent shrinking */
    width: calc((100% - 40px) / 3); /* Ensure 3 items fit with 20px gap */
    text-align: center;
    background-color: #fff; /* White background */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0; /* Remove extra padding */
}

/* Image inside Carousel Item */
.carousel-item img {
    width: 100%; /* Full width of the item */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px 8px 0 0; /* Rounded corners for the top */
    display: block;
}

/* Content inside Carousel Item */
.carousel-item h3,
.carousel-item p {
    margin: 10px 15px;
    font-size: 14px;
}

/* Hover Effect for Carousel Items */
.carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Navigation Buttons */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: white; /* White arrow */
    border: none;
    border-radius: 5px; /* Slightly rounded corners for a modern look */
    width: 50px; /* Width of the button */
    height: 40px; /* Height of the button */
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
}

/* Left Button Position */
.carousel-button.left {
    left: 10px; /* Position left button slightly inward */
}

/* Right Button Position */
.carousel-button.right {
    right: 10px; /* Position right button slightly inward */
}

/* Hover Effect */
.carousel-button:hover {
    background: rgba(0, 0, 0, 0.8); /* Darker background on hover */
    transform: translateY(-50%) scale(1.05); /* Slight scale effect */
}

/* SVG Icon Inside the Button */
.carousel-button svg {
    width: 20px; /* Size of the arrow */
    height: 20px;
    fill: white; /* Arrow color */
    transition: fill 0.3s ease; /* Smooth color transition */
}

/* Change Arrow Color on Hover */
.carousel-button:hover svg {
    fill: #ffcc00; /* Golden arrow on hover */
}

/* Pagination Dots Positioned Above the Carousel */
.carousel-pagination {
    position: relative; /* Ensure dots are part of the normal flow */
    margin-bottom: 15px; /* Space between dots and carousel */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Spacing between dots */
}

/* Dots Style */
.carousel-pagination .dot {
    width: 12px;
    height: 12px;
    background-color: #bbb; /* Default dot color */
    border-radius: 50%; /* Circular dots */
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.carousel-pagination .dot.active {
    background-color: #ffcc00; /* Highlight active dot */
}

/* Responsive Design */
@media (max-width: 768px) {
    .carousel-item {
        width: calc((100% - 20px) / 2); /* Show 2 items on smaller screens */
    }
}

@media (max-width: 480px) {
    .carousel-item {
        width: 100%; /* Show 1 item on very small screens */
    }
}