/* ============================================
   Institutions Working With Us - Module Styles
   ============================================ */
.institutions-module {
  width: 100%;
  padding: 60px 20px;
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.institutions-module__container {
  max-width: 1200px;
  margin: 0 auto;
}
/* Heading */
.institutions-module__heading {
  text-align: center;
  font-size: 56px;
  font-weight: 400;
  color: #000000;
  margin: 0 0 50px 0;
  line-height: 1.2;
}
/* Grid */
.institutions-module__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
/* Item — uses inner grid with shared row heights so head/divider/description align across cards */
.institutions-module__item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 0;
}
/* Head: Icon + Title row */
.institutions-module__head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.institutions-module__icon {
  flex-shrink: 0;
  width: 77px;
  height: 77px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}
.institutions-module__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.institutions-module__title {
  font-size: 40px;
  font-weight: 400;
  color: #000000;
  margin: 0;
}
/* Divider with diamond */
.institutions-module__divider {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  height: 14px;
}
.institutions-module__diamond {
  width: 12px;
  height: 12px;
  z-index: 2;
  position:absolute;
  top:-5px;
  left:-5px;
}
html[lang="ar"] .institutions-module__diamond{
left:auto;
  right:-5px;
}
.institutions-module__line {
  flex: 1;
  height:3px;
/* gradient sized to span all 3 columns, so segments stitch into one continuous line */
Background: radial-gradient(at 0% 100%, rgb(3, 227, 115) 10%, transparent 50%),radial-gradient(at 100% 0%, rgb(196, 229, 237) 10%, transparent 50%),radial-gradient(at 0% 0%, rgb(242, 250, 242) 0%, transparent 55%),radial-gradient(at 100% 100%, rgb(242, 250, 242) 0%, transparent 55%), rgb(242, 250, 242);
  background-color: rgb(196, 229, 237);
  background-size: 300% 100%;
  background-repeat: no-repeat;
}

/* 3-column layout: each card's line shows its slice of the full-width gradient */
.institutions-module__item:nth-child(3n + 1) .institutions-module__line { background-position: right center; }
.institutions-module__item:nth-child(3n + 2) .institutions-module__line { background-position: center center; }
.institutions-module__item:nth-child(3n + 3) .institutions-module__line { background-position: left center; }
}
/* Description */
.institutions-module__description {
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  line-height: 1.55;
  margin: 0;
  width:90%;
}

/* ============================================
   Row alignment across cards
   Each item has 3 rows: head (title+icon), divider, description.
   We make each item participate in the parent grid using subgrid so
   row heights are shared across columns — titles, dividers, and
   descriptions always line up regardless of title length.
   ============================================ */
@supports (grid-template-rows: subgrid) {
  .institutions-module__grid {
    grid-template-rows: auto auto 1fr;
  }
  .institutions-module__item {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* Fallback for browsers without subgrid support:
   force the head row to a height that fits the tallest title (3 lines @ 40px). */
@supports not (grid-template-rows: subgrid) {
  .institutions-module__head {
    min-height: 144px; /* roughly 3 lines of 40px text */
  }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 992px) {
  .institutions-module__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
  .institutions-module__line { background-size: 200% 100%; }
  .institutions-module__item:nth-child(odd) .institutions-module__line { background-position: left center; }
  .institutions-module__item:nth-child(even) .institutions-module__line { background-position: right center; }
}
@media (max-width: 600px) {
  .institutions-module {
    padding: 40px 16px;
  }
  .institutions-module__heading {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .institutions-module__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .institutions-module__head {
    min-height: auto;
  }
  .institutions-module__title {
    font-size: 20px;
  }
  .institutions-module__line { background-size: 100% 100%; }
  .institutions-module__item .institutions-module__line { background-position: center center; }
  /* On single-column mobile, alignment doesn't matter — reset subgrid */
  @supports (grid-template-rows: subgrid) {
    .institutions-module__item {
      grid-row: auto;
      grid-template-rows: auto;
    }
  }
}