.slider-container {
     display: flex;
     align-items: flex-start;
 }

 .static-slide {
     width: 276px;
     height: 227px;
     /* background: #f6ff6b; */
     font-family: 'gt-america-regular';
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 22.4px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     /* min-width: 160px;  */
     border: 1px solid #CDCEC3;
     flex-shrink: 0;
     /* padding: 20px 0;  */
     margin-right: 0;
     /* removed gap */
     box-sizing: border-box;
 }

 .swiper {
     flex: 1;
 }

 .swiper-wrapper {
     align-items: stretch;
     /* match height of slides */
 }

 .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
     /* padding: 20px 0;*/
     border: 1px solid #CDCEC3;
     box-sizing: border-box;
 }

 .swiper-slide img {
     max-height: 120px;
     max-width: 150px;
     object-fit: contain;
     display: block;
 }

 .logo-box {
     width: 276px;
     height: 227px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     box-sizing: border-box;
 }

 .logo-box img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     /* keep aspect ratio */
 }

 /*-----------------------------------*/
 /* Layout */
 .main-section-content-area {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 80px;
     padding-top: 100px;
     box-sizing: border-box;
     text-align: left;
     font-size: 60px;
     font-family: 'lyon-regular';
 }

 .section-title {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 40px;
     padding: 0 30px;
 }

 .title-text {
     font-weight: 500;
     line-height: 100%;
 }

 /*cards css*/
 /* Cards */

 .project-cards {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 48px;
     padding: 0 30px;
     font-size: 16px;
 }

 .project-cards-row {
     display: flex;
     gap: 30px;
 }

 .project-card {
     width: 100%;
     max-width: 550px;
     display: flex;
     flex-direction: column;
     gap: 28px;
 }

 .project-card img {
     width: 100%;
     height: 408px;
     object-fit: cover;
 }

 .project-card-content {
     display: flex;
     flex-direction: column;
     gap: 48px;
 }

 .project-content {
     display: flex;
     flex-direction: column;
     gap: 32px;
 }

 .project-stroke {
     border-top: 1px solid #000;
 }

 .project-cards-row.hidden {
     display: none;
 }

 .project-load-more-wrap {
     margin-bottom: 100px;
     text-align: center;

 }

 .project-load-more-btn {
     background: #EEFF75;
     color: #000;
     padding: 15px 28px;
     border: none;
     cursor: pointer;
     font-family: 'gt-america-regular';
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: 14px;
     letter-spacing: 2px;
     text-transform: uppercase;
 }

 /* keep your same CSS */
 .project-filter-btn {
     cursor: pointer;
 }

 .project-filter-btn.active {
     background-color: #EEFF75;
     transition: background 0.3s;
 }

 .project-title {
     font-family: "lyon-regular";
     font-size: 40px;
     font-style: normal;
     font-weight: 500;
     line-height: 48px;
 }

 .project-date {
     font-family: "gt-america-regular";
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 16px;
     text-transform: uppercase;
 }

 /*----------------------------*/
 /* Tablet view (768px and below) */
 @media (max-width: 768px) {

     .main-section-content-area {
         padding: 60px 20px;
         gap: 40px;
         font-size: 40px;
     }

     .section-title {
         gap: 25px;
         padding: 0 15px;
     }

     .project-cards {
         padding: 0 15px;
         gap: 30px;
     }

     .project-cards-row {
         flex-direction: column;
         /* stack cards vertically */
         gap: 20px;
     }

     .project-card {
         max-width: 100%;
         width: 100%;
         gap: 20px;
     }

     .project-card img {
         height: auto;
         /* maintain aspect ratio */
     }

     .project-card-content {
         gap: 30px;
     }

     .project-content {
         gap: 20px;
     }

     .project-title {
         font-size: 32px;
         line-height: 38px;
     }

     .project-date {
         font-size: 14px;
         line-height: 14px;
     }

     .project-load-more-btn {
         padding: 12px 25px;
         font-size: 13px;
     }
 }

 /*----------------------------*/
 /* Mobile view (480px and below) */
 @media (max-width: 480px) {

     .main-section-content-area {
         padding: 40px 15px;
         gap: 30px;
         font-size: 32px;
     }

     .section-title {
         gap: 20px;
         padding: 0 10px;
     }

     .project-cards {
         gap: 20px;
         padding: 0 10px;
     }

     .project-cards-row {
         gap: 15px;
     }

     .project-card {
         gap: 15px;
     }

     .project-card img {
         height: auto;
     }

     .project-card-content {
         gap: 20px;
     }

     .project-content {
         gap: 15px;
     }

     .project-title {
         font-size: 24px;
         line-height: 28px;
     }

     .project-date {
         font-size: 12px;
         line-height: 12px;
     }

     .project-load-more-btn {
         padding: 10px 20px;
         font-size: 12px;
     }
 }

 /*----------------------------*/
 /* Tablet view (768px and below) */
 @media (max-width: 768px) {

     .main-section-content-area {
         padding: 60px 20px;
         gap: 40px;
         font-size: 40px;
     }

     .section-title {
         gap: 25px;
         padding: 0 15px;
     }

     .project-cards {
         padding: 0 15px;
         gap: 30px;
     }

     .project-cards-row {
         flex-direction: column;
         /* stack cards vertically */
         gap: 20px;
     }

     .project-card {
         max-width: 100%;
         width: 100%;
         gap: 20px;
     }

     .project-card img {
         height: auto;
         /* maintain aspect ratio */
     }

     .project-card-content {
         gap: 30px;
     }

     .project-content {
         gap: 20px;
     }

     .project-title {
         font-size: 32px;
         line-height: 38px;
     }

     .project-date {
         font-size: 14px;
         line-height: 14px;
     }

     .project-load-more-btn {
         padding: 12px 25px;
         font-size: 13px;
     }
 }

 /*----------------------------*/
 /* Mobile view (480px and below) */
 @media (max-width: 480px) {

     .main-section-content-area {
         padding: 40px 15px;
         gap: 30px;
         font-size: 32px;
     }

     .section-title {
         gap: 20px;
         padding: 0 10px;
     }

     .project-cards {
         gap: 20px;
         padding: 0 10px;
     }

     .project-cards-row {
         gap: 15px;
     }

     .project-card {
         gap: 15px;
     }

     .project-card img {
         height: auto;
     }

     .project-card-content {
         gap: 20px;
     }

     .project-content {
         gap: 15px;
     }

     .project-title {
         font-size: 24px;
         line-height: 28px;
     }

     .project-date {
         font-size: 12px;
         line-height: 12px;
     }

     .project-load-more-btn {
         padding: 10px 20px;
         font-size: 12px;
     }
 }

 /*----------------------------*/
 /* Mobile view (480px and below) */
 @media (max-width: 480px) {

     .logo-box {
         width: 160px;
         height: 140px;
     }

     .logo-box img {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
         /* keep aspect ratio */
     }

     .static-slide {
         width: 160px !important;
         height: 140px !important;
     }

     .swiper-slide {
         width: 160px !important;
         height: 140px !important;
     }
 }

 /*----------------------------*/
 /* Image hover/scale effect */
 /* Ensure the card hides overflow for image scaling */
 .project-card {
     overflow: hidden;
     /* keeps image inside card */

 }

 /* Images inside project card */
 .project-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* maintain aspect ratio and fill card */
     transition: transform 0.3s ease;
     /* smooth zoom */
 }

 /* Hover/scale effect */
 .project-card:hover img {
     transform: scale(1.05);
     /* zoom in slightly on hover */
 }

 /* Mobile adjustment (smaller scale to avoid overflow) */
 @media (max-width: 480px) {
     .project-card:hover img {
         transform: scale(1.03);
     }
 }

 /************************************/