.cs-logos-banner {
    width: 100%;
    overflow: hidden;
    mask-image: radial-gradient(ellipse at center, #ffffff87 0%, #00000000 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #ffffff87 0%, #00000000 80%);
}

.cs-banner-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== Logo animation start ===== */

@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.cs-logo-row {
    display: flex;
    width: max-content;
    white-space: nowrap;
    align-items: center;
    height: 100px;
    opacity: .95;
}

.cs-logo-row-inner {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
}
.cs-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #ffffff35;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(6px);
    padding: 24px;
}

.cs-logo-item img {
    height: auto;
    max-height: 40px;
    opacity: .4;
    filter: grayscale(100%) brightness(2);
}

.logo-grey-invert {
    filter: grayscale(100%) invert(100%) !important;
}

.row-1 {
    animation: slide 68s linear infinite;
    gap: 12px;
    padding: 8px 0;
}

.row-2 {
    animation: slide 54s linear infinite;
    gap: 12px;
    padding: 8px 0;
}

.row-3 {
    animation: slide 60s linear infinite;
    gap: 12px;
    padding: 8px 0;
}

.row-4 {
    animation: slide 66s linear infinite;
    gap: 12px;
    padding: 8px 0;
}

/* ===== Logo animation end ===== */


/* ===== Banner Title Animation ===== */

.blur-animation {
    font-size: 3em;
    opacity: 0;
    filter: blur(5px);
    animation: fade-in-blur 2s ease-out forwards;
}

@keyframes fade-in-blur {
    0% { opacity: 0; filter: blur(5px); }
    100% { opacity: 1; filter: blur(0); }
}

.text-fade-up {
    opacity: 0;
    transform: translateY(20px);
    font-size: 1.2em;
    animation: fade-in-up 1s ease-out forwards;
    animation-delay: .5s;
}

@keyframes fade-in-up {
    to {
        opacity: .7;
        transform: translateY(0);
    }
}

.case-study-banner {
    height: 625px;
    margin-top: -68px;
    display: flex;
    align-items: center;
    background-image: url('/wp-content/uploads/2025/11/case-study-bg.webp');
    background-size: cover;
    background-position: center;
    
}

/* .case-study-banner .banner-title {
    font-size: 96px;
} */


.case-study-banner .industry-banner-content {
    text-align: center;
    position: absolute;
    width: 60%;
}



.case-study-slider-wrap{
    margin-top: -78px;
    display: flex;
    flex-direction: column;
    gap: 120px;
    padding-bottom: 80px;
    }
.slider-fullwidth{
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.slider-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
}

.casestudy-slider{
  padding-left:max(16px, calc((100vw - 1270px) / 2));
  padding-right: max(16px, calc((100vw - 1270px) / 2));
}
.casestudy-slider {
    touch-action: pan-y;

}
.case-study-slider-wrap,
.casestudy-slider {
    overscroll-behavior-x: contain;
}


    .swiper {
      width: 100%;
      height: 100%;
    }

.cs-slider-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(6.5px);
    height: auto;
    width: 372px;
    overflow: hidden;
    cursor: pointer;
    border: solid 1px transparent;
    transition:all .35s ease;
}
.cs-card-img img{
    height: auto!important;
}
.cs-card-blk {
    padding: 24px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-top: -79px;
}
.cs-card-blk h5{
    font-weight:500;
    font-size: 18px;
    line-height: 1.25;
}
.cs-logo {
    position: relative;
    width: 85px;
    height: 85px;
    transition:all .35s ease;
    bottom: 0;
}
.cs-slider-card:hover {
    border: 1px solid #ffffff21;
    background: rgb(255 255 255 / 5%);
}
.cs-slider-card:hover .HoverArrowWrapper::before {
  transform-origin: left;
  transform: scaleX(1);
}
/* .cs-slider-card:hover .cs-logo{
    bottom: 4px;
    transition:all .35s ease;
} */
.cs-slider-card:hover .HoverArrow {
  --arrowLineOpacity: 1;
  --arrowLineTransform: var(--arrowHoverOffset);
  --arrowTipTransform: var(--arrowHoverOffset);
}

/* optional: match opacity hover */
.cs-slider-card:hover .HoverArrowWrapper {
  opacity: .9;
}
.swiper-button-next, .swiper-button-prev{
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 52px;
    width: 52px;
    border-radius: 40px;
    background: #121937;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
    opacity: .8;
}
.swiper-button-next:after, .swiper-button-prev:after{
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.cs-slider-nav {
    display: flex;
    height: auto;
    justify-content: flex-end;
    padding-top: 36px;
    gap: 12px;
}


.cs-modal-slider .swiper-wrapper{
    align-items:flex-start;
}

.case-modal-slide{
    height:auto !important;
}

.cs-modal{
    position:fixed;
    inset: 0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling: touch;
    opacity:0;
    pointer-events:none;
    transition:opacity .10s ease;
    z-index:9999;
    padding:0px 0;
    overscroll-behavior: contain;
}


.cs-modal.active{
opacity:1;
pointer-events:auto;
}

.cs-modal-overlay{
    position: fixed;
    inset: 0;
    background: rgba(1, 2, 19, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
}
.cs-modal-inner,
.cs-modal-close,
.cs-modal .swiper-button-prev,
.cs-modal .swiper-button-next{
    position:relative;
    z-index:2;
}
.cs-modal-inner{
position:relative;
width:592px;

display:flex;
flex-direction:column;

transform:scale(.92);
opacity:0;
transition:all .35s cubic-bezier(.22,.61,.36,1);
z-index: 10;
 margin:0 auto;
}
.cs-modal.active .cs-modal-inner{
transform:scale(1);
opacity:1;
}

.cs-modal-close {
    position: fixed;
    right: 46px;
    top: 30px;
    font-size: 30px;
    cursor: pointer;
    color: #fff;
    z-index: 20;
}
.cs-modal-close:hover{
    opacity: .7;
}
.cs-modal-slider{
    /* background:#131424; */
    /* overflow-y:auto; */
    flex:1;
    /* box-shadow: 0 4px 162.5px 0 #000; */
    
}
.modal-inner-cs{
    overflow: visible;
    max-height: none;
}
.cs-modal-header {
    height: 85px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex-shrink: 0;
    padding-top: 16px;
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, .50);
    -webkit-backdrop-filter: blur(10px);
}

.cs-modal .swiper-button-prev{
left:40px;
right: auto;
}

.cs-modal .swiper-button-next{
right:40px;
left: auto;
}
.cs-modal .swiper-button-prev,
.cs-modal .swiper-button-next{
    top: 50%;
    transform: translateY(-50%);
    position: fixed;
    height: 152px;
    width: 152px;
    background: none;
    z-index: 30;
}
.cs-modal .swiper-button-next:after, .cs-modal .swiper-button-prev:after{
    font-size: 80px;
    color: #ffffff3d;
}
.cs-modal .swiper-pagination {
    bottom: 6px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: row;
    gap: 4px;
}
.cs-modal .swiper-pagination-bullet {
    display: block;
    width: 100%;
    border-radius: 0;
    background: #fff;
    height: 4px;
}
.modal-image{
    height: 276px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}
.modal-image > img{
    max-width: 100% !important;
    height: auto!important;
    opacity: 0.4;
}
.modal-logo {
    position: absolute;
    bottom: 20px;
    height: 87px;
    left: 24px;
}
.modal-text{
    padding:32px 0px 40px;
}
.modal-text .HoverArrowWrapper{
    margin-top: 20px;
}
.modal-desc{
    padding: 40px 0px 0px;
    font-weight: 500;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    pointer-events: auto;
}
.swiper-button-next.swiper-button-disabled:hover, .swiper-button-prev.swiper-button-disabled:hover{
    opacity: .35;
}
@media (min-width: 576px) {
    .casestudy-slider{
      padding-left:max(16px, calc((100vw - 490px) / 2));
      padding-right: max(16px, calc((100vw - 490px) / 2));
    }
}
@media (min-width: 768px) {
    .casestudy-slider{
      padding-left:max(16px, calc((100vw - 670px) / 2));
      padding-right: max(16px, calc((100vw - 670px) / 2));
    }
}
@media (min-width: 992px) {
    .casestudy-slider{
      padding-left:max(16px, calc((100vw - 910px) / 2));
      padding-right: max(16px, calc((100vw - 910px) / 2));
    }
}
@media (min-width: 1200px) {
    .casestudy-slider{
      padding-left:max(16px, calc((100vw - 1090px) / 2));
      padding-right: max(16px, calc((100vw - 1090px) / 2));
    }
}
@media (min-width: 1400px) {
    .casestudy-slider{
      padding-left:max(16px, calc((100vw - 1270px) / 2));
      padding-right: max(16px, calc((100vw - 1270px) / 2));
    }
}
@media (max-width: 991px){
    .cs-modal .swiper-button-prev, .cs-modal .swiper-button-next{
        height: 50px;
        width: 40px;
    }
    .cs-modal .swiper-button-next:after, .cs-modal .swiper-button-prev:after{
        font-size: 55px;
    }
}
@media (max-width: 767px){
  .cs-slider-card{
    width: 82vw;   /* allows 1 full + partial card */
  }
    .cs-modal .swiper-button-prev,
    .cs-modal .swiper-button-next{
        display: none;
    }
        .cs-modal-inner{
        width: 100%;
        /* max-height: 100vh;
        height: 100%; */
    }
    .cs-modal-section-title {
        padding: 0 24px;
    }

    .cs-modal-close{
        right: 32px;
        top: 24px;
    }
        .cs-slider-nav{
        display: none;
    }
    .modal-inner-cs{
        padding: 0 24px;
    }
}

@media (max-width:575px){
    .case-study-banner>.container{
        padding:0;
    }
    .cs-slider-card .cs-card-img img{
        height: auto!important;
    }
    .cs-card-blk {
        padding: 24px 24px;
    }
    .case-study-banner .banner-title{
        font-size:35px!important;
        line-height:40px;
        text-align:center;
    }
    .case-study-banner .industry-banner-content{
        padding-left:24px;
        padding-right:24px;
        width: 100%;
    }
    .case-study-banner{
        height:450px;
    }
    .cs-logos-banner{
        mask-image: radial-gradient(ellipse at center,#ffffff8c 0%,#0000000a 70%);
        -webkit-mask-image: radial-gradient(ellipse at center,#ffffff8c 0%,#0000000a 70%);
    }
    .cs-modal-header{
        height: 62px;
        padding-top: 6px;
    }
    .cs-modal-close{
        right: 24px;
        top: 12px;
        font-size: 26px;
    }
    .modal-image {
    height: auto;
    }
    .modal-logo{
        left: 12px;
    }


.cs-modal-section-title{
    font-size: 24px;
}
}