/* --------------------------------------------------------------------------- */
/* Hero Section Slider Styles                                                  */
/* --------------------------------------------------------------------------- */

.slider {
    max-height: 600px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 3em;
    border-radius: 0.8em;
}

.slider img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Slick dots container */
.slick-dots {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    display: flex;
    gap: 10px;
    z-index: 15;
}

/* Individual dots */
.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

/* Dot buttons */
.slick-dots li button {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    padding: 0;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0 !important; /* hide any text */
    color: transparent !important;
    z-index: -1;
}

/* Active dot */
.slick-dots li.slick-active button {
    background-color: rgba(255, 255, 255, 1);
}

/* Hover effect on dots */
.slick-dots li button:hover {
    background-color: rgba(255, 255, 255, 1);
}