.latest-ticker {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 30px;
}

@media screen and (min-width: 1024px) {
    .latest-ticker:after {
        background-image: url('/wp-content/themes/ontic-v2/acf-blocks/latest-ticker/latest-nodes-right.svg');
        content: '';
        position: absolute;
        top: 24px;
        display: block;
        width: 31px;
        height: 31px;
        right: -31px;
    }
    .latest-grid {
        display: grid;
        grid-gap: 40px; 
        grid-template-columns: 2fr 3fr;
        padding-left: 0;
    }
    hr.mobile,
    h3.mobile {
        display: none;
    }
}
@media screen and (min-width: 1140px) {
    .latest-grid {
        grid-gap: 100px;
    }
}
.latest-ticker .latest-left h3 {
    margin-bottom: 40px;
}
.latest-ticker .latest-left {
    display: flex;
    flex-direction: column;
    padding: 60px 0 32px;
}
.latest-ticker .latest-right {
    overflow: hidden; 
    position: relative;
}
.latest-ticker .tab {
    padding: 6px 0 6px 6px;
    border-left: 4px solid var(--light-blue) !important;
    border-top: 1px dashed var(--light-blue) !important;
    width: 100%;
    min-height: 90px;
    cursor: pointer;
}
@media screen and (max-width: 1023px) {
    .latest-ticker hr.mobile {
        height: 0px;
        margin-top: 20px;
        display: block;
        width: calc(100% - 30px);
        margin: 20px 30px 0 0;
        border-top: 1px dashed var(--light-blue);
    }    
    .latest-ticker .latest-left {
        display: none;
    }
} 
@media screen and (min-width: 1024px) {
    .latest-ticker h3.mobile {
        display: none;
    }
    .latest-ticker .latest-right .tab-layout {
        display: none;
    }
}
.latest-ticker .tab-layout {
    padding: 18px 30px;
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-gap: 38px;
    align-items: center;
}
.latest-ticker .latest-right .tab-layout {
    padding: 18px 0;
    min-height: 24px;
    grid-template-columns: 36px 1fr;
    grid-gap: 20px;
}
@media screen and (min-width: 1024px) {
    .latest-ticker .active-slide-0 .trigger-0,
    .latest-ticker .active-slide-1 .trigger-1,
    .latest-ticker .active-slide-2 .trigger-2 {
        animation: borderChange 4s forwards;
        position: relative;
        clip-path: inset(0 0 0 0);      
    }      
    .latest-ticker .active-slide-0 .trigger-0::before,
    .latest-ticker .active-slide-1 .trigger-1::before,
    .latest-ticker .active-slide-2 .trigger-2::before {
        content: "";
        position: absolute;
        top: 0;
        left: -4px;
        width: 4px;
        height: 100%;
        background-color: var(--orange);
        animation: slideOut 4s forwards ease-in-out;
        animation-play-state: running; 
    }
    
    .latest-ticker .active-slide-0 .trigger-0:hover::before,
    .latest-ticker .active-slide-1 .trigger-1:hover::before,
    .latest-ticker .active-slide-2 .trigger-2:hover::before,
    .latest-ticker .active-slide-0 .trigger-0.active::before,
    .latest-ticker .active-slide-1 .trigger-1.active::before,
    .latest-ticker .active-slide-2 .trigger-2.active::before{
        animation-play-state: paused; 
    }
      
      @keyframes slideOut {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(100%);
        }
      }
    .latest-ticker .tab:hover .tab-layout,
    .latest-ticker .tab.active .tab-layout {
        background-color: #0f467b;
    }
    .latest-ticker .latest-tabs {
        border-bottom: 1px dashed var(--light-blue);
    }
}
.latest-ticker .tab-layout img {
    max-height: 55px;
}
.latest-ticker .latest-right .tab-layout img {
    max-height: 36px;
}
.latest-ticker .tab-layout p {
    color: var(--white);
    font-size: 22px;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 0;
}
.latest-ticker .latest-right .tab-layout p {
    font-size: 18px;
}
.latest-ticker .latest-right {
    height: 100% !important;
    position: relative;
}
.latest-ticker .ticker_item a {
    display: block; /* Ensure the <a> behaves like a block element */
    position: absolute; /* Position it relative to the parent */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* Ensure it fills the width */
    height: 100%; /* Ensure it fills the height */
}
@media screen and (max-width: 1023px) {

    .latest-ticker .latest-items {
        display: flex; 
        overflow-x: auto; 
        scroll-snap-type: x mandatory; 
        gap: 15px; 
        position: relative; 
        scrollbar-width: none;
        padding-right: 30px;
    }
    .latest-ticker .latest-items::-webkit-scrollbar {
        display: none; 
    }
    .latest-ticker .latest-items::-webkit-scrollbar {
        height: 0px;
    }
    .latest-ticker .latest-right .item_container {
        flex: 0 0 460px; 
        height: auto; 
        position: relative;
        scroll-snap-align: start; 
    }
    .latest-ticker .ticker_item {
        position: relative; 
        height: auto; 
    }

    .latest-ticker .latest-items .ticker_item {
        background-size: cover;
        background-position: center;
        position: relative;
        height: 390px;
    }

    .latest-ticker .item_content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 60px 20px 20px; 
        color: #fff; 
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    }
    .latest-ticker .item_content h4 {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-wrap: balance;
    }
    .latest-ticker .item_content .eyebrow {
        margin-bottom: 11px;
    }
    .latest-ticker .btn.transparent.mobile {
        margin-top: 18px
    }
    .latest-ticker .item_content .btn.transparent {
        display: none;
    }

}
@media screen and (max-width: 767px) {

    .latest-ticker .latest-right .item_container {
        flex: 0 0 310px; 
    }
    .latest-ticker .latest-items .ticker_item {
        height: 260px;
    }
    .latest-ticker .item_content h4 {
        font-size: 15px;
    }
    .latest-ticker .item_content .eyebrow {
        margin-bottom: 11px;
        font-size: 11px;
    }
}
@media screen and (min-width: 1024px) {
    .latest-ticker .latest-right .latest-items {
        flex: 1; 
        display: flex;
        flex-direction: column;
        height: 100% !important;
    }
    .latest-items .slick-list {
        height: 100% !important;
    }
    .latest-ticker .latest-right .slick-track {
        display: flex !important;
        height: 100% !important;
    }
    .latest-ticker .latest-right .item_container.slick-slide {
        height: 100%; 
        padding: 46px 0 28px 30px;
        background-image: url('/wp-content/themes/ontic-v2/acf-blocks/latest-ticker/latest-right-back.svg');
        background-size: 94%;
        background-position: left bottom;
        background-repeat: no-repeat;
        position: relative;
    }
    .latest-ticker .latest-items .ticker_item:after {
        content: '';
        position: absolute;
        top: -1px;
        right: -1px;
        display: block;
        background-image: url('/wp-content/themes/ontic-v2/acf-blocks/latest-ticker/latest-image-notch.svg');
        background-size: contain;
        width: 26%;
        height: 50%;
        background-repeat: no-repeat;
    } 
    .latest-ticker .latest-items .ticker_item {
        background-size: cover;
        background-position: center;
        position: relative;
        height: 100%;
    }
    .latest-ticker .item_content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 60px 30px 20px; 
        color: #fff; 
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    }
    .latest-ticker .item_content h4 {
        color: #fff;
        margin-right: 180px;
    }
    .latest-ticker .item_content .btn.transparent {
        position: absolute;
        bottom: 30px;
        right: 30px;
    }
    .latest-ticker .btn.mobile {
        display: none;  
    }
}
.latest-ticker .btn.transparent {
    background: transparent;
    border: 1px solid #fff;
    padding: 12px 19px;
    color: #fff
}
.latest-ticker .btn.transparent:hover {
    background: #fff;
    color: var(--blue) !important;;
}