.clx-animated-section {
    position: relative;
    height: 900px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    padding: 0px;
}

.clx-scroll-content {
    height: 3600px;
    position: relative;
    overflow: hidden;
}

.clx-cards-container {
    position: sticky;
    top: 90px;
    height: 650px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.clx-cards {
    position: relative;
    width: 100%;
    height: 600px;
}

.clx-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 25px;
    transform: translateY(900px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clx-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.4) 70%, 
        rgba(0,0,0,0.8) 100%);
    z-index: 1;
    border-radius: 25px;
}

.clx-card-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: transparent;
}

.clx-card-text {
    flex-grow: 1;
    padding-right: 2rem;
}

.clx-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
    text-align: left;
}

.clx-card-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    text-align: left;
}

.clx-read-more {
    padding: 0.75rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    white-space: nowrap;
    cursor: pointer;
}

.clx-read-more:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.clx-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.clx-scroll-trigger {
    position: absolute;
    height: 900px;
    width: 100%;
}

.clx-scroll-trigger:nth-child(1) { top: 0; }
.clx-scroll-trigger:nth-child(2) { top: 900px; }
.clx-scroll-trigger:nth-child(3) { top: 1800px; }
.clx-scroll-trigger:nth-child(4) { top: 2700px; }


.mask-group-parent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    padding: 100px 0;
    background: transparent;
    width: 100%;
    min-height: 100px;
    padding-top: 100px;
    overflow: visible;
    text-align: center;
    font-size: var(--font-size-21xl);
    z-index: 0;
    padding: 100px 7.5rem;    
    border-top: 1px solid #414141;
}
.mask-group-parent:before {
    content: "";
    background-image: url(../public/images/pattern-bg.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 274px;
    position: absolute;
    left: 0;
    top: 0; 
}

.case-study-wrap { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 40px; width: 100%; }
.case-study-box { width: calc(33.33% - 20px); transition: all 0.3s ease-in-out !important; }
.case-study-box:hover { transform: translateY(-10px) !important; }
.case-study-inner-box { border: 1px solid #434343; background: linear-gradient(182deg, #000 1.72%, #242424 98.35%); padding: 28px; text-align: left; color: #fff; display: flex; flex-direction: column; height: 100%; }
.case-study-inner-box .title { font-size: 32px; font-weight: 500; margin-bottom: 10px; }
.case-study-inner-box p { font-size: 20px; line-height: 28px; font-weight: 400; margin-bottom: 15px; min-height: 56px; }
.case-study-inner-box .circle-btn { width: 42px; height: 42px; margin-bottom: 30px; display: inline-block; border-radius: 50%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none"><circle cx="21" cy="21" r="21" fill="url(%23paint0_linear_214_2266)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M29.6948 21.6823H9L9 19.9557H29.6948L21.9601 12.2209L23.1809 11L33 20.819L23.1809 30.638L21.9601 29.4171L29.6948 21.6823Z" fill="black"/><defs><linearGradient id="paint0_linear_214_2266" x1="21" y1="0" x2="21" y2="42" gradientUnits="userSpaceOnUse"><stop stop-color="%239AD63C"/><stop offset="1" stop-color="%2308BBBF"/></linearGradient></defs></svg>'); background-repeat: no-repeat; transition: all 0.3s ease-in-out !important; }
.case-study-inner-box .circle-btn:hover, .case-study-inner-box .circle-btn:focus { transform: scale(1.1) !important; }
.case-study-inner-box .img-box { width: 100%; height: 329px; margin-top: auto; }
.case-study-inner-box .img-box img { object-fit: cover; object-position: center; width: 100%; height: 100%; vertical-align: middle; }

@media (min-width: 1561px) {
    .case-study-wrap { padding-top: 50px; }
}
@media (max-width: 1536px) {
    .case-study-inner-box p { font-size: 19px; }
}

@media (max-width: 1560px) {
    .case-study-wrap { max-width: 1220px; margin: 0 auto; }
    .case-study-inner-box .title { font-size: 30px; }
    .case-study-inner-box p { font-size: 19px; min-height: 72px; }
    .case-study-inner-box .img-box { height: 280px; }
    .case-study-inner-box .title { font-size: 24px; line-height: 30px; }
    .case-study-inner-box p { font-size: 18px; line-height: 24px; }
    .case-study-inner-box .circle-btn { width: 38px; height: 38px; background-size: 100%; }
    .case-study-inner-box .img-box { height: 250px; }  
    .info-text p { font-size: 22px; }
    .mask-group-parent { padding-left: 0; padding-right: 0; }
    .footer { padding-left: 0; padding-right: 0; max-width: 1220px; margin: 0 auto; }     
    .copyright-2024 { padding-left: 131px; padding-right: 131px; }
 }

@media (max-width: 1366px) {
    
    .copyright-2024 { padding-left: 70px; padding-right: 70px; }  
} 

@media (max-width: 1325px) {    
    .copyright-2024 { padding-left: 30px; padding-right: 30px; }  
}

@media (max-width: 1199px) {
	.mask-group-parent { padding: 70px 20px 0; }
    .case-study-wrap { gap: 20px; padding-top: 30px; }
    .case-study-box { width: calc(33.33% - 13.33px); }
    .case-study-inner-box { padding: 20px; }
    .case-study-inner-box .title { font-size: 24px; margin-bottom: 10px; }
    .case-study-inner-box .circle-btn { margin-bottom: 15px; }
    .case-study-inner-box .img-box { height: 170px; }
    .case-study-inner-box p { font-size: 16px; line-height: 22px; margin-bottom: 15px; min-height: 66px; }
    .case-study-inner-box .circle-btn { width: 36px; height: 36px; background-size: cover; }
    .info-text p { text-align: left; padding-bottom: 0; } 
    .info-text p:before { width: 14px; height: 14px; vertical-align: top; top: 6px; position: relative; margin-right: 10px; }
    .info-text p span { display: inline-block; vertical-align: middle; transform: none !important; width: calc(100% - 30px); line-height: 1.2; }
    .footer, .copyright-2024 { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 991px) {
    .case-study-wrap { flex-wrap: wrap; }
    .case-study-box { width: calc(50% - 10px); }
    .case-study-inner-box .title { font-size: 22px; margin-bottom: 5px; }
    .case-study-inner-box .circle-btn { width: 32px; height: 32px; background-size: 100%; }
    .case-study-inner-box p { margin-bottom: 10px; font-size: 17px; }
    .case-study-inner-box .circle-btn { margin-bottom: 10px; }
    .info-text { height: 62px; }
    .info-text p { font-size: 20px; }
    .footer, .copyright-2024 { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 767px) {
	.clx-card-title { font-size: 24px; line-height: 30px; }
	.clx-card-description { font-size: 14px; line-height: 20px; }
    .case-study-box { width: 100%; }
    .case-study-inner-box .title { font-size: 22px; }
    .case-study-inner-box p { font-size: 16px; line-height: 20px; min-height: auto; }
    .case-study-wrap { padding-top: 5px; }
    .page-template-archive-case .case-studies { font-size: 24px; }
    .info-text p:before { width: 10px; height: 10px; top: 2px; margin-right: 6px; }
    .info-text p { font-size: 16px; }
    .copyright-2024 { flex-direction: column; }
    .copyright-2024 .footer-col { width: 100%; text-align: center !important; }
}