/* SECTION */

.zones{
  background: var(--dark);
  margin:auto;
  text-align:center;
}

.zones p{
  max-width:760px;
  margin:0 auto 90px;
  line-height:1.8;
  font-size:18px;
}

/* GRID */

.zones .circles{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:34px;
  justify-items:center;
}

/* CIRCLE */

.zones .circle{
  width:160px;
  height:160px;

  border-radius:50%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  border:1px solid var(--gold);


  padding:30px;

  transition:.35s ease;
}

/* EMPTY */

.zones .circle.empty{
  background:var(--gold);

}

/* HOVER */

.zones .circle:hover{
  transform:translateY(-10px);
}

/* ICON */

.icon{
  width:74px;
  height:74px;
  margin-bottom:20px;
}

.icon svg{
  width:100%;
  height:100%;
  stroke:var(--gold-soft);
}

/* TITLE */

.zones .circle span{
  font-size:18px;
  letter-spacing:3px;
}

/* TABLET */

@media (max-width:1200px){

  .zones .circles{
    grid-template-columns:repeat(3, 1fr);
  }

  .zones .circle{
    width:160px;
    height:160px;
  }

}

@media (max-width:900px){

  .zones .circles{
    grid-template-columns:repeat(2, 1fr);
  }

}

@media (max-width:600px){

  .zones p{
    margin-bottom:50px;
    font-size:16px;
  }

  .zones .circles{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }

  .zones .circle{
    width:100%;
    max-width:160px;
    height:160px;
  }

  .icon{
    width:58px;
    height:58px;
  }

  .zones .circle span{
    font-size:16px;
  }

}