@import "../styles.css";
.moreClientsHeading,
.endUsers {
  font-size: 2rem;
  position: relative;
  font-weight: 500;
  margin: 5rem;
}
.moreClientsHeading .line {
  height: 0.3rem;
  width: 4rem;
  border-radius: 1rem 1rem;
  position: absolute;
  bottom: 0;
  left: 21%;
  background-color: var(primary);
}
.moreClientsHeading,
.endUsers {
  margin-top: 10rem;
}
.endUsers .line {
  height: 0.3rem;
  width: 4rem;
  border-radius: 1rem 1rem;
  position: absolute;
  bottom: 0;
  left: 11%;
  background-color: var(primary);
}
.clientSection {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}
.clientSection img,
.endUsersSection img {
  width: 14rem;
}
.clientInnerContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.endUsersSection {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}
.clientCard,
.endUsersCard {
  margin: auto 0;
}
.clientBaseMap {
  width: 100%;
  height: 80vh;
  background-image: url("../images/map.png");
  background-repeat: no-repeat;
  background-size: contain;
  border: 2px solid gray;
}

@media (max-width: 576px) {
  .endUsersSection {
    grid-template-columns: 1fr 1fr !important;
    gap: 5rem;
    width: 80%;
    margin: auto;
  }
  .clientSection {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 5rem;
  }
  .clientSection {
    width: 80%;
  }
}
@media (max-width: 768px) {
}
@media (max-width: 992px) {
  html {
    font-size: 45% !important;
  }
  .endUsersSection {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5rem;
    width: 80%;
    margin: auto;
  }
  .clientSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5rem;
  }
  .clientSection {
    width: 80%;
  }
  .clientBaseMap {
    width: 100%;
    height: 50vh;
  }
}
@media (max-width: 1200px) {
}