/* filename: css/our_impact_report.css */
.paragraph-margin-bottom-full{
  margin-bottom: unset !important;
}

.our-impact-report-paragraph{
  background-color: #fff;
}

.our-impact-report-content {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: single column */
  gap: 2em;
  align-items: center; /* Vertically align items in grid cells */
  max-width: 1100px; /* Adjust max-width as needed */
  margin: 0 auto; /* Centering and vertical spacing */
  padding: 5em 0px; /* Padding around the component */
}

/* Desktop: two columns */
@media (min-width: 768px) {
  .our-impact-report-content {
    grid-template-columns: 1fr 1fr; /* Two columns, adjust ratio if needed (e.g., 1.5fr 1fr) */
    gap: 3em; /* Adjust gap between columns */
  }
}

.oir__content {
  /* Styling for the left text/button column */
}

.oir__title {
  font-size: 27px;
  font-weight: 600;
  color: #4B4C57;
  padding-bottom: 1rem;
}

.oir__description p{
  font-size: 16px; /* Adjust size */
  color: #000 !important; /* Standard text color */
  line-height: 1.7;
  margin-bottom: 1.5em;
  font-weight: 400;
}

.oir__description > *:last-child {
  margin-bottom: 0;
}

.oir__cta {
  /* Spacing for the button */
}

/* Basic Button Styling (adapt to your theme's button styles) */
.oir__cta .button {
  display: inline-flex; /* Align icon and text */
  align-items: center;
  gap: 0.5em; /* Space between icon and text */
  background-color: #005AC8; /* Blue background */
  color: #ffffff; /* White text */
  padding: 0.8em 1.5em;
  border: 1px solid;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size:16px;
}

.oir__cta .button:hover,
.oir__cta .button:focus {
  background-color: #ffffff !important;
  border-color: #2a55ca !important;
  color: #2a55ca !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid;
  font-size: 16px;
}

.oir__cta .button .icon {
  width: 1.2em;
  height: 1.2em;
  /* Icon color is inherited via 'fill: currentColor' */
}

.oir__image {
  text-align: center; /* Center image if needed */
}

.oir__image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px; /* Slight rounding on image */
}