.dashboard-conten-withslider {
    margin-top: 400px;
}

#slider-fresk {
    width: 100%;
    max-height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    .carousel-inner {
        .carousel-item {
            height: 400px;
            .carousel-image-fresk {
                position: relative;
                width: 100%;
                height: 100%;
                img {
                    width: 100% !important;
                    height: 100%;
                    object-fit: cover;
                }
                .gradient-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(180deg, rgba(0,0,0,0), #000);
                    pointer-events: none;
                }

            }
            .carousel-caption-fresk {
                position: absolute;
                right: 15%;
                bottom: 3.25rem;
                left: 15%;
                padding-top: 1.25rem;
                padding-bottom: 1.25rem;
                color: #fff;
                text-align: center;
                span, h2, p {
                    color: #fff !important;
                }
                .carousel-caption-label-fresk {
                    font-size: 14px;
                    font-weight: 500;
                }
                .carousel-caption-description-fresk {
                    width: 50%;
                    margin-inline: auto;
                }
                .carousel-button-fresk {
                    margin-top: 10px;
                }
            }
            &.sliderleftaligntext {
                .carousel-caption-fresk {
                    width: 90%;
                    left: 5%;
                    text-align: left;
                    .carousel-caption-description-fresk {
                        margin-left: 0 !important;
                    }
                }
            }
        }
    }
    .slider-controls-fresk {
        display: flex;
        position: absolute;
        bottom: 20px;
        right: 20px;
        justify-content: center;
        align-items: center;
        .current-slide,
        .total-slides {
            color: #fff;
            margin-inline: 0.5rem;
            font-size: 15px;
            font-weight: 400;
        }
        .carousel-indicators-fresk {
            position: static;
            display: flex;
            justify-content: center;
            padding: 0;
            margin: 0 !important;
            width: 70px;
            max-width: 70px;
            .carousel-indicator-button-fresk {
                margin: 0;
                box-sizing: content-box;
                flex: 1;
                height: 2px;
                padding: 0;
                text-indent: -999px;
                background-color: #fff;
                background-clip: padding-box;
                border: 0;
                border-top: 10px solid #fff0;
                border-bottom: 10px solid #fff0;
                opacity: .5;
                &.active {
                    opacity: 1;
                }
            }
        }
        .carousel-control-prev-fresk,
        .carousel-control-next-fresk {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            padding: 1px;
            border-radius: 100%;
            border: 1px solid;
            color: #fff;
            text-align: center;
            background: none;
            opacity: .5;
            transition: opacity 0.15s ease;
            margin-inline: 3px;
            &:hover {
                color: #fff;
                text-decoration: none;
                outline: 0;
                opacity: .9;
            }
            .carousel-control-prev-icon-fresk,
            .carousel-control-next-icon-fresk {
                width: 16px;
                height: 16px;
            }

        }
    }
}

@media (max-width: 768px) {
    #slider-fresk {
        .carousel-inner {
            .carousel-item:not(.sliderleftaligntext) {
                .carousel-caption-fresk {
                    right: 0;
                    left: 0;
                }

            }
        }
    }
}