.nav li:hover a {
    color: #16a085;  
}

.nav li:hover a .icon-fill::before {
    box-shadow: inset 0 0 0 3.75em #16a085; 
}

.sidebar .nav li a  {
    display: grid;
    padding-left: 0.3em;
    grid-template-columns: 0.7fr 5fr;
    align-items: center;
    justify-content: start;
    
}
.icon {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 1.875em; 
    height: 1.875em; 
    border-radius: 1.875em; 
    margin-right: 0.3em;
    overflow: hidden;
}
.icon::before, .icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.25s ease;
    border-radius: 1.875em;
}.icon i {
    position: relative;
    color: #fff;
    font-size: 1.0625em; 
    margin-top: 0.4375em;
    transition: all 0.25s ease;
}

.icon-fill::before {
    transition-duration: 0.5s;
    box-shadow: inset 0 0 0 0.0625em #16a085; 
}

.icon-fill:hover::before {
    box-shadow: inset 0 0 0 3.75em #16a085; 
}

.icon-enter::after {
    box-shadow: inset 0 0 0 0.0625em #eb9532; 
}

.icon-enter::before {
    border-radius: 0;
    margin-left: -6.25em; 
    box-shadow: inset 0 0 0 3.75em #eb9532; 
}

.icon-enter:hover::before {
    margin-left: 0;
}

.icon-expand::after {
    box-shadow: inset 0 0 0 0.0625em #c82647; 
}

.icon-expand::before {
    background: #c82647;
    box-shadow: inset 0 0 0 3.75em #2d2c3e; 
}

.icon-expand:hover::before {
    box-shadow: inset 0 2.1875em 0 0 #8cc63f, inset 0 -2.1875em 0 0 #8cc63f; 
}

.icon-collapse::before {
    border-radius: 0;
}

.icon-collapse:hover::before {
    box-shadow: inset 0 1.875em 0 0 #8cc63f, inset 0 -1.875em 0 0 #8cc63f; 
}

.icon-collapse::after {
    box-shadow: inset 0 0 0 0.0625em #8cc63f;
}

.icon-rotate {
    box-shadow: inset 0 0 0 0.0625em #7e3661;
}

.icon-rotate::after, .icon-rotate::before {
    border: 0px solid transparent;
}

.icon-rotate:hover::before {
    transition: border-top-width 0.3s ease, border-top-color 0.3s ease;
    border-width: 3.75em;
    border-top-color: #7e3661;
}

.icon-rotate:hover::after {
    transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
    border-width: 3.75em; 
    border-left-color: #7e3661;
}

.icon-rotate:hover {
    transition: background 0.001s ease 0.3s;
    background: #7e3661;
}

.icon-rotate i {
    z-index: 1;
}

.basline{
    justify-self: baseline;
}


.icon-fill::before,
.icon-fill::after,
.icon-enter::before,
.icon-enter::after,
.icon-expand::before,
.icon-expand::after,
.icon-collapse::before,
.icon-collapse::after,
.icon-rotate::before,
.icon-rotate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: all 0.25s ease;
    border-radius: 1.875em;
}


.nav li.active a .icon-fill::before,
.nav li:hover a .icon-fill::before {
    box-shadow: inset 0 0 0 3.75em #16a085;
}


.nav li.active a .icon-enter::before,
.nav li:hover a .icon-enter::before,
.nav li.active a .icon-enter::after,
.nav li:hover a .icon-enter::after {
    box-shadow: inset 0 0 0 3.75em #eb9532;
}

.nav li.active a .icon-expand::before,
.nav li:hover a .icon-expand::before,
.nav li.active a .icon-expand::after,
.nav li:hover a .icon-expand::after {
    box-shadow: inset 0 0 0 3.75em #c82647;
}

.nav li.active a .icon-collapse::before,
.nav li:hover a .icon-collapse::before,
.nav li.active a .icon-collapse::after,
.nav li:hover a .icon-collapse::after {
    box-shadow: inset 0 0 0 3.75em #8cc63f;
}

.toggle-btn {
  z-index: 1000000;
}

.nav li.active a .icon-rotate::before,
.nav li:hover a .icon-rotate::before,
.nav li.active a .icon-rotate::after,
.nav li:hover a .icon-rotate::after {
    box-shadow: inset 0 0 0 3.75em #7e3661;
}

.list-unstiled li {
    opacity:1;
    transition: opacity 0.2s ease-in-out
}

.list-unstiled li:hover {
    opacity: 0.5;
}

.line-1{
    text-align: start;
    position: relative;
    top: 0.6em;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 1em;
    width: 20em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

.anim-typewriter{
    animation: typewriter 4s steps(44) 1s 1 normal both,
               blinkTextCursor 850ms steps(44) infinite normal;
  }
  @keyframes typewriter{
    from{width: 0;}
    to{width: 10em;}
  }
  @keyframes blinkTextCursor{
    from{border-right-color: rgba(255,255,255,.75);}
    to{border-right-color: transparent;}
  }

.gradient-border {
font-family: Lato, sans-serif;
  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
.user-pic {
    --s: 20rem;
    --b: 0.3rem; 
    --c: #ae3ec9;
    --cb: #e9ecef;
    --f: 1;

    width: var(--s);
    aspect-ratio: 1;
    padding-top: calc(var(--s) / 5);
    cursor: pointer;
    border-radius: 0 0 50%;
    --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
    --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
    outline: var(--b) solid var(--c);
    outline-offset: var(--_o);
    background:
        radial-gradient(
        circle closest-side,
        var(--cb) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000
       ) var(--_g);
    -webkit-mask:
        linear-gradient(#000 0 0) no-repeat
       50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,
        radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
    transform: scale(var(--f));
    transition: .5s;
}

.user-pic:hover {
    --f: 1.1;
}


 
.animate-btn {
  display: inline-block;
  min-width: 154px;
  text-decoration: none;
  right: 1.2em;
  position: relative;
  text-align: center;
}
.animate-btn:hover .button-stroke:nth-child(2) {
  stroke-dashoffset: 0;
}
.button-stroke {
  display: block;
  width: calc(100% - 40px);
  height: 20px;
  stroke: #ffea20;
  position: absolute;
  left: 20px;
  bottom: -10px;
  stroke-width: 4;
}
.button-stroke:nth-child(2) {
  stroke-dasharray: 650px;
  stroke-dashoffset: 650px;
  stroke: #11171a;
  stroke-width: 5;
  transition: stroke-dashoffset 800ms ease-out;
}


.watermark-ctr {
  --clr-button-bg: #0A1930; 
  margin-bottom: 0.5em;
  --clr-button: 72, 39, 236;
  position: relative;
  left: 1.7em;
  top: 0.4em;
  z-index: 1000;
}
.watermark-ctr a {
  text-decoration: none;
  color: inherit;
  position: relative;
  justify-content: center;
  left: -2em;
  display: flex;
}
.generate-button {
  left: 0.2em;
  --generate-button-star-1-opacity: 0.25;
  --generate-button-star-1-scale: 1;
  --generate-button-star-2-opacity: 1;
  --generate-button-star-2-scale: 1;
  --generate-button-star-3-opacity: 0.5;
  --generate-button-star-3-scale: 1;
  --generate-button-dots-opacity: 0;
  appearance: none;
  outline: none;
  border: none;
  padding: 0.5em 2.5em 0.5em 2.5em;
  border-radius: 29px;
  margin: 0;
  background-color: var(--clr-button-bg);
  color: var(--clr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
  transform: scale(var(--generate-button-scale, 1)) translateZ(0);
  box-shadow: 0px 0px 120px var(--generate-button-shadow-wide, transparent),
    0px 4px 12px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.1),
    inset 0px 1px 1px
      var(--generate-button-shadow-inset, rgba(255, 255, 255, 0.04)),
    0 0 0 var(--generate-button-shadow-outline, 0px)
      rgba(var(--clr-button), 0.4);
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.generate-button:before {
  content: "";
  display: block;
  position: absolute;
  right: 20%;
  height: 20px;
  left: 20%;
  bottom: -10px;
  background: rgba(204, 204, 204, 0.4);
  filter: blur(12.5px);
  z-index: 2;
  clip-path: inset(-200% -30% 10px -30% round 29px);
  opacity: 0;
  transition: opacity 0.4s;
  transform: translateZ(0);
}
.generate-button span {
  position: relative;
  z-index: 1;
  font-family: "Poppins", Arial;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.005em;
  display: block;
  user-select: none;
}
.generate-button .stroke {
  mix-blend-mode: hard-light;
}
.generate-button .stroke svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 0.75px;
 
  stroke-dasharray: 1.5 14;
  stroke-dashoffset: 22;
  opacity: 0;
}
.generate-button .stroke svg:nth-child(2) {
  stroke-width: 1px;
  stroke-opacity: 0.5;
  filter: blur(3px);
}

.generate-button svg.icon {
  width: 18px;
  height: 20px;
  margin-right: 10px;
  fill: currentColor;
}
.generate-button svg.icon path:nth-child(1) {
  opacity: var(--generate-button-star-1-opacity);
  transform: scale(var(--generate-button-star-1-scale)) translateZ(0);
  transform-origin: 25% 14.58%;
}
.generate-button svg.icon path:nth-child(2) {
  opacity: var(--generate-button-star-2-opacity);
  transform: scale(var(--generate-button-star-2-scale)) translateZ(0);
  transform-origin: 60.42% 50%;
}
.generate-button svg.icon path:nth-child(3) {
  opacity: var(--generate-button-star-3-opacity);
  transform: scale(var(--generate-button-star-3-scale)) translateZ(0);
  transform-origin: 25% 85.42%;
}
.generate-button:hover {
  --generate-button-scale: 1.01;
  --generate-button-shadow-wide: rgba(var(--clr-button), 0.4);
  --generate-button-shadow-inset: rgba(255, 255, 255, 0.35);
  --generate-button-shadow-outline: 3px;
  color: var(--clr-text);
  background-color: rgba(var(--clr-button));
}
.generate-button:hover .stroke svg {
  animation: stroke 2s linear infinite;
}
.generate-button:hover:before {
  opacity: 1;
}
.generate-button:hover span:before {
  opacity: 0;
}
.generate-button:hover:active {
  --generate-button-scale: 1.05;
}
@keyframes stroke {
  0% {
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
  95%,
  100% {
    stroke-dashoffset: 6;
    opacity: 0;
  }
}