.svg-margin {
  width: 85%;
  height: 14vh;
  /* margin-left: 13.2%; */
  max-width: 1920px;
  position: absolute;
  bottom: -15px;
}

.svg-path2 {
  fill: transparent;
  stroke: var(--gray2);
  stroke-dasharray: 1500;
  stroke-width: 1 !important;
  stroke-dashoffset: 1211;
  /* transition: 0.4s ease-in-out;  */
}

.svg-path5 {
  fill: transparent;
  stroke: var(--gray2);
  stroke-dasharray: 260;
  stroke-width: 1 !important;
  /* Safari renders negative stroke-dashoffset inconsistently; positive
     equivalent (period = 2 * 260 = 520): -4 + 520 = 516. */
  stroke-dashoffset: 516;
}

.svg-path4 {
  fill: transparent;
  stroke: var(--gray2);
  stroke-dasharray: 1500;
  stroke-width: 1 !important;
  /* stroke-dashoffset: 850; */
  /* Safari renders negative stroke-dashoffset inconsistently; positive
     equivalent (period = 2 * 1500 = 3000): -4 + 3000 = 2996. */
  stroke-dashoffset: 2996;
  /* transition: 0.4s ease-in-out;  */
}

.svg-path1 {
  fill: transparent;
  stroke: var(--gray2);
  stroke-dasharray: 1500;
  stroke-width: 1 !important;
  stroke-dashoffset: 460;
  /* transition: 0.4s ease-in-out;  */
}

.svg-path3 {
  fill: transparent;
  stroke: var(--gray2);
  stroke-dasharray: 1500;
  stroke-width: 1 !important;
  /* stroke-dashoffset: -999; */
  stroke-dashoffset: 0;
  /* transition: 0.4s ease-in-out;  */
}

/* Animate stroke from right to left on hover */
.graphics-first:hover .svg-first-1,
.graphics-second:hover .svg-second-1,
.graphics-third:hover .svg-third-1 {
  cursor: pointer;
  animation: svgAniRightToLeft 0s ease-in-out forwards;
  stroke: var(--8d);
}

@keyframes svgAniRightToLeft {
  from {
    /* positive equivalent of -1500 (period 3000) for Safari consistency */
    stroke-dashoffset: 1500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

text {
  cursor: pointer;
  /* font-weight: var(--xl); */
  font-family: var(--barlow);
  font-size: var(--eighteen);
  text-transform: uppercase;
}

.svg-first-1,
.svg-second-1,
.svg-third-1,
.svg-fourth-1,
.svg-fifth-1 {
  opacity: 1;
  stroke: transparent;
  stroke-width: 1px !important;
  transition: 0s !important;
}

/* Animate stroke from left to right on hover */

.graphics-fourth:hover .svg-fourth-1,
.graphics-fifth:hover .svg-fifth-1 {
  cursor: pointer;
  animation: svgAni 0s ease-in-out forwards;
  stroke: var(--8d);
}

@keyframes svgAni {
  from {
    stroke-dashoffset: 1500; /* Start hidden */
  }
  to {
    stroke-dashoffset: 0; /* Fully revealed */
  }
}

.svg-active-default,
.current-active {
  fill: var(--8d);
  stroke: var(--8d) !important;
  stroke-width: 1 !important;
  stroke-dasharray: 1500;
  stroke-dashoffset: 0;
  transition: 0.4s ease-in-out;
}

.after-svg {
  display: flex;
  gap: 30px;
  visibility: hidden;
  position: absolute;
  cursor: pointer;
  pointer-events: none;
}

.after-svg li {
  list-style: none;
}

@media screen and (max-width: 1300px) {
  .svg-margin {
    width: 95%;
  }
}

@media screen and (max-width: 1024px) {
  .after-svg {
    visibility: visible;
    position: relative;
    flex-wrap: wrap;
    pointer-events: auto;
    margin: 0px auto 0;
    gap: 10px;
  }
  svg {
    display: none;
  }

  .after-svg a {
    color: var(--df);
    background-color: var(--8d);
    font-weight: var(--xl);
    font-size: var(--fourteen);
    padding: 1px 3px;
    text-decoration: none;
  }
}

@media screen and (max-width: 1024px) {
  .svg-margin {
    bottom: -5px;
    margin: 0;
  }
}

@media screen and (min-width: 1921px) {
  .svg-margin {
    max-width: 1450px;
    width: 100%;
    left: 0;
  }
}