.case--study {
display: none;
opacity: 0;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.case--study.fadeIn {
display: block;
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0s 0s;
}

/* Animaton */
.case--studies.anim-change {opacity: 0.5;transition: opacity 0.5s ease;}
.case--studies.anim-change .case--study {opacity: 0;}
.case--studies.anim-change .case--study.fadeIn {opacity: 1;transition: opacity 0.5s ease;}


.case--studies-wrapper {display: flex; gap:70px;}
@media (width<1024px){.case--studies-wrapper{flex-direction:column !important; gap:32px !important}}
.row--2,.row--3,.row--4{margin-top:28px;padding-top:28px;border-top:1px solid #B4B4B4;}

/* Filter Column */
.filter-col {width: 30%;}
@media (width<1200px){.filter-col{width:23%}}
@media (width<1024px){.filter-col{position: fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999; background: white;border-radius: 7px; box-shadow: 2px 2px 20px 0px #00000040;padding: 40px; width: calc( 100vw - var(--mb-padding) - 32px ) !important; height: auto !important; }}
.filter--text,.reset--text,.industry--text,.services--text,.row--4{font-family: Poppins;font-size: 20px;font-weight: 300;line-height: 30px;color:#151515}
.row--1{display: flex; justify-content: space-between;}
.reset--text{text-decoration: underline;font-weight: 400;cursor: pointer;}
.industry--text,.services--text{color: #DF9300;padding-bottom:28px;display: block}
.industry--wrapper,.service--wrapper{display: flex;flex-wrap: wrap; gap: 8px;}
.ind--sub-cat,.serv--sub-cat{font-family: Poppins;font-size: 13px;font-weight: 300;line-height: 19.5px;color:#151515;padding: 10px 22px;border:1px solid #151515;border-radius:7px;cursor: pointer;}
.ind--sub-cat.active,.serv--sub-cat.active{color:white;background:#151515  ;}
.ind--sub-cat:hover,.serv--sub-cat:hover{color:white;background:#151515  ;}
.row--4 span{font-weight: 500}

/* Filter Col Mobile */
.mb--filter-text{font-family: Poppins;font-size: 20px;font-weight: 300;line-height: 30px;color:white;}
.mobile--filter{padding:13px 20px; background:#151515;border-radius:7px;display:flex;align-items:center;justify-content:space-between;}
@media (width>1024px){.hide--desktop{display:none !important;}}
@media (width<1024px){.filter-col{padding: 20px !important;}
.row--2,.row--3,.row--4{padding-top: 10px !important;;}
.industry--text,.services--text{padding-bottom: 10px !important }
.row--2{margin-top:18px;}
.filter--text,.reset--text,.industry--text,.services--text,.row--4{font-size: 15px;}
.ind--sub-cat,.serv--sub-cat{font-family: Poppins;font-size: 10px;font-weight: 300;line-height: 19.5px;color:#151515;padding: 5px 8px;border:1px solid #151515;border-radius:7px;cursor: pointer;}
.row--4 *{font-size: 15px !important;}}

@media (width<1024px){
.case--studies-wrapper .filter-col{display: none !important;}
.case--studies-wrapper .filter-col.show--mobile{display: block !important;}
html:has(.filter-col.show--mobile)::before{content: "asd";position: fixed;left: 0px;top: 0px;z-index: 123;background: rgba(0,0,0,0.5);width: 100vw;height: 100vh;}
}
/* Filter Col Mobile */


/* Case Studies Column */
.case--studies{width: 70%; display: flex;flex-direction: column;gap:24px;}
@media (width<1024px){.case--studies{width:100% !important; gap:40px;}}
.case--study{display: flex !important;  gap:37px;}
@media (width<1024px){.case--study{flex-direction: column;}}
.cs--img{min-height:clamp(21.25rem, 12.07rem + 14.344vw, 25.625rem); width: 45%;display:flex;align-items:end;padding:30px 20px;border-radius:7px;/*height: 100%;*/}
@media (width<1024px){.cs--img{min-height:clamp(18.75rem, 11.973rem + 30.12vw, 31.25rem);width: 100% }}
.category-tag{font-family: Poppins;font-size: 12px;font-weight: 300;line-height: 18px;background: white;color:#373737;padding: 10px 22px; border-radius:7px;border: 1px solid #C7C7C7;color:#151515;}
@media (width<1024px){.category-tag{font-size: 9.59px;line-height: 14.38px; padding:8px 17px;}}
.cs--content{width: 55%; display:flex;flex-direction:column;justify-content:space-between;color:#151515;}
@media (width<1024px){.cs--content{width:100%;}}
.cs--title{padding: 0;margin: 0; font-family: Helvetica Neue;font-size: 28px;font-weight: 400;line-height: 30.8px;}
@media(width<1024px){.cs--title{ font-size: 21px; line-height: 25.2px;}}
.cs--excerpt{flex-grow: 1;color:#151515;}
.cs--excerpt{font-family: Poppins;font-size: 16px;font-weight: 300;line-height: 24px;padding :20px 0px;}
@media (width<1024px){.cs--excerpt{padding:}}
@media(width<1024px){.cs--excerpt{padding-top:14px;}}