.taglit-mission {
  width: 100%;
  padding: 80px 40px;
  aspect-ratio: 1920/960;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: visible;
}
.taglit-mission .taglit-mission__overlay {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#0000007a ;
  z-index:-1;
}
.taglit-mission .container {
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
}

.taglit-mission .container .taglit-mission__content {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.taglit-mission .container .taglit-mission__content .taglit-mission__title {
  font-family:
    CircularXX TT,
    sans-serif;
  font-weight: 450;
  font-size: 40px;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  color: white;
}

.taglit-mission .container .taglit-mission__content .taglit-mission__cards {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  align-items: stretch; /* Ensure all cards stretch to same height */
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.taglit-mission
  .container
  .taglit-mission__content
  .taglit-mission__cards
  .taglit-mission__card {
  width: calc((100% - 48px) / 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  background-color: rgba(0, 21, 74, 0.8);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid rgba(84, 98, 134, 1);
  box-sizing: border-box;
  align-self: stretch; /* Ensure card stretches to match row height */
}

.taglit-mission
  .container
  .taglit-mission__content
  .taglit-mission__cards
  .taglit-mission__card
  .taglit-mission__card-title {
  font-family:
    CircularXX TT,
    sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  width: 100%;
  color: rgba(118, 209, 249, 1);
}

.taglit-mission
  .container
  .taglit-mission__content
  .taglit-mission__cards
  .taglit-mission__card
  .taglit-mission__card-text {
  font-family:
    CircularXX TT,
    sans-serif;
  font-weight: 450;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  color: rgba(251, 253, 255, 1);
}

@media (max-width: 1280px) {
  .taglit-mission {
    aspect-ratio: unset;
    height: auto;
    min-height: 0;
  }

  .taglit-mission .container {
    max-width: 688px;
  }

  .taglit-mission .container .taglit-mission__content .taglit-mission__title {
    font-size: 32px;
    line-height: 40px;
  }

  .taglit-mission
    .container
    .taglit-mission__content
    .taglit-mission__cards
    .taglit-mission__card {
    gap: 16px;
  }

  .taglit-mission
    .container
    .taglit-mission__content
    .taglit-mission__cards
    .taglit-mission__card
    .taglit-mission__card-title {
    font-size: 24px;
    line-height: 33.6px;
  }
}

@media (max-width: 768px) {
  .taglit-mission {
    padding: 40px 24px;
    padding-bottom: 48px;
  }
  .taglit-mission .container .taglit-mission__content {
    gap: 32px;
  }
  .taglit-mission .container .taglit-mission__content .taglit-mission__cards {
    flex-direction: column;
  }
  .taglit-mission
    .container
    .taglit-mission__content
    .taglit-mission__cards
    .taglit-mission__card {
    width: 100%;
  }
}

@media (max-width: 550px) {
  .taglit-mission
    .container
    .taglit-mission__content
    .taglit-mission__cards
    .taglit-mission__card {
    padding: 24px;
  }
}
