﻿/*
    Used to replace revolution slider for PQI and FA
*/
#cust-hero-banner .tp-caption {
    opacity: 0;
    transform: translateY(-500px);
    transition: opacity 6s ease, transform 6s ease;
    transition-delay: 0.75s;
    z-index: 1;
}

#cust-hero-banner .owl-item.active .tp-caption {
    opacity: 1;
    transform: translateY(-400px);
    visibility: visible;
}

#cust-hero-banner .owl-wrapper {
    aspect-ratio: 1200 / 500;
    max-height: 500px;
}

#cust-hero-banner .owl-wrapper,
#cust-hero-banner .owl-item {
    height: 100%;
}

    #cust-hero-banner .owl-item > .item {
        width: 100% !important;
        height: 100% !important;
    }

    #cust-hero-banner .owl-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

#cust-hero-banner .revolution-mch-1 {
    position: relative;
    z-index: 1;
}

#cust-hero-banner .tp-caption-ch1 {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    opacity: 0;
    transform: translateY(-500px);
    transition: opacity 6s ease, transform 6s ease;
    transition-delay: 0.75s;
}

#cust-hero-banner .owl-item.active .tp-caption-ch1 {
    opacity: 1;
    transform: translateY(-425px);
    visibility: visible;
}

#cust-hero-banner .tp-caption-ch2 {
    position: absolute;
    left: 50%;
    width: 90%;
    max-width: 600px;
    text-align: left;
    z-index: 2;
    opacity: 0;
    transform: translateX(-50%) translateY(-500px);
    transition: opacity 4s ease, transform 4s ease;
    transition-delay: 2.25s;
}

#cust-hero-banner .owl-item.active .tp-caption-ch2 {
    opacity: 1;
    transform: translateX(-50%) translateY(-335px);
    visibility: visible;
}

#cust-hero-banner .tp-caption-ch3 {
    position: absolute;
    left: 56%;
    width: 90%;
    max-width: 600px;
    text-align: left;
    z-index: 2;
    opacity: 0;
    transform: translateX(-56%) translateY(-500px);
    transition: opacity 4s ease, transform 4s ease;
    transition-delay: 2.75s;
}

#cust-hero-banner .owl-item.active .tp-caption-ch3 {
    opacity: 1;
    transform: translateX(-56%) translateY(-235px);
    visibility: visible;
}

#cust-hero-banner .home-link a {
    text-decoration: none;
}

@media (max-width: 1199px) {
    #cust-hero-banner .rev-head {
        font-size: clamp(28px, 3vw, 36px);
        line-height: 1.3;
        margin: 0;
    }

    #cust-hero-banner .rev-text {
        font-size: clamp(16px, 4vw, 22px);
        line-height: 1.3;
        margin: 40px 0 0 0;
    }

    #cust-hero-banner .home-link {
        line-height: 1.3;
        margin: 20px 0 0 0;
    }
}

@media (max-width: 980px) {
    #cust-hero-banner .rev-head {
        font-size: clamp(28px, 6vw, 36px);
        line-height: 1.3;
        margin: 0;
    }

    #cust-hero-banner .rev-text {
        font-size: clamp(16px, 4vw, 22px);
        line-height: 1.4;
        margin: 30px 0 0 0;
    }

    #cust-hero-banner .home-link {
        line-height: 1.3;
        margin: 10px 0 0 0;
    }
}

@media (max-width: 768px) {
    #cust-hero-banner .owl-wrapper {
        aspect-ratio: 775 / 320;
        max-height: 320px;
    }

    #cust-hero-banner .owl-item.active .tp-caption {
        transform: translateY(-256px);
    }

    #cust-hero-banner .rev-head {
        font-size: clamp(16px, 5vw, 28px);
        line-height: 1.2;
        margin: 0 0 0.4em 0;
    }

    #cust-hero-banner .rev-text {
        font-size: clamp(13px, 4vw, 18px);
        line-height: 1.3;
        margin: 30px 0 0 0;
    }

    #cust-hero-banner .home-link {
        line-height: 1.3;
        margin: 15px 0 0 0;
    }

    #cust-hero-banner .owl-item.active .tp-caption-ch1 {
        transform: translateY(-290px);
    }

    #cust-hero-banner .tp-caption-ch1 {
        font-size: clamp(29px, 6.5vw, 43px);
    }

    #cust-hero-banner .tp-caption-ch2 {
        left: 58%;
        width: 80%;
        max-width: 500px;
        transform: translateX(-58%) translateY(-500px);
    }

    #cust-hero-banner .owl-item.active .tp-caption-ch2 {
        transform: translateX(-58%) translateY(-215px);
    }

    #cust-hero-banner .tp-caption-ch2 {
        font-size: clamp(24px, 3.25vw, 36px);
        line-height: 1.1;
    }

    #cust-hero-banner .tp-caption-ch3 {
        left: 60%;
        width: 75%;
        max-width: 450px;
        transform: translateX(-60%) translateY(-500px);
    }

    #cust-hero-banner .owl-item.active .tp-caption-ch3 {
        transform: translateX(-60%) translateY(-135px);
    }

    #cust-hero-banner .tp-caption-ch3 {
        font-size: clamp(20px, 3.0vw, 32px);
    }
}

@media (max-width: 525px) {
    #cust-hero-banner .owl-item.active .tp-caption-ch3 {
        transform: translateX(-60%) translateY(-124px);
    }

    #cust-hero-banner .tp-caption-ch3 {
        font-size: clamp(18px, 2.8vw, 28px);
    }
}

@media (max-width: 479px) {
    .revolution-mch-1 .tp-caption {
        left: calc(10% + 50px) !important;
    }
}
