.rbsaddons--hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.rbsaddons--hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.rbsaddons--hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.rbsaddons--hero-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.rbsaddons--hero-slide.fade-out {
    opacity: 0;
}

.rbsaddons--hero-slide.fade-in {
    opacity: 1;
}

.rbsaddons--hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rbsaddons--hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.OFF__rbsaddons--hero-content-block {
    opacity: 0;
}

.rbsaddons--hero-content-block {
	position: absolute;
	inset: 0;                 /* fill slide */
	z-index: 3;
	pointer-events: none;     /* content decides interactivity */
}

.rbsaddons--hero-content-block-position {
	position: absolute;
	pointer-events: auto;     /* clickable content */
	max-width: 90%;
	word-wrap: break-word;
}
.rbsaddons--hero-content-block-animation {
	display: inline-block;
	max-width: 100%;
	transform-origin: center center;
	will-change: transform, opacity;
    opacity: 0;
}

.OFF__rbsaddons--hero-content-block-animation {
    position: absolute;
    z-index: 3;
    /* transform: translateZ(0); */
    max-width: 90%;
    word-wrap: break-word;
}


.OFF_rbsaddons--hero-content-block-position,
.OFF_rbsaddons--hero-content-block {
    position: absolute;
    z-index: 3;
    /* transform: translateZ(0); */
    max-width: 90%;
    word-wrap: break-word;
}

.rbsaddons--hero-content-block {
    display: none;
    visibility: hidden;
}

.rbsaddons--hero-content-block.visible {
    opacity: 1;
    display: unset;
    visibility: visible;    
}

/* Position Classes */
.rbsaddons--hero-content-block.position-top-left,
.rbsaddons--hero-content-block-position.position-top-left {
    top: 40px;
    left: 40px;
}

.rbsaddons--hero-content-block.position-top-center,
.rbsaddons--hero-content-block-position.position-top-center {
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.rbsaddons--hero-content-block.position-top-right,
.rbsaddons--hero-content-block-position.position-top-right {
    top: 40px;
    right: 40px;
}

.rbsaddons--hero-content-block.position-center-left,
.rbsaddons--hero-content-block-position.position-center-left {
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
}

.rbsaddons--hero-content-block.position-center,
.rbsaddons--hero-content-block-position.position-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.rbsaddons--hero-content-block.position-center-right,
.rbsaddons--hero-content-block-position.position-center-right {
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

.rbsaddons--hero-content-block.position-bottom-left,
.rbsaddons--hero-content-block-position.position-bottom-left {
    bottom: 40px;
    left: 40px;
}

.rbsaddons--hero-content-block.position-bottom-center,
.rbsaddons--hero-content-block-position.position-bottom-center {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.rbsaddons--hero-content-block.position-bottom-right,
.rbsaddons--hero-content-block-position.position-bottom-right {
    bottom: 40px;
    right: 40px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        /* transform: translateX(-100px); */
        /* transform: translate(-100px, -50%); */
        /* transform: translate(-100%, -50%); */
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        /* transform: translateX(0); */
        /* transform: translate(0, -50%); */
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        /* transform: translateX(100px); */
        /* transform: translate(100px, -50%); */
        /* transform: translate(100%, -50%); */
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        /* transform: translateX(0); */
        /* transform: translate(0, -50%); */
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform:  scale(1);
    }

    /* from {
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }     */
}

@keyframes TEST {
    from {
        opacity: 0;
        transform: translateY(-50%) skewX(90deg) scale(0.8);
        /* transform-origin: 0 -50%; */
    }
    to {
        opacity: 1;
        transform: translateY(-50%) skewX(0) scale(1);
        /* transform-origin: 100px 200px; */
        /* transform-origin: 0 -50%; */
    }
}
/* Rotate */
/* .rbsaddons--hero-item.transition-rotate-left { transform: rotate(-15deg) scale(0.8); opacity: 0; }
.rbsaddons--hero-item.active.transition-rotate-left { transform: rotate(0) scale(1); opacity: 1; }

.rbsaddons--hero-item.transition-rotate-right { transform: rotate(15deg) scale(0.8); opacity: 0; }
.rbsaddons--hero-item.active.transition-rotate-right { transform: rotate(0) scale(1); opacity: 1; } */

/* Flip */
/* .rbsaddons--hero-item.transition-flip-x { transform: rotateX(90deg); opacity: 0; }
.rbsaddons--hero-item.active.transition-flip-x { transform: rotateX(0); opacity: 1; }

.rbsaddons--hero-item.transition-flip-y { transform: rotateY(90deg); opacity: 0; }
.rbsaddons--hero-item.active.transition-flip-y { transform: rotateY(0); opacity: 1; } */

/* Skew */
/* .rbsaddons--hero-item.transition-skew-x { transform: skewX(30deg); opacity: 0; }
.rbsaddons--hero-item.active.transition-skew-x { transform: skewX(0); opacity: 1; }

.rbsaddons--hero-item.transition-skew-y { transform: skewY(30deg); opacity: 0; }
.rbsaddons--hero-item.active.transition-skew-y { transform: skewY(0); opacity: 1; } */



.rbsaddons--hero-content-block.visible .rbsaddons--hero-content-block-animation.animation-fadeIn,
.rbsaddons--hero-content-block-animation.animation-fadeIn.visible {
    animation: fadeIn 0.8s ease-out forwards;
}

.rbsaddons--hero-content-block.visible .rbsaddons--hero-content-block-animation.animation-slideInLeft,
.rbsaddons--hero-content-block-animation.animation-slideInLeft.visible {
    animation: slideInLeft 0.8s ease-out forwards;
}

.rbsaddons--hero-content-block.visible .rbsaddons--hero-content-block-animation.animation-slideInRight,
.rbsaddons--hero-content-block-animation.animation-slideInRight.visible {
    animation: slideInRight 0.8s ease-out forwards;
}

.rbsaddons--hero-content-block.visible .rbsaddons--hero-content-block-animation.animation-slideInUp,
.rbsaddons--hero-content-block-animation.animation-slideInUp.visible {
    animation: slideInUp 0.8s ease-out forwards;
}

.rbsaddons--hero-content-block.visible .rbsaddons--hero-content-block-animation.animation-slideInDown,
.rbsaddons--hero-content-block-animation.animation-slideInDown.visible {
    animation: slideInDown 0.8s ease-out forwards;
}

.rbsaddons--hero-content-block.visible .rbsaddons--hero-content-block-animation.animation-zoomIn,
.rbsaddons--hero-content-block-animation.animation-zoomIn.visible {
    animation: zoomIn 0.8s ease-out forwards;
}

/* Navigation Arrows */
.rbsaddons--hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    min-width: unset;
    min-height: unset;
    width: 50px;
    height: 100px;
    /* border-radius: 50%; */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.4;
}
.rbsaddons--hero-arrow .bi {
    color: #000000;
}
.rbsaddons--hero-arrow:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
}

.rbsaddons--hero-arrow-prev {
    left: 20px;
}

.rbsaddons--hero-arrow-next {
    right: 20px;
}

.rbsaddons--hero-arrow svg {
    width: 24px;
    height: 24px;
    color: #333;
}

/* Navigation Dots */
.rbsaddons--hero-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 12px;
}

.rbsaddons--hero-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    min-width: unset;
    min-height: unset;
}

.rbsaddons--hero-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.rbsaddons--hero-indicator.active {
    background: rgba(255, 255, 255, 1);
}

/* Slide Transitions */
.rbsaddons--hero[data-transition="slide"] .rbsaddons--hero-slide {
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.rbsaddons--hero[data-transition="slide"] .rbsaddons--hero-slide {
    transform: translateX(100%);
}

.rbsaddons--hero[data-transition="slide"] .rbsaddons--hero-slide.active {
    transform: translateX(0);
}

.rbsaddons--hero[data-transition="slide"] .rbsaddons--hero-slide.prev {
    transform: translateX(-100%);
}

.rbsaddons--hero[data-transition="zoom"] .rbsaddons--hero-slide {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.rbsaddons--hero[data-transition="zoom"] .rbsaddons--hero-slide .rbsaddons--hero-media {
    transition: transform 0.8s ease-in-out;
    transform: scale(1.2);
}

.rbsaddons--hero[data-transition="zoom"] .rbsaddons--hero-slide.active .rbsaddons--hero-media {
    transform: scale(1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .rbsaddons--hero-content-block {
        font-size: 14px !important;
        padding: 15px !important;
        max-width: 85%;
    }
    
    .rbsaddons--hero-content-block.position-top-left,
    .rbsaddons--hero-content-block.position-center-left,
    .rbsaddons--hero-content-block.position-bottom-left {
        left: 20px;
    }
    
    .rbsaddons--hero-content-block.position-top-right,
    .rbsaddons--hero-content-block.position-center-right,
    .rbsaddons--hero-content-block.position-bottom-right {
        right: 20px;
    }
    
    .rbsaddons--hero-content-block.position-top-center,
    .rbsaddons--hero-content-block.position-top-left,
    .rbsaddons--hero-content-block.position-top-right {
        top: 20px;
    }
    
    .rbsaddons--hero-content-block.position-bottom-center,
    .rbsaddons--hero-content-block.position-bottom-left,
    .rbsaddons--hero-content-block.position-bottom-right {
        bottom: 20px;
    }
    
    .rbsaddons--hero-arrow {
        width: 40px;
        height: 40px;
    }
    
    .rbsaddons--hero-arrow-prev {
        left: 10px;
    }
    
    .rbsaddons--hero-arrow-next {
        right: 10px;
    }
    
    .rbsaddons--hero-indicators {
        bottom: 20px;
    }
    
    .rbsaddons--hero-indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .rbsaddons--hero-content-block {
        font-size: 12px !important;
        padding: 10px !important;
    }
    
    .rbsaddons--hero-arrow {
        width: 35px;
        height: 35px;
    }
    
    .rbsaddons--hero-arrow svg {
        width: 20px;
        height: 20px;
    }
}


.rbsaddons--hero-progress {
    position: absolute;
    bottom: 5px;
    /* left: 50%;
    transform: translateX(-50%); */
    z-index: 4;
    display: flex;
    gap: 12px;
    width: 100%;
    height: 15px;
    /* width: 100%;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    min-width: unset;
    min-height: unset;
    background-color: red; */
}
.rbsaddons--hero-progress-bar {
    width: 25%;
    height: 100%;
    margin: 0 auto;
    /* background-color: blue; */
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid transparent;
}
.rbsaddons--hero-progress-value {
    /* background-color: rgba(0,0,0,0.75); */
    background-color: transparent;
    width: 0%;
    height: 100%;
}