/* Info Cards*/
  .info-section.offset-section .info-card h2 {
      padding-bottom: 2.5rem;
  }


  .info-section.offset-section .info-card p:last-of-type {
      padding-top: 2.5rem;
  }

  .principles-section {
      display: grid;
      grid-template-columns: repeat(2, 1fr);

  }

  .info-card.blue-content {
      color: #ffffff;
      background: #233E99;
      box-sizing: border-box;
      min-height: 653px;
  }

  .info-card {
      padding: 4rem 5rem;
      justify-content: space-around;
  }

  .info-card h3 {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 1rem;
  }


  /* Principles section  */
  .principles-text,
  .principles-details {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      font-size: 14px;
      justify-content: space-evenly;
  }

  .details-text {
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }

  .details-buttons {
      display: flex;
      gap: 15px;
  }

  .details-buttons * {
      width: 275px
  }

  @media screen and (max-width: 1300px) {
      div#sustainability-container {
          margin-bottom: 220px;
      }

      /* Info Cards*/
      .info-card {
          padding: 3rem;
      }

      .info-card h3 {
          font-size: 24px;
      }

      .button-blue {
          padding: 1rem 1.2rem;
      }

  }

  @media screen and (max-width: 1000px) {
      .principles-section .details-buttons {
          display: flex;
          align-items: center;
          flex-direction: row;
          gap: 10px;
      }

      .button-blue {
          padding: 1rem 1.2rem;
          width: 100%;
      }

  }

  @media screen and (max-width: 768px) {
      div#sustainability-container {
          margin-bottom: 150px;
      }

      /* Info Cards*/
      .info-card h3 {
          font-size: 30px;
      }

      .info-section.offset-section .info-card p:last-of-type {
          padding-top: 1rem;
      }

      .info-section.offset-section .info-card p:nth-of-type(2) {
          padding-top: 0
      }

      .services-section .card,
      .services-section .card:not(:hover) {
          margin-inline: 5px;
          width: 90%
      }

      .principles-section .details-buttons {
          gap: 7px;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
      }

      .details-buttons * {
          width: 88%;
      }
  }

  @media screen and (max-width: 490px) {
      div#sustainability-container {
          margin-bottom: 100px;
      }

  }