body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', sans-serif;
      background-color: #fff;
    }

    .hero-image {
      width: 100%;
      height: 60vh;
      background-image: url('/images/csr/csr.png');
      background-size: cover;
      background-position: center;
    }

    .image-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 2vh;
      padding-left: 14%;
      padding-right: 14%;
      align-items: center;
    }

    .image-row img {
      width: 32%;
      aspect-ratio: 3 / 2; /* 1:2 horizontal ratio */
      object-fit: cover;
      margin: 0.5%;
      border-radius: 8px;
    }

    @media (max-width: 768px) {
      .image-row {
        flex-direction: column;
        align-items: center;
      }

      .image-row img {
        width: 90%;
        margin-bottom: 2vh;
      }
    }

    .text-section {
      width: 70vw;
      margin: 5vh auto;
      font-size: 2rem;
      line-height: 1.6;
      color: #333;
      text-align: justify;
    }

    .text-section h3 {
        color: #f57c00;
        font-weight: bold;
        font-size: 2.5rem;
        text-align: left;
    }