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

@media screen and (max-width: 768px) {
  .svg-margin {
    bottom: -5px;
    height: 7vh;
  }

  .npl-blog-glass-plate h1 {
    margin: 0 !important;
  }
}

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

.svg-path5 {
  fill: transparent;
  stroke: var(--gray2);
  stroke-dasharray: 260;
  stroke-width: 1;
  /* Safari renders negative stroke-dashoffset inconsistently; use the equivalent
     positive value (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; use the equivalent
     positive value (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;
  /* Safari renders negative stroke-dashoffset inconsistently; use the equivalent
     positive value (period = 2 * 1500 = 3000): -999 + 3000 = 2001. */
  stroke-dashoffset: 2001;
  /* 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(--7a);
}

@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(--7a);
}

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

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

.after-svg {
  display: flex;
  width: 100%;
  gap: 30px;
  margin: 30px 0;
  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;
    gap: 10px;
  }
  svg {
    display: none;
  }

  .after-svg a {
    color: var(--df);
    background-color: var(--7a);
    /* font-weight: var(--xl); */
    font-size: var(--fourteen);
    padding: 1px 3px;
  }

  .svg-margin {
    bottom: -5px;
    margin: 0;
  }
}

@media screen and (max-width: 1024px) {
  .npl-blog-glass-plate {
    padding: 130px 0 0 !important;
    min-height: 224px !important;
    height: auto;
    width: 90%;
    max-width: 740px;
    margin: 0 auto 60px;
  }
}


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