@media screen and (min-width: 601px) {
  #header .normal .right #navigator .item.isservice {
    pointer-events: none;
  }
}

#firstpart {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../../img/services_001.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  align-content: flex-end;
  margin: var(--espace);
  border-radius: var(--radius-050);
}

#firstpart .details {
  color: var(--color-000);
}

#firstpart .details .title {
  font-family: "yoga";
  margin: 0 0 var(--espace);
}

@media screen and (max-width: 600px) {
  #firstpart {
    height: 300pt;
  }

  #firstpart .details {
    padding: 0 var(--espace) var(--espace);
  }

  #firstpart .details .title {
    font-size: calc(var(--font-size-400) * 1.2);
  }
}

@media screen and (min-width: 601px) {
  #firstpart {
    height: 380pt;
  }

  #firstpart .details {
    padding: 0 25% calc(var(--espace) * 4) 25%;
  }
  
  #firstpart .details .title {
    font-size: calc(var(--font-size-400) * 2);
  }
}

@media screen and (max-width: 600px) {
  #sevicesitem {
    display: grid;
    gap: var(--espace);
  }
}

@media screen and (min-width: 601px) {
  #sevicesitem {
    padding: calc(var(--espace) * 4);
    display: flex;
    flex-direction: column;
    gap: calc(var(--espace) * 4);
  }

  #sevicesitem > .serviceitem:nth-child(odd) {
    align-self: flex-start;
  }
  
  #sevicesitem > .serviceitem:nth-child(even) {
    align-self: flex-end;
  }
}

#sevicesitem .serviceitem {
  max-width: max-content;
  transition: all var(--transition-ease);
  transform:  scale(0.9);
}

#sevicesitem .serviceitem.visible {
  transform:  scale(1);
}

#sevicesitem .serviceitem .head .repere {
  border: 1px solid var(--color-500);
  height: calc(var(--espace) * 3);
  display: grid;
  place-content: center;
  border-radius: 50%;
}

#sevicesitem .serviceitem .head .imge {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  align-content: flex-end;
  border-radius: var(--radius-050);
}

#sevicesitem .serviceitem:nth-child(1) .head .imge{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../img/photography_003.jpg");
}

#sevicesitem .serviceitem:nth-child(2) .head .imge{
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../img/informatic_002.jpg");
}

#sevicesitem .serviceitem:nth-child(3) .head .imge {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../img/comunitymanagement_003.jpg");
}

#sevicesitem .serviceitem:nth-child(4) .head .imge {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../img/seller_002.jpg");
}

#sevicesitem .serviceitem .head .imge .details {
  color: var(--color-000);
  padding: var(--espace);
}

#sevicesitem .serviceitem .head .imge .details .title {
  display: flex;
  align-items: center;
  gap: var(--espace);
}

#sevicesitem .serviceitem .head .imge .details .title .reperetwo {
  min-width: 6pt;
  min-height: 6pt;
  border-radius: 50%;
  border: 1px solid var(--color-000);
}

@media screen and (max-width: 600px) {
  #sevicesitem {
    padding: calc(var(--espace) * 3) var(--espace) 0;
  }

  #sevicesitem .serviceitem {
    display: grid;
  }

  #sevicesitem .serviceitem .head {
    display: grid;
    gap: var(--espace);
    position: relative;
  }

  #sevicesitem .serviceitem .head .repere {
    width: calc(var(--espace) * 3);
    position: absolute;
    top: -2.5%;
    left: -2.5%;
    background: var(--color-000);
  }

  #sevicesitem .serviceitem .head .imge {
    width: 100%;
    height: 200pt;
  }
}

@media screen and (min-width: 601px) {
  #sevicesitem .serviceitem .head {
    display: flex;
    align-items: flex-start;
    gap: var(--espace);
  }

  #sevicesitem .serviceitem .head .repere {
    min-width: calc(var(--espace) * 3);
  }

  #sevicesitem .serviceitem .head .imge {
    width: 500pt;
    height: 250pt;
  }
}

#sevicesitem .serviceitem .body {
  height: 0;
  overflow: hidden;
  transition: all var(--transition-ease);
}


#sevicesitem .serviceitem.visible .body {
  /* height: 100%; */
  /* max-height: max-content; */
  /* margin: 15px 0 0; */
}