/* Owl Carousel customizations for the home page.
   These selectors target elements that the Owl JS library injects at
   runtime (.owl-nav, .owl-dots, .owl-prev, .owl-next, etc.). Because
   those elements aren't in the rendered Razor markup, CSS isolation
   can't apply scoping attributes to them — these rules must live in
   a non-isolated stylesheet. */

.owl-nav button {
    position: absolute;
    top: 50%;
    background-color: black;
    color: white;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.owl-nav button.owl-prev {
    left: 0;
}

.owl-nav button.owl-next {
    right: 0;
}

.owl-nav button:hover {
    color: var(--color-secondary-lighter) !important;
}

.owl-dots {
    text-align: center;
    padding-top: 15px;
    display: none;
}

.owl-dots button.owl-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    background: #ccc;
    margin: 0 3px;
}

.owl-dots button.owl-dot.active {
    background-color: black;
}

.owl-dots button.owl-dot:focus {
    outline: none;
}

.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.owl-nav button:focus {
    outline: none;
}

.owl-nav span {
    font-size: 70px;
    position: relative;
    top: -5px;
}

.owl-prev {
    left: -34px;
}

.owl-next {
    right: -34px !important;
}

@media (max-width:1024px) {
    .owl-carousel .owl-item img {
        display: block !important;
        width: auto !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .owl-nav button.owl-next {
        right: 0 !important;
    }
}