/* Custom Utility Classes */

/* Screen Reader Only - Visually hidden but accessible to screen readers and search engines */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
    left: -9999px !important;
    top: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Additional hiding for breadcrumb navigation specifically - keeps SEO benefits */
nav.sr-only {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Keep in DOM for SEO - don't use display: none or visibility: hidden */
}

/* Hide elements on phone/mobile screens */
@media (max-width: 767px) {
    .phone-hidden {
        display: none !important;
    }
}

/* Alternative: Hide on small phones only (< 640px) */
@media (max-width: 639px) {
    .sm-phone-hidden {
        display: none !important;
    }
}

/* Hide on tablets and below (< 1024px) */
@media (max-width: 1023px) {
    .tablet-hidden {
        display: none !important;
    }
}

/* Brand swiper configuration */
.brand-swiper3 {
    overflow: hidden;
}

.brand-swiper3 .swiper-wrapper {
    transition-timing-function: linear !important;
    align-items: center !important;
    display: flex !important;
}

.brand-swiper3 .swiper-slide {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Ensure logos are properly sized and centered */
.brand-swiper3 .ow-client-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* Even padding for balanced look */
}

.brand-swiper3 .ow-client-logo img {
    max-height: 34px; /* Ensure consistent height */
    width: auto;
    object-fit: contain;
}

/* Services Carousel */
.services-carousel .swiper-slide {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.services-carousel .swiper-slide-active {
    opacity: 1;
}

.diagonal-bg-item {
    --diagonal-x: 0px;
}

/* Override the transform to include the parallax offset */
.diagonal-bg-item::after {
    content: '' !important;
    transform: translateX(var(--diagonal-x, 0px)) skewX(-20deg) scaleX(var(--diagonal-scale, 1)) !important;
    transform-origin: center !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
}