/* BACK TO TOP
=============================================== */

.scrolltop {
  background: var(--secondary-color);
  border-radius: 50%;
  border: none;
  width: 48px;
  height: 48px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s ease;
}

.scrolltop .scrolltop-outline {
  background: linear-gradient(var(--dk-color), var(--dk-color)) padding-box, linear-gradient(45deg, var(--primary-color), var(--secondary-color)) border-box;
  border: 3px solid transparent;
  color: var(--primary-color);
}

.scrolltop span {
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg height='32' viewBox='0 0 320 512' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m301 352-141-150-141 150-19-21 160-171 160 171z' fill='%23fcfcfc'/%3E%3C/svg%3E") no-repeat;
  background-position: center center;
  background-size: 40%;
  border-radius: 50%;
  opacity: 0.7
}

.scrolltop:hover {
  background: var(--gradient-2);
}

.scrolltop-outline:hover {
  background: linear-gradient(var(--dk-color), var(--dk-color)) padding-box, linear-gradient(45deg, var(--tertiary-color), var(--secondary-color)) border-box;
}

.show-btn {
  opacity: 1;
  transform: translateY(0);
}

/* PROGRESS INDICATORS
=============================================== */

/* Topbar Indicator */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-1);
  width: 0%;
  z-index: 9999;
}

/* Circle Indicator */

.circle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
}

.circle-percentage {
  position: absolute;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--txt-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle-svg {
  stroke-dasharray: 252;
  stroke-dashoffset: var(--circle-stroke);
}

.circle-offset-0 {
  stop-color: var(--primary-color);
  stop-opacity: 1
}

.circle-offset-100 {
  stop-color: var(--secondary-color);
  stop-opacity: 1
}