.office-slider{
    position:relative;
    max-width:1200px;
    margin:20px auto;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.office-slide{
    display:none;
    position:relative;
}

.office-slide.active{
    display:block;
}

.office-slide img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

/* Darker overlay for better readability */
.office-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:20px 25px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.70) 40%,
        rgba(0,0,0,.20) 100%
    );
    color:#ffffff !important;
}

/* Force ALL text inside slider content to white */
.office-slider .office-content,
.office-slider .office-content *,
.office-slider .office-content h1,
.office-slider .office-content h2,
.office-slider .office-content h3,
.office-slider .office-content h4,
.office-slider .office-content h5,
.office-slider .office-content h6,
.office-slider .office-content a{
    color:#ffffff !important;
    background:none !important;
    border:none !important;
    text-decoration:none !important;
}

.office-content h2{
    margin:0 0 8px;
    font-size:28px;
    font-weight:700;
    line-height:1.2;
    color:#ffffff !important;
    text-shadow:2px 2px 8px rgba(0,0,0,.8);
}

.office-content p{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#ffffff !important;
    text-shadow:1px 1px 4px rgba(0,0,0,.8);
}

/* Navigation Buttons */
.office-prev,
.office-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.90);
    color:#333;
    cursor:pointer;
    font-size:20px;
    font-weight:bold;
    z-index:100;
    transition:all .3s ease;
}

.office-prev:hover,
.office-next:hover{
    background:#ffffff;
    transform:translateY(-50%) scale(1.1);
}

.office-prev{
    left:15px;
}

.office-next{
    right:15px;
}

/* Tablet */
@media(max-width:768px){

    .office-slide img{
        height:220px;
    }

    .office-content{
        padding:15px 20px;
    }

    .office-content h2{
        font-size:22px;
    }

    .office-content p{
        font-size:13px;
    }

    .office-prev,
    .office-next{
        width:40px;
        height:40px;
        font-size:18px;
    }
}

/* Mobile */
@media(max-width:480px){

    .office-slide img{
        height:180px;
    }

    .office-content{
        padding:12px 15px;
    }

    .office-content h2{
        font-size:18px;
        margin-bottom:5px;
    }

    .office-content p{
        display:none;
    }

    .office-prev,
    .office-next{
        width:35px;
        height:35px;
        font-size:16px;
    }
}