


.line {
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  width: 100%;
  display: block;
  height: 2px;
}
#story2{
  overflow-y: hidden; /* Hide horizontal scrollbar */
}
.circle{
  position:relative;
  display: inline-block;
  width:100px;
  height:100px;}
  .circle svg{
    fill:none;
    stroke:#8a3ab9;
    stroke-linecap: round;
    stroke-width:3;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: stroke-draw 6s ease-out infinite alternate; 
    /* animation: stroke-draw 6s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; */
  }
  .circle img{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:70px;
    border-radius:50%;
  }

@keyframes stroke-draw {
  from{
    stroke:#8a3ab9;
    stroke-dasharray: 1;
  }
  to{
    stroke:#cd486b;
    transform:rotate(180deg);
    stroke-dasharray: 8;
  }
}

/* SopScrollBar 2 - class="ssb2" 💖 More Here :- https://sh20raj.github.io/SopScrollbar/
--How to Use--
Copy the Class Name and Assign to the element where you want to see your ScrollBar. Example
- Body Tag. (To getting in whole website)
- Iframe
- Textarea
- Div
- and All other elements.
*/
.ssb2::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.ssb2::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.ssb2::-webkit-scrollbar-thumb {
  background-color: #aee4ff;
  border-radius: 10px;
}