@charset "utf-8";

.stats {
  max-width: var(--widthMax);
  margin: 20px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0px 20px;
  align-items: center;
}

.statsText {
  padding: 0px 20px;
}

.statsMapa {
  width: 100%;
  max-width: 100%;
}

.statsData {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  height: 100%;
}

.statsDataItem {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.statsDataItem p {
  text-align: center;
}

.statsDataItem h2 {
  margin-bottom: 0;
  line-height: 1em;
}

.statsMapa SVG {
  width: 100%;
  height: auto;
  max-height: 75vh;
  overflow: visible;
}


/* All elements whose class attribute contains 'mapDistrict' */
[class*="mapDistrict"] {
  stroke: #000;
  stroke-linejoin: round;
  fill: #9ce4ff;
  filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.4));
  transition: filter 0.2s ease, fill 0.2s ease;
}

[class*="mapDistrict"]:hover {
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.35));
  cursor: pointer;
  fill: #7dd3f9;
}


.mapDistrict1,
.mapDistrict1:hover,
.mapDistrict7,
.mapDistrict7:hover,
.mapDistrict8,
.mapDistrict8:hover {
  fill: #5cc5e5;
  cursor: not-allowed;
  filter: none;
}

.mapTekst {
  font-family: "Barlow Condensed", sans-serif;
  color: black;
  font-size: 1.7em;
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 0.9rem;
  text-align: left;
  pointer-events: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
}

.mapRegionVojvodina {
  fill: #dd9d9d;
  stroke-linecap: round;
}

/* map end */

@media only screen and (max-width: 1080px) {}

@media only screen and (max-width: 780px) {

  .stats {
    width: 100%;
    margin: 0px auto;
    padding: 0px 10px;
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .statsMapa SVG {
    max-height: 70vh;
  }
}

@media only screen and (max-width: 340px) {}