#values .vision-image,
#values .mission-image {
  width: 100%;
  height: 500px;

}

@media screen and (max-width: 992px) {
    .vision-image, .mission-image {
        height: 300px;
    }
  }

.template1-mission {
  z-index: 2;
  background: white;
  border-radius: var(--bs-border-radius-lg) !important;
  top: 50%;
  padding: 20px;
  filter: drop-shadow(2px 4px 6px #00000060);
  transform: translate(-100px);
  max-height: 400px;
  overflow: auto;
}

.template1-mission p {
    color: #000000 !important;
}

@media screen and (max-width: 992px) {
    .template1-mission {
        transform: translateY(-50px);
        margin: 0 10px;
        width: calc(100% - 20px);
    }
}

.template1-vision {
z-index: 2;
background: white;
border-radius: var(--bs-border-radius-lg) !important;
top: 50%;
padding: 20px;
filter: drop-shadow(2px 4px 6px #00000060);
transform: translate(100px);
max-height: 400px;
overflow: auto;
}

.template1-vision p {
    color: #000000 !important;
}

@media screen and (max-width: 992px) {
    .template1-vision {
        transform: translateY(-50px);
        margin: 0 10px;
        width: calc(100% - 20px);
    }
}


@media screen and (max-width: 992px) {
  .template2-images {
    flex-direction: column;
    position: absolute;
    z-index: 1;
    opacity: 0.12;
    top: 50%;
    transform: translate(0%, -40%) !important;
  }
}


#values .overlay {
  width: 77%;
  left: 11px;
  height: 50%;
  z-index: 0 !important;
}

#values .value-description {
    font-size: 1rem;
    overflow: auto;
}

@media (max-width: 992px) {
    .value-description, p {
      font-size: 1.25rem;
    }
  }

  @media (max-width: 576px) {
    .value-description, p {
      font-size: 1rem;
    }
  }

#values .triggerModalBtn i {
  transition: none !important;
}