/* Page Detail Slider Styles */

.page-detail-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.page-detail-slider .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.page-detail-slider .slide {
    min-width: 100%;
    box-sizing: border-box;
}

.page-detail-slider .slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Bootstrap classes for layout and responsiveness */
.page-detail-slider-container {
    @apply container mx-auto px-4;
}

.page-detail-slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.page-detail-slider-control {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
}

/* Custom slider styles for carousel */

.custom-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.custom-slider .carousel-control-prev,
.custom-slider .carousel-control-next {
    position: absolute; /* Ensure they are absolutely positioned */
    z-index: 20; /* Bring them above the images */
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
    cursor: pointer; /* Ensure it's clickable */
    padding: 10px;
}

.custom-slider .carousel-control-prev-icon,
.custom-slider .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Optional: background color for icons */
    border-radius: 50%; /* Circular icon background */
}

.custom-slider .carousel-control-prev,
.custom-slider .carousel-control-next {
    top: 50%; /* Center them vertically */
    transform: translateY(-50%);
}

/* Ensure buttons have proper styling */
.custom-slider .carousel-control-prev,
.custom-slider .carousel-control-next {
    color: blue !important; /* Set the color of the icons */
}

.custom-slider .carousel-control-prev-icon,
.custom-slider .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Apply background color for icons */
}

/* Responsive grid for image chunks */
.custom-slider .carousel-inner {
    position: relative;
}

.custom-slider .carousel-item {
    position: relative;
}

.custom-slider .carousel-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-slider .carousel-item .row {
    display: flex;
    justify-content: space-around;
}

.custom-slider .carousel-item .col-md-4 {
    margin-bottom: 10px; /* Add margin between images */
}

.custom-slider .card-img {
    width: 100%;
    height: auto;
}
.slider-buttons{
    border:1px;
    background-color: rgb(201, 201, 201);
    border-radius: 25px;
}