.csr-banner {
     position: relative;
     background-image: url("../../assets/img/csr/concept-csr-corporate-social-responsibility.jpg");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     min-height: 600px;

     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;

     overflow: hidden;
 }

 /* DARK OVERLAY (gradient for premium look) */
 .csr-banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to right,
             rgba(0, 0, 0, 0.7),
             rgba(0, 0, 0, 0.4),
             rgba(0, 0, 0, 0.7));
     z-index: 1;
 }

 /* LOGO SLIDER */
 .csr-logo-slider {
     overflow: hidden;
 }

 .our-impact-head {
     color: wheat;
 }

 .csr-impact {
     position: relative;
     background-image: url("../../assets/img/bg/csr-back.png");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     min-height: 600px;

     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;

     overflow: hidden;
     z-index: 1;
 }

 /* 🔥 DARK OVERLAY */
 .csr-impact::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     /* adjust 0.4 - 0.7 */
     z-index: -1;
 }

 .csr-logo-track {
     display: flex;
     gap: 60px;
     animation: scroll 20s linear infinite;
 }

 .csr-logo-track img {
     height: 60px;
 }

 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* COUNTER */
 .counter-box h3 {
     font-size: 40px;
     color: #ff4d4d;
 }

 /* GALLERY */
 .gallery-item {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
 }

 .gallery-item img {
     width: 100%;
     transition: 0.4s;
 }

 .gallery-item:hover img {
     transform: scale(1.1);
 }

 /* FILTER */
 .filter-btns button {
     margin: 5px;
 }

 /* REPORT CARD */
 .report-card {
     border-radius: 12px;
     transition: 0.3s;
 }

 .report-card:hover {
     transform: translateY(-5px);
 }

 .masonry-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .masonry-item {
     border-radius: 14px;
     overflow: hidden;
     background: #fff;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
     transition: all 0.4s ease;
 }

 .masonry-item img {
     width: 100%;
     height: 260px;
     object-fit: cover;
     display: block;
     transition: transform 0.4s ease;
 }

 /* hover */
 .masonry-item:hover {
     transform: translateY(-8px);
 }

 .masonry-item:hover img {
     transform: scale(1.05);
 }

 /* responsive */
 @media (max-width: 992px) {
     .masonry-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .masonry-grid {
         grid-template-columns: 1fr;
     }
 }

 .filter-btns button {
     border: none;
     padding: 8px 16px;
     margin: 5px;
     border-radius: 20px;
     background: #eee;
     transition: 0.3s;
 }

 .filter-btns button.active,
 .filter-btns button:hover {
     background: #ff4d4d;
     color: #fff;
 }

 .csr-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 /* CARD */
 .csr-card {
     background: #fff;
     padding: 25px;
     border-radius: 14px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
     transition: 0.4s;
     cursor: pointer;
 }

 .csr-card i {
     font-size: 35px;
     color: #ff4d4d;
     margin-bottom: 10px;
 }

 .csr-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }



 /* responsive */
 @media(max-width: 992px) {
     .csr-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width: 576px) {
     .csr-grid {
         grid-template-columns: 1fr;
     }
 }