.cards-container {
     display: flex;
     gap: 40px;
     will-change: transform;
 }
 
 .scroll-section {
     padding: 40px 0 0;
     overflow: hidden;
 }
 
 .scroll-section .cards-container {
     display: flex;
     gap: 20px;
     padding: 0 100px;
     will-change: transform;
 }
 
 .scroll-section .card-item {
     min-width: 450px;
     height: 450px;
     border-radius: 20px;
     overflow: hidden;
     /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); */
     position: relative;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
 }
 
 .card-item-last {
     box-shadow: none !important;
     padding-left: 30px;
 }
 
 .scroll-section .card-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
 }
 
 .scroll-section .card-item::before {
     content: '';
     position: absolute;
     /* top: 0; */
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
     z-index: 1;
     height: 25%;
 }
 
 .scroll-section .card-item-last::before {
     background: none !important
 }
 
 .scroll-section .card-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: 0;
     transition: transform 0.5s ease;
 }
 
 .scroll-section .card-item:hover .card-bg {
     transform: scale(1.1);
 }
 
 .scroll-section .card-content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 30px 30px 10px;
     z-index: 2;
     color: white;
 }
 
 .scroll-section .card-content h3 {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 0px;
     text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
 }
 
 .scroll-section .card-content p {
     font-size: 15px !important;
     /* line-height: 1.6; */
     /* opacity: 0.95; */
     /* text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); */
     margin-bottom: 0;
 }
 
 @media (max-width: 1200px) {
     .scroll-section .card-item {
         min-width: 350px;
         height: 450px;
     }
     .scroll-section .cards-container {
         padding: 0 60px;
     }
 }
 
 @media (max-width: 992px) {
     .scroll-section .card-item {
         min-width: 320px;
         height: 420px;
     }
     .scroll-section .cards-container {
         padding: 0 40px;
     }
 }
 
 @media (max-width: 768px) {
     .scroll-section .card-item::before {
         height: 33% !important;
         display: none;
     }
     .scroll-section {
         padding: 40px 20px;
     }
     .scroll-section .cards-container {
         flex-direction: column;
         padding: 0;
         gap: 30px;
         align-items: center;
     }
     .scroll-section .card-item {
         min-width: 100%;
         max-width: 500px;
         width: 100%;
         height: 400px;
     }
     .scroll-section .card-content {
         padding: 25px;
     }
     .scroll-section .card-content h3 {
         font-size: 1.8rem;
         margin-bottom: 10px;
     }
     .scroll-section .card-content p {
         font-size: 1rem;
         line-height: 1.6;
     }
 }
 
 @media (max-width: 576px) {
     .scroll-section {
         padding: 30px 15px 0;
     }
     .scroll-section .cards-container {
         gap: 25px;
     }
     .scroll-section .card-item {
         height: 350px;
         border-radius: 15px;
     }
     .scroll-section .card-content {
         padding: 20px;
         top: 0;
     }
     .scroll-section .card-content h3 {
         font-size: 1.5rem;
     }
     .scroll-section .card-content p {
         font-size: 0.9rem;
     }
 }
 
 @media (max-width: 400px) {
     .scroll-section .card-item {
         height: 320px;
     }
     .scroll-section .card-content h3 {
         font-size: 1.3rem;
     }
     .scroll-section .card-content p {
         font-size: 15px;
         line-height: normal;
     }
 }