.slider-banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;

    .slider-container{
        display: flex;
        transition: transform 2s ease;
        width: 100%;

        .slider-element{
            min-width: 100%;
            position: relative;

            img{
                width: 100%;
                height: auto;
                display: block;
            }
        }
    }

    .slider-sm{
        width: 300px;
    }

    .slider-controls{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;

        button{
            background: white;
            border: none;
            border-radius: 0 !important;
            box-shadow: rgba(50, 50, 50, 0.192) -2.90959px 0px 2.90959px 0px;
            color: #333;
            padding: 10px;
            font-size: 1.4em;
            cursor: pointer;
            height: 3.5em;
            width: 2.2em;
            line-height: 3.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease, opacity 0.3s ease;
            opacity: 0;
        }

        button:hover{
            background: linear-gradient(0deg, #fbdd99 0%, #f0c049 100%);
        }
    }

    .slider-dots{
        position: absolute;
        bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 20px;

        span{
            width: 13px;
            height: 13px;
            background-color: #999;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        span:hover, span.active{
            background: white
        }
    }
}

.slider-banner:hover .slider-controls button {
    opacity: 1;
}

div.promotion div.content-promotion{
    p, a{
        font-size: 1.2em;
    }
}

@media (max-width: 769px){
    .slider-banner{
        .slider-controls{
            button{
                opacity: 1 !important;
            }
        }

        .slider-dots{
            display: none;
        }
    }

}


