/* Main Swiper Container */
.swiper-container {
    width: 100%; /* Full width of the viewport */
    height: 70vh; /* 70% of the viewport height */
    display: flex;
    justify-content: center; /* Center the swiper wrapper horizontally */
    align-items: center; /* Center the swiper wrapper vertically */
    position: relative;
    overflow: hidden;
}

/* Swiper Slides */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    width: 100%; /* Ensures each slide takes full width */
    overflow: hidden; /* Prevents content overflow */
}

/* Swiper Wrapper */
.swiper-wrapper {
    display: flex;
    flex-direction: column; /* Stack slides vertically */
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Pagination for Main Swiper */
.swiper-pagination {
    position: absolute;
    bottom: 10px; /* Distance from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Exact centering */
    z-index: 10; /* Place above other elements */
    display: flex; /* Align bullets horizontally */
    justify-content: center;
    gap: 8px; /* Space between bullets */
}

/* Pagination Bullets */
.swiper-pagination-bullet {
    width: 16px; /* Bullet size */
    height: 16px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark background */
    border: 2px solid rgba(255, 255, 255, 0.5); /* White border for visibility */
    border-radius: 50%; /* Circular bullets */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Active Pagination Bullet */
.swiper-pagination-bullet-active {
    background-color: rgba(0, 0, 0, 1); /* Fully opaque dark background */
    border-color: rgba(0, 0, 0, 1); /* Solid dark border */
    transform: scale(1.4); /* Larger size for active bullet */
}

/* Hover Effect for Pagination Bullets */
.swiper-pagination-bullet:hover {
    background-color: rgba(255, 255, 255, 0.5); /* Brighter background on hover */
    border-color: rgba(0, 0, 0, 1); /* Dark border on hover */
    transform: scale(1.2); /* Slightly larger on hover */
}

/* Product Swiper Container */
.swiper-container-product {
    width: 100%;
    height: 100%; /* Full container height */
    min-height: 60vh; /* Minimum height */
    position: relative;
    overflow: hidden;
    padding: 100px 25px; /* Add padding around */
}

    /* Product Swiper Wrapper */
    .swiper-container-product .swiper-wrapper {
        display: flex; /* Horizontal alignment for slides */
        flex-direction: row; /* Explicit row layout */
        transition: transform 0.5s ease; /* Smooth transitions */
    }

    /* Product Swiper Slides */
    .swiper-container-product .swiper-slide {
        position: relative; /* Positioning for overlays */
        flex: 0 0 372px; /* Fixed width for slides */
        height: 100%; /* Full height of container */
        box-sizing: border-box; /* Include padding and border in dimensions */
        border-radius: 25px; /* Rounded corners */
        background: #ccc; /* Placeholder background */
        display: flex;
        justify-content: left; /* Align content to the left */
        text-align: left;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; /* Subtle shadow */
        overflow: hidden; /* Prevent content overflow */
    }

    /* Product Swiper Pagination */
    .swiper-container-product .swiper-pagination-product {
        position: absolute;
        bottom: 10px; /* Distance from the bottom */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Exact centering */
        z-index: 10;
        display: flex; /* Align bullets horizontally */
        justify-content: center;
        gap: 8px; /* Space between bullets */
    }

    /* Product Swiper Navigation Buttons */
    .swiper-container-product .swiper-button-next-product,
    .swiper-container-product .swiper-button-prev-product {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        color: #000; /* Dark color for navigation buttons */
    }

    /* Slide Overlay */
    .swiper-container-product .swiper-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 30%; /* Overlay height */
        background: rgba(0, 0, 0, 0.0); /* Transparent overlay */
        z-index: 1; /* Below content but above background */
        pointer-events: none; /* Non-interactive overlay */
    }

/* Responsive Adjustments */
@media (min-width: 1441px) {
    .swiper-container-product .swiper-slide {
        flex: 0 0 405px; /* Adjust slide width */
    }
}

@media (max-width: 1068px) {
    .swiper-container-product .swiper-slide {
        flex: 0 0 344px; /* Adjust slide width */
    }
}

@media (max-width: 734px) {
    .swiper-container-product .swiper-slide {
        flex: 0 0 260px; /* Adjust slide width */
    }
}