.owl-carousel1 {
    position: relative;
}
.owl-carousel1 .owl-dots {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 9999;
}
.owl-carousel1 .owl-dot {
    margin: 8px 0;
}
.owl-carousel1 .owl-dot span {
    display: block; /* 🔥 REQUIRED */
    width: 16px; /* 40px is too big for dots */
    height: 16px;
    background: #ff0000;
    border-radius: 50%; /* 🔥 REQUIRED */
    opacity: 0.6;
}
.owl-carousel1 .owl-dot.active span {
    background: #ffffff;
    opacity: 1;
}
/* Mobile view only */
@media (max-width: 768px) {
    .owl-carousel1,
    .owl-carousel1 .owl-stage-outer,
    .owl-carousel1 .owl-stage,
    .owl-carousel1 .owl-item,
    .owl-carousel1 .item {
        height: 50vh;
    }
    .owl-carousel1 .item img {
        width: 100%;
        height: 50vh;
        object-fit: cover; /* 🔥 keeps image proportion */
    }
}
/* Slider item */
.owl-carousel1 .item {
    position: relative;
}
/* Overlay layer */
.owl-carousel1 .item::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    background: rgba(0, 0, 0, 0.45); /* adjust darkness */
    z-index: 1;
}
/* Image stays below overlay */
.owl-carousel1 .item img {
    position: relative;
    z-index: 0;
}
/* Optional hover effect */
.owl-carousel1 .slider-content .button {
    transition: all 0.3s ease;
}

.owl-carousel1 .slider-content .button:hover {
    transform: translateY(-3px);
}
.owl-carousel1 .slider-content .button {
    border-radius: 0px;
}
.owl-carousel1 .slider-content h1 {
    font-weight: 200;
}
.owl-carousel1 .slider-content p {
    font-weight: 200;
}
/* Slider overlay */
.owl-carousel1 .slider-content {
    letter-spacing: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    padding: 3.5rem 4.5rem;
    border-radius: 0px;
    max-width: 850px;
    width: 90%;
    z-index: 999;
}

/* Base animation container */
.owl-carousel1 .animate-slider {
    animation: fadeIn 1.2s ease-in-out forwards;
}

/* Title animation */
.owl-carousel1 .animate-title {
    animation: slideDown 1s ease forwards;
}

/* Subtitle animation */
.owl-carousel1 .animate-subtitle {
    animation: slideUp 1.2s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* Buttons animation */
.owl-carousel1 .animate-buttons {
    animation: zoomIn 1.2s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

/* Button hover effects */
.owl-carousel1 .slider-content .button {
    transition: all 0.3s ease;
}

.owl-carousel1 .slider-content .button:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

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

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/*=========== Single Room CSS ============*/
#sync1 {
    .item {
        background: #0c83e7;
        color: #fff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 0px;
        text-align: center;
    }
}
#sync2 {
    .item {
        background: #c9c9c9;
        margin: 10px 5px 5px;
        color: #fff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        cursor: pointer;
        h1 {
            font-size: 18px;
        }
    }
    .current .item {
        background: #0c83e7;
    }
}
.owl-theme {
    .owl-nav {
        /*default owl-theme theme reset .disabled:hover links */
        [class*="owl-"] {
            transition: all 0.3s ease;
            &.disabled:hover {
                background-color: #d6d6d6;
            }
        }
    }
}
#sync1.owl-theme {
    position: relative;
    .owl-next,
    .owl-prev {
        width: 22px;
        height: 40px;
        margin-top: -20px;
        position: absolute;
        top: 50%;
    }
    .owl-prev {
        left: 10px;
    }
    .owl-next {
        right: 10px;
    }
}