.paint-facts {

     padding: 4rem 0;
     margin: auto;
     width: 100%;
 }

 .paint-facts-header {
     font-family: Inter-Regular;
     width: 80%;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;

     margin-bottom: 2rem;
 }

 .paint-facts h2 {
   font-size: 40px;
   line-height: 55px;
   font-weight: 600;
     font-family: PolySans-Median;


 }

 .paint-facts p.section-subtitle {
   font-size: 18px;
   line-height: 22px;
   font-weight: 400;
   font-family: Inter-Regular;
     color: #555;

 }

 .cards-container {
     display: flex;
     overflow-x: scroll;
         margin-right: 2rem;
     /* scroll-snap-type: x mandatory; */
     /* cursor: grab; */
     /* -webkit-overflow-scrolling: touch; */
 }

 .cards-container::-webkit-scrollbar {
     display: none;
 }


 .cards-container:active {
     /* cursor: grabbing; */
 }

 .card {
     display: flex;
     flex-direction: column;
     width: fit-content;
     margin-left: 30px;

 }

 .card img {
     width: 100%;
     object-fit: cover;
     display: block;
 }



 /* Mobile (up to 767px) */
 @media (max-width: 767px) {
     .paint-facts-header {
         display: flex;
         flex-direction: column;
         text-align: center;
         gap: 0.8rem;
     }

     .card img {
         width: 244px;
         height: 267px;
     }
 }

 /* Desktop (min 1024px) */
 @media (min-width: 1024px) {
     .card img {
         width: 371px;
         height: 405px;
     }
 }

 /* Tablet scaling */
 @media (min-width: 768px) and (max-width: 1023px) {
     .card img {
         width: clamp(260px, 30vw, 371px);
         height: clamp(280px, 35vw, 405px);
     }
 }

 .card h3 {
   font-size: 23px;
   line-height: 22px;
   font-weight: 700;
   font-family: Inter-Bold;

     margin-top: 0.8rem;
     margin-bottom: 1rem;
     color: #4B5466;
 }

 .card p {
   font-size: 18px;
   line-height: 22px;
   font-weight: 400;
   font-family: Inter-Regular;
     color: #4B5466;
   
 }

 /* Make it scrollable horizontally on small screens */
 @media (max-width: 768px) {
     .cards-container {
         display: flex;
         /* overflow-x: auto; */
         gap: 1rem;
         /* scroll-snap-type: x mandatory;
         -webkit-overflow-scrolling: touch; */
     }

 }

  @media (max-width: 426px) {
   .paint-facts h2 {
     font-size: 30px;
     line-height: 30px;
   }
     .paint-facts-header{
    width: 70%;
  }
  .card h3{
    font-size: 20px;
    line-height: 22px;
  }
    .card p{
    font-size: 16px;
    line-height: 22px;
  }
  .card{
    margin-left: 16px;
  }
  .cards-container{
    margin-right: 0;
  }
 }

 @media (max-width: 321px) {
      .card h3{
    font-size: 16px;
    line-height: 20px;
  }
    .card p{
    font-size: 13px;
    line-height: 15px;
  }
  .paint-facts{
    padding: 2rem 0;
  }
 }